/* Personnalisation des styles */
::selection {
    background-color: var(--clr-accent);
    color: var(--clr-100);
}

.accent-circle {
    color: var(--clr-accent);
    position: relative;
    &::after {
        content: "";
        width: 17.5rem;
        aspect-ratio: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        border-radius: 50%;
        border: 1px solid var(--clr-accent);
        z-index: -1;
    }
    &.alone {
        font-family: var(--ff);
        font-weight: 500;
        font-size: 8rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
        translate: 0 -50%;
        margin-bottom: -2rem;
        z-index: -1;
    }
}

.titre, .sectioncontent .titre {
    font-family: var(--ff-alt);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 3rem;
    display: block;
    &.titre-hero {
        font-size: 11rem;
    }
    &.titre-bigger {
        font-size: 7.5rem;
    }
    &.titre-smaller {
        font-size: 2.75rem;
        margin-bottom: 1.5rem;
    }
    &.titre-smallest {
        font-size: 2rem;
    }
    &.light, & .light {
        font-weight: 300;
    }
    &.bold, & .bold {
        font-weight: 500;
    }
    &:has(+.soustitre-alt) {
        margin-bottom: .5rem;
    }
    & .titre {
        margin-bottom: 0;
    }
    &:has( .accent-circle.alone) {
        position: relative;
        z-index: 4;
    }
    & svg {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5rem;
        width: 4rem;
    }
}

.titreline {
    width: 100%;
    text-align: center;
    position: relative;
    &::after {
        content: "";
        width: calc(50% - 10rem);
        height: 1px;
        background-color: var(--clr-text);
        position: absolute;
        right: 0;
        top: 50%;
    }
}

.titrelineb {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    align-items: center;
    &::before {
        content: "";
        width: auto;
        height: 1px;
        background-color: currentColor;
        display: block;
    }
}

.soustitre {
    display: block;
    font-family: var(--ff-alt-2);
    font-weight: 500;
    font-size: 1.5rem;
    text-transform: none;
    line-height: 1;
    &.smaller {
        font-size: 1.25rem;
    }
}

.soustitre-alt {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-family: var(--ff-alt-2);
    font-size: 1.25rem;
    &::before {
        content: "";
        width: 3rem;
        height: 1px;
        background-color: var(--clr-accent);
    }
}

.titre.titre-hero .soustitre {
    font-size: 5rem;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(var(--clr-100-rgb), .85);
    & .accent-circle {
        text-shadow: none;
    }
}

.titre.titre-bigger .soustitre {
    font-size: 3rem;
}

.bouton {
    --bg: var(--clr-text);
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: max-content;
    border: 1px solid var(--bg);
    background-color: var(--bg);
    color: var(--clr-100);
    text-decoration: none;
    font-family: var(--ff);
    font-weight: 400;
    letter-spacing: 1.5px;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 1.25rem 2.5rem;
    white-space: nowrap;
    transition: all .5s;
    &.bouton--control {
        padding: 0.75rem 1.5rem;
    }
    &:hover {
        --bg: var(--clr-700);
    }
    &.bigger {
        padding: 1.125rem 1.5rem 1.125rem 2.25rem;
        gap: 1rem;
        font-size: 1.125rem;
        & svg {
            max-width: 1.25rem;
            max-height: 1.5rem;
        }
    }
    &.invert {
        --bg: var(--clr-100);
        color: var(--clr-700);
        &:hover {
            --bg: var(--clr-300);
        }
        & svg {
            color: var(--clr-accent);
        }
    }
    &.accent {
        --bg: var(--clr-accent);
        color: var(--clr-100);
        &:hover {
            --bg: var(--clr-700);
        }
    }
    &.accent-bordered {
        --bg: transparent;
        border-color: var(--clr-accent);
        color: var(--clr-accent);
        &:hover {
            --bg: var(--clr-accent);
            border-color: var(--bg);
            color: var(--clr-100);
        }
    }
    &.secondary {
        border-width: 0 0 1px 0;
        border-color: currentColor;
        background-color: transparent;
        padding-left: 0;
        padding-right: 0;
        color: currentColor;
    }
    &.bouton-top {
        aspect-ratio: 1;
    }
    & svg {
        max-width: 1rem;
        max-height: 1.25rem;
        order: 2;
    }
}

