@charset "UTF-8";
@charset "UTF-8";


.hidden {
display: none !important;
} :root {
--primary: #2F3C50;
--secondary: #BA996F;
--accent: #EEEEEF;
--white: #FFFFFF;
--dark: #2A2A2A;
--text: #3a3a3a;
--text-light:#6b7280;
--radius: 8px;
--shadow: 0 2px 12px rgba(0,0,0,.10);
--shadow-md: 0 4px 24px rgba(0,0,0,.14);
--header-h: 56px;
--dpe-a: #008a45;
--dpe-b: #50b848;
--dpe-c: #c8d400;
--dpe-d: #ffd400;
--dpe-e: #f5a800;
--dpe-f: #eb6708;
--dpe-g: #d40e14;
--ges-a: #5C1668;
--ges-b: #7B2C8A;
--ges-c: #9A47A2;
--ges-d: #BC76BC;
--ges-e: #D4A6D4;
--ges-f: #E8CFEA;
--ges-g: #F7EEF8;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: "Poppins", sans-serif;
color: var(--text);
background: #f7f8fa;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
cursor: pointer;
font-family: inherit;
}
@keyframes skeleton-shimmer {
0% {
background-position: -400px 0;
}
100% {
background-position: 400px 0;
}
}
.via-hero__mosaic-cell {
background: linear-gradient(90deg, #e2e5e8 25%, #eef0f2 50%, #e2e5e8 75%);
background-size: 800px 100%;
animation: skeleton-shimmer 1.4s infinite linear;
}
.via-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: var(--header-h);
background: var(--primary);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.via-header__logo img {
height: 32px;
width: auto;
}
.via-header__logo--text {
color: #fff;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.03em;
white-space: nowrap;
}
.via-header__nav {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
margin: 0 16px;
overflow: hidden;
}
.via-header__sep {
color: rgba(255, 255, 255, 0.3);
font-size: 0.6rem;
flex-shrink: 0;
}
.via-header__back {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.85);
font-size: 0.82rem;
font-weight: 500;
padding: 6px 14px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.via-header__back:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.via-header__back i {
font-size: 0.75rem;
}
.via-header__back-text {
display: none;
}
@media (min-width: 500px) {
.via-header__back-text {
display: inline;
}
}
.via-header__tel {
display: flex;
align-items: center;
gap: 6px;
color: var(--secondary);
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
}
.via-header__tel i {
font-size: 0.8rem;
}
@media (max-width: 600px) {
.via-header__tel {
display: none;
}
}
.via-actions {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px 0;
flex-wrap: wrap;
}
.via-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--white);
border: 1.5px solid #dde0e4;
color: var(--text);
border-radius: 6px;
padding: 7px 14px;
font-size: 0.78rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
}
.via-action-btn:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.via-action-btn i {
font-size: 0.8rem;
color: var(--secondary);
}
.via-action-btn--tel {
background: var(--secondary);
color: #fff !important;
border-color: var(--secondary);
}
.via-action-btn--tel i {
color: #fff;
}
.via-action-btn--tel:hover {
background: #a8875d;
border-color: #a8875d;
}
.via-action-btn.is-revealed {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
}
.via-hero {
margin-top: var(--header-h);
position: relative;
}
.via-hero__grid {
display: grid;
grid-template-columns: 62% 38%;
gap: 3px;
height: 62vh;
min-height: 340px;
max-height: 600px;
}
@media (max-width: 768px) {
.via-hero__grid {
grid-template-columns: 1fr;
}
}
.via-hero__grid--single {
grid-template-columns: 1fr;
}
.via-hero__grid--single .via-hero__mosaic {
display: none !important;
}
.via-hero__grid--single .via-hero__main {
cursor: default;
}
.via-hero__main {
position: relative;
overflow: hidden;
cursor: pointer;
min-height: 0;
}
.via-hero__main img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.via-hero__main:hover img {
transform: scale(1.02);
}
.via-hero__mosaic {
display: grid;
gap: 3px;
overflow: hidden;
min-height: 0;
}
@media (max-width: 768px) {
.via-hero__mosaic {
display: none;
}
}
.via-hero__mosaic[data-count="0"] {
display: none;
}
.via-hero__mosaic[data-count="1"] {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.via-hero__mosaic[data-count="2"] {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.via-hero__mosaic[data-count="3"] {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.via-hero__mosaic[data-count="3"] .via-hero__mosaic-cell:first-child {
grid-row: 1/-1;
}
.via-hero__mosaic[data-count="4"] {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.via-hero__mosaic-cell {
position: relative;
overflow: hidden;
cursor: pointer;
opacity: 0.88;
transition: opacity 0.2s;
}
.via-hero__mosaic-cell img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.via-hero__mosaic-cell:hover {
opacity: 1;
}
.via-hero__mosaic-cell:hover img {
transform: scale(1.05);
}
.via-hero__mosaic-cell.active {
opacity: 1;
outline: 2px solid var(--secondary);
outline-offset: -2px;
}
.via-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(20, 30, 45, 0.82) 0%, rgba(20, 30, 45, 0.18) 55%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 28px 32px;
}
@media (max-width: 480px) {
.via-hero__overlay {
padding: 16px;
}
}
.via-hero__badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.via-hero h1 {
color: #fff;
font-size: clamp(1.2rem, 3vw, 1.75rem);
font-weight: 700;
line-height: 1.25;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
margin: 0;
}
.via-hero__accroche {
color: rgba(255, 255, 255, 0.85);
font-size: clamp(0.78rem, 1.6vw, 0.9rem);
font-style: italic;
font-weight: 500;
line-height: 1.5;
margin: 5px 0 0;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
border-left: 2px solid var(--secondary);
padding-left: 8px;
}
.via-hero__price {
color: var(--secondary);
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
font-weight: 700;
margin-top: 6px;
}
.via-hero__price small {
color: rgba(255, 255, 255, 0.6);
font-size: 0.75em;
font-weight: 400;
margin-left: 6px;
}
.via-hero__count {
position: absolute;
bottom: 16px;
right: 16px;
background: rgba(20, 30, 45, 0.65);
backdrop-filter: blur(4px);
color: #fff;
font-size: 0.78rem;
padding: 4px 10px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 5px;
}
.via-hero__vv {
position: absolute;
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(20, 30, 45, 0.78);
backdrop-filter: blur(6px);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
padding: 6px 14px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.25);
transition: background 0.2s;
text-decoration: none;
}
.via-hero__vv:hover {
background: var(--secondary);
}
.via-hero__vv i {
color: var(--secondary);
}
.via-hero__vv:hover i {
color: #fff;
}
.via-badge {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(6px);
color: #fff;
font-size: 0.72rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.via-badge--cat {
background: var(--secondary);
}
.via-badge--exclu {
background: #e53e3e;
}
.via-badge--ancien {
background: #16a34a;
}
.via-badge--location {
background: #2563eb;
}
.via-badge--loue {
background: #6b7280;
}
.via-badge--vendu {
background: #6b7280;
}
.via-badge--commerce, .via-badge--professionnel {
background: #0891b2;
}
.via-badge--programme, .via-badge--neuf {
background: var(--secondary);
}
.via-badge--etat {
background: var(--secondary);
color: #fff;
}
.via-badge--livr {
background: rgba(22, 163, 74, 0.85);
}
.via-badge--livr i {
margin-right: 4px;
}
.via-accroche {
font-size: 0.9rem;
font-weight: 600;
color: var(--primary);
line-height: 1.65;
margin-bottom: 14px;
font-style: italic;
padding-left: 12px;
border-left: 3px solid var(--secondary);
}
.via-etat-stamp {
position: absolute;
top: 20px;
left: 0;
z-index: 20;
display: flex;
align-items: stretch;
max-width: calc(100% - 20px);
border-radius: 0 5px 5px 0;
overflow: hidden;
box-shadow: 0 10px 26px rgba(20, 30, 45, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
pointer-events: none;
}
.via-etat-stamp__bar {
width: 5px;
flex-shrink: 0;
background: var(--primary);
}
.via-etat-stamp__label {
display: flex;
align-items: center;
padding: 11px 24px 11px 16px;
background: linear-gradient(100deg, #a8875d 0%, var(--secondary) 60%, #c9ac82 100%);
color: #fff;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
line-height: 1.3;
white-space: normal;
}
@media (max-width: 640px) {
.via-etat-stamp {
top: 14px;
}
.via-etat-stamp__label {
font-size: 0.68rem;
letter-spacing: 0.11em;
padding: 9px 18px 9px 14px;
}
}
.via-etat-mosaic-overlay {
position: absolute;
inset: 0;
background: rgba(20, 30, 45, 0.42);
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
pointer-events: none;
}
.via-etat-mosaic-overlay span {
background: var(--secondary);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 4px;
}
.via-mosaic__more {
position: absolute;
inset: 0;
background: rgba(20, 30, 45, 0.52);
backdrop-filter: blur(2px);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.82rem;
font-weight: 600;
gap: 5px;
pointer-events: none;
}
.via-mosaic__more i {
font-size: 1.5rem;
}
.via-mosaic__more.visible {
display: flex;
pointer-events: auto;
}
.via-body {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 380px;
gap: 28px;
padding: 28px 20px 60px;
}
@media (max-width: 900px) {
.via-body {
grid-template-columns: 1fr;
}
}
.via-main {
min-width: 0;
}
.via-main-card {
border-left: 4px solid var(--secondary);
box-shadow: var(--shadow-md);
}
.carac-nav {
margin-left: auto;
display: flex;
gap: 6px;
}
.carac-nav__btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: none;
background: var(--accent);
color: var(--primary);
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 0.78rem;
transition: background 0.2s, color 0.2s;
}
.carac-nav__btn:hover {
background: var(--secondary);
color: #fff;
}
.carac-nav__btn:hover i {
color: #fff;
}
.card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 20px;
}
.card__title {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-light);
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 2px solid var(--accent);
display: flex;
align-items: center;
gap: 8px;
}
.card__title i {
color: var(--secondary);
font-size: 0.9em;
}
.via-prix {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.via-prix__main {
font-size: 2rem;
font-weight: 700;
color: var(--primary);
}
.via-prix__m2 {
font-size: 0.9rem;
color: var(--text-light);
font-weight: 500;
}
.via-localisation {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.88rem;
color: var(--text-light);
margin-bottom: 4px;
}
.via-localisation i {
color: var(--secondary);
}
.carac-row {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
padding: 6px 2px 6px;
scrollbar-width: thin;
}
.carac-row::-webkit-scrollbar {
height: 5px;
}
.carac-row::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 3px;
}
.carac-item {
background: var(--white);
border: 1px solid var(--accent);
border-radius: 10px;
padding: 0 0 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
flex: 0 0 112px;
scroll-snap-align: start;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.carac-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
border-color: var(--secondary);
}
.carac-item i {
display: block;
width: 100%;
background: var(--primary);
color: var(--secondary);
padding: 12px 0;
margin-bottom: 8px;
font-size: 1.15rem;
}
.carac-item__val {
font-size: 0.88rem;
font-weight: 700;
color: var(--primary);
margin-top: 1px;
padding: 0 8px;
}
.carac-item__label {
font-size: 0.64rem;
color: var(--text-light);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0 8px;
}
.dpe-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 600px) {
.dpe-wrap {
grid-template-columns: 1fr;
}
}
.dpe-title {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-light);
font-weight: 600;
margin-bottom: 10px;
text-align: center;
}
.dpe-scale {
display: flex;
flex-direction: column;
gap: 2px;
width: 250px;
justify-self: center;
border: 1px solid var(--primary);
padding: 10px;
}
.dpe-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px 0 10px;
border-radius: 2px;
color: white;
font-size: 0.8rem;
font-weight: 700;
position: relative;
transition: all 0.2s;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.dpe-bar .dpe-letter {
font-size: 1rem;
}
.dpe-bar .dpe-val {
font-size: 0.65rem;
font-weight: 400;
opacity: 0.85;
}
.dpe-bar.is-active {
filter: brightness(1.05) drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
outline: 3px solid var(--primary);
outline-offset: 1px;
z-index: 1;
}
.dpe-bar.is-active .dpe-letter {
font-size: 1.25rem;
}
.dpe-bar.is-inactive {
opacity: 0.38;
}
.dpe-bar--A {
background: var(--dpe-a);
width: 42%;
}
.dpe-bar--B {
background: var(--dpe-b);
width: 52%;
}
.dpe-bar--C {
background: var(--dpe-c);
width: 62%;
color: #333;
}
.dpe-bar--D {
background: var(--dpe-d);
width: 72%;
color: #333;
}
.dpe-bar--E {
background: var(--dpe-e);
width: 82%;
}
.dpe-bar--F {
background: var(--dpe-f);
width: 92%;
}
.dpe-bar--G {
background: var(--dpe-g);
width: 100%;
}
.ges-bar--A {
background: var(--ges-a);
width: 42%;
}
.ges-bar--B {
background: var(--ges-b);
width: 52%;
}
.ges-bar--C {
background: var(--ges-c);
width: 62%;
}
.ges-bar--D {
background: var(--ges-d);
width: 72%;
color: #333;
}
.ges-bar--E {
background: var(--ges-e);
width: 82%;
color: #333;
}
.ges-bar--F {
background: var(--ges-f);
width: 92%;
color: #333;
}
.ges-bar--G {
background: var(--ges-g);
width: 100%;
color: #333;
}
.dpe-active-val {
margin-top: 8px;
font-size: 0.78rem;
font-weight: 600;
color: var(--primary);
text-align: center;
}
.dpe-active-val span {
color: var(--secondary);
}
.dpe-cout {
margin-top: 12px;
padding: 8px 12px;
background: var(--accent);
border-radius: 6px;
font-size: 0.78rem;
color: var(--text);
text-align: center;
}
.dpe-cout strong {
color: var(--primary);
}
.via-desc {
font-size: 0.95rem;
line-height: 1.8;
color: var(--text);
}
.via-desc.collapsed {
max-height: 320px;
overflow: hidden;
position: relative;
}
.via-desc.collapsed::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: linear-gradient(transparent, var(--white));
}
.btn-expand {
background: none;
border: none;
color: var(--secondary);
font-size: 0.82rem;
font-weight: 600;
padding: 6px 0;
display: flex;
align-items: center;
gap: 4px;
}
.btn-expand:hover {
color: var(--primary);
}
.via-vv {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--primary);
color: #fff;
padding: 10px 20px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
transition: background 0.2s;
}
.via-vv:hover {
background: var(--secondary);
}
.via-mentions-toggle {
width: 100%;
text-align: left;
background: none;
border: none;
font-size: 0.8rem;
color: var(--text-light);
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.via-mentions-toggle:hover {
color: var(--primary);
}
.via-mentions-body {
font-size: 0.78rem;
color: var(--text);
line-height: 1.7;
}
.via-mentions-body ul {
list-style: none;
padding: 0;
}
.via-mentions-body li {
padding: 5px 0;
border-bottom: 1px solid var(--accent);
display: flex;
justify-content: space-between;
gap: 12px;
}
.via-mentions-body li:last-child {
border: none;
}
.via-mentions-body strong {
color: var(--primary);
}
.similaires-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.bien-similaires-liste {
list-style: none;
padding: 0;
margin: 0;
}
.bien-similaires-liste li {
border-bottom: 1px solid var(--accent);
padding: 6px 0;
}
.bien-similaires-liste li:last-child {
border: none;
}
.bien-similaires-liste a {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.82rem;
font-weight: 500;
color: var(--primary);
text-decoration: none;
transition: color 0.2s;
}
.bien-similaires-liste a:hover {
color: var(--secondary);
}
.bien-similaires-liste img {
width: 52px;
height: 40px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.bien-similaires-liste .sim-prix {
color: var(--secondary);
font-weight: 700;
margin-left: 4px;
}
.similaire-card {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--accent);
transition: box-shadow 0.2s, transform 0.2s;
background: var(--white);
}
.similaire-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.similaire-card__img {
height: 110px;
overflow: hidden;
}
.similaire-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.similaire-card:hover .similaire-card__img img {
transform: scale(1.05);
}
.similaire-card__body {
padding: 10px;
}
.similaire-card__title {
font-size: 0.75rem;
font-weight: 600;
color: var(--primary);
line-height: 1.35;
}
.similaire-card__price {
font-size: 0.8rem;
color: var(--secondary);
font-weight: 700;
margin-top: 4px;
}
.via-sidebar > * {
margin-bottom: 20px;
}
@media (min-width: 900px) {
.via-sidebar {
position: sticky;
top: calc(var(--header-h) + 16px);
align-self: start;
}
}
#via-map {
height: 220px;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
z-index: 0;
}
.card__title {
position: relative;
}
.card__title .mini-map-sat-btn {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 1px solid var(--accent);
border-radius: 4px;
padding: 3px 7px;
font-size: 0.72rem;
color: var(--text-light);
transition: all 0.2s;
}
.card__title .mini-map-sat-btn:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.card__title .mini-map-sat-btn.is-active {
background: var(--secondary);
border-color: var(--secondary);
color: #fff;
}
.card__title .mini-map-sat-btn i {
font-size: 0.75rem;
color: var(--text-light) !important;
}
.card__title .mini-map-sat-btn.is-active i {
color: #fff !important;
}
.btn-google-maps {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 10px;
padding: 7px 12px;
border: 1px solid #dadce0;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 600;
color: var(--primary);
background: #fff;
transition: all 0.2s;
}
.btn-google-maps:hover {
background: #f8f8f8;
border-color: var(--secondary);
color: var(--secondary);
}
.btn-google-maps i {
color: #4285F4;
font-size: 0.85rem;
}
.sidebar-carac {
list-style: none;
padding: 0;
margin: 10px 0 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.sidebar-carac li {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.82rem;
color: var(--text);
padding: 4px 0;
border-bottom: 1px solid var(--accent);
}
.sidebar-carac li:last-child {
border: none;
}
.sidebar-carac li i {
color: var(--secondary);
width: 14px;
text-align: center;
flex-shrink: 0;
font-size: 0.82rem;
}
.agent-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.agent-card__header {
background: var(--primary);
padding: 16px 20px;
display: flex;
align-items: center;
gap: 14px;
}
.agent-card__photo {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--secondary);
flex-shrink: 0;
}
.agent-card__name {
color: #fff;
font-weight: 700;
font-size: 0.95rem;
}
.agent-card__role {
color: rgba(255, 255, 255, 0.7);
font-size: 0.75rem;
margin-top: 2px;
}
.agent-card__body {
padding: 16px 20px;
}
.agent-card__cta {
display: flex;
flex-direction: column;
gap: 8px;
}
.agent-card__autres {
padding: 12px 20px 16px;
border-top: 1px solid var(--accent);
}
.agent-card__autres-title {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-light);
font-weight: 600;
margin-bottom: 8px;
}
.agent-bien-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
border-bottom: 1px solid var(--accent);
font-size: 0.75rem;
color: var(--text);
}
.agent-bien-item:last-child {
border: none;
}
.agent-bien-item img {
width: 44px;
height: 34px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.card--identity .identity-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.card--identity .via-prix {
margin-bottom: 10px;
}
.card--identity .via-prix__main {
font-size: 1.35rem;
line-height: 1.25;
}
.card--identity .via-prix__m2 {
font-size: 0.78rem;
}
.card--identity .identity-dispo {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.8rem;
color: var(--text-light);
margin-bottom: 10px;
}
.card--identity .identity-dispo i {
color: var(--secondary);
}
.card--identity .identity-ref {
font-size: 0.68rem;
color: var(--text-light);
text-align: center;
margin-top: 10px;
}
.sidebar-ctas {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 10px;
}
.sidebar-ctas button {
width: 100%;
cursor: pointer;
}
.btn-tel {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--secondary);
color: #fff;
padding: 11px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.2s;
border: none;
text-decoration: none;
}
.btn-tel:hover {
background: #a8875d;
}
.btn-contact {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--primary);
color: #fff;
padding: 11px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.2s;
border: none;
}
.btn-contact:hover {
background: #1e2d3f;
}
.btn-cta-secondary {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
color: var(--primary);
padding: 9px 11px;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
border: 1.5px solid var(--accent);
transition: all 0.2s;
}
.btn-cta-secondary:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.cardA .fa-arrow-up-right-from-square, .cardB .fa-arrow-up-right-from-square, .cardC .fa-arrow-up-right-from-square {
font-size: 0.68em;
}
.cardA__title b, .cardA__title strong,
.cardB__title b, .cardB__title strong,
.cardC__title b, .cardC__title strong {
background: var(--primary);
color: #fff;
padding: 1px 8px;
border-radius: 4px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.cardA.is-dark .cardA__title b, .cardA.is-dark .cardA__title strong,
.cardB.is-dark .cardB__title b, .cardB.is-dark .cardB__title strong,
.cardC .cardC__title b, .cardC .cardC__title strong {
background: var(--secondary);
}
.cardC.is-accent .cardC__title b, .cardC.is-accent .cardC__title strong {
background: var(--primary);
}
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.no-js .reveal, .reveal.reveal--fallback {
opacity: 1;
transform: none;
}
.cardA {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 26px 24px 24px;
position: relative;
display: flex;
flex-direction: column;
border-top: 3px solid var(--secondary);
transition: box-shadow 0.2s, transform 0.2s;
}
.cardA:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.cardA.is-accent {
background: linear-gradient(135deg, #c7ab84 0%, var(--secondary) 45%, #a3805a 100%);
border-top-color: #a3805a;
color: #fff;
}
.cardA.is-accent .cardA__desc {
color: rgba(255, 255, 255, 0.85);
}
.cardA.is-accent .cardA__eyebrow {
color: rgba(255, 255, 255, 0.85);
}
.cardA.is-accent .cardA__title {
color: #fff;
}
.cardA.is-accent .cardA__stat {
background: rgba(255, 255, 255, 0.92);
}
.cardA.is-accent .cardA__stat-val {
color: var(--primary);
}
.cardA.is-accent .cardA__stat-label {
color: var(--text-light);
}
.cardA.is-accent .cardA__link {
color: rgba(255, 255, 255, 0.85);
}
.cardA.is-accent .cardA__link:hover {
color: #fff;
}
.cardA.is-dark {
background: var(--primary);
color: #fff;
border-top-color: var(--secondary);
}
.cardA.is-dark .cardA__desc {
color: rgba(255, 255, 255, 0.68);
}
.cardA.is-dark .cardA__eyebrow {
color: rgba(255, 255, 255, 0.55);
}
.cardA.is-dark .cardA__title {
color: #fff;
}
.cardA.is-dark .cardA__stat {
background: rgba(255, 255, 255, 0.07);
}
.cardA.is-dark .cardA__stat-val {
color: #fff;
}
.cardA.is-dark .cardA__stat-label {
color: rgba(255, 255, 255, 0.55);
}
.cardA.is-dark .cardA__link {
color: rgba(255, 255, 255, 0.6);
}
.cardA.is-dark .btnA {
background: var(--secondary);
}
.cardA.is-dark .btnA:hover {
background: #a8875d;
}
.cardA__icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
margin-bottom: 14px;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.cardA:hover .cardA__icon {
transform: translateY(-3px) rotate(-4deg);
}
.cardA.is-accent .cardA__icon {
background: rgba(255, 255, 255, 0.92);
color: var(--primary);
}
.cardA.is-dark .cardA__icon {
background: rgba(255, 255, 255, 0.12);
color: var(--secondary);
}
.cardA__eyebrow {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-light);
margin-bottom: 6px;
display: block;
}
.cardA__title {
font-size: 1rem;
font-weight: 700;
color: var(--primary);
margin: 0 0 8px;
line-height: 1.5;
}
.cardA__desc {
font-size: 0.8rem;
color: var(--text-light);
line-height: 1.65;
margin: 0 0 18px;
}
.cardA__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.cardA__body .cardA__desc:last-child {
margin-bottom: 16px;
flex-grow: 1;
}
.cardA__stats {
display: flex;
gap: 10px;
margin-top: 10px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.cardA__stat {
flex: 1;
min-width: 120px;
background: var(--accent);
border-radius: 8px;
padding: 10px 12px;
display: block;
text-decoration: none;
}
.cardA__stat-val {
font-size: 0.95rem;
font-weight: 700;
color: var(--primary);
display: flex;
align-items: center;
gap: 5px;
}
.cardA__stat-val .fa-star {
color: var(--secondary);
font-size: 0.68rem;
}
.cardA__stat-label {
font-size: 0.66rem;
color: var(--text-light);
margin-top: 2px;
display: flex;
align-items: center;
gap: 4px;
}
.cardA__stat--link {
transition: background 0.2s, transform 0.2s;
cursor: pointer;
}
.cardA__stat--link:hover {
background: var(--secondary);
transform: translateY(-1px);
}
.cardA__stat--link:hover .cardA__stat-val, .cardA__stat--link:hover .cardA__stat-label {
color: #fff;
}
.cardA__stat--link:hover .fa-star {
color: #fff;
}
.cardA__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.76rem;
font-weight: 600;
color: var(--text-light);
text-decoration: none;
margin-top: 10px;
justify-content: center;
}
.cardA__link:hover {
color: var(--secondary);
}
.cardA__cta {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.btnA {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--primary);
color: #fff;
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
padding: 12px 18px;
border-radius: 8px;
border: none;
text-decoration: none;
cursor: pointer;
transition: background 0.2s;
position: relative;
overflow: hidden;
z-index: 1;
}
.btnA:hover {
background: #1e2d3f;
}
.btnA.is-accent {
background: var(--secondary);
}
.btnA.is-accent:hover {
background: #a8875d;
}
.btnA::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.28), transparent);
transform: skewX(-20deg);
transition: left 0.55s ease;
}
.btnA:hover::after {
left: 130%;
}
.cardA.zone-central {
margin-bottom: 24px;
flex-direction: row;
align-items: center;
gap: 24px;
padding: 24px 28px;
}
.cardA.zone-central .cardA__icon {
align-self: flex-start;
margin-bottom: 0;
width: 60px;
height: 60px;
font-size: 1.3rem;
}
.cardA.zone-central .cardA__body {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
column-gap: 28px;
}
.cardA.zone-central .cardA__body > div:first-child {
flex: 1.3;
min-width: 220px;
}
.cardA.zone-central .cardA__eyebrow {
margin-bottom: 4px;
}
.cardA.zone-central .cardA__desc {
margin-bottom: 0;
}
.cardA.zone-central .cardA__stats {
flex: 1;
min-width: 220px;
margin-bottom: 0;
}
.cardA.zone-central .cardA__cta {
align-self: flex-end;
flex-shrink: 0;
}
@media (max-width: 680px) {
.cardA.zone-central {
flex-direction: column;
align-items: stretch;
gap: 16px;
padding: 22px 20px;
}
.cardA.zone-central .cardA__icon {
width: 44px;
height: 44px;
font-size: 1rem;
margin-bottom: 4px;
}
.cardA.zone-central .cardA__body {
flex-direction: column;
column-gap: 0;
}
.cardA.zone-central .cardA__body > div:first-child {
min-width: 0;
}
.cardA.zone-central .cardA__stats {
min-width: 0;
}
.cardA.zone-central .cardA__cta .btnA {
width: 100%;
}
}
.cardB {
background: var(--white);
border-radius: var(--radius);
border: 1px solid #e6e6e8;
padding: 28px 26px;
display: flex;
flex-direction: column;
transition: border-color 0.2s, box-shadow 0.2s;
}
.cardB:hover {
border-color: var(--secondary);
box-shadow: var(--shadow);
}
.cardB.is-accent {
background: linear-gradient(135deg, #c7ab84 0%, var(--secondary) 45%, #a3805a 100%);
border-color: #a3805a;
color: #fff;
}
.cardB.is-accent .cardB__desc {
color: rgba(255, 255, 255, 0.85);
}
.cardB.is-accent .cardB__eyebrow {
color: rgba(255, 255, 255, 0.9);
}
.cardB.is-accent .cardB__title {
color: #fff;
}
.cardB.is-accent .cardB__divider {
background: rgba(255, 255, 255, 0.3);
}
.cardB.is-accent .cardB__trust-item {
background: rgba(255, 255, 255, 0.94);
}
.cardB.is-accent .cardB__trust-item i {
color: var(--secondary);
}
.cardB.is-accent .cardB__trust-num {
color: var(--primary);
}
.cardB.is-accent .cardB__trust-txt {
color: var(--text-light);
}
.cardB.is-accent .cardB__points li {
color: rgba(255, 255, 255, 0.92);
}
.cardB.is-accent .cardB__points i {
color: #fff;
}
.cardB.is-accent .note {
color: rgba(255, 255, 255, 0.7);
}
.cardB.is-accent:hover {
border-color: #a3805a;
}
.cardB.is-dark {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.cardB.is-dark .cardB__desc {
color: rgba(255, 255, 255, 0.65);
}
.cardB.is-dark .cardB__eyebrow {
color: var(--secondary);
}
.cardB.is-dark .cardB__title {
color: #fff;
}
.cardB.is-dark .cardB__divider {
background: rgba(255, 255, 255, 0.1);
}
.cardB.is-dark .cardB__trust-item {
background: rgba(255, 255, 255, 0.07);
}
.cardB.is-dark .cardB__trust-num {
color: #fff;
}
.cardB.is-dark .cardB__trust-txt {
color: rgba(255, 255, 255, 0.55);
}
.cardB.is-dark .cardB__points li {
color: rgba(255, 255, 255, 0.85);
}
.cardB.is-dark .linkB {
color: var(--secondary);
}
.cardB.is-dark .note {
color: rgba(255, 255, 255, 0.45);
}
.cardB.is-dark:hover {
border-color: var(--secondary);
}
.cardB__body {
flex: 1;
min-width: 0;
}
.cardB__eyebrow {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--secondary);
margin-bottom: 14px;
}
.cardB__eyebrow i {
font-size: 0.78rem;
}
.cardB__title {
font-size: 1.05rem;
font-weight: 700;
color: var(--primary);
margin: 0 0 10px;
line-height: 1.5;
}
.cardB__desc {
font-size: 0.8rem;
color: var(--text-light);
line-height: 1.7;
margin: 0 0 18px;
}
.cardB__divider {
height: 1px;
background: var(--accent);
margin: 0 0 16px;
}
.cardB__trust {
display: flex;
gap: 12px;
margin-bottom: 0;
flex-wrap: wrap;
}
.cardB__trust-item {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
background: var(--accent);
border-radius: 8px;
padding: 8px 14px;
}
.cardB__trust-item i {
color: var(--secondary);
font-size: 0.95rem;
}
.cardB__trust-num {
font-size: 0.92rem;
font-weight: 700;
color: var(--primary);
line-height: 1.1;
}
.cardB__trust-txt {
font-size: 0.68rem;
color: var(--text-light);
display: flex;
align-items: center;
gap: 4px;
}
.cardB__trust-item--link:hover .cardB__trust-num {
color: var(--secondary);
}
.cardB.is-dark .cardB__trust-item--link:hover .cardB__trust-num {
color: #fff;
}
.cardB__points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.cardB__points li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.78rem;
color: var(--text);
line-height: 1.5;
}
.cardB__points i {
color: var(--secondary);
font-size: 0.8rem;
margin-top: 2px;
flex-shrink: 0;
}
.cardB__cta {
display: flex;
flex-direction: column;
}
.linkB {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.84rem;
font-weight: 700;
color: var(--primary);
text-decoration: none;
padding-top: 4px;
}
.linkB i {
font-size: 0.72rem;
transition: transform 0.2s;
}
.linkB:hover i {
transform: translateX(3px);
}
.note {
font-size: 0.66rem;
color: var(--text-light);
margin-top: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.cardB.zone-central {
margin-bottom: 24px;
flex-direction: row;
align-items: center;
gap: 30px;
padding: 26px 30px;
}
.cardB.zone-central .cardB__body {
flex: 1.5;
}
.cardB.zone-central .cardB__desc {
margin-bottom: 0;
}
.cardB.zone-central .cardB__divider {
display: none;
}
.cardB.zone-central .cardB__trust, .cardB.zone-central .cardB__points {
margin-top: 14px;
}
.cardB.zone-central .cardB__cta {
flex: 1;
min-width: 200px;
flex-shrink: 0;
padding-left: 30px;
border-left: 1px solid var(--accent);
}
.cardB.zone-central.is-dark .cardB__cta {
border-left-color: rgba(255, 255, 255, 0.15);
}
@media (max-width: 680px) {
.cardB.zone-central {
flex-direction: column;
align-items: stretch;
gap: 16px;
padding: 22px 20px;
}
.cardB.zone-central .cardB__cta {
border-left: none;
padding-left: 0;
min-width: 0;
border-top: 1px solid var(--accent);
padding-top: 16px;
}
.cardB.zone-central.is-dark .cardB__cta {
border-top-color: rgba(255, 255, 255, 0.15);
}
}
.cardC {
position: relative;
border-radius: var(--radius);
overflow: hidden;
min-height: 340px;
display: flex;
flex-direction: column;
justify-content: flex-end;
box-shadow: var(--shadow-md);
color: #fff;
}
.cardC:hover .cardC__bg {
transform: scale(1.09);
}
.cardC__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.cardC__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 20, 28, 0.3) 0%, rgba(15, 20, 28, 0.4) 45%, rgba(11, 15, 21, 0.9) 100%), rgba(18, 24, 33, 0.42);
}
.cardC__content {
position: relative;
z-index: 2;
padding: 28px 24px 24px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.cardC__eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--secondary);
background: rgba(10, 14, 20, 0.55);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 5px 11px 5px 9px;
border-radius: 20px;
margin-bottom: 12px;
}
.cardC__title {
font-size: 1.12rem;
font-weight: 700;
margin: 0 0 8px;
line-height: 1.45;
color: #fff;
}
.cardC__desc {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.88);
line-height: 1.6;
margin: 0 0 16px;
}
.cardC__stats {
display: flex;
gap: 10px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.cardC__stat {
flex: 1;
min-width: 110px;
background: rgba(10, 14, 20, 0.5);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(6px);
border-radius: 8px;
padding: 10px 12px;
display: block;
text-decoration: none;
}
.cardC__stat-val {
font-size: 0.95rem;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
gap: 5px;
}
.cardC__stat-val .fa-star {
color: var(--secondary);
font-size: 0.68rem;
}
.cardC__stat-label {
font-size: 0.66rem;
color: rgba(255, 255, 255, 0.72);
margin-top: 2px;
display: flex;
align-items: center;
gap: 4px;
}
.cardC__stat--link {
transition: background 0.2s, transform 0.2s;
cursor: pointer;
}
.cardC__stat--link:hover {
background: var(--secondary);
border-color: var(--secondary);
transform: translateY(-1px);
}
.cardC.is-accent .cardC__overlay {
background: linear-gradient(180deg, rgba(94, 74, 44, 0.35) 0%, rgba(94, 74, 44, 0.55) 45%, rgba(58, 42, 20, 0.92) 100%);
}
.cardC.is-accent .cardC__eyebrow {
color: var(--primary);
background: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.2);
}
.cardC.is-accent .cardC__stat-val .fa-star {
color: var(--primary);
}
.cardC.is-standard {
color: var(--text);
}
.cardC.is-standard .cardC__overlay {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.93) 100%);
}
.cardC.is-standard .cardC__title {
color: var(--primary);
text-shadow: none;
}
.cardC.is-standard .cardC__desc {
color: var(--text-light);
text-shadow: none;
}
.cardC.is-standard .cardC__eyebrow {
color: var(--primary);
background: rgba(47, 60, 80, 0.08);
border-color: rgba(47, 60, 80, 0.12);
}
.cardC.is-standard .cardC__stat {
background: var(--accent);
border-color: transparent;
backdrop-filter: none;
}
.cardC.is-standard .cardC__stat-val {
color: var(--primary);
}
.cardC.is-standard .cardC__stat-label {
color: var(--text-light);
}
.btnC {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--secondary);
color: #fff;
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
padding: 12px 18px;
border-radius: 8px;
border: none;
text-decoration: none;
cursor: pointer;
position: relative;
overflow: hidden;
transition: background 0.2s;
}
.btnC:hover {
background: #a8875d;
}
.btnC::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.28), transparent);
transform: skewX(-20deg);
transition: left 0.55s ease;
}
.btnC:hover::after {
left: 130%;
}
.cardC.is-accent .btnC {
background: var(--primary);
}
.cardC.is-accent .btnC:hover {
background: #1e2d3f;
}
.cardC.zone-central {
margin-bottom: 24px;
flex-direction: row;
justify-content: flex-start;
min-height: 240px;
}
.cardC.zone-central .cardC__bg {
position: relative;
inset: auto;
width: 42%;
flex-shrink: 0;
}
.cardC.zone-central .cardC__overlay {
display: none;
}
.cardC.zone-central .cardC__content {
flex: 1;
min-width: 0;
background: var(--primary);
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px 34px;
text-shadow: none;
}
.cardC.zone-central .cardC__eyebrow {
background: rgba(255, 255, 255, 0.08);
}
.cardC.zone-central .cardC__stats {
margin-bottom: 16px;
}
.cardC.zone-central.is-accent .cardC__content {
background: linear-gradient(135deg, #c7ab84 0%, var(--secondary) 45%, #a3805a 100%);
}
.cardC.zone-central.is-accent .cardC__eyebrow {
color: var(--primary);
background: rgba(255, 255, 255, 0.85);
}
.cardC.zone-central.is-accent .cardC__stat {
background: rgba(255, 255, 255, 0.9);
border-color: transparent;
backdrop-filter: none;
}
.cardC.zone-central.is-accent .cardC__stat-val {
color: var(--primary);
}
.cardC.zone-central.is-accent .cardC__stat-val .fa-star {
color: var(--primary);
}
.cardC.zone-central.is-accent .cardC__stat-label {
color: var(--text-light);
}
.cardC.zone-central.is-standard .cardC__content {
background: var(--white);
border-top: 3px solid var(--secondary);
}
.cardC.zone-central.is-standard .cardC__title {
color: var(--primary);
}
.cardC.zone-central.is-standard .cardC__desc {
color: var(--text-light);
}
.cardC.zone-central.is-standard .cardC__eyebrow {
color: var(--primary);
background: rgba(47, 60, 80, 0.08);
}
.cardC.zone-central.is-standard .cardC__stat {
background: var(--accent);
border-color: transparent;
backdrop-filter: none;
}
.cardC.zone-central.is-standard .cardC__stat-val {
color: var(--primary);
}
.cardC.zone-central.is-standard .cardC__stat-label {
color: var(--text-light);
}
@media (max-width: 680px) {
.cardC.zone-central {
flex-direction: column;
min-height: 0;
}
.cardC.zone-central .cardC__bg {
width: 100%;
height: 150px;
}
.cardC.zone-central .cardC__content {
padding: 22px 20px;
}
.cardC.zone-central .cardC__title {
font-size: 1.02rem;
}
}
.contact-form-wrap {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 0;
}
.contact-form-wrap .card__title {
padding: 16px 20px 0;
margin: 0;
border: none;
}
.contact-form {
padding: 12px 20px 20px;
}
.form-intro {
font-size: 0.78rem;
color: var(--text-light);
line-height: 1.5;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--accent);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}
.form-group label {
font-size: 0.72rem;
font-weight: 600;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.form-group input, .form-group select, .form-group textarea {
border: 1.5px solid #dde0e4;
border-radius: 6px;
padding: 9px 12px;
font-family: inherit;
font-size: 0.85rem;
color: var(--text);
transition: border-color 0.2s;
background: var(--white);
width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none;
border-color: var(--secondary);
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
.form-rgpd {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 0.72rem;
color: var(--text-light);
line-height: 1.5;
margin-bottom: 12px;
}
.form-rgpd input {
flex-shrink: 0;
width: 14px;
height: 14px;
margin-top: 2px;
accent-color: var(--secondary);
}
.form-rgpd a {
color: var(--secondary);
text-decoration: underline;
}
.cf-turnstile {
margin-bottom: 14px;
}
.btn-submit {
width: 100%;
background: var(--primary);
color: #fff;
border: none;
border-radius: 6px;
padding: 12px;
font-size: 0.88rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-submit:hover:not(:disabled) {
background: var(--secondary);
}
.btn-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.form-feedback {
margin-top: 10px;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
display: none;
}
.form-feedback--error {
display: block;
background: #fff0f0;
color: #b91c1c;
border: 1px solid #fecaca;
}
.form-feedback--success {
display: block;
background: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
}
.form-success {
text-align: center;
padding: 28px 16px;
}
.form-success i {
font-size: 2.4rem;
color: var(--secondary);
display: block;
margin-bottom: 14px;
}
.form-success__title {
font-weight: 700;
color: var(--primary);
font-size: 1rem;
margin-bottom: 6px;
}
.form-success__sub {
color: var(--text-light);
font-size: 0.85rem;
}
.lightbox {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(0, 0, 0, 0.93);
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
}
.lightbox.open {
display: flex;
}
.lightbox__img {
max-width: 95vw;
max-height: 90vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 4px;
display: block;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.lightbox__close {
position: absolute;
top: 18px;
right: 22px;
color: #fff;
font-size: 1.6rem;
background: none;
border: none;
opacity: 0.7;
transition: opacity 0.2s;
cursor: pointer;
}
.lightbox__close:hover {
opacity: 1;
}
.lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.15);
color: #fff;
border: none;
width: 52px;
height: 52px;
border-radius: 50%;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
backdrop-filter: blur(4px);
cursor: pointer;
}
.lightbox__nav:hover {
background: rgba(255, 255, 255, 0.3);
}
@media (max-width: 600px) {
.lightbox__nav {
width: 38px;
height: 38px;
font-size: 1rem;
}
}
.lightbox__prev {
left: 20px;
}
.lightbox__next {
right: 20px;
}
.lightbox__counter {
position: absolute;
bottom: 20px;
color: rgba(255, 255, 255, 0.65);
font-size: 0.82rem;
letter-spacing: 0.04em;
}
.via-footer {
background: var(--primary);
color: rgba(255, 255, 255, 0.55);
font-size: 0.75rem;
padding: 16px 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.via-footer a {
color: rgba(255, 255, 255, 0.55);
margin-left: 16px;
}
.via-footer a:hover {
color: var(--secondary);
}
.itineraire-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px;
}
.itineraire__input-wrap {
display: flex;
gap: 6px;
margin-bottom: 12px;
}
.itineraire__input {
flex: 1;
border: 1.5px solid #dde0e4;
border-radius: 6px;
padding: 8px 10px;
font-family: inherit;
font-size: 0.82rem;
color: var(--text);
transition: border-color 0.2s;
}
.itineraire__input:focus {
outline: none;
border-color: var(--secondary);
}
.itineraire__geo {
flex-shrink: 0;
background: var(--accent);
border: 1.5px solid #dde0e4;
border-radius: 6px;
width: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
color: var(--primary);
font-size: 0.85rem;
}
.itineraire__geo:hover {
background: #dfe0e1;
}
.itineraire__geo.is-locating {
color: var(--secondary);
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.itineraire__modes, .itineraire__mode-btns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.itineraire__mode-btn, .itineraire__mode {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
border-radius: 6px;
border: 1.5px solid var(--accent);
background: var(--accent);
cursor: pointer;
font-size: 0.68rem;
font-weight: 600;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.04em;
transition: all 0.2s;
font-family: inherit;
text-decoration: none;
}
.itineraire__mode-btn i, .itineraire__mode i {
font-size: 1.1rem;
color: var(--secondary);
}
.itineraire__mode-btn:hover, .itineraire__mode:hover {
border-color: var(--secondary);
background: var(--white);
box-shadow: 0 2px 8px rgba(186, 153, 111, 0.18);
}
.itineraire__geo-hint {
font-size: 0.7rem;
color: var(--text-light);
margin-top: 8px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 4px;
}
.poi-controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 10px;
}
.poi-dist-btns {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex: 1;
}
.poi-cat-filters {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.poi-dist-btn, .poi-layer-btn {
padding: 5px 12px;
border-radius: 20px;
font-family: inherit;
font-size: 0.75rem;
font-weight: 600;
border: 1.5px solid #dde0e4;
background: var(--white);
color: var(--text);
transition: all 0.2s;
cursor: pointer;
}
.poi-dist-btn:hover, .poi-layer-btn:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.poi-dist-btn.is-active {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.poi-layer-btn {
display: flex;
align-items: center;
gap: 5px;
}
.poi-cat-btn {
padding: 4px 10px;
border-radius: 20px;
font-family: inherit;
font-size: 0.73rem;
font-weight: 600;
border: 1.5px solid transparent;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 5px;
opacity: 0.42;
}
.poi-cat-btn.is-active {
opacity: 1;
}
.poi-cat-btn i {
font-size: 0.75rem;
}
#via-map-poi {
height: 450px;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
z-index: 0;
}
.poi-legend {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--accent);
}
.poi-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: var(--text);
font-weight: 500;
}
.poi-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.poi-legend-hint {
margin-left: auto;
font-size: 0.68rem;
color: var(--text-light);
display: flex;
align-items: center;
gap: 4px;
}
.poi-no-data {
height: 90px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--text-light);
font-size: 0.85rem;
}
.accordion-item {
border: 1px solid var(--accent);
border-radius: 6px;
margin-bottom: 6px;
overflow: hidden;
}
.accordion-header {
width: 100%;
text-align: left;
background: var(--white);
border: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
cursor: pointer;
font-family: inherit;
transition: background 0.15s;
}
.accordion-header:hover {
background: var(--accent);
}
.accordion-header.is-open {
background: var(--primary);
color: #fff;
}
.accordion-header.is-open .accordion-title i {
color: #fff !important;
}
.accordion-chevron {
font-size: 0.75rem;
color: var(--text-light);
transition: transform 0.25s ease, color 0.15s;
flex-shrink: 0;
}
.accordion-header.is-open .accordion-chevron {
transform: rotate(180deg);
color: #fff;
}
.accordion-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.82rem;
font-weight: 600;
}
.accordion-title i {
color: var(--secondary);
font-size: 0.9rem;
}
.accordion-body {
padding: 16px;
display: none;
border-top: 1px solid var(--accent);
}
.accordion-body.is-open {
display: block;
}
.accordion-source {
font-size: 0.68rem;
color: var(--text-light);
margin-top: 12px;
padding-top: 8px;
border-top: 1px solid var(--accent);
display: flex;
align-items: center;
gap: 5px;
}
.insee-stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid var(--accent);
}
.insee-stat-row:last-of-type {
border: none;
}
.insee-stat-label {
color: var(--text);
font-size: 0.8rem;
}
.insee-stat-val {
font-weight: 700;
color: var(--primary);
font-size: 0.82rem;
white-space: nowrap;
}
.insee-bar-wrap {
margin: 6px 0 10px;
}
.insee-bar-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
margin-bottom: 4px;
}
.insee-bar-track {
background: var(--accent);
border-radius: 4px;
height: 7px;
overflow: hidden;
}
.insee-bar-fill {
height: 100%;
border-radius: 4px;
}
.insee-kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.insee-kpi {
background: var(--accent);
border-radius: 6px;
padding: 10px 8px;
text-align: center;
}
.insee-kpi__val {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary);
}
.insee-kpi__label {
font-size: 0.62rem;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 2px;
line-height: 1.3;
}
.insee-section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-light);
margin: 12px 0 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--accent);
}
.insee-no-data {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
background: var(--accent);
border-radius: 6px;
font-size: 0.8rem;
color: var(--text-light);
}
.via-seo-content .bien-seo > h1,
.via-seo-content .bien-image-principale,
.via-seo-content .bien-intro,
.via-seo-content p.bien-localisation,
.via-seo-content p.bien-prix,
.via-seo-content ul.bien-caracteristiques,
.via-seo-content .bien-dpe-ges,
.via-seo-content p.bien-visite-virtuelle {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.via-seo-content .bien-seo {
background: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.via-seo-content .bien-description {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 20px;
font-size: 0.9rem;
line-height: 1.75;
color: var(--text);
}
.via-seo-content .bien-mentions-legales {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 20px;
font-size: 0.82rem;
}
.via-seo-content .bien-mentions-legales h3 {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-light);
padding-bottom: 10px;
border-bottom: 2px solid var(--accent);
margin-bottom: 12px;
}
.via-seo-content .bien-mentions-legales ul {
list-style: none;
padding: 0;
}
.via-seo-content .bien-mentions-legales li {
padding: 5px 0;
border-bottom: 1px solid var(--accent);
display: flex;
justify-content: space-between;
gap: 12px;
}
.via-seo-content .bien-mentions-legales li:last-child {
border: none;
}
.via-seo-content .bien-similaires, .via-seo-content .bien-opportunites-neuf {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 20px;
}
.via-seo-content .bien-similaires h2, .via-seo-content .bien-opportunites-neuf h2 {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-light);
padding-bottom: 10px;
border-bottom: 2px solid var(--accent);
margin-bottom: 14px;
}
.via-seo-content .bien-opportunites-neuf-liste {
list-style: none;
padding: 0;
}
.via-seo-content .bien-opportunites-neuf-liste li {
border-bottom: 1px solid var(--accent);
padding: 6px 0;
}
.via-seo-content .bien-opportunites-neuf-liste li:last-child {
border: none;
}
.via-seo-content .bien-opportunites-neuf-liste a {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.82rem;
font-weight: 500;
color: var(--primary);
transition: color 0.2s;
}
.via-seo-content .bien-opportunites-neuf-liste a:hover {
color: var(--secondary);
}
.via-seo-content .bien-opportunites-neuf-liste img {
width: 52px;
height: 40px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.via-seo-content .bien-commercial {
display: none;
}
 :root {
--loc: #0ea5e9;
}
.via-badge--loc {
background: var(--loc);
}
.loyer-bloc {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.loyer-bloc__main {
font-size: 2rem;
font-weight: 700;
color: var(--primary);
}
.loyer-bloc__period {
font-size: 1rem;
font-weight: 500;
color: var(--text-light);
}
.loyer-bloc__m2 {
font-size: 0.9rem;
color: var(--text-light);
font-weight: 500;
}
.loyer-detail {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.loyer-detail__item {
background: var(--accent);
border-radius: 6px;
padding: 6px 14px;
font-size: 0.78rem;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
}
.loyer-detail__item strong {
color: var(--primary);
}
.loyer-detail__item--total {
background: var(--loc);
color: #fff;
font-weight: 600;
}
.loyer-detail__item--total strong {
color: #fff;
}
.dispo-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px;
border-left: 4px solid var(--loc);
}
.dispo-card__title {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-light);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 7px;
}
.dispo-card__title i {
color: var(--loc);
}
.dispo-card__info {
font-size: 0.78rem;
color: var(--text-light);
line-height: 1.6;
}
.dispo-card__info strong {
color: var(--primary);
}
.dispo-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--loc);
color: #fff;
padding: 6px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 10px;
}
.btn-dossier {
background: var(--loc);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.2s;
border: none;
}
.btn-dossier:hover {
background: #0284c7;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
border-color: var(--loc);
}
.form-rgpd input {
accent-color: var(--loc);
}
.btn-submit {
background: var(--loc);
}
.btn-submit:hover {
background: #0284c7;
}
.similaire-card__price {
color: var(--loc);
}