:root {
    --color-bg-vr: #fafafa; /* Fond très clair comme le reste du site */
    --color-text-main: #1a1a1a;
    --color-text-light: #666666;
    --color-brand: #ea5b10;
    --color-border: #eaeaea;
    --font-main: 'Arial', sans-serif;
}

.block-villes-region {
    width: 100%;
	background: #FFFFFF;
	padding: 80px;

}

.vr__container {
    max-width: 1280px;
    margin: 0 auto;
	display: flex;
flex-direction: column;
align-items: center;

gap: 80px;

}

/* --- HEADER --- */
.vr__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 12px;
    width: 1120px;
}

.vr__title {
width: 628px;
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 37px;
color: #111111;
    margin: 0;
}

.vr__counter {
    align-self: flex-end; /* Aligné à droite sur mobile sous le titre */
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 5px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 20px;
display: flex;
align-items: center;
color: #8A8A85;
}

.vr__counter strong {
    color: vrgba(17, 17, 17, 1);
    font-weight: 700;
}



/* --- GRILLE --- */
.vr__grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne sur Mobile */
    gap: 15px;
}

@media (min-width: 768px) {
    .vr__grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur Tablette */
    }
}

@media (min-width: 992px) {
    .vr__grid {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur Desktop */
        gap: 24px;    width: 1120px;
    }
}

/* --- CARTES (Pilules) --- */
.vr__card {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
gap: 14px;
background: #FFFFFF;
border: 1px solid #EAEAE5;
border-radius: 14px;

    text-decoration: none;
    transition: all 0.3s ease;
}

.vr__card-left {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 5px;
}

.vr__dot {
width: 9px;
height: 9px;
background: #EA5B0C;
border-radius: 3px;
}

.vr__card-title {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #111111;
}

.vr__card-icon {
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
@media (max-width: 50em) {
.vr__header{
	width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 0px;
gap: 10px;
height: auto;
}
.vr__title {
    width: 100%;
font-size: 24px;
line-height: 28px;
}
.block-villes-region{
padding: 60px 24px;

}
.vr__grid {

    width: 100%;
}
.vr__container {

    gap: 50px;
}
}