header {
    position: relative;
    padding: 1.5rem 2rem;
    z-index: 99;
    & nav {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 4rem;
    }
    & ul {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 2rem;
        list-style-type: none;
        padding-left: 0;
        &:first-of-type {
            color: var(--clr-100);
            & a:hover {
                color: var(--clr-text);
            }
        }
    }
    & .logo {
        display: block;
        width: 12.5rem;
    }
    & .bouton {
        margin-left: auto;
    }
}

.nav__link, .link--lang {
    line-height: 1;
    font-family: var(--ff-alt);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.9rem;
    letter-spacing: 1px;
    transition: color .5s;
    &:hover {
        color: var(--clr-accent);
    }
}

.nothome + header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    translate: 0 -150%;
    transition: translate .75s, opacity .4s;
}

.nothome + header.fixed.show {
    opacity: 1;
    pointer-events: all;
    translate: 0 0;
    transition: translate .75s, opacity 0s;
}

header.fixed {
    padding: 0;
    padding-top: .5rem;
    position: sticky;
    top: 0;
    &>div {
        background-color: var(--clr-300);
        padding: 1rem 2.5rem;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        position: relative;
    }
    & nav {
        display: none;
        position: absolute;
        bottom: 0;
        right: 0;
        translate: 0 100%;
        background-color: var(--clr-accent);
        width: 100%;
        text-align: center;
        & ul {
            flex-direction: column;
            justify-content: end;
            align-items: center;
            gap: 0;
            padding: 1rem 0 1rem 2rem;
        }
        & li {
            width: 100%;
        }
        & .nav__link, & .link--lang {
            color: var(--clr-100);
            display: block;
            padding: 0.5rem 1.5rem;
            max-width: 50%;
            font-size: 2rem;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

.menu-icon {
    display: block;
    -webkit-appearance: none;
    appearance: none;
    width: 2.5rem;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    margin-left: auto;
}

.hero {
    --navulw: 0;
    position: relative;
    height: 0;
    margin-bottom: 3rem;
    &::after {
        content: "";
        width: calc(2rem + var(--navulw) + 2rem);
        background-color: var(--clr-accent);
        position: absolute;
        bottom: 0;
        height: 2000vh;
        left: 0;
        z-index: -1;
        transition: all .5s .1s;
    }
}

.hero-wrap {
    padding-left: calc(5dvw + 1rem);
}

.hero-slider-container {
    overflow: hidden;
    width: 100%;
    &>.hero-slider {
        display: grid;
        width: calc((90dvw - 2rem) * 2 + 1rem);
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

.hero-slide {
    position: relative;
    height: 100dvh;
}

.hero-slide-inner, .hero-inner-content {
    width: 50%;
    position: absolute;
    right: 0;
    top: 40%;
    translate: 0 -50%;
    z-index: 2;
    color: var(--clr-100);
    padding-right: 2rem;
    & .soustitre {
        color: var(--clr-text);
    }
}

.hero-inner-content {
    padding-right: calc(5vw - 1rem + 2rem);
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slideopfix {
    background-color: var(--clr-100);
    & .hero-img {
        opacity: 0.95;
    }
}

.hero-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: calc((2rem + var(--navulw) + 2rem) - (5dvw + 1rem) + 2rem);
    padding-right: calc(5dvw + 1rem);
}

.hero-pager .bx-pager, .tem-pager .bx-pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    & a {
        display: block;
        width: 2.75rem;
        height: 3px;
        border-radius: 50vh;
        background-color: var(--clr-700);
        font-size: 0;
        transition: all .3s;
        &.active, &:hover {
            background-color: var(--clr-accent);
        }
        &.active {
            height: 8px;
        }
    }
}

.boutonscontrols--custom {
    display: flex;
    gap: 0;
    & .bouton--control {
        background-color: var(--clr-accent);
        color: var(--clr-100);
        border-radius: 0;
        width: 3.5rem;
        text-align: center;
        border: 0;
        & svg {
            width: 0.5rem;
        }
        &:hover {
            background-color: var(--clr-text);
        }
    }
}

footer {
    background-color: var(--clr-100);
    &>.wrap {
        padding: 4rem 0;
        display: flex;
        justify-content: space-between;
        align-items: start;
    }
    & nav ul {
        list-style-type: none;
        & li {
            margin-bottom: 0.25rem;
        }
    }
    & .nav__link, & .link--lang {
        font-size: 1.5rem;
    }
    & .socials {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1.5rem;
        & a {
            width: 1.5rem;
            height: 1.5rem;
            color: var(--clr-accent);
            &:hover {
                color: var(--clr-text);
            }
        }
    }
}

.contact-infos-wrapper {
    display: flex;
    gap: 2rem;
    align-items: center;
    & .contact-infos-photo {
        border-radius: 50%;
        aspect-ratio: 1;
        object-fit: cover;
        width: 10.5rem;
    }
    & .contact-info {
        display: flex;
        gap: 1rem;
        align-items: start;
        text-decoration: none;
        font-size: 1.125rem;
        margin-bottom: 1rem;
        &:hover {
            color: var(--clr-accent);
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
    & svg {
        color: var(--clr-accent);
        width: 1rem;
        height: 1.75rem;
    }
}

.innerfooter {
    background-color: var(--clr-300);
    padding: 2rem 0;
    & .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    & a {
        color: var(--clr-accent);
        text-decoration: underline;
        &:hover {
            text-decoration: none;
        }
    }
}

.proprieteshome {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

div {
    & .propriete-item {
        background-color: var(--clr-100);
    }
    & .propriete__inner {
        color: var(--clr-text);
        margin-top: -3.5rem;
        position: relative;
        z-index: 5;
    }
    & .propriete__infos {
        max-width: 50%;
        background-color: var(--clr-100);
        padding: 1rem 0rem 0rem 1.5rem;
        font-size: 1.25rem;
    }
    & .propriete__prix {
        font-size: 1.125rem;
        font-weight: 500;
        margin-bottom: 1.5rem;
    }
    & .propriete__adresse {
        font-size: 1.125rem;
        font-weight: 500;
    }
    & .propriete__ville {
        font-size: .9rem;
        font-weight: 400;
        color: var(--clr-accent);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        & svg {
            width: 0.75rem;
        }
    }
    & .propriete__details {
        display: flex;
        align-items: center;
        text-align: center;
        opacity: 1;
        margin-top: 1.5rem;
        gap: 0;
        & li {
            display: flex;
            flex-direction: column;
            color: var(--clr-accent);
            font-size: 1.25rem;
            padding: 0rem 1rem;
            position: relative;
            &:first-child {
                padding-left: 0;
                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 1px;
                    height: 100%;
                    background-color: var(--clr-300);
                }
            }
            & span {
                order: -1;
                font-size: 1rem;
                text-transform: none;
                color: var(--clr-text);
                &::first-letter {
                    text-transform: uppercase;
                }
            }
        }
    }
    & a:hover .propriete__cta {
        color: var(--clr-text);
        right: 0.5rem;
    }
    & .propriete__cta {
        color: var(--clr-accent);
        width: 3.75rem;
        position: absolute;
        right: 1.5rem;
        top: 4.5rem;
        transition: all .4s;
    }
}

.propfilters:has(input[value='liste']:checked) ~ .propgrid .propriete-item .propriete__inner {
    margin-top: 1rem;
}

.sectionproprieteshome a.bouton {
    margin-left: auto;
    margin-right: auto;
}

.sectionabouthome {
    background-image: url(/images/aboutbg.webp);
    background-size: cover;
    background-position: center;
    padding-top: 10rem;
    padding-bottom: 10rem;
    &::before {
        padding-bottom: 30%; /* Minimum aspect ratio */
        content: '';
        float: left;
    }
    &::after {
        display: table;
        content: '';
        clear: both;
    }
}

.aboutcontent {
    padding-left: calc(40vw - 5vw - 1rem);
    & p {
        color: var(--clr-500);
        max-width: 80%;
        line-height: 1.5;
    }
    & .bouton {
        margin-top: 5rem;
    }
}

.titrewimg {
    display: flex;
    justify-content: space-between;
    align-items: start;
    & img, & svg {
        width: 7rem;
    }
}

.onesidewrap {
    width: calc(95vw - 1rem);
    margin-left: auto;
}

.villeshome {
    & .onesidewrap {
        display: grid;
        grid-template-columns: 4fr 6fr;
    }
}

.villes-slider-container {
    overflow: hidden;
    position: relative;
    & .villes-slider-inner {
        width: calc((.6 * (95vw - 1rem) - (5vw + 1rem)) * 2 + 1.5rem);
        & > .villes-slider {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            & > .ville-slide:not(:nth-child(1)):not(:nth-child(2)) {
                display: none;
            }
        }
    }
    & .boutonscontrols--custom {
        --top: 3rem;
        position: absolute;
        right: calc(5vw + 1rem);
        z-index: 99;
    }
}

.ville-slide {
    & img {
        margin-bottom: 3rem;
    }
    & div {
        max-width: calc(100% - 8rem);
        transition: opacity 1s .2s;
    }
    &:not(.active-slide) div {
        opacity: 0;
    }
}

.wide.wpadding {
    padding-left: 2rem;
    padding-right: 2rem;
}

.avantagesinner, .avantagesinner-alt {
    gap: 1.5rem;
    margin-top: 5rem;
    & + .bouton {
        margin-left: auto;
        margin-right: auto;
        margin-top: 5rem;
    }
    & hr {
        width: 9rem;
        height: 1px;
        background: var(--clr-100);
        border: 0;
        margin: 2rem auto;
    }
}

.sectionlight .avantagecard {
    background-color: var(--clr-accent);
    color: var(--clr-100);
    text-align: center;
    padding: 5rem 2.5rem;
    line-height: 1.5;
    & .img {
        max-width: 5rem;
        max-height: 5rem;
        position: relative;
        right: 0;
        top: 0;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
    }
    & p:last-child {
        margin-bottom: 0;
    }
}

.avcols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    & .avcol {
        background-color: var(--clr-text);
        color: var(--clr-100);
        padding-bottom: 3rem;
        &.vidcol {
            border-radius: .5rem;
            padding-bottom: 0;
            overflow: hidden;
            padding-top: 177%;
            position: relative;
        }
        & iframe {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
        }
        & .avcolwrap {
            display: block;
            width: calc(100% - 4rem);
            margin-left: auto;
            margin-right: auto;
        }
        & ul {
            list-style-type: none;
            padding-left: 0;
            margin-bottom: 3rem !important;
            &:not(.avcolwrap) li {
                border-bottom: 1px solid rgba(var(--clr-500-rgb), .5);
                padding: .75rem 0;
                margin-bottom: 0;
            }
        }
        & li, & li span {
            display: flex !important;
            justify-content: start;
            align-items: center;
            gap: 0.75rem;
            & svg {
                width: .75rem;
            }
        }
        & .titre {
            width: 100%;
            text-align: center;
            padding: 1rem 2rem;
            background-color: var(--clr-accent);
            margin-bottom: 2.5rem;
        }
        &:last-child .titre {
            background-color: var(--clr-300);
            color: var(--clr-text);
        }
        & .bouton {
            margin-left: auto;
            margin-right: auto;
        }
        & p {
            font-size: 1.125rem;
            font-weight: 500;
        }
    }
}

.sectiontemoignages {
    & .onesidewrap {
        display: grid;
        grid-template-columns: 4fr 6fr;
    }
    & .pager__wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: calc(5vw + 1rem);
    }
    & .temoignages-container {
        overflow: hidden;
        margin: 0;
        & .temoignages-slider-container {
            width: calc((.6 * (95vw - 1rem) - (5vw + 1rem)) * 2 + 1.5rem);
            & > .temoignages__slider {
                display: grid;
                gap: 1.5rem;
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
                & > .temoignage-element:not(:nth-child(1)):not(:nth-child(2)) {
                    display: none;
                }
            }
        }
    }
}

.temoignages-slider-container {
    margin-bottom: 2rem;
    & .temoignage-element {
        background-color: var(--clr-300);
        padding: 2.5rem;
        min-height: 28rem;
    }
}

.sectioncta.sectionreverse {
    background-image: url(/images/cta-bg.webp);
    background-size: cover;
    &>* {
        position: relative;
        z-index: 4;
        margin-left: auto;
        margin-right: auto;
        max-width: max-content;
    }
    & .bouton {
        margin-top: 2rem;
    }
    & .accent-circle {
        font-family: var(--ff);
        font-size: 70%;
        display: inline-block;
        vertical-align: middle;
    }
    & .titre-smaller {
        font-weight: 300;
    }
}

.w80 {
    width: 80%;
}

/*1488*/

@media screen and (max-width: 93rem) {
    header {
        & .logo {
            width: 11.5rem;
        }
    }
    .titre.titre-hero .soustitre {
        font-size: 4.25rem;
    }
    div {
        & .propriete__details {
            & li {
                & span {
                    font-size: .8rem;
                }
            }
        }
    }
    .nav__link, .link--lang {
        letter-spacing: 0.5px;
        font-size: 1.8rem;
    }
}

/*1280*/

@media screen and (max-width: 80rem) {
    .nav__link, .link--lang {
        font-size: 1.75rem;
    }
    header {
        & nav {
            gap: 2rem;
        }
        & ul {
            gap: 1.25rem;
        }
        & .logo {
            width: 10rem;
        }
    }
    .bouton {
        font-size: .9rem;
        padding: 0.75rem 1.25rem;
    }
    .hero {
        &::after {
            width: calc(1rem + var(--navulw) + 1rem);
        }
    }
    .hero-wrap {
        padding-left: calc(2.5dvw + 1rem);
    }
    .hero-slider-container {
        &>.hero-slider {
            display: grid;
            width: calc((95dvw - 2rem) * 2 + 1rem);
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
    }
    .wide.wpadding, header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .wrap {
        width: 100%;
        max-width: calc(95dvw - 2rem);
    }
    .onesidewrap {
        width: calc(97.5dvw - 1rem);
    }
    .villes-slider-container {
        & .villes-slider-inner {
            width: calc((.6 * (97.55vw - 1rem) - (2.5vw + 1rem)) * 2 + 1.5rem);
        }
    }
    .sectiontemoignages {
        & .pager__wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: calc(2.5vw + 1rem);
        }
        & .temoignages-container {
            & .temoignages-slider-container {
                width: calc((.6 * (97.55vw - 1rem) - (2.5vw + 1rem)) * 2 + 1.5rem);
            }
        }
    }
    .titre.titre-hero .soustitre {
        font-size: 3.5rem;
    }
    .titre, .sectioncontent .titre {
        &.titre-hero {
            font-size: 9rem;
        }
        &.titre-smaller {
            font-size: 2.5rem;
        }
    }
}

@media screen and (max-width: 80rem) and (min-width: 64rem) {
    .avcols {
        & .avcol {
            padding-bottom: 2rem;
            & .titre {
                margin-bottom: 1.5rem;
            }
            & .avcolwrap {
                width: calc(100% - 2.25rem);
            }
            & ul {
                margin-bottom: 1.5rem !important;
                &:not(.avcolwrap) li {
                    padding: 0.45rem 0;
                }
            }
        }
    }
    .sectioncontent .avcols li {
        margin-bottom: 0.325rem;
    }
    .sectioncontent .avcols p {
        margin-bottom: 1.25rem;
    }
}

/*1024*/

@media screen and (max-width: 64rem) {
    body {
        padding-top: 6rem;
    }
    header:not(.fixed) {
        display: none;
    }
    header.fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        padding-top: 0;
    }
    .hero {
        --navulw: 35vw !important;
    }
    .wrap.wide.wpadding {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .hero-wrap {
        padding-left: calc(2.5dvw + 1rem);
    }
    .avantagecard .img {
        padding: 0;
        top: 0em;
        right: 0rem;
    }
    .sectionlight .avantagecard {
        display: block;
        padding: 3.5rem 2.5rem;
    }
    .avcols {
        grid-template-columns: 1fr 1fr;
        & .avcol {
            &.vidcol {
                background-color: transparent;
                order: 3;
                grid-column: 1/3;
                padding-top: 0;
            }
            & iframe {
                display: block;
                max-width: 35rem;
                border-radius: .5rem;
                aspect-ratio: 9/16;
                translate: 0;
                top: 0;
                left: 0;
                position: relative;
                overflow: hidden;
                margin-left: auto;
                margin-right: auto;
            }
        }
    }
    .contact-infos-wrapper, .innerfooter {
        font-size: .9rem;
        & .contact-info {
            font-size: .9rem;
        }
    }
    footer {
        & .socials {
            flex-direction: column;
        }
    }
}

/*856*/

@media screen and (max-width: 53.5rem) {
    .wrap {
        width: 100%;
        max-width: calc(100% - 2rem);
    }
    .proprieteshome {
        gap: 1.5rem;
    }
    header.fixed {
        z-index: 99999;
        &>div {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }
    .hero-wrap {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .hero-slider-container {
        &>.hero-slider {
            display: grid;
            width: 100%;
            grid-template-columns: 1fr;
            gap: 1rem;
            &>.hero-slide:not(:first-child) {
                display: none;
            }
        }
    }
    .sectionabouthome {
        padding-top: 5rem;
        padding-bottom: 5rem;
        &::before {
            display: none;
        }
    }
    .villes-slider-container {
        & .villes-slider-inner {
            width: calc((.6 * (97.55vw - 1rem) - (2.5vw + 1rem)) * 2 + 1.5rem);
        }
    }
    .sectiontemoignages {
        & .pager__wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 1rem;
        }
        & .temoignages-container {
            & .temoignages-slider-container {
                width: 100%;
                & > .temoignages__slider {
                    grid-template-columns: 1fr !important;
                    padding-right: 1rem;
                }
            }
        }
        & .pager__wrapper {
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: flex-end;
        }
    }
    .villes-slider-container {
        & .boutonscontrols--custom {
            --top: 0;
            translate: 0 calc(-100% - 4rem);
            right: 2rem;
        }
        & .villes-slider-inner {
            width: 100%;
            & > .villes-slider {
                grid-template-columns: 1fr;
                padding-right: 1rem;
                & > .ville-slide:not(:first-child) {
                    display: none;
                }
            }
        }
    }
    .ville-slide {
        & div {
            max-width: 100%;
        }
    }
    .hero-tools {
        padding-right: 0;
    }
    div {
        & .propriete__infos {
            max-width: 70%;
        }
    }
}

/*750*/

@media screen and (max-width: 46.875rem) {
    .titre, .sectioncontent .titre {
        font-size: 3.5rem;
    }
    .hero {
        height: auto !important;
        margin-bottom: 1rem;
        &::after {
            width: 100%;
            height: 18rem;
            bottom: auto;
            top: 0;
            translate: 0 -50%;
        }
        & .bouton.invert {
            margin-left: auto;
            margin-right: auto;
            margin-top: 1rem;
            background-color: var(--clr-300);
        }
    }
    .hero-slide {
        display: flex;
        flex-direction: column;
    }
    .hero-slider-container {
        display: grid;
        grid-template-columns: 1fr;
    }
    .hero-slide-inner, .hero-inner-content {
        width: 100%;
        text-align: center;
        position: relative;
        color: var(--clr-accent);
        padding-bottom: 0;
        translate: 0;
        top: 0;
        padding-top: 1rem;
        padding-right: 0;
    }
    .hero-inner-content {
        order: 10;
    }
    .hero-img {
        height: auto;
        position: relative;
        order: -1;
    }
    .titre.titre-hero {
        margin-top: 0;
        margin-bottom: 0;
    }
    .titre.titre-hero .soustitre {
        font-size: 2.5rem;
    }
    .accent-circle {
        &::after {
            width: 10rem;
            opacity: 0.75;
        }
    }
    .hero-tools {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    footer {
        & nav {
            display: none;
        }
        & .socials {
            flex-direction: row;
            justify-content: center;
            width: 100%;
        }
        &>.wrap {
            flex-wrap: wrap;
            gap: 1.5rem;
        }
    }
    .contact-infos-wrapper {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .contact-infos-wrapper, .innerfooter {
        & .contact-info {
            font-size: .75rem;
            align-items: center;
        }
    }
    .innerfooter {
        padding: 2rem 0;
        font-size: .7rem;
    }
    .proprieteshome {
        gap: 1rem;
        grid-template-columns: 1fr;
    }
    .titrewimg {
        flex-direction: column;
    }
    .avcols {
        grid-template-columns: 1fr;
        & .avcol {
            &.vidcol {
                grid-column: auto;
            }
        }
    }
    .villeshome {
        & .onesidewrap {
            grid-template-columns: 1fr;
        }
    }
    .villes-slider {
        grid-template-columns: 1fr !important;
    }
    .onesidewrap {
        width: calc(100% - 1rem);
        margin-left: auto;
    }
    header.fixed {
        &>div {
            display: flex;
            gap: 1rem;
            justify-content: space-between;
        }
    }
    .bouton {
        padding: 0.75rem .75rem;
        gap: 0.5rem;
    }
    .titre, .sectioncontent .titre {
        &.titre-bigger {
            font-size: 6.5rem;
        }
    }
    .hero:not(.nothome), .hero-slide {
        height: auto !important;
    }
    .titre, .sectioncontent .titre {
        &.titre-hero {
            font-size: 7.5rem;
        }
    }
    .sectionproprieteshome {
        padding-top: 2rem !important;
    }
    div {
        & .propriete__infos {
            max-width: 70%;
            padding: 0.75rem 0rem 0rem .5rem;
        }
        & .propriete__inner {
            margin-top: -2.25rem;
        }
        & .propriete__cta {
            right: 1rem;
        }
    }
    .sectionpadding {
        &.sectionmorepadding {
            padding-bottom: 6rem;
        }
    }
    .titre, .sectioncontent .titre {
        &.titre-bigger {
            font-size: 5.5rem;
        }
    }
    .titre.titre-bigger .soustitre {
        font-size: 2rem;
    }
    .sectiontemoignages {
        & .onesidewrap {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
    }
    .aboutcontent {
        padding-left: 0;
        & p {
            max-width: 100%;
        }
    }
    .titrewimg {
        margin-bottom: 2rem;
    }
    .sectionabouthome {
        background-size: 130% auto;
        background-repeat: no-repeat;
        background-position: top -14vw left;
        padding-top: 83vw;
    }
    .nothome + header.fixed {
        opacity: 1;
        z-index: 999999;
        translate: 0 0;
        pointer-events: all;
    }
    .hero {
        &::after {
            display: none;
        }
    }
    .galslide img {
        border-radius: 0px !important;
    }
    .galpopup .boutonscontrols a {
        border-radius: 0;
        width: auto !important;
        padding: 0.5rem 2rem;
        aspect-ratio: auto;
    }
}
/* 400 */
@media screen and (max-width: 25rem) {
	header .bouton.invert {
        padding: 0.75rem .15rem 0.75rem 1rem;
    }
	.titre.titre-hero .soustitre {
        font-size: 2rem;
    }
}