@charset "UTF-8";
/* Genere par scripts/build-new-styles-bundle.mjs : ne pas editer a la main, modifier les feuilles sources. */

/* ---- css/new-styles/base1.css ---- */
@import "../bootstrap-tagsinput.css";

.fa {
  font-family: "Font Awesome 5 Free";
}

.lighty-alert-container {
  position: fixed;
  width: 99vw;
  height: 99vh;
  top: 0px;
  left: 0px;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.lighty-alert-container .lighty-alert {
  font-weight: 600;
  font-size: 18px;
  color: white;
  padding: 6px 16px;
  background: #080025;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  right: 6%;
  top: 100px;
  width: fit-content;
  position: absolute;
  border-radius: 8px;
  pointer-events: all;
  animation: 4s ease-out 0s 1 normal forwards running displayLightyAlert;
}

.lighty-alert-container .lighty-alert.info {
  background: #080025;
}

.lighty-alert-container .lighty-alert.success {
  background: #28933A;
}

.lighty-alert-container .lighty-alert.error {
  background: #FC2249;
}

@keyframes displayLightyAlert {
  0% {
    transform: translateX(200%);
    opacity: 0;
  }

  15% {
    transform: translateX(0px);
    opacity: 1;
  }

  85% {
    transform: translateX(0px);
    opacity: 1;
  }

  100% {
    transform: translateX(200%);
    opacity: 0;
  }
}

.fa {
  font-family: "Font Awesome 5 Free";
}

body {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #080025;
  margin-top: 70px;
  font-weight: normal;
}

body.no-margin {
  margin-top: 0;
}

body,
p,
span,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
option,
button,
a,
i,
b,
strong,
u,
td,
th,
dd,
small,
dt {
  /*font-family: "Nunito Sans", sans-serif;*/
}

h1,
h2,
h3 {
  font-weight: bold;
  color: #080025;
}

h4,
h5,
h6 {
  color: #080025;
  font-weight: 600;
  margin-bottom: 10px;
}

.alert {
  border-radius: 12px;
  padding: 8px 12px;
  border: none;
  font-weight: bold;
}

.alert.alert-info {
  color: #3A8BBB;
  background-color: rgba(58, 139, 187, 0.1);
}

.alert.alert-danger {
  color: #FC2249;
  background-color: rgba(252, 34, 73, 0.1);
}

.alert.alert-success {
  color: #28933A;
  background-color: rgba(40, 147, 58, 0.1);
}

.alert .alert-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 20px;
}

.alert .alert-icon span {
  vertical-align: middle;
}

@media (min-width: 1440px) {
  .container {
    max-width: 1190px !important;
  }

  .lsv7-profile .container {
    max-width: 1320px !important;
  }
}

h1 {
  font-size: 32px;
  font-weight: bold;
  line-height: normal;
}

h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
}

h3 {
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
}

@media (min-width: 768px) {
  h2 {
    font-size: 22px;
    line-height: normal;
  }
}

@media (min-width: 1200px) {
  h2 {
    font-size: 24px;
    line-height: normal;
  }
}

h4 {
  font-size: 20px;
  line-height: normal;
}

@media (min-width: 768px) {
  h4 {
    font-size: 24px;
    line-height: normal;
  }
}

@media (min-width: 1200px) {
  h4 {
    font-size: 24px;
    line-height: normal;
  }
}

img {
  max-width: 100%;
}

.text-danger {
  color: #FC2249 !important;
}

.text-success {
  color: #28933A !important;
}

.text-dark {
  color: #080025 !important;
}

.text-gray {
  color: #A3A3A3;
}

.text-muted {
  color: #CCCCCC !important;
}

.semi-bold {
  font-weight: 600;
}

.bold {
  font-weight: bold;
}

.invalid-feedback {
  color: #FC2249;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  color: #080025;
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 12px;
}

.form-group label.disabled {
  color: #ccc;
}

.form-group ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.form-group ul li {
  color: #000000;
}

input::placeholder {
  color: #9b9b9b;
}

.form-control,
.bootstrap-tagsinput {
  border-radius: 12px;
  border-color: #F4F4F4;
  padding: 12px 12px;
  height: auto;
  box-shadow: none;
  outline: none;
  color: black !important;
  caret-color: #fc2249;
  box-sizing: border-box;
}

.form-control.is-invalid,
.bootstrap-tagsinput.is-invalid,
.form-control .was-validated .form-control:invalid,
.bootstrap-tagsinput .was-validated .form-control:invalid {
  background-image: none;
  border-color: #FC2249;
  background: #FFEDF0;
  color: #FC2249 !important;
}

.form-control.is-invalid:focus,
.bootstrap-tagsinput.is-invalid:focus,
.form-control .was-validated .form-control:invalid:focus,
.bootstrap-tagsinput .was-validated .form-control:invalid:focus {
  box-shadow: none;
  border-color: #FC2249;
}

.form-control:disabled,
.bootstrap-tagsinput:disabled {
  background: #F4F4F4;
  color: #CCCCCC !important;
  cursor: not-allowed;
}

.form-control:disabled::placeholder,
.bootstrap-tagsinput:disabled::placeholder {
  color: #CCCCCC !important;
}

.form-control:disabled:hover,
.bootstrap-tagsinput:disabled:hover {
  border-color: #F4F4F4;
}

@media (min-width: 1200px) {
  .form-control {
    font-size: 16px;
  }
}

.form-control::placeholder {
  color: #9b9b9b;
}

.form-control:hover,
.bootstrap-tagsinput:hover {
  border-color: #080025;
  box-shadow: none;
  outline: none;
}

.form-control:focus,
.form-control:active {
  border-color: #080025;
  box-shadow: none;
  outline: none;
}

.date-select-group .bootstrap-select>.dropdown-menu {
  margin-top: 2px;
}

.date-select-group .bootstrap-select:nth-of-type(1) .dropdown-toggle {
  position: relative;
  z-index: 1;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.date-select-group .bootstrap-select:nth-of-type(1) .dropdown-toggle:hover,
.date-select-group .bootstrap-select:nth-of-type(1) .dropdown-toggle:focus {
  z-index: 10;
}

.date-select-group .bootstrap-select:nth-of-type(2) .dropdown-toggle {
  position: relative;
  z-index: 1;
  border-radius: 0px;
}

.date-select-group .bootstrap-select:nth-of-type(2) .dropdown-toggle:hover,
.date-select-group .bootstrap-select:nth-of-type(2) .dropdown-toggle:focus {
  z-index: 10;
}

.date-select-group .bootstrap-select:nth-of-type(3) .dropdown-toggle {
  position: relative;
  z-index: 1;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.date-select-group .bootstrap-select:nth-of-type(3) .dropdown-toggle:hover,
.date-select-group .bootstrap-select:nth-of-type(3) .dropdown-toggle:focus {
  z-index: 10;
}

.date-select-group .disabled .dropdown-toggle {
  border-color: #cccccc !important;
}

a {
  color: #fc2249;
  text-decoration: none !important;
}

a:hover {
  color: #fc2249;
}

.read-more-link {
  color: #fc2249;
  font-weight: bold;
  padding-right: 18px;
  position: relative;
  display: inline-block;
  background: url(/img/new/icons/chev-right.svg) right center no-repeat;
  background-size: 24px auto;
  padding-right: 28px;
  margin-top: 25px;
}

.form-checkbox-label {
  font-weight: normal !important;
  font-size: 14px;
  line-height: 19px;
  display: block;
}

.custom-checkbox {
  position: relative;
  display: inline-block;
  height: 16px;
  width: 16px;
  border: 1px solid #ddd;
  margin-top: 2px;
  margin-right: 6px;
  border-radius: 4px;
  vertical-align: text-top;
  transition: all 0.2s linear;
}

.custom-checkbox .check {
  position: absolute;
  width: 16px;
  height: 16px;
  top: -1px;
  left: -1px;
  display: none;
  border-radius: 4px;
  background: #fc2249;
}

.custom-checkbox i {
  display: none;
  visibility: hidden;
  font-size: 9px;
  text-align: center;
  height: 100%;
  color: white;
  justify-content: center;
  align-items: center;
}

.custom-checkbox input {
  display: none;
  visibility: hidden;
}

.custom-checkbox input:checked+.check {
  display: block;
  visibility: visible;
}

.custom-checkbox input:checked+.check i {
  display: flex;
  visibility: visible;
}

.custom-checkbox+label {
  margin: 0;
  display: inline-block;
  line-height: 18px;
  margin-left: 3px;
}

label+.custom-checkbox {
  margin-left: 3px;
}

.display-password-toggler {
  cursor: pointer;
  font-size: 12px;
  text-decoration-line: underline;
}

.btn {
  padding: 8px 20px;
  border-radius: 12px;
  font-weight: 600;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

@media (min-width: 768px) {
  .btn {
    padding: 8px 45px;
  }
}

.btn.btn-short {
  padding: 12px 24px !important;
}

@media (min-width: 768px) {
  .btn.btn-short {
    padding: 8px 15px;
  }
}

.btn.btn-primary {
  background: #fc2249 !important;
  color: white;
  transition: all 0.2s linear;
}

.btn.btn-outline-primary {
  background: white !important;
  transition: all 0.2s linear;
}

.btn.btn-primary-disa {
  background: #F4F4F4 !important;
  color: #A3A3A3;
  transition: all 0.2s linear;
}

.btn.btn-primary:hover {
  background: rgba(252, 34, 73, 0.8) !important;
}

.btn.btn-outline-primary:hover {
  background: #fc2249 !important;
}

.btn.btn-primary.disabled {
  background: #F4F4F4 !important;
  opacity: 1;
  cursor: default;
}

.btn.btn-info {
  background: rgba(58, 139, 187, 0.08);
  color: #3A8BBB;
  transition: all 0.2s linear;
}

.btn.btn-info:hover,
.btn.btn-info:focus {
  background: rgba(58, 139, 187, 0.2);
}

.btn.btn-service {
  min-width: 230px;
}

.btn.btn-link {
  color: #fc2249;
  text-decoration: none !important;
  padding: 8px;
}

@media (min-width: 768px) {
  .btn.btn-link {
    padding: 8px;
  }
}

.btn.long {
  padding: 8px 40px;
}

@media (min-width: 768px) {
  .btn.long {
    padding: 8px 75px;
  }
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.custom-file-input {
  position: relative;
  opacity: 1;
  display: inline-block;
  width: auto !important;
}

.custom-file-input input {
  display: none;
}

.custom-file-input .btn {
  background-color: #3A8BBB !important;
  color: white;
}

.custom-file-input .btn:hover,
.custom-file-input .btn:focus {
  background-color: rgba(58, 139, 187, 0.8) !important;
}

.custom-file-input i {
  font-size: 10px;
  margin-left: 8px;
  width: 15px;
  height: 15px;
}

.custom-file-input.has-file .btn {
  font-weight: normal;
  background-color: rgba(58, 139, 187, 0.08) !important;
  color: #3A8BBB;
}

.bootstrap-select {
  position: relative;
}

.bootstrap-select .filter-option-inner-inner {
  color: black !important;
}

.bootstrap-select>.dropdown-toggle {
  border-radius: 10px;
  border: 1px solid #F4F4F4 !important;
  padding: 12px 12px;
  height: auto;
  box-shadow: none !important;
  outline: none !important;
  color: black !important;
  opacity: 1;
  caret-color: #fc2249;
  box-sizing: border-box;
  background-color: white !important;
  background-image: url("/img/new/icons/chevron-down-black.png") !important;
  background-position: right 10px center !important;
  background-repeat: no-repeat !important;
  background-size: auto 25px !important;
}

.bootstrap-select>.dropdown-toggle.disabled {
  background-color: #f4f4f4 !important;
}

.bootstrap-select>.dropdown-toggle.disabled:hover,
.bootstrap-select>.dropdown-toggle.disabled:focus {
  border-color: #CCCCCC !important;
}

.bootstrap-select>.dropdown-toggle .filter-option {
  color: #CCCCCC;
}

@media (min-width: 1200px) {
  .bootstrap-select>.dropdown-toggle {
    font-size: 16px;
  }
}

.bootstrap-select>.dropdown-toggle:hover {
  border-color: #080025 !important;
  box-shadow: none;
  outline: none;
}

.bootstrap-select>.dropdown-toggle:focus,
.bootstrap-select>.dropdown-toggle:active {
  border-color: #080025 !important;
  box-shadow: none !important;
  outline: none !important;
}

.bootstrap-select>.dropdown-toggle[aria-expanded="true"] {
  border-radius: 10px 10px 0 0;
  border-color: #d5d5d5 !important;
  box-shadow: 0 10px 17px 0px rgba(0, 0, 0, 0.1) !important;
}

.bootstrap-select>.dropdown-toggle .filter-option {
  float: left;
  text-align: left;
}

.bootstrap-select>.dropdown-toggle:after {
  display: none;
  visibility: hidden;
}

.bootstrap-select>.dropdown-toggle .filter-option,
.bootstrap-select>.dropdown-toggle .filter-option-inner-inner {
  color: black;
  font-weight: normal !important;
}

.bootstrap-select>.dropdown-toggle[title="Statut"] .filter-option-inner-inner {
  color: #9b9b9b;
}

.bootstrap-select>.dropdown-menu {
  position: absolute;
  top: 47px !important;
  transform: none !important;
  width: 100%;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 17px 0px rgba(0, 0, 0, 0.1);
  margin-top: 0px;
}

.bootstrap-select>.dropdown-menu .inner {
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
}

.bootstrap-select>.dropdown-menu ul,
.bootstrap-select>.dropdown-menu .dropdown-menu {
  top: 0 !important;
  border: none;
  padding: 0 10px !important;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.bootstrap-select>.dropdown-menu ul li,
.bootstrap-select>.dropdown-menu .dropdown-menu li {
  cursor: pointer;
}

.bootstrap-select>.dropdown-menu ul li a,
.bootstrap-select>.dropdown-menu .dropdown-menu li a {
  cursor: pointer;
  display: block;
  padding: 7px 10px;
  margin: 6px 0px;
  transition: all 0.2s linear;
  border-radius: 8px;
  font-size: 16px;
  outline: none !important;
  box-shadow: none !important;
}

.bootstrap-select>.dropdown-menu ul li a:hover,
.bootstrap-select>.dropdown-menu .dropdown-menu li a:hover,
.bootstrap-select>.dropdown-menu ul li a.selected,
.bootstrap-select>.dropdown-menu .dropdown-menu li a.selected,
.bootstrap-select>.dropdown-menu ul li a.active,
.bootstrap-select>.dropdown-menu .dropdown-menu li a.active,
.bootstrap-select>.dropdown-menu ul li a.selected.active,
.bootstrap-select>.dropdown-menu .dropdown-menu li a.selected.active {
  background: #fed3db !important;
  color: #fc2249 !important;
}

.bootstrap-select>.dropdown-menu ul li.disabled,
.bootstrap-select>.dropdown-menu .dropdown-menu li.disabled {
  display: none;
  visibility: hidden;
}

.iti {
  display: block;
}

.iti .iti__selected-flag {
  padding: 0 12px 0 20px;
}

.iti .iti__selected-flag:after {
  content: '';
  position: absolute;
  display: inline-block;
  height: 28px;
  width: 1px;
  right: 5px;
  background: #F4F4F4;
  border-radius: 0.5px;
}

.iti .iti__selected-flag:hover {
  background-color: none;
  border-radius: 8px;
}

.iti__divider {
  border-bottom: 1px solid #F4F4F4;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.iti .form-control {
  position: relative;
  padding-left: 89px !important;
}

.iti .iti__arrow {
  content: "";
  width: 20px;
  height: 20px;
  background: url(/img/new/icons/chevron-down-black.png) center center no-repeat;
  background-size: contain;
  border: 0px;
  margin-left: 10px;
}

.dropdown>.dropdown-menu {
  z-index: 4;
}

.dropdown .dropdown-submenu>.dropdown-item {
  position: relative;
}

.dropdown .dropdown-submenu>.dropdown-item::after {
  position: absolute;
  display: block;
  content: '';
  width: 24px;
  height: 24px;
  background: url(/img/new/icons/chevron-right.png) center center no-repeat;
  background-size: contain;
  right: 0px;
  top: 50%;
  margin-right: 8px;
  transform: translateY(-50%);
}

.dropdown .dropdown-submenu>.dropdown-menu {
  display: none;
  position: absolute;
  left: 102%;
  top: -8px;
}

.dropdown .dropdown-submenu>.dropdown-menu::before {
  position: absolute;
  display: block;
  content: '';
  width: 40px;
  height: 100%;
  top: 0px;
  left: -20px;
}

.dropdown .dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown .dropdown-submenu:hover>.dropdown-item {
  background: #FFEDF0;
  color: #fc2249;
}

.dropdown .dropdown-submenu:hover>.dropdown-item::after {
  background: url(/img/new/icons/chevron-right-theme.png) center center no-repeat;
  background-size: contain;
}

.iti__country-list {
  top: 47px !important;
  transform: none !important;
  border-radius: 0 0 10px 10px;
  border: 1px solid #d5d5d5 !important;
  box-shadow: 0 10px 17px 0px rgba(0, 0, 0, 0.1);
  padding: 12px !important;
}

.iti__country-list .iti__country {
  padding: 7px 10px;
  margin: 6px 0px;
  transition: all 0.2s linear;
  border-radius: 8px;
  font-size: 16px;
  color: #080025;
}

.iti__country-list .iti__country:hover,
.iti__country-list .iti__country.iti__highlight {
  background: #fed3db !important;
  color: #fc2249 !important;
}

.underline {
  text-decoration: underline !important;
}

.font-54 {
  font-size: 40px;
  line-height: 54px;
  font-weight: bold;
}

@media (min-width: 768px) {
  .font-54 {
    font-size: 48px;
    line-height: 64px;
  }
}

@media (min-width: 1200px) {
  .font-54 {
    font-size: 54px;
    line-height: 74px;
  }
}

.font-38 {
  font-size: 26px;
  line-height: 34px;
  font-weight: bold;
  letter-spacing: -0.2px;
}

@media (min-width: 768px) {
  .font-38 {
    font-size: 32px;
    line-height: 44px;
  }
}

@media (min-width: 1200px) {
  .font-38 {
    font-size: 38px;
    line-height: 51px;
  }
}

.font-32 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

@media (min-width: 768px) {
  .font-32 {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (min-width: 1200px) {
  .font-32 {
    font-size: 24px;
    line-height: 32px;
  }
}

.font-24 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

@media (min-width: 768px) {
  .font-24 {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (min-width: 1200px) {
  .font-24 {
    font-size: 24px;
    line-height: 32px;
  }
}

.font-16 {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .font-16 {
    font-size: 16px;
    line-height: 22px;
  }
}

@media (min-width: 1200px) {
  .font-16 {
    font-size: 16px;
    line-height: 22px;
  }
}

.modal-content.youtube-video-wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

.modal-content.youtube-video-wrapper iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.alert-title {
  background-color: #403D4D;
  color: white;
  padding: 10px 20px;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 8px;
  text-align: center;
  position: absolute;
  top: 5px;
  left: 43%;
}

.__block {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 12px;
  margin-top: 15px;
  margin-bottom: 10px;
  transition: all 0.3s ease-out;
}

.__block div img {
  border-radius: 8px;
}

.__block div .__block_left {
  display: inline;
  width: 50%;
  color: #A3A3A3;
  font-size: 12px;
  margin-left: 10%;
}

.__block div .__block_left h5 {
  color: #080025;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 0px;
}

.__block div .__block_right {
  display: inline;
  width: 30%;
  color: #CCCCCC;
  font-size: 12px;
  text-align: right;
  margin-right: 10%;
}

.__block div .__block_right h4 {
  color: #FC2249;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: -5px;
  margin-top: -5px;
}

.__block:hover {
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  z-index: 9999;
  cursor: pointer;
}

.carousel-inner img {
  width: 100%;
  height: 100%;
}

.carousel-inner {
  border-radius: 15px;
}

.carousel-caption {
  position: absolute;
  right: unset;
  top: 15px;
  left: 4%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: left;
  width: 40%;
}

.carousel-caption img {
  height: unset;
  width: unset;
  margin-bottom: 10px;
}

.carousel-caption h3 {
  font-size: 32px;
  color: #fff;
  line-height: 44px;
}

.carousel-caption p {
  font-size: 16px;
  line-height: 22px;
  color: #CCCCCC;
}

.carousel-caption button {
  background: #FC2249;
  border-radius: 8px;
  color: #fff;
  padding: 8px 12px;
  border: none;
}

#demo .carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: start;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 4%;
  list-style: none;
}

#demo .carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  margin-left: 6px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}

#demo .carousel-indicators .active {
  background: #FC2249;
  border-radius: 8px;
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  margin-left: 6px;
  margin-right: 6px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.badge {
  font-weight: bold;
  font-size: 13px;
  line-height: 18px;
  margin: 4px 8px;
  border-radius: 8px;
}

.badge-info {
  color: #3A8BBB;
  background-color: rgba(58, 139, 187, 0.1);
}

.badge-disabled {
  color: #A3A3A3;
  background-color: rgba(163, 163, 163, 0.1);
}

.badge-success {
  color: #28933A;
  background-color: rgba(40, 147, 58, 0.1);
}

span.badge-notification {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #fc2249;
  border-radius: 50%;
  font-weight: bold;
  font-size: 12px;
  color: white;
  text-align: center;
}

.row-no-padding [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.row-no-padding-y [class*="col-"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.list-group-item+.list-group-item.active {
  margin-top: 0px;
}

.list-group .list-group-item {
  font-size: 14px;
  padding: 8px 12px;
  margin: 4px 0px !important;
  border: none;
  border-radius: 12px;
  transition: all 0.2s linear;
  color: #080025;
}

.list-group .list-group-item.active,
.list-group .list-group-item:hover {
  background-color: rgba(252, 34, 73, 0.1);
  color: #fc2249;
  font-weight: bold;
}

.label.tag {
  padding: 4px 8px;
  font-size: 16px;
  border-radius: 12px;
}

.label.tag.label-info {
  background-color: rgba(58, 139, 187, 0.1);
  color: #3A8BBB;
}

.bootstrap-tagsinput {
  width: 100%;
  display: block;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
  font-family: "Font Awesome 5 Free";
  content: "\f00d";
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
  font-weight: 900;
}

.bootstrap-tagsinput input {
  padding: 0;
}

hr {
  border-top-color: #F4F4F4;
}

.iti__flag {
  background-image: url("/img/new/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("/img/new/flags@2x.png");
  }
}

.mt-32px {
  margin-top: 32px;
}

.mb-32px {
  margin-bottom: 32px;
}

.py-32px {
  padding-top: 32px;
  padding-bottom: 32px;
}

.modal-backdrop.show {
  opacity: 0.25;
}

.modal .modal-content {
  border: 0;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 12px;
}

.modal .modal-header {
  border-bottom: none;
  padding: 2rem 2rem;
}

.modal .modal-header .modal-title {
  font-weight: bold;
  font-size: 18px;
  color: #080025;
}

.modal .modal-body {
  padding: 0rem 2rem;
}

.modal .modal-footer {
  border-top: none;
  padding: 2rem 2rem;
}

.pagination .page-link {
  font-size: 14px;
  text-align: center;
  color: #fc2249;
  background: none;
  margin-left: 6px;
  margin-right: 6px;
  border: none;
  border-radius: 50%;
  padding: 6px 10px;
  transition: all 0.2s linear;
}

.pagination .page-link.active {
  color: #fff;
  background-color: #fc2249;
}

.pagination .page-link:hover {
  background-color: rgba(252, 34, 73, 0.1);
}

.new-btn {
  background-color: #FFFFFF;
  color: #080025;
  font-size: 8px;
  padding: 2px 4px 2px 4px;
  font-weight: bold;
}

/* ---- css/new-styles/footer.css ---- */
/* .fa déclaré dans base1.css */
footer {
  background: #080025;
  padding: 45px 0 100px 0;
}
footer img {
  display: block;
  margin-bottom: 15px;
  width: 100%;
  max-width: 200px;
  height: auto;
}
footer h4 {
  font-weight: bold;
  color: white;
  letter-spacing: -0.2px;
  font-size: 18px;
  line-height: normal;
  margin: 0 0 14px 0;
}
@media (min-width: 768px) {
  footer h4 {
    font-size: 20px;
    line-height: normal;
  }
}
@media (min-width: 1200px) {
  footer h4 {
    font-size: 24px;
    line-height: normal;
  }
}
footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
footer ul li {
  margin: 0 0 10px 0;
}
footer ul li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  opacity: 0.8;
  font-weight: 300;
  transition: opacity 0.2s linear;
}
footer ul li a:hover {
  opacity: 1;
}
.post-footer {
  font-size: 16px;
  background: #080025;
  padding: 30px 0;
}
.post-footer p,
.post-footer a {
  font-weight: 300;
  opacity: 0.8;
  color: white;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.post-footer .post-footer-links {
  display: flex;
  justify-content: center;
}
.post-footer .post-footer-links a {
  display: inline-flex;
  align-items: center;
}
.post-footer .post-footer-links a::before {
  content: '•';
  display: block;
  color: white;
  margin: 0 5px;
  font-size: 8px;
}
@media (min-width: 768px) {
  .post-footer .post-footer-links a::before {
    margin: 0 18px;
  }
}
.post-footer .post-footer-links a:first-child::before {
  display: none;
}
.post-footer .post-footer-social-icons a {
  display: inline-block;
  margin: 0 15px;
  opacity: 1;
}
@media (min-width: 768px) {
  .post-footer .post-footer-social-icons a:last-child {
    margin-right: 0;
  }
}

/* Locale switcher in footer */
.locale-switcher-footer {
  display: inline-flex;
  align-items: center;
}
.locale-switcher-footer .locale-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  opacity: 0.9;
}
.locale-switcher-footer .locale-link:hover {
  border-color: rgba(255, 255, 255, 0.6);
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
.locale-switcher-footer .locale-flag {
  font-size: 16px;
  line-height: 1;
}
.locale-switcher-footer .locale-label {
  font-weight: 600;
  letter-spacing: 0.5px;
}
.post-footer .social-icons a {
  display: inline-block;
  margin: 0 10px;
  opacity: 1;
}
.post-footer .social-icons a:last-child {
  margin-right: 0;
}
/* ------------------------------------------------------------------
   Enveloppe du pied de page (`.site-footer-shell` dans footer.twig)

   Les trois bandes (liens, maillage SEO, mentions + logo geant) etaient
   toutes peintes en #080025 a plat. Empilees, ca faisait un aplat de
   plusieurs centaines de pixels d'un seul ton.

   Le degrade est porte par l'enveloppe et non par chaque bande : sinon il
   repart a zero trois fois et on voit les raccords. Les bandes deviennent
   donc transparentes ici, mais gardent leur fond plein ailleurs (footer du
   panier, du paiement) ou l'enveloppe n'existe pas.
   ------------------------------------------------------------------ */
.site-footer-shell {
  position: relative;
  background:
    /* Halo de marque tres dilue, cale sous le logo geant : il rechauffe le
       bas du bloc sans jamais devenir une couleur lisible. */
    radial-gradient(90% 72% at 50% 116%, rgba(252, 34, 73, 0.13), rgba(252, 34, 73, 0) 62%),
    /* #080025 reste le ton pivot au milieu : la couleur de marque n'est pas
       remplacee, elle est juste eclairee en haut et creusee en bas. */
    linear-gradient(180deg, #130a3e 0%, #080025 44%, #050017 100%);
}
.site-footer-shell > footer,
.site-footer-shell .seo-browse-band,
.site-footer-shell .post-footer {
  background: transparent;
}

/* Le vide entre la derniere colonne de liens et « LOCATION PAR VILLE »
   faisait 100px + 32px. C'est cette respiration morte qui donnait le plus
   l'impression d'un pave. Le resserrage est borne au-dessus de 1200px : en
   dessous la bande SEO est seule et garde ses 40px d'entree. */
@media (min-width: 1200px) {
  .site-footer-shell > footer {
    padding-bottom: 56px;
  }
  .site-footer-shell .seo-browse-band {
    padding-top: 28px;
  }
}

/* ---- css/new-styles/new-ui.css ---- */
/* .fa déclaré dans base1.css */

/* Tabler inline SVG star icons (remplacement FA stars) */
svg.tabler-star,
svg.tabler-star-empty {
  display: inline-block;
  vertical-align: -1px;
  flex-shrink: 0;
}

/* FIX: Reset Bootstrap list styles for Element Plus menus */
.el-menu,
.el-menu ul,
.el-menu ol,
.el-sub-menu,
.el-sub-menu ul,
.el-sub-menu ol,
.inner_left_drawer ul,
.inner_left_drawer ol,
.inner_left_drawer li,
.el-menu-vertical-demo ul,
.el-menu-vertical-demo ol,
.el-menu-vertical-demo li {
    list-style: none !important;
    list-style-type: none !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

.el-menu-item,
.el-sub-menu__title {
    list-style: none !important;
    list-style-type: none !important;
}

/* Ensure menu items don't have Bootstrap's default margin */
.el-menu li,
.el-sub-menu li,
.inner_left_drawer li {
    margin-bottom: 0 !important;
}

#content-min-len {
  top: 60px;
  bottom: 0;
}

.rentrerCode {
  font-size: 14px;
  margin-left: 15px;
  color: #080025;
  text-decoration: underline !important;
}

@media (min-width: 992px) {
  header nav.navbar.navbar-light {
    padding: 11px 32px;
  }
}

.wrapper {
  width: 100%;
  display: grid;
  grid-gap: 10px;
  padding-left: 10px;
  padding-right: 10px;
  grid-template-columns: auto 1fr auto;
}

.one {
  grid-column: 1;
  grid-row: 1;
}

.two {
  grid-column: 2;
  grid-row: 1;
}

.three {
  grid-column: 3;
  grid-row: 1;
}

header.topHeader {
  position: fixed;
  width: 100%;
  z-index: 100;
  left: 0;
  top: 0;
  background: white;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
}

header nav.navbar.navbar-light {
  margin: 0 auto;
}

@media (min-width: 992px) {
  header nav.navbar.navbar-light {
    padding: 11px 32px;
  }
}

@media (min-width: 1600px) {
  header nav.navbar.navbar-light {
    max-width: 1600px;
  }
}

@media (min-width: 1680px) {
  header nav.navbar.navbar-light {
    padding: 11px 0;
  }
}

@media (min-width: 1680px) {
  header nav.navbar.navbar-light {
    padding: 11px 0;
  }
}

@media (min-width: 576px) {
  .chat-box-area {
    padding: 0px;
  }
}




header nav.navbar.navbar-light .header-search-form {
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 3px 4px 3px 4px;
  box-sizing: border-box;
  position: relative;
  text-overflow: ellipsis;
}

header nav.navbar.navbar-light .header-search-form span.nav-item {
  position: relative;
  padding-right: 2px;
  margin-right: 8px;
}

header nav.navbar.navbar-light .header-search-form span.nav-item:after {
  display: block;
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #F4F4F4;
  height: 28px;
  width: 1px;
}

header nav.navbar.navbar-light .header-search-form span.nav-item .nav-link {
  height: 30px;
  line-height: 30px;
  padding: 0 30px 0 0 !important;
  font-weight: 500;
  color: black;
  opacity: 1;
  font-size: 14px;
}

header nav.navbar.navbar-light .header-search-form span.nav-item .nav-link:after {
  transform: scale(0.8);
}

header nav.navbar.navbar-light .header-search-form span.nav-item .dropdown-menu {
  left: -19px;
}

header nav.navbar.navbar-light .header-search-form input {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  flex-grow: 1;
  height: 30px;
  line-height: 40px;
  margin: auto;
  text-overflow: ellipsis;
}

#overlay {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #FC2249 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
  100% {
    transform: rotate(360deg);
  }
}

header nav.navbar.navbar-light .header-search-form input::placeholder {
  font-weight: 500;
  font-size: 14px;
  color: #9b9b9b;
}

header nav.navbar.navbar-light .header-search-form .search-button {
  background: none;
  border: none;
}

header nav.navbar.navbar-light .header-search-form .search-button i {
  color: #fc2249;
  right: 8px;
  padding: 4px;
  z-index: 1;
  -webkit-text-stroke: 1px white;
}

@media (min-width: 992px) {
  header nav.navbar.navbar-light ul.navbar-nav li {
    margin: 2px 14px;
  }
}

header nav.navbar.navbar-light ul.navbar-nav li a.nav-link {
  white-space: nowrap;
  color: #080025;
  font-size: 15px;
  font-weight: 500;
}

header nav.navbar.navbar-light ul.navbar-nav.auth-menu li a.nav-link {
  color: #fc2249;
  padding-top: 6px;
  padding-bottom: 6px;
}

header nav.navbar.navbar-light ul.navbar-nav.auth-menu li:last-child {
  margin-right: 0;
}

header nav.navbar.navbar-light ul.navbar-nav.auth-menu li:last-child a.nav-link {
  background: #fc2249;
  color: white;
  border-radius: 10px;
  font-weight: normal;
  padding: 6px 18px;
  font-size: 14px;
}

header nav.navbar.navbar-light ul.navbar-nav.user-menu li a.nav-link {
  position: relative;
  padding: 8px !important;
}

header nav.navbar.navbar-light ul.navbar-nav.user-menu li a.nav-link:after {
  display: none !important;
}

header nav.navbar.navbar-light ul.navbar-nav.user-menu li a.nav-link.user-drop-down {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 5px 44px 5px 20px !important;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 24px;
}

header nav.navbar.navbar-light ul.navbar-nav.user-menu li a.nav-link .user-name {
  font-weight: 500;
}

header nav.navbar.navbar-light ul.navbar-nav.user-menu li a.nav-link img.user-image {
  height: 32px;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 4px;
  right: 4px;
}

header nav.navbar.navbar-light ul.navbar-nav.user-menu li a.nav-link .badge-notification {
  position: absolute;
  right: -4px;
  top: -4px;
}

header nav.navbar.navbar-light ul.navbar-nav.user-menu li .dropdown-item.logout {
  color: #A3A3A3;
}

header nav.navbar.navbar-light ul.navbar-nav.user-menu li .dropdown-item.logout:hover {
  color: #fc2249;
}

header .navbar-brand {
  margin-right: 16px;
  position: relative;
}

header .navbar-brand img {
  width: 150px;
  height: auto;
}

header .navbar-brand .logo-mobile {
  display: none;
}

header .navbar-brand .logo-desktop {
  display: inline;
}

header .navbar-brand .navbar-brand-tagline {
  position: absolute;
  left: 41px;
  bottom: 2px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  color: #6b6b7b;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

header .dropdown-toggle {
  position: relative;
  padding-right: 30px !important;
}

header .dropdown-toggle:after {
  margin-left: 3px;
  height: 30px;
  width: 30px;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -15px;
  border: none !important;
  content: "";
  background: url(/img/new/icons/chevron-down-black.png) center center no-repeat;
  background-size: contain;
}

header .dropdown-menu {
  border-color: #d5d5d5;
  margin-top: 8px;
  padding: 12px;
  border: 0;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 8px;
}

header .dropdown-menu .dropdown-divider {
  border-top: 1px solid #F4F4F4;
}

header .dropdown-menu a {
  font-size: 15px;
  color: #080025;
  margin: 1px 0;
  padding: 8px 15px;
  border-radius: 8px;
  transition: all 0.2s linear;
}

header .dropdown-menu a:hover {
  background: #FFEDF0;
  color: #fc2249;
}

.header-banner-email-validation {
  position: fixed;
  width: 100%;
  color: #FC2249;
  font-size: 18px;
  text-align: center;
  padding: 21px 0;
  z-index: 99;
  background-color: #fff0f3;
  transform: translateY(-2px);
}

.header-banner-email-validation~header {
  box-shadow: none;
}

.post-footer .post-footer-links a::before {
  content: '•';
  display: block;
  color: white;
}

.page-section {
  padding: 32px 0;
}

.page-section.video-cta {
  padding-top: 80px;
}

.page-section.counter-section {
  padding: 80px 0 60px;
}

.page-section.counter-section.service-2-page {
  padding: 20px 0 100px;
}

.title-block span {
  display: block;
  font-size: 14px;
  line-height: normal;
}

@media (min-width: 768px) {
  .title-block span {
    font-size: 16px;
    line-height: normal;
  }
}

@media (min-width: 1200px) {
  .title-block span {
    font-size: 16px;
    line-height: normal;
  }
}

.title-block span.title-top {
  color: #fc2249;
  font-weight: bold;
}

.title-block span.title-bottom {
  font-weight: 600;
  font-size: 18px;
  color: #080025;
}

.title-block h1,
.title-block h2,
.title-block h3,
.title-block h4,
.title-block h5,
.title-block h6 {
  margin: 0;
}

.home-hero {
  padding: 200px 0 60px;
}

.home-hero>.container {
  position: relative;
}

.home-hero .parallax-image {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
  display: none;
  width: 525px;
}

@media (max-width: 767px) {
  .home-hero {
    background-image: none !important;
    padding: 30px 0 60px; 
  }
  .home-hero h1 {
    font-size: 32px !important;
    line-height: 38px !important;
    text-align: center;
    padding-right: 0 !important;
  }
}

@media (min-width: 1200px) {
  .home-hero .parallax-image {
    display: block;
  }
}

.home-hero .parallax-image img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .home-hero {
    padding: 70px 0 20px;
    background-size: 40% auto;
    background-position: top 50px right 20px;
  }
}

@media (min-width: 1200px) {
  .home-hero {
    background-image: none !important;
    background-size: 520px auto;
    background-position: top 65px left 53vw;
  }
}

.home-hero h1 {
  font-size: 40px;
  line-height: 40px;
  text-shadow: 0px 0px 8px white;
  margin: 0 0 10px 0;
  padding-right: 15vw;
}

@media (min-width: 768px) {
  .home-hero h1 {
    font-size: 54px;
    line-height: 74px;
  }
}

@media (min-width: 1200px) {
  .home-hero h1 {
    font-size: 54px;
    line-height: 74px;
  }
}

@media (min-width: 992px) {
  .home-hero h1 {
    padding-right: 0;
  }
}

.home-hero h1+p {
  margin: 0;
  color: #6f6f6f;
}

.home-hero .home-tab-wrapper {
  position: relative;
}

.home-hero ul.nav {
  margin-top: 40px;
}

.home-hero ul.nav li a.nav-link {
  font-weight: bold;
  color: #080025;
  background: transparent;
  transition: all 0.2s linear;
  border-radius: 20px;
}

.home-hero ul.nav li a.nav-link.active {
  color: #fc2249;
}

.home-hero .tab-content {
  max-width: 565px;
  min-height: 160px;
}

.home-hero .tab-content span.bg {
  display: block;
  position: absolute;
  left: 1px;
  top: 0;
  background: #ffeef1 !important;
  border-radius: 20px;
  height: 40px;
  width: 90px;
  pointer-events: none;
  z-index: -1;
  transition: all 0.4s ease;
}

.home-hero .tab-content .tab-pane.active+span.bg {
  transform: translateX(88px);
}

.home-hero .tab-content .tab-pane .form-control {
  margin-bottom: 10px;
  border: none !important;
  box-shadow: inset 0 0 1px 1px #d5d5d5;
}

.home-hero .tab-content .tab-pane .form-control:hover {
  box-shadow: inset 0 0 1px 1px #fc2249;
}

.home-hero .tab-content .tab-pane .form-control:active,
.home-hero .tab-content .tab-pane .form-control:focus {
  box-shadow: inset 0 0 1px 1px #d5d5d5, 0 0 17px 0px rgba(0, 0, 0, 0.1);
}

.home-hero .tab-content .tab-pane a {
  text-decoration: underline;
}

.logo-container {
  padding-top: 30px;
  padding-bottom: 50px;
}

.logo-container small {
  font-size: 14px;
}

.logo-container ul {
  display: block;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.logo-container ul li {
  display: inline-block;
  margin: 30px 40px 0 0;
}

@media (min-width: 768px) {
  .logo-container ul li {
    margin-right: 60px;
  }
}

@media (min-width: 1200px) {
  .logo-container ul li {
    margin-right: 100px;
  }
}

.logo-container ul li:last-child {
  margin-right: 0 !important;
}

.logo-container ul li a {
  display: block;
}

.logo-container ul li img {
  height: 30px;
  width: auto;
}

@media (min-width: 576px) {
  .logo-container ul li img {
    height: 45px;
  }
}

.logo-container ul.service-list li {
  margin: 30px 30px !important;
}

.hover-opacity {
  opacity: 0.5;
  transition: opacity 0.2s linear;
}

.hover-opacity:hover {
  opacity: 1;
}

.carousel-pagination {
  display: flex;
  position: absolute;
  top: -40px;
  right: 0px;
}

.carousel-pagination .pagination-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background: white;
  color: #F4F4F4;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.carousel-pagination .pagination-button.previous-button {
  margin-right: 4px;
}

.carousel-pagination .pagination-button.next-button {
  margin-left: 4px;
}

.carousel-pagination .pagination-button.active {
  color: #080025;
}

.feature-block.text-overlay {
  margin: 10px 0;
}

.feature-block.text-overlay .inner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: 255px;
  padding-bottom: calc(100% * 220 / 270);
}

.feature-block.text-overlay .inner:before {
  position: absolute;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.feature-block.text-overlay .inner img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 1;
  transition: all 0.2s linear;
}

.feature-block.text-overlay .inner:hover img {
  opacity: 0.8;
}

.feature-block.text-overlay .inner h4 {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  font-weight: 400;
  color: white;
  margin: 0;
  font-size: 18px;
  line-height: normal;
}

@media (min-width: 768px) {
  .feature-block.text-overlay .inner h4 {
    font-size: 20px;
    line-height: normal;
  }
}

@media (min-width: 1200px) {
  .feature-block.text-overlay .inner h4 {
    font-size: 20px;
    line-height: normal;
  }
}

.popular-model-block {
  color: #080025;
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid #F4F4F4;
  box-sizing: border-box;
  border-radius: 12px;
}

.popular-model-block h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.116667px;
}

.popular-model-block .model-type {
  font-weight: normal;
  font-size: 12px;
}

.popular-model-block .model-price {
  font-weight: 600;
  font-size: 12px;
}

.home-feature-text {
  margin: 50px 0;
}

.home-feature-text img {
  display: inline-block;
  height: 60px;
  width: 60px;
  object-fit: contain;
}

.home-feature-text img.small-icon {
  height: 48px;
  width: 48px;
}

.home-feature-text img.illustration {
  height: 192px;
  width: 192px;
  margin-bottom: 20px;
}

/* ===== CLIENTS SHOWCASE ===== */
.clients-showcase {
  padding: 60px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 24px;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
}
.clients-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 70%, rgba(252, 34, 73, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.clients-showcase__header {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}

.clients-showcase__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 12px;
  position: relative;
}

/* Le chiffre porte le seul accent du titre : un trait doux, pas une barre pleine.
   Le trait est un fond degrade du span lui-meme (et non un ::after positionne) :
   sur un element inline, un pseudo en position absolue se cale sur le premier
   fragment de ligne et disparait selon le moteur. Un background, lui, suit le
   texte partout. */
.clients-showcase__count {
  white-space: nowrap;
  background-image: linear-gradient(90deg,
                    rgba(252, 34, 73, 0) 0%,
                    rgba(252, 34, 73, 0.55) 18%,
                    rgba(252, 34, 73, 0.55) 82%,
                    rgba(252, 34, 73, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.09em;
  /* Le padding ne change pas la hauteur de ligne d'un inline : il ne sert qu'a
     etendre la zone de fond, donc a eloigner le trait des chiffres. */
  padding-bottom: 0.1em;
  background-position: 0 100%;
}

.clients-showcase__subtitle {
  font-size: 1.1rem;
  color: #6c757d;
  margin: 0;
  font-weight: 400;
}

.clients-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.clients-showcase__item {
  position: relative;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.clients-showcase__item:hover {
  transform: translateY(-5px);
}

.clients-showcase__logo-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}

.clients-showcase__logo-container:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  border-color: rgba(252, 34, 73, 0.2);
}

.clients-showcase__logo {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.7);
  transition: all 0.4s ease;
}

.clients-showcase__item:hover .clients-showcase__logo {
  filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

.clients-showcase__badge {
  text-align: center;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

.clients-showcase__badge-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
  color: #22c55e;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(34, 197, 94, 0.2);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
}

.clients-showcase__badge-text i {
  font-size: 16px;
}

/* Animations staggerées */
.clients-showcase__item {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

.clients-showcase__item:nth-child(1) { animation-delay: 0.1s; }
.clients-showcase__item:nth-child(2) { animation-delay: 0.15s; }
.clients-showcase__item:nth-child(3) { animation-delay: 0.2s; }
.clients-showcase__item:nth-child(4) { animation-delay: 0.25s; }
.clients-showcase__item:nth-child(5) { animation-delay: 0.3s; }
.clients-showcase__item:nth-child(6) { animation-delay: 0.35s; }
.clients-showcase__item:nth-child(7) { animation-delay: 0.4s; }
.clients-showcase__item:nth-child(8) { animation-delay: 0.45s; }
.clients-showcase__item:nth-child(9) { animation-delay: 0.5s; }
.clients-showcase__item:nth-child(10) { animation-delay: 0.55s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .clients-showcase {
    padding: 40px 0;
    margin: 20px 0;
  }
  
  .clients-showcase__title {
    font-size: 1.8rem;
  }
  
  .clients-showcase__grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    padding: 0 15px;
  }
  
  .clients-showcase__logo-container {
    height: 80px;
    padding: 16px;
  }
  
  .clients-showcase__logo {
    max-height: 50px;
  }
}

@media (max-width: 480px) {
  .clients-showcase__grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
  }
  
  .clients-showcase__logo-container {
    height: 70px;
    padding: 12px;
  }
}

.home-feature-text h4 {
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  margin: 10px 0;
}

@media (min-width: 768px) {
  .home-feature-text h4 {
    font-size: 24px;
    line-height: normal;
  }
}

@media (min-width: 1200px) {
  .home-feature-text h4 {
    font-size: 24px;
    line-height: normal;
  }
}

.home-feature-text p {
  max-width: 480px;
  margin: 0 auto;
}

.home-feature-text p.cap-width {
  max-width: 250px;
}

.home-feature-text a {
  font-weight: 600;
  text-decoration: underline !important;
  color: #080025 !important;
}

.section-promotion-carousel {
  overflow: hidden;
}

.promotion-carousel {
  transition: all 0.9s ease-in-out;
}

.promotion-carousel .carousel-inner {
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
  margin: 0;
  height: 352px;
}

.promotion-carousel .carousel-inner .owl-stage-outer {
  overflow: visible;
}

.promotion-carousel .carousel-inner .owl-item.active .carousel-item {
  opacity: 1;
}

.promotion-carousel .carousel-inner .carousel-item {
  display: block;
  margin-right: 0;
  border-radius: 12px;
  opacity: 0.24;
  transition: all 0.5s ease-in-out;
  width: 100%;
  height: 352px;
  padding: 0px 12px;
}

.promotion-carousel .carousel-inner .carousel-item .carousel-background {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.promotion-carousel .carousel-inner .carousel-item .carousel-caption {
  max-width: 336px;
  top: 32px;
  left: 48px;
  padding-top: 0px;
  width: 100%;
}

.promotion-carousel .carousel-inner .carousel-item .carousel-caption img {
  width: 208px;
  height: auto;
  margin-bottom: 0px;
}

.promotion-carousel .carousel-inner .carousel-item .carousel-caption p {
  margin-bottom: 24px;
}

.promotion-carousel .carousel-inner .carousel-item:hover {
  opacity: 1;
}

.featured-product-block {
  display: block;
  padding: 15px;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.3s ease-out;
}

/* La refonte ne vaut que pour les cartes a la nouvelle structure. Les gabarits
   « Mes annonces » rendent `.box.featured-product-block` sans .description ni
   .footer : la hauteur etiree les rognerait (overflow: hidden) et la bordure
   changerait une page qui n'a pas ete relue. Ils gardent l'ancienne carte. */
.featured-product-block:not(.box) {
  --ls-card-gap: 30px;
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--ls-card-gap));
  margin-bottom: var(--ls-card-gap);
  border: 1px solid #F4F4F4;
  border-radius: 12px;
}

.item:has(> .featured-product-block) {
  height: 100%;
}

/* Aucun enfant ne doit etre ecrase : la vignette tient sa hauteur par un
   padding-bottom en pourcentage, que flex-shrink ferait disparaitre. */
.featured-product-block > * {
  flex: 0 0 auto;
}

/* L'espace libre se loge sous le bloc texte, ce qui colle le pied en bas de
   carte quelle que soit la profondeur a laquelle le gabarit l'enveloppe. */
.featured-product-block > .description {
  margin-bottom: auto;
}

/* base1.css supprime le padding de toutes les colonnes d'une `row-no-padding`,
   ce qui colle les cartes entre elles et les decale de 15px hors de la rangee. */
.row-no-padding > .col-md-3:has(> .featured-product-block),
.row-no-padding > .col-lg-3:has(> .featured-product-block) {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.featured-product-block .image-container {
  position: relative;
  display: block;
  text-decoration: none !important;
  width: 100%;
  height: 0;
  padding-bottom: calc(100% * 170 / 250);
  border-radius: 10px;
  overflow: hidden;
}

.featured-product-block .image-container img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 1;
}

.featured-product-block .image-container .heart {
  position: absolute;
  cursor: pointer;
  right: 15px;
  top: 15px;
  z-index: 2;
  height: 29px;
  width: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/img/new/icons/heart-border.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.featured-product-block .image-container .heart.active {
  background-image: url("/img/new/icons/heart-solid.svg");
  background-size: 20px auto;
  background-position: top 2px center;
}

.featured-product-block .image-container .heart.active>i {
  display: none;
}

.featured-product-block .image-container .heart.active>i:first-child {
  display: none !important;
}

.featured-product-block .image-container .heart.active>i:nth-child(2) {
  display: block;
  visibility: visible;
}

.featured-product-block .image-container .tag {
  position: absolute;
  z-index: 2;
  left: 8px;
  bottom: 8px;
  font-size: 10px;
  letter-spacing: -0.11px;
  padding: 0px 6px 0px 10px;
  height: 16px;
  font-weight: 300;
  line-height: 16px;
  background-color: #fef6d2;
  color: #a38a12;
  border-radius: 3px;
  overflow: hidden;
}

.featured-product-block .image-container .tag:before {
  content: "";
  background: url(/img/new/icons/flash.svg) center center no-repeat;
  background-size: 10px auto;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  height: 16px;
  width: 16px;
}

.featured-product-block .description {
  padding: 14px 0 0 0;
}

.featured-product-block .description p {
  margin: 0;
}

.featured-product-block .description p.title {
  font-weight: 600;
  color: #080025;
  letter-spacing: -0.12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 3px;
}

/* ── Badge « Expert » : le sceau (direction C, validee le 28/08/2026). ─────
   Pas de pastille : un sceau de verification rose et le mot en navy. Une
   seule identite declinee en taille, et le sceau seul (.expert-seal) la ou
   un mot ne tient pas. L'icone est portee par le CSS en pseudo-element :
   les SVG etoiles encore presents dans les gabarits sont masques, changer
   d'icone ne demande de retoucher aucun point de rendu. Aucune animation.

   FORME FESTONNEE (29/08/2026) : le disque simple ne se lisait pas comme un
   sceau, huit lobes lui donnent la silhouette d'un tampon. Geometrie a nous et
   pas celle d'un reseau social : creux a 9.6, sommets a 11.3 sur la grille de
   24. Le creux compte : plus profond, la vignette de 13px se lit comme une
   croix et plus comme un rond. La coche ne bouge pas, c'est elle l'identite. */
span.expert-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 3px;
  color: #080025;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
}

span.expert-badge i,
span.expert-badge svg { display: none; }

span.expert-badge::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.33 3.13Q12 -1.73 15.67 3.13Q21.71 2.29 20.87 8.33Q25.73 12 20.87 15.67Q21.71 21.71 15.67 20.87Q12 25.73 8.33 20.87Q2.29 21.71 3.13 15.67Q-1.73 12 3.13 8.33Q2.29 2.29 8.33 3.13Z' fill='%23fc2249'/%3E%3Cpath d='M7.5 12.2l3 3l6 -6.2' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Variante en-tete (profil public : le badge y est le sujet, pas un a-cote). */
span.expert-badge--lg {
  font-size: 13px;
  gap: 5px;
}

span.expert-badge--lg::before {
  width: 16px;
  height: 16px;
}

/* Sceau seul : la meme identite quand un mot ne tient pas (listes, noms
   serres). Poser title="Expert" pour l'accessibilite. */
span.expert-seal {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: none;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.33 3.13Q12 -1.73 15.67 3.13Q21.71 2.29 20.87 8.33Q25.73 12 20.87 15.67Q21.71 21.71 15.67 20.87Q12 25.73 8.33 20.87Q2.29 21.71 3.13 15.67Q-1.73 12 3.13 8.33Q2.29 2.29 8.33 3.13Z' fill='%23fc2249'/%3E%3Cpath d='M7.5 12.2l3 3l6 -6.2' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Contexte sombre (cartes spotlight sur photo) : le mot passe en blanc, le
   sceau garde son rose, l'identite ne bouge pas. */
.featured-store-block span.expert-badge { color: #ffffff; }

/* Pose sur une photo de profil, coin bas-droit, cercle blanc de detachement.
   Le parent direct de l'image doit etre en position:relative. */
span.expert-seal--corner {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: #ffffff;
  background-size: 13px 13px;
  background-position: center;
  box-shadow: 0 1px 3px rgba(8, 0, 37, 0.2);
  z-index: 2;
}

.featured-product-block .description p.title a {
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  display: inline;
}

.featured-product-block .description p.title::first-letter {
  text-transform: uppercase;
}

.featured-product-block .description p.text {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 7px;
}

.featured-product-block .description p.text a {
  color: #a3a3a3;
}

.featured-product-block .description p.name {
  color: #3a8bbb;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
}

.featured-product-block .description p.name a {
  color: inherit;
  text-decoration: none !important;
}

.featured-product-block .description p.name label {
  transition: all 0.2s linear;
  color: #a3a3a3;
  margin-left: 5px;
  padding: 0;
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  text-transform: none;
}

.featured-product-block .description p.name label::before {
  content: "\00b7";
  margin-right: 5px;
}

.featured-product-block .description p.name i {
  color: #a3a3a3;
}

.featured-product-block:hover {
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  cursor: pointer;
}

.featured-product-block .footer {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
}

.featured-product-block .footer .star-rating {
  text-align: left;
  color: #080025;
  font-weight: bold;
  font-size: 12px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.featured-product-block .footer .star-rating i,
.featured-product-block .footer .star-rating svg.tabler-star {
  color: #f8d21c;
  font-size: 12px;
  vertical-align: -1px;
}

.featured-product-block .footer .star-rating span {
  font-size: 12px;
  color: #080025;
  font-weight: bold;
}

.featured-product-block .footer .star-rating small,
.featured-product-block .footer .star-rating em {
  font-size: 10px;
  color: #a3a3a3;
  font-style: normal;
}

.featured-product-block .footer .price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

.featured-product-block .footer .price span {
  line-height: 1;
  margin: 0;
}

.featured-product-block .footer .price span:first-child {
  color: #080025;
  font-size: 16px;
  line-height: normal;
  font-weight: bold;
}

.featured-product-block .footer .price span:last-child {
  color: #a3a3a3;
  font-size: 10px;
  line-height: normal;
}

.home-page-counter {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #F5F5F5;
  text-align: center;
  margin-top: 20px;
  padding: 14px;
  margin-bottom: 20px;
}

@media (min-width: 992px) {
  .home-page-counter {
    padding: 16px;
  }
}

.home-page-counter p {
  color: #6f6f6f;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.home-page-counter p:first-child {
  font-weight: bold;
  color: #080025;
  font-size: 40px;
  line-height: normal;
}

.rating-star-icon {
  color: yellow;
}

@media (min-width: 768px) {
  .home-page-counter p:first-child {
    font-size: 50px;
    line-height: normal;
  }
}

@media (min-width: 1200px) {
  .home-page-counter p:first-child {
    font-size: 54px;
    line-height: normal;
  }
}

.pink-bg-section {
  padding-top: 200px;
  background: url(/img/new/home-page/pink-bg.svg) left -100px top no-repeat;
  background-size: 120% auto;
}

@media (max-width: 767px) {
  .pink-bg-section {
    background-size: 180% auto;
    background-position: left -60px top;
  }
}

@media (min-width: 1440px) {
  .pink-bg-section {
    padding-top: 185px;
    background-size: 2200px auto;
    background-position: left calc(50% + 200px) top;
  }
}

.pink-bg-section>div {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .home-logo-container .home-logos-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.home-logo-container .home-logos-custom .home-logo {
  display: block;
  margin: 20px auto;
  height: auto;
  width: 100px;
}

@media (min-width: 768px) {
  .home-logo-container .home-logos-custom .home-logo {
    margin: 10px 0;
  }
}

@media (min-width: 1200px) {
  .home-logo-container .home-logos-custom .home-logo {
    margin: 20px 0;
  }
}

.home-logo-container .home-logos-custom .home-logo.logo-1 {
  width: 120px;
}

@media (min-width: 1200px) {
  .home-logo-container .home-logos-custom .home-logo.logo-1 {
    width: 190px;
  }
}

.home-logo-container .home-logos-custom .home-logo.logo-2 {
  width: 110px;
}

@media (min-width: 1200px) {
  .home-logo-container .home-logos-custom .home-logo.logo-2 {
    width: 160px;
  }
}

.home-logo-container .home-logos-custom .home-logo.logo-3 {
  width: 160px;
}

@media (min-width: 1200px) {
  .home-logo-container .home-logos-custom .home-logo.logo-3 {
    width: 240px;
  }
}

.home-logo-container .home-logos-custom .home-logo.logo-4 {
  width: 140px;
}

@media (min-width: 1200px) {
  .home-logo-container .home-logos-custom .home-logo.logo-4 {
    width: 210px;
  }
}

.home-logo-container {
  padding-bottom: 30px;
}

@media (min-width: 1200px) {
  .home-logo-container {
    padding-bottom: 40px;
  }
}

.text-block {
  display: flex;
  margin-top: 60px;
}

.text-block img {
  display: block;
  height: 70px;
  width: 70px;
  border-radius: 50px;
  object-fit: contain;
}

.text-block div.text {
  flex-grow: 1;
}

.text-block div.text h4 {
  margin: 0;
  font-size: 20px;
  line-height: normal;
}

@media (min-width: 768px) {
  .text-block div.text h4 {
    font-size: 24px;
    line-height: normal;
  }
}

@media (min-width: 1200px) {
  .text-block div.text h4 {
    font-size: 24px;
    line-height: normal;
  }
}

.text-block.left-image .text {
  padding-left: 20px;
}

.footer-cta-video .text {
  max-width: 500px;
}

.footer-cta-video .text h4 {
  font-weight: bold;
  max-width: 345px;
  margin: 0;
}

.footer-cta-video .text p {
  margin: 10px 0 40px;
}

.footer-cta-video .image {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
}

.footer-cta-video .image:before {
  background-color: rgba(8, 0, 37, 0.2);
  display: block;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  content: "";
}

.footer-cta-video .image .text-overlay {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  padding: 40px;
}

.footer-cta-video .image .text-overlay h4 {
  margin: 0 0 20px 0;
  color: white;
  max-width: 200px;
}

.footer-cta-video .image .text-overlay .player-icon {
  height: 40px;
  width: 60px;
  border-radius: 10px;
  color: #fc2249;
  background: white;
  margin-right: 10px;
  cursor: pointer;
}

.footer-cta-video .image .text-overlay p {
  margin: 0;
  color: white;
}

.cta {
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 30px;
  background: #fee8ec url(/img/new/home-page/price-tag.svg) left 30px center no-repeat;
  background-size: auto 38px;
  margin-top: 40px;
}

.cta .text {
  flex-grow: 1;
}

.cta .text h4 {
  padding-left: 50px;
  color: #fc2249;
  line-height: 38px;
  font-size: 24px;
  line-height: normal;
  margin: 0;
}

@media (min-width: 768px) {
  .cta .text h4 {
    font-size: 28px;
    line-height: normal;
  }
}

@media (min-width: 1200px) {
  .cta .text h4 {
    font-size: 28px;
    line-height: normal;
  }
}

.cta a {
  color: #fc2249;
}

.cta a.read-more-link {
  display: inline-block;
  position: relative;
  padding-right: 30px;
  font-size: 17px;
  background-size: 30px auto;
}

.acceptCookie {
  /* Banniere cookies : posee au-dessus de la pile bas (nav+safe), z ramene a
     l'echelle toast (9999 -> --ls-z-toast 1080, cf §3/§6). Fallback 1080 car
     --ls-z-toast n'est expose qu'en monde Vue ; le pont legacy ne l'a pas. */
  position: fixed;
  left: 0;
  bottom: var(--ls-bottom-stack);
  z-index: var(--ls-z-toast, 1080);
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1080px;
  border-radius: 30px;
  background: white;
  display: flex;
  align-items: center;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2);
  padding: 10px 20px;
}

@media (min-width: 1200px) {
  .acceptCookie {
    padding: 20px 40px;
  }
}

.acceptCookie p {
  margin: 0;
}

.acceptCookie button {
  margin-left: auto;
}

.categories-carousel {
  margin-top: 15px;
  position: relative;
}

.owl-dots {
  display: none;
}

.owl-nav {
  position: absolute;
  pointer-events: none;
  top: 50%;
  z-index: 2;
  margin-top: -18px;
  width: 100%;
}

.owl-nav button {
  pointer-events: all;
  position: absolute;
  top: 0;
  height: 30px;
  width: 30px;
  background: white !important;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2) !important;
  border-radius: 50%;
  z-index: 2;
  outline: none !important;
}

.owl-nav button.disabled {
  display: none;
  visibility: hidden;
}

.owl-nav button.owl-prev {
  left: -15px;
}

.owl-nav button.owl-prev span {
  top: 10px;
  left: 11px;
  border-left-color: #6f6f6f;
  border-bottom-color: #6f6f6f;
}

.owl-nav button.owl-next {
  right: -15px;
}

.owl-nav button.owl-next span {
  top: 10px;
  right: 12px;
  border-right-color: #6f6f6f;
  border-top-color: #6f6f6f;
}

.owl-nav button span {
  color: transparent !important;
  height: 10px;
  width: 10px;
  display: block;
  position: absolute;
  transform: rotate(45deg);
  border: 2px solid transparent;
}

.pac-container {
  box-shadow: 0 10px 17px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 10px 10px;
  z-index: 1050;
  padding: 10px;
  border: 1px solid #d5d5d5;
  border-top: none !important;
  overflow: visible !important;
}

.pac-container:before {
  display: block;
  position: absolute;
  content: "";
  width: calc(100% + 2px);
  left: -1px;
  top: -10px;
  height: 10px;
  border: 1px solid #d5d5d5;
  border-top: none !important;
  background: white;
}

.pac-container .pac-item {
  color: #080025;
  border: none !important;
  border-radius: 8px;
  transition: all 0.2s linear;
}

.pac-container .pac-item span {
  color: #080025;
  font-size: 16px;
}

.pac-container .pac-item:hover {
  background: #FFEDF0;
  color: #fc2249;
}

.pac-container .pac-item:hover span {
  color: #fc2249;
}

.atvImg {
  border-radius: 5px;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 0;
  padding-bottom: calc(100% * 1162 / 1052);
  display: inline-block;
}

.atvImg-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  transition: all 0.2s ease-out;
}

.atvImg-layers {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  transform-style: preserve-3d;
}

.atvImg-rendered-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;
  transition: all 0.1s ease-out;
}

.atvImg-shadow {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  transition: all 0.2s ease-out;
}

.atvImg-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete {
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 17px 0px rgba(0, 0, 0, 0.1);
  padding: 10px;
  border: 1px solid #d5d5d5;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete:before {
  display: block;
  position: absolute;
  content: "";
  width: calc(100% + 2px);
  left: -1px;
  top: -10px;
  height: 10px;
  border: 1px solid #d5d5d5;
  border-top: none !important;
  background: white;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-divider.ui-widget-content {
  display: none;
  visibility: hidden;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item .ui-menu-item-wrapper {
  color: #080025;
  padding: 0;
  border-radius: 3px;
  transition: all 0.2s linear;
  margin: 0 !important;
  padding: 5px 10px;
  border: none !important;
  border-radius: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  color: #fc2249;
  background: #FFEDF0;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item.ui-state-disabled .ui-menu-item-wrapper {
  border: none !important;
  margin: 0 !important;
  color: #9b9b9b !important;
  font-size: 14px;
  letter-spacing: -0.19px;
  line-height: 19px;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item.ui-state-disabled .ui-menu-item-wrapper span {
  color: #9b9b9b !important;
}

.user-h1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .user-h1 {
    margin-bottom: 40px;
    font-size: 54px;
  }
}

.image-cta {
  position: relative;
  width: 100%;
  height: 200px;
}

@media (min-width: 768px) {
  .image-cta {
    height: 280px;
  }
}

.image-cta img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  z-index: 1;
}

.image-cta a,
.image-cta button {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

.settings.new-styles {
  padding: 12px 0;
  background: white;
  z-index: 2;
  position: relative;
}

.settings.new-styles button.btn {
  border: 1px solid #d5d5d5;
  padding: 6px 12px;
  color: black;
  min-width: 100px;
  font-size: 14px;
  border-radius: 8px;
  margin-right: 10px;
  display: inline-block;
}

.settings.new-styles button.btn:last-child {
  margin-right: 10px;
}

.settings.new-styles button.btn.active {
  background: #fc2249;
  color: white;
  border-color: #fc2249 !important;
}

.catalogue-filters .dropdown-item {
  border-radius: 8px;
}

.catalogue-filters .location-select {
  padding: 8px;
}

.catalogue-filters .location-select .form-control {
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
}

.catalogue-filters .location-select label {
  font-size: 14px;
  color: #6F6F6F;
  font-weight: 600;
}

.catalogue-filters .location-select .dropdown-item {
  display: flex;
  align-items: center;
}

.catalogue-filters .location-select .dropdown-item::before {
  display: block;
  margin-right: 6px;
  content: '';
  width: 24px;
  height: 24px;
  background: url(/img/new/icons/location-outline.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.catalogue-filters .location-select .dropdown-item>div {
  display: flex;
  flex-direction: column;
}

.catalogue-filters .location-select .dropdown-item .city {
  font-size: 16px;
}

.catalogue-filters .location-select .dropdown-item .region {
  font-size: 12px;
  color: #6F6F6F;
}

.catalogue-filters .location-select .dropdown-item:hover,
.catalogue-filters .location-select .dropdown-item.active {
  background: #FFEDF0;
  color: #fc2249;
}

.catalogue-filters .location-select .dropdown-item:hover::before,
.catalogue-filters .location-select .dropdown-item.active::before {
  background: url(/img/new/icons/location-outline-active.svg);
}

.catalogue-filters .location-select .dropdown-item:hover .region,
.catalogue-filters .location-select .dropdown-item.active .region {
  color: #fc2249;
}

.catalogue-filters .owner-type-select {
  padding: 8px 4px;
}

.catalogue-filters .owner-type-select .form-checkbox-label {
  cursor: pointer;
  margin-bottom: 0px;
  font-size: 16px;
}

.catalogue-filters .owner-type-select .dropdown-item:hover .custom-checkbox {
  border-color: #fc2249;
}

.catalogue-filters .category-select .dropdown-menu {
  padding: 8px 4px;
}

.catalogue-filters .category-select .dropdown-submenu>.dropdown-menu::before {
  width: 22px;
  left: -11px;
}

.filter-button {
  background: none !important;
  border-radius: 12px;
  border: 1px solid #ccc !important;
  color: #080025 !important;
  font-size: 14px;
  font-weight: normal;
  padding: 4px 12px;
  margin-right: 12px !important;
  transition: all 0.2s linear;
}

.filter-button i {
  display: none;
}

.filter-button:hover {
  border-color: #fc2249 !important;
}

.filter-button.active {
  border: none !important;
  box-shadow: 0 0 0 2pt #fc2249 !important;
  font-weight: bold;
}

.filter-button.active i {
  display: inline-block;
}

.order-by-select {
  display: flex;
}

.order-by-select .order-by {
  color: #080025;
  font-weight: bold;
}

.order-by-select .dropdown-menu.open.show {
  width: 189px;
  left: -48px !important;
}

.order-by-select .filter-option {
  margin-right: 5px;
  margin-left: 8px;
  width: fit-content !important;
  color: #080025 !important;
  font-weight: normal !important;
}

.order-by-select .dropdown-menu.open {
  border-radius: 10px;
}

.no-border-select button.dropdown-toggle {
  border: none !important;
  padding: 0 !important;
  font-weight: 600;
  box-shadow: none !important;
}

.no-border-select button.dropdown-toggle[aria-expanded="true"] {
  box-shadow: none !important;
  border: none !important;
}

.no-border-select button.dropdown-toggle .filter-option {
  font-weight: 600;
}

.no-border-select button.dropdown-toggle+.dropdown-menu {
  margin-top: -10px;
}

.catalogue-main .show-map-button {
  cursor: pointer;
  font-size: 14px;
  color: #080025;
  height: fit-content;
}

.catalogue-main .show-map-button::before {
  display: inline-block;
  margin-right: 8px;
  content: '';
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background: url(/img/new/icons/map-outline.svg), #FFFFFF;
  background-repeat: no-repeat;
  background-position: center;
}
.catalogue-main.new-styles {
  padding-right: 0;
  position: relative;
}

.catalogue-main.new-styles .map-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  min-height: calc(100vh - 150px);
  display: none;
}

@media (min-width: 768px) {
  .catalogue-main.new-styles .map-wrapper {
    z-index: 3;
    display: block;
    width: calc(100% * 5 / 12);
  }
}

.catalogue-main.new-styles .map-wrapper>div {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.order-by-select.no-border-select .btn-group.bootstrap-select {
  width: 260px;
}

.order-by-select.no-border-select .btn-group.bootstrap-select button {
  font-weight: bold;
  padding-right: 25px !important;
  background-position: right 0 center !important;
  color: #080025;
}

.order-by-select.no-border-select .btn-group.bootstrap-select button span {
  font-weight: bold;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-border-select.product-comments {
  font-size: 17px;
}

.no-border-select.product-comments strong {
  white-space: nowrap;
  font-weight: bold;
  color: #080025;
}

.no-border-select.product-comments .btn-group.bootstrap-select {
  width: 240px;
}

.no-border-select.product-comments .btn-group.bootstrap-select button {
  padding-right: 25px !important;
  background-position: right 0 center !important;
  color: #080025;
}

.no-border-select.product-comments .btn-group.bootstrap-select button span {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-map-toggle {
  float: right;
}

.availability-select .bootstrap-select {
  display: inline-block !important;
}

.show-map-toggle label {
  margin: 0 !important;
  height: 35px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.show-map-toggle label input[type="checkbox"] {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.custom-toggle {
  height: 24px;
  width: 45px;
  border-radius: 12px;
  display: inline-block;
  position: relative;
  background-color: #d5d5d5;
  transition: all 0.2s linear;
  margin-left: 10px;
}

.custom-toggle:before {
  position: absolute;
  content: "";
  background: white;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  margin-top: -13px;
  border: 1px solid #d5d5d5;
  transition: all 0.2s linear;
  background-image: url("/img/new/icons/custom-checkbox-off.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 44% auto;
  background-position: center center;
}

input[type="checkbox"]:checked+.custom-toggle {
  background: #46d781;
}

input[type="checkbox"]:checked+.custom-toggle:before {
  transform: translateX(72%);
  border-color: #46d781;
  background-image: url("/img/new/icons/custom-checkbox-on.svg");
  background-size: 50% auto;
}

.product-carousel-container {
  position: relative;
}

.product-carousel-container .show-pictures-button {
  position: absolute;
  bottom: 17px;
  right: 24px;
  font-size: 14px;
  font-weight: bolder;
  padding: 8px 16px !important;
}

.product-preview-image-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
}

.product-preview-image-box .preview-image,
.product-preview-image-box img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
}

.product-preview-image-box .show-more {
  border-radius: 12px;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  cursor: pointer;
  overflow: hidden;
}

.product-preview-image-box .show-more div {
  border-radius: 12px;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, rgba(8, 0, 37, 0.24), rgba(8, 0, 37, 0.24));
  color: white;
  font-size: 24px;
  font-weight: 600px;
}

#product_image_carousel {
  overflow: hidden;
}

#product_image_carousel>ul {
  display: block;
  width: 100px;
  float: left;
  margin: 0;
  padding: 0 30px 0 0;
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
}

#product_image_carousel>ul li {
  display: block;
  width: 70px;
  height: 70px;
  position: relative;
  margin: 0 !important;
  border-top: none !important;
  opacity: 1 !important;
}

#product_image_carousel>ul li img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  opacity: 1;
}

#product_image_carousel>ul li:after,
#product_image_carousel>ul li:before {
  pointer-events: none;
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s linear;
  border-radius: 50%;
  opacity: 0;
}

#product_image_carousel>ul li:before {
  z-index: 3;
  height: 14px;
  width: 14px;
  background: url("/img/new/icons/slider-timer.png") center center no-repeat;
  background-size: contain;
}

#product_image_carousel>ul li:after {
  z-index: 1;
  height: 23px;
  width: 23px;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

#product_image_carousel>ul li.active img {
  opacity: 0.5;
}

#product_image_carousel>ul li.active:before,
#product_image_carousel>ul li.active:after {
  opacity: 1 !important;
}

#product_image_carousel>div {
  display: inline-block;
  overflow: hidden;
}

#product_image_carousel>div .carousel-item {
  width: 100%;
  height: 366px;
}

#product_image_carousel>div .carousel-item img {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

#product_image_carousel>div .carousel-control-next,
#product_image_carousel>div .carousel-control-prev {
  height: 40px;
  width: 40px;
  background: white;
  border-radius: 50%;
  top: 50%;
  margin-top: -20px;
  opacity: 1;
  box-shadow: 0px 13px 13px rgba(0, 0, 0, 0.2);
}

#product_image_carousel>div .carousel-control-next i,
#product_image_carousel>div .carousel-control-prev i {
  color: black;
  opacity: 1;
}

#product_image_carousel .owl-dots.disabled {
  display: none;
}

#product_image_carousel .owl-stage {
  display: flex;
}

.product-heading-box {
  padding-top: 32px;
  padding-bottom: 25px;
}

.product-heading-box h1 {
  color: #080025;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-bottom: 0;
  display: inline-block;
}


.product-heading-box .pro {
  display: inline-block;
  vertical-align: middle;
  color: #3A8BBB;
  font-size: 10px;
  text-transform: uppercase;
  background: #EFF6FA;
  border-radius: 3px;
  padding: 3px 6px;
  margin-top: -8px;
  margin-left: 8px;
  font-weight: 800;
}

.product-heading-box .star-rating {
  color: #080025;
  font-size: 16px;
  font-weight: 600;
}

.product-heading-box .star-rating i,
.product-heading-box .star-rating svg.tabler-star {
  color: #f8d21c;
  vertical-align: -1px;
}

.product-heading-box .star-rating .rating-number {
  color: #A3A3A3;
}

.product-heading-box .location {
  color: #A3A3A3;
  display: inline-block;
  position: relative;
  padding-left: 13px;
  margin-left: 10px;
  text-decoration: underline;
}

.product-heading-box .location:before {
  background: #A3A3A3;
  content: "";
  height: 5px;
  width: 5px;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.product-heading-box .right-icons {
  font-weight: bold;
  color: #080025;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  padding-left: 28px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 18px;
  cursor: pointer;
}

.product-heading-box .right-icons.fav {
  margin-left: 24px;
  background-image: url("/img/new/product-single/fav.png");
}

.product-heading-box .right-icons.fav.active {
  background-image: url("/img/new/icons/heart-solid.svg");
  background-size: 15px auto;
}

.product-heading-box .right-icons.upload {
  margin-left: 24px;
  background-image: url("/img/new/product-single/upload.png");
}

.product-heading-box .modal-sm {
  max-width: fit-content;
}

.product-heading-box .modal-share span {
  display: block;
  margin: 12px 0px;
  color: #6F6F6F;
  cursor: pointer;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: opacity .5s;
}

.slide-enter,
.slide-leave-to {
  opacity: 0;
}

.product-heading-box .modal-share span:last-child,
.product-heading-box .modal-share span:first-child {
  margin: 0px;
}

.product-heading-box .modal-share span i {
  margin-right: 6px;
  color: #080025;
}

.seller-box {
  border-bottom: 1px solid #d8d8d8;
  display: block;
  padding: 40px 0 20px;
}

.seller-box>div {
  width: calc(100% - 60px);
  display: inline-block;
}

.seller-box>div h4 {
  margin: 0;
  font-weight: bold;
}

.seller-box>div h4 span {
  display: inline-block;
  border-radius: 4px;
  background-color: rgba(252, 34, 73, 0.2);
  color: #fc2249;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  line-height: 12px;
  text-align: center;
  padding: 2px 5px;
  margin-top: 7px;
  position: absolute;
  margin-left: 5px;
  text-transform: uppercase;
}

.seller-box>div p.sub {
  color: #6f6f6f;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 22px;
  margin: 0;
}

.seller-box>img {
  display: block;
  float: right;
  height: 55px;
  width: 55px;
  border-radius: 50%;
  object-fit: cover;
}

.product-details h4 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 12px;
}

.product-details h5 {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
}

.product-details .description {
  color: #6F6F6F;
  font-weight: normal;
  font-size: 16px;
  line-height: 26px;
}

.product-details .technical-infos {
  color: #6F6F6F;
  font-weight: 400;
}

.product-details .technical-infos label {
  font-weight: 600;
  color: #080025;
}

.product-details a {
  font-weight: bold;
  text-decoration: underline;
}

.product-details p {
  margin-bottom: 10px;
  color: #6F6F6F;
}

.product-details label {
  color: #080025;
}

.product-details th {
  color: #A3A3A3;
  font-weight: normal;
}

.product-details .service {
  background: #EFF6FA;
  border-radius: 8px;
  color: #3A8BBB;
  font-weight: 600;
  text-align: center;
  padding: 4px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.product-details .service img {
  display: block;
  float: none;
  margin: 0px auto;
  max-height: 20px;
  margin-right: 4px;
  width: 16px;
  height: 16px;
}

.product-details .comment-header {
  border-bottom: 1px solid #F4F4F4;
  padding-bottom: 12px;
  margin-bottom: 24px;
}

.product-details .star-rating {
  font-size: 24px;
  color: #080025;
  font-weight: bold;
}

.product-details .star-rating i,
.product-details .star-rating svg.tabler-star {
  color: #f8d21c;
  vertical-align: -2px;
}

.product-details .star-rating small {
  font-size: 10px;
  color: #a3a3a3;
}

.product-details .star-rating .rating-number {
  color: #A3A3A3;
}

.product-details .single-comment {
  margin: 24px 0;
}

.product-details .single-comment .header {
  min-height: 40px;
  margin-bottom: 10px;
}

.product-details .single-comment .header img {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  float: left;
  margin-right: 8px;
}

.product-details .single-comment .header .infos {
  display: flex;
}

.product-details .single-comment .header .author {
  display: inline;
  color: #3a8bbb;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -0.12px;
  line-height: 19px;
}

.product-details .single-comment .header .date {
  display: inline-block;
  color: #A3A3A3;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  padding-left: 14px;
  margin-left: 4px;
}

.product-details .single-comment .header .date:before {
  background: #A3A3A3;
  content: "";
  height: 5px;
  width: 5px;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.product-details .single-comment .header span {
  color: #080025;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

.product-details .single-comment .header span i {
  color: #f8d21c;
}

.product-details .single-comment p {
  font-weight: normal;
  margin: 0;
  color: #080025;
}

.product-details.included-in-ad tr td:first-child {
  font-weight: 600;
  padding-right: 0px;
  padding-left: 0px;
}

.product-details.included-in-ad tr td:last-child {
  color: #6F6F6F;
  font-weight: 400;
}

.bundle-item-card {
  display: flex;
  align-items: center;
  padding: 12px 0;
  text-decoration: none !important;
  color: inherit !important;
}

.bundle-item-card .img {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  flex-shrink: 0;
}

.bundle-item-card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.bundle-item-card .info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bundle-item-card .title {
  color: #080025;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  flex: 1;
}

.bundle-item-card .quantity {
  font-weight: 400;
  color: #9CA3AF;
  font-size: 12px;
  background-color: #F3F4F6;
  padding: 2px 6px;
  border-radius: 12px;
  flex-shrink: 0;
}

.product-details .renting-conditions label {
  font-weight: 600;
  color: #080025;
}

.product-right-box {
  top: 75px;
  z-index: 1 !important;
}

.product-right-box .card {
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
  border: none !important;
  margin-bottom: 40px;
}

.product-right-box .card .card-body {
  padding: 20px 30px;
}

.product-right-box p.price {
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 43px;
  color: #080025;
  margin-bottom: -10px;
}

.product-right-box span {
  color: #000000;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 26px;
  font-weight: normal;
  margin-bottom: 10px;
  display: block;
}
.product-right-box span i {
  color: #d5d5d5;
  height: 12px;
  width: 12px;
  text-align: center;
  font-size: 7px;
  border: 1px solid #d5d5d5;
  line-height: 12px;
  border-radius: 50%;
  transform: translateY(-5px);
}

.product-right-box label {
  color: #000000;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 26px;
  margin: 0;
}

.product-right-box button {
  margin: 20px 0 10px;
}

.product-right-box ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.product-right-box ul li {
  display: block;
  font-size: 12px;
  color: #A3A3A3;
  background: url("/img/new/icons/green-check.png") left top no-repeat;
  background-size: 24px auto;
  padding-left: 36px;
  padding-top: 3px;
  margin-bottom: 10px;
}

.product-right-box .insurance-included,
.checkout-cart-right-box .insurance-included {
  text-align: center;
  font-weight: 700;
}

.product-right-box .insurance-included img,
.checkout-cart-right-box .insurance-included img {
  width: 35px;
  height: 35px;
}

.main.settings.catalogue-container h3 {
  font-size: 24px;
}

ul.pw-strength {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

ul.pw-strength li {
  flex: 0 0 17%;
  height: 5px;
  background: #eee;
}

ul.pw-strength.one li:nth-child(1) {
  background-color: #e74c3c;
}

ul.pw-strength.two li:nth-child(1),
ul.pw-strength.two li:nth-child(2) {
  background-color: #e74c3c;
}

ul.pw-strength.three li:nth-child(1),
ul.pw-strength.three li:nth-child(2),
ul.pw-strength.three li:nth-child(3) {
  background-color: #e67e22;
}

ul.pw-strength.four li:nth-child(1),
ul.pw-strength.four li:nth-child(2),
ul.pw-strength.four li:nth-child(3),
ul.pw-strength.four li:nth-child(4) {
  background-color: #f1c40f;
}

ul.pw-strength.five li {
  background-color: #2ecc71;
}

#results-container {
  max-width: 100%;
  flex: 0 0 100%;
}

@media (min-width: 992px) {
  #results-container {
    max-width: 100%;
    flex: 0 0 100%;
  }

  #results-container.show-map {
    max-width: 60%;
    flex: 0 0 60%;
  }

  .catalogue-main #results-container:not(.show-map) .item-result {
    max-width: 20% !important;
    flex: 0 0 20% !important;
  }
}

.main-map-wrapper {
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  width: calc(40% - 15px);
  height: 100vh;
  z-index: 1;
  display: none;
  visibility: hidden;
}

@media (min-width: 992px) {
  .main-map-wrapper {
    display: block;
    visibility: visible;
  }
}

.main-map-wrapper #map {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.main-map-wrapper #map .controls-close-map {
  cursor: pointer;
  z-index: 0;
  position: absolute;
  left: 0px;
  width: 24px;
  height: 24px;
  margin: 16px 0 0 16px;
  top: 63px !important;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 4px;
  /*background: url(/img/new/icons/close.svg), #FFFFFF;*/
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: center;
}

.main-map-wrapper #map .zoom-controls {
  position: relative;
  width: 24px;
  height: 49px;
  margin: 16px 16px 0 0;
  top: 63px !important;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 4px;
}

.main-map-wrapper #map .zoom-controls .controls-zoom-in {
  cursor: pointer;
  width: 100%;
  height: 50%;
  background: url(/img/new/icons/plus.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.main-map-wrapper #map .zoom-controls .controls-zoom-out {
  cursor: pointer;
  width: 100%;
  height: 50%;
  background: url(/img/new/icons/less.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.main-map-wrapper #map .zoom-controls::after {
  content: '';
  position: absolute;
  background-color: #F4F4F4;
  width: 16px;
  height: 1px;
  left: 4px;
  top: 24px;
}

.main-map-wrapper #map .marker {
  cursor: pointer;
  padding: 4px 8px;
  background: white;
  color: #080025;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 0 0 1pt #ccc;
  border-radius: 8px;
  transition: all 0.2s linear;
  transform: translateX(-50%);
  margin-top: 6px;
}

.main-map-wrapper #map .marker.visited {
  box-shadow: 0 0 0 1pt #ccc;
  color: #ccc;
}

.main-map-wrapper #map .marker:hover,
.main-map-wrapper #map .marker.ative {
  color: #080025;
  box-shadow: 0 0 0 2pt #fc2249;
}

.product-read-more-wrapper {
  display: flex;
  flex-direction: column;
}

.product-read-more-wrapper>a.product-read-more-button {
  order: 2;
  width: 100px;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-read-more-wrapper>a.product-read-more-button:before {
  display: block;
  position: absolute;
  color: #fc2249;
  content: "Moins";
  left: 0;
  top: 0;
  opacity: 0;
  z-index: -1;
}

.product-read-more-wrapper>a[aria-expanded="true"] {
  color: white;
  position: relative;
  width: 50px;
  max-width: 50px;
}

.product-read-more-wrapper>a[aria-expanded="true"]:before {
  opacity: 1;
  z-index: 2;
}

.product-read-more-wrapper>div {
  order: 1;
}

.services-user-profiles-image-section {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 30px;
}

.services-user-profiles-image-section .inner {
  width: 100%;
  display: block;
  box-sizing: border-box;
  box-shadow: 0 2px 15px 5px rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  position: relative;
  padding-top: 100%;
  padding-bottom: 20px;
}

.services-user-profiles-image-section .inner ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.services-user-profiles-image-section .inner ul.users {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.services-user-profiles-image-section .inner ul.users li {
  position: absolute;
}

.services-user-profiles-image-section .inner ul.users li img {
  object-fit: cover;
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

.services-user-profiles-image-section .inner ul.users li:nth-child(1) {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.services-user-profiles-image-section .inner ul.users li:nth-child(2) {
  top: 25%;
  left: 13%;
}

.services-user-profiles-image-section .inner ul.users li:nth-child(3) {
  top: 48%;
  left: -30px;
}

.services-user-profiles-image-section .inner ul.users li:nth-child(4) {
  top: 20%;
  left: 60%;
}

.services-user-profiles-image-section .inner ul.users li:nth-child(4) img {
  height: 90px;
  width: 90px;
}

.services-user-profiles-image-section .inner ul.users li:nth-child(5) {
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
}

.services-user-profiles-image-section .inner ul.users li:nth-child(5) img {
  height: 60px;
  width: 60px;
}

.services-user-profiles-image-section .inner ul.users li:nth-child(6) {
  bottom: 0;
  left: 30%;
}

.services-user-profiles-image-section .inner ul.users li:nth-child(6) img {
  height: 90px;
  width: 90px;
}

.services-user-profiles-image-section .inner ul.users li:nth-child(7) {
  top: 48%;
  right: -25px;
}

.services-user-profiles-image-section .inner ul.users li:nth-child(7) img {
  height: 60px;
  width: 60px;
}

.services-user-profiles-image-section .inner ul.users li:nth-child(8) {
  top: 70%;
  right: 10%;
}

.services-user-profiles-image-section .inner ul.stars {
  margin-top: 20px;
  text-align: center;
}

.services-user-profiles-image-section .inner ul.stars li {
  display: inline-block;
  color: #f8d21c;
  font-size: 125%;
}

.services-user-profiles-image-section .inner p {
  margin: 0;
  color: #6f6f6f;
  font-size: 16px;
  text-align: center;
}

.services-user-profiles-image-section ul li,
.services-user-profiles-image-section p {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.services-user-profiles-image-section.active ul li {
  opacity: 1 !important;
}

.services-user-profiles-image-section.active p {
  opacity: 1 !important;
}

.services-user-profiles-image-section.active ul.users li:nth-child(1) {
  transition-delay: 0s;
}

.services-user-profiles-image-section.active ul.users li:nth-child(2) {
  transition-delay: 0.2s;
}

.services-user-profiles-image-section.active ul.users li:nth-child(3) {
  transition-delay: 0.4s;
}

.services-user-profiles-image-section.active ul.users li:nth-child(6) {
  transition-delay: 0.6s;
}

.services-user-profiles-image-section.active ul.users li:nth-child(5) {
  transition-delay: 0.8s;
}

.services-user-profiles-image-section.active ul.users li:nth-child(4) {
  transition-delay: 1s;
}

.services-user-profiles-image-section.active ul.users li:nth-child(7) {
  transition-delay: 1.2s;
}

.services-user-profiles-image-section.active ul.users li:nth-child(8) {
  transition-delay: 1.4s;
}

.services-user-profiles-image-section.active ul.stars li:nth-child(1) {
  transition-delay: 1.85s;
}

.services-user-profiles-image-section.active ul.stars li:nth-child(2) {
  transition-delay: 2s;
}

.services-user-profiles-image-section.active ul.stars li:nth-child(3) {
  transition-delay: 2.15s;
}

.services-user-profiles-image-section.active ul.stars li:nth-child(4) {
  transition-delay: 2.3s;
}

.services-user-profiles-image-section.active ul.stars li:nth-child(5) {
  transition-delay: 2.45s;
}

.services-user-profiles-image-section.active p {
  transition-delay: 2.8s;
}

.delay-100 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.delay-200 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.delay-300 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.delay-400 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.map-info-popup.featured-product-block {
  width: 270px;
  min-width: 270px;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none !important;
}

.map-info-popup.featured-product-block .image-container {
  padding: 0;
  height: 165px;
}

.custom_map_marker {
  position: relative;
  width: 66px;
  height: 32px;
  margin: -5px -33px;
}

.custom_map_marker>div.map-popup {
  display: none;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  background: white;
  width: 270px;
}

.custom_map_marker>div.map-popup.active {
  display: block !important;
}

.custom_map_marker>p {
  background: white;
  margin: 0 auto !important;
  display: inline-block;
  max-width: 100px;
  line-height: 1;
  border-radius: 10px;
  color: #fc2249;
  transition: all 0.2s linear;
  font-size: 17px;
  font-weight: bold;
  padding: 7px 11px;
}

.custom_map_marker>p:hover {
  background: #fc2249;
  color: white;
}

.custom_map_marker>p:hover+.map-popup {
  display: block;
}

.blog .blog-block {
  display: inline-flex;
}

.blog .blog-block div img {
  border-radius: 12px;
}

.blog .blog-block div h4 {
  font-weight: bold;
  font-size: 14px;
}

.blog .blog-block div p {
  font-size: 14px;
  line-height: 19px;
  color: #080025;
  text-align: left;
}

.blog .blog-block div a {
  margin-bottom: 7px;
  display: block;
}

span.fr:not(.vti__flag) {
  display: inline-block;
  background: url('/img/new/icons/flag-fr.png');
  width: 15px;
  height: 15px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.members {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: #A3A3A3;
}

.members p {
  text-align: center;
}

.members img {
  margin: 15px 35px;
}

.members img:nth-of-type(1) {
  width: 176px;
  height: auto;
}

.members img:nth-of-type(2) {
  width: 142px;
  height: auto;
}

.members img:nth-of-type(3) {
  width: 160px;
  height: auto;
}

.renter {
  margin-top: 50px;
  margin-bottom: 15px;
}

.renter img {
  border-radius: 13px;
}

.renter .renter-name {
  font-size: 24px;
  font-weight: 600;
  margin-top: 0px;
  margin-bottom: 2px;
  display: inline;
}

.renter h3 {
  font-size: 18px;
  color: #6F6F6F;
  font-weight: 600;
}

.renter .pro {
  background: #EFF6FA;
  border-radius: 3px;
  color: #3A8BBB;
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 5px;
  font-weight: 800;
}

.renter .expert {
  background: #FFEDF0;
  border-radius: 3px;
  color: #FC2249;
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 5px;
  font-weight: 800;
}

.renter p {
  margin-bottom: 0px;
}

.renter .star-rating {
  font-size: 16px;
  color: #080025;
  font-weight: 600;
}

.renter .location,
.renter .company {
  color: #A3A3A3;
  display: inline-block;
  position: relative;
  padding-left: 13px;
  margin-left: 2px;
}

.renter .location:before,
.renter .company:before {
  background: #A3A3A3;
  content: "";
  height: 5px;
  width: 5px;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.renter .location {
  text-decoration: underline;
  margin-left: 0;
}

.renter .renter-badges .badge {
  font-size: 16px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  margin: 4px 0px;
  margin-top: 0px;
}

.renter .renter-badges .badge.badge-success {
  color: #28933A;
  background: #E9FFEC;
}

.renter .renter-badges .badge.badge-warning {
  color: #FFD610;
  background: #FEFBE8;
}

.renter .renter-badges span {
  display: block;
  font-size: 14px;
  color: #6F6F6F;
}

.googleMap {
  position: relative;
  height: 0;
  padding-bottom: 25%;
  border-radius: 12px;
}

.googleMap .marker {
  position: relative;
  width: 72px;
  height: 72px;
  background: rgba(252, 34, 73, 0.24);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.googleMap .marker .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-color: #fc2249;
  background-image: url('/img/new/icons/camera.png');
  border-radius: 50%;
  background-position: center;
  background-size: 74%;
  background-repeat: no-repeat;
}

.googleMap .zoom-controls {
  position: relative;
  width: 24px;
  height: 49px;
  margin: 16px 16px 0 0;
  top: 0px !important;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 4px;
}

.googleMap .zoom-controls .controls-zoom-in {
  cursor: pointer;
  width: 100%;
  height: 50%;
  background: url(/img/new/icons/plus.png);
  background-repeat: no-repeat;
  background-position: center;
}

.googleMap .zoom-controls .controls-zoom-out {
  cursor: pointer;
  width: 100%;
  height: 50%;
  background: url(/img/new/icons/less.png);
  background-repeat: no-repeat;
  background-position: center;
}

.googleMap .zoom-controls::after {
  content: '';
  position: absolute;
  background-color: #F4F4F4;
  width: 16px;
  height: 1px;
  left: 4px;
  top: 24px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #FC2249 !important;
  border-color: transparent;
  color: #fff;
  border-radius: 50%;
  /*height: 30px;*/
  /*width: 30px;*/
}

.daterangepicker td,
.daterangepicker td {
  border-radius: 50%;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  border-radius: 0%;
}

.daterangepicker td.in-range {
  background: #FFEDF0;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  border: none;
}

.catalogue-pagination {
  display: flex;
  margin: 30px 0 20px;
  padding: 0;
  list-style-type: none;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.catalogue-pagination li {
  display: inline-block;
  padding: 0 5px;
  color: #080025;
}

.catalogue-pagination li a {
  cursor: pointer;
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  color: #080025;
  line-height: 30px;
  text-align: center;
  overflow: hidden;
}

.catalogue-pagination li.active a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #fc2249;
  color: #080025;
}

.catalogue-pagination li.left-arrow a {
  text-indent: -9999px;
  color: transparent;
  background: url(/img/new/icons/pagination-left.png) center center no-repeat;
  background-size: contain;
}

.catalogue-pagination li.right-arrow a {
  text-indent: -9999px;
  color: transparent;
  background: url(/img/new/icons/pagination-right.png) center center no-repeat;
  background-size: contain;
}

.price-table {
  margin-top: 15px;
}

.price-table tr td:first-child {
  color: #6F6F6F;
}

.price-table span {
  color: #28933A;
  font-size: 14px;
  text-align: right;
}

.cart-modal .modal-dialog span {
  display: table;
  float: none;
  margin: 15px auto;
  text-align: center;
  color: #28933A;
  font-weight: 600;
  background-color: #EDFFF0;
  font-size: 18px;
  padding: 0.55rem 1.25rem;
}

.cart-modal .modal-dialog span i {
  font-size: 13px;
  background-color: #d4edda;
  padding: 4px;
  border-radius: 50%;
  color: #1CCC39;
}

.cart-modal .modal-content {
  border-radius: 15px;
}

.cart-modal .modal-content .modal-header {
  text-align: center;
  border-bottom: none;
  padding-bottom: 0px;
}

.cart-modal .modal-content .modal-header .modal-title {
  text-align: center;
  float: none;
  margin: 0px auto;
  font-size: 24px;
}

.cart-modal .modal-content .modal-body {
  padding-top: 10px;
}

.cart-modal .modal-content .modal-body p {
  text-align: center;
  padding: 0px 15px;
}

.cart-modal .modal-content .modal-footer {
  border-top: none;
}

.cart-modal .modal-content .modal-footer .btn {
  float: none;
  margin: 15px auto;
  font-weight: 700;
}

.cart-modal .modal-content .modal-footer .btn-secondary {
  background: #F4F4F4;
  color: #080025;
}

.update-date .date-range-section h5 {
  margin: 0;
  font-size: 16px;
  line-height: 19px;
  color: #6F6F6F;
}

.update-date .return-date {
  padding-top: 35px;
}

.update-date .cart-right .panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px 0;
}

.update-date .cart-right .panel h4 {
  margin: 0;
  font-size: 14px;
  line-height: 19px;
  color: #6F6F6F;
}

.update-date .cart-right .panel h5 {
  margin: 0;
  color: #6F6F6F;
  font-size: 14px;
  line-height: 19px;
}

.update-date .cart-right .total-price-panel h4 {
  font-weight: 800;
  color: #6F6F6F;
}

.update-date .cart-right .total-price-panel h5 {
  color: #080025;
  font-weight: 800;
}

.lang-select .dropdown-menu {
  border-color: #d5d5d5;
  margin-top: 8px;
  padding: 12px;
  border: 0;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 8px;
}

.lang-select .dropdown-menu .dropdown-divider {
  border-top: 1px solid #F4F4F4;
}

.lang-select .dropdown-menu a {
  font-size: 16px;
  color: #080025;
  padding: 10px 15px 10px 80px !important;
  transition: all 0.2s linear;
  border-radius: 8px;
  display: block;
  float: left;
  margin: 0 0 0 0;
}

.lang-select .dropdown-menu a:hover,
.lang-select .dropdown-menu a.active {
  background: #fed3db !important;
  color: #fc2249 !important;
}

.no-dropdown-icon::after {
  display: none;
}

.promotion-banner {
  width: 100%;
  padding: 32px 48px;
  background-position: center;
  background-size: cover;
  border-radius: 12px;
}

.promotion-banner .title {
  color: white;
}

.promotion-banner .description {
  color: #ccc;
  width: 336px;
}

.alert-xl {
  padding: 30px 18px;
  border-radius: 30px;
}

.alert-xl .icon-monetization {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('/img/new/icons/monetization.svg');
  background-size: cover;
  background-position: center;
}

.alert-xl p {
  font-weight: bold;
  font-size: 24px;
  line-height: 33px;
  margin-bottom: 0;
  margin-left: 12px;
}

.alert-xl a {
  font-size: 18px;
}

.featured-store-block {
  position: relative;
  height: 193px;
  border-radius: 10px;
  transition: all 0.2s linear;
}

.featured-store-block:hover {
  box-shadow: 0px 3px 7px 3px rgba(61, 43, 43, 0.225);
}

.featured-store-block .heart {
  position: absolute;
  cursor: pointer;
  right: 15px;
  top: 15px;
  z-index: 2;
  height: 29px;
  width: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/img/new/icons/heart-border.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.featured-store-block .heart.active {
  background-image: url("/img/new/icons/heart-solid.svg");
  background-size: 20px auto;
  background-position: top 2px center;
}

.featured-store-block .heart.active>i {
  display: none;
}

.featured-store-block .heart.active>i:first-child {
  display: none !important;
}

.featured-store-block .heart.active>i:nth-child(2) {
  display: block;
  visibility: visible;
}

.featured-store-block .link-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}

.promo-spotlight span {
  transition: all 0.2s linear;
  background: #F4F4F4;
  color: #A3A3A3;
  border-radius: 3px;
  margin-left: 8px;
  padding: 3px 6px 2px;
  display: inline-block;
  font-size: 9px;
  line-height: normal;
  text-transform: uppercase;
}

.featured-store-block .description {
  position: absolute;
  left: 15px;
  bottom: 15px;
}

.featured-store-block .description a {
  color: white;
}

.featured-store-block .description .title {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  margin-bottom: 0px;
  line-height: initial;
}

.featured-store-block .description .title span {
  transition: all 0.2s linear;
  background: #FFEDF0;
  color: #fc2249;
  border-radius: 3px;
  margin-left: 8px;
  padding: 3px 6px 2px;
  display: inline-block;
  font-size: 9px;
  line-height: normal;
  text-transform: uppercase;
}

.featured-store-block .description .title span.badge-status {
  transition: all 0.2s linear;
  background: #eff6fa;
  color: #3a8bbb;
  border-radius: 3px;
  margin-left: 3px;
  padding: 3px 6px 2px;
  display: inline-block;
  font-size: 9px;
  line-height: normal;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .featured-store-block .description .title span {
    font-size: 9px;
    line-height: normal;
  }
}

@media (min-width: 1200px) {
  .featured-store-block .description .title span {
    font-size: 9px;
    line-height: normal;
  }
}

.featured-store-block .description .infos {
  display: inline-block;
  color: white;
  font-size: 12px;
}

.featured-store-block .description .infos .star-rating {
  display: inline-block;
}

.featured-store-block .description .infos .star-rating i,
.featured-store-block .description .infos .star-rating svg.tabler-star {
  color: #f8d21c;
  font-size: 12px;
  vertical-align: middle;
}

.featured-store-block .description .infos .star-rating span {
  font-size: 12px;
  font-weight: bold;
  vertical-align: middle;
}

.featured-store-block .description .infos .star-rating small {
  color: #A3A3A3;
  font-size: 10px;
  vertical-align: middle;
}

.gmnoprint.gm-bundled-control {
  top: 74px !important;
  right: 44px !important;
}



/*************************
Chat Page
*************************/
.chat-section {
  height: calc(100vh - 70px);
  width: 100%;
  overflow: hidden;
  background: #F4F4F4;
}

.chat-section .massage-list-box {
  padding: 20px 8px 0 12px;
  height: 100vh;
  background: #fff;
  border-right: 1px solid #EAECF0;
}

.chat-section .massage-list-box h3 {
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: #080025;
  width: 100%;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

.chat-section .massage-list-box .list-part {
  height: calc(100vh - 220px);
  overflow: auto;
  padding: 0 8px 0 0;

}

.chat-section .massage-list-box .title-part {
  padding: 0 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.chat-section .massage-list-box .title-part input {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px 12px 8px 36px;
  width: 100%;
  background: #F5F5F5;
  border: 1px solid transparent;
  box-sizing: border-box;
  border-radius: 12px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #080025;
  height: 40px;
  outline: none;
  margin: 0;
  transition: all 150ms ease;
}

.chat-section .massage-list-box .title-part input:focus {
  border-color: #C0C4CC;
  background: #fff;
}

.chat-section .massage-list-box .list-part .box a {
  display: flex;
  width: 100%;
  flex-direction: row;
  padding: 12px 12px;
  border-radius: 12px;
  transition: background-color 150ms ease;
  background-color: transparent;
}

.chat-section .massage-list-box .list-part .box a:hover {
  background-color: #F5F5F5;
}

.chat-section .massage-list-box .list-part .box a.active,
.chat-section .massage-list-box .list-part .box.active a {
  background: #EEF2F8;
}

.chat-section .massage-list-box .list-part .box .img {
  display: flex;
  width: 70px;
  flex-direction: row;
}

.chat-section .massage-list-box .list-part .box .img img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 100%;
}

.chat-section .massage-list-box .list-part .box .text {
  width: 100%;
}

.chat-section .massage-list-box .list-part .box .text h4 {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #080025;
  margin: 0 0 2px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-section .massage-list-box .list-part .box .text h4 .idustries {
  color: #A3A3A3;
  font-size: 14px;
  width: 70%;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.chat-section .massage-list-box .list-part .box .text h4 .idustries svg {
  margin: 0 9px 0 9px;
}

.chat-section .massage-list-box .list-part .box .text h4 .time {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: right;
  justify-content: flex-end;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  color: #909399;
}

.chat-section .massage-list-box .list-part .box .text h4 .time .red-dot {
  width: 8px;
  height: 8px;
  background: #FC2249;
  border-radius: 100%;
  margin: 0 10px 0 0;
}

.chat-section .massage-list-box .list-part .box .text p {
  margin: 0;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  color: #909399;
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.scrollbar::-webkit-scrollbar {
  background-color: #fff;
  width: 14px;
}

/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track {
  background-color: #fff;
}

.scrollbar::-webkit-scrollbar-track:hover {}

/* scrollbar itself */
.scrollbar::-webkit-scrollbar-thumb {
  background-color: #babac0;
  border-radius: 16px;
  border: 5px solid #fff;
}

.scrollbar::-webkit-scrollbar-thumb:hover {}

.scroller {
  scrollbar-color: #ccc transparent;
  scrollbar-width: thin;
}

.scroller::-webkit-scrollbar {
  width: 5px;
  border-radius: 8px;
  opacity: 1 !important;
}

.scroller::-webkit-scrollbar-track {
  background: transparent;
}

.scroller::-webkit-scrollbar-thumb {
  background: #ccc;
  border-right: 0px solid white;
}

.overflow {
  min-height: 100vh;
}

.chat-box-area {
  padding: 0px 0 0px 0px;
  height: calc(100vh - 83px);
  overflow: auto;
  background-color: transparent;
  border: none;
}

.chat-box-area .card-body {
  height: 100vh;
  overflow: auto;
  padding: 0;
}

.chat-box-area .recive-msg {
  display: flex;
  width: 100%;
  margin: 0 0 24px 0;
}

.chat-box-area .recive-msg .img img {
  width: 55px;
  border-radius: 100px;
  margin: 0 12px 0 0;
}

.chat-box-area .recive-msg .text {
  width: 100%;
  padding: 0 0 0 5px;
}

.chat-box-area .recive-msg .text .msg {
  max-width: 445px;
  background: #2EA2E5;
  border-radius: 12px;
  padding: 16px;
}

.chat-box-area .received-card {
  display: flex;
  width: 100%;
  margin: 0 0 24px 0;
}

.chat-box-area .received-card .img img {
  width: 55px;
  border-radius: 100px;
  margin: 0 12px 0 0;
}

.chat-box-area .received-card .text .alert-request {
  margin: 0 0 0 12px;
}

.chat-box-area .send-card {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 24px 0;
}

.chat-box-area .send-card .text {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.chat-box-area .send-card .text .alert-request {
  margin: 0 12px 0 0;
}

.chat-box-area .send-card .img img {
  width: 55px;
  border-radius: 100px;
  margin: 0 12px 0 0;
}

.chat-box-area .sent-msg {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 24px 0;
}

.chat-box-area .recive-msg .text .msg p {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  margin: 0;
  color: #fff;
}

.chat-box-area .sent-msg {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 24px 0;
}

.chat-box-area .sent-msg .img {
  width: 72px;
}

.chat-box-area .sent-msg .img img {
  width: 55px;
  border-radius: 100px;
  margin: 0 0 0 12px;
  height: 55px;
  object-fit: cover;
}

.chat-box-area .sent-msg .text {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.chat-box-area .sent-msg .text .msg {
  max-width: 445px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
}

.chat-box-area .sent-msg .text .msg p {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  margin: 0;
  color: #080025;
}

.alert-request {
  width: 310px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 16px;
}

.alert-request h3 {
  display: flex;
  align-items: center;
  color: #3A8BBB;
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  width: 100%;
  align-self: center;
  margin: 0 0 32px 0;
}

.alert-request h3 i {
  background: #EFF6FA;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  border-radius: 100px;
  margin: 0 8px 0 0;
}

.alert-request2 h3,
.alert-request4 h3 {
  color: #FC2249;
}

.alert-request2 h3 i,
.alert-request4 h3 i {
  background: #FFEDF0;
}

.alert-request3 h3,
.alert-request5 h3 {
  color: #28933A;
}

.alert-request3 h3 i,
.alert-request5 h3 i {
  background: #E9FFEC;
}
.alert-request .doc-box {
  display: flex;
  width: 100%;
}

.alert-request .doc-box .img {
  width: 33.33%;
}

.alert-request .doc-box .img img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0;
}

.alert-request .doc-box .text-box {
  width: 100%;
  padding: 0 0 0 12px;
}

.alert-request .doc-box .text-box h3 {
  font-size: 16px;
  line-height: 22px;
  color: #080025;
  margin: 0;
  font-weight: bold;
}

.alert-request .doc-box .text-box h4 {
  font-size: 15px;
  line-height: 25px;
  color: #6F6F6F;
  flex: none;
  order: 1;
  align-self: flex-start;
  flex-grow: 0;
  margin: 4px 0;
}

.alert-request .doc-box .text-box h4 strong {
  font-weight: 700;
}

.alert-request .doc-box .text-box p {
  font-size: 16px;
  line-height: 26px;
  margin: 0 0 4px 0;
  color: #6F6F6F;
}

.alert-request .doc-box .text-box h5 {
  font-size: 18px;
  line-height: 25px;
  font-weight: bold;
  margin: 0 0 32px 0;
  letter-spacing: -0.116667px;
  color: #080025;
}

.alert-request .doc-box .text-box h6 {
  margin: 0;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.alert-request .doc-box .text-box h6 .btn {
  width: 182px;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: #FFFFFF;
  background: #FC2249;
  border-radius: 12px;
}

.chat-box-area .change-date {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 0 24px 0;
}

.chat-box-area .change-date p {
  color: #A3A3A3;
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  font-weight: 400;
}

.make-payment-box {
  background: #EFF6FA;
  border-radius: 12px;
  padding: 8px 40px 8px 12px;
  display: flex;
  margin: 0 0 8px 0;
}

.make-payment-box i {
  background: #3A8BBB;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  line-height: 20px;
  margin: 3px 10px 0 0;
}

.make-payment-box p {
  color: #3A8BBB;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  width: 96%;
  margin: 0;
}

.type-box {
  padding: 24px 0 30px 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #F4F4F4;
  border: none;
}

.type-box form {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.type-box .box {
  height: auto !important;
  position: relative !important;
  padding: 0px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid #CCCCCC;
  max-height: 280px;
  overflow: auto;
}

.type-box form textarea {
  overflow: hidden;
  padding: 0 60px 0px 12px;
  width: 100%;
  margin: 0 auto;
  display: block;
  border: 0px solid #CCCCCC;
  border-radius: 12px;
  outline: none;
  color: #A3A3A3;
  min-height: 26px;
  font-weight: normal;
  font-size: 16px;
  line-height: 26px;
  resize: none;
  justify-content: left;
  margin: 12px 0 12px 0;
  display: flex;
}

.type-box form .send-btn {
  position: absolute;
  background: #3A8BBB;
  border-radius: 10px;
  border: oldlace;
  width: 40px;
  height: 40px;
  color: #fff;
  outline: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 5px;
  top: 5px;
}

.chat-right-box .chat-right-box-inner {
  padding: 0;
}



.chat-right-box-inner .first {
  display: flex;
  align-items: center;
  margin: 0;
}

.chat-right-box-inner .first .img {
  width: 70px;
}

.chat-right-box-inner .first .img img {
  width: 55px;
  height: 55px;
  border-radius: 100px;
  object-fit: cover;
}

.chat-right-box-inner .text {
  width: 100%;
  padding: 0 0 0 10px;
}

.chat-right-box-inner .text .name {
  margin: 0 0 3px 0;
}

.chat-right-box-inner .text .name h4 {
  font-size: 18px;
  line-height: 25px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.chat-right-box-inner .text .name h4 .pro {
  background: #EFF6FA;
  border-radius: 3px;
  padding: 3px 6px;
  color: #3A8BBB;
  font-weight: bold;
  font-size: 10px;
  line-height: 14px;
  text-transform: uppercase;
  margin: 0 8px 0 12px;
}

.chat-right-box-inner .text .name h4 .export {
  background: #FFEDF0;
  border-radius: 3px;
  font-size: 10px;
  line-height: 14px;
  color: #FC2249;
  text-transform: uppercase;
  padding: 3px 6px;
}

.chat-right-box-inner .text .name2 h4 {
  display: flex;
  align-items: center;
  margin: 0;
  width: 100%;
  font-size: 14px;
  line-height: 19px;
}

.chat-right-box-inner .text .name2 h4 .star {
  margin: 0 9px 0 0;
  display: flex;
  align-items: center;
}

.chat-right-box-inner .text .name2 h4 .star .fa-star,
.chat-right-box-inner .text .name2 h4 .star .tabler-star {
  color: #FFD610;
  margin: 0 5px 0 0;
}

.chat-right-box-inner .text .name2 h4 .star em {
  font-style: normal;
  color: #A3A3A3;
  font-size: 14px;
  line-height: 19px;
  margin: 0 0 0 3px;
}

.chat-right-box-inner .text .name2 h4 .local-cam {
  font-size: 14px;
  line-height: 19px;
  color: #A3A3A3;
  display: flex;
  align-items: center;
}

.chat-right-box-inner .text .name2 h4 .local-cam em {
  width: 5px;
  height: 5px;
  background: #A3A3A3;
  display: flex;
  border-radius: 100%;
  margin: 0 8px 0 0;
}

.chat-right-box-inner .text .name2 h4 .local-cam img {
  margin: 0 5px 0 0;
}

.Taux-de-secion {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  padding: 0 0 12px 0;
}

.Taux-de-secion:after {
  display: block;
  content: " ";
  background: #F4F4F4;
  width: 251px;
  height: 1px;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.Taux-de-secion .box {
  width: 50%;
  margin: 0 0 12px 0;
}

.Taux-de-secion .box h4 {
  margin: 0;
  display: flex;
}

.Taux-de-secion .box h4 span {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  border-radius: 8px;
  padding: 4px 8px;
  margin: 0 0 4px 0;
}

.Taux-de-secion .box h4.green span {
  color: #28933A;
  background: #E9FFEC;
}

.Taux-de-secion .box h4.orange span {
  color: #FFD610;
  background: #FEFBE8;
}

.Taux-de-secion .box h5 {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  color: #6F6F6F;
  width: 100%;
}

.dernieres {
  padding: 20px 0 0 0;
  border-top: 1px solid #EAECF0;
  margin-top: 16px;
}

.dernieres h4 {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #080025;
  margin: 0 0 12px 0px;
}

.dernieres .box {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.dernieres .box .img {
  width: 80px;
}

.dernieres .box .img img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0;
}

.dernieres .box .text {
  width: 100%;
  padding: 0 0 0 12px;
}

.dernieres .box .text h5 {
  font-weight: bold;
  font-size: 14px;
  line-height: 19px;
  color: #080025;
  margin: 0 0 4px 0;
}

.dernieres .box .text h6 {
  margin: 0;
  display: flex;
}

.dernieres .box .text h6 a {
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: bold;
}

.dernieres .box .text h6 a.Demande {
  color: #3A8BBB !important;
  background: #EFF6FA !important;
}

.dernieres .box .text h6 a.Terminee {
  color: #6F6F6F !important;
  background: #F4F4F4 !important;
}

.dernieres .box .text h6 a.Annulee {
  color: #FC2249 !important;
  background: #FFEDF0 !important;
}

.dernieres .btn-area {
  margin: 22px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.dernieres .btn-area a.btn {
  background: #F5F5F5;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  padding: 10px 20px;
  color: #080025;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color 150ms ease;
}

.dernieres .btn-area a.btn:hover {
  background: #EAECF0;
}

.reservation-page {
  padding: 34px 0;
  height: 100%;
  min-height: 800px;
}

.reservation-header {
  margin-bottom: 32px;
}

.reservation-header h3 {
  font-weight: bold;
  font-size: 32px;
  line-height: 32px;
  margin: 0;
  width: 100%;
}

.reservation-header h4 {
  font-weight: normal;
  font-size: 18px;
  line-height: 25px;
  color: #A3A3A3;
  width: 100%;
  display: flex;
  align-content: center;
  margin: 0;
}

.reservation-header h4 .fa-circle {
  font-size: 6px;
  margin: 0 8px;
  display: flex;
  align-items: center;
}

.reservation-header h4 span {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  color: #FC2249;
}

.reservation-tabs .nav-tabs {
  border-bottom: 1px solid #dee2e6;
  margin: 0 0 40px 0;
}

.reservation-tabs .nav-tabs .nav-link {
  padding: 0 0 5px 0;
  border: none;
  font-size: 18px;
  line-height: 26px;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #080025;
}

.reservation-tabs .nav-tabs .nav-link.active {
  border-bottom: 2px solid #FC2249;
  color: #FC2249;
}

.reservation-tabs .nav-tabs .nav-item {
  margin-bottom: -1px !important;
  margin: 0 32px 0 0;
}

.mCSB_scrollTools .mCSB_draggerContainer {
  opacity: 0 !important;
  transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}

.scrollbar:hover .mCSB_scrollTools .mCSB_draggerContainer {
  opacity: 1 !important;
}

.mCSB_scrollTools {
  width: 6px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
  background: transparent;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #CCCCCC !important;
}

.mCSB_inside>.mCSB_container {
  margin: 0;
}

.mCustomScrollBox {
  padding: 0 10px 0 0;
}

.reservation-tabs .tab-content .table th {
  border-top: 0px solid #dee2e6;
}

.reservation-tabs .tab-content .table td {
  border-top: 0px solid #dee2e6;
  vertical-align: middle;
}

.reservation-tabs .tab-content .table thead th {
  vertical-align: middle;
  border-bottom: 0px solid #dee2e6;
  background: #F4F4F4;
  outline: none !important;
}

.table thead th:first-child {
  border-radius: 10px 0 0 10px;
  padding-left: 26px;
}

.table thead th:last-child {
  border-radius: 0 10px 10px 0;
}

.dropdown-toggle::after {
  display: none;
}

.reservation-tabs .tab-content .table-responsive {
  height: 100%;
  min-height: 700px;
}

.reservation-tabs .tab-content .table tbody td {
  padding: 12px 10px;
}

.reservation-tabs .tab-content .table tbody td p {
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  margin: 0;
}

.reservation-tabs .tab-content .table tbody tr {
  transition: all 0.5s ease;
}

.reservation-tabs .tab-content .table tbody tr:hover {
  background: #F4F4F4;
}

.reservation-tabs .tab-content .table tbody td.proprietaire-th {
  display: flex;
  width: 100%;
}

.reservation-tabs .tab-content .table tbody td>a {
  display: flex;
  width: 100%;
  height: 100%;
}

.reservation-tabs .tab-content .table tbody td.proprietaire-th .img {
  margin: 0 9px 0 0;
}

.reservation-tabs .tab-content .table tbody td.proprietaire-th .img img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 100%;
}

.reservation-tabs .tab-content .table tbody td.proprietaire-th .text h4 {
  font-weight: bold;
  font-size: 14px;
  line-height: 19px;
  color: #080025;
  margin: 0
}

.reservation-tabs .tab-content .table tbody td.proprietaire-th .text h5 {
  font-size: 14px;
  line-height: 19px;
  margin: 0;
  display: flex;
  align-items: center;
  color: #A3A3A3;
  font-weight: 600;
}

.reservation-tabs .tab-content .table tbody td.proprietaire-th .text h5 span {
  margin: 0 0 0 5px;
}

.reservation-tabs .tab-content .table tbody td.project-td h4 {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  margin: 0;
}

.reservation-tabs .tab-content .table tbody td.Statut-td p {
  display: flex;
  margin: 0;
}

.reservation-tabs .tab-content .table tbody td.Statut-td p span {
  border-radius: 8px;
  display: flex;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  padding: 4px 8px;
  justify-content: center;
  text-align: center;
}

.reservation-tabs .tab-content .table tbody td.blue p span {
  background: #EFF6FA;
  color: #3A8BBB;
}

.reservation-tabs .tab-content .table tbody td.gray p span {
  background: #F4F4F4;
  color: #A3A3A3;
}

.reservation-tabs .tab-content .table tbody td.green p span {
  background: #E9FFEC;
  color: #28933A;
}

.reservation-tabs .tab-content .table tbody td.red p span {
  background: #FFEDF0;
  color: #FC2249;
}

.reservation-tabs .tab-content .table tbody td.drop-dots {
  text-align: center;
}

.reservation-tabs .tab-content .table tbody td.drop-dots .dropdown-toggle {
  color: #6F6F6F;
}

.reservation-tabs .tab-content .table tbody td.drop-dots .dropdown .dropdown-toggle {
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
}

.reservation-tabs .tab-content .table tbody td.drop-dots .dropdown-menu {
  transform: unset !important;
  left: unset !important;
  right: 15px;
  top: 13px !important;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 8px;
  width: 217px;
}

.reservation-tabs .tab-content .table tbody td.drop-dots .dropdown-menu a {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #080025;
  transition: all 0.2s linear;
  height: 32px;
  display: flex;
  align-items: center;
}

.reservation-tabs .tab-content .table tbody td.drop-dots .dropdown-menu a:hover {
  color: #FC2249;
}

.dataTables_wrapper .row {
  width: 100%;
}

.dataTables_filter,
.dataTables_length,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
.dataTables_info,
table.dataTable thead .sorting_desc:after {
  display: none;
}

.reservation-tabs .tab-content .dataTables_wrapper .row .col-sm-7 {
  flex: 0 0 100%;
  max-width: 100%;
}

.reservation-tabs .tab-content .datatable {
  margin: 0 !important;
  border: none !important;
}

.dataTables_paginate {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.dataTables_paginate ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 80px 0 20px 0 !important;
}

.search-result .dataTables_paginate ul {
  margin-top: 0 !important;
}

.dataTables_paginate ul li {
  margin: 0 6px;
  min-width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dataTables_paginate ul li a {
  font-size: 14px;
  line-height: 19px;
  height: 25px;
  width: 100%;
  text-align: center;
  border-radius: 100px;
  color: #080025;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.dataTables_paginate ul li.active a {
  border: 2px solid #FC2249;
}

.dataTables_paginate ul li a:hover {
  border: 2px solid #FC2249;
}

.dataTables_paginate ul li.prev a,
.dataTables_paginate ul li.next a {
  font-size: 0;
}

.dataTables_paginate ul li.prev a:after {
  display: block;
  content: "\f053";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  z-index: 999;
  font-size: 14px;
  font-weight: 900;
}

.dataTables_paginate ul li.next a:after {
  display: block;
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  z-index: 999;
  font-size: 14px;
  font-weight: 900;
}

.toutes-tab-search {
  position: relative;
  width: 100%;
}

.toutes-tab-search form {
  position: absolute;
  right: 0;
  top: -85px;
  width: 370px;
  z-index: 1;
  background: #fff;
  padding: 0 0 20px 28px;
  display: flex;
}

.toutes-tab-search form input {
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-sizing: border-box;
  border-radius: 8px 0 0 8px;
  height: 42px;
  padding: 8px 40px 8px 12px;
  font-size: 16px;
  line-height: 26px;
  color: #CCCCCC;
  width: 100%;
  outline: none;
  border-right: none;
}

.toutes-tab-search form .btn {
  background: #FFFFFF;
  color: #080025;
  height: 42px;
  z-index: 0;
  border-radius: 0 8px 8px 0;
  width: 50px;
  padding: 0;
  border: 1px solid #CCCCCC !important;
  border-left: 0 !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

.custom-clickable-row {
  cursor: pointer;
}

/*product creation page css*/
.margin-top-0 {
  margin-top: 0 !important;
}

.tabNav ul {
  list-style: none;
  margin: 0;
}

.tabNav ul li {
  display: inline-block;
}

.tabNav ul li+li:before {
  content: "";
  background: url(/img/new/arrow-right.svg) no-repeat;
  margin: 0 10px;
  width: 8px;
  height: 14px;
  position: relative;
  top: 3px;
  display: inline-block;
}

.tabNav ul li a {
  color: #A3A3A3;
  font-size: 14px;
  font-weight: 400;
}

.tabNav ul li.active a {
  color: #080025;
  font-weight: 600;
}

.tabNav ul li.completed a {
  color: #080025;
  font-weight: 400;
}

.product-creation-page {
  padding: 65px 0 40px
}

.product-creation-page-title h2 {
  font-size: 32px;
  font-weight: 700;
  color: #080025;
}

.product-creation-form-list {
  display: flex;
  /*justify-content:*/
}

.blue-notic {
  background: #EFF6FA;
  padding: 12px 15px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  position: relative;
}

.blue-notic i {
  background: #3A8BBB;
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 100px;
  color: #fff;
  font-size: 10px;
  line-height: 20px;
  margin-right: 10px;
  text-align: center;
}

.blue-notic p {
  color: #3A8BBB;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 0 0 30px;
}

.blue-notic p svg {
  position: absolute;
  top: auto;
  left: 15px;
}

.product-creation-form-item .blue-notic {
  margin: 30px 0;
}

.product-form-field p {
  font-size: 12px;
}

.product-form-field p a {
  display: table;
}

.product-form-field p a {
  color: #CCCCCC;
  text-decoration: underline !important;
  font-size: 12px;
  line-height: 16px;
}

.product-form-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #080025;
  font-weight: 700;
}

.product-form-field label>span.lableNote {
  float: right;
  color: #A3A3A3;
}

.product-form-field input[type="checkbox"] {
  display: none;
}

.product-form-field input[type="checkbox"]+span {
  position: relative;
  padding-left: 46px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.product-form-field input[type="checkbox"]+span:before {
  background: #FFEDF0;
  width: 36px;
  height: 20px;
  border-radius: 30px;
  content: "";
  left: 0;
  top: 0;
  position: absolute;
  transition: all 0.3s
}

.product-form-field input[type="checkbox"]+span:after {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  content: "";
  width: 14px;
  height: 14px;
  z-index: 1;
  left: 3px;
  position: absolute;
  top: 3px;
}

.product-form-field input[type="checkbox"]:checked+span:before {
  background: #fc2249
}

.product-form-field input[type="checkbox"]:checked+span:after {
  left: 19px;
}

.radio-field p {
  margin-top: 10px;
}

.product-creation-form-item+.product-creation-form-item {
  padding-top: 35px;
  margin-top: 35px;
  border-top: 1px solid #F4F4F4;
}

.product-creation-form-header {
  margin-bottom: 24px;
}

.product-creation-form-header h3 {
  color: #080025;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.product-creation-form-header p {
  font-size: 12px;
  margin: 0;
}

.product-creation-form-item .form-group {
  position: relative;
}

.product-creation-form-item .form-group .currency {
  position: absolute;
  right: 0;
  top: 22px;
  height: 50px;
  background: transparent;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 10px 0 10px;
}

.product-creation-form-item input[type="text"],
.product-creation-form-item input[type="tel"],
.product-creation-form-item select,
.product-creation-form-item input[type="email"],
.product-creation-form-item input[type="number"],
.product-creation-form-item textarea {
  border: 1px solid #F4F4F4;
  border-radius: 12px;
  padding: 12px;
  width: 100%;
  outline: none;
}

.product-creation-form-item textarea {
  min-height: 86px;
  height: 86px;
  resize: none;
}

.product-creation-form-item select {
  background: url(/img/new/arrow.svg) no-repeat center right 12px;
  -webkit-appearance: none;
}

.product-creation-form input[type="submit"],
.product-creation-form-item button {
  background: #FC2249;
  border-radius: 12px;
  padding: 12px 30px;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  border: none;
  outline: none;
}

.product-creation-form input[type="submit"]:hover,
.product-creation-form-item button:hover {
  background: #080025
}

.product-creation-form .form-footer .return {
  background: transparent !important;
  color: #6F6F6F;
}

.product-form-sidebar {
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 8px;
  padding: 15px;
  font-size: 12px;
  height: auto;
  min-height: auto;
  overflow: auto;
  position: sticky;
  top: 15%;
}

.product-form-sidebar p {
  text-align: justify;
}

.product-form-sidebar p:last-child {
  margin: 0;
}

.product-form-sidebar h3 {
  margin: 0 auto 18px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-form-sidebar h3 img {
  margin-right: 11px;
}

/*.product-form-sidebar h3:before{width: 27px;height: 30px;margin-right: 11px;background: url(/img/new/tick.svg) no-repeat;
content: "";}*/
.footer-2 .footer-inner {
  border-top: 1px solid #F4F4F4;
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}

.footer-2 .footer-inner .row {
  width: 100%;
  margin: 0;
}

.footer-2 .footer-inner ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-2 .footer-inner ul li {
  display: inline-block;
}

.footer-2 .footer-inner ul li a {
  color: #6F6F6F;
  mix-blend-mode: normal;
  opacity: 0.8;
}

.footer-2 .footer-inner ul li+li:before {
  content: "";
  margin: 0 25px;
  position: relative;
  top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6F6F6F;
  display: inline-block;
  vertical-align: top;
  margin-top: 7px;
}

.footer-2 .footer-inner ul li a:hover {
  color: #000;
}

.mrg-25 {
  margin-bottom: 25px;
}

.Pnote {
  color: #CCCCCC;
  font-size: 12px;
  margin-bottom: 0;
}

.proCat {
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-top: 25px;
}

.proCat span {
  min-width: 110px;
  display: inline-block;
  position: relative;
  margin-right: 35px;
}

.proCat span:after {
  background: url(/img/new/arrow-right.svg) no-repeat;
  width: 8px;
  height: 12px;
  position: relative;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}


.inputUpload {
  border: 1px dashed #CCCCCC;
  box-sizing: border-box;
  border-radius: 7px;
  max-width: 250px;
  position: relative;
}

.inputUpload input {
  display: none
}

.inputUploadInner {
  padding-bottom: 70%;
  position: relative;
  background: url(/img/new/upload-bg.png) no-repeat center;
  margin: 0;
  margin: 0;
}

.inputUploadRemove {
  background: url(/img/new/upload-remove.svg) no-repeat;
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 7px;
  right: 7px;
  z-index: 111;
  opacity: 0;
  visibility: hidden;
}

.inputUpload.fill-input .inputUploadRemove {
  opacity: 1;
  visibility: visible;
}

.inputUpload img {
  display: none;
}

.inputUpload.fill-input img {
  display: block;
  border-radius: 7px;
}

.inputUpload.fill-input .inputUploadInner {
  padding-bottom: 0;
  margin: 0;
}

.table-fields-main ul {
  list-style: none;
  display: flex;
  align-items: flex-start;
  margin: 0 -15px;
  padding: 0;
}

.table-fields-main ul li {
  padding: 0 15px;
}

.table-fields-main ul li label {
  padding-left: 5px;
}

.table-fields-main ul li:nth-child(1) {
  width: 14%;
}

.table-fields-main ul li:nth-child(2) {
  width: 45%;
}

.table-fields-main ul li:nth-child(3) {
  width: 41%;
}

.table-fields-main .tableList {
  margin-bottom: 13px;
}

.product-creation-form .table-fields-main .addNewList {
  background: #EFF6FA;
  border-radius: 12px;
  padding: 12px 24px;
  color: #3A8BBB;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.product-creation-form .table-fields-main .addNewList:hover {
  background: #eee;
}

.creation-description {
  display: flex !important;
  justify-content: space-between;
}

.product-creation-deail-table {
  width: 100%;
}

.product-creation-deail-table tr {
  margin: 0 0 10px 0;
}

.product-creation-deail-table tr td {
  padding: 0 30px 0 0;
}

.quantite-inputs input {
  width: 65px !important;
  height: 50px !important;
  border-radius: 12px !important;
  margin: 0 0 10px 0;
}

.nom-inputs input {
  width: 330px !important;
  height: 50px !important;
  border-radius: 12px !important;
  margin: 0 0 10px 0;
}

.numero-inputs input {
  width: 245px !important;
  height: 50px !important;
  border-radius: 12px !important;
  margin: 0 0 10px 0;
}

.product-creation-deail-table .button-row .ajouter-btn {
  width: 188px;
  height: 50px;
  background: #EFF6FA;
  border-radius: 12px;
  color: #3A8BBB;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  margin: 10px 0 0 0;
  opacity: 1;
}

.product-creation-deail-table .button-row .ajouter-btn:hover {
  opacity: 0.8;
}

.product-creation-form .form-footer {
  display: flex;
  align-items: center;
}

.product-creation-form .form-footer .return {
  border: 1px solid transparent;
}

.product-creation-form .form-footer .return:hover {
  border-radius: 12px;
  border: 1px solid #dadada;
}

.product-creation-deail-table .remove-btn {
  position: absolute;
  right: 0;
  font-size: 15px;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding: 5px 0;
  margin: -17px 0 0 0;
  z-index: 9;
}

.creation-description .lableNote {
  color: #A3A3A3;
  font-weight: 400;
}

.bootstrap-select>.dropdown-toggle.disabled {
  background-color: #F4F4F4 !important;
  opacity: 1;
  cursor: default;
}

.bootstrap-select>.dropdown-toggle.disabled .filter-option .filter-option-inner-inner {
  color: #fff !important;
}

/****** Revenus ******/

.top-nav-menu ul {
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0 0 0 30px;
}

.top-nav-menu ul li {
  font-weight: normal;
  font-size: 18px;
  line-height: 25px;
  margin: 0 54px 0 0;
}

.top-nav-menu ul li:last-child {
  margin: 0;
}

.top-nav-menu ul li a {
  color: #080025;
}

.top-nav-menu ul li a:hover {
  color: #FC2249;
}

.top-nav-menu ul li a.active {
  font-weight: bold;
  color: #FC2249;
}

.revenus-page {
  padding: 62px 0 50px 0;
}

.revenus-page h2 {
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  width: 100%;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.revenus-page h2 select {
  border: none;
  padding: 0;
  font-size: 20px;
  line-height: 25px;
  color: #080025;
  font-weight: 700;
  height: 26px;
  margin: 0 0 0 3px;
  outline: none;
}

.revenus-page h2 select:after {
  display: block;
  width: 100px;
  content: " ";
  height: 1px;
  background: #000;
}

.statistiques h3 {
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  display: flex;
  margin: 0 0 4px 0;
  width: 100%;
}

.statistiques h3 span {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  background: #F4F4F4;
  border-radius: 8px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.statistiques h3.green span {
  background: #E9FFEC;
  color: #28933A;
}

.statistiques h3.green span i.fa-star,
.statistiques h3.green span .tabler-star {
  color: #FFD610;
  margin: 0 0px 0 5px;
  font-size: 14px;
}

.statistiques h3.yellow span {
  background: #FEFBE8;
  color: #FFD610;
}

.statistiques h3.red span {
  background: #FFEDF0;
  color: #FC2249;
}
.statistiques p {
  font-size: 14px;
  line-height: 19px;
  margin: 0;
  width: 100%;
  color: #6F6F6F;
  font-weight: 600;
}

.statistiques .box-area {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.statistiques .box-area .box {
  width: 33.33%;
  margin-bottom: 60px;
}

.statistiques-section {
  padding: 0 0 32px 0;
  border-bottom: 1px solid #F4F4F4;
  margin-bottom: 32px;
}

.rapport-annuel-section h2 {
  margin-bottom: 4px;
}

.rapport-annuel-section p {
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  width: 100%;
  margin-bottom: 35px;
}

.rapport-annuel-section form .form-group {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.rapport-annuel-section form {
  margin: 0 !important;
}

.rapport-annuel-section {
  padding: 0 0 32px 0;
  border-bottom: 1px solid #F4F4F4;
  margin-bottom: 32px;
}

.rapport-annuel-section form .bootstrap-select {
  width: 190px !important;
  margin: 0 32px 0 0;
}

.table-responsive .datatable th {
  border-top: 0px solid #dee2e6;
}

.table-responsive .datatable td {
  border-top: 0px solid #dee2e6;
  vertical-align: middle;
}

.table-responsive .datatable thead th {
  vertical-align: middle;
  border-bottom: 0px solid #dee2e6;
  background: #F4F4F4;
  outline: none !important;
}

.table-responsive .datatable thead th:first-child {
  border-radius: 10px 0 0 10px;
  padding-left: 26px;
}

.table-responsive .datatable thead th:last-child {
  border-radius: 0 10px 10px 0;
}

.dropdown-toggle::after {
  display: none;
}

.table-responsive {
  height: 100%;
}

.table-responsive .datatable tbody td {
  padding: 12px 10px;
}

.table-responsive .datatable tbody td p {
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  margin: 0;
}

.table-responsive .datatable tbody tr {
  transition: all 0.5s ease;
}

.table-responsive .datatable tbody tr:hover {
  background: #F4F4F4;
}

.table-responsive .datatable tbody td.proprietaire-th {
  display: flex;
  width: 100%;
}

.table-responsive .datatable tbody td>a {
  display: flex;
  width: 100%;
  height: 100%;
}

.table-responsive .datatable tbody td.proprietaire-th .img {
  margin: 0 9px 0 0;
}

.table-responsive .datatable tbody td.proprietaire-th .img img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 100%;
}

.table-responsive .datatable tbody td.proprietaire-th .text h4 {
  font-weight: bold;
  font-size: 14px;
  line-height: 19px;
  color: #080025;
  margin: 0
}

.table-responsive .datatable tbody td.proprietaire-th .text h5 {
  font-size: 14px;
  line-height: 19px;
  margin: 0;
  display: flex;
  align-items: center;
  color: #A3A3A3;
  font-weight: 600;
}

.table-responsive .datatable tbody td.proprietaire-th .text h5 span {
  margin: 0 0 0 5px;
}

.table-responsive .datatable tbody td.project-td h4 {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  margin: 0;
}

.table-responsive .datatable tbody td.Statut-td p {
  display: flex;
  margin: 0;
}

.table-responsive .datatable tbody td.Statut-td p span {
  border-radius: 8px;
  display: flex;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  padding: 4px 8px;
}

.table-responsive .datatable tbody td.blue p span {
  background: #EFF6FA;
  color: #3A8BBB;
}

.table-responsive .datatable tbody td.gray p span {
  background: #F4F4F4;
  color: #A3A3A3;
}

.table-responsive .datatable tbody td.green p span {
  background: #E9FFEC;
  color: #28933A;
}

.table-responsive .datatable tbody td.red p span {
  background: #FFEDF0;
  color: #FC2249;
}

.table-responsive .datatable tbody td.drop-dots {
  text-align: center;
}

.table-responsive .datatable tbody td.drop-dots .dropdown-toggle {
  color: #6F6F6F;
}

.table-responsive .datatable tbody td.drop-dots .dropdown .dropdown-toggle {
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
}

.table-responsive .datatable tbody td.drop-dots .dropdown-menu {
  transform: unset !important;
  left: unset !important;
  right: 15px;
  top: 9px !important;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 8px;
  width: 217px;
}

.table-responsive .datatable tbody td.drop-dots .dropdown-menu a {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #080025;
  transition: all 0.2s linear;
  height: 32px;
  display: flex;
  align-items: center;
}

.table-responsive .datatable tbody td.drop-dots .dropdown-menu a:hover {
  color: #FC2249;
}

.dataTables_wrapper .row {
  width: 100%;
}

.dataTables_filter,
.dataTables_length,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
.dataTables_info,
table.dataTable thead .sorting_desc:after {
  display: none;
}

.table-responsive .dataTables_wrapper .row .col-sm-7 {
  flex: 0 0 100%;
  max-width: 100%;
}

.table-responsive .datatable {
  margin: 0 !important;
  border: none !important;
}

.vos-transection-table-header {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 0 0 15px 0;
}

.vos-transection-table-header h4 {
  width: 50%;
  font-weight: bold;
  font-size: 18px;
  line-height: 26px;
  color: #080025;
  margin: 0;
}

.vos-transection-table-header .toutes-tab-search {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.vos-transection-table-header .toutes-tab-search form {
  position: relative;
  top: 0;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-control:hover {
  border-color: #080025;
  box-shadow: none;
  outline: none;
}

.form-control.is-invalid,
.bootstrap-tagsinput.is-invalid,
.form-control .was-validated .form-control:invalid,
.bootstrap-tagsinput .was-validated .form-control:invalid {
  background-image: none;
  border-color: #FC2249 !important;
  background: #FFEDF0;
  color: #FC2249 !important;
}

.Annonces-page .datatable .img-th img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

/******** Profile Page ***********/

.profile-section {
  padding: 34px 0 100px 0;
}

.profile-header-section .left {
  display: flex;
  align-items: center;
  margin: 0 0 50px 0;
}

.profile-header-section .left .img {
  width: 70px;
}

.profile-header-section .left .img img {
  width: 65px;
  height: 65px;
  border-radius: 13px;
  object-fit: cover;
}

.profile-header-section .text {
  width: 100%;
  padding: 0 0 0 14px;
}

.profile-header-section .text .name {
  margin: 0 0 3px 0;
}

.profile-header-section .text .name h4 {
  margin: 0;
  display: flex;
  align-items: center;
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
}

.profile-header-section .text .name h4 .pro {
  background: #EFF6FA;
  border-radius: 3px;
  padding: 3px 6px;
  color: #3A8BBB;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 8px 0 12px;
  font-size: 14px;
  line-height: 19px;
}

.profile-header-section .text .name h4 .export {
  background: #FFEDF0;
  border-radius: 3px;
  font-size: 14px;
  line-height: 19px;
  color: #FC2249;
  text-transform: uppercase;
  padding: 3px 6px;
}

.profile-header-section .text .name2 h4 {
  display: flex;
  align-items: center;
  margin: 0;
  width: 100%;
  font-size: 16px;
  line-height: 22px;
}

.profile-header-section .text .name2 h4 .star {
  margin: 0 9px 0 0;
  display: flex;
  align-items: center;

}

.profile-header-section .text .name2 h4 .star .fa-star,
.profile-header-section .text .name2 h4 .star .tabler-star {
  color: #FFD610;
  margin: 0 5px 0 0;

}

.profile-header-section .text .name2 h4 .star em {
  font-style: normal;
  color: #A3A3A3;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 0 3px;
}

.profile-header-section .text .name2 h4 .local-cam {
  font-size: 16px;
  line-height: 22px;
  color: #A3A3A3;
  display: flex;
  align-items: center;
}

.profile-header-section .text .name2 h4 .local-cam em {
  width: 5px;
  height: 5px;
  background: #A3A3A3;
  display: flex;
  border-radius: 1000px;
  margin: 0 8px 0 0;
}

.profile-header-section .text .name2 h4 .local-cam img {
  margin: 0 5px 0 0;
}

.profile-header-section .text .name2 h4 .fa-circle {
  font-size: 5px;
  margin-right: 8px;
  color: #A3A3A3;
}

.profile-header-section .text .name2 h4 .maisons {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.profile-header-section .text .name2 h4 .maisons a {
  color: #A3A3A3;
  text-decoration: underline !important;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
}

.profile-header-section .right {
  margin-bottom: 50px;
}

.profile-header-section .right ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.profile-header-section .right ul li {
  margin: 0 0 0 20px;
}

.profile-header-section .right ul li a {
  display: flex;
  align-content: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #080025;
  opacity: 1;
}

.profile-header-section .right ul li a:hover {
  opacity: 0.7;
}

.profile-header-section .right ul li a svg {
  margin: 0 10px 0 0;
}

.profile-tab-section .statistiques,
.profile-tab-section .services {
  margin-bottom: 48px;
}

.statistiques h2,
.services h2,
.locaion-graph h2 {
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  margin: 0 0 16px 0;
  width: 100%;
}

.profile-tab-section .services ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.profile-tab-section .services ul li {
  margin: 0 32px 10px 0;
}

.profile-tab-section .services ul li a {
  align-content: center;
  display: flex;
  align-items: center;
  padding: 4px 8px 4px 8px;
  background: #EFF6FA;
  color: #3A8BBB;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
}

.profile-tab-section .services ul li a svg {
  margin: 0 4px 0 0;
}

.profile-tab-section .statistiques .box-area .box {

  margin-bottom: 0;
}

.annonces-section {
  margin: 0 0 20px 0;
}

.annonces-section h3 {
  font-weight: bold;
  font-size: 32px;
  line-height: 44px;
  margin: 0;
}

.annonces-section h6 {
  font-size: 18px;
  line-height: 25px;
  margin: 0 0 12px 0;
}

.annonces-section .button-area a {
  font-weight: 700;
}

.product-box-area .box {
  margin: 0 0 25px 0;
}

.product-box-area .box .img {
  width: 100%;
  position: relative;
}

.product-box-area .box .fav {
  position: absolute;
  right: 10px;
  top: 10px;
}

.product-box-area .box .fav i {
  color: #fff;
  font-size: 20px;
}

.product-box-area .box .fav:hover i {
  color: #fc2249;
}

.product-box-area .box .img img {
  height: 170px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 12px 0;
  width: 100%;
}

.product-box-area .box .content h2 {
  font-weight: 800;
  font-size: 14px;
  line-height: 19px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}

.product-box-area .box .content h2 a {
  color: #080025;
}

.product-box-area .box .content h2 a:hover {
  color: #fc2249;
}

.product-box-area .box .content h2 span {
  background: #FFEDF0;
  border-radius: 4px;
  color: #FC2249;
  padding: 2.5px 4px;
  margin: 0 0 0 10px;
  font-weight: bold;
  font-size: 8px;
  line-height: 11px;
  text-transform: uppercase;
}

.product-box-area .box .content h4 {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #A3A3A3;
  margin: 0;
}

.product-box-area .box .content h5 {
  font-size: 12px;
  line-height: 16px;
  color: #3A8BBB;
  font-weight: bold;
}

.product-box-area .box .content h5 span {
  background: #EFF6FA;
  border-radius: 4px;
  color: #3A8BBB;
  font-weight: 800;
  font-size: 9px;
  line-height: 12px;
  padding: 2px 4px;
  margin: 0 4px;
}

.product-box-area .box .content .price-row {
  display: flex;
  width: 100%;
  align-items: center;
}

.product-box-area .box .content .price-row .left {
  width: 50%;
}

.product-box-area .box .content .price-row .left .star {
  font-size: 12px;
  line-height: 16px;
  color: #080025;
  font-weight: bold;
  margin: 20px 0 0 0;
  display: flex;
  align-items: center;
}

.product-box-area .box .content .price-row .left .star i,
.product-box-area .box .content .price-row .left .star svg.tabler-star {
  color: #FFD610;
  margin: 0 4px 0 0;
}

.product-box-area .box .content .price-row .left .star em {
  font-size: 10px;
  line-height: 14px;
  color: #CCCCCC;
  font-style: normal;
  font-weight: 600;
  margin: 0 0 0 4px;
}

.product-box-area .box .content .price-row .right {
  width: 50%;
}

.product-box-area .box .content .price-row .right h5 {
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  margin: 0;
  text-align: right;
}

.product-box-area .box .content .price-row .right h6 {
  font-style: italic;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  color: #CCCCCC;
  width: 100%;
  margin: 0;
  text-align: right;
}

.parc-materiel .left form .search-input {
  margin: 0 0 30px 0;
  position: relative;
}

.parc-materiel .left form .search-input input {
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-sizing: border-box;
  border-radius: 8px;
  height: 46px;
  padding: 8px 40px 8px 12px;
  font-size: 16px;
  line-height: 26px;
  width: 100%;
  outline: none;
}

.parc-materiel .left form .search-input input:hover {
  border-color: #080025;
  box-shadow: none;
  outline: none;
}

.parc-materiel .left form .search-button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  border: none;
  background: none;
}

.parc-materiel .left ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.parc-materiel .left ul li {
  width: 100%;
}

.parc-materiel .left ul li a {
  background: #fff;
  border-radius: 12px;
  padding: 14px 8px;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0 5px 0;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.parc-materiel .left ul li a span {
  color: #6F6F6F;
}

.parc-materiel .left ul li a:hover {
  color: #6F6F6F;
  font-size: 18px;
  line-height: 25px;
  background: #EFEFEF;
}

.parc-materiel .left ul li a.accordion-heading {
  background: #EFEFEF;
  font-weight: 800;
}

.parc-materiel .left ul li a.accordion-heading:hover {
  background: #EFEFEF !important;
}

.parc-materiel .left ul li ul {
  padding: 0 0 0 25px;
}

.parc-materiel .left ul li ul li a {
  font-weight: 400;
}

.parc-materiel .left ul li .accordion-heading.collapsed {
  background: transparent !important;
  font-weight: 500;
}
.parc-materiel .left ul li .accordion-heading.parent {
  background: #EFEFEF !important;
  font-weight: 800;
}

.parc-materiel .pagination {
  margin: 0 !important;
}

.star-box {
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
  border-radius: 13px;
  display: flex;
  align-items: baseline;
  padding: 15px 24px 22px 24px;
  width: 100%;
  margin: 0 0 24px 0;
  max-width: 300px;
}

.star-box i,
.star-box svg.tabler-star {
  font-size: 23px;
  color: #FFD610;
  width: 23px;
  height: 23px;
}

.star-box h4 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 0 0 10px;
  font-weight: 800;
}

.star-box h4 span {
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  color: #6F6F6F;
  margin: 3px 0 0 0;
}

.alert-msg {
  display: flex;
  width: 100%;
}

.alert-msg .alert-box {
  display: flex;
  align-items: center;
  width: auto;
  background: #FFEDF0;
  border-radius: 12px;
  padding: 10px 24px 10px 20px;
  font-size: 12px;
  line-height: 16px;
  color: #FC2249;
  font-weight: bold;
}

.alert-msg .alert-box .fa-star,
.alert-msg .alert-box .tabler-star {
  margin: 0 8px 0 0;
}

.alert-msg .alert-box .btn {
  outline: none !important;
  background: transparent;
  padding: 0;
  margin: 0;
  height: auto;
  display: flex;
  margin: 0 0px 0 08px;
  border: 1px solid #FC2249 !important;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-msg .alert-box .btn i {
  color: #FC2249;
  font-size: 6px;
  margin: 0;
}

.avisetnotation-tab-content .right h3 {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 15px 0;
}

.avisetnotation-tab-content .right h3 select {
  border: none;
  padding: 0 5px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  outline: none;
}

.testimonial-row {
  margin: 0 0 24px 0;
}

.testimonial-row .img-row {
  display: flex;
  align-items: center;
}

.testimonial-row .img-row .img img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 100%;
}

.testimonial-row .img-row .text {
  width: 100%;
  padding: 0 0 0 8px;
}

.testimonial-row .img-row .text h4 {
  font-weight: bold;
  font-size: 14px;
  line-height: 19px;
  margin: 0 0 5px 0;
}

.testimonial-row .img-row .text h4 a {
  color: #3A8BBB;
}

.testimonial-row .img-row .text h5 {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  margin: 0;
  display: flex;
  align-items: center;
}

.testimonial-row .img-row .text h5 .fa-star,
.testimonial-row .img-row .text h5 .tabler-star {
  font-size: 14px;
  color: #FFD610;
  margin: 0 5px 0 0;
}

.testimonial-row .img-row .text .fa-circle {
  font-size: 5px;
  color: #A3A3A3;
  margin: 0 8px;
}

.testimonial-row .img-row .text span {
  font-size: 16px;
  color: #A3A3A3;
  font-weight: 600;
}

.testimonial-row p {
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #080025;
  width: 100%;
  margin: 12px 0 0 0;
}

.avisetnotation-tab-content .dataTables_paginate ul {
  margin: 0 !important;
}

.Apropos-tab-content h2 {
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  margin: 0 0 16px 0;
  width: 100%;
}

.map-area {
  margin: 0 0 32px 0;
}

.map-area iframe {
  border-radius: 12px;
}

.Description-section {
  margin: 0 0 20px 0;
}

.Description-section .more {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.Description-section .more p {
  width: 100%;
}

.Description-section .more p a {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  text-decoration: underline !important;
}

.sociaux-section ul li a.enable svg path {
  fill: #000 !important;
}

.sociaux-section ul li .allocine.enable rect,
.sociaux-section ul li .attechent-link.enable rect {
  fill: #000 !important;
}

.sociaux-section ul li .allocine.enable svg path,
.sociaux-section ul li .attechent-link.enable svg path {
  fill: #fff !important;
}

.sociaux-section ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 500px;
}

.sociaux-section ul li {
  margin-right: 65px;
  margin-bottom: 20px;
}

.horaires-section {
  margin-bottom: 32px;
}

.horaires-section h4 {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  margin: 0;
  color: #080025;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.horaires-section h4 span.hours {
  color: #28933A;
  margin: 0 13px 0 0;
  display: flex;
  align-items: center;
}

.horaires-section h4 span svg {
  margin: 0 04px 0 0;
}

.horaires-section h4 .calender {
  display: flex;
  align-items: center;
  font-weight: 400;
}

.skill-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.skill-section ul li {
  margin: 0 8px 12px 0;
}

.skill-section ul li a {
  align-content: center;
  display: flex;
  align-items: center;
  padding: 4px 8px 4px 8px;
  background: #EFF6FA;
  color: #3A8BBB;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
}

.skill-section {
  margin-bottom: 20px;
}

.bande--section iframe {
  border-radius: 8px;
  margin-bottom: 12px;
}

.dashboard-section {
  padding: 32px 0 32px 0;

}

.dashboard-section .statistiques .box-area .box {
  margin-bottom: 27px;
}

.Demandes h2 {
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  margin: 0 0 16px 0;
  width: 100%;
}

.Demandes h6 {
  margin: 12px 0 0 0;
  width: 100%;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
}


/**** checkout-cart page *****/

.checkout-cart-page {
  padding: 35px 0 40px;
}

.checkout-cart-page-title h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.checkout-cart-page-title h2 a {
  color: #080025;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
}

.checkout-cart-page-title h2 a img {
  margin: 0 8px 0 0;
}

.checkout-cart-items {
  margin: 0 0 25px 0;
}

.checkout-cart-items .cat-title {
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  font-weight: bold;
  margin: 0 0 12px 0;
}

.cart-item-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  justify-content: flex-end;
  border-bottom: 1px solid #F4F4F4;
  padding: 0 0 12px 0;
  margin: 0 0 12px 0;
}

.cart-item-row .img-section {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

.cart-item-row .img-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-row .info {
  width: calc(100% - 190px);
}

.cart-item-row .info h3 {
  font-weight: 800;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-item-row .info h3 a {
  color: #080025;
}

.cart-item-row .info h3 a em {
  font-style: normal;
  font-weight: 400;
}

.cart-item-row .info h4 {
  font-weight: normal;
  font-size: 16px;
  line-height: 26px;
  margin: 0;
  color: #6F6F6F;
}

.cart-item-row .info h4 span {
  color: #080025;
}

.cart-item-row .info h5 {
  font-weight: 800;
  font-size: 16px;
  line-height: 22px;
  margin: 2px 0 8px 0;
}

.cart-item-row .info h5 a {
  color: #080025;
  text-decoration: underline !important;
}

.cart-item-row .qty-section {
  width: calc(100% - 190px);
}

.cart-item-row .qty-section .qty-dropdown {
  display: flex;
  margin: 0 0 20px 0;
}

.cart-item-row .qty-section .dropdown {
  width: auto;
}

.cart-item-row .qty-section label {
  margin: 0 10px 0 0;
  color: #6F6F6F;
  font-size: 16px;
  line-height: 26px;
}

.cart-item-row .qty-section .dropdown-toggle {
  padding: 0;
  width: 50px;
  border: none !important;
  box-shadow: none !important;
}

.cart-item-row .qty-section .bootstrap-select>.dropdown-menu {
  width: 150px !important;
  min-width: 170px !important;
  top: 22px !important;
  border-radius: 8px !important;
  border: none;
}

.cart-item-row .bootstrap-select>.dropdown-menu .inner {
  margin: 0;
}

.cart-item-row .delete-product a {
  color: #6F6F6F;
  font-size: 16px;
  line-height: 26px;
  text-decoration: underline !important;
}

.border-none {
  border: none !important;
}

.option-to-add-section .section-title {
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.option-to-add-section .cart-item-row .qty-section .dropdown-toggle {
  width: 90px;
}

.option-to-add-section .cart-item-row .btn-primary {
  padding: 12px 24px;
  color: #ffff;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
}

.option-to-add-section .cart-item-row .qty-section .qty-dropdown {
  margin: 0 0 52px 0;
}

.option-to-add-section .cart-item-row .info p {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #080025;
  min-height: 45px;
  margin: 0 0 32px
}

.checkout-cart-right-box .chat-right-box-inner .first {
  margin: 0 0 12px 0;
  padding: 0 0 12px 0;
  border-bottom: 1px solid #f4f4f4;
}

.checkout-cart-right-box .chat-right-box-inner {
  padding: 24px;
  margin: 12px 0 0 0;
}

.checkout-cart-right-box .date-range-section {
  margin: 0 0 12px 0;
}

.checkout-cart-right-box .cart-right-bottom .panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px 0;
}

.checkout-cart-right-box .cart-right-bottom .panel h4 {
  margin: 0;
  font-size: 14px;
  line-height: 19px;
  color: #6F6F6F;
}

.checkout-cart-right-box .cart-right-bottom .panel h5 {
  margin: 0;
  color: #6F6F6F;
  font-size: 14px;
  line-height: 19px;
}

.checkout-cart-right-box .cart-right-bottom .panel .disc {
  color: #28933A;
}

.checkout-cart-right-box .cart-right-bottom .total-price-panel h4 {
  color: #6F6F6F;
}

.checkout-cart-right-box .cart-right-bottom .total-price-panel h5 {
  color: #6F6F6F;
}

.checkout-cart-right-box .cart-right-bottom .button-area .btn-primary {
  width: 100%;
  margin-bottom: 15px;
}

.checkout-cart-right-box .cart-right-bottom .button-area .btn-outline-primary {
  width: 100%;
}

.checkout-cart-right-box .cart-right-bottom {
  border-top: 1px solid #f4f4f4;
  padding: 12px 0 0 0;
}

.checkout-cart-right-box-inner {
  position: sticky;
  top: 70px;
}

.depot-section {
  text-align: center;
  margin: 24px 0 0 0;
}

.depot-section h3 {
  margin: 0 0 16px 0;
}

.depot-section h3 a {
  color: #080025;
  font-size: 16px;
  line-height: 22px;
  text-decoration: underline !important;
}

.depot-section h5 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.depot-section h5 a {
  color: #6F6F6F;
  text-decoration: underline !important;
  margin: 0 2px;
}

.depot-section h5 button {
  background: none;
  color: #fc2249 !important;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  color: #6F6F6F;
  text-decoration: underline !important;
  margin: 0 2px;
}

.depot-section h4 {
  color: #6F6F6F;
  font-size: 16px;
  line-height: 26px;
  margin: 0 0 16px 0;
  font-weight: 400;
}

.depot-section h4 span {
  color: #080025;
  font-weight: 700;
}

.checkout-cart-page .annonces-section {
  margin: 72px 0 0 0;
}

.checkout-cart-page .annonces-section h6 {
  margin: 0 0 24px 0;
}

.checkout-cart-page .annonces-section .button-area {
  display: flex;
  width: 100%;
}

.checkout-cart-page .annonces-section .button-area a {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  width: auto;
}

.checkout-cart-page .annonces-section .button-area a i {
  margin: 0 0 0 10px;
}

.mobile-only {
    display: none;
}

@media (max-width: 1199px) {
    .mobile-only {
        display: block !important;
    }
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.message-landlord-page .profile-header-section .text .name h4 {
  font-size: 18px;
  line-height: 25px;
}

.message-landlord-page .profile-header-section .text {
  padding: 0;
}

.message-landlord-page .profile-header-section .text .name h4 .pro {
  font-size: 10px;
  line-height: 14px;
}

.message-landlord-page .profile-header-section .text .name h4 .export {
  font-size: 10px;
  line-height: 14px;
}

.message-landlord-page .profile-header-section .left {
  margin: 0 0 30px 0;
}

.message-landlord-page .Description-section .more p {
  margin: 0;
}

.message-landlord-page .statistiques .box-area .box {
  margin-bottom: 24px;
}

.finalisation-cart-page {
  padding: 34px 0 40px;
}

.finalisation-cart-page .validate-popup {
  box-shadow: 0px 0px 14px rgb(8 0 37 / 10%);
  border-radius: 13px;
  padding: 24px;
  max-width: 450px;
  display: flex;
  width: 100%;
  margin: 0 0 64px 0;
}

.finalisation-cart-page .validate-popup .img-section {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
}

.finalisation-cart-page .validate-popup .img-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.finalisation-cart-page .validate-popup .info-section {
  width: calc(100% - 64px);
  padding: 0 0 0 12px;
}

.finalisation-cart-page .validate-popup .info-section h2 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  margin: 0 0 5px 0;
}

.finalisation-cart-page .validate-popup .info-section h2.green {
  color: #28933A;
}

.finalisation-cart-page .validate-popup .info-section h2 img {
  margin: 0 10px 0 0;
}

.finalisation-cart-page .validate-popup .info-section h3 {
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  font-weight: 800;
  margin: 0 0 5px 0;
}
.finalisation-cart-page .validate-popup .info-section h4 {
  font-size: 16px;
  line-height: 26px;
  color: #6F6F6F;
  margin: 0 0 5px 0;
}

.finalisation-cart-page .validate-popup .info-section h4 span {
  font-weight: 800;
}

.finalisation-cart-page .validate-popup .info-section h5 {
  font-size: 16px;
  line-height: 26px;
  color: #6F6F6F;
  margin: 0 0 5px 0;
}

.finalisation-cart-page .validate-popup .info-section h6 {
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  margin: 0 0 5px 0;
  font-weight: 800;
}

.finalisation-cart-page .validate-popup .info-section .button-area {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.finalisation-cart-page .validate-popup .info-section .button-area a {
  margin: 0 15px 0 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  text-decoration: underline !important;
}

.finalisation-cart-page .validate-popup .info-section .button-area a:last-child {
  margin: 0;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.finalisation-cart-page .annonces-section h6 {
  font-size: 16px;
  line-height: 22px;
}

.finalisation-cart-page .product-box-area .box {
  margin: 0 0 35px 0;
}

.big-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.documentaire-step-section {
  /* Tunnel location (CTA solo) : une seule reservation = safe-area + hauteur CTA (~80px).
     Remplace les 3 breakpoints divergents 130/94/0px (cf §5/§6). */
  padding: 32px 0 0 0;
  padding-bottom: calc(var(--ls-safe-bottom) + 80px);
}

.multisteps-form__progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  overflow-x: hidden;
  padding: 15px 0 0 0;
}

.multisteps-form__progress:before {
  /*  display: block;
  content: " ";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #f4f4f4;
  top: 21px;*/
}

.multisteps-form__progress-btn {
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  position: relative;
  padding-top: 30px;
  border: none;
  background-color: transparent;
  outline: none !important;
  color: #CCCCCC;
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;
  border-top: 2px solid #F4F4F4;
  text-align: center;
}

@media (min-width: 500px) {
  .multisteps-form__progress-btn {
    text-indent: 0;
  }
}

.multisteps-form__progress-btn:before {
  position: absolute;
  top: -11px;
  left: 50%;
  display: block;
  width: 18px;
  height: 18px;
  content: '';
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 3;
  border: 2px solid #CCCCCC;
}

.multisteps-form__progress-btn:after {
  position: absolute;
  top: -2px;
  left: calc(-50% - 13px / 2);
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  display: block;
  width: 100%;
  height: 2px;
  content: '';
  z-index: 1;
}

.multisteps-form__progress-btn.js-active:after {
  background: #fc2249 !important;
}

.multisteps-form__progress-btn:first-child:after {
  /*display: ;*/
}

.multisteps-form__progress-btn.js-active {
  font-size: 14px;
  color: #FC2249;
  line-height: 26px;
  font-weight: 700;
}

.multisteps-form__progress-btn.js-active:before {
  -webkit-transform: translateX(-50%) scale(1.2);
  transform: translateX(-50%) scale(1.2);
  background-color: currentColor;
  width: 24px;
  height: 24px;
  top: -14px;
  border: 5px solid #fff;
}

.multisteps-form__progress-btn.js-active.border-over-box {
  border-color: #FC2249;
}

.multisteps-form__form {
  position: relative;
}

.documentaire-step-section {
  min-height: 100vh;
  /* 1500px */
}

.documentaire-step-section .multisteps-form__panel {
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.documentaire-step-section .multisteps-form__panel.js-active {
  height: auto;
  opacity: 1;
  visibility: visible;
}

.documentaire-step-section .multisteps-form__panel[data-animation="scaleOut"] {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.documentaire-step-section .multisteps-form__panel[data-animation="scaleOut"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.documentaire-step-section .multisteps-form__panel[data-animation="slideHorz"] {
  left: 50px;
}

.documentaire-step-section .multisteps-form__panel[data-animation="slideHorz"].js-active {
  transition-property: all;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.2, 1.13, 0.38, 1.43);
  transition-delay: 0s;
  left: 0;
}

.documentaire-step-section .multisteps-form__panel[data-animation="slideVert"] {
  top: 30px;
}

.documentaire-step-section .multisteps-form__panel[data-animation="slideVert"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  top: 0;
}

.documentaire-step-section .multisteps-form__panel[data-animation="fadeIn"].js-active {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: linear;
  transition-delay: 0s;
}

.documentaire-step-section .multisteps-form__panel[data-animation="scaleIn"] {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.documentaire-step-section .multisteps-form__panel[data-animation="scaleIn"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.documentaire-step-section .multisteps-form__title {
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  margin: 0 0 18px 0;
}

.location-update {
  padding: 0 0px 48px 0;
  margin: 0 0 48px 0;
  border-bottom: 1px solid #F4F4F4;
}

.votre-demande {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0px 48px 0;
  margin: 0 0 48px 0;
  border-bottom: 1px solid #F4F4F4;
}

.votre-demande .date-box {
  display: flex;
  align-content: center;
  width: 40%;
}

.votre-demande .date-box .date {
  background: #F4F4F4;
  border-radius: 8px;
  position: static;
  width: 68px;
  height: 59px;
  left: 0px;
  top: 43px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  margin: 0 25.48px 0 0;
}

.votre-demande .date-box .date h5 {
  position: static;
  width: 48px;
  height: 39px;
  left: 10px;
  top: 10px;
  color: #080025;
  font-weight: 600;
  font-size: 10px;
  text-align: center;
}

.votre-demande .date-box .date h5 span {
  font-size: 14px;
  line-height: 15px;
}

.votre-demande .date-box h4 {
  margin: 0;
  font-size: 14px;
  line-height: 19px;
  padding: 12px 0;
  color: #080025;
}

.votre-demande .date-box h4 span {
  font-size: 16px;
}

.votre-demande .arrow {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.votre-demande .retour-date {
  justify-content: flex-end;
}

.documentaire-cart-items .cart-item-row .img-section {
  width: 90px;
  height: 90px;
}

.documentaire-cart-items .cart-item-row .info {
  width: calc(100% - 100px);
}

.documentaire-cart-items .cart-item-row .qty-section {
  width: calc(100% - 100px);
}

.documentaire-cart-items .cart-item-row .info h3 span em {
  font-style: normal;
  font-weight: 500;
}

.documentaire-cart-items .cart-item-row .info h3 span i {
  font-size: 14px;
  line-height: 19px;
  font-style: normal;
  padding: 3px 6px;
  margin: 0 0 0 5px;
  border-radius: 3px;
  position: relative;
  z-index: 2;
  font-weight: 700;
}

.documentaire-cart-items .cart-item-row.refusee .info h3 span i {
  color: #FC2249;
  background: #FFEDF0;
}

.documentaire-cart-items .cart-item-row.valide .info h3 span i {
  color: #28933A;
  background: #E9FFEC;
}

.documentaire-cart-items .cart-item-row.refusee:before {
  display: block;
  content: " ";
  position: absolute;
  background: rgb(255 255 255 / 80%);
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: not-allowed;
}

.documentaire-cart-items .cart-item-row .qty-section .qty-dropdown label strong {
  color: #080025;
  font-size: 16px;
}

.documentaire-cart-items .cart-item-row .qty-section .qty-dropdown {
  margin: 0;
}

.documentaire-cart-items {
  margin: 0 0 32px 0;
}

.documentaire-cart-items .cat-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  margin: 0 0 12px 0;
}

.votre-project-section {

  position: relative;
  padding: 0 0 40px 0;
  margin: 0 0 40px 0;
  border-bottom: 1px solid #F4F4F4;
}

.a-savior-section {
  position: relative;
  padding: 0 0 40px 0;
  margin: 0 0 40px 0;
  border-bottom: 1px solid #F4F4F4;
}

.votre-project-section .text {
  /*   width: 660px;  */
  margin-bottom: 5px;
  padding: 0;
  position: relative;
  display: block;
}

.votre-project-section .text p {
  font-size: 16px;
  line-height: 22px;
  color: #6F6F6F;
  margin: 0 0 20px 0;
}

.votre-project-section .show-more {
  font-size: 16px;
  line-height: 22px;
  color: #080025;
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  margin: 10px 0 0 0;
}

.votre-project-section .show-more:hover {
  color: #fc2249 !important;
}

.votre-project-section .show-more-height {
  height: auto;
  overflow: hidden;
}

.a-savior-section p {
  font-size: 16px;
  line-height: 22px;
  color: #6F6F6F;
  margin: 0 0 20px 0;
}

.a-savior-section p strong {
  color: #080025;
}

.btn.btn-blue {
  background: #3A8BBB !important;
}

.btn.btn-blue:hover {
  background: rgb(58 139 187 / 80%) !important;
}

.depot-page {
  /* Page paiement/depot (CTA solo, pas de nav) : reservation = safe-area + hauteur
     du CTA (~80px). Remplace les 200px en dur qui creaient un scroll vide (cf §5/§6). */
  padding: 32px 0 0 0;
  padding-bottom: calc(var(--ls-safe-bottom) + 80px);
}

.depot-sectioin-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.depot-sectioin-title h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  margin: 0 0 8px 0;
}

.depot-sectioin-title h3 span {
  font-size: 14px;
  line-height: 19px;
  font-style: normal;
  padding: 3px 6px;
  margin: 0 0 0 5px;
  border-radius: 3px;
  position: relative;
  z-index: 2;
}

.depot-sectioin-title h3.valide span {
  color: #28933A;
  background: #E9FFEC;
}

.depot-sectioin-title h4 {
  margin: 0 0 8px 0;
}

.depot-page-left p {
  color: #080025;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.depot-page .info-box {
  padding: 0 0 20px 0;
  margin: 0 0 30px 0;
  border-bottom: 1px solid #f4f4f4;
}

.depot-page .info-box h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  margin: 0 0 8px 0;
}

.depot-page .info-box h3 span {
  font-size: 14px;
  line-height: 19px;
  font-style: normal;
  padding: 3px 6px;
  margin: 0 0 0 5px;
  border-radius: 3px;
  position: relative;
  z-index: 2;
}

.depot-page .info-box h3.valide span {
  color: #28933A;
  background: #E9FFEC;
}

.depot-page .info-box h3.effectuer span {
  color: #3A8BBB;
  background: #EFF6FA;
}

.depot-rigth-bottom.cart-right-bottom .button-area .btn-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.depot-rigth-bottom.cart-right-bottom .button-area .btn-primary svg {
  margin: 0 15px 0 0;
}

.card-dropdown {
  margin: 24px 0 0 0;
  position: relative;
}

.card-dropdown h4 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  margin: 0 0 5px 0;
}

.card-dropdown .vodiapicker {
  display: none;
}

.card-dropdown #a {
  padding: 0 0 10px 0 !important;
  margin: 0;
}

.card-dropdown #a li {
  list-style: none;
  padding: 10px 0 10px 50px;
  position: relative;
}

.card-dropdown #a li:hover {
  background: #fed3db !important;
  color: #fc2249 !important;
  border-radius: 8px;
}

.card-dropdown a li:hover {
  background-color: #F4F3F3;
}

.card-dropdown #a li img {
  margin: 0 5px;
  position: absolute;
  left: 0;
  max-height: 20px;
  max-width: 50px;
  top: 13px;
}

.card-dropdown #a li span,
.btn-select li span {
  margin-left: 30px;
}

.card-dropdown .b {
  display: none;
  width: 100%;
  max-width: 100%;
}

.card-dropdown .open {
  display: show !important;
}

.card-dropdown .btn-select {
  max-width: 445px;
}

.card-dropdown .btn-select li {
  list-style: none;
  float: left;
  padding-bottom: 0px;
  padding-left: 50px;
}

.card-dropdown .btn-select li img {
  position: absolute;
  left: 15px;
  top: 15px;
}

.card-dropdown .btn-select:hover li {
  margin-left: 0px;
}

.card-dropdown .btn-select:hover {
  background-color: #F4F3F3;
  border: 1px solid transparent;
  box-shadow: inset 0 0px 0px 1px #ccc;
}

.card-dropdown .btn-select li span em {
  color: #A3A3A3;
  font-style: normal;
}

.card-dropdown .bootstrap-select>.dropdown-menu {
  max-width: 445px;
  z-index: unset;
  position: absolute !important;
  top: 50px !important;
  z-index: 2;
}

.depot-right-box .button-area .link {
  color: #080025;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 22px;
  margin: 18px 0 0 0;
  text-decoration: underline !important;
}

.debit-card-popup-btn {
  width: 100%;
  padding: 0 0 15px 80px !important;
  position: relative;
  top: -7px;
  background: transparent !important;
  display: block;
}

.debit-card-popup-btn img {
  position: absolute;
  left: 10px;
  top: 14px;
}

.bank-transfer {
  width: 100%;
  padding: 0 0 15px 80px !important;
  position: relative;
  top: -7px;
  background: transparent !important;
  display: block;
}

.bank-transfer img {
  position: absolute;
  left: 10px;
  top: 14px;
}

.bank-transfer span em {
  color: #A3A3A3;
  font-style: normal;
}

.debit-card-popup .btn-link {
  color: #6F6F6F;
}

.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.copied {
  /* Toast "copie" : au-dessus de la pile bas (nav+safe), couche toast (cf §6).
     Fallback 1080 : --ls-z-toast n'existe qu'en monde Vue, pas dans le pont legacy. */
  width: 75px;
  display: none;
  position: fixed;
  bottom: var(--ls-bottom-stack);
  left: 0;
  right: 0;
  margin: auto;
  color: #c0c0c0;
  padding: 15px 15px;
  background-color: #3c3c3c;
  border-radius: 5px;
  z-index: var(--ls-z-toast, 1080);
}

.bank-transfer-data {
  margin: 24px 0 0 0;
}

.bank-transfer-data p {
  color: #080025;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.bank-transfer-data ul {
  background: #EFF6FA;
  border-radius: 12px;
  padding: 24px 24px 19px 24px;
  list-style: none;
}

.bank-transfer-data ul li {
  margin: 0 0 5px 0;
}

.bank-transfer-data ul li span {
  color: #A3A3A3;
  font-size: 16px;
  line-height: 22px;
}

.bank-transfer-data ul li button {
  padding: 0;
  background: transparent;
  border: none;
  margin: 0 0 0 5px;
  outline: none;
}
.payment-valid-msg p {
  display: flex;
  align-items: center;
  background: #E9FFEC;
  border-radius: 12px;
  padding: 8px 24px;
  font-size: 14px;
  line-height: 19px;
  font-weight: 700;
  color: #28933A;
}

.payment-valid-msg p img {
  margin: 0 8px 0 0;
}

.payment-invalid-msg p {
  margin: 10px 0 45px 0;
  display: flex;
  align-items: center;
  background: #ffe8e7;
  border-radius: 12px;
  padding: 8px 24px;
  font-size: 14px;
  line-height: 19px;
  font-weight: 700;
  color: #FC2249;
}

.payment-invalid-msg p img {
  margin: 0 8px 0 0;
}

.contrat-de-location {
  margin: 0 0 48px 0;
  /*border-bottom: 1px solid #F4F4F4;*/
  padding: 0 0 32px 0;
}

.contrat-de-location .button {
  margin-top: 34px;
}

.contrat-de-location .button .btn-outline-primary {
  margin: 0 29px 0 0;
  padding: 8px 20px;
}

.contrat-de-location .button .btn-primary {
  margin: 0 29px 0 0;
}

.choice-update .button {
  display: flex;
  margin-top: 11px;
}

.choice-update .button .btn-outline-primary {
  margin: 0 29px 0 0;
  padding: 8px 20px;
}

.choice-update .button .btn-primary {
  margin: 0 29px 0 0;
}

.emplacement-recuperation {
  margin: 0 0 48px 0;
  border-bottom: 1px solid #F4F4F4;
  padding: 0 0 32px 0;
}

.mt-30 {
  margin-top: 30px !important;
}

.contacter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0 0 0;
}

.contacter-btn img {
  margin: 0 7px 0 0;
}

.contacter-btn span {
  color: #080025;
  text-decoration: underline;
}

.contrat-de-location .star-feedback ul {
  padding: 0;
  list-style: none;
  display: flex;
}

.contrat-de-location .star-feedback ul li {
  margin: 0 7px 0 0;
}

.contrat-de-location .star-feedback ul li .fas {
  color: #FFD610;
}

.contrat-de-location .star-feedback ul li.text {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin: 0 0 0 15px;
}

.documentaire-step-section .contrat-de-location h5.sub-title {
  color: #080025;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.max-width-300 {
  width: 100%;
  max-width: 300px;
}

.mb-20 {
  margin-bottom: 20px !important;
}

#copied_data {
  font-size: 12px;
  color: #28933A;
  background: #E9FFEC;
  font-style: normal;
  font-size: 14px;
  line-height: 19px;
  font-style: normal;
  padding: 3px 6px;
  margin: 0 0 0 5px;
  border-radius: 3px;
  position: relative;
  z-index: 2;
}

.btn-primary {
  border-radius: 8px;
  font-size: 18px;
  line-height: 26px;
}

.btn-outline-primary {
  position: static;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 26px;
  color: #fc2249;
  box-shadow: 0px 0px 0px 1px #fc2249 inset !important;
  font-weight: bold;
}

.btn-outline-primary.disabled {
  color: #fc2249;
}

.checkout-cart-right-box .chat-right-box-inner .text .name h4 {
  font-size: 24px;
  line-height: 32px;
}

.checkout-cart-right-box .chat-right-box-inner .text .name2 h4 {
  font-size: 16px;
  line-height: 22px;
}

.checkout-cart-right-box .chat-right-box-inner .text .name2 h4 .local-cam {
  font-size: 16px;
  line-height: 22px;
}

.daterangepicker thead tr th.next,
.daterangepicker thead tr th.prev {
  border-radius: 100%;
}

.daterangepicker tbody td.available:hover,
.daterangepicker tbody th.available:hover {
  box-shadow: 0 0 0 2px #FC2249 inset !important;
  background: transparent;
  border-radius: 100%;
}

.daterangepicker td.in-range:last-child,
.daterangepicker tr:last-child td.in-range {
  border-radius: 0 10px 10px 0;
}

.daterangepicker .drp-buttons {
  border: none;
  padding: 21px 20px;
}

.daterangepicker td.in-range:first-child {
  border-radius: 10px 0px 0px 10px;
}

.daterangepicker td.active+td.in-range:after {
  display: block;
  content: " ";
  background: #FFEDF0;
  width: 50%;
  top: 0;
  position: absolute;
  z-index: 0;
  left: -20px;
  height: 100%;
}

.daterangepicker td.today+td:after,
.daterangepicker td.off+td:after {
  display: none !important;
}

.daterangepicker td.end-date+td:after {
  display: block;
  content: " ";
  background: #FFEDF0;
  width: 50%;
  top: 0;
  position: absolute;
  z-index: 0;
  left: -50px;
  height: 100%;
}

.daterangepicker .calendar-table td {
  position: relative;
}

.daterangepicker td {
  border: none;
}

.daterangepicker .drp-buttons .btn {
  padding: 4px 20px;
  font-size: 14px;
}

.daterangepicker .drp-selected {
  font-size: 14px;
}

.daterangepicker .drp-buttons .btn.cancelBtn {
  display: none;
}

.drp-custom-text {
  color: #6F6F6F;
  font-size: 14px;
  line-height: 19px;
  font-weight: normal;
  margin-right: 35px;
}

.drp-custom-text+.drp-custom-text {
  display: none;
}

.drp-custom-text:before {
  width: 24px;
  height: 24px;
  content: '';
  background: url(/img/svg/check1.svg);
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.daterangepicker {
  max-width: 726px;
  box-shadow: 0px 0px 14px rgb(8 0 37 / 10%);
  border-radius: 10px;
  border: none;
}

.daterangepicker:before,
.daterangepicker:after {
  display: none;
}

.daterangepicker .drp-calendar {
  max-width: 100%;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  min-width: 48px;
  width: 48px;
  height: 48px;
  border: none !important;
  font-size: 14px;
}

.daterangepicker td.active {
  background-color: #FC2249 !important;
  border-radius: 100% !important;
  z-index: 2;
}

.daterangepicker td.start-date.end-date {
  border-radius: 100%;
}

.rating-stars ul>li {
  display: inline-block;
  /* You can also add some margins here to make it look prettier */
  zoom: 1;
  margin-left: 0px;
}

.rating-stars ul {
  padding: 0;
  margin-left: 0;
}

.rating-stars ul>li.star>i.fa,
.rating-stars ul>li.star>svg.tabler-star {
  color: #ccc;
}
.rating-stars ul>li.star>svg.tabler-star {
  fill: #ccc;
  stroke: #ccc;
  cursor: pointer;
}

.rating-stars ul>li.star.hover>i.fa,
.rating-stars ul>li.star.hover>svg.tabler-star {
  color: #FFD610;
}
.rating-stars ul>li.star.hover>svg.tabler-star {
  fill: #FFD610;
  stroke: #FFD610;
}

.rating-stars ul>li.star.selected>i.fa,
.rating-stars ul>li.star.selected>svg.tabler-star {
  color: #FFD610;
}
.rating-stars ul>li.star.selected>svg.tabler-star {
  fill: #FFD610;
  stroke: #FFD610;
}

.daterangepicker .calendar-table th.month {
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  color: #000;
}

.daterangepicker .calendar-table thead tr th {
  color: rgba(0, 0, 0, 0.6);
}

.daterangepicker .calendar-table tbody tr td {
  font-size: 16px;
  line-height: 22px;
}

.z-0 {
  z-index: 0 !important;
}


/***** Properties Page *****/

.doc-cartitems-checkmark .cart-item-row {
  align-items: unset;
}

.doc-cartitems-checkmark .cart-item-row .img-section {
  width: 135px;
  display: flex;
  align-items: center;
  border-radius: 0;
  padding: 0 0 0 35px;
}

.doc-cartitems-checkmark .cart-item-row .img-section a {
  height: 100%;
  width: 90px;
}

.doc-cartitems-checkmark .cart-item-row .img-section img {
  border-radius: 10px;
}

.doc-cartitems-checkmark .cart-item-row .img-section input {
  position: static;
  opacity: 1;
  width: 80px;
  height: 80px;
  margin: 0 10px 0 1px;
  z-index: 1;
}

.doc-cartitems-checkmark .cart-item-row .img-section input[type="checkbox"] {
  display: none;
  position: absolute;
}

.doc-cartitems-checkmark .cart-item-row .img-section input[type="checkbox"]:checked+.box:before {
  transform: rotate(45deg);
  position: absolute;
  left: 6px;
  width: 5px;
  height: 10px;
  border-width: 2px;
  border-style: solid;
  border-top: 0;
  border-left: 0;
  border-color: #fff;
  z-index: 10000;
  display: block;
  content: " ";
  margin: -3px 0 0 0;
}

.doc-cartitems-checkmark .cart-item-row .img-section input[type="checkbox"]+.box:after {
  position: absolute;
  left: 4px;
  margin-top: -5px;
  margin-left: -4px;
  display: inline-block;
  content: ' ';
  width: 17px;
  height: 17px;
  border: 1px solid #6F6F6F;
  border-radius: 3px;
  background-color: #fff;
  z-index: 1;
  cursor: pointer;
}

.doc-cartitems-checkmark .cart-item-row .img-section input[type="checkbox"]:checked+.box:after {
  background: #FC2249;
  border-color: #FC2249;
}

.doc-cartitems-checkmark .cart-item-row .info {
  width: calc(100% - 140px);
}

.doc-cartitems-checkmark .cart-item-row .qty-section {
  width: calc(100% - 140px);
}

/*** cart-page-paniers ***/

.cart-page-paniers {
  padding: 64px 0 150px 0;
}

.cart-page-paniers .main-title {
  margin: 0;
}

.cart-page-paniers .sub-title {
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  color: #A3A3A3;
  margin: 0;
}

.cart-box-paniers {
  padding: 64px 0 0px 0;
}

.cart-box-paniers .box {
  margin-bottom: 30px;
}

.cart-box-paniers .box .box-inner {
  background: #FFFFFF;
  border: 1px solid #F4F4F4;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 24px;
  transition: all 0.2s linear;
}

.cart-box-paniers .box-inner:hover {
  box-shadow: 0px 0px 14px rgba(8, 0, 37, 0.1);
}

.cart-box-paniers .box-inner .top-img-box {
  display: flex;
  width: 100%;
  margin-bottom: 32px;
}

.cart-box-paniers .box-inner .top-img-box .img {
  width: 80px;
}

.cart-box-paniers .box-inner .top-img-box .img img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0;
}

.cart-box-paniers .box-inner .top-img-box .text {
  width: 100%;
  padding: 0 0 0 12px;
  overflow: hidden;
}

.cart-box-paniers .box-inner .text h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
  margin-bottom: 5px;
  line-height: 25px;
}

.cart-box-paniers .box-inner .text h5 a {
  color: #080025;
}

.cart-box-paniers .box-inner .text h5 a:hover {
  opacity: 0.8;
}

.cart-box-paniers .box-inner .text h6 {
  margin: 0;
}

.cart-box-paniers .box-inner .text h6 a {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  line-height: 22px;
  color: #FC2249;
  text-decoration: underline !important;
}

.cart-box-paniers .profile-header-section .text {
  padding: 0;
}

.cart-box-paniers .profile-header-section .text .name h4 {
  font-size: 16px;
  line-height: 22px;
}

.cart-box-paniers .profile-header-section .text .name h4 .pro {
  font-size: 10px;
  line-height: 14px;
}

.cart-box-paniers .profile-header-section .text .name h4 .export {
  font-size: 10px;
  line-height: 14px;
}

.cart-date-price {
  margin: 32px 0 32px 0;
}

.cart-date-price ul {
  list-style: none;
  padding: 0;
}

.cart-date-price ul li {
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}

.cart-date-price ul li img {
  margin: 0 18px 0 0;
}

.cart-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.cart-button-group .btn-primary {
  padding: 12px 24px;
  color: #ffff;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  border-radius: 12px;
  margin: 0 0 0 10px;
}

.cart-button-group .btn-transparent {
  color: #6F6F6F;
  background-color: transparent !important;
  border: 1px solid #CCCCCC !important;
  margin: 0 0 0 0px;
}

.cart-button-group .btn-transparent:hover {
  background-color: transparent !important;
  opacity: 0.8;
}

.cart-page-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -1px 12px rgba(8, 0, 37, 0.04);
  /* La nav passe SOUS le CTA sticky (cf contrat z-index §3) : 1000 -> --ls-z-nav (990). */
  z-index: var(--ls-z-nav);
  /* Safe-area iOS : la hauteur DOM mesuree de la nav inclut donc ce padding (cf §8.7). */
  padding-bottom: var(--ls-safe-bottom);
}

/* Push HelpScout Beacon above the bottom bar on mobile */
@media (max-width: 989px) {
  .BeaconFabButtonFrame,
  [class*="BeaconFabButton"] {
    bottom: 80px !important;
    transition: bottom 0.3s ease !important;
  }
  body.body-slide-menu-open .BeaconFabButtonFrame,
  body.body-slide-menu-open [class*="BeaconFabButton"] {
    display: none !important;
  }
}

.cart-page-bottom ul.bottom-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  width: 100%;
}

.cart-page-bottom ul.bottom-menu li a,
.cart-page-bottom ul li button {
  display: block;
  padding: 16px 0 12px 0;
  font-size: 16px;
  line-height: 26px;
  color: #6F6F6F;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

.cart-page-bottom ul.bottom-menu li span {
  width: 100%;
  text-align: center;
  display: block;
}

.cart-page-bottom .profile-name {
  display: flex;
  align-items: center;
  color: #080025;
  font-weight: 700;
  font-size: 32px;
  line-height: 44px;
  margin: 0;
}

.cart-page-bottom .profile-name img {
  width: 48px;
  height: 48px;
  border-radius: 100px;
  margin: 0 12px 0 0;
}

.cart-page-bottom .voir-profile-link {
  font-weight: 800;
  font-size: 16px;
  line-height: 22px;
  color: #FC2249;
  margin: 12px 0 50px 0;
  display: flex;
  align-items: center;
}

.cart-page-bottom .voir-profile-link a {
  color: #FC2249;
}

.cart-page-bottom .voir-profile-link a:hover {
  opacity: 0.7;
}

.cart-page-bottom .voir-profile-link img {
  margin: 0 0 0 12px;
}

.cart-page-bottom ul.left-menu {
  padding: 0;
  list-style: none;
  margin: 0;
}

.cart-page-bottom ul.left-menu li {
  font-size: 16px;
  line-height: 26px;
  margin: 0 0 25px 0;
}

.cart-page-bottom ul.left-menu li a {
  color: #080025;
}

.cart-page-bottom ul.left-menu li a {
  display: flex;
  align-items: center;
}

.cart-page-bottom ul.left-menu li a img {
  margin: 0 14px 0 0;
}

.cart-page-bottom ul.left-menu li.sign-out a {
  color: #A3A3A3;
}


/*** Empty Page ****/

.empty-page-section {
  padding: 80px 0 200px 0;
}

.empty-page-section .row {
  align-items: center;
}

.empty-page-section .left .box {
  box-shadow: 0px 0px 14px rgb(8 0 37 / 10%);
  border-radius: 30px;
  background-color: #fff;
  max-width: 368px;
  height: 465px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(/img/svg/empty-bg.svg) !important;
  background-repeat: no-repeat;
  background-size: 331px;
  background-position: left center;
}

.empty-page-section .left .box img {
  width: 285px;
  height: auto;
  position: absolute;
  right: -60px;
}

.empty-page-section .left .box h6 {
  font-size: 18px;
  line-height: 26px;
  color: #A3A3A3;
  position: absolute;
  bottom: 16px;
  font-weight: 400;
  margin: 0;
}

.empty-page-section .right h5 {
  font-size: 20px;
  line-height: 27px;
  color: #FC2249;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.empty-page-section .right p {
  font-size: 18px;
  line-height: 26px;
  color: #080025;
  margin-bottom: 45px;
}
@media (max-width: 767px) {
  /**** Reservation ****/

  .reservation-header h3 {
    font-size: 26px;
  }

  .reservation-tabs .nav-tabs .nav-item {
    margin: 0 20px 15px 0 !important;
  }

  .reservation-tabs .nav-tabs .nav-link {
    font-size: 16px;
  }

  .reservation-tabs .tab-content .table-responsive {
    min-height: 100%;
  }

  .reservation-page {
    min-height: 100%;
    margin: 0 0 50px 0;
  }

  .toutes-tab-search form {
    padding: 0 0 20px 0;
    width: 100%;
    top: 0;
  }

  .dataTables_paginate ul {
    margin: 30px 0 20px 0 !important;
  }

  .top-nav-menu ul {
    flex-wrap: wrap;
    margin: 10px 0;
  }

  .top-nav-menu ul li {
    width: 100%;
    margin: 0 0 10px 0;
  }

  /***** Dashboard *****/

  .table-responsive .datatable tbody td.proprietaire-th .img {
    width: 40px;
  }

  .promotion-carousel .carousel-inner .carousel-item .carousel-caption {
    left: 10px;
  }

  footer {
    padding: 45px 0 00 0;
  }

  .title-block h1 {
    font-size: 26px;
  }

  /***** Detail Page *****/

  .product-creation-deail-table .remove-btn {
    position: relative;
  }

  .product-form-sidebar {
    position: relative;
    margin: 0 0 20px 0;
  }

  .footer-2 .footer-inner .left {
    margin: 0 0 15px 0;
    text-align: center;
  }

  .footer-2 .footer-inner ul li+li:before {
    margin: 7px;
  }

  .footer-2 .footer-inner ul {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .product-creation-page-title h2 {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .product-creation-page {
    padding: 35px 0 40px;
  }

  .tabNav ul {
    padding: 10px 0;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    text-align: center;
  }
  .tabNav ul::-webkit-scrollbar {
    display: none;
  }
  .tabNav ul li a {
    font-size: 11px;
  }
  .tabNav ul li+li:before {
    margin: 0 5px;
    width: 6px;
    height: 11px;
    background-size: contain;
    top: 1px;
  }

  .rapport-annuel-section form .bootstrap-select {
    margin: 0 32px 0 0;
  }

  .vos-transection-table-header h4 {
    width: 100%;
  }

  .vos-transection-table-header {
    flex-wrap: wrap;
  }

  .vos-transection-table-header .toutes-tab-search {
    width: 100%;
  }

  .post-footer .post-footer-links {
    margin: 0 0 20px 0;
  }

  .profile-header-section .text .name h4 {
    font-size: 22px;
  }

  .avisetnotation-tab-content .left {
    margin-bottom: 30px;
  }

  .testimonial-row .img-row .img img {
    width: 55px;
  }

  .chat-section {
    height: auto;
  }

  .chat-section .massage-list-box {
    height: 450px;
    overflow: auto;
    
  }

  .chat-box-area {
    height: 450px;
    padding: 14px 0 0 8px;
  }

  /*** Checkout cart page ****/

  .cart-item-row .img-section {
    width: 106px;
    height: 106px;
  }

  .cart-item-row .img-section {
    width: 106px;
    height: 106px;
  }

  .cart-item-row .info {
    width: 100%;
    padding: 0 0 0 115px;
  }

  .cart-item-row .qty-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-item-row .qty-section .qty-dropdown {
    display: flex;
    margin: 0;
    width: 50%;
  }

  .cart-item-row .delete-product {
    width: 50%;
    text-align: right;
  }

  .cart-item-row .info h3 {
    font-size: 16px;
    flex-wrap: wrap;
    line-height: 22px;
  }

  .cart-item-row .info h3 a {
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cart-item-row .info h3 span {
    margin: 8px 0 0 0;
  }

  .cart-item-row .info label span {
    margin: 8px 0 0 0;
  }

  .cart-item-row {
    padding: 0 0 0 0;
    margin: 0 0 24px 0;
  }

  .option-to-add-section .cart-item-row .qty-section {
    margin: 0;
    flex-wrap: wrap;
  }

  .option-to-add-section .cart-item-row .qty-section .qty-dropdown {
    width: 100%;
    margin: 0;
    padding: 0 0 0 115px;
  }

  .option-to-add-section .cart-item-row .delete-product {
    width: 100%;
    text-align: left;
    margin: 40px 0 24px 0;
  }

  .option-to-add-section .cart-item-row .info p {
    margin: 0;
  }

  .checkout-cart-right-box .chat-right-box-inner {
    box-shadow: none;
    border: 1px solid #F4F4F4;
    padding: 24px 24px 12px 24px;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  .checkout-cart-right-box-inner {
    margin: 0 0 70px 0;
    position: static;
  }

  .depot-section {
    text-align: center;
    margin: 0 0 0 0;
  }

  .sticky-bottom-button {
    /* CTA solo de tunnel : bottom:0, z passe a --ls-z-cta, safe-area + clavier
       absorbes dans le padding-bottom (cf §6 .ls-sticky-bar-solo). */
    position: fixed;
    z-index: var(--ls-z-cta);
    bottom: 0;
    padding: 20px;
    padding-bottom: calc(20px + var(--ls-safe-bottom) + var(--ls-keyboard-inset));
    left: 0;
    background: #fff;
    width: 100%;
  }

  .sticky-bottom-button .choice {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .sticky-bottom-button .choice .btn-outline-primary {
    width: 100%;
    margin-right: 5px
  }

  .sticky-bottom-button .choice .btn-primary {
    width: 100%;
    margin-left: 5px
  }

  .sticky-bottom-button .btn {
    width: 100%;
  }

  .contrat-de-location {
    margin: 0 0 48px 0;
    border-bottom: 1px solid #F4F4F4;
    padding: 32px 0 32px 0;
    border-top: 1px solid #F4F4F4;
  }

  .contrat-de-location .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: static;
  }

  .contrat-de-location .button .btn-outline-primary {
    font-size: 18px;
    line-height: 26px;
    margin: 0 0 36px 0;
  }

  .contrat-de-location .button .btn-primary {
    font-size: 18px;
    line-height: 26px;
    margin: 0 0 36px 0;
  }

  .votre-project-section .btn {
    width: 100%;
  }

  .update-date .return-date {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .message-landlord-page .checkout-cart-right-box .chat-right-box-inner {
    padding: 0;
    border: 0;
    margin: 0;
  }

  .message-landlord-page .checkout-cart-right-box-inner {
    margin: 0;
  }

  .message-landlord-page .Apropos-tab-content {
    margin: 0 0 70px 0;
  }

  .finalisation-cart-page .validate-popup {
    padding: 12px 0 0 0;
    box-shadow: none;
    flex-wrap: wrap;
    margin: 0 0 30px 0;
  }

  .finalisation-cart-page .validate-popup .img-section {
    width: 100%;
    height: 64px;
    margin: 0 0 24px 0;
  }

  .finalisation-cart-page .validate-popup .info-section {
    width: 100%;
    padding: 0;
  }

  .finalisation-cart-page .validate-popup .info-section h2 {
    font-size: 32px;
    line-height: 44px;
  }

  .finalisation-cart-page .validate-popup .info-section h2 svg {
    display: none;
  }

  .location-update {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .votre-demande {
    padding: 0 0 48px 0;
    flex-wrap: unset;
    margin: unset;
    border-bottom: unset;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
  }

  .votre-demande .date-box {
    flex-wrap: wrap;
    width: 50%;
  }

  .votre-demande .date-box h4 {
    display: none;
  }

  .votre-demande .date-box .date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    left: 0px;
    top: 268px;
    margin: 0;
  }

  .votre-demande .retour-date {
    width: 50%;
  }

  .votre-demande .arrow {
    width: 10%;
  }

  .update-location {
    display: flex;
    flex-direction: center;
    align-items: center;
    padding: 0 0 48px 0;
    border-bottom: 1px solid #F4F4F4;
  }

  .documentaire-cart-items .cart-item-row .img-section {
    width: 106px;
    height: 106px;
  }

  .documentaire-cart-items .cart-item-row .info {
    width: 100%;
    padding-bottom: 20px;
  }

  .documentaire-cart-items .cart-item-row .qty-section {
    width: 100%;
  }

  /* .documentaire-step-section
  {
    overflow: hidden;
  } */

  .documentaire-step-section {
    min-height: auto;
    /* padding-bottom divergent (94px) supprime : la regle de base var() couvre tous les breakpoints (cf §6). */
  }

  .documentaire-step-section .multisteps-form__panel {
    transform: unset !important;
  }

  .documentaire-step-section .checkout-cart-right-box {
    margin-bottom: 60px;
  }

  .depot-page .checkout-cart-right-box {}

  .debit-card-popup-btn {
    padding: 0 0 15px 60px !important;
  }

  .card-dropdown #a li span,
  .btn-select li span {
    margin-left: 10px;
  }

  .card-dropdown #a {
    padding: 0 0 15px 0 !important;
  }

  .multisteps-form .ml-auto {
    width: 767px;
    overflow: auto;
  }

  .multisteps-form__progress {
    width: 767px;
  }

  .depot-sectioin-title {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: baseline;
  }

  .depot-sectioin-title h4 {
    margin: 0 0 20px 0;
  }

  .depot-sectioin-title h3,
  .depot-page .info-box h3 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .lang-select .dropdown-menu a {
    padding: 10px 15px 10px 60px !important;
  }

  .documentaire-cart-items .cart-item-row .info h3 span i {
    position: relative;
    bottom: 30px;
    left: 80px;
  }

  .card-dropdown .btn-select li span {
    display: flex;
    flex-wrap: wrap;
  }

  .bank-transfer-data ul {
    padding: 24px 15px 19px 15px;
  }


  .doc-cartitems-checkmark .cart-item-row .img-section {
    padding: 0 0 0 25px;
  }

  /**** Cart Page ****/

  .cart-page-paniers {
    padding: 32px 0 120px 0;
  }

  .cart-box-paniers {
    padding: 32px 0 0px 0;
  }

  .cart-box-paniers .box .box-inner {
    max-width: 400px;
    margin: 0 auto;
  }

  .cart-page-bottom .navbar {
    display: block;
  }

  .cart-page-bottom #slide-menu-collapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: #fff;
    overflow: auto;
    z-index: 9999;
    padding: 20px;
  }

  .cart-page-bottom .menu-overlay {
    display: none;
    background: rgba(8, 0, 37, 0.25);
    opacity: 1;
    bottom: 0;
    left: 0;
    filter: alpha(opacity=1);
    /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
  }

  /*** Empty Page ***/

  .empty-page-section {
    overflow: hidden;
    padding: 32px 0 100px 0;
  }

  .empty-page-section .left .box {
    margin: 0 auto 30px;
  }

  .empty-page-section .left .box img {
    width: 225px;
  }

  /**** Header New *****/

  .header-new .navbar-brand .logo-desktop,
  .header-new .navbar-brand .navbar-brand-tagline {
    display: none;
  }

  .header-new .navbar-brand .logo-mobile {
    display: inline;
    width: 33px;
    height: auto;
  }

  .header-new {
    flex-wrap: unset;
  }

  .header-new .navbar-collapse {
    width: calc(100% - 45px);
  }

  nav.navbar.navbar-light.header-new .header-search-form {
    width: 100%;
    padding: 6px 10px 6px 15px;
  }

  nav.navbar.navbar-light.header-new .header-search-form input {
    width: 100%;
  }

  /***** Catalogue *****/
  .container-fluid.catalogue-main.np {
    margin-bottom: 100px;
  }
}

@media all and (min-width: 320px) and (max-width: 575px) {
  .statistiques .box-area .box {
    width: 50%;
  }

  .profile-header-section .left {
    flex-wrap: wrap;
  }

  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    min-width: 38px;
    width: 38px;
    height: 38px;
  }

  .container-fluid.catalogue-main.np {
    margin-bottom: 100px;
  }
}

@media all and (min-width: 576px) and (max-width: 767px) {
  .daterangepicker {
    max-width: 356px;
  }

  .container-fluid.catalogue-main.np {
    margin-bottom: 100px;
  }
}
@media all and (min-width: 768px) and (max-width: 991px) {
  .top-nav-menu ul {
    flex-wrap: wrap;
    margin: 10px 0;
  }

  .top-nav-menu ul li {
    width: 100%;
    margin: 0 0 10px 0;
  }

  .reservation-tabs .tab-content .datatable {
    margin: 30px 0 0 0 !important;
  }

  .toutes-tab-search form {
    top: -25px;
    background: transparent;
  }

  /****** Catalogue *****/

  .container-fluid.catalogue-main.np {
    margin-bottom: 100px;
  }

  /***** Dashboard *****/

  .table-responsive .datatable tbody td.proprietaire-th .img {
    width: 40px;
  }

  .footer-2 .footer-inner ul li+li:before {
    margin: 7px 15px;
  }

  .profile-header-section .text .name h4 {
    font-size: 22px;
  }

  .statistiques .box-area .box {
    width: 50%;
  }

  .profile-tab-section .statistiques .box-area .box {
    margin-bottom: 20px;
  }

  .checkout-cart-right-box .chat-right-box-inner {
    box-shadow: none;
    border: 1px solid #F4F4F4;
    padding: 24px 24px 12px 24px;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block;
  }

  .checkout-cart-right-box-inner {
    margin: 0 0 70px 0;
  }

  .sticky-bottom-button {
    /* CTA solo de tunnel : bottom:0, z passe a --ls-z-cta, safe-area + clavier
       absorbes dans le padding-bottom (cf §6 .ls-sticky-bar-solo). */
    position: fixed;
    z-index: var(--ls-z-cta);
    bottom: 0;
    padding: 20px;
    padding-bottom: calc(20px + var(--ls-safe-bottom) + var(--ls-keyboard-inset));
    left: 0;
    background: #fff;
    width: 100%;
  }

  .contrat-de-location .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 24px;
    position: static;

    margin: 29px 0px;
  }

  .contrat-de-location .button .btn-outline-primary {
    font-size: 18px;
    line-height: 26px;
    margin: 0 0 36px 0;
  }

  .contrat-de-location .button .btn-primary {
    font-size: 18px;
    line-height: 26px;
    margin: 0 0 36px 0;
  }

  .message-landlord-page .checkout-cart-right-box .chat-right-box-inner {
    padding: 0;
    border: 0;
    margin: 0;
  }

  .message-landlord-page .checkout-cart-right-box-inner {
    margin: 0;
  }

  .message-landlord-page .Apropos-tab-content {
    margin: 0 0 70px 0;
  }

  .documentaire-step-section .multisteps-form__panel {
    transform: unset !important;
  }

  .documentaire-step-section {
    min-height: auto;
    /* padding-bottom divergent (0px) supprime : la regle de base var() couvre tous les breakpoints (cf §6). */
  }

  .checkout-cart-right-box-inner {
    position: static;
  }

  /*** Cart Page ***/

  .cart-box-paniers .box {
    flex: unset;
    max-width: 400px;
    margin: 0 auto 30px;
  }

  .cart-page-paniers {
    padding: 32px 0 120px 0;
  }

  .cart-box-paniers {
    padding: 32px 0 0px 0;
  }

  .cart-box-paniers .box .box-inner {
    max-width: 400px;
    margin: 0 auto;
  }

  .cart-page-bottom .navbar {
    display: block;
  }

  .cart-page-bottom #slide-menu-collapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: #fff;
    overflow: auto;
    z-index: 9999;
    padding: 20px;
  }

  .cart-page-bottom .menu-overlay {
    display: none;
    background: rgba(8, 0, 37, 0.25);
    opacity: 1;
    bottom: 0;
    left: 0;
    filter: alpha(opacity=1);
    /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
  }

  /**** Header New *****/

  .header-new .navbar-brand .logo-desktop,
  .header-new .navbar-brand .navbar-brand-tagline {
    display: none;
  }

  .header-new .navbar-brand .logo-mobile {
    display: inline;
    width: 33px;
    height: auto;
  }

  .header-new {
    flex-wrap: unset;
  }

  .header-new .navbar-collapse {
    width: calc(100% - 45px);
  }

}

@media all and (min-width: 992px) and (max-width: 1199px) {
  .desktop-only {
    display: none !important;
  }

  .top-nav-menu ul {
    flex-wrap: wrap;
    margin: 10px 0;
  }

  .top-nav-menu ul li {
    width: 100%;
    margin: 0 0 10px 0;
  }

  .reservation-tabs .tab-content .datatable {
    margin: 30px 0 0 0 !important;
  }

  .toutes-tab-search form {
    top: -25px;
    background: transparent;
  }

  .cart-button-group .btn-transparent,
  .cart-button-group .btn-primary {
    padding: 12px;
  }
}

/***** Model popup(welcome) *****/
body.open-welcome-model {
  overflow: hidden !important;
}

.welcome-model-main {
  /* Modale d'accueil : z ramene dans l'echelle modale (11111 -> --ls-z-modal 1050, cf §3/§6).
     Fallback 1050 : --ls-z-modal n'est expose qu'en monde Vue, pas dans le pont legacy. */
  background: rgba(8, 0, 37, 0.25);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: var(--ls-z-modal, 1050);
  display: none;
}

.welcome-model-main.active {
  display: block;
}

.welcome-model-wrapper {
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.welcome-model-inner {
  background-color: black;
  background-image: url('/img/new/model-bg-1.png');
  border-radius: 8px;
  overflow: hidden;
  width: 364px;
  height: 545px;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  padding: 20px 25px 15px;

}

.welcome-model-inner>div {
  width: 100%;
}

.welcome-model-content {
  align-self: flex-end;
}

.welcome-model-header h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;

}

.welcome-model-header h3 img {
  margin-right: 8px;
}

.welcome-model-content p {
  font-size: 18px;
  line-height: 25px;
  font-weight: bold;
  margin-bottom: 30px;
}

.welcome-model-btns a {
  display: table;
  margin: 0 auto;
  font-size: 16px;
}

.welcome-model-btns a.btn-close-model {
  color: #fff;
  font-size: 18px;
  margin-top: 12px;
}



@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css');

@media (max-width: 767px) {
  .multisteps-form .ml-auto {
    overflow: auto;
    width: auto;
  }

  .multisteps-form__progress {
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow-x: inherit;
    position: relative;
  }

  .multisteps-form__progress-btn {
    width: 100%;
  }

  /*.multisteps-form__progress{width: 100%;padding-right: 29vw;}  */
  .multisteps-form__progress {
    width: 780px;
    padding-right: 0;
    display: flex;
    overflow: auto;
  }

  .multisteps-form__progress .multisteps-form__progress-btn:last-child:after {
    width: 100%;
  }

  .multisteps-form__progress-btn {
    padding-right: 15px;
  }

  .product-creation-page {
    overflow-x: hidden;
  }

  .product-box-mob {
    width: 100%;
    display: block;
    margin: 0;
    padding-right: 60px;
    overflow: inherit;
  }

  .product-box-mob .product-box-area {
    padding: 0 30px 0 0;
    float: left;
  }
}

.identity-certif {
  margin-left: 15px;
}

.identity-certif span {
  font-size: 20px;
}

.identity-certif b {
  margin-left: 3px;
}

.phone-chat-header {
  width: 100%;
  background: white;
  display: none;
  align-items: center;
  border-bottom: 1px solid #F4F4F4
}

@media (max-width: 992px) {
  .chat-box-area {
    padding: 0px;
  }

  .chat-right-box,
  .chat-right-col {
    display: none !important;
  }

  .chat-section {
    background: white;
  }

  .type-box {
    /* Barre de saisie messagerie = CTA solo (bottom:0) : la nav est masquee en
       conversation. z CTA + safe-area/clavier dans le padding (cf §4/§6 ls-sticky-bar-solo).
       Remplace le bottom:94px en dur qui laissait un trou sous la barre. */
    background: white;
    position: fixed;
    bottom: 0;
    z-index: var(--ls-z-cta);
    padding: 10px;
    padding-bottom: calc(10px + var(--ls-safe-bottom) + var(--ls-keyboard-inset));
    border-top: 1px solid #F4F4F4;
  }

  .card-footer {
    background-color: white;
  }

  .close-message .massage-list-box {
    display: block;
  }

  .close-message .chat-box-area {
    display: none;
  }

  .open-message .massage-list-box {
    display: none;
  }

  .open-message .chat-box-area {
    display: block;
  }

  .chat-box-area .card-body {
    height: calc(100vh - 406px);
  }

  .chat-box-area {
    height: 100vh;
  }

  .chat-section .massage-list-box {
    height: 100vh;
  }

  .phone-chat-header {
    display: flex;
  }

  .chat-section {
    height: calc(100vh - 165px);
  }
}

/* Desktop: afficher les 3 colonnes côte à côte */
@media (min-width: 993px) {
  /* Forcer l'affichage des colonnes même quand open-message/close-message sont présents */
  .massage-list-box,
  #messagerie-container.open-message .massage-list-box,
  #messagerie-container.close-message .massage-list-box,
  .chat-section .massage-list-box {
    display: block !important;
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
  }

  .chat-box-area,
  #messagerie-container.open-message .chat-box-area,
  #messagerie-container.close-message .chat-box-area,
  .chat-section .chat-box-area {
    display: flex !important;
    flex-direction: column;
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }

  .chat-right-box,
  #messagerie-container.open-message .chat-right-box,
  #messagerie-container.close-message .chat-right-box,
  .chat-section .chat-right-box {
    display: none !important;
  }

  .chat-right-col,
  #messagerie-container.open-message .chat-right-col,
  #messagerie-container.close-message .chat-right-col,
  .chat-section .chat-right-col {
    display: block !important;
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
  }

  /* Container de la messagerie en flexbox */
  #messagerie-container,
  .chat-section #messagerie-container,
  #messagerie-container.open-message,
  #messagerie-container.close-message {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  /* Masquer le header mobile sur desktop */
  .phone-chat-header {
    display: none !important;
  }

  /* Hauteur du conteneur de chat sur desktop */
  .chat-section {
    height: calc(100vh - 70px) !important;
    overflow: hidden !important;
  }

  .chat-section .massage-list-box {
    height: calc(100vh - 70px) !important;
    overflow: hidden !important;
  }

  .chat-box-area {
    height: calc(100vh - 70px) !important;
    overflow: hidden !important;
  }
}

.phone-chat-header .Taux-de-secion {
  display: none;
}

.phone-chat-header .chat-right-box-inner {
  display: block;
  float: left;
}

.phone-chat-header .dernieres {
  display: none;
}

.phone-chat-header .img {
  display: none;
}

.phone-chat-header .chat-right-box-inner .first {
  margin: 10px 0px;
}

.phone-chat-header .back-chat-arrow {
  height: 24px;
  transform: rotate(180deg);
}

.phone-chat-header .back-chat-icon {
  display: block;
  float: left;
  margin: 10px 22px 10px 22px;
}

.right-icons {
  font-weight: bold;
  color: #080025;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  padding-left: 28px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 18px;
  cursor: pointer;
}

.right-icons.upload {
  margin-left: 24px;
  background-image: url("/img/new/product-single/upload.png");
}

.right-icons a {
  color: #080025;
}

.modal-share .modal-content span:first-child {
  margin: 0px;
}

.modal-share .modal-content span {
  display: block;
  margin: 12px 0px;
  color: #6F6F6F;
  cursor: pointer;
}



/*.right-icons.fav {*/
/*    margin-left: 24px;*/
/*    background-image: url("/img/new/product-single/fav.png");*/
/*}*/

/* =============================================================================
   FEATURES TOGGLE - Page Rentabilisez
   ============================================================================= */

.elegant-toggle-btn {
  background: none;
  border: none;
  color: #6c757d;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 0;
  cursor: pointer;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.elegant-toggle-btn:hover {
  color: #2c3e50;
  transform: translateY(-1px);
}

.elegant-toggle-btn:focus {
  outline: none;
}

.elegant-toggle-btn::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff4757, transparent);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.elegant-toggle-btn:hover::before {
  width: 100%;
}

.elegant-toggle-btn #toggle-icon {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 12px;
}

.features-hidden-container {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-20px);
}

.features-hidden-container.expanded {
  max-height: 2000px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 40px;
}

.partial-feature-left,
.partial-feature-right {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.features-fade-out .partial-feature-left {
  transform: translateX(-30px);
  opacity: 0;
}

.features-fade-out .partial-feature-right {
  transform: translateX(30px);
  opacity: 0;
}

#features-expand-row {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.features-hidden-container .col-md-4 {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(30px);
}

.features-hidden-container.expanded .col-md-4:nth-child(1) { animation-delay: 0.1s; }
.features-hidden-container.expanded .col-md-4:nth-child(2) { animation-delay: 0.2s; }
.features-hidden-container.expanded .col-md-4:nth-child(3) { animation-delay: 0.3s; }
.features-hidden-container.expanded .col-md-4:nth-child(4) { animation-delay: 0.4s; }
.features-hidden-container.expanded .col-md-4:nth-child(5) { animation-delay: 0.5s; }
.features-hidden-container.expanded .col-md-4:nth-child(6) { animation-delay: 0.6s; }
.features-hidden-container.expanded .col-md-4:nth-child(7) { animation-delay: 0.7s; }
.features-hidden-container.expanded .col-md-4:nth-child(8) { animation-delay: 0.8s; }
.features-hidden-container.expanded .col-md-4:nth-child(9) { animation-delay: 0.9s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.elegant-toggle-btn.expanded #toggle-icon {
  transform: rotate(45deg);
}

.elegant-toggle-btn.expanded {
  color: #2c3e50;
}

#features-expand-row.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* ===== STYLES HOMEPAGE GUEST ===== */

/* Responsive pour l'image hero */
@media (min-width: 992px) {
    .hero-main-image {
        width: 120% !important;
    }
}

@media (max-width: 991px) {
    .hero-main-image {
        width: 100% !important;
        transform: none !important;
    }
    
    .col-lg-5 > div {
        transform: translateY(0%) !important;
    }
}

@media (max-width: 767px) {
    .hero-main-image {
        width: 90% !important;
        margin: 0 auto;
        display: block;
    }
}

/* Optimisation du chargement des images */
.client-logo {
    will-change: filter, opacity;
    max-height: 50px;
    width: auto;
    object-fit: contain;
}

/* Section logos clients */
.clients-logos {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive pour les logos clients */
@media (max-width: 768px) {
    .clients-logos {
        justify-content: space-around !important;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .client-logo {
        max-height: 40px;
        margin: 10px;
    }
}

@media (max-width: 576px) {
    .clients-logos {
        justify-content: center !important;
        gap: 15px;
    }
    
    .client-logo {
        max-height: 35px;
        margin: 8px;
    }
}

/* Optimisations pour les nouvelles sections */
.home-logo {
    will-change: filter, opacity;
    transition: filter 0.3s ease, opacity 0.3s ease;
    max-height: 50px;
    width: auto;
    object-fit: contain;
    opacity: 0.7;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.home-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* Section logos presse */
.home-logo-container .home-logos-custom {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

/* Responsive pour les logos presse */
@media (max-width: 768px) {
    .home-logo-container .home-logos-custom {
        justify-content: space-around !important;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .home-logo {
        max-height: 40px;
        margin: 10px;
    }
}

@media (max-width: 576px) {
    .home-logo-container .home-logos-custom {
        justify-content: center !important;
        gap: 15px;
    }
    
    .home-logo {
        max-height: 35px;
        margin: 8px;
    }
}

.small-icon {
    will-change: transform;
    transition: transform 0.3s ease;
}

/* Optimisation des animations pour les performances */
.animate__animated {
    animation-fill-mode: both;
    animation-duration: 0.8s;
}

.delay-200 {
    animation-delay: 0.2s;
}
.delay-400 {
    animation-delay: 0.4s;
}



/* Performance: préchargement des animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__animated[data-animation="fadeInUp"] {
    animation-name: fadeInUp;
}

/* Optimisations pour les CTA de features */
.feature-cta {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    padding: 8px 12px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.feature-cta:hover,
.feature-cta:focus,
.feature-cta:active,
.feature-cta:visited {
    text-decoration: none !important;
    color: #FC2249;
}

/* Améliorer l'effet hover pour les boutons feature-cta */
.feature-cta:hover {
    transform: translateX(2px);
}

.feature-cta:hover i {
    transform: translateX(2px);
}

/* Supprimer le chevron par défaut des read-more-link quand on utilise feature-cta */
.read-more-link .feature-cta {
    background: none !important;
    padding-right: 12px !important;
}

/* Supprimer aussi le background sur le div read-more-link parent */
.read-more-link:has(.feature-cta) {
    background: none !important;
    padding-right: 0 !important;
}

/* Fallback pour les navigateurs qui ne supportent pas :has() */
.section-spacing .read-more-link {
    background: none !important;
    padding-right: 0 !important;
}

/* Harmonisation des blocs de features */
.home-feature-text {
    border-radius: 12px;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
}

/* Espacement uniforme pour toutes les sections */
.section-spacing {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.section-spacing.hero-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* Supprimer les espaces supplémentaires dans les sections standardisées */
.section-spacing .title-block:first-child {
    margin-top: 0 !important;
}

.section-spacing .container:first-child {
    padding-top: 0 !important;
}

/* Standardiser les espacements internes spécifiques */
.section-spacing .col-12.text-center[style*="margin-top"] {
    margin-top: 40px !important;
}

.section-spacing .mt-5.pt-5 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.section-spacing .mt-2 {
    margin-top: 0 !important;
}

/* Responsive pour l'espacement des sections */
@media (max-width: 768px) {
    .section-spacing {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    .section-spacing.hero-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .home-feature-text {
        margin-bottom: 30px;
    }
    
    .feature-cta {
        justify-content: center;
    }
    
    /* Moins d'espace sur mobile */
    .col-12.text-center[style*="margin-top"] {
        margin-top: 30px !important;
    }
    
    /* Badges plus petits sur mobile */
    .badge {
        font-size: 12px !important;
        padding: 4px 12px !important;
    }
    
    .badge i {
        font-size: 10px !important;
        margin-right: 4px !important;
    }
    
    /* Titre plus petit sur mobile */
    #hero-title {
        font-size: 2.5rem !important;
    }
}

/* Styles pour les badges hero */
.d-flex.gap-2 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
}

.badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Amélioration du bloc de recherche hero */
.search-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(252, 34, 73, 0.2) 50%, transparent 100%);
    z-index: 1;
}

.search-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, transparent 100%);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
    z-index: 0;
}

.search-block > * {
    position: relative;
    z-index: 2;
}

/* Styles simplifiés pour l'autocomplétion */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    /* jquery-ui.css n'est jamais chargee sur le site (seul jquery-ui.min.js
       l'est) : sans cette ligne le menu reste en `position: static`, jQuery le
       repasse en `relative` et l'ancre a la fin du <body>, ou la moindre
       variation de hauteur de page le decale de plusieurs centaines de pixels.

       Reste a faire : seule l'autocompletion Vue (SearchForm.vue) ancre son menu
       dans le formulaire du header. Les cinq autres inits (autocompleteRechercheNew.js
       x2, guest-home.js, menu-search.twig, menu-public.twig, search-block.html.twig)
       le laissent en fin de <body>, donc scroller avec la liste ouverte la decroche
       du champ tant que le header est en position:fixed. Le meme `appendTo` n'y est
       pas transposable : `.two` (header.twig) porte overflow:hidden en style inline. */
    position: absolute !important;

    /* Z-index élevé pour passer au-dessus de tout */
    z-index: 9999 !important;
    
    /* Design épuré */
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    
    /* Espacement */
    padding: 8px !important;
    margin-top: 4px !important;
    
    /* Animation simple */
    opacity: 0;
    animation: fadeInDropdown 0.2s ease-out forwards;
}

/* Animation simplifiée */
@keyframes fadeInDropdown {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Suppression de l'ancien pseudo-élément ::before */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete:before {
    display: none !important;
}

/* Suppression des points/puces */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item {
    list-style: none !important;
    list-style-type: none !important;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item:before {
    display: none !important;
    content: none !important;
}

/* Styles des éléments de suggestion */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item .ui-menu-item-wrapper {
    color: #475569 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease !important;
    margin: 1px 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    list-style: none !important;
    cursor: pointer !important;
}

/* État hover/actif simplifié */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    color: #FC2249 !important;
    background: #f8fafc !important;
}

/* Styles des catégories (labels) */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item.ui-state-disabled .ui-menu-item-wrapper {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 6px 12px 2px 12px !important;
    margin: 6px 0 2px 0 !important;
    background: transparent !important;
    border: none !important;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item.ui-state-disabled .ui-menu-item-wrapper span {
    color: #94a3b8 !important;
}

/* Styles pour la bottom bar mobile */
.mobile-bottom-bar {
    position: relative;
}


/* Styles pour le menu slide mobile */
.navbar-collapse, #slide-menu-collapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100%;
    background-color: white;
    z-index: 9999;
    overflow-y: auto;
    padding: 20px 24px;
    display: none;
}

/* Affichage du menu quand la classe show est ajoutée */
.navbar-collapse.show, #slide-menu-collapse.show {
    display: block !important;
}

/* Reset du menu slide mobile sur desktop pour navbar-expand-xl */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-collapse {
        position: static;
        width: auto !important;
        height: auto !important;
        max-width: none;
        background-color: transparent;
        z-index: auto;
        overflow-y: visible;
        padding: 0;
    }
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.drawer-header-title {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.drawer-header-logo {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

/* Styles pour le logo quand c'est directement sur l'img */
img.drawer-header-logo {
    height: 28px !important;
    width: auto !important;
    max-width: 120px !important;
    max-height: 28px !important;
}

.drawer-header-logo img {
    height: 28px !important;
    width: auto !important;
    max-width: 120px !important;
    max-height: 28px !important;
}

/* Spécifique pour le menu slide mobile - Force absolue */
#slide-menu-collapse .drawer-header img,
#slide-menu-collapse .drawer-header img.drawer-header-logo,
#slide-menu-collapse img[alt="LightyShare"] {
    height: 28px !important;
    width: auto !important;
    max-width: 120px !important;
    max-height: 28px !important;
    object-fit: contain !important;
}

/* Contrainte sur tous les logos Lightyshare sur mobile */
@media (max-width: 768px) {
    img[src*="Lightyshare.svg"] {
        height: 28px !important;
        max-height: 28px !important;
        width: auto !important;
    }
}

.close-icon {
    cursor: pointer;
    font-size: 22px;
    color: #666;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-icon:hover {
    color: #333;
    background-color: #f1f1f1;
}

.left-menu {
    list-style: none;
    padding: 0;
    margin: 0 -8px;
}

.left-menu li {
    margin-bottom: 8px;
}

.left-menu li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin: 0 8px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.left-menu li a:hover {
    color: #FC2249;
    background-color: #f8f9fa;
}

.left-menu li a i {
    font-size: 20px;
    width: 22px;
    text-align: center;
}

.menu-primary-action a,
.mobile-red-button,
a.mobile-red-button {
    background: #FC2249 !important;
    color: white !important;
    padding: 16px 20px !important;
    margin: 0 8px 16px 8px !important;
    border-radius: 8px !important;
    justify-content: center !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    font-size: 18px !important;
    transition: all 0.2s ease !important;
}

.mobile-red-button:hover,
a.mobile-red-button:hover {
    background: #d11440 !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* S'assurer que l'icône et le texte sont blancs */
.mobile-red-button i,
.menu-primary-action a i,
a.mobile-red-button i {
    color: white !important;
    font-size: 20px !important;
}

.mobile-red-button:hover i,
a.mobile-red-button:hover i {
    color: white !important;
}

/* Forcer l'affichage du texte dans le bouton */
.left-menu .mobile-red-button,
.left-menu a.mobile-red-button {
    color: white !important;
    background: #FC2249 !important;
}

.menu-secondary-action a {
    color: #FC2249 !important;
    font-weight: 500;
}

/* Responsive pour les pages - Optimisations mobiles de la page d'accueil */
@media (max-width: 767px) {
    /* 1. Hero : Masquer les images décoratives d'arrière-plan sur mobile */
    .decorative-svg {
        display: none !important;
    }
    
    /* 2. Hero : Masquer l'image principale sur mobile */
    .hero-main-image {
        display: none !important;
    }
    
    /* 3. Section Catalogue : Masquer les boutons de navigation du slider sur mobile */
    .carousel-pagination {
        display: none !important;
    }
    
    /* 4. Section Simplifier vos productions : Transformer en slider sur mobile */
    .mobile-features-slider {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px;
    }
    
    .mobile-features-slider .col-md-4 {
        display: inline-block;
        white-space: normal;
        vertical-align: top;
        width: 280px;
        min-width: 280px;
        scroll-snap-align: start;
        margin-right: 20px;
    }
    
    .mobile-features-slider .col-md-4:last-child {
        margin-right: 0;
    }
    
    /* 5. Section Logos clients : Pleine largeur sur mobile */
    .clients-logos-mobile {
        width: 100% !important;
    }
}

/* Responsive pour mobile - Autocomplétion */
@media (max-width: 768px) {
    .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
        border-radius: 10px !important;
        padding: 6px !important;
    }
    
    .ui-menu.ui-widget.ui-widget-content.ui-autocomplete li.ui-menu-item .ui-menu-item-wrapper {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }
}

/* Style pour les suggestions en surbrillance */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete .ui-menu-item-wrapper mark,
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete .ui-menu-item-wrapper em {
    background: rgba(252, 34, 73, 0.1) !important;
    color: #FC2249 !important;
    font-weight: 500 !important;
    font-style: normal !important;
    padding: 0 1px !important;
    border-radius: 2px !important;
}

/* ============================================================================
   PAIEMENT LOCATION (.depot-page) — mise en page mobile.

   Bloc volontairement borne en largeur (<= 991.98px, la ou les colonnes
   Bootstrap s'empilent et ou .sticky-bottom-button passe en position fixed).
   Il corrige trois choses mesurees sur /user/paiement-location :
     1. l'ordre des blocs : le recap prix arrivait APRES le formulaire de carte,
        donc on saisissait sa carte avant de savoir ce qu'on paie ;
     2. la barre de CTA : deux lignes empilees (137px) pour une reserve de 70px,
        soit 67px de contenu masque en permanence sous la barre ;
     3. le titre a 26px, la ou les pages recentes titrent a 20px en mobile.
   ========================================================================== */

.depot-page-header .depot-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #667085;
  margin-bottom: 8px;
}

.depot-page-header .depot-back-link:hover {
  color: #080025;
  text-decoration: none;
}

.depot-page-header .depot-back-link i {
  font-size: 12px;
}

/* Montant rappele dans la barre de CTA : inutile en desktop, ou le recap est
   affiche juste a cote du bouton. */
.depot-page .sticky-bottom-button .cta-amount {
  display: none;
}

@media (min-width: 992px) {
  /* Meme respiration que le bouton de validation du panier, qui porte
     margin: 24px 0 (.btn.save-cart dans ui.scss). En dessous de 992px la barre
     est fixe et cette marge n'a pas lieu d'etre. */
  .depot-page .sticky-bottom-button {
    margin: 24px 0;
  }
}

@media (max-width: 991.98px) {
  /* 1. Ordre des blocs. .row reste en flex-wrap : les colonnes font 100% de
        large, elles s'empilent, et `order` suffit a les reordonner. Pas de
        flex-direction: column ici, sinon le `flex: 0 0 100%` de Bootstrap
        s'appliquerait a la hauteur. */
  .depot-page .depot-page-header { order: 1; }
  .depot-page .checkout-cart-right-box { order: 2; }
  .depot-page .depot-page-left { order: 3; }

  .depot-page .depot-page-header { margin-bottom: 16px; }

  .depot-page .depot-page-header .checkout-cart-page-title h2 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 0;
  }

  /* 2. Barre de CTA : montant + bouton sur une seule ligne. */
  .depot-page .sticky-bottom-button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    padding-bottom: calc(12px + var(--ls-safe-bottom) + var(--ls-keyboard-inset));
    border-top: 1px solid #EAECF0;
    box-shadow: 0 -2px 8px rgba(16, 24, 40, 0.06);
  }

  .depot-page .sticky-bottom-button .cta-amount {
    display: block;
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
    color: #080025;
    white-space: nowrap;
  }

  .depot-page .sticky-bottom-button #paiementOuVirement {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* .button-area dans le selecteur : sans lui,
     `.checkout-cart-right-box .cart-right-bottom .button-area .btn-primary`
     (4 classes) l'emporte et rend le margin ci-dessous inoperant. */
  .depot-page .sticky-bottom-button.button-area .btn {
    width: 100%;
    height: 48px;
    /* Un margin-bottom: 15px legacy sur .btn ajoutait une 4e zone morte dans la
       barre : la barre faisait 88px pour un bouton de 48px. */
    margin: 0;
    padding: 0 12px;
    line-height: 1;
    font-size: 15px;
  }

  /* 3. Reserve d'espace calee sur la hauteur reelle de la barre (bouton 44px +
        12px de padding haut et bas), safe-area et clavier compris, a la place
        du margin-bottom: 70px en dur. */
  .depot-page .checkout-cart-right-box-inner {
    margin-bottom: 0;
  }

  /* 12px + bouton 48px + 12px, plus 8px de respiration sous le dernier bloc. */
  .depot-page {
    padding-bottom: calc(80px + var(--ls-safe-bottom) + var(--ls-keyboard-inset));
  }
}

/* ---- css/new-styles/auth.css ---- */
/* .fa déclaré dans base1.css */
.auth-container {
  display: block;
  width: 100%;
  /**
  LOGIN
  **/
}
@media (min-width: 992px) {
  .auth-container {
    display: flex;
    min-height: 100vh;
  }
}
.auth-container > div {
  box-sizing: border-box;
  position: relative;
}
.auth-container .image-container {
  min-width: calc(100% * 0.5);
}
.auth-container .image-container img.logo {
  display: block;
  position: relative;
  z-index: 3;
  width: 226px;
  margin: 20px auto;
}
@media (min-width: 576px) {
  .auth-container .image-container img.logo {
    margin-top: 60px;
  }
}
@media (min-width: 768px) {
  .auth-container .image-container img.logo {
    margin-top: 80px;
  }
}
@media (min-width: 992px) {
  .auth-container .image-container img.logo {
    margin: 25px auto 0 32px;
    width: 160px;
    height: auto;
    position: absolute;
  }
}
.auth-container .image-container img.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  object-fit: cover;
  display: none;
  visibility: hidden;
  border-radius: 0px 50px 50px 0px;
}
@media (min-width: 992px) {
  .auth-container .image-container img.bg {
    display: block;
    visibility: visible;
  }
}
.auth-container .image-container::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(360deg, rgba(8, 0, 37, 0.68) 15.26%, rgba(8, 0, 37, 0.15) 91.23%);
  border-radius: 0px 50px 50px 0px;
  z-index: 1;
  display: none;
  visibility: hidden;
}
@media (min-width: 992px) {
  .auth-container .image-container::after {
    display: block;
    visibility: visible;
  }
}
.auth-container .image-container .photo-credit {
  position: absolute;
  left: 30px;
  bottom: 20px;
  text-align: left;
  z-index: 2;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.15px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: bold;
  max-width: 400px;
}
.auth-container .image-container .photo-credit a {
  color: white;
}
.auth-container .form-container {
  padding: 20px;
  min-width: calc(100% * 0.5);
}
.auth-container .form-container .step-indicator {
  position: absolute;
  left: 0;
  top: 0;
  height: 9px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0.25);
  background: #fc2249;
  transition: transform 0.5s ease-in-out;
}
.auth-container .form-container .auth-link {
  position: absolute;
  right: 40px;
  top: 24px;
  text-align: right;
  z-index: 1;
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  color: #fc2249;
  transition: opacity 0.5s ease-in-out;
}
.auth-container .form-container .auth-link span {
  color: #080025;
}
.auth-container .form-container .photo-credit {
  position: absolute;
  left: 60px;
  bottom: 20px;
  text-align: left;
  z-index: 1;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.15px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: bold;
}
.auth-container .form-container .photo-credit a {
  color: black;
}
@media (min-width: 768px) {
  .auth-container .form-container {
    padding: 60px;
  }
}
.auth-container .form-container form {
  width: 388px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px) {
  .auth-container .form-container form {
    max-width: auto;
  }
}
.auth-container .form-container form .password-strength {
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: -4px;
}
.auth-container .form-container form .form-checkbox-label {
  font-size: 14px;
}
.auth-container .form-container form .conditions-infos {
  font-size: 14px;
}
.auth-container .form-container form .conditions-infos a {
  text-decoration: underline;
}
.auth-container .login-form .forgotten-password {
  text-decoration: underline;
}
.auth-container .login-form .form-checkbox-label {
  margin-top: 12px;
}

/* ---- css/new-styles/services.css ---- */
/* .fa déclaré dans base1.css */
.service-hero-section {
  position: relative;
  padding-top: 40px;
}
.service-hero-section .service-hero-wrapper {
  position: relative;
}
.service-hero-section .service-hero-wrapper .image-wrapper img {
  width: 100%;
  height: auto;
}
.service-hero-section .service-hero-wrapper .text-wrapper {
  padding: 40px 0;
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 10px;
}
.service-hero-section .service-hero-wrapper .text-wrapper.search-form .form-control,
.service-hero-section .service-hero-wrapper .text-wrapper.price-form .form-control {
  margin: 2px 0 10px;
}
.service-hero-section .service-hero-wrapper .text-wrapper.search-form label,
.service-hero-section .service-hero-wrapper .text-wrapper.price-form label {
  font-size: 18px;
  line-height: 26px;
  color: black;
  display: block;
  margin: 10px 0 8px;
}
.service-hero-section .service-hero-wrapper .text-wrapper.search-form p.price,
.service-hero-section .service-hero-wrapper .text-wrapper.price-form p.price {
  color: #080025;
  font-size: 32px;
  font-weight: bold;
  line-height: 43px;
  margin: 20px 0 10px;
}
.service-hero-section .service-hero-wrapper .text-wrapper.search-form p.price small,
.service-hero-section .service-hero-wrapper .text-wrapper.price-form p.price small {
  font-size: 18px;
  line-height: 26px;
  color: black;
}
.service-hero-section .service-hero-wrapper .text-wrapper.search-form button.btn-short,
.service-hero-section .service-hero-wrapper .text-wrapper.price-form button.btn-short {
  font-size: 18px;
  padding-left: 12px;
  padding-right: 12px;
}
@media (min-width: 992px) {
  .service-hero-section .service-hero-wrapper .text-wrapper {
    position: absolute;
    padding: 40px;
    top: 40px;
    right: 40px;
    width: 510px;
  }
  .service-hero-section .service-hero-wrapper .text-wrapper.search-form {
    width: 590px;
  }
}
.service-intro {
  padding-top: 100px;
}
.service-intro h1 {
  margin-bottom: 50px;
}
.service-intro .number-blocks {
  margin-bottom: 40px;
}
.service-intro .number-blocks p {
  margin: 0;
}
.service-intro .number-blocks a {
  text-decoration: underline;
  font-weight: 600;
}
.service-intro .number-blocks h3 {
  margin: 20px 0 10px;
}
.service-intro .number-blocks span {
  background: rgba(252, 34, 73, 0.1);
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  color: #fc2249;
  font-size: 24px;
  font-weight: 600;
}
.services-pink-bg {
  background: rgba(252, 34, 73, 0.05);
  margin: 100px 0;
  padding: 40px 10px;
  box-sizing: border-box;
}
@media (min-width: 992px) {
  .services-pink-bg {
    margin: 140px 0;
  }
}
.services-pink-bg img {
  width: 54px;
  height: auto;
  margin-bottom: 20px;
}

.services-pink-bg h3 {
  margin: 4px 0 20px;
}
.services-pink-bg p:last-child {
  margin-bottom: 0;
}
.verbatim-section {
  width: 100%;
  min-width: 100%;
  background: url(/img/new/icons/quotes.svg) left top no-repeat;
  background-size: 46px auto;
  padding-top: 54px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .verbatim-section {
    margin-top: 0;
  }
}
.verbatim-section h3 {
  margin: 0;
}
.verbatim-section p {
  margin: 10px 0 40px;
}
.tick-section {
  padding: 80px 0 100px;
}
.tick-section ul.green-check {
  border-radius: 30px;
  background: white;
  box-shadow: 0 10px 25px 1px rgba(0, 0, 0, 0.2);
  padding: 40px 30px;
  margin: 0;
  margin-top: 20px;
  list-style-type: none;
}
@media (min-width: 768px) {
  .tick-section ul.green-check {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .tick-section ul.green-check {
    padding: 60px 40px;
  }
}
.tick-section ul.green-check li {
  position: relative;
  padding-left: 52px;
  height: 60px;
  display: flex;
  align-items: center;
}
.tick-section ul.green-check li i {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #eee;
  color: #999;
  transition: all 0.2s linear;
  transition-delay: 3s;
}
.tick-section ul.green-check li:nth-child(1) i {
  transition-delay: 0s;
}
.tick-section ul.green-check li:nth-child(2) i {
  transition-delay: 0.5s;
}
.tick-section ul.green-check li:nth-child(3) i {
  transition-delay: 1s;
}
.tick-section ul.green-check li:nth-child(4) i {
  transition-delay: 1.5s;
}
.tick-section ul.green-check li:nth-child(5) i {
  transition-delay: 2s;
}
.tick-section ul.green-check li:nth-child(6) i {
  transition-delay: 2.5s;
}
.tick-section ul.green-check.active li i {
  background: rgba(28, 204, 57, 0.1);
  color: #1ccc39;
}
.services-user-profiles-section {
  padding: 40px 0 100px;
}
.service-offer-wrapper {
  width: 100%;
  min-width: 100%;
}
.service-offer-wrapper h3 {
  margin: 0;
}
.service-offer-wrapper p.desc {
  margin: 10px 0 40px;
}
.service-offer-wrapper .offer p {
  margin: 0;
}
.service-offer-wrapper .offer p.title {
  font-size: 40px;
  line-height: 54px;
  font-weight: normal;
  color: #fc2249;
}
@media (min-width: 768px) {
  .service-offer-wrapper .offer p.title {
    font-size: 48px;
    line-height: 64px;
  }
}
@media (min-width: 1200px) {
  .service-offer-wrapper .offer p.title {
    font-size: 54px;
    line-height: 74px;
  }
}
.service-offer-wrapper .offer p.font-24 {
  color: #080025;
}
.service-offer-wrapper .offer p.font-16 {
  color: #d5d5d5;
}
.services-user-profiles-image-section img {
  max-width: 420px;
  display: block;
  margin: 0 auto;
}
.services-user-profiles-text-section span {
  font-weight: bold;
  color: #fc2249;
  font-size: 16px;
  font-weight: 600;
}
.services-faq-title {
  color: #fc2249;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 0px;
  margin-top: 40px;
  display: block;
}
.services-faq-title + .collapse > div {
  border-top: none;
  border-radius: 0;
}
.pink-icon-section .pink-icon-inner {
  background: rgba(252, 34, 73, 0.05);
  border-radius: 20px;
  padding: 70px 40px 40px;
  margin-top: 25px;
  position: relative;
}
.pink-icon-section .pink-icon-inner img {
  position: absolute;
  left: 40px;
  top: -26px;
  height: 52px;
}
.pink-icon-section .pink-icon-inner h4 {
  margin: 0;
  font-weight: bold;
}
.pink-icon-section .pink-icon-inner p {
  margin: 10px 0 20px;
}
.pink-icon-section .pink-icon-inner span {
  color: #fc2249;
  display: inline-block;
  margin-left: 10px;
}
.bottom-cta-section {
  padding: 40px 0 140px;
}
@media (min-width: 992px) {
  .bottom-cta-text {
    padding-left: 30px;
  }
}
.bottom-cta-text h3 {
  font-weight: bold;
  margin: 0;
  max-width: 510px;
}
.bottom-cta-text p {
  margin: 10px 0 30px;
  max-width: 510px;
}
.shadow-box-inner {
  position: relative;
  background: white;
  box-shadow: 0 10px 25px 1px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  padding: 40px;
  margin-top: 20px;
}
.shadow-box-inner span {
  background: #fc2249;
  color: white;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  border-radius: 12px;
  top: -12px;
  left: 40px;
  position: absolute;
  font-size: 12px;
  font-weight: 600;
  width: 90px;
}
.shadow-box-inner h3 {
  margin: 0 0 10px 0;
}
.shadow-box-inner p {
  margin: 0;
}

/* ---- css/new-styles/settings.css ---- */
/* ============================================
   Account Settings
   ============================================ */

/* .fa déclaré dans base1.css */
.page-account-settings {
  padding-top: 64px;
  padding-bottom: 128px;
}
.page-account-settings .page-head .profile-email {
  font-size: 18px;
}
.page-account-settings .page-head .profile-link {
  font-size: 16px;
  font-weight: bold;
}
.page-account-settings .profile-section .profile-picture-group {
  margin: 32px 0;
  display: flex;
  align-items: center;
}
.page-account-settings .profile-section .profile-image {
  width: 159px;
  height: 159px;
  border-radius: 50%;
  background-image: url('/img/new/spike.png');
  background-position: center;
  background-size: cover;
}
.page-account-settings textarea {
  height: 88px;
}
.page-account-settings .account-settings-page-section {
  display: none;
}
.page-account-settings .account-settings-page-section .title {
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
}
.page-account-settings .account-settings-page-section .description {
  font-size: 12px;
  line-height: 16px;
  color: #080025;
}
.page-account-settings .payment-section .payment-list {
  border-collapse: separate;
  width: 100%;
  border-spacing: 0 10px;
}
.page-account-settings .payment-section .payment-list .payment-method .payment-image {
  width: 64px;
  height: 24px;
  margin-right: 20px;
}
.page-account-settings .payment-section .payment-list .payment-method .badge {
  font-size: 14px;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 12px;
}
.page-account-settings .payment-section .payment-list .payment-method .action i {
  cursor: pointer;
  color: #6F6F6F;
  transition: all 0.3s ease-in-out;
  font-size: 16px;
}
.page-account-settings .payment-section .payment-list .payment-method .action i:hover {
  color: #fc2249;
}
.page-account-settings .payment-section .payment-list td {
  border: 1px solid #F4F4F4;
  border-left: 0px;
  border-right: 0px;
}
.page-account-settings .payment-section .payment-list tr td:first-child {
  border-top-left-radius: 12px;
  width: 340px;
}
.page-account-settings .payment-section .payment-list tr td:last-child {
  border-top-right-radius: 12px;
}
.page-account-settings .payment-section .payment-list tr td:first-child {
  border-bottom-left-radius: 12px;
  border-right: 0px;
  border-left: 1px solid #F4F4F4;
  padding-left: 12px;
}
.page-account-settings .payment-section .payment-list tr td:last-child {
  border-bottom-right-radius: 12px;
  border-right: 1px solid #F4F4F4;
  padding-right: 12px;
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: right;
}
.page-account-settings .payment-section .coupon-code {
  color: #080025;
}
.page-account-settings .payment-section .coupon-code .coupon-name {
  font-weight: bold;
  font-size: 14px;
  line-height: 19px;
  margin-bottom: 0px;
}
.page-account-settings .payment-section .coupon-code .coupon-period,
.page-account-settings .payment-section .coupon-code .coupon-value {
  font-size: 12px;
  line-height: 16px;
}
.page-account-settings .payment-section .coupon-code.disabled {
  color: #A3A3A3;
}
.page-account-settings .payment-section .coupon-code.disabled .coupon-name {
  color: #A3A3A3;
}
.page-account-settings .modal .powered-illustration {
  width: 304px;
  height: 30px;
}
.page-account-settings .company-section .form-group-intra-community-vat .iti__dial-code {
  display: none;
}

/* Fix: date-select-group selects stacking vertically instead of side by side */
/* Bootstrap 4 .input-group sets flex-wrap:wrap and bootstrap-select children
   get flex:1 1 auto with full parent width, causing them to wrap */
body .date-select-group {
  flex-wrap: nowrap;
}
.date-select-group .bootstrap-select {
  flex: 1 1 0;
  min-width: 0;
}

/* ============================================
   Owner Settings
   ============================================ */

.page-owner-settings {
  padding-top: 64px;
  padding-bottom: 128px;
}
.page-owner-settings .page-head .profile-email {
  font-size: 18px;
}
.page-owner-settings .page-head .profile-link {
  font-size: 16px;
  font-weight: bold;
}
.page-owner-settings .form-row .question {
  margin-bottom: 6px;
  color: #080025;
  font-weight: normal;
  font-size: 14px;
  line-height: 19px;
}
.page-owner-settings textarea {
  height: 88px;
}
.page-owner-settings .owner-settings-page-section {
  display: none;
}
.page-owner-settings .owner-settings-page-section .title {
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  color: #080025;
}
.page-owner-settings .owner-settings-page-section .description {
  font-size: 12px;
  line-height: 16px;
  color: #080025;
}
.page-owner-settings .owner-settings-page-section .sub-title {
  font-weight: 600;
  font-size: 12px;
  line-height: 26px;
  margin-bottom: 8px;
}
.page-owner-settings .offer-section .discount-code-list {
  border-collapse: separate;
  width: 100%;
  border-spacing: 0 0px;
  font-size: 14px;
}
.page-owner-settings .offer-section .discount-code-list thead th {
  padding: 10px 12px;
}
.page-owner-settings .offer-section .discount-code-list thead th i {
  font-size: 14px;
  margin-left: 2px;
}
.page-owner-settings .offer-section .discount-code-list thead tr {
  background: #F4F4F4;
}
.page-owner-settings .offer-section .discount-code-list thead tr th:first-child {
  border-top-left-radius: 6px;
  cursor: pointer;
}
.page-owner-settings .offer-section .discount-code-list thead tr th:last-child {
  border-top-right-radius: 6px;
  text-align: right;
}
.page-owner-settings .offer-section .discount-code-list tbody td {
  padding: 14px 12px;
}
.page-owner-settings .offer-section .discount-code-list tbody td span {
  margin: 0px;
}
.page-owner-settings .offer-section .discount-code-list tbody .action {
  text-align: center;
}
.page-owner-settings .offer-section .discount-code-list tbody .action i {
  cursor: pointer;
  color: #6F6F6F;
  transition: all 0.3s ease-in-out;
  font-size: 16px;
}
.page-owner-settings .offer-section .discount-code-list tbody .action i:hover {
  color: #fc2249;
}
.page-owner-settings .bank-validation-section .beneficiaries-list {
  border-collapse: separate;
  width: 100%;
  border-spacing: 0 10px;
}
.page-owner-settings .bank-validation-section .beneficiaries-list .beneficiary .action i {
  cursor: pointer;
  color: #6F6F6F;
  transition: all 0.3s ease-in-out;
  font-size: 16px;
}
.page-owner-settings .bank-validation-section .beneficiaries-list .beneficiary .action i:hover {
  color: #fc2249;
}
.page-owner-settings .bank-validation-section .beneficiaries-list td {
  border: 1px solid #F4F4F4;
  border-left: 0px;
  border-right: 0px;
}
.page-owner-settings .bank-validation-section .beneficiaries-list tr td:first-child {
  border-top-left-radius: 12px;
}
.page-owner-settings .bank-validation-section .beneficiaries-list tr td:last-child {
  border-top-right-radius: 12px;
}
.page-owner-settings .bank-validation-section .beneficiaries-list tr td:first-child {
  border-bottom-left-radius: 12px;
  border-right: 0px;
  border-left: 1px solid #F4F4F4;
  padding-left: 12px;
}
.page-owner-settings .bank-validation-section .beneficiaries-list tr td:last-child {
  border-bottom-right-radius: 12px;
  border-right: 1px solid #F4F4F4;
  padding-right: 12px;
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: right;
}

/* ============================================
   Google Calendar Button
   ============================================ */
.btn-gcal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.15s;
  text-decoration: none;
  line-height: 1.4;
}
.btn-gcal svg {
  flex-shrink: 0;
}
.btn-gcal--connect {
  background: #fff;
  color: #1a1a1a;
  border: 1.5px solid #dadce0;
}
.btn-gcal--connect:hover {
  border-color: #bdc1c6;
  background-color: #f8f9fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.btn-gcal--disconnect {
  background: #fff;
  color: #dc3545;
  border: 1.5px solid #f5c6cb;
}
.btn-gcal--disconnect:hover {
  background-color: #fff5f5;
  border-color: #dc3545;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
}

/* ---- css/new-styles/seo.css ---- */
/* ============================================================================
   HUBS CATALOGUE — categorie, marque, modele
   (/location-categorie-{slug}, /location/marque/{slug}, /location-materiel/...)

   Refonte 29/08/2026 : les trois hubs reprennent le vocabulaire de la fiche
   annonce publique refaite (assets/styles/product-page.scss, prefixe .ls-pp-) :
   bloc titre h1 24/32 + rangee de chips, cartes bordees 1px #EAECF0 a rayon
   12-16px, listes en lignes separees, carte de prix a droite, panneau navy de
   fin. Les trois pages partagent donc les memes composants au lieu des trois
   mises en page divergentes d'avant, dont deux etaient stylees en attributs
   style= dans le gabarit.

   Prefixe strict .ls-cat- : ce fichier est charge sur TOUTES les pages du site
   (head.twig), rien ne doit deborder. Seul le catalogue de la marque garde ses
   classes .brand-catalogue__* historiques, car public/js/brand-catalogue.js les
   interroge (fragments data-catalogue-swap, pagination, reset de recherche) :
   il est restyle ici, pas renomme.

   Valeurs litterales et non var(--ls-*) : le fichier est servi tel quel depuis
   public/, hors bundle Vite, ou les tokens ne sont pas injectes. Elles sont
   copiees a l'identique de assets/styles/design-system/_tokens.scss.
   ============================================================================ */

.ls-cat {
  background: #ffffff;
  padding-bottom: 80px;
}

/* --------------------------------------------------------------------------
   1. BLOC TITRE
   Calque sur .ls-pp-title-block : le h1 ouvre la page sous le fil d'ariane,
   les chips resument ce que le visiteur veut savoir avant de defiler (volume
   du catalogue, couverture, assurance), l'accroche suit.
   -------------------------------------------------------------------------- */

.ls-cat-head {
  padding: 4px 0 0;
}

.ls-cat-head h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: #080025;
  margin: 0;
}

.ls-cat-head .ls-cat-brandmark {
  display: block;
  width: auto;
  height: 40px;
  margin-bottom: 14px;
}

.ls-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.ls-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: #F5F5F5;
  color: #6F6F6F;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.ls-cat-chip svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.ls-cat-lede {
  max-width: 780px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #6F6F6F;
}

.ls-cat-lede strong {
  color: #080025;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   2. SECTIONS
   -------------------------------------------------------------------------- */

.ls-cat-section {
  margin-top: 64px;
}

.ls-cat-sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ls-cat-sechead h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #080025;
  margin: 0;
}

.ls-cat-secsub {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6F6F6F;
}

.ls-cat-seclink {
  font-size: 14px;
  font-weight: 600;
  color: #fc2249;
  white-space: nowrap;
  text-decoration: none;
}

.ls-cat-seclink:hover {
  color: #d91a3d;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. CARTES MODELE
   Meme anatomie que .ls-pp-linked-card de la fiche annonce : cadre bordé,
   vignette en tête, corps compact. La vignette a une HAUTEUR FIXE et pas un
   aspect-ratio : la carte est un element flex etire a la hauteur de sa rangee,
   et un ratio seul laissait la vignette absorber l'espace libre quand le
   libelle tenait sur moins de lignes (vignettes inegales sur une meme rangee).
   -------------------------------------------------------------------------- */

.ls-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.ls-cat-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #EAECF0;
  border-radius: 12px;
  overflow: hidden;
  color: #080025;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ls-cat-card:hover {
  border-color: #C0C4CC;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #080025;
  text-decoration: none;
}

.ls-cat-card:focus-visible {
  outline: 2px solid #fc2249;
  outline-offset: 2px;
}

.ls-cat-card__media {
  flex: 0 0 auto;
  height: 158px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #F9F9F9;
}

.ls-cat-card__media img {
  width: 100%;
  height: 100%;
  /* Les visuels modele sont des detoures sur fond clair : contain, jamais
     cover, sinon un boitier se retrouve rogne sur les bords. */
  object-fit: contain;
}

.ls-cat-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 12px 14px 14px;
}

.ls-cat-card__type {
  font-size: 12px;
  color: #6F6F6F;
  line-height: 1.35;
  margin-bottom: 2px;
}

.ls-cat-card__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #080025;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.ls-cat-card__price {
  margin-top: auto;
  font-size: 12px;
  color: #6F6F6F;
}

.ls-cat-card__price b {
  font-size: 14px;
  font-weight: 700;
  color: #080025;
}

.ls-cat-card__stock {
  margin-top: 3px;
  font-size: 12px;
  color: #909399;
}

@media (prefers-reduced-motion: reduce) {
  .ls-cat-card {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   4. LISTES DE LIENS (marques, villes, autres modeles)
   Maillage interne crawlable. Des pastilles bordees plutot que les
   .badge.badge-light de Bootstrap, qui ne portaient aucune identite.
   -------------------------------------------------------------------------- */

.ls-cat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ls-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid #EAECF0;
  border-radius: 9999px;
  background: #ffffff;
  color: #4a4a4a;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}

.ls-cat-tag:hover {
  border-color: #C0C4CC;
  color: #080025;
  text-decoration: none;
}

.ls-cat-tag svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: #909399;
}

/* --------------------------------------------------------------------------
   5. TEXTE EDITORIAL
   -------------------------------------------------------------------------- */

.ls-cat-editorial {
  max-width: 780px;
}

.ls-cat-editorial p {
  font-size: 15px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0 0 16px;
}

.ls-cat-editorial p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. BANDE LOUEUR
   Bande legere posee entre deux sections de catalogue, PAS un second appel a
   l'action colle au panneau de fin : la page se terminait sur deux demandes
   empilees adressees a deux publics opposes (un locataire qu'on renvoie au
   catalogue, un loueur qu'on invite a publier).
   -------------------------------------------------------------------------- */

.ls-cat-owner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  background: #F9F9F9;
}

.ls-cat-owner__icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #FFEDF0;
  color: #fc2249;
}

.ls-cat-owner__icon svg {
  width: 22px;
  height: 22px;
}

.ls-cat-owner__text {
  flex: 1 1 auto;
  min-width: 0;
}

.ls-cat-owner__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #080025;
  line-height: 1.35;
}

.ls-cat-owner__sub {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: #6F6F6F;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. BOUTONS
   -------------------------------------------------------------------------- */

.ls-cat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 44px : plancher de cible tactile (WCAG 2.5.8). */
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ls-cat-btn:hover,
.ls-cat-btn:focus {
  text-decoration: none;
}

.ls-cat-btn--primary {
  background: #fc2249;
  color: #ffffff;
}

.ls-cat-btn--primary:hover,
.ls-cat-btn--primary:focus {
  background: #d91a3d;
  color: #ffffff;
}

.ls-cat-btn--secondary {
  background: #ffffff;
  border-color: #DCDFE6;
  color: #080025;
}

.ls-cat-btn--secondary:hover,
.ls-cat-btn--secondary:focus {
  border-color: #C0C4CC;
  color: #080025;
}

.ls-cat-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.ls-cat-btn--ghost:hover,
.ls-cat-btn--ghost:focus {
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}

.ls-cat-btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. PANNEAU DE FIN
   Photo du catalogue sous un voile navy. Le degrade est presque opaque a
   gauche (le texte doit rester net quelle que soit la photo) et s'eclaircit
   vers la droite pour laisser voir le materiel derriere la preuve sociale.
   Le voile est pose sur background-color : si l'image ne charge pas, le bloc
   reste exactement le navy plein.
   -------------------------------------------------------------------------- */

.ls-cat-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 48px 56px;
  border-radius: 20px;
  color: #ffffff;
  background-color: #080025;
  background-image:
    linear-gradient(90deg, rgba(8, 0, 37, 0.97) 0%, rgba(8, 0, 37, 0.90) 48%, rgba(8, 0, 37, 0.72) 100%),
    url("/img/new/slider/banner-catalogue.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.ls-cat-banner__body {
  min-width: 0;
}

.ls-cat-banner__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
}

.ls-cat-banner__text {
  max-width: 560px;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.ls-cat-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.ls-cat-banner__proof {
  flex: none;
}

/* Le bloc d'avis mutualise (reviews-avatars-block.twig) pose ses couleurs en
   attribut style= : on ne peut le repasser en blanc qu'ici, et en !important. */
.ls-cat-banner__proof strong {
  color: #ffffff !important;
}

.ls-cat-banner__proof div {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* --------------------------------------------------------------------------
   9. HUB MODELE — en-tete produit
   Deux colonnes comme la fiche annonce : le contenu a gauche, la carte de
   prix a droite. La colonne de droite ne s'affiche qu'a partir de 992px ;
   en dessous elle repasse sous le visuel (cf. media queries en fin de bloc).
   -------------------------------------------------------------------------- */

.ls-cat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 36px;
  align-items: start;
  margin-top: 26px;
}

.ls-cat-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 24px;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  background: #F9F9F9;
}

.ls-cat-visual img {
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
}

.ls-cat-visual__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #C0C4CC;
  font-size: 14px;
}

.ls-cat-visual__empty svg {
  width: 40px;
  height: 40px;
}

.ls-cat-desc {
  max-width: 720px;
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #4a4a4a;
}

.ls-cat-desc a {
  color: #fc2249;
  font-weight: 600;
}

/* Caracteristiques : meme liste en lignes separees que .ls-pp-specs. */
.ls-cat-specs {
  margin-top: 24px;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}

.ls-cat-specs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 18px;
  font-size: 14px;
  border-top: 1px solid #EAECF0;
}

.ls-cat-specs__row:first-child {
  border-top: none;
}

.ls-cat-specs__label {
  color: #6F6F6F;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ls-cat-specs__value {
  flex: 0 1 auto;
  font-weight: 600;
  color: #080025;
  text-align: right;
  overflow-wrap: anywhere;
}

.ls-cat-specs__value a {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #fc2249;
}

/* Carte de prix. */
.ls-cat-buy {
  padding: 24px;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 21px rgba(0, 0, 0, 0.05);
}

.ls-cat-buy__from {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6F6F6F;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ls-cat-buy__price {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #080025;
  margin-top: 2px;
}

.ls-cat-buy__unit {
  font-size: 13px;
  color: #6F6F6F;
  margin-top: 2px;
}

.ls-cat-buy__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid #EAECF0;
  font-size: 13px;
  color: #6F6F6F;
}

.ls-cat-buy__row b {
  color: #080025;
  font-weight: 600;
}

.ls-cat-buy .ls-cat-btn {
  margin-top: 16px;
}

.ls-cat-buy__hint {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: #080025;
}

.ls-cat-buy__hint span {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #F5F5F5;
}

.ls-cat-buy__hint svg {
  width: 14px;
  height: 14px;
}

.ls-cat-benefits {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #EAECF0;
  border-radius: 12px;
  background: #F9F9F9;
}

.ls-cat-benefits li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #4a4a4a;
  list-style: none;
}

.ls-cat-benefits svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: #080025;
}

/* --------------------------------------------------------------------------
   10. ETAPES
   -------------------------------------------------------------------------- */

.ls-cat-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.ls-cat-step {
  padding: 26px;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  background: #ffffff;
}

.ls-cat-step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #FFEDF0;
  color: #fc2249;
  font-size: 15px;
  font-weight: 700;
}

.ls-cat-step h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #080025;
  margin: 16px 0 6px;
}

.ls-cat-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6F6F6F;
}

.ls-cat-step a {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fc2249;
}

/* --------------------------------------------------------------------------
   11. FAQ
   <details> natif : le contenu reste dans le DOM (donc lisible par le crawler
   et coherent avec le JSON-LD FAQPage) et le depliage ne demande aucun JS.
   -------------------------------------------------------------------------- */

.ls-cat-faq {
  border: 1px solid #EAECF0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}

.ls-cat-faq__item {
  border-top: 1px solid #EAECF0;
}

.ls-cat-faq__item:first-child {
  border-top: none;
}

.ls-cat-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  font-size: 15px;
  font-weight: 600;
  color: #080025;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

/* Le triangle par defaut doublonnerait le chevron. */
.ls-cat-faq__q::-webkit-details-marker {
  display: none;
}

.ls-cat-faq__q::marker {
  content: "";
}

.ls-cat-faq__q:focus-visible {
  outline: 2px solid #fc2249;
  outline-offset: -2px;
}

.ls-cat-faq__q svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #909399;
  transition: transform 150ms ease;
}

.ls-cat-faq__item[open] .ls-cat-faq__q svg {
  transform: rotate(180deg);
}

.ls-cat-faq__a {
  max-width: 860px;
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: #6F6F6F;
}

@media (prefers-reduced-motion: reduce) {
  .ls-cat-faq__q svg {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .ls-cat-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .ls-cat-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 36px 32px;
  }
  .ls-cat-banner__text {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .ls-cat {
    padding-bottom: 56px;
  }
  .ls-cat-section {
    margin-top: 48px;
  }
  .ls-cat-head h1 {
    font-size: 21px;
    line-height: 28px;
  }
  .ls-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
  .ls-cat-card__media {
    height: 124px;
  }
  .ls-cat-owner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }
  .ls-cat-owner .ls-cat-btn {
    width: 100%;
  }
  .ls-cat-banner {
    padding: 28px 22px;
    border-radius: 16px;
  }
  .ls-cat-banner__title {
    font-size: 20px;
  }
  .ls-cat-banner__actions .ls-cat-btn {
    width: 100%;
  }
  .ls-cat-visual {
    min-height: 200px;
    padding: 16px;
  }
  .ls-cat-visual img {
    max-height: 220px;
  }
  .ls-cat-specs__row {
    padding: 12px 14px;
  }
  .ls-cat-faq__q {
    padding: 16px 18px;
  }
  .ls-cat-faq__a {
    padding: 0 18px 16px;
  }
}

/* ============================================================================
   CATALOGUE DE LA MARQUE (.brand-catalogue)

   Rendu 100 % serveur : filtre, recherche et pagination sont des liens et un
   formulaire GET, donc crawlables et partageables. public/js/brand-catalogue.js
   n'apporte que l'echange de fragments (data-catalogue-swap) par-dessus.

   Les NOMS de classes sont ce contrat avec le script (pagination, etat vide,
   reset de recherche) : la refonte du 29/08/2026 les restyle sans les
   renommer, alignes sur les composants .ls-cat- ci-dessus.
   ============================================================================ */

.brand-catalogue {
  padding: 0;
}

.brand-catalogue__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

/* h2 et non h1 : le h1 de la page vit desormais dans le bloc titre, en tete de
   page. La page en portait deux avant la refonte. */
.brand-catalogue__head h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #080025;
  margin: 0;
  line-height: 1.3;
}

.brand-catalogue__count {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6F6F6F;
}

.brand-catalogue__chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 3px 11px;
  border-radius: 9999px;
  background: #FFEDF0;
  color: #fc2249;
  font-size: 12px;
  font-weight: 600;
}

/* Recherche */
.brand-catalogue__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 320px;
  padding: 3px 3px 3px 16px;
  border: 1px solid #DCDFE6;
  border-radius: 9999px;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.brand-catalogue__search:focus-within {
  border-color: #fc2249;
  box-shadow: 0 0 0 3px rgba(252, 34, 73, 0.1);
}

.brand-catalogue__search-icon {
  flex: 0 0 auto;
  color: #909399;
  font-size: 14px;
}

.brand-catalogue__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: #080025;
}

.brand-catalogue__search input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.brand-catalogue__search-reset {
  flex: 0 0 auto;
  padding: 0 4px;
  color: #909399;
  font-size: 19px;
  line-height: 1;
  text-decoration: none;
}

.brand-catalogue__search-reset:hover {
  color: #fc2249;
}

.brand-catalogue__search-submit {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 9999px;
  background: #fc2249;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}

.brand-catalogue__search-submit:hover {
  background: #d91a3d;
}

/* Corps : rail de facettes a gauche, resultats a droite */
.brand-catalogue__body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.brand-catalogue__filters {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  background: #ffffff;
}

.brand-catalogue__filters-title,
.brand-catalogue__filters-group {
  margin: 0;
  padding: 8px 12px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #909399;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.brand-catalogue__filters-group {
  margin-top: 10px;
  color: #C0C4CC;
}

.brand-catalogue__filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.brand-catalogue__filter-list li {
  list-style: none;
  margin: 0;
}

.brand-catalogue__filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #4a4a4a;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.brand-catalogue__filter:hover {
  background: #F9F9F9;
  color: #080025;
  text-decoration: none;
}

.brand-catalogue__filter.is-active {
  background: #FFEDF0;
  color: #fc2249;
  font-weight: 600;
}

.brand-catalogue__filter-label::first-letter {
  text-transform: uppercase;
}

.brand-catalogue__filter-count {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #F5F5F5;
  color: #909399;
  font-size: 12px;
  font-weight: 500;
}

.brand-catalogue__filter.is-active .brand-catalogue__filter-count {
  background: rgba(252, 34, 73, 0.12);
  color: #fc2249;
}

/* Grille : les cartes sont les .ls-cat-card communes aux trois hubs. */
.brand-catalogue__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

/* Etat de chargement du fragment. Volontairement discret : le fragment revient
   en ~90 ms, un vrai spinner clignoterait plus qu'il n'informerait. */
.brand-catalogue.is-loading .brand-catalogue__results,
.brand-catalogue.is-loading .brand-catalogue__filters {
  opacity: 0.55;
  transition: opacity 120ms ease;
  pointer-events: none;
}

/* Pagination */
.brand-catalogue__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.brand-catalogue__page {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #EAECF0;
  border-radius: 10px;
  background: #ffffff;
  color: #4a4a4a;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}

.brand-catalogue__page:hover {
  border-color: #C0C4CC;
  color: #080025;
  text-decoration: none;
}

.brand-catalogue__page.is-active {
  background: #FFEDF0;
  border-color: transparent;
  color: #fc2249;
  font-weight: 700;
  cursor: default;
}

.brand-catalogue__ellipsis {
  padding: 0 2px;
  color: #909399;
  font-size: 13px;
}

/* Aucun resultat */
.brand-catalogue__empty {
  padding: 48px 24px;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  background: #F9F9F9;
  text-align: center;
}

.brand-catalogue__empty i {
  font-size: 26px;
  color: #C0C4CC;
}

.brand-catalogue__empty-title {
  margin: 14px 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #080025;
}

.brand-catalogue__empty-text {
  margin: 0 0 18px;
  font-size: 14px;
  color: #6F6F6F;
}

@media (max-width: 991px) {
  .brand-catalogue__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  /* En dessous du point de rupture le rail passe en barre horizontale
     defilante : une colonne sticky de 27 sous-categories mangerait tout
     l'ecran. */
  .brand-catalogue__filters {
    position: static;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 6px;
    border: 0;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
  }
  .brand-catalogue__filters-title,
  .brand-catalogue__filters-group {
    display: none;
  }
  .brand-catalogue__filter-list {
    display: flex;
    gap: 8px;
  }
  .brand-catalogue__filter {
    white-space: nowrap;
    border: 1px solid #EAECF0;
    border-radius: 9999px;
    padding: 8px 14px;
  }
  .brand-catalogue__filter.is-active {
    border-color: transparent;
  }
}

@media (max-width: 767px) {
  .brand-catalogue__head {
    align-items: stretch;
  }
  .brand-catalogue__head h2 {
    font-size: 18px;
  }
  .brand-catalogue__search {
    min-width: 0;
    width: 100%;
  }
  .brand-catalogue__grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
}

/* ============================================================
   Guides éditoriaux (.page-seo-guide)
   ============================================================ */
.page-seo-guide { background: #fff; }

/* Hero */
.page-seo-guide .guide-hero {
  background: linear-gradient(135deg, #fff5f7 0%, #ffffff 62%);
  border-bottom: 1px solid #f3e7ea;
  padding: 26px 0 34px;
}
.page-seo-guide .guide-hero__inner {
  display: flex; align-items: center; gap: 40px;
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
}
.page-seo-guide .guide-hero__content { flex: 1 1 60%; min-width: 0; }
.page-seo-guide .guide-hero__media { flex: 0 0 32%; text-align: center; }
.page-seo-guide .guide-hero__media img { max-width: 100%; height: auto; }
.page-seo-guide .guide-hero h1 {
  font-size: 2.2rem; line-height: 1.15; font-weight: 800; color: #1f2d3d; margin: .35em 0 .3em;
}
.page-seo-guide .guide-hero__lede { font-size: 1.13rem; line-height: 1.6; color: #48566a; margin: 0; }
.page-seo-guide .guide-hero__lede a { color: #fc2249; }

/* Fil d'ariane */
.page-seo-guide .breadcrumb-seo {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0; margin: 0 0 4px; font-size: 14px; color: #8a94a6;
}
.page-seo-guide .breadcrumb-seo a { color: #8a94a6; text-decoration: none; }
.page-seo-guide .breadcrumb-seo a:hover { color: #fc2249; }

/* Colonne de lecture */
.page-seo-guide .guide-body { max-width: 760px; margin: 0 auto; padding: 40px 24px 8px; }
.page-seo-guide .guide-content { font-size: 1.06rem; line-height: 1.75; color: #2c3e50; }
.page-seo-guide .guide-content > p { margin: 0 0 1.1em; }
.page-seo-guide .guide-content h2 {
  font-size: 1.6rem; font-weight: 800; color: #1f2d3d;
  margin: 1.9em 0 .6em; padding-top: .7em; border-top: 1px solid #eef1f5;
}
.page-seo-guide .guide-content h3 { font-size: 1.2rem; font-weight: 700; color: #1f2d3d; margin: 1.4em 0 .35em; }
.page-seo-guide .guide-content ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.page-seo-guide .guide-content li { margin: 0 0 .5em; }
.page-seo-guide .guide-content a { color: #fc2249; text-decoration: underline; text-underline-offset: 2px; }

/* Encadré conseil */
.page-seo-guide .guide-callout {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff5f7; border-left: 4px solid #fc2249; border-radius: 8px;
  padding: 16px 18px; margin: 1.7em 0; font-size: 1.02rem; color: #3a4757;
}
.page-seo-guide .guide-callout i { color: #fc2249; font-size: 1.2rem; margin-top: 2px; }
.page-seo-guide .guide-callout p { margin: 0; }

/* Figure */
.page-seo-guide .guide-figure { margin: 1.9em 0; }
.page-seo-guide .guide-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; display: block; }
.page-seo-guide .guide-figure figcaption { font-size: .9rem; color: #8a94a6; margin-top: 8px; text-align: center; }

/* FAQ */
.page-seo-guide .guide-faq h3 {
  background: #f7f9fc; border-radius: 8px; padding: 14px 16px; margin: .7em 0 0; font-size: 1.08rem;
}
.page-seo-guide .guide-faq h3::before { content: "?"; color: #fc2249; font-weight: 800; margin-right: 8px; }
.page-seo-guide .guide-faq > p { padding: 0 16px; margin: .6em 0 1.2em; }

/* CTA cartes */
.page-seo-guide .guide-cta {
  background: #f7f9fc; border-radius: 16px; padding: 28px 24px;
  margin: 34px auto 8px; max-width: 760px;
}
.page-seo-guide .guide-cta h2 { border: 0; margin: 0 0 .25em; padding: 0; font-size: 1.4rem; color: #1f2d3d; }
.page-seo-guide .guide-cta p { margin: 0; color: #48566a; }
.page-seo-guide .guide-cta__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.page-seo-guide .guide-cta__card {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid #eef1f5; border-radius: 10px; padding: 14px 16px;
  text-decoration: none; color: #1f2d3d; font-weight: 600;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.page-seo-guide .guide-cta__card:hover { border-color: #fc2249; box-shadow: 0 4px 14px rgba(252, 34, 73, .1); color: #fc2249; }
.page-seo-guide .guide-cta__card i { color: #fc2249; font-size: 1.3rem; width: 22px; text-align: center; }

@media (max-width: 767px) {
  .page-seo-guide .guide-hero__inner { flex-direction: column; gap: 20px; text-align: center; }
  .page-seo-guide .guide-hero__media { flex-basis: auto; max-width: 220px; }
  .page-seo-guide .guide-hero h1 { font-size: 1.7rem; }
  .page-seo-guide .guide-cta__grid { grid-template-columns: 1fr; }
}

/* Cartes produit réelles (annonces du catalogue) */
.page-seo-guide .guide-listings { margin: 2em 0; }
.page-seo-guide .guide-listings__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
.page-seo-guide .guide-listings__card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid #eef1f5;
  border-radius: 12px; overflow: hidden; text-decoration: none; color: #1f2d3d;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.page-seo-guide .guide-listings__card:hover { border-color: #fc2249; box-shadow: 0 6px 18px rgba(252, 34, 73, .12); transform: translateY(-2px); }
.page-seo-guide .guide-listings__img { aspect-ratio: 4 / 3; background: #f7f9fc; }
.page-seo-guide .guide-listings__img img { width: 100%; height: 100%; object-fit: cover; }
.page-seo-guide .guide-listings__body { padding: 10px 12px 12px; display: flex; flex-direction: column; }
.page-seo-guide .guide-listings__brand { font-size: .78rem; color: #8a94a6; text-transform: uppercase; letter-spacing: .02em; }
.page-seo-guide .guide-listings__name { font-weight: 700; font-size: .98rem; line-height: 1.2; margin: 2px 0; }
.page-seo-guide .guide-listings__price { margin-top: 4px; color: #fc2249; font-weight: 700; font-size: .95rem; }
.page-seo-guide .guide-listings__price span { color: #8a94a6; font-weight: 400; }

/* À lire aussi (cross-links guides) */
.page-seo-guide .guide-related { max-width: 760px; margin: 30px auto 8px; }
.page-seo-guide .guide-related h2 { font-size: 1.3rem; font-weight: 800; color: #1f2d3d; margin: 0 0 .4em; }
.page-seo-guide .guide-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.page-seo-guide .guide-related__card {
  display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #eef1f5;
  border-radius: 10px; padding: 12px 14px; text-decoration: none; color: #1f2d3d;
  font-weight: 600; font-size: .94rem; line-height: 1.3; transition: border-color .15s, color .15s;
}
.page-seo-guide .guide-related__card:hover { border-color: #fc2249; color: #fc2249; }
.page-seo-guide .guide-related__card i { color: #fc2249; font-size: 1.1rem; flex: 0 0 auto; }

@media (max-width: 767px) {
  .page-seo-guide .guide-listings__grid { grid-template-columns: repeat(2, 1fr); }
  .page-seo-guide .guide-related__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Page ville (.page-seo-city)
   Trois ajouts seulement : la page reprend sinon tout le systeme .ls-cat-* des
   autres hubs (sections, cartes, puces, tags, FAQ, banniere), et le catalogue
   filtrable de .brand-catalogue tel quel.
   -------------------------------------------------------------------------- */

/* Hero photo. Les pages ville sont le seul gabarit dont le LCP est une IMAGE :
   la hauteur est posee ici en dur pour que le cadre soit reserve avant meme
   que la photo arrive, sans quoi le titre saute au chargement. */
.ls-cat-cityhero {
  position: relative;
  margin-top: 20px;
  border-radius: 16px;
  overflow: hidden;
  background: #F9F9F9;
}
.ls-cat-cityhero img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
}
/* Le voile est un pseudo-element et non une div : un noeud de moins dans le
   corps, et il ne peut pas se retrouver au-dessus du texte. */
.ls-cat-cityhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 0, 37, 0) 38%, rgba(8, 0, 37, 0.42) 62%, rgba(8, 0, 37, 0.86) 100%);
  pointer-events: none;
}
.ls-cat-cityhero__body {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 36px;
}
.ls-cat-cityhero__eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}
.ls-cat-cityhero__body h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #ffffff;
}
/* Le sous-titre etait un <h3> : la page enchainait un h1 sur un h3 sans h2. */
.ls-cat-cityhero__body p {
  max-width: 760px;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
@media (max-width: 767px) {
  .ls-cat-cityhero img { height: 260px; }
  .ls-cat-cityhero__body { padding: 20px 20px 22px; }
  .ls-cat-cityhero__body h1 { font-size: 24px; }
  .ls-cat-cityhero__body p { font-size: 14px; }
}

/* Compteur pose dans un tag de maillage (categorie, marque, metier). */
.ls-cat-tag__n {
  color: #A3A3A3;
  font-weight: 700;
  font-size: 12px;
}
.ls-cat-tag:hover .ls-cat-tag__n { color: #6F6F6F; }
.ls-cat-tags--hero { margin-top: 18px; }
.ls-cat-tags--guides { margin-top: 24px; }

/* Sous-titres du guide et bloc de sources. */
.ls-cat-editorial h3 {
  margin: 28px 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: #080025;
}
.ls-cat-editorial h3:first-child { margin-top: 0; }
.ls-cat-editorial__afterspecs { margin-top: 16px; }
.ls-cat-sources {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #EAECF0;
  font-size: 13px;
  line-height: 1.6;
  color: #6F6F6F;
}
.ls-cat-sources strong { color: #080025; margin-right: 4px; }
.ls-cat-sources a { color: #080025; text-decoration: underline; text-underline-offset: 2px; }
.ls-cat-sources a:hover { color: #fc2249; }
.ls-cat-sources__date { display: block; margin-top: 6px; color: #A3A3A3; }

/* Fourchettes de tarifs de la ville. Un vrai <table> : c'est un tableau de
   donnees, et c'est sous cette forme que les moteurs le reprennent. */
.ls-cat-prices {
  border: 1px solid #EAECF0;
  border-radius: 16px;
  overflow-x: auto;
  background: #ffffff;
}
.ls-cat-prices table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
}
.ls-cat-prices thead th {
  padding: 11px 18px;
  background: #F9FAFB;
  color: #8a94a6;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  white-space: nowrap;
}
.ls-cat-prices tbody th,
.ls-cat-prices tbody td {
  padding: 12px 18px;
  border-top: 1px solid #EAECF0;
  text-align: left;
  white-space: nowrap;
}
.ls-cat-prices tbody th {
  font-weight: 500;
  color: #080025;
  white-space: normal;
}
.ls-cat-prices tbody td { color: #4a4a4a; }
.ls-cat-prices tbody td.is-strong { font-weight: 700; color: #080025; }
.ls-cat-prices__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #A3A3A3;
}

/* ---- css/new-styles/avatar.css ---- */
.avatar {
  object-fit: cover;
  background-color: #E0E0E0;
  font-size: 14px;

  display: inline-block;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  vertical-align: middle;
  position: relative;
}
.avatar-sm-auto {
  border-radius: 13px;
  width: 100%;
}
.renter .avatar-sm-auto {
  height: 50px;
}
.avatar-sm-159 {
  border-radius: 50%;
  width: 159px;
  height: 159px;
}
.avatar-sm-65 {
  border-radius: 13px;
  width: 65px;
  height: 65px;
}
.avatar-sm-55 {
  border-radius: 50%;
  width: 55px;
  height: 55px;
}
.avatar-sm-48 {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
.avatar-sm-32 {
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.navbar-nav .avatar-sm-32 {
  position: absolute;
  top: 4px;
  right: 4px;
}
.avatar-avis {
    float: left;
    margin-right: 5px;
}
.avatar-color-1 {
  background-image: linear-gradient(to right, #3A8BBB , #2EA2E5);
}
.avatar-color-2 {
  background-image: linear-gradient(to right, #FFEDF0 , #F8B9C3);
}
.avatar-color-3 {
  background-image: linear-gradient(to right, #EFF6FA , #91C7E5);
}
.avatar-color-4 {
  background-image: linear-gradient(to right, #FEFBE8 , #E9FFEC);
}
.initials {
  color: white;
  text-align: center;
}
.renter .avatar-sm-auto .initials {
  font-size: 26px;
  font-weight: 800;
  line-height: 50px;
}
.avatar-sm-159 .initials {
  font-size: 48px;
  font-weight: 800;
  line-height: 159px;
}
.avatar-sm-65 .initials {
  font-size: 26px;
  font-weight: 800;
  line-height: 65px;
}
.avatar-sm-55 .initials {
  font-size: 20px;
  font-weight: 700;
  line-height: 55px;
}
.avatar-sm-48 .initials {
  font-size: 18px;
  font-weight: 700;
  line-height: 48px;
}
.avatar-sm-32 .initials {
  font-size: 14px;
  font-weight: 700;
  line-height: 32px;
}

/* ---- Fonts/icons-espace-loueur/icomoon/style.css ---- */
@font-face {
  font-family: 'icomoon';
  src:  url('/Fonts/icons-espace-loueur/icomoon/fonts/icomoon.eot?aydh5j');
  src:  url('/Fonts/icons-espace-loueur/icomoon/fonts/icomoon.eot?aydh5j#iefix') format('embedded-opentype'),
    url('/Fonts/icons-espace-loueur/icomoon/fonts/icomoon.ttf?aydh5j') format('truetype'),
    url('/Fonts/icons-espace-loueur/icomoon/fonts/icomoon.woff?aydh5j') format('woff'),
    url('/Fonts/icons-espace-loueur/icomoon/fonts/icomoon.svg?aydh5j#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-activity:before {
  content: "\e900";
}
.icon-airplay:before {
  content: "\e901";
}
.icon-alert-circle:before {
  content: "\e902";
}
.icon-alert-octagon:before {
  content: "\e903";
}
.icon-alert-triangle:before {
  content: "\e904";
}
.icon-align-center:before {
  content: "\e905";
}
.icon-align-justify:before {
  content: "\e906";
}
.icon-align-left:before {
  content: "\e907";
}
.icon-align-right:before {
  content: "\e908";
}
.icon-anchor:before {
  content: "\e909";
}
.icon-aperture:before {
  content: "\e90a";
}
.icon-archive:before {
  content: "\e90b";
}
.icon-arrow-down:before {
  content: "\e90c";
}
.icon-arrow-down-circle:before {
  content: "\e90d";
}
.icon-arrow-down-left:before {
  content: "\e90e";
}
.icon-arrow-down-right:before {
  content: "\e90f";
}
.icon-arrow-left:before {
  content: "\e910";
}
.icon-arrow-left-circle:before {
  content: "\e911";
}
.icon-arrow-right:before {
  content: "\e912";
}
.icon-arrow-right-circle:before {
  content: "\e913";
}
.icon-arrow-up:before {
  content: "\e914";
}
.icon-arrow-up-circle:before {
  content: "\e915";
}
.icon-arrow-up-left:before {
  content: "\e916";
}
.icon-arrow-up-right:before {
  content: "\e917";
}
.icon-at-sign:before {
  content: "\e918";
}
.icon-award:before {
  content: "\e919";
}
.icon-bar-chart:before {
  content: "\e91a";
}
.icon-bar-chart-2:before {
  content: "\e91b";
}
.icon-battery:before {
  content: "\e91c";
}
.icon-battery-charging:before {
  content: "\e91d";
}
.icon-bell:before {
  content: "\e91e";
}
.icon-bell-off:before {
  content: "\e91f";
}
.icon-bluetooth:before {
  content: "\e920";
}
.icon-bold:before {
  content: "\e921";
}
.icon-book:before {
  content: "\e922";
}
.icon-book-open:before {
  content: "\e923";
}
.icon-bookmark:before {
  content: "\e924";
}
.icon-box:before {
  content: "\e925";
}
.icon-briefcase:before {
  content: "\e926";
}
.icon-calendar:before {
  content: "\e927";
}
.icon-camera:before {
  content: "\e928";
}
.icon-camera-off:before {
  content: "\e929";
}
.icon-cast:before {
  content: "\e92a";
}
.icon-check:before {
  content: "\e92b";
}
.icon-check-circle:before {
  content: "\e92c";
}
.icon-check-square:before {
  content: "\e92d";
}
.icon-chevron-down:before {
  content: "\e92e";
}
.icon-chevron-left:before {
  content: "\e92f";
}
.icon-chevron-right:before {
  content: "\e930";
}
.icon-chevron-up:before {
  content: "\e931";
}
.icon-chevrons-down:before {
  content: "\e932";
}
.icon-chevrons-left:before {
  content: "\e933";
}
.icon-chevrons-right:before {
  content: "\e934";
}
.icon-chevrons-up:before {
  content: "\e935";
}
.icon-chrome:before {
  content: "\e936";
}
.icon-circle:before {
  content: "\e937";
}
.icon-clipboard:before {
  content: "\e938";
}
.icon-clock:before {
  content: "\e939";
}
.icon-cloud:before {
  content: "\e93a";
}
.icon-cloud-drizzle:before {
  content: "\e93b";
}
.icon-cloud-lightning:before {
  content: "\e93c";
}
.icon-cloud-off:before {
  content: "\e93d";
}
.icon-cloud-rain:before {
  content: "\e93e";
}
.icon-cloud-snow:before {
  content: "\e93f";
}
.icon-code:before {
  content: "\e940";
}
.icon-codepen:before {
  content: "\e941";
}
.icon-codesandbox:before {
  content: "\e942";
}
.icon-coffee:before {
  content: "\e943";
}
.icon-columns:before {
  content: "\e944";
}
.icon-command:before {
  content: "\e945";
}
.icon-compass:before {
  content: "\e946";
}
.icon-copy:before {
  content: "\e947";
}
.icon-corner-down-left:before {
  content: "\e948";
}
.icon-corner-down-right:before {
  content: "\e949";
}
.icon-corner-left-down:before {
  content: "\e94a";
}
.icon-corner-left-up:before {
  content: "\e94b";
}
.icon-corner-right-down:before {
  content: "\e94c";
}
.icon-corner-right-up:before {
  content: "\e94d";
}
.icon-corner-up-left:before {
  content: "\e94e";
}
.icon-corner-up-right:before {
  content: "\e94f";
}
.icon-cpu:before {
  content: "\e950";
}
.icon-credit-card:before {
  content: "\e951";
}
.icon-crop:before {
  content: "\e952";
}
.icon-crosshair:before {
  content: "\e953";
}
.icon-database:before {
  content: "\e954";
}
.icon-delete:before {
  content: "\e955";
}
.icon-disc:before {
  content: "\e956";
}
.icon-dollar-sign:before {
  content: "\e957";
}
.icon-download:before {
  content: "\e958";
}
.icon-download-cloud:before {
  content: "\e959";
}
.icon-droplet:before {
  content: "\e95a";
}
.icon-edit:before {
  content: "\e95b";
}
.icon-edit-2:before {
  content: "\e95c";
}
.icon-edit-3:before {
  content: "\e95d";
}
.icon-external-link:before {
  content: "\e95e";
}
.icon-eye:before {
  content: "\e95f";
}
.icon-eye-off:before {
  content: "\e960";
}
.icon-facebook:before {
  content: "\e961";
}
.icon-fast-forward:before {
  content: "\e962";
}
.icon-feather:before {
  content: "\e963";
}
.icon-figma:before {
  content: "\e964";
}
.icon-file:before {
  content: "\e965";
}
.icon-file-minus:before {
  content: "\e966";
}
.icon-file-plus:before {
  content: "\e967";
}
.icon-file-text:before {
  content: "\e968";
}
.icon-film:before {
  content: "\e969";
}
.icon-filter:before {
  content: "\e96a";
}
.icon-flag:before {
  content: "\e96b";
}
.icon-folder:before {
  content: "\e96c";
}
.icon-folder-minus:before {
  content: "\e96d";
}
.icon-folder-plus:before {
  content: "\e96e";
}
.icon-framer:before {
  content: "\e96f";
}
.icon-frown:before {
  content: "\e970";
}
.icon-gift:before {
  content: "\e971";
}
.icon-git-branch:before {
  content: "\e972";
}
.icon-git-commit:before {
  content: "\e973";
}
.icon-git-merge:before {
  content: "\e974";
}
.icon-git-pull-request:before {
  content: "\e975";
}
.icon-github:before {
  content: "\e976";
}
.icon-gitlab:before {
  content: "\e977";
}
.icon-globe:before {
  content: "\e978";
}
.icon-grid:before {
  content: "\e979";
}
.icon-hard-drive:before {
  content: "\e97a";
}
.icon-hash:before {
  content: "\e97b";
}
.icon-headphones:before {
  content: "\e97c";
}
.icon-heart:before {
  content: "\e97d";
}
.icon-help-circle:before {
  content: "\e97e";
}
.icon-hexagon:before {
  content: "\e97f";
}
.icon-home:before {
  content: "\e980";
}
.icon-image:before {
  content: "\e981";
}
.icon-inbox:before {
  content: "\e982";
}
.icon-info:before {
  content: "\e983";
}
.icon-instagram:before {
  content: "\e984";
}
.icon-italic:before {
  content: "\e985";
}
.icon-key:before {
  content: "\e986";
}
.icon-layers:before {
  content: "\e987";
}
.icon-layout:before {
  content: "\e988";
}
.icon-life-buoy:before {
  content: "\e989";
}
.icon-link:before {
  content: "\e98a";
}
.icon-link-2:before {
  content: "\e98b";
}
.icon-linkedin:before {
  content: "\e98c";
}
.icon-list:before {
  content: "\e98d";
}
.icon-loader:before {
  content: "\e98e";
}
.icon-lock:before {
  content: "\e98f";
}
.icon-log-in:before {
  content: "\e990";
}
.icon-log-out:before {
  content: "\e991";
}
.icon-mail:before {
  content: "\e992";
}
.icon-map:before {
  content: "\e993";
}
.icon-map-pin:before {
  content: "\e994";
}
.icon-maximize:before {
  content: "\e995";
}
.icon-maximize-2:before {
  content: "\e996";
}
.icon-meh:before {
  content: "\e997";
}
.icon-menu:before {
  content: "\e998";
}
.icon-message-circle:before {
  content: "\e999";
}
.icon-message-square:before {
  content: "\e99a";
}
.icon-mic:before {
  content: "\e99b";
}
.icon-mic-off:before {
  content: "\e99c";
}
.icon-minimize:before {
  content: "\e99d";
}
.icon-minimize-2:before {
  content: "\e99e";
}
.icon-minus:before {
  content: "\e99f";
}
.icon-minus-circle:before {
  content: "\e9a0";
}
.icon-minus-square:before {
  content: "\e9a1";
}
.icon-monitor:before {
  content: "\e9a2";
}
.icon-moon:before {
  content: "\e9a3";
}
.icon-more-horizontal:before {
  content: "\e9a4";
}
.icon-more-vertical:before {
  content: "\e9a5";
}
.icon-mouse-pointer:before {
  content: "\e9a6";
}
.icon-move:before {
  content: "\e9a7";
}
.icon-music:before {
  content: "\e9a8";
}
.icon-navigation:before {
  content: "\e9a9";
}
.icon-navigation-2:before {
  content: "\e9aa";
}
.icon-octagon:before {
  content: "\e9ab";
}
.icon-package:before {
  content: "\e9ac";
}
.icon-paperclip:before {
  content: "\e9ad";
}
.icon-pause:before {
  content: "\e9ae";
}
.icon-pause-circle:before {
  content: "\e9af";
}
.icon-pen-tool:before {
  content: "\e9b0";
}
.icon-percent:before {
  content: "\e9b1";
}
.icon-phone:before {
  content: "\e9b2";
}
.icon-phone-call:before {
  content: "\e9b3";
}
.icon-phone-forwarded:before {
  content: "\e9b4";
}
.icon-phone-incoming:before {
  content: "\e9b5";
}
.icon-phone-missed:before {
  content: "\e9b6";
}
.icon-phone-off:before {
  content: "\e9b7";
}
.icon-phone-outgoing:before {
  content: "\e9b8";
}
.icon-pie-chart:before {
  content: "\e9b9";
}
.icon-play:before {
  content: "\e9ba";
}
.icon-play-circle:before {
  content: "\e9bb";
}
.icon-plus:before {
  content: "\e9bc";
}
.icon-plus-circle:before {
  content: "\e9bd";
}
.icon-plus-square:before {
  content: "\e9be";
}
.icon-pocket:before {
  content: "\e9bf";
}
.icon-power:before {
  content: "\e9c0";
}
.icon-printer:before {
  content: "\e9c1";
}
.icon-radio:before {
  content: "\e9c2";
}
.icon-refresh-ccw:before {
  content: "\e9c3";
}
.icon-refresh-cw:before {
  content: "\e9c4";
}
.icon-repeat:before {
  content: "\e9c5";
}
.icon-rewind:before {
  content: "\e9c6";
}
.icon-rotate-ccw:before {
  content: "\e9c7";
}
.icon-rotate-cw:before {
  content: "\e9c8";
}
.icon-rss:before {
  content: "\e9c9";
}
.icon-save:before {
  content: "\e9ca";
}
.icon-scissors:before {
  content: "\e9cb";
}
.icon-search:before {
  content: "\e9cc";
}
.icon-send:before {
  content: "\e9cd";
}
.icon-server:before {
  content: "\e9ce";
}
.icon-settings:before {
  content: "\e9cf";
}
.icon-share:before {
  content: "\e9d0";
}
.icon-share-2:before {
  content: "\e9d1";
}
.icon-shield:before {
  content: "\e9d2";
}
.icon-shield-off:before {
  content: "\e9d3";
}
.icon-shopping-bag:before {
  content: "\e9d4";
}
.icon-shopping-cart:before {
  content: "\e9d5";
}
.icon-shuffle:before {
  content: "\e9d6";
}
.icon-sidebar:before {
  content: "\e9d7";
}
.icon-skip-back:before {
  content: "\e9d8";
}
.icon-skip-forward:before {
  content: "\e9d9";
}
.icon-slack:before {
  content: "\e9da";
}
.icon-slash:before {
  content: "\e9db";
}
.icon-sliders:before {
  content: "\e9dc";
}
.icon-smartphone:before {
  content: "\e9dd";
}
.icon-smile:before {
  content: "\e9de";
}
.icon-speaker:before {
  content: "\e9df";
}
.icon-square:before {
  content: "\e9e0";
}
.icon-star:before {
  content: "\e9e1";
}
.icon-stop-circle:before {
  content: "\e9e2";
}
.icon-sun:before {
  content: "\e9e3";
}
.icon-sunrise:before {
  content: "\e9e4";
}
.icon-sunset:before {
  content: "\e9e5";
}
.icon-tablet:before {
  content: "\e9e6";
}
.icon-tag:before {
  content: "\e9e7";
}
.icon-target:before {
  content: "\e9e8";
}
.icon-terminal:before {
  content: "\e9e9";
}
.icon-thermometer:before {
  content: "\e9ea";
}
.icon-thumbs-down:before {
  content: "\e9eb";
}
.icon-thumbs-up:before {
  content: "\e9ec";
}
.icon-toggle-left:before {
  content: "\e9ed";
}
.icon-toggle-right:before {
  content: "\e9ee";
}
.icon-tool:before {
  content: "\e9ef";
}
.icon-trash:before {
  content: "\e9f0";
}
.icon-trash-2:before {
  content: "\e9f1";
}
.icon-trello:before {
  content: "\e9f2";
}
.icon-trending-down:before {
  content: "\e9f3";
}
.icon-trending-up:before {
  content: "\e9f4";
}
.icon-triangle:before {
  content: "\e9f5";
}
.icon-truck:before {
  content: "\e9f6";
}
.icon-tv:before {
  content: "\e9f7";
}
.icon-twitch:before {
  content: "\e9f8";
}
.icon-twitter:before {
  content: "\e9f9";
}
.icon-type:before {
  content: "\e9fa";
}
.icon-umbrella:before {
  content: "\e9fb";
}
.icon-underline:before {
  content: "\e9fc";
}
.icon-unlock:before {
  content: "\e9fd";
}
.icon-upload:before {
  content: "\e9fe";
}
.icon-upload-cloud:before {
  content: "\e9ff";
}
.icon-user:before {
  content: "\ea00";
}
.icon-user-check:before {
  content: "\ea01";
}
.icon-user-minus:before {
  content: "\ea02";
}
.icon-user-plus:before {
  content: "\ea03";
}
.icon-user-x:before {
  content: "\ea04";
}
.icon-users:before {
  content: "\ea05";
}
.icon-video:before {
  content: "\ea06";
}
.icon-video-off:before {
  content: "\ea07";
}
.icon-voicemail:before {
  content: "\ea08";
}
.icon-volume:before {
  content: "\ea09";
}
.icon-volume-1:before {
  content: "\ea0a";
}
.icon-volume-2:before {
  content: "\ea0b";
}
.icon-volume-x:before {
  content: "\ea0c";
}
.icon-watch:before {
  content: "\ea0d";
}
.icon-wifi:before {
  content: "\ea0e";
}
.icon-wifi-off:before {
  content: "\ea0f";
}
.icon-wind:before {
  content: "\ea10";
}
.icon-x:before {
  content: "\ea11";
}
.icon-x-circle:before {
  content: "\ea12";
}
.icon-x-octagon:before {
  content: "\ea13";
}
.icon-x-square:before {
  content: "\ea14";
}
.icon-youtube:before {
  content: "\ea15";
}
.icon-zap:before {
  content: "\ea16";
}
.icon-zap-off:before {
  content: "\ea17";
}
.icon-zoom-in:before {
  content: "\ea18";
}
.icon-zoom-out:before {
  content: "\ea19";
}

/* ---- css/new-styles/resources-megamenu.css ---- */
/* ============================================
   Resources Mega Menu — Styles consolidés
   (ex resources-megamenu.css + resources-megamenu-fix.css)
   ============================================ */

/* --------------------------------------------
   1. Reset des styles conflictuels de new-ui.css L357-369
   header .dropdown-menu a { font-size:16px; color:#080025; margin:1px 0; padding:8px 15px; border-radius:8px }
   header .dropdown-menu a:hover { background:#FFEDF0; color:#fc2249 }
   Spécificité (0,2,1) bat (0,1,2)
   -------------------------------------------- */
header .dropdown-menu.resources-megamenu a {
  font-size: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
header .dropdown-menu.resources-megamenu a:hover {
  background: transparent;
  color: inherit;
}

/* Protection contre les styles génériques du header */
header .navbar .dropdown-menu.resources-megamenu {
  padding: 0;
  border: 0;
  margin-top: 8px;
}

/* --------------------------------------------
   2. Conteneurs mega-menu — traitement partagé
   Les 4 panneaux portent tous .resources-megamenu : une seule
   regle visuelle + des tokens locaux calques sur le design system
   (couleurs, espacements 8px, rayon 12px des grandes surfaces).
   Seule la largeur minimale change d'une variante a l'autre.
   -------------------------------------------- */
header .dropdown-menu.resources-megamenu {
  /* Tokens locaux — valeurs reprises du design system Lightyshare */
  --mm-pad-y: 20px;
  --mm-pad-x: 24px;
  --mm-col-gap: 32px;
  --mm-row-gap: 10px;
  --mm-radius: 12px;
  --mm-navy: #080025;
  --mm-grey: #9b9b9b;
  --mm-red: #fc2249;
  --mm-hover: #ffedf0;
  --mm-surface-50: #fff4f6;

  position: absolute;
  top: 100%;
  min-width: 650px;
  max-width: 95vw;
  width: auto;
  background: #fff;
  box-shadow:
    0 1px 0 0 rgba(8, 0, 37, 0.04),
    0 0 0 1px rgba(8, 0, 37, 0.05),
    0 18px 40px -8px rgba(8, 0, 37, 0.22),
    0 8px 16px -6px rgba(8, 0, 37, 0.14);
  border-radius: var(--mm-radius);
  padding: 0;
  margin-top: 8px;
  border: 0;
}

/* Largeurs minimales par variante */
header .dropdown-menu.location-megamenu { min-width: 620px; }
header .dropdown-menu.rentabilisez-megamenu { min-width: 680px; }
header .dropdown-menu.community-megamenu { min-width: 820px; }

/* --------------------------------------------
   3. Contenu grid
   -------------------------------------------- */
.resources-megamenu-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mm-col-gap);
  padding: var(--mm-pad-y) var(--mm-pad-x);
}

.resources-column {
  min-width: 250px;
}

/* --------------------------------------------
   4. Titres de colonnes (eyebrow — token label 12px/700 du DS)
   -------------------------------------------- */
.resources-column-title {
  color: var(--mm-red);
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.2;
}

/* --------------------------------------------
   5. Liens simples .resources-link
   -------------------------------------------- */
header .dropdown-menu .resources-link {
  display: block;
  width: 100%;
  padding: 4px 0;
  color: #9b9b9b;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
  line-height: 1.6;
  clear: both;
}

header .dropdown-menu .resources-link:hover {
  color: #080025;
  text-decoration: none;
  background: transparent;
}

/* --------------------------------------------
   6. Items avec descriptions
   Spécificité base (0,2,1) ; media query (0,3,1) bat le reset (0,2,1)
   -------------------------------------------- */
header .dropdown-menu .resources-item-with-desc {
  margin-bottom: var(--mm-row-gap);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 6px 8px;
  margin-left: -8px;
  margin-right: -8px;
  border-radius: 8px;
  text-decoration: none;
  display: block;
}

header .dropdown-menu .resources-item-with-desc:hover {
  background: var(--mm-surface-50);
  text-decoration: none;
}

header .dropdown-menu .resources-item-with-desc:hover .resources-item-title {
  color: var(--mm-red);
}

/* La description reste neutre au survol : seul le titre et la pastille
   d'icone reagissent, le bloc tout-rouge faisait cheap */
header .dropdown-menu .resources-item-with-desc:hover .resources-item-icon {
  background: var(--mm-red);
  color: #fff;
}

/* --------------------------------------------
   7. Titres, descriptions, icônes d'items
   -------------------------------------------- */
.resources-item-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--mm-navy);
  font-size: 15px;
  font-weight: 600;
  transition: color 0.2s ease;
  line-height: 1.35;
  margin-bottom: 3px;
  text-decoration: none;
}

.resources-item-title:hover {
  text-decoration: none;
}

/* Icone en pastille arrondie teintee : donne un poids optique constant
   aux glyphes Font Awesome (sinon ils flottent nus a cote du texte) */
.resources-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--mm-red);
  background: var(--mm-hover);
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.resources-item-desc {
  color: #75758c;
  font-size: 13px;
  line-height: 1.45;
  margin-left: 46px;
  padding-right: 4px;
}

/* Badge "Nouveau" */
.resources-item-title .badge {
  background-color: #EDFFF0;
  color: #28933A;
  font-size: 11px;
  padding: 3px 8px;
  font-weight: 600;
  vertical-align: middle;
}

/* --------------------------------------------
   8. Box du bas .resources-bottom-box
   -------------------------------------------- */
.resources-bottom-box {
  background: #f9fafb;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px var(--mm-col-gap);
  padding: 14px var(--mm-pad-x);
  align-self: stretch;
  border-top: 1px solid rgba(8, 0, 37, 0.06);
}

/* Texte marine + icone rouge : le rouge reste un accent, pas un aplat */
header .dropdown-menu .resources-bottom-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mm-navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
  padding: 6px 8px;
  border-radius: 8px;
  margin: -2px -8px;
}

/* Ordre correct dans la grille */
.resources-bottom-link:nth-child(1) { grid-column: 1; grid-row: 1; }
.resources-bottom-link:nth-child(2) { grid-column: 2; grid-row: 1; }
.resources-bottom-link:nth-child(3) { grid-column: 1; grid-row: 2; }
.resources-bottom-link:nth-child(4) { grid-column: 2; grid-row: 2; }

.resources-bottom-link:hover {
  background: rgba(8, 0, 37, 0.04);
  color: var(--mm-red);
  text-decoration: none;
}

.resources-bottom-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--mm-red);
}

/* Règles spécifiques pour forcer l'application */
#navbarDropdown2 + .dropdown-menu .resources-bottom-link {
  color: var(--mm-navy);
}

#navbarDropdown2 + .dropdown-menu .resources-bottom-box {
  gap: 8px var(--mm-col-gap);
}

/* --------------------------------------------
   9. Override Bootstrap dropdown styles
   -------------------------------------------- */
#navbarDropdown2 + .dropdown-menu,
#navbarDropdown3 + .dropdown-menu,
#navbarDropdown4 + .dropdown-menu,
#navbarDropdown5 + .dropdown-menu {
  border: none;
  padding: 0;
}

.nav-item.dropdown .resources-megamenu {
  display: none;
}

.nav-item.dropdown.show .resources-megamenu {
  display: block;
}

/* --------------------------------------------
   10. Media query desktop — spécificités élevées
   -------------------------------------------- */
@media (min-width: 992px) {
  /* Liens .resources-link — gris 14px */
  header .dropdown-menu .resources-link {
    display: block;
    width: 100%;
    font-size: 14px;
    color: #9b9b9b;
    padding: 6px 0;
    margin: 0 0 6px 0;
    background: transparent;
    border-radius: 0;
    font-weight: normal;
    clear: both;
    float: none;
  }

  header .dropdown-menu .resources-link:hover {
    color: #080025;
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0 -12px;
  }

  /* Items avec descriptions — spécificité (0,3,1) bat le reset (0,2,1) */
  header .dropdown-menu.resources-megamenu .resources-item-with-desc {
    border-radius: 8px;
    margin-bottom: var(--mm-row-gap);
    padding: 10px 12px;
    margin-left: -12px;
    margin-right: -12px;
  }

  header .dropdown-menu.resources-megamenu .resources-item-with-desc:hover {
    background: var(--mm-hover);
    border-radius: 8px;
  }

  header .dropdown-menu.resources-megamenu .resources-item-with-desc:last-child {
    margin-bottom: 0;
  }

  header .dropdown-menu.resources-megamenu .resources-item-with-desc .resources-item-title {
    margin: 0 0 3px;
    padding: 0;
  }

  header .dropdown-menu.resources-megamenu .resources-item-with-desc .resources-item-desc {
    margin: 0;
    margin-left: 46px;
    padding: 0;
  }

  /* Liens du bas — texte marine, accent rouge sur l'icone */
  header .dropdown-menu .resources-bottom-link {
    font-size: 14px;
    color: #080025;
    padding: 8px 12px;
    margin: -8px -12px;
    background: transparent;
    font-weight: 500;
    border-radius: 6px;
  }

  header .dropdown-menu .resources-bottom-link:hover {
    background: rgba(8, 0, 37, 0.04);
    color: #fc2249;
    border-radius: 6px;
  }
}

/* --------------------------------------------
   11. Variantes par menu — Location
   (la grille 4 colonnes est posee en inline dans menu-public.twig ;
    ici on ne fait qu'aligner le padding sur le rythme commun)
   -------------------------------------------- */
header .dropdown-menu.location-megamenu .resources-megamenu-content {
  padding: var(--mm-pad-y) var(--mm-pad-x);
}

header .dropdown-menu.location-megamenu .resources-column {
  min-width: 0;
}

/* --------------------------------------------
   12. Variantes par menu — Rentabilisez
   -------------------------------------------- */
header .dropdown-menu.rentabilisez-megamenu .resources-megamenu-content {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mm-col-gap);
  padding: var(--mm-pad-y) var(--mm-pad-x);
}

header .dropdown-menu.rentabilisez-megamenu .resources-column {
  min-width: 280px;
}

/* --------------------------------------------
   13. Section vidéo Communauté
   -------------------------------------------- */
header .dropdown-menu .community-megamenu-content {
  display: grid;
  /* 2 colonnes de liens + l'encart video. minmax(0, 1fr) et pas 1fr :
     sinon le min-content des titres pousse la colonne hors du panneau. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 240px;
  gap: var(--mm-col-gap);
  padding: var(--mm-pad-y) var(--mm-pad-x);
  /* start et pas stretch : les trois colonnes partent de la meme ligne
     de base. L'encart video etait centre verticalement, donc cale sur
     rien du tout. */
  align-items: start;
}

/* Les colonnes de ce menu sont plus etroites que le min-width global
   de .resources-column, c'est la grille qui distribue la largeur. */
header .dropdown-menu.community-megamenu .resources-column {
  min-width: 0;
}

/* Encart video : surface teintee, meme eyebrow que les colonnes de
   liens. Sans fond ni titre de section il flottait a cote du menu
   sans jamais s'y rattacher. */
.community-video-section {
  background: var(--mm-surface-50);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.video-wrapper {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(8, 0, 37, 0.06),
    0 8px 18px -10px rgba(8, 0, 37, 0.35);
}

.video-thumbnail {
  width: 100%;
  height: auto;
  display: block;
}

/* Pastille claire et non plus disque noir de 60px : la video est le
   contenu le moins prioritaire du panneau, elle n'a pas a en etre
   l'objet le plus lourd. */
.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  color: var(--mm-navy);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-play-button:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}

.video-play-button i {
  margin-left: 2px;
}

/* Aligne sur .resources-item-title / .resources-item-desc : l'encart
   se lit comme une troisieme entree du menu, pas comme une pub. */
.video-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--mm-navy);
  margin-bottom: 4px;
  line-height: 1.35;
}

.video-desc {
  font-size: 13px;
  color: #75758c;
  line-height: 1.45;
  margin: 0;
}

/* Sous 992px le panneau ne tient pas sur trois colonnes : on empile.
   Sans ca le min-width de 820px deborde de l'ecran. */
@media (max-width: 991.98px) {
  header .dropdown-menu.community-megamenu {
    min-width: 0;
  }

  header .dropdown-menu .community-megamenu-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* --------------------------------------------
   14. Transitions d'ouverture/fermeture
   -------------------------------------------- */
.navbar-nav .dropdown .resources-megamenu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.22s cubic-bezier(0.21, 1.02, 0.55, 1);
  pointer-events: none;
}

.navbar-nav .dropdown.show .resources-megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.navbar-nav .dropdown:hover .resources-megamenu {
  display: block;
}

/* --------------------------------------------
   15. Hover nav-link menu principal
   -------------------------------------------- */
.navbar-nav .nav-item.dropdown .nav-link {
  position: relative;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  color: inherit;
  text-decoration: none;
}

.navbar-nav .nav-item.dropdown .nav-link:hover {
  background-color: rgba(108, 117, 125, 0.03);
  color: inherit;
  text-decoration: none;
}

.navbar-nav .nav-item.dropdown.show .nav-link {
  background-color: rgba(108, 117, 125, 0.04);
  color: inherit;
}

.navbar-nav .nav-item.dropdown.show .nav-link:hover {
  background-color: rgba(108, 117, 125, 0.06);
}

/* --------------------------------------------
   16. Modal vidéo YouTube
   -------------------------------------------- */
#communityVideoModal {
  z-index: 9999;
}

#communityVideoModal .youtube-video-wrapper {
  border: none;
  background: #000;
}

#communityVideoModal .youtube-video-wrapper iframe {
  width: 100%;
  height: 400px;
  border: none;
}

#communityVideoModal .modal-header {
  border-bottom: none;
  padding: 15px 15px 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background: transparent;
}

#communityVideoModal .modal-header .close {
  opacity: 0.8;
  font-size: 1.5rem;
  color: white;
  text-shadow: none;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#communityVideoModal .modal-header .close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
}

/* ---- css/new-styles/hotfix.css ---- */
/* Fichier hotfix.css - Corrections CSS d'urgence */
/* Ce fichier est chargé en dernier pour permettre des corrections rapides */

/* ==========================================================================
   Bootstrap 3 to 4 Migration - Grid System Fix
   Problem: Custom CSS files were written for Bootstrap 3 which used floats.
   Bootstrap 4 uses flexbox. We need to ensure the grid system works.
   ========================================================================== */

/* Force proper flexbox on .row - some custom CSS may have overridden this */
.row {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}

/* Fix: Ensure columns are not set to width:100% by other CSS */
/* Using !important to override any conflicting styles from custom CSS */
/* IMPORTANT: Order must be mobile-first (sm -> md -> lg) so larger breakpoints win */
@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
    .col-sm-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
    .col-sm-3 { flex: 0 0 25% !important; max-width: 25% !important; }
    .col-sm-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .col-sm-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
    .col-sm-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .col-sm-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
    .col-sm-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
    .col-sm-9 { flex: 0 0 75% !important; max-width: 75% !important; }
    .col-sm-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
    .col-sm-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
    .col-sm-12 { flex: 0 0 100% !important; max-width: 100% !important; }
}

@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
    .col-md-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
    .col-md-3 { flex: 0 0 25% !important; max-width: 25% !important; }
    .col-md-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .col-md-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
    .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .col-md-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
    .col-md-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
    .col-md-9 { flex: 0 0 75% !important; max-width: 75% !important; }
    .col-md-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
    .col-md-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
    .col-md-12 { flex: 0 0 100% !important; max-width: 100% !important; }
}

@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
    .col-lg-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
    .col-lg-3 { flex: 0 0 25% !important; max-width: 25% !important; }
    .col-lg-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .col-lg-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
    .col-lg-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .col-lg-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
    .col-lg-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
    .col-lg-9 { flex: 0 0 75% !important; max-width: 75% !important; }
    .col-lg-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
    .col-lg-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
    .col-lg-12 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* Specific fixes for profile page grid layout */
/* These address the Bootstrap 3 to 4 migration issues on the profile/shop pages */
.profile-header-section .row,
.profile-tab-section .row,
.parc-materiel .row,
.annonces-section .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Ensure columns with additional classes like .left, .right still respect grid */
@media (min-width: 992px) {
    .profile-header-section .col-lg-6.left,
    .profile-header-section .col-lg-6.right,
    .profile-tab-section .col-lg-6,
    .parc-materiel .col-lg-3.left,
    .parc-materiel .col-lg-9.right {
        flex: initial;
        max-width: initial;
    }
    .profile-header-section .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .profile-tab-section .col-lg-6.statistiques,
    .profile-tab-section .col-lg-6.services {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .parc-materiel .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .parc-materiel .col-lg-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    /* Product boxes - 4 per row on large screens */
    .annonces-section .col-lg-3.product-box-area,
    .product-box-area.col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    /* Product boxes - 3 per row when col-lg-4 */
    .product-box-area.col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .profile-header-section .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .parc-materiel .col-md-4.left {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    .parc-materiel .col-md-8.right {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    .product-box-area.col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .product-box-area.col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    .product-box-area.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Nested row inside parc-materiel needs flex as well */
.parc-materiel .annonces.row,
.parc-materiel .right .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Reset any width:100% that might be set on .left and .right classes */
@media (min-width: 768px) {
    .profile-header-section .left,
    .profile-header-section .right,
    .parc-materiel .left,
    .parc-materiel .right,
    .profile-tab-section .statistiques,
    .profile-tab-section .services {
        width: auto !important;
    }
}

/* ==========================================================================
   Footer Grid Fix
   The footer has a nested row structure: .row > .col-12 > .row > .col-lg-3
   We need to ensure the inner columns display correctly as 4 columns
   ========================================================================== */
footer .row,
footer.desktop-only .row,
footer .container .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Force 4 columns on large screens */
@media (min-width: 992px) {
    footer .col-lg-3,
    footer.desktop-only .col-lg-3,
    footer .container .row .col-lg-3,
    footer .row .row .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* Force 2 columns on medium screens */
@media (min-width: 768px) and (max-width: 991.98px) {
    footer .col-md-6,
    footer.desktop-only .col-md-6,
    footer .container .row .col-md-6,
    footer .row .row .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

/* Post-footer layout fix */
.post-footer .row,
section.post-footer .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

@media (min-width: 768px) {
    .post-footer .col-md-3,
    section.post-footer .col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
    .post-footer .col-md-6,
    section.post-footer .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

/* ==========================================================================
   Homepage - Notre sélection (Featured Products)
   Template: featured-product-block.twig uses col-md-3 col-sm-6
   Expected: 4 per row on desktop (md+), 2 on tablet (sm), 1 on mobile
   ========================================================================== */
.page-section .row > .col-md-3:has(.featured-product-block),
.page-section .row > div.col-md-3.col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    .page-section .row > .col-md-3:has(.featured-product-block),
    .page-section .row > div.col-md-3.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 768px) {
    .page-section .row > .col-md-3:has(.featured-product-block),
    .page-section .row > div.col-md-3.col-sm-6 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* ==========================================================================
   Favorites Page - Boutiques favorites
   Template: favorite-profile-block.twig uses col-md-3 col-sm-6 py-3
   Expected: 4 per row on desktop (md+), 2 on tablet (sm), 1 on mobile
   ========================================================================== */
.page-section .row > .col-md-3:has(.featured-store-block),
.page-section .row > div.col-md-3.col-sm-6.py-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ==========================================================================
   jQuery UI accessibility live-region
   Prevent screen-reader helper text from being visually rendered at page bottom
   ========================================================================== */
.ui-helper-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (min-width: 576px) {
    .page-section .row > .col-md-3:has(.featured-store-block),
    .page-section .row > div.col-md-3.col-sm-6.py-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 768px) {
    .page-section .row > .col-md-3:has(.featured-store-block),
    .page-section .row > div.col-md-3.col-sm-6.py-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* ==========================================================================
   Homepage - Derniers articles (Blog)
   Template: latest-blog-block.twig uses col-md-4 col-sm-12
   Expected: 3 per row on desktop, 1 on mobile
   ========================================================================== */
.blog-block.col-md-4.col-sm-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .blog-block.col-md-4.col-sm-12 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* ==========================================================================
   Messagerie / Chat Page - Desktop Layout Fix
   Ensure 3-column layout on desktop regardless of open-message/close-message state
   ========================================================================== */
@media (min-width: 993px) {
  /* Forcer l'affichage des colonnes même quand open-message/close-message sont présents */
  .massage-list-box,
  #messagerie-container.open-message .massage-list-box,
  #messagerie-container.close-message .massage-list-box {
    display: block !important;
  }

  .chat-box-area,
  #messagerie-container.open-message .chat-box-area,
  #messagerie-container.close-message .chat-box-area {
    display: flex !important;
    flex-direction: column;
  }

  .chat-right-box,
  #messagerie-container.open-message .chat-right-box,
  #messagerie-container.close-message .chat-right-box {
    display: block !important;
  }
}

/* ==========================================================================
   Cart & Payment Pages - Restore right column on mobile/tablet
   new-ui.css hides .chat-right-box on <=992px (intended for messagerie),
   but cart/payment pages reuse .chat-right-box for the price summary + action
   button column (e.g. "Bloquer la caution" sur /user/paiement-location/{id}).
   Sans cette regle, le bouton est invisible sur mobile et iPad.
   ========================================================================== */
@media (max-width: 992px) {
  .checkout-cart-right-box.chat-right-box {
    display: block !important;
  }
}

/* ==========================================================================
   Depot/Paiement - Cacher le badge "Powered by Stripe" en mobile
   Sur petits ecrans, .depot-sectioin-title passe en column-reverse et le
   badge Stripe (seul contenu du h4) prend trop de place inutilement au-dessus
   du titre "Depot de garantie". On le garde sur tablette/desktop pour la
   reassurance.
   ========================================================================== */
@media (max-width: 767px) {
  .depot-sectioin-title h4 {
    display: none;
  }
}

/* ==========================================================================
   Location Materiel & Trust Security - Number blocks (Comment ça marche)
   Uses col-12 col-sm-6 col-md-4
   Expected: 3 aligned blocks on desktop, 2 on tablet, 1 on mobile
   ========================================================================== */
.page-section .row > .col-12.col-sm-6.col-md-4,
.page-section .row > div.col-md-4:has(.number-blocks) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    .page-section .row > .col-12.col-sm-6.col-md-4,
    .page-section .row > div.col-md-4:has(.number-blocks) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 768px) {
    .page-section .row > .col-12.col-sm-6.col-md-4,
    .page-section .row > div.col-md-4:has(.number-blocks) {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* ==========================================================================
   Location Materiel - Témoignage (Verbatim section)
   Image col-md-6 + Text col-md-6 should be side by side
   ========================================================================== */
.verbatim-section {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-section .row > .col-12.col-md-6:has(img),
.page-section .row > .col-12.col-md-6:has(.verbatim-section),
.page-section .row > div.col-md-6.col-lg-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .page-section .row > .col-12.col-md-6:has(img),
    .page-section .row > .col-12.col-md-6:has(.verbatim-section) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .page-section .row > div.col-md-6.col-lg-5 {
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
        width: 41.666667% !important;
    }
}

/* A partir de lg, la colonne texte porte offset-lg-1 (8.33%). Elle doit donc
   passer a 41.66% sinon 50% + 8.33% + image 50% = 108% et le texte wrap sous
   l'image. La regle :has(.verbatim-section) ci-dessus (5 classes) la forcait a
   50% en battant en specificite le selecteur col-md-6.col-lg-5. On gagne ici
   avec une specificite superieure (5 classes + element) scopee a >=992px. */
@media (min-width: 992px) {
    .page-section .row > div.col-md-6.col-lg-5:has(.verbatim-section) {
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
        width: 41.666667% !important;
    }
}

/* ==========================================================================
   Trust Security - Protection blocks (6 blocks in 2 rows of 3)
   Uses col-md-4 mb-4
   ========================================================================== */
.page-section .row > .col-md-4.mb-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .page-section .row > .col-md-4.mb-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* ---- css/new-styles/ls-bottom-system.css ---- */
/* ls-bottom-system.css — pont legacy vers le systeme de barres fixes bas.
 * Charge juste apres hotfix.css (headVueSpa.twig / head.twig / head-cart.twig)
 * avec le meme cache-bust. CSS pur, memes noms de vars que _tokens.scss :
 * les deux :root posent des valeurs identiques -> idempotent, ordre indifferent.
 * Le JS (bottom-system.js) ecrit dans le meme document.documentElement.style,
 * donc une seule ecriture pilote les deux mondes (Vue/Vite + legacy). */

:root {
  --ls-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ls-bottom-nav-h: 0px;     /* overwritten by bottom-system.js */
  --ls-keyboard-inset: 0px;   /* overwritten by bottom-system.js */
  /* max() et non somme : la nav mesuree inclut deja sa safe-area (cf §8.7) */
  --ls-bottom-stack: max(var(--ls-bottom-nav-h), var(--ls-safe-bottom));

  --ls-z-content: 1;
  --ls-z-nav: 990;
  --ls-z-cta: 995;
  --ls-z-header: 1010;
}

/* --- Classes utilitaires legacy (portees par les Twig, equivalentes aux mixins SCSS) --- */

/* Barre CTA empilee au-dessus de la nav mesuree + safe-area. */
.ls-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--ls-bottom-nav-h);
  z-index: var(--ls-z-cta);
  padding-bottom: calc(0.75rem + var(--ls-safe-bottom) + var(--ls-keyboard-inset));
  box-sizing: border-box;
}

/* Variante "solo" : le CTA remplace la nav (nav masquee), bottom:0. */
.ls-sticky-bar-solo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ls-z-cta);
  padding-bottom: calc(0.75rem + var(--ls-safe-bottom) + var(--ls-keyboard-inset));
  box-sizing: border-box;
}

/* Reservation d'espace en bas = nav + safe (via max()) ; le CTA propre s'ajoute en inline si besoin. */
.ls-reserve-nav {
  padding-bottom: var(--ls-bottom-stack);
}

/* Filet de securite global : toutes les pages legacy reservent au moins la pile bas.
 * #content-min-len etait inerte (top:60px;bottom:0) ; on garantit l'espace de la nav. */
#content-min-len {
  padding-bottom: var(--ls-bottom-stack);
}

/* ---- css/new-styles/public-chrome.css ---- */
/* Genere par scripts/build-public-chrome.mjs depuis assets/styles/public-chrome/ : ne pas editer a la main. */
body,p,span,ol,ul,li,h1,h2,h3,h4,h5,h6,input,textarea,select,option,button,a,i,b,strong,u,td,th,dd,small,dt{font-family:"Inter",sans-serif}@font-face{font-family:"icomoon";src:url("/Fonts/icons-espace-loueur/icomoon.eot?igwgwu");src:url("/Fonts/icons-espace-loueur/icomoon.eot?igwgwu#iefix") format("embedded-opentype"),url("/Fonts/icons-espace-loueur/icomoon.ttf?igwgwu") format("truetype"),url("/Fonts/icons-espace-loueur/icomoon.woff?igwgwu") format("woff"),url("/Fonts/icons-espace-loueur/icomoon.svg?igwgwu#icomoon") format("svg");font-weight:normal;font-style:normal;font-display:block}[class^=icon-],[class*=" icon-"]{font-family:"icomoon" !important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-heart:before{content:""}.icon-shopping-cart:before{content:""}.icon-calendar:before{content:""}.icon-message-circle:before{content:""}.icon-search:before{content:""}.icon-video:before{content:""}.icon-settings:before{content:""}.icon-help-circle:before{content:""}.icon-log-out:before{content:""}.icon-user-plus:before{content:""}.icon-log-in:before{content:""}.icon-camera:before{content:""}.icon-dollar-sign:before{content:""}.icon-star:before{content:""}.icon-shield:before{content:""}.icon-info:before{content:""}.icon-headphones:before{content:""}.icon-book:before{content:""}.icon-chevron-right:before{content:""}.icon-award:before{content:""}.icon-compass:before{content:""}.icon-shopping-bag:before{content:""}.icon-trending-up:before{content:""}.icon-briefcase:before{content:""}.icon-book-open:before{content:""}.icon-pen-tool:before{content:""}label{margin-bottom:0px}a{text-decoration:none !important;font-weight:600}.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front{background:#fff}.mobile-bottom-bar{position:relative}.horizontally-menu{position:relative;margin-bottom:0px;z-index:20;list-style:none;border-top:none;left:0;right:0;bottom:0;background:rgba(0,0,0,0);color:#667085;display:flex;padding:10px 16px;padding-bottom:calc(10px + var(--ls-safe-bottom));justify-content:space-around;align-items:center;flex-shrink:0}.horizontally-menu li{flex:1;display:flex;justify-content:center}.horizontally-menu li a{font-size:11px;font-weight:500;letter-spacing:.01em;color:#667085;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;text-decoration:none;min-width:56px;padding:4px 8px;border-radius:10px;transition:color .2s ease,transform .15s ease;-webkit-tap-highlight-color:rgba(0,0,0,0)}.horizontally-menu li a .icon-kit{font-size:22px;transition:transform .2s ease}.horizontally-menu li a:hover,.horizontally-menu li a:active{color:#fc2249}.horizontally-menu li a:hover .icon-kit,.horizontally-menu li a:active .icon-kit{transform:scale(1.08)}.horizontally-menu li a.active{color:#fc2249;font-weight:600}@media(max-width: 480px){.horizontally-menu{padding:8px 10px;padding-bottom:calc(8px + var(--ls-safe-bottom))}.horizontally-menu li a{font-size:10px;gap:3px;min-width:44px}.horizontally-menu li a .icon-kit{font-size:20px}}@media(max-width: 360px){.horizontally-menu{padding:6px 8px;padding-bottom:calc(6px + var(--ls-safe-bottom))}.horizontally-menu li a{font-size:9px;gap:2px;min-width:38px}.horizontally-menu li a .icon-kit{font-size:18px}}.navbar-collapse,#slide-menu-collapse,.cart-page-bottom .navbar-collapse,.cart-page-bottom #slide-menu-collapse{position:fixed !important;top:0 !important;left:0 !important;width:100% !important;height:100vh !important;height:100dvh !important;max-width:100%;background-color:#fff;z-index:9999 !important;overflow-y:auto;padding:20px}.navbar-collapse .left-menu,#slide-menu-collapse .left-menu{padding-top:20px;padding-left:0}.navbar-collapse .left-menu li,#slide-menu-collapse .left-menu li{margin-bottom:20px;list-style:none}.navbar-collapse .left-menu li a,#slide-menu-collapse .left-menu li a{display:flex;align-items:center;font-size:16px;padding:10px 0}.navbar-collapse .left-menu li a i,.navbar-collapse .left-menu li a [class^=icon-],#slide-menu-collapse .left-menu li a i,#slide-menu-collapse .left-menu li a [class^=icon-]{font-size:20px;margin-right:15px}.navbar-collapse .left-menu li a svg,.navbar-collapse .left-menu li a .iconify,#slide-menu-collapse .left-menu li a svg,#slide-menu-collapse .left-menu li a .iconify{flex-shrink:0;margin-right:15px}.profile-name{display:flex;align-items:center;margin-bottom:20px}.profile-name img,.profile-name .avatar{margin-right:15px}.voir-profile-link{margin-bottom:30px}.voir-profile-link a{color:#666;display:flex;align-items:center;justify-content:space-between}.navbar-collapse #slide-menu-collapse .left-menu,#slide-menu-collapse .left-menu{display:flex;flex-direction:column;height:calc(100vh - 80px);padding-bottom:0}.navbar-collapse #slide-menu-collapse .left-menu .menu-divider,#slide-menu-collapse .left-menu .menu-divider{flex-grow:1;position:relative;margin-top:20px}.navbar-collapse #slide-menu-collapse .left-menu .menu-divider::after,#slide-menu-collapse .left-menu .menu-divider::after{content:"";position:absolute;bottom:10px;left:15px;right:15px;height:1px;background:rgba(255,255,255,.1)}.navbar-collapse #slide-menu-collapse .left-menu .menu-bottom,#slide-menu-collapse .left-menu .menu-bottom{margin-top:auto;margin-bottom:5px}.navbar-collapse #slide-menu-collapse .left-menu .menu-bottom:last-child,#slide-menu-collapse .left-menu .menu-bottom:last-child{margin-bottom:15px}.drawer-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:12px 12px}.drawer-header .drawer-header-logo{font-size:18px;font-weight:600;color:var(--dark, #080025)}.drawer-header .drawer-close{font-size:18px;color:var(--dark, #080025)}.drawer-header .close-icon{cursor:pointer;padding:5px;text-align:center;background:var(--grey-0, #F9F9F9);color:#8b8c97}#slide-menu-collapse{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;z-index:9999;overflow-y:auto;transform:translateX(-100%);transition:transform .3s ease-in-out;display:block !important;padding:20px}#slide-menu-collapse.show{transform:translateX(0)}#slide-menu-collapse .drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee}#slide-menu-collapse .drawer-header .drawer-header-logo{font-size:20px;font-weight:bold}#slide-menu-collapse .drawer-header .close-icon{font-size:24px;cursor:pointer}#slide-menu-collapse .profile-name{display:flex;align-items:center;margin-bottom:15px}#slide-menu-collapse .profile-name img,#slide-menu-collapse .profile-name .avatar{margin-right:10px}#slide-menu-collapse .profile-name span{font-size:18px;font-weight:500}#slide-menu-collapse .voir-profile-link{margin-bottom:20px}#slide-menu-collapse .voir-profile-link a{display:flex;justify-content:space-between;color:#007bff;font-weight:500}#slide-menu-collapse .left-menu{list-style:none;padding:0;margin:0}#slide-menu-collapse .left-menu li{margin-bottom:15px}#slide-menu-collapse .left-menu li a{display:flex;align-items:center;font-size:16px;padding:10px 0}#slide-menu-collapse .left-menu li a i{margin-right:15px;width:20px;text-align:center}#slide-menu-collapse .left-menu li.sign-out a{color:#fc2249}.navbar-collapse#slide-menu-collapse{display:none !important;position:fixed;top:0;left:0;width:90%;height:100vh;height:100dvh;background-color:#fff;z-index:1030 !important;overflow-y:auto;padding:20px;box-shadow:2px 0 10px rgba(0,0,0,.2)}.navbar-collapse#slide-menu-collapse.show{display:block !important}body.body-slide-menu-open .chat-input-container{display:none !important}.navbar-collapse#slide-menu-collapse .drawer-header{display:flex !important;justify-content:space-between !important;align-items:center !important;padding:15px !important;margin-bottom:20px !important;border-bottom:1px solid #eee !important}.navbar-collapse#slide-menu-collapse .drawer-header .drawer-header-logo{font-size:20px !important;font-weight:600 !important;margin:0 !important;display:block !important}.navbar-collapse#slide-menu-collapse .drawer-header .close-icon{cursor:pointer !important;font-size:18px !important}.navbar-collapse#slide-menu-collapse .left-menu .menu-primary-action{margin-bottom:15px !important}.navbar-collapse#slide-menu-collapse .left-menu .menu-primary-action a.mobile-red-button{background-color:#fc2249 !important;color:#fff !important;border-radius:4px !important;padding:12px 15px !important;font-weight:600 !important;transition:background-color .3s ease !important;display:flex !important;align-items:center !important}.navbar-collapse#slide-menu-collapse .left-menu .menu-primary-action a.mobile-red-button i{margin-right:10px !important;width:20px !important;text-align:center !important}.navbar-collapse#slide-menu-collapse .left-menu .menu-primary-action a.mobile-red-button:hover{background-color:#e41e43 !important}.navbar-collapse#slide-menu-collapse .left-menu .menu-secondary-action{margin-bottom:25px !important}.navbar-collapse#slide-menu-collapse .left-menu li a{display:flex !important;align-items:center !important;padding:12px 15px !important;border-radius:4px !important}.navbar-collapse#slide-menu-collapse .left-menu li a i{margin-right:10px !important;width:20px !important;text-align:center !important}.router-link-active,.router-link-exact-active{color:inherit !important}a[href*="/user/mes-favoris"].router-link-active{color:inherit !important}a[href*=my-carts].router-link-active{color:inherit !important}a[href*="/locataire/reservations"].router-link-active,a[href*=tenant-asks].router-link-active{color:inherit !important}a[href*="/user/messagerie"].router-link-active{color:inherit !important}a[href*="/catalogue-search"].router-link-active{color:inherit !important}a[href*=dashboard].router-link-active{color:inherit !important}.search-input-universal,.header-search-form .form-control,.header-search-form .input-search{border:none !important;border-radius:0 !important;box-shadow:none !important;outline:none !important;background:rgba(0,0,0,0) !important;padding:6px 12px !important;transition:all .3s ease !important;font-size:14px !important;font-weight:500 !important;height:34px !important;width:100% !important}.search-input-universal::placeholder,.header-search-form .form-control::placeholder,.header-search-form .input-search::placeholder{color:#9ca3af !important;font-size:14px !important;font-weight:500 !important}.search-button-universal,.header-search-form .search-button{background:linear-gradient(135deg, #fc2249 0%, #d11440 100%) !important;border:none !important;padding:0 !important;width:34px !important;height:34px !important;border-radius:10px !important;display:flex !important;align-items:center !important;justify-content:center !important;box-shadow:0 2px 8px rgba(252,34,73,.25) !important;transition:all .3s ease !important;cursor:pointer !important}.search-button-universal:hover,.header-search-form .search-button:hover{background:linear-gradient(135deg, #e41e43 0%, #b91139 100%) !important;box-shadow:0 4px 12px rgba(252,34,73,.35) !important;transform:translateY(-1px) !important}.search-button-universal svg,.header-search-form .search-button svg{color:#fff !important}header nav.navbar.navbar-light .header-search-form,.header-search-form{gap:8px !important;border:1px solid #d1d5db !important;border-radius:12px !important;padding:3px 4px 3px 4px !important;background:#fff !important;transition:border-color .2s ease,box-shadow .2s ease !important}header nav.navbar.navbar-light .header-search-form:hover,.header-search-form:hover{border-color:rgba(252,34,73,.4) !important}header nav.navbar.navbar-light .header-search-form:focus-within,.header-search-form:focus-within{border-color:#fc2249 !important;box-shadow:0 0 0 3px rgba(252,34,73,.12) !important}