/* Personnalisation des styles */
.wrap.wide {
    width: 100rem;
    max-width: calc(100% - 3rem);
    margin-inline: auto;
}

.header--primary {
    --logow: 17rem;
    color: var(--clr-text);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    color: var(--clr-700);
    padding: 2rem 0;
    transition: all .5s;
    & .header__logo {
        filter: invert(1);
    }
    &.isHome {
        position: fixed;
        color: var(--clr-bg);
        & .header__logo {
            filter: none;
        }
    }
    &.isScrolled {
        background-color: var(--clr-300);
        padding: 1rem 0;
        color: var(--clr-700);
    }
    &:not(.isHome), &.isScrolled {
        & .header__logo {
            filter: invert(1);
        }
        & .bouton--alt {
            --clr1: var(--clr-text);
            --clr2: var(--clr-bg);
        }
    }
    & .wrap {
        display: grid;
        grid-template-columns: 1fr var(--logow) 1fr;
        align-items: center;
    }
}

.nav--util {
    display: flex;
    gap: 1.5rem;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    & a:not(.bouton) {
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 600;
        font-size: .95rem;
        color: currentColor;
        &.nav__link--current {
            text-decoration: underline;
        }
        &:hover {
            color: var(--clr-accent);
        }
    }
    &:last-child {
        gap: 1rem;
        justify-content: end;
        & .bouton+a:not(.bouton) {
            margin-left: 2rem;
        }
    }
}

.header__logo {
    width: var(--logow);
}

.nav--primary {
    --pad: 2rem;
    --left: max(1.5rem, calc((100dvw - 100rem) / 2));
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    translate: -101% 0;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    transition: all 1s;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--clr-text);
        z-index: -1;
        opacity: 0.7;
    }
    & .inner-nav {
        background-color: var(--clr-300);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        padding: var(--pad) var(--pad) var(--pad) var(--left);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 23rem;
        >* {
            width: 100%;
        }
    }
    & .menu-button {
        position: absolute;
        top: var(--pad);
        left: var(--left);
        z-index: 9;
    }
    z-index: 9999;
    & ul {
        list-style-type: none;
        padding: 0;
        margin-bottom: 5rem;
    }
    & .nav__link, & .link--lang {
        display: block;
        font-size: 1.75rem;
        font-weight: 400;
        text-decoration: none;
        color: var(--clr-text);
        margin: 1rem 0;
        text-align: center;
        &:hover {
            color: var(--clr-accent);
        }
    }
    & .sm-only {
        display: none;
    }
    & .socials {
        display: flex;
        gap: 1rem;
        justify-content: center;
        align-items: center;
    }
    & .bouton+.bouton {
        margin-top: 1rem;
    }
    &.open {
        translate: 0 0;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }
}

.bouton {
    --clr1: var(--clr-text);
    --clr2: var(--clr-bg);
    --clrh: var(--clr-accent);
    &.bouton--alt {
        --clr2: var(--clr-text);
        --clr1: var(--clr-bg);
    }
    display: flex;
    width: max-content;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50vh;
    border: 1px solid var(--clr1);
    background-color: var(--clr1);
    color: var(--clr2);
    padding: 1rem 1.85rem;
    font-size: .95rem;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .6s;
    &:hover {
        border-color: var(--clrh);
        background-color: var(--clrh);
    }
    &.bouton-2 {
        background-color: transparent;
        color: var(--clr1);
        &:hover {
            border-color: var(--clrh);
            background-color: var(--clrh);
        }
    }
    & svg {
        max-height: 2rem;
        max-width: 2rem;
    }
    &.bouton--control {
        padding: 0;
        aspect-ratio: 1;
        width: 3.44rem;
        align-items: center;
        justify-content: center;
    }
}

.nav__social-link {
    border-radius: 50%;
    border: 3px solid var(--clr-text);
    color: var(--clr-text);
    width: 2.5rem;
    aspect-ratio: 1;
    display: grid;
    align-items: center;
    padding: 0.325rem;
}

