:root {
    --image-size-small-screen: 15.625rem;
}

.v-card {
    width: 100%;
    display: flex;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    max-height: 28.125rem;
}

.v-card__img {
    object-fit: cover;
    object-position: center center;
    flex-shrink: 0;
    border-radius: 16px 0rem 0rem 16px;
    /* À adapter suivant si l'image est prioritaire ou pas (entièrement visible ou centrer) */
    max-width: 35%;
    /* sur la base de 1200x900 */
    aspect-ratio: 4 / 3;
}

.v-card__body {
    background-color: rgb(255, 255, 255);
    padding: 32px 40px;
    width: 100%;
    border-radius: 0rem 1rem 1rem 0rem;
}

.v-card__title {
    font-weight: 700;
    font-size: 28px;
    line-height: 112%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(5, 5, 5);
    margin-bottom: .25rem;
}

@media (max-width: 113.75rem) {
    .v-card__title {
        font-size: 26px;
    }
}

.v-card__desc {
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgb(65, 65, 65);
    margin-bottom: 1.25rem;
}

/* @media (max-width: 113.75rem) {
    .v-card__desc {
        font-size: .875rem;
    }
} */

.v-card__specs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: .5rem;
}

.v-card__spec {
    display: flex;
    align-items: center;
    gap: .5rem;

    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0.03em;
    text-align: center;
    color: #050505;
    text-transform: capitalize;
}

.v-card__spec:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    /* white-space: nowrap; */
    width: auto;
}

.v-card__spec:first-of-type>svg {
    flex-shrink: 0;
}

.v-card__note {
    font-weight: 300;
    font-size: .75rem;
    line-height: .625rem;
    letter-spacing: 0.03em;
    color: rgb(65, 65, 65);
    margin: 0rem 0rem 1.5rem;
}

.v-card__price {

    font-weight: 700;
    font-size: 1.5rem;
    line-height: 112%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(5, 5, 5);
    margin: 0rem 0rem .5rem;
}

.v-card__badge {

    font-weight: 400;
    font-size: .75rem;
    line-height: 100%;
    letter-spacing: 0.03em;
    color: rgb(5, 5, 5);
    margin: 0rem 0rem 1.5rem;
}

.v-card__badge>span {
    color: rgb(0, 150, 207);
}

.v-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: .0625rem solid rgb(5, 5, 5);
    padding-top: 1rem;
}

.v-card__agency {
    display: flex;
    align-items: center;
    gap: .8125rem;
}

.v-card__agency-logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
}

.v-card__agency-name {

    font-weight: 500;
    font-size: .875rem;
    color: rgb(5, 5, 5);
    margin: 0rem 0rem .5rem;
}

.v-card__loc-dist {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.v-card__loc-dist>span {

    font-weight: 400;
    font-size: .8125rem;
    line-height: 138%;
    letter-spacing: 0.04em;
    color: rgb(5, 5, 5);
}

.v-card__btns {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.v-card__btn {
    padding: 0rem;
    margin: 0rem;
    display: block;
    outline: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

@media (max-width: 748px) {
    .v-card__specs {
        flex-wrap: nowrap;
    }

    .v-card__img {
        object-fit: cover;
    }
}

@media (max-width: 68.75rem) {
    .v-card {
        max-height: 100%;
    }
}

@media (max-width: 48rem) {



    .v-card__spec {
        width: 35% !important;
    }

    .v-card {
        flex-direction: column;
        max-width: 28.125rem;
        width: 100%;
        margin: 0rem auto 1.875rem;
        position: relative;
    }

    .v-card__img {
        filter: opacity(0.7);
        max-width: 100%;
        border-radius: 1rem 1rem 0rem 0rem;
        height: var(--image-size-small-screen);
    }

    .v-card__body {
        border-radius: 0rem 0rem 1rem 1rem;
        padding: 1rem;
    }

    .v-card__title {
        font-size: .875rem;
    }

    .v-card__desc {
        font-weight: 400;
        font-size: .625rem;
        margin-bottom: 1rem;
    }

    .v-card__spec {
        flex-direction: column;
        font-size: .75rem;

        &>svg {
            width: 1rem;
            height: 1rem;
        }
    }

    .v-card__specs {
        justify-content: space-evenly;
    }

    .v-card__price_info {
        background-color: var(--color-bh-blue);
        position: absolute;
        bottom: calc(100% - var(--image-size-small-screen));
        right: 0;
        border-radius: 1.25rem 0rem 0rem;
        padding: .375rem 1rem .375rem 1.5rem;
        min-width: 7.5625rem;
        min-height: 2.625rem;
    }

    .v-card__price {
        font-size: .875rem;
        text-transform: uppercase;
        color: rgb(255, 255, 255);
        margin-bottom: .25rem;
    }

    .v-card__badge {
        font-weight: 400;
        font-size: .625rem;
        color: rgb(240, 240, 240);
        margin: 0;
    }

    .v-card__badge>span {
        color: rgb(255, 207, 50);
    }

    .v-card__note {
        text-align: center;
        font-size: .5rem;
        margin-bottom: 0;
    }

    .v-card__agency-name {
        font-size: .9375rem;
        color: rgb(255, 255, 255);
    }

    .v-card__footer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 1rem;
        align-items: flex-start;
    }

    .v-card__loc-dist>span {
        font-size: .8125rem;
        color: rgb(255, 255, 255);
    }

    .v-card__loc-dist>svg>g>path {
        fill: rgb(255, 255, 255);
    }

    .v-card__btn>svg>path {
        fill: rgb(255, 255, 255);
    }
}

.v-card__fav {
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}

.v-card__fav svg {
    transition: 0.3s;
}

.v-card__fav:hover svg {
    fill: rgb(5, 5, 5) !important;
}

button.v-card__fav {
    transition: 0.6s ease-in-out;
}