body {
    font-family: 'Red Hat Display', sans-serif;
    font-size:1.1rem;
    color: #000;
    max-width: 144rem;
    margin: auto;
}
.langlinks a {
    color: #00b6b2;
    font-weight: bold;
    font-size: 1.5rem;
    text-decoration: none;
}
.success-message {
    color: #00b6b2;
}
.error-message {
    color: #f00;
}
.circular-loader {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  height: 20px;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  width: 20px;
}

.loader-path {
  stroke-dasharray: 150,200;
  stroke-dashoffset: -10;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

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

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}

@keyframes color {
  0% {
    stroke: #fff;
  }
  40% {
    stroke: #fff;
  }
  66% {
    stroke: #fff;
  }
  80%, 90% {
    stroke: #fff;
  }
}
p {
    font-size:1.1rem;
}
section.bandeau-attente
{
    display: block;
    background-image: url(img/photo-biendiscret.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    height: 240px;
}
.menu-header {
    background: #000;
    padding: 1rem;
    padding-bottom: 3rem;
}
.menu-header a { 
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
}
.navbar-nav {
        flex-direction: row;
}
.nav-link {
    padding:0;
    font-weight: 500;
    font-size:0.9rem;
    font-family: 'Poppins', sans-serif;
}
.nav-link:hover {
    color: #008f8c !important;
}
.nav-link.burger {
    filter: brightness(0);
}
.nav-link.burger:hover {
    filter: brightness(1);
}
.white-menu {
    background: #fff;
    border-radius: 2rem;
    padding: 2rem;
    margin-top: -2rem;
    position: relative;
}

section.bandeau-home {
    background-image: url(img/bandeau-photo01.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    margin-top: -2rem;
    display:none;
}

section.bandeau-int {
    display: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    margin-top: -2rem;
    height: 194px;
}

.contenu-int h1 {
    position:relative;
    font-size: 1.6rem;
    font-weight: bold;
    background: #fff;
    border-top-right-radius: 2rem;
    padding-left: 1rem;
    padding-right: 3rem;
    padding-top: 1.5rem;
    margin-top: -2.5rem;
    display: inline-block;
}

.contenu-int h1::before {
    content:"";
    position: absolute;
    left: 0;
    top: -40px;
    background-image: url('img/arrondi.svg');
    width: 40px;
    height: 40px;
}
.contenu-int h2.title {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: bold;
}
.contenu-int a {
    color: #000;
    text-decoration: underline;
}
.contenu-int a:hover{
    text-decoration: none;
}
section.bandeau-home .row {
    padding-top: 7rem;
    padding-bottom: 6rem;
}

h1.title {
    color: #fff;
    font-size:2.5rem;
    font-weight: bold;
    line-height:2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
h1.title span.first-element {
    font-family: 'Playfair Display', sans-serif;
    font-size:2rem;
    font-style: italic;
}
h1.title span.second-element {
    font-size:2rem;
}
.searchinput {
    width: 100%;
}
.searchinput, .input-text {
    padding: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 3rem;
    border: 1px solid #bec7cc;
}
.searchinput::placeholder {
    color: #bec7cc;
    font-weight:600;
    font-size:1.1rem;
}
.price {
    max-width:200px;
}
.localisation {
    max-width:400px;
    padding-left:4rem;
}
.div-localisation {
    position:relative;
}
.div-localisation::before {
    content:"";
    position: absolute;
    left: 35px;
    top: 20px;
    background-image: url(img/pin.svg);
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
}
.btn-search {
    position: absolute;
    right: 27px;
    top: 18px;
    border:0;
    background: transparent;
}
a.filters {
    text-decoration:none;
}
a.filters:hover{
    color: #008f8c;
}
 .custom-card {
            border-radius: 2rem;
            padding: 3rem;
            display: flex;
    flex-direction: column;
    height: 100%;
        }
        .black-card {
            background-color: black;
            color: white;
        }
        .gray-card {
            background-color: #f5f5f5;
        }
        .turquoise {
            color: #00b6b2;
        }
        .btn-custom {
            font-family: 'Poppins', sans-serif;
            background-color: #00b6b2;
            color: white !important;
            border-radius: 2rem;
            padding: 0.5rem 1.5rem;
            text-decoration: none !important;
            font-weight: bold;
            font-size:1.1rem;
            white-space: nowrap;
        }
        .btn-custom:hover, .btn-custom:active, .btn-custom:focus, .btn-custom:focus-visible {
            border: 1px solid #008f8c;
            background-color: #000 !important;
            color: white !important;
        }
        .black-card .btn-custom:hover {
            border: 1px solid #008f8c;
            background-color: #fff;
            color: #008f8c;
        }
        .highlight {
            font-weight: bold;
        }
        .rounded2 {
            border-radius: 2rem;
        }
        ul.fleche {
    list-style-type: none;
    padding-left: 0;
}
    ul.fleche li {
        position: relative;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
        ul.fleche li::before {
    content: ">";
  position: absolute;
  font-weight: bold;
  left: 0;
  color: #00b6b2;
}
.texte-publicitaire {
    font-size:2rem;
    font-weight: bold;
}
hr.separator {
    width: 40px; margin-bottom: 1rem;
}
        section.avis {
            background: #00b6b2;
            border-radius: 2rem;
            min-height:600px;
            position: relative;
            overflow: hidden;
            padding-left: 1rem;
            padding-right: 1rem;
        }
        section.avis::after {
            content: "";
            position: absolute;
            bottom: 0px;
            left: -136px;
            width: 584px;
            height: 500px;
            background: url(img/etoile.svg) no-repeat top / cover;
            opacity: 0.15;
        }
        section.avis h2 {
            color: #000;
            font-size:2rem;
            font-weight: bold;
        }

        footer {
            margin-top: -2rem;
            background-color: #000000;
            padding-top: 4rem;
        }
        ul.footerul li { padding-bottom:0.6rem; }
        ul.footerul li a {
            font-family: 'Poppins', sans-serif;
            text-decoration: none;
        }
        .bottomlink a {
            white-space: nowrap;
        }
        ul.footerul li a:hover, a.plus:hover, .bottomlink a:hover {
            color: #008f8c !important;
        }
        a.plus {
            color: #fff;
        }
        div.followus a {
            text-decoration: none;
        }
        div.followus a:hover {
            color: #00b6b2;
        }
        div.followus a:not(.headbtn):hover img { 
            filter: brightness(0) invert(1);
        }
        footer h5 {
            font-weight: bold;
            font-size: 1.6rem;
        }
        .newsinput{
            padding: 1.5rem;
            padding-left: 3rem;
            padding-right: 3rem;
            width: 100%;
            border-radius: 3rem;
            border: 1px solid #bec7cc;
            background: transparent;
            color: #fff;
        }
        .searchinput::placeholder {
            color: #bec7cc;
            font-weight:600;
            font-size:1.1rem;
        }
        .max-width-15 {
            max-width:15rem;
        }
.store {
    width:100%;
    max-width:200px;
}
.navbar-brand img {
    width:100%;
    max-width:155px;
}

.progress-wrap {
  position: fixed;
  right: 32px;
  bottom: 32px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  border-radius: 50px;
  box-shadow: inset  0 0 0 2px rgba(0,0,0,0.2);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.progress-wrap::after {
  position: absolute;
  background: url(img/arrow-top.svg) center no-repeat;
  content: '';
  text-align: center;
  color: #AA2419;
  left: 15px;
  top: 14px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap:hover::after {
  opacity: 0;
}
.progress-wrap::before {
  background: url(img/arrow-top.svg) center no-repeat;
  position: absolute;
  content: '';
  left: 13px;
  top: 13px;
  width: 18px;
  height: 18px;
  opacity: 0;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap:hover::before {
  opacity: 1;
}
.progress-wrap svg path { 
  fill: none; 
}
.progress-wrap svg.progress-circle path {
  stroke: #00b6b2;
  stroke-width: 4;
  box-sizing:border-box;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.section-menu {
    background: #00b6b2;
    margin-top: -2rem;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    display:none;
    color: #fff;
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
.menu {
    flex-wrap: wrap;
    width: 100%;
    display:none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    gap: 2rem;
}
.menu li {
    padding: 0.2rem;
}
.menu.show {
    display: flex !important;
}
.section-menu.show, .bandeau-home.show, .bandeau-int.show, .close-menumobile.show, .menumobile.show, .sousmenu.show, .firstmenu.show {
    display:block;
}
.menu .dropdown-column {
    flex: 1;
}
.menu .dropdown-header {
    font-weight: bold;
    font-size:1.3rem;
    margin-bottom: 1rem;
}
a.categorie {
    position:relative;
    display: block;
    font-size:1.4rem !important;
    margin-top:2rem;
    margin-bottom:1rem;
}
.menu .dropdown-header:after, a.categorie:after {
    display: block;
    position: absolute;
    height: 1px;
    margin: 0.7em auto 0;
    width: 2.2rem;
    background-color: #fff;
    content: '';
}
.dropdown-column a {
    color: #fff;
    text-decoration: none;
}
.dropdown-column a:hover {
    color: #000;
}
.dropdown-toggle::after {
    display:none;
}
.dropdown-item {
    white-space: none;
}
.loupe {
    margin-right: 4rem;
    z-index: 999;
}
.navbar-toggler img, .loupe img, .btn-search img {
    filter: brightness(0);
}
.navbar-toggler:hover img, .loupe:hover img, .btn-search:hover img {
    filter: brightness(1);
}

.menumobile {
    display:none;
    position: absolute;
    width: 100%;
    left:0;
    top : 10rem;
    padding: 2rem;
    background: #00b6b2;
    z-index: 99;
    border-radius: 2rem;
}
.menumobile ul, .sousmenu ul {
    list-style: none;
    padding-left: 0;
}
.menumobile a {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration:none;
}
.sousmenu, .firstmenu {
    display:none;
}
.firstmenu {
    column-count: 1;
    column-gap: 0rem;
}
.sousmenu li, .firstmenu li, a.back {
    padding: 0.75rem;
}
a.back img {
    margin-right: .5rem;
}
.menumobile a:hover {
    color: #000;
}
.close-menumobile {
    display:none;
    position: absolute;
    right:0;
    top: 62px;
    width: 102px;
    height: 10rem;
    background: #00b6b2;
    border-radius: 2rem;
    z-index: 99;
}
.close-menumobile img {
    margin-top: 35px;
}
.close-menumobile::before {
    content:"";
    position: absolute;
    right: 102px;
    top: 58px;
    background-color: #00b6b2;
    width: 40px;
    height: 40px;
}
.close-menumobile::after {
    content:"";
    position: absolute;
    right: 102px;
    top: 58px;
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-bottom-right-radius: 2rem;
}
.profil {
    border: 1px solid #008f8c;
}
.navbar-nav .nav-link.active {
    color: #008f8c;
}
.firstmenu a.active {
    color: #000;
}
.bg-light {
    background-color: #edeef0 !important;
}

input[type="radio"] {
    display: none; /* Cache le bouton radio natif */
}

input[type="radio"] + label {
    position: relative;
    padding-left: 40px; /* Espace pour le cercle */
    cursor: pointer;
}

input[type="radio"] + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 1px solid #bec7cc;
    border-radius: 50%;
    background-color: white;
}

input[type="radio"]:checked + label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: #00b6b2;
    border-radius: 50%;
}
h5 > span {
    margin-left:0.5rem;
    margin-right: 0.5rem;
    color: #00b6b2;
}
.text-primary {
    color: #00b6b2 !important;
}
.text-muted {
    color: #000 !important;
}
a.annonce, a.annonce:hover {
    text-decoration:none;
}
.card-img {
    overflow: hidden;
}
a.annonce .card-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
    transform-origin: center;
}
a.annonce:hover .card-img img {
    transform: scale(1.08);
}
svg.coeur {
    width: 20px;
    float: right;
    margin-left: 2rem;
}
svg.coeur .st0 {
    fill:#23B3AA;
}
svg.coeur .st1 {
    fill: #FFFFFF;
}
svg.coeur.active .st1 {
    fill: #23B3AA;
}
.page-link {
    border:0 !important;
    background: transparent !important;
    text-decoration:none !important;
}
.page-link:hover {
    color: #23B3AA;
    text-decoration:none !important;
}
.active>.page-link, .page-link.active {
    color: #23B3AA;
}
.mask-depot-annonce {
    margin-top:-3rem;
    height: 3rem;
    background: #fff;
    z-index: 3;
    border-radius: 2rem;
}
.depot-annonce {
    border-radius: 2rem;
    margin-top:-3rem;
    padding-top:6rem;
}
.step {
    display: none;
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.step.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}
.compteur {
    width: 100%;
    display: block;
    text-align: center;
}
.multiStepForm {
    position: relative;
    overflow: hidden;
    width:100%;
    transition: height 0.5s ease-in-out;
}
.multiStepForm h2 {
    font-size:1.5rem;
    font-weight: bold;
}

@media (min-width: 400px) {
    .firstmenu {
        column-count: 2;
        column-gap: 1rem;
    }
}
@media (min-width: 600px) {
    .firstmenu {
        column-count: 3;
        column-gap: 1rem;
    }
}

@media (max-width: 850px) {

    .div-localisation {
        width: 100%;
        margin-right: 0px !important;
    }
    .localisation {
        width: 100%;
        max-width: 100%;
    }
    .div-price, .filters {
        width: 100%;
        margin-right: 0px !important;
    }
    .div-price input {
        width: 100%;
        max-width: 100%;
        margin-right: 0px !important;
    }
    .div-price input:nth-of-type(2) {
        margin-top:1rem;
    }
    .div-btn-filters {
        width: 100%;
        text-align: right;
    }
}
@media (min-width: 992px) {
    .contenu-int h1 {
        padding-left: 3rem;
    }
    .compteur {
        width: auto;
        min-width:100px;
    }
    .me-8 {
        margin-right:8rem;
    }
    section.avis {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    h1.title {
        font-size:3rem;
        line-height:2rem;
    }
    section.bandeau-int {
        height: 260px;
    }
    .contenu-int h1, .contenu-int h2.title {
        font-size: 2.3rem;
    }
}
@media (min-width: 1200px) {
    .white-menu {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .navbar-brand img {
        width:200px;
        max-width: 200px;
    }
    .h2, h2 {
        font-size: 2.5rem;
    }
    .texte-publicitaire, section.avis h2 {
        font-size: 4rem;
    }
    h1.title {
        font-size:3.5rem;
        line-height:2.5rem;
    }
    h1.title span.first-element {
        font-size:3rem;
    }
    h1.title span.second-element {
        font-size:3rem;
    }
    .marginlr {
        margin-left:115px;
        margin-right:115px;
    }
    .background-left, .background-right {
                position: absolute;
                top: 0;
                width: 115px;
                height: 2741px;
                background-size: contain;
                background-repeat: no-repeat;
                z-index: -1;
            }
      .background-left {
                left: 0;
                background-image: url('img/bandeau-vertical-gauche.webp'); 
            }

            .background-right {
                right: 0;
                background-image: url('img/bandeau-vertical-droit.webp'); 
            }
    section.bandeau-home .row {
        padding-top: 8rem;
        padding-bottom: 7rem;
    }
    section.bandeau-attente {
        height: 300px;
    }

}

@media (min-width: 1600px) {
    .navbar-brand img {
        width:200px;
        max-width: 200px;
    }
    .nav-link {
        font-size:1.1rem;
    }
    h1.title {
        font-size:5rem;
        line-height:3rem;
    }
    section.bandeau-home .row {
        padding-top: 10rem;
        padding-bottom: 10rem;
    }
    section.bandeau-attente {
        height: 380px;
    }
}

#timer {
  color: #F6F4F3;
  text-align: center;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7em;
  letter-spacing: 5px;
  display:block;
}

.days, .hours, .minutes, .seconds {
  display: inline-block;
  padding: 20px;
  border-radius: 5px;
  background: #00b6b2;
  color: #fff;
  width:150px;
}

.numbers {
  font-family: 'IBM Plex Sans', sans-serif;
  color: #fff;
  font-size: 5em;
}

@media (max-width: 1420px) {
    .days, .hours, .minutes, .seconds {
        width:75px;
        padding: 5px;
    }
    #timer {
        font-size: .4em;
        letter-spacing: 3px;
    }
}