.hero {
    background-color: var(--clr-900);
    display: grid;
    position: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    min-height: 100dvh;
    color: var(--clr-100);
    & .wrap {
        height: 100%;
        display: grid;
        justify-content: start;
        align-items: center;
        z-index: 2;
    }
    & .heroinner {
        width: 75%;
        translate: 0 5rem;
        & .bouton {
            margin-bottom: 1rem;
        }
    }
    & h1 img {
        width: 37.5rem;
    }
    & p:not(.slogan) {
        max-width: 75%;
        font-weight: 200;
        font-size: 1.25rem;
        line-height: 1.5;
        text-wrap: balance;
        margin-bottom: 1.5rem;
    }
}

.slogan {
    font-size: 3rem;
    font-weight: normal;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
}

.hero-proprietes {
    position: absolute;
    bottom: 0;
    right: 1.5rem;
    background-color: var(--clr-text);
    text-align: center;
    overflow: hidden;
    border-top-left-radius: var(--br);
    border-top-right-radius: var(--br);
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    align-items: center;
    width: 40rem;
    max-width: 100%;
    & .bouton {
        margin-left: auto;
        margin-right: auto;
        margin-top: 1rem;
    }
    .hero-props-slider-wrap>.hero-props-slider>img:not(:first-child) {
        display: none;
    }
    & img {
        aspect-ratio: 3/1.9;
        object-fit: cover;
        object-position: center;
    }
}

.heromedia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.4;
    z-index: 1;
}

.titre {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    &.titre--big {
        font-size: 3rem;
    }
    &.titre--small {
        font-size: 1.75rem;
    }
}

.sectionabout .txt {
    padding: 3rem 2.5rem;
    border-top: 1px solid var(--clr-500);
    border-bottom: 1px solid var(--clr-500);
}

.sectionabout .img {
    border-radius: var(--br);
    overflow: hidden;
    aspect-ratio: 1;
    & img {
        object-fit: cover;
        object-position: center;
    }
}

.avantagecard {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 1rem;
    padding: 1.5rem 0rem 1rem 0rem;
    position: relative;
    background-color: transparent;
    &:nth-child(2)::after {
        content: "";
        position: absolute;
        width: calc(100% + 5rem);
        left: -2.5rem;
        top: 0;
        height: 100%;
        pointer-events: none;
        border-left: 1px solid var(--clr-500);
        border-right: 1px solid var(--clr-500);
    }
    &:nth-child(3):not(:last-child)::after {
        content: "";
        position: absolute;
        width: calc(100% + 5rem);
        left: -2.5rem;
        top: 0;
        height: 100%;
        pointer-events: none;
        border-right: 1px solid var(--clr-500);
    }
}

.avantagecard .lst {
    font-size: 2rem;
}

.avantagesinner {
    gap: 5rem;
}

.avantagesinner:has( div:nth-child(4)) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.avantagesinner+.bouton {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}

.vendre-cta {
    background-color: var(--clr-900);
    position: relative;
    color: var(--clr-bg);
    padding-top: 8rem;
    padding-bottom: 6rem;
    &::after {
        content: "";
        background-image: url(/images/vendre-cta.jpg);
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        z-index: 1;
    }
    & .wrap {
        position: relative;
        z-index: 3;
    }
}

.sectioncontent p {
    font-weight: 300;
    & strong {
        font-weight: bold;
    }
}

.proprieteshomewrapper {
    margin-top: 3rem;
    text-align: left;
}

.proprieteshomewrapper>.proprieteshome {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
}

.proprieteshomewrapper>.proprieteshome>.propriete-item:not(:nth-child(-n+3)) {
    display: none;
}

.sectionproprietes p {
    width: 100%;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.propriete__img {
    border-radius: var(--br);
    overflow: hidden;
}

.propriete__prix {
    font-weight: 600;
    font-size: 1.85rem;
    margin-bottom: 0;
}

.bouton--cta-propriete {
    display: none;
}

.propriete__adresse, .propriete__ville {
    font-size: .9rem;
    margin-bottom: 0.75rem;
    font-weight: 300;
}

.propriete__details {
    text-transform: none;
}

.sectionproprietes .controls__wrapper, .sectiontemoignages .controls__wrapper {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 1.5rem;
    max-width: 81.25rem;
    margin-left: auto;
    margin-right: auto;
}

.sectiontemoignages .controls__wrapper {
    justify-content: center;
    margin-top: 1rem;
}

.sectionproprietes .controls, .sectiontemoignages .controls {
    display: flex;
    gap: .75rem;
    width: auto;
}

.proprieteshomewrapper .bx-pager {
    max-width: 81.25rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    align-items: center;
}

.proprieteshomewrapper .bx-pager-item {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--clr-500);
    height: 1px;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.proprieteshomewrapper .bx-pager-link {
    flex: 1;
    background-color: transparent;
    height: 5px;
    font-size: 0;
    color: var(--clr-500);
    display: block;
    transition: all .2s;
}

.proprieteshomewrapper .bx-pager-link.active, .proprieteshomewrapper .bx-pager-link:hover {
    background-color: var(--clr-500);
}

.contact-cta .wrap {
    display: flex;
    gap: 5rem;
    align-items: start;
    justify-content: space-between;
}

.contact-cta p {
    width: 45rem;
    max-width: 100% !important;
}

.temoignages-container {
    background-color: var(--clr-300);
    border-radius: var(--br);
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
}

.sectiontemoignages .temoignage-element {
    background-color: transparent;
}

.sectiontemoignages.sectionlighter .temoignage-element {
    background-color: var(--clr-100);
}

.sectiontemoignages .titre {
    margin-bottom: 1.5rem;
    & + p {
        margin-bottom: 1.5rem;
        line-height: 1.5;
        font-weight: 300;
    }
}

.sectioncta {
    border-radius: var(--br);
    overflow: hidden;
    & .titre, & p {
        margin-bottom: 1.5rem;
    }
    & p {
        font-weight: 300;
        text-wrap: balance;
        width: 60ch;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.5;
    }
}

footer {
    margin-top: 4rem;
    color: var(--clr-100);
    background-image: url(/images/texture.jpg);
    background-size: cover;
    background-position: center;
    padding: 3.5rem 0px 1.5rem;
    position: relative;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: var(--clr-900);
        opacity: 0.4;
    }
    & .wrap {
        position: relative;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: start;
    }
}

.contact-infos {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: start;
    & img {
        width: 26rem;
    }
    & hr {
        width: 1px;
        border: 0;
        background-color: var(--clr-500);
        height: 100%;
    }
    & h3 {
        text-transform: uppercase;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
    }
    & p {
        font-size: 1rem;
        margin-bottom: 0.75rem;
        font-weight: 300;
    }
    & a {
        text-decoration: none;
        &:hover {
            color: var(--clr-accent);
        }
    }
}

.nav--footer {
    width: calc(100% - 45rem);
    & .bouton {
        margin-left: auto;
        margin-top: 1rem;
    }
    & .socials {
        margin-top: 3rem;
        display: flex;
        align-items: center;
        justify-content: end;
        & a {
            color: var(--clr-100);
            border-color: var(--clr-100);
        }
    }
}

.nav--footer ul {
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2.5rem;
    & a {
        max-width: 6.875rem;
        display: block;
        margin-left: auto;
        text-decoration: none;
        &:hover {
            color: var(--clr-accent);
        }
    }
}

.nav--footer+hr {
    width: 100%;
    border: 0;
    height: 1px;
    background-color: var(--clr-500);
    margin: 1rem 0;
}

.innerfooter {
    font-weight: 300;
    font-size: .75rem;
    opacity: 0.8;
    & a {
        text-decoration: none;
    }
    & img {
        filter: invert(1);
    }
}

.rscircle {
    border-color: var(--clr-300);
}

.rsiconinner {
    background-color: var(--clr-300);
}

.rsiconinner > * {
    color: var(--clr-700);
    opacity: 1;
    &:hover {
        color: var(--clr-accent);
    }
}

.rsiconinner:hover > * {
    color: var(--clr-accent);
}

.currentrs .rsiconinner {
    background-color: var(--clr-accent);
    &>* {
        color: var(--clr-100);
    }
}

.rslist li {
    color: var(--clr-700);
    opacity: 1;
}

.rslist li:hover {
    color: var(--clr-900);
}

.rslist li.currentrs {
    color: var(--clr-accent);
}

.boutons.tac {
    justify-content: center;
}

.faqaccordeon .accordeontrigger {
    border-bottom: 0px;
    background-color: var(--clr-300);
    border-radius: var(--br);
    margin-top: 1rem;
}

.faqaccordeon .accordeoncontent {
    border-bottom: 0px;
    padding-bottom: 0;
    line-height: 1.5;
}

.faqaccordeon .accordeontrigger:hover svg, .faqaccordeon .accordeontrigger.open svg {
    filter: none;
    color: var(--clr-accent);
}

.cbgelement input + label {
    border-radius: var(--br);
    padding: 0.75rem .625rem .75rem .75rem;
}

input:not([type='checkbox']):not([type='radio']):not([type='submit']), textarea, .selectelement select {
    background-color: transparent;
}

.sideaccordeon.altsa {
    border-radius: var(--br);
}

.ctamt {
    margin-top: 4rem;
}

.temoignages-list .temoignage-element {
    background-color: var(--clr-100);
}

.contactmap {
    border-radius: var(--br);
    overflow: hidden;
    position: relative;
    min-height: 24rem;
    filter: grayscale(1);
    & iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 500%;
        height: 500%;
        translate: -50% -50%;
    }
}

.contactintro form {
    margin-top: 0;
}

.bouton-gal-icon {
    display: none !important;
}

.calccta, .fichefixed, .accordeontrigger, .propriete__tag, .tabslabel li, .fichecarte, .fichefinance {
    border-radius: var(--br) !important;
}

.accordeontrigger {
    margin-bottom: -2px;
}

.contactintro .bouton {
    margin-bottom: .75rem;
    &+.bouton {
        margin-bottom: 1.5em;
    }
}

 /*1500*/

@media screen and (max-width: 93.75rem) {
    .nav--util {
        gap: 1rem;
        & a:not(.bouton) {
            font-size: .85rem;
        }
        &:last-child {
            & .bouton+a:not(.bouton) {
                margin-left: 0;
            }
        }
    }
    .bouton {
        font-size: .85rem;
        padding: 0.9rem 1.325rem;
    }
    .inner-nav .bouton {
        margin-left: auto;
        margin-right: auto;
    }
    .hero {
        & h1 img {
            width: 30.5rem;
        }
    }
}

 /*1300*/

@media screen and (max-width: 81.25rem) {
    .nav--util .nav__link {
        display: none;
    }
    .header--primary {
        --logow: 14rem;
        & .wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            & .header__logo {
                margin-right: auto;
            }
        }
    }
    .nav--primary {
        & .sm-only {
            display: block;
        }
    }
    .wrap {
        width: 100%;
    }
    .hero {
        & .heroinner {
            width: 90%;
        }
    }
    .hero-proprietes {
        width: 35rem;
    }
    .avantagesinner {
        gap: 3rem;
    }
    .avantagecard {
        &:nth-child(2)::after, &:nth-child(3):not(:last-child)::after {
            left: -1.5rem;
            width: calc(100% + 3rem);
        }
    }
    .sectionabout .txt {
        padding: 3rem 1.5rem;
    }
    .nav--footer ul {
        display: none;
    }
    .avantagecard .lst .clraccent {
        color: var(--clr-900) !important;
    }
    .nav--primary {
        & .nav__link, & .link--lang {
            font-size: 1.25rem;
            margin: 0.5rem 0;
        }
    }
}

 /*1024*/

@media screen and (max-width: 64rem) {
    .bouton {
        font-size: .8rem;
        padding: 0.8rem 1.125rem;
    }
    .hero {
        & .heroinner {
            width: 100%;
        }
        & h1 img {
            width: 25rem;
        }
        & p:not(.slogan) {
            font-size: 1rem;
            max-width: 90%;
        }
    }
    .slogan {
        font-size: 2.25rem;
    }
    .hero-proprietes {
        width: 30rem;
        grid-template-columns: 1fr 1fr;
    }
    .titre {
        font-size: 1.5rem;
        &.titre--small {
            font-size: 1.25rem;
        }
        &.titre--big {
            font-size: 1.75rem;
        }
    }
    .avantagecard {
        &:nth-child(2)::after, &:nth-child(3):not(:last-child)::after {
            display: none;
        }
    }
    .contact-infos {
        & img {
            width: 20rem;
        }
        & hr {
            display: none;
        }
        & p {
            font-size: .9rem;
        }
    }
    .nav--footer {
        width: calc(100% - 35rem);
    }
    .contact-cta .wrap {
        flex-wrap: wrap;
        gap: 0rem;
        & h2 {
            width: 100%;
        }
        & p {
            width: calc(100% - 15rem);
        }
    }
}

 /*856*/

@media screen and (max-width: 53.5rem) {
    .header--primary {
        --logow: 12rem;
    }
    .bouton {
        font-size: .75rem;
        padding: 0.8rem 1rem;
    }
    .nav--util:last-child {
        gap: .5rem;
    }
    .contact-infos {
        & img {
            width: 16rem;
        }
    }
    .nav--footer {
        width: calc(100% - 31rem);
    }
    .avantagecard {
        padding: 0.5rem 0px .5rem 0;
        & p {
            margin-bottom: 0 !important;
        }
    }
    .avantagecard .lst {
        width: 2rem;
        flex-shrink: 0;
    }
}

 /*750*/

@media screen and (max-width: 46.875rem) {
    .nav--footer {
        width: 100%;
    }
    .contact-infos {
        flex-wrap: wrap;
    }
    .nav--primary {
        --pad: 1.5rem;
        translate: -150% 0;
        & .inner-nav {
            width: 100%;
        }
    }
    .nav--util:last-child {
        display: none;
    }
    .header--primary {
        --logow: 10rem;
        padding: 1rem 0;
        &.isScrolled {
            padding: .5rem 0;
        }
        & .header__logo {
            margin-right: 0 !important;
        }
    }
    .wrap.wide {
        max-width: calc(100% - 2rem);
    }
    .slogan {
        font-size: 1.75rem;
    }
    .hero {
        & p:not(.slogan) {
            font-size: .9rem;
            max-width: 100%;
        }
    }
    .hero-proprietes {
        display: none;
    }
    .sectionabout .txt {
        padding: 1.5rem .5rem;
    }
    .vendre-cta {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }
    .sectionproprietes .tac {
        text-align: left;
    }
    .proprieteshomewrapper>.proprieteshome {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        width: 100%;
    }
    .propriete__prix {
        font-size: 1.25rem;
    }
    .propriete__adresse, .propriete__ville {
        font-size: .8rem;
    }
    .propriete__infos {
        padding: .5rem 0 0.5rem;
    }
    .bouton {
        &.bouton--control {
            width: 3rem;
        }
    }
    .contact-cta .wrap {
        & p {
            width: 100%;
        }
    }
    .nav--footer {
        & .bouton {
            margin-left: 0;
        }
    }
    .rscontent h3::before {
        filter: none;
    }
    .titresm, .blogpost h2 {
        font-size: 1rem;
    }
    .header--primary {
        &:not(.isHome) {
            margin-bottom: 2rem;
        }
    }
}