:root {
--bg-top: #8fb8dc;
--bg-bottom: #6f9fc8;
--surface: rgba(249, 251, 253, 0.94);
--surface-strong: #ffffff;
--surface-soft: rgba(239, 244, 249, 0.94);
--text: #12202d;
--muted: #566577;
--line: rgba(18, 32, 45, 0.1);
--line-strong: rgba(18, 32, 45, 0.16);
--blue: #4385b9;
--blue-deep: #176aa5;
--blue-soft: #bed8ef;
--sand: #d2bf95;
--dark: #050607;
--dark-soft: #171717;
--shadow-lg: 0 24px 60px rgba(15, 28, 46, 0.18);
--shadow-md: 0 16px 34px rgba(15, 28, 46, 0.11);
--shadow-sm: 0 12px 26px rgba(15, 28, 46, 0.08);
--radius-xl: 36px;
--radius-lg: 28px;
--radius-md: 22px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background: #050505;
}
body {
margin: 0;
min-height: 100vh;
font-family: "Manrope", "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.24), transparent 18%),
radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.14), transparent 22%),
linear-gradient(180deg, #a6cae7 0%, var(--bg-top) 22%, #7eadd4 56%, var(--bg-bottom) 100%);
line-height: 1.6;
overflow-x: clip;
}
body.legal-page {
display: flex;
min-height: 100vh;
min-height: 100dvh;
flex-direction: column;
}
body.lightbox-open {
overflow: hidden;
}
body::before,
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
}
body::before {
display: none;
}
body::after {
opacity: 0.18;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 22%),
linear-gradient(0deg, rgba(16, 40, 68, 0.06), transparent 30%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 84%);
}
img {
max-width: 100%;
height: auto;
}
a {
color: inherit;
}
[id] {
scroll-margin-top: 122px;
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 18px 20px 0;
pointer-events: none;
}
.nav {
pointer-events: auto;
max-width: 1180px;
margin: 0 auto;
position: relative;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(19, 53, 82, 0.92), rgba(15, 42, 67, 0.86));
box-shadow: 0 18px 34px rgba(10, 22, 34, 0.2);
backdrop-filter: blur(14px);
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.site-header.scrolled .nav {
padding-top: 12px;
padding-bottom: 12px;
background: linear-gradient(180deg, rgba(19, 53, 82, 0.78), rgba(15, 42, 67, 0.68));
box-shadow: 0 18px 34px rgba(10, 22, 34, 0.18);
backdrop-filter: blur(12px);
}
.brand {
display: inline-flex;
align-items: center;
width: clamp(190px, 20vw, 260px);
min-width: 0;
color: #ffffff;
text-decoration: none;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
}
.brand-logo {
display: block;
width: 100%;
height: auto;
max-height: 60px;
object-fit: contain;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
}
.nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
width: 46px;
height: 46px;
padding: 0;
border: 0;
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
cursor: pointer;
transition: background-color 0.24s ease, transform 0.24s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
background: rgba(255, 255, 255, 0.14);
transform: translateY(-1px);
}
.nav-toggle-bar {
display: block;
width: 18px;
height: 2px;
border-radius: 999px;
background: currentColor;
transition: transform 0.24s ease, opacity 0.24s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nav-links a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-radius: 999px;
color: rgba(255, 255, 255, 0.86);
text-decoration: none;
font-weight: 600;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
transition: color 0.24s ease, background-color 0.24s ease, transform 0.24s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
color: #ffffff;
background: rgba(67, 133, 185, 0.34);
transform: translateY(-1px);
}
main {
position: relative;
padding: 0 20px 56px;
}
main::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.26) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 56px 56px, 56px 56px, 14px 14px, 14px 14px;
background-position: top left;
opacity: 0.52;
}
.section {
max-width: 1180px;
margin: 0 auto 30px;
}
.hero {
position: relative;
overflow: hidden;
max-width: none;
margin: 0 calc(50% - 50vw) 30px;
border-radius: 0;
border: 0;
border-bottom: 8px solid #ffffff;
background:
url("assets/optimized/bo-block-muret-1080.webp") center center / cover no-repeat,
linear-gradient(180deg, #4385b9 0%, #3f80b5 100%);
}
.hero::before,
.hero::after {
content: "";
position: absolute;
pointer-events: none;
}
.hero::before {
inset: 0;
background:
linear-gradient(90deg, rgba(4, 12, 20, 0.34), rgba(4, 12, 20, 0.08) 48%, rgba(4, 12, 20, 0.24)),
linear-gradient(180deg, rgba(4, 12, 20, 0.06), rgba(4, 12, 20, 0.18));
opacity: 1;
}
.hero::after {
inset: 0;
background: none;
opacity: 0;
}
.hero-grid {
position: relative;
z-index: 1;
max-width: 1220px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
gap: 22px;
align-items: stretch;
padding: 118px 20px 42px;
}
.hero-grid > * {
min-width: 0;
}
.hero-inner {
align-self: center;
justify-self: start;
display: flex;
flex-direction: column;
width: min(100%, 780px);
max-width: 780px;
min-height: auto;
padding: 22px 24px 24px;
border-radius: 8px;
border-left: 5px solid rgba(255, 255, 255, 0.82);
background:
linear-gradient(90deg, rgba(6, 7, 8, 0.58), rgba(6, 7, 8, 0.36) 54%, rgba(6, 7, 8, 0));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 18px 34px rgba(4, 12, 20, 0.24);
backdrop-filter: none;
}
.eyebrow,
.section-kicker,
.hero-card-kicker {
margin: 0;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.eyebrow {
margin-bottom: 12px;
color: #ffffff;
font-style: italic;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.42);
}
.hero h1 {
max-width: none;
margin: 0 0 14px;
color: #ffffff;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: clamp(2.35rem, 4.7vw, 4rem);
line-height: 0.94;
letter-spacing: 0;
font-style: italic;
text-wrap: balance;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.42);
}
.hero-text {
max-width: none;
margin: 0;
color: #ffffff;
-webkit-text-fill-color: #ffffff;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: 3.05rem;
line-height: 1.02;
font-weight: 700;
font-style: italic;
letter-spacing: 0;
text-wrap: balance;
padding: 0;
background: transparent;
box-decoration-break: initial;
-webkit-box-decoration-break: initial;
-webkit-text-stroke: 0 transparent;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.42);
}
.hero-mobile-photo {
display: none;
}
.hero-badges {
display: grid;
grid-column: 1 / -1;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
width: 100%;
margin: 8px auto 0;
padding-top: 8px;
align-self: stretch;
justify-items: stretch;
}
.hero-badges span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 9px 14px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.76);
color: #ffffff;
font-weight: 700;
font-size: 0.88rem;
letter-spacing: 0.03em;
text-align: center;
min-width: 0;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}
.hero-aside {
position: relative;
overflow: hidden;
align-self: stretch;
padding: 18px;
border-radius: 8px;
border: 0;
background:
linear-gradient(180deg, rgba(6, 7, 8, 0.9), rgba(6, 7, 8, 0.82));
box-shadow: 0 22px 38px rgba(0, 0, 0, 0.22);
backdrop-filter: none;
}
.hero-aside::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 44%),
linear-gradient(90deg, rgba(95, 149, 198, 0.12), transparent 42%);
pointer-events: none;
}
.logo-plaque {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 2000 / 1589;
margin-bottom: 18px;
padding: clamp(14px, 2.4vw, 22px);
border-radius: 4px;
background: rgb(27, 28, 28);
box-shadow:
0 0 0 4px rgba(0, 0, 0, 0.72),
0 0 0 7px rgba(255, 255, 255, 0.84),
0 14px 28px rgba(0, 0, 0, 0.24);
}
.logo-plaque-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 2px;
box-shadow: none;
}
.hero-card-kicker {
position: relative;
z-index: 1;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.86);
font-style: italic;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.42);
}
.hero-aside h2 {
position: relative;
z-index: 1;
margin: 0 0 16px;
color: #ffffff;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: clamp(1.2rem, 2vw, 1.56rem);
line-height: 1.18;
letter-spacing: 0;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.42);
}
.hero-summary {
position: relative;
z-index: 1;
display: grid;
gap: 12px;
}
.hero-stat {
padding: 14px 16px;
border-radius: 6px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}
.hero-stat strong {
display: block;
margin-bottom: 3px;
color: #ffffff;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: 1.24rem;
letter-spacing: 0;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.36);
}
.hero-stat span {
color: rgba(255, 255, 255, 0.84);
font-size: 0.86rem;
}
.hero-note {
position: relative;
z-index: 1;
margin: 16px 0 0;
padding-top: 14px;
color: rgba(255, 255, 255, 0.82);
font-weight: 700;
font-size: 0.9rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.section {
position: relative;
overflow: hidden;
padding: 34px;
border-radius: 8px;
background: linear-gradient(180deg, rgba(252, 252, 250, 0.98), rgba(238, 239, 235, 0.96));
box-shadow:
0 0 0 3px rgba(0, 0, 0, 0.06),
0 20px 44px rgba(15, 28, 46, 0.14);
backdrop-filter: none;
}
.section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
border-radius: inherit;
background: linear-gradient(90deg, #050505 0%, #176aa5 48%, #050505 100%);
pointer-events: none;
}
.section > * {
position: relative;
z-index: 1;
}
.section-heading {
max-width: 760px;
margin-bottom: 28px;
}
.section-kicker {
margin-bottom: 12px;
color: var(--blue-deep);
font-style: italic;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55);
}
.section-heading h2 {
margin: 0;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: clamp(1.95rem, 3.1vw, 3rem);
line-height: 1.04;
letter-spacing: 0;
}
.section-copy {
max-width: 640px;
margin: 14px 0 0;
color: var(--muted);
}
.info-grid,
.gallery,
.footer-grid,
.stacked-panels {
display: grid;
gap: 20px;
}
.info-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.stacked-panels {
grid-template-columns: 1fr;
}
.gallery {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.map-layout {
display: grid;
grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1.1fr);
gap: 20px;
align-items: stretch;
}
.panel,
.gallery-item,
.footer-block {
position: relative;
overflow: hidden;
border-radius: 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.95));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--shadow-sm);
transform-style: preserve-3d;
will-change: transform;
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.panel::before,
.gallery-item::before,
.footer-block::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(67, 133, 185, 0.1), transparent 60%);
pointer-events: none;
}
.panel {
padding: 26px;
}
.info-grid .panel {
min-height: 220px;
background:
linear-gradient(180deg, rgba(67, 133, 185, 0.98), rgba(49, 116, 166, 0.98)),
linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 58%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -5px 0 rgba(0, 0, 0, 0.78),
0 18px 34px rgba(18, 30, 42, 0.12);
}
.info-grid .panel::before {
background:
linear-gradient(90deg, #050505, rgba(255, 255, 255, 0.9), #050505) top / 100% 4px no-repeat,
radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 34%);
}
.info-grid .panel h3 {
color: #ffffff;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.38);
}
.info-grid .panel p {
color: rgba(255, 255, 255, 0.9);
font-weight: 650;
}
.panel-media {
position: relative;
z-index: 1;
display: block;
width: 100%;
min-width: 0;
aspect-ratio: 4 / 3;
margin-top: 14px;
padding: 0;
border: 0;
border-radius: 6px;
background: rgba(9, 23, 36, 0.24);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 14px 28px rgba(8, 20, 32, 0.16);
overflow: hidden;
appearance: none;
cursor: zoom-in;
}
.panel-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s ease;
}
.panel-media:hover img,
.panel-media:focus-visible img {
transform: scale(1.03);
}
.info-grid .panel:hover,
.info-grid .panel:focus-within {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 22px 40px rgba(18, 40, 66, 0.12);
}
.panel h3,
.footer-block h3,
.dimension-card h4,
.color-card h4 {
font-family: "Sora", "Segoe UI", sans-serif;
letter-spacing: 0;
}
.panel h3,
.footer-block h3 {
margin: 0 0 10px;
font-size: 1.24rem;
}
.footer-block > h3:not(:first-child) {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.panel p,
.color-card p,
.gallery-item figcaption,
.location-panel p {
margin: 0;
color: var(--muted);
}
.dimensions-panel {
padding-bottom: 24px;
}
.range-kicker {
margin: 0 0 8px;
color: var(--blue-deep);
font-size: 0.78rem;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.dimension-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
align-items: stretch;
gap: 16px;
margin-bottom: 18px;
}
.highlight-pill {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 18px;
background: rgba(18, 32, 45, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
color: var(--dark-soft);
font-weight: 700;
}
.highlight-pill-detail {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
min-width: 0;
padding: 18px 20px;
border-radius: 18px;
}
.highlight-pill-title {
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.highlight-pill-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
gap: 8px;
}
.highlight-pill-values span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 10px;
border-radius: 999px;
background: rgba(36, 79, 125, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
color: var(--blue-deep);
font-size: 0.88rem;
font-weight: 800;
white-space: nowrap;
}
.dimension-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
.accessory-grid,
.retaining-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.dimension-card {
position: relative;
min-width: 0;
padding: 18px;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(67, 133, 185, 0.98), rgba(49, 116, 166, 0.98)),
linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 58%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -5px 0 rgba(0, 0, 0, 0.78),
0 18px 34px rgba(18, 30, 42, 0.12);
}
.dimension-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
border-radius: 8px 8px 0 0;
background:
linear-gradient(90deg, #050505, rgba(255, 255, 255, 0.9), #050505) top / 100% 4px no-repeat,
radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 34%);
}
.dimension-label {
display: inline-flex;
align-items: center;
margin: 0 0 18px;
padding: 5px 10px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.2);
color: #ffffff;
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.24);
}
.dimension-card h4 {
margin: 0 0 16px;
font-size: clamp(1.08rem, 1.8vw, 1.38rem);
line-height: 1.14;
color: #ffffff;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.38);
overflow-wrap: anywhere;
}
.dimension-image-slot {
width: 100%;
min-width: 0;
min-height: 0;
aspect-ratio: 1 / 1;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 6px;
background:
linear-gradient(180deg, rgba(228, 233, 238, 0.96), rgba(210, 216, 223, 0.92)),
linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 56%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.72),
0 10px 18px rgba(18, 30, 42, 0.06);
overflow: hidden;
appearance: none;
border: 0;
cursor: zoom-in;
font: inherit;
}
.dimension-image-slot img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 4px;
transition: transform 0.45s ease;
}
.dimension-image-fill img {
object-fit: cover;
}
.dimension-card:hover .dimension-image-slot img,
.dimension-card:focus-within .dimension-image-slot img {
transform: scale(1.03);
}
.dimension-image-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.dimension-image-pair .dimension-image-slot {
margin-bottom: 0;
}
.dimension-specs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.spec-pill {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.94);
font-size: 0.84rem;
font-weight: 700;
}
.dimension-size {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
width: 100%;
padding: 8px 12px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.28);
color: #ffffff;
font-weight: 800;
overflow-wrap: anywhere;
text-align: center;
text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.26);
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 16px;
}
.color-card {
position: relative;
min-width: 0;
padding: 18px;
border-radius: 8px;
background: linear-gradient(180deg, rgba(249, 249, 248, 0.99), rgba(234, 239, 243, 0.97));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.84),
0 16px 30px rgba(15, 28, 46, 0.07);
}
.color-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
border-radius: 8px 8px 0 0;
background: linear-gradient(90deg, #050505 0%, #4385b9 52%, #050505 100%);
}
.color-card h4 {
margin: 0 0 8px;
font-size: 1.12rem;
overflow-wrap: anywhere;
}
.color-swatch {
position: relative;
min-height: 148px;
margin-bottom: 16px;
padding: 18px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
border-radius: 6px;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 12px 24px rgba(18, 30, 42, 0.08);
}
.color-swatch::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 38%, rgba(10, 16, 24, 0.08) 100%),
radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.26), transparent 24%);
pointer-events: none;
}
.color-swatch::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
height: 36px;
border-radius: 4px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
opacity: 0.44;
pointer-events: none;
}
.swatch-concrete-light {
background:
radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 68% 42%, rgba(105, 112, 120, 0.12) 0 2px, transparent 3px),
radial-gradient(circle at 42% 76%, rgba(255, 255, 255, 0.24) 0 2px, transparent 3px),
linear-gradient(145deg, #e8ecef 0%, #d6dce1 55%, #c3cbd2 100%);
}
.swatch-stone {
background:
radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.22) 0 2px, transparent 3px),
radial-gradient(circle at 64% 46%, rgba(113, 90, 51, 0.12) 0 2px, transparent 3px),
radial-gradient(circle at 42% 72%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
linear-gradient(145deg, #dfd1af 0%, #d2c199 54%, #b89b6c 100%);
}
.swatch-anthracite {
background:
radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.14) 0 2px, transparent 3px),
radial-gradient(circle at 62% 48%, rgba(7, 13, 21, 0.16) 0 2px, transparent 3px),
radial-gradient(circle at 44% 74%, rgba(255, 255, 255, 0.08) 0 2px, transparent 3px),
linear-gradient(145deg, #55616e 0%, #44505c 55%, #303945 100%);
}
.color-swatch span {
position: relative;
z-index: 1;
display: inline-flex;
padding: 8px 12px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.84);
color: var(--text);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.swatch-anthracite span {
background: rgba(255, 255, 255, 0.9);
}
.gallery-item {
padding: 14px;
background: linear-gradient(180deg, rgba(16, 24, 34, 0.98), rgba(28, 40, 54, 0.98));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 16px 32px rgba(10, 16, 24, 0.18);
}
.gallery-item::before {
background:
linear-gradient(90deg, rgba(76, 131, 184, 0.92), rgba(150, 186, 217, 0.34)) top / 100% 5px no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 56%);
}
.gallery-media {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
aspect-ratio: 1 / 1;
border-radius: 18px;
background: transparent;
color: inherit;
font: inherit;
overflow: hidden;
text-align: left;
appearance: none;
cursor: zoom-in;
}
.lightbox-trigger:focus-visible {
outline: 3px solid rgba(76, 131, 184, 0.44);
outline-offset: 4px;
}
.gallery-media::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 42%;
background: linear-gradient(180deg, transparent, rgba(8, 16, 24, 0.18));
pointer-events: none;
}
.gallery-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.42s ease;
}
.gallery-item:hover .gallery-media img,
.gallery-item:focus-within .gallery-media img {
transform: scale(1.04);
}
.gallery-item figcaption {
margin-top: 14px;
color: rgba(236, 243, 248, 0.88);
font-weight: 600;
line-height: 1.45;
}
.lightbox {
position: fixed;
inset: 0;
z-index: 2100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.lightbox[hidden] {
display: none;
}
.lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(7, 14, 22, 0.82);
backdrop-filter: blur(10px);
}
.lightbox-dialog {
position: relative;
z-index: 1;
width: min(100%, 1080px);
margin: 0;
padding: 18px;
border-radius: 28px;
background: rgba(10, 16, 24, 0.92);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 32px 70px rgba(3, 8, 14, 0.42);
}
.lightbox-image {
display: block;
width: 100%;
max-height: min(76vh, 920px);
object-fit: contain;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
}
.lightbox-close {
position: absolute;
top: 10px;
right: 10px;
width: 42px;
height: 42px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
font-size: 1.8rem;
line-height: 1;
cursor: pointer;
}
.lightbox-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 14px;
}
.lightbox-caption {
margin: 0;
color: rgba(255, 255, 255, 0.84);
font-weight: 600;
}
.location-panel {
display: flex;
flex-direction: column;
justify-content: center;
}
.location-panel p + p {
margin-top: 12px;
}
.location-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.location-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 11px 18px;
border-radius: 999px;
background: rgba(36, 79, 125, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
color: var(--blue-deep);
font-weight: 800;
text-decoration: none;
transition: transform 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}
.location-action:hover,
.location-action:focus-visible {
transform: translateY(-2px);
background: rgba(36, 79, 125, 0.14);
}
.location-action-primary {
background: linear-gradient(180deg, rgba(76, 131, 184, 0.96), rgba(36, 79, 125, 0.98));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 24px rgba(36, 79, 125, 0.18);
color: #ffffff;
}
.location-action-primary:hover,
.location-action-primary:focus-visible {
background: linear-gradient(180deg, rgba(83, 143, 200, 0.98), rgba(36, 79, 125, 1));
color: #ffffff;
}
.color-card,
.gallery-item,
.location-panel {
min-height: 220px;
background:
linear-gradient(180deg, rgba(67, 133, 185, 0.98), rgba(49, 116, 166, 0.98)),
linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 58%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -5px 0 rgba(0, 0, 0, 0.78),
0 18px 34px rgba(18, 30, 42, 0.12);
color: #ffffff;
}
.color-card::before,
.gallery-item::before,
.location-panel::before {
background:
linear-gradient(90deg, #050505, rgba(255, 255, 255, 0.9), #050505) top / 100% 4px no-repeat,
radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 34%);
}
.color-card h4,
.location-panel h3 {
color: #ffffff;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.38);
}
.color-card p,
.gallery-item figcaption,
.location-panel p {
color: rgba(255, 255, 255, 0.9);
font-weight: 650;
}
.color-card:hover,
.color-card:focus-within,
.gallery-item:hover,
.gallery-item:focus-within,
.location-panel:hover,
.location-panel:focus-within {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 22px 40px rgba(18, 40, 66, 0.12);
}
.gallery-item {
padding: 18px;
}
.gallery-media {
border-radius: 6px;
}
.gallery-item figcaption {
margin-top: 14px;
line-height: 1.45;
text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.26);
}
.location-action {
background: rgba(0, 0, 0, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.location-action:hover,
.location-action:focus-visible {
background: rgba(0, 0, 0, 0.34);
}
.location-action-primary {
background: rgba(0, 0, 0, 0.78);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
color: #ffffff;
}
.location-action-primary:hover,
.location-action-primary:focus-visible {
background: rgba(0, 0, 0, 0.9);
color: #ffffff;
}
.map-card {
position: relative;
overflow: hidden;
min-height: 380px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.92);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), var(--shadow-sm);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.map-card iframe {
display: block;
width: 100%;
height: 100%;
min-height: 380px;
border: 0;
}
.site-footer {
margin-top: 12px;
padding: 26px 20px 28px;
background: linear-gradient(180deg, #1d5d8d 0%, #103653 46%, #071621 100%);
box-shadow:
inset 0 6px 0 rgba(255, 255, 255, 0.82),
inset 0 1px 28px rgba(255, 255, 255, 0.08);
}
.mobile-action-bar {
display: none;
}
.footer-grid {
max-width: 1180px;
margin: 0 auto;
grid-template-columns: minmax(0, 1.22fr) minmax(280px, 0.78fr);
gap: 18px;
}
.footer-block {
padding: 24px;
color: #ffffff;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 58%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 14px 26px rgba(0, 0, 0, 0.22);
}
.footer-block p {
margin: 0 0 8px;
color: rgba(255, 255, 255, 0.78);
}
.footer-block-brand {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)),
linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 62%);
}
.footer-brand {
display: flex;
align-items: flex-start;
margin-bottom: 16px;
}
.footer-brand-copy {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.footer-brand-logo {
display: block;
width: min(100%, 280px);
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}
.footer-block .footer-brand-copy h3 {
margin: 0;
font-size: clamp(1.2rem, 2vw, 1.55rem);
line-height: 1.08;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.45);
}
.footer-brand-text {
max-width: none;
width: 100%;
margin-bottom: 16px;
}
.footer-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.footer-pills span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 7px 12px;
border-radius: 4px;
background: rgba(67, 133, 185, 0.24);
color: rgba(255, 255, 255, 0.9);
font-size: 0.84rem;
font-weight: 700;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.footer-link {
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-link:hover,
.footer-link:focus-visible {
color: #ffffff;
border-bottom-color: rgba(255, 255, 255, 0.72);
}
.contact-icons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 6px;
background: rgba(232, 229, 213, 0.92);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 20px rgba(8, 14, 22, 0.14);
color: #176aa5;
text-decoration: none;
transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}
.contact-icon:hover,
.contact-icon:focus-visible {
transform: translateY(-2px);
background: #ffffff;
color: #050505;
}
.contact-icon svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.interactive-card:hover,
.interactive-card:focus-within,
.footer-block:hover,
.map-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(36, 79, 125, 0.14);
}
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1120px) {
.nav {
padding: 12px 16px;
gap: 14px;
}
.brand {
width: clamp(170px, 21vw, 230px);
}
.nav-links a {
padding: 9px 12px;
font-size: 0.95rem;
}
}
@media (max-width: 1040px) {
[id] {
scroll-margin-top: 104px;
}
main {
padding-top: 0;
}
.logo-plaque {
max-width: 320px;
margin-right: auto;
margin-left: auto;
margin-bottom: 14px;
}
.hero-grid {
grid-template-columns: minmax(0, 1.12fr) minmax(250px, 0.88fr);
gap: 16px;
}
.hero-inner {
width: 100%;
max-width: none;
}
.hero-text {
font-size: 2.55rem;
}
.hero h1 {
max-width: 13ch;
}
.map-layout,
.footer-grid {
grid-template-columns: 1fr;
}
.footer-brand {
align-items: flex-start;
}
}
@media (max-width: 900px) {
.site-header {
padding: 14px 16px 0;
}
.gallery,
.dimension-grid {
grid-template-columns: 1fr;
}
.hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(230px, 0.78fr);
padding: 98px 20px 28px;
}
.hero-text {
font-size: 2.25rem;
}
.section {
padding: 28px 24px;
}
.hero-aside {
padding: 16px;
}
.logo-plaque {
max-width: 280px;
padding: 16px;
margin-right: auto;
margin-left: auto;
}
}
@media (max-width: 760px) {
[id] {
scroll-margin-top: 68px;
}
.site-header {
position: absolute;
padding: 10px 10px 0;
}
.site-header.mobile-compact {
position: fixed;
top: 10px;
right: 10px;
left: auto;
padding: 0;
width: auto;
z-index: 1002;
}
.nav {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
background: linear-gradient(180deg, rgba(19, 53, 82, 0.94), rgba(15, 42, 67, 0.88));
box-shadow: 0 14px 28px rgba(8, 14, 22, 0.22);
backdrop-filter: blur(16px);
}
.site-header.mobile-compact .nav {
display: flex;
justify-content: flex-end;
max-width: none;
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.brand {
min-width: 0;
width: min(58vw, 220px);
}
.site-header.mobile-compact .brand {
display: none;
}
.brand-logo {
max-height: 50px;
}
.nav-toggle {
display: inline-flex;
}
.site-header.mobile-compact .nav-toggle {
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(10, 16, 24, 0.86);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 28px rgba(8, 14, 22, 0.24);
}
.nav-links {
display: none;
grid-column: 1 / -1;
width: 100%;
padding-top: 4px;
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.nav-links.is-open {
display: flex;
}
.site-header.mobile-compact .nav-links {
position: absolute;
top: 54px;
right: 0;
width: min(78vw, 280px);
padding: 10px;
border-radius: 18px;
background: rgba(10, 16, 24, 0.92);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 34px rgba(8, 14, 22, 0.24);
backdrop-filter: blur(18px);
}
.nav-links a {
width: 100%;
padding: 11px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
}
main {
padding: 0 12px 34px;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 14px;
padding: 92px 14px 18px;
}
.hero {
background:
linear-gradient(180deg, #1d5d8d 0%, #103653 46%, #071621 100%);
}
.hero::before {
background: none;
opacity: 0;
}
.hero-mobile-photo {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
margin-top: 16px;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(4, 12, 20, 0), rgba(4, 12, 20, 0.12)),
url("assets/optimized/bo-block-muret-1080.webp") center 58% / cover no-repeat;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.22),
inset 0 -5px 0 rgba(0, 0, 0, 0.78),
0 14px 24px rgba(4, 12, 20, 0.2);
}
.hero-inner {
order: 1;
width: 100%;
max-width: none;
padding: 18px 16px 16px;
border-radius: 8px;
border-left: 0;
border-top: 5px solid #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
background:
linear-gradient(135deg, rgba(6, 7, 8, 0.58), rgba(6, 7, 8, 0.36) 62%, rgba(6, 7, 8, 0));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -20px 36px rgba(4, 12, 20, 0.14),
0 14px 24px rgba(4, 12, 20, 0.18);
backdrop-filter: none;
min-height: auto;
}
.hero-aside {
order: 3;
background:
linear-gradient(180deg, rgba(8, 14, 20, 0.92), rgba(8, 14, 20, 0.86));
}
.logo-plaque {
max-width: 240px;
padding: 14px;
}
.hero h1 {
max-width: none;
font-size: clamp(1.4rem, 6.8vw, 1.85rem);
line-height: 1.02;
text-wrap: wrap;
overflow-wrap: anywhere;
word-break: break-word;
}
.hero-text {
max-width: none;
font-size: 1.58rem;
line-height: 1.08;
text-wrap: wrap;
overflow-wrap: anywhere;
word-break: break-word;
-webkit-text-stroke: 0 transparent;
text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.42);
}
.section {
margin-bottom: 18px;
padding: 22px 16px;
border-radius: 8px;
}
.hero {
margin: 0 -12px 18px;
}
.section-heading {
margin-bottom: 22px;
}
.section-heading h2 {
font-size: clamp(1.5rem, 8vw, 2rem);
}
.hero-badges {
order: 4;
grid-column: auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 0;
padding-top: 0;
}
.dimension-highlights {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
}
.location-actions {
flex-direction: column;
}
.location-action {
width: 100%;
}
.highlight-pill-detail {
padding: 10px;
text-align: center;
}
.highlight-pill-title {
font-size: 0.66rem;
letter-spacing: 0.1em;
}
.highlight-pill-values {
width: 100%;
grid-template-columns: 1fr;
gap: 6px;
}
.highlight-pill-values span {
min-height: 34px;
padding: 6px 7px;
font-size: 0.76rem;
}
.dimension-image-slot {
aspect-ratio: 1 / 1;
}
.color-swatch {
min-height: 136px;
}
.hero-aside,
.panel,
.gallery-item,
.footer-block,
.map-card {
border-radius: 8px;
}
.hero-note {
margin-top: 10px;
padding-top: 10px;
font-size: 0.88rem;
}
.footer-brand {
margin-bottom: 14px;
}
.footer-brand-logo {
width: min(100%, 240px);
}
.footer-pills {
gap: 8px;
margin-bottom: 16px;
}
.site-footer {
padding-bottom: calc(78px + env(safe-area-inset-bottom));
}
.mobile-action-bar {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(8px + env(safe-area-inset-bottom));
z-index: 1001;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr);
gap: 8px;
padding: 8px;
border-radius: 20px;
background: rgba(10, 16, 24, 0.9);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 40px rgba(8, 14, 22, 0.28);
backdrop-filter: blur(18px);
}
.mobile-action {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 46px;
padding: 6px 8px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
color: #ffffff;
text-decoration: none;
font-size: 0.74rem;
font-weight: 850;
letter-spacing: 0;
text-transform: none;
line-height: 1;
}
.mobile-action span {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-action svg {
width: 17px;
height: 17px;
fill: currentColor;
flex: 0 0 auto;
}
.mobile-action-route {
background: linear-gradient(180deg, rgba(76, 131, 184, 0.96), rgba(36, 79, 125, 0.98));
}
.lightbox {
padding: 14px;
}
.lightbox-dialog {
padding: 12px;
border-radius: 22px;
}
.lightbox-image {
max-height: 68vh;
border-radius: 16px;
}
.lightbox-footer {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
}
@media (max-width: 440px) {
.nav {
gap: 10px;
padding: 9px 10px;
}
.brand {
width: min(56vw, 190px);
}
.logo-plaque {
max-width: 220px;
padding: 12px;
}
.nav-toggle {
width: 42px;
height: 42px;
border-radius: 12px;
}
main {
padding-top: 0;
}
.hero-grid {
padding: 82px 12px 16px;
}
.hero-inner {
padding: 16px 14px 18px;
border-radius: 8px;
}
.hero-mobile-photo {
aspect-ratio: 5 / 4;
background-position: center center;
}
.hero h1 {
font-size: clamp(1.32rem, 6.3vw, 1.62rem);
}
.hero-text {
font-size: 1.36rem;
}
.section {
padding: 20px 14px;
}
.hero-badges {
gap: 8px;
margin-top: 16px;
}
.dimension-highlights {
gap: 6px;
}
.highlight-pill-detail {
padding: 9px 7px;
}
.highlight-pill-title {
font-size: 0.6rem;
letter-spacing: 0.08em;
}
.highlight-pill-values span {
min-height: 30px;
padding: 5px 6px;
font-size: 0.7rem;
}
.color-swatch {
min-height: 132px;
}
.footer-brand {
align-items: flex-start;
}
.footer-brand-logo {
width: min(100%, 220px);
}
.site-footer {
padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
.mobile-action-bar {
left: 8px;
right: 8px;
padding: 6px;
gap: 6px;
border-radius: 18px;
}
.mobile-action {
min-height: 42px;
padding: 6px 5px;
justify-content: center;
gap: 5px;
font-size: 0.66rem;
}
.mobile-action span {
display: inline;
}
.mobile-action svg {
width: 16px;
height: 16px;
}
.lightbox-close {
top: 8px;
right: 8px;
width: 38px;
height: 38px;
font-size: 1.6rem;
}
.contact-icon {
width: 42px;
height: 42px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
.reveal {
opacity: 1;
transform: none;
}
}
.map-consent-panel {
position: relative;
min-height: 380px;
height: 100%;
}
.map-placeholder,
.map-frame-shell {
height: 100%;
min-height: 380px;
}
.map-placeholder {
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
padding: 30px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 246, 250, 0.94)),
linear-gradient(135deg, rgba(76, 131, 184, 0.14), transparent 58%);
}
.map-placeholder h3 {
margin: 0;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: 1.4rem;
line-height: 1.1;
}
.map-placeholder p {
margin: 0;
color: var(--muted);
}
.map-placeholder-kicker {
margin: 0;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue-deep);
}
.map-placeholder-actions {
margin-top: 8px;
}
.map-frame-shell {
display: none;
}
.map-card.is-map-active .map-placeholder {
display: none;
}
.map-card.is-map-active .map-frame-shell {
display: block;
}
.footer-meta {
max-width: 1180px;
margin: 16px auto 0;
padding: 16px 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px 22px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.footer-meta-copy {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 0.94rem;
text-align: center;
}
.footer-meta-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 14px;
}
.footer-meta-links a,
.footer-meta-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 14px;
border-radius: 999px;
color: rgba(255, 255, 255, 0.92);
background: rgba(255, 255, 255, 0.06);
text-decoration: none;
font-weight: 700;
border: 0;
cursor: pointer;
transition: transform 0.24s ease, background-color 0.24s ease, color 0.24s ease;
}
.footer-meta-links a:hover,
.footer-meta-links a:focus-visible,
.footer-meta-button:hover,
.footer-meta-button:focus-visible {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.site-footer-legal {
flex-shrink: 0;
}
.footer-meta-standalone {
margin-top: 16px;
}
body.legal-page main {
flex: 1 0 auto;
padding-top: 106px;
padding-bottom: 56px;
}
body.legal-page .nav-links a[aria-current="page"] {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
}
.legal-hero {
margin-bottom: 24px;
padding-top: 34px;
background:
linear-gradient(180deg, rgba(252, 252, 250, 0.99), rgba(238, 239, 235, 0.97)),
linear-gradient(135deg, rgba(143, 184, 220, 0.18), transparent 58%);
}
.legal-intro {
padding: 30px;
}
.legal-intro h1 {
margin: 0;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: clamp(2rem, 3.8vw, 3.2rem);
line-height: 1.02;
}
.legal-shell {
display: grid;
gap: 20px;
}
.legal-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 252, 0.95));
}
.legal-card h2 {
margin: 0 0 14px;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: clamp(1.28rem, 2.1vw, 1.7rem);
}
.legal-card p + p,
.legal-card ul + p,
.legal-card p + ul {
margin-top: 12px;
}
.legal-alert {
margin: 16px 0 0;
padding: 14px 16px;
border-radius: 16px;
background: rgba(36, 79, 125, 0.08);
color: var(--text);
font-weight: 600;
}
.legal-definition-list {
display: grid;
grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
gap: 12px 18px;
margin: 0;
}
.legal-definition-list dt {
font-weight: 800;
color: var(--text);
}
.legal-definition-list dd {
margin: 0;
color: var(--muted);
}
.legal-definition-list a,
.legal-card a {
color: var(--blue-deep);
}
.faq-shell {
gap: 14px;
}
.faq-item {
padding: 0;
}
.faq-item[open] {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 16px 30px rgba(15, 28, 46, 0.08);
}
.faq-question {
position: relative;
display: block;
padding: 24px 58px 24px 26px;
cursor: pointer;
list-style: none;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: clamp(1.12rem, 1.8vw, 1.32rem);
font-weight: 700;
line-height: 1.3;
color: var(--dark-soft);
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question::after {
content: "+";
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
font-size: 1.6rem;
line-height: 1;
color: var(--blue-deep);
}
.faq-item[open] .faq-question::after {
content: "-";
}
.faq-answer {
padding: 0 26px 24px;
}
.faq-answer p {
margin: 0;
}
.legal-list {
margin: 0;
padding-left: 20px;
color: var(--muted);
}
.legal-list li + li {
margin-top: 8px;
}
.legal-table-wrapper {
overflow-x: auto;
}
.legal-table {
width: 100%;
border-collapse: collapse;
min-width: 660px;
}
.legal-table th,
.legal-table td {
padding: 14px 12px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid rgba(18, 32, 45, 0.1);
}
.legal-table th {
font-family: "Sora", "Segoe UI", sans-serif;
font-size: 0.92rem;
color: var(--text);
}
.legal-table td {
color: var(--muted);
}
.legal-table code {
font-family: Consolas, "Courier New", monospace;
font-size: 0.92rem;
color: var(--blue-deep);
}
.cookie-banner[hidden] {
display: none !important;
}
.cookie-banner {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 1400;
}
.cookie-banner-panel {
max-width: 1180px;
margin: 0 auto;
padding: 18px 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
border-radius: 22px;
background: rgba(10, 16, 24, 0.96);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 50px rgba(8, 14, 22, 0.3);
}
.cookie-banner-copy {
flex: 1 1 420px;
}
.cookie-banner-copy h2 {
margin: 0 0 8px;
color: #ffffff;
font-family: "Sora", "Segoe UI", sans-serif;
font-size: clamp(1.1rem, 2vw, 1.4rem);
}
.cookie-banner-copy p {
margin: 0;
color: rgba(255, 255, 255, 0.78);
}
.cookie-banner-kicker {
margin: 0 0 8px;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(190, 216, 239, 0.92);
}
.cookie-banner-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px 12px;
}
.cookie-button,
.cookie-banner-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 11px 18px;
border-radius: 999px;
font-weight: 800;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.24s ease, background-color 0.24s ease, color 0.24s ease, border-color 0.24s ease;
}
.cookie-button:hover,
.cookie-button:focus-visible,
.cookie-banner-link:hover,
.cookie-banner-link:focus-visible {
transform: translateY(-1px);
}
.cookie-button-primary {
background: #ffffff;
color: var(--dark);
border-color: #ffffff;
}
.cookie-button-secondary {
background: transparent;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.26);
}
.cookie-banner-link {
color: rgba(255, 255, 255, 0.82);
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 1040px) {
body.legal-page main {
padding-top: 98px;
}
body.legal-page .legal-hero {
padding-top: 28px;
}
.footer-meta {
padding: 16px 18px;
}
.legal-definition-list {
grid-template-columns: 1fr;
gap: 8px;
}
}
@media (max-width: 760px) {
body.legal-page main {
padding-top: 82px;
padding-bottom: 34px;
}
body.legal-page .legal-hero {
padding-top: 22px;
}
.map-placeholder,
.map-frame-shell {
min-height: 320px;
}
.map-placeholder {
padding: 24px 20px;
}
.footer-meta {
margin-top: 16px;
padding: 16px;
border-radius: 8px;
}
.footer-meta-links {
width: 100%;
gap: 10px;
}
.footer-meta-links a,
.footer-meta-button {
flex: 1 1 180px;
}
.legal-intro,
.legal-card {
padding: 22px;
}
.cookie-banner {
left: 10px;
right: 10px;
bottom: calc(78px + env(safe-area-inset-bottom));
}
.cookie-banner-panel {
max-height: calc(100vh - 110px);
overflow-y: auto;
padding: 16px;
border-radius: 18px;
}
.cookie-banner-actions {
display: grid;
grid-template-columns: 1fr;
width: 100%;
justify-content: stretch;
}
.cookie-button,
.cookie-banner-link {
width: 100%;
min-width: 0;
flex: none;
}
}
@media (max-width: 440px) {
.map-placeholder {
padding: 20px 16px;
}
.footer-meta {
padding: 14px;
}
.footer-meta-links a,
.footer-meta-button,
.cookie-button,
.cookie-banner-link {
width: 100%;
flex-basis: 100%;
}
.cookie-banner {
bottom: calc(72px + env(safe-area-inset-bottom));
}
}
.info-grid .panel,
.dimension-card,
.color-card,
.gallery-item,
.location-panel {
min-height: 220px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 251, 0.96)),
linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 58%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
0 16px 30px rgba(16, 32, 48, 0.10);
color: var(--text);
}
.info-grid .panel::before,
.dimension-card::before,
.color-card::before,
.gallery-item::before,
.location-panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(90deg, rgba(25, 92, 144, 0.92), rgba(255, 255, 255, 0.82), rgba(25, 92, 144, 0.92)) top / 100% 4px no-repeat,
linear-gradient(135deg, rgba(143, 184, 220, 0.15), transparent 58%);
pointer-events: none;
}
.info-grid .panel h3,
.dimension-card h4,
.color-card h4,
.location-panel h3 {
color: var(--dark-soft);
text-shadow: none;
}
.info-grid .panel p,
.color-card p,
.gallery-item figcaption,
.location-panel p {
color: var(--muted);
font-weight: 600;
text-shadow: none;
}
.info-grid .panel:hover,
.info-grid .panel:focus-within,
.dimension-card:hover,
.dimension-card:focus-within,
.color-card:hover,
.color-card:focus-within,
.gallery-item:hover,
.gallery-item:focus-within,
.location-panel:hover,
.location-panel:focus-within {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.94),
0 22px 36px rgba(16, 32, 48, 0.12);
}
.highlight-pill {
background: rgba(25, 92, 144, 0.06);
color: var(--dark-soft);
}
.highlight-pill-values span,
.dimension-label,
.spec-pill,
.dimension-size {
background: rgba(25, 92, 144, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
color: var(--blue-deep);
text-shadow: none;
}
.dimension-label {
border-radius: 999px;
}
.dimension-card {
padding-top: 24px;
}
.spec-pill {
border-radius: 999px;
}
.dimension-size {
color: var(--dark-soft);
font-weight: 800;
}
.dimension-image-slot {
background:
linear-gradient(180deg, rgba(238, 242, 246, 0.98), rgba(222, 228, 235, 0.94)),
linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 56%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 10px 18px rgba(18, 30, 42, 0.05);
}
.color-card {
padding: 20px;
}
.color-card h4 {
margin-bottom: 10px;
}
.color-swatch {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.32),
0 12px 24px rgba(18, 30, 42, 0.06);
}
.gallery-item {
padding: 12px;
}
.gallery-media {
border-radius: 8px;
box-shadow: 0 10px 20px rgba(17, 31, 45, 0.08);
}
.gallery-media::after {
background: linear-gradient(180deg, transparent, rgba(9, 18, 28, 0.06));
}
.location-panel {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(242, 246, 250, 0.96)),
linear-gradient(135deg, rgba(143, 184, 220, 0.12), transparent 58%);
}
.location-actions {
gap: 10px;
}
.location-action {
background: rgba(25, 92, 144, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
color: var(--blue-deep);
}
.location-action:hover,
.location-action:focus-visible {
background: rgba(25, 92, 144, 0.14);
color: var(--blue-deep);
}
.location-action-primary {
background: linear-gradient(180deg, rgba(83, 143, 200, 0.98), rgba(36, 79, 125, 0.98));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.26),
0 10px 20px rgba(36, 79, 125, 0.16);
color: #ffffff;
}
.location-action-primary:hover,
.location-action-primary:focus-visible {
background: linear-gradient(180deg, rgba(92, 153, 211, 1), rgba(40, 84, 131, 1));
color: #ffffff;
}
@media (max-width: 760px) {
.info-grid .panel,
.dimension-card,
.color-card,
.gallery-item,
.location-panel {
min-height: 0;
}
.gallery-item,
.dimension-card,
.color-card {
padding: 16px;
}
}
.gallery-carousel {
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
}
.gallery-carousel::before,
.gallery-carousel::after {
content: "";
position: absolute;
top: 4px;
bottom: 14px;
z-index: 3;
width: 86px;
pointer-events: none;
transition: opacity 0.22s ease;
}
.gallery-carousel::before {
left: 0;
background: linear-gradient(90deg, rgba(246, 246, 242, 0.98), rgba(246, 246, 242, 0));
}
.gallery-carousel::after {
right: 0;
background: linear-gradient(270deg, rgba(246, 246, 242, 0.98), rgba(246, 246, 242, 0));
}
.gallery-carousel.is-at-start::before,
.gallery-carousel.is-at-end::after {
opacity: 0;
}
.gallery-carousel .gallery {
display: flex;
gap: 18px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding: 6px 4px 16px;
scroll-padding-inline: 4px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.gallery-carousel .gallery::-webkit-scrollbar {
display: none;
}
.gallery-carousel .gallery-item {
flex: 0 0 clamp(250px, 31vw, 340px);
min-height: 0;
margin: 0;
padding: 10px;
scroll-snap-align: start;
background: linear-gradient(180deg, rgba(252, 252, 250, 0.98), rgba(238, 239, 235, 0.96));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.78),
0 12px 24px rgba(15, 28, 46, 0.10);
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.gallery-carousel .gallery-item:hover,
.gallery-carousel .gallery-item:focus-within {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.84),
0 16px 28px rgba(15, 28, 46, 0.13);
transform: translateY(-2px);
}
.gallery-carousel .gallery-media {
border-radius: 8px;
background:
linear-gradient(180deg, rgba(252, 252, 250, 0.94), rgba(238, 239, 235, 0.9)),
#f0f0eb;
}
.gallery-carousel .gallery-media::before {
content: "";
position: absolute;
inset: -20px;
z-index: 0;
background: var(--gallery-bg) center / cover no-repeat;
filter: blur(20px) saturate(0.95);
opacity: 0.42;
transform: scale(1.08);
}
.gallery-carousel .gallery-media::after {
z-index: 1;
height: 100%;
background:
linear-gradient(90deg, rgba(246, 246, 242, 0.28), transparent 20%, transparent 80%, rgba(246, 246, 242, 0.28)),
linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 44%, rgba(9, 18, 28, 0.06));
}
.gallery-carousel .gallery-media img {
position: relative;
z-index: 2;
object-fit: cover !important;
}
.gallery-control {
position: absolute;
top: calc(50% - 14px);
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 0;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(234, 241, 247, 0.9)),
linear-gradient(135deg, rgba(143, 184, 220, 0.18), transparent 58%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
0 12px 22px rgba(16, 32, 48, 0.16);
color: var(--blue-deep);
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, opacity 0.22s ease;
}
.gallery-control-prev {
left: 10px;
}
.gallery-control-next {
right: 10px;
}
.gallery-control span {
display: block;
margin-top: -1px;
font-size: 1.8rem;
line-height: 1;
}
.gallery-control:hover,
.gallery-control:focus-visible {
background:
linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(226, 237, 246, 0.96)),
linear-gradient(135deg, rgba(143, 184, 220, 0.22), transparent 58%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.96),
0 16px 28px rgba(16, 32, 48, 0.18);
outline: 2px solid rgba(76, 131, 184, 0.28);
outline-offset: 2px;
transform: translateY(-1px);
}
.gallery-control:disabled {
cursor: default;
opacity: 0;
pointer-events: none;
}
@media (max-width: 760px) {
.gallery-carousel {
border-radius: 8px;
}
.gallery-carousel::before,
.gallery-carousel::after {
display: none;
}
.gallery-carousel .gallery {
margin-inline: -4px;
padding-inline: 4px;
scroll-padding-inline: 4px;
}
.gallery-carousel .gallery-item {
flex-basis: min(84vw, 340px);
}
.gallery-control {
width: 42px;
height: 42px;
top: calc(50% - 21px);
opacity: 0.94;
}
.gallery-control-prev {
left: 6px;
}
.gallery-control-next {
right: 6px;
}
.gallery-control span {
font-size: 1.65rem;
}
}
/* Vertical realisations gallery */
.gallery-section {
max-width: 1180px;
margin-bottom: 58px;
}
.gallery-section .section-heading {
max-width: 860px;
margin-bottom: 24px;
}
.realisation-gallery {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(18px, 2.2vw, 30px);
align-items: start;
}
.realisation-gallery .gallery-item {
grid-column: span 4;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 8px;
background: rgba(252, 252, 250, 0.98);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.86),
0 18px 34px rgba(15, 28, 46, 0.12);
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.realisation-gallery .gallery-item::before {
display: none;
}
.realisation-gallery .gallery-item:nth-child(1),
.realisation-gallery .gallery-item:nth-child(4) {
grid-column: span 7;
}
.realisation-gallery .gallery-item:nth-child(2),
.realisation-gallery .gallery-item:nth-child(3) {
grid-column: span 5;
}
.realisation-gallery .gallery-media {
aspect-ratio: auto;
border-radius: 0;
background: #111820;
}
.realisation-gallery .gallery-item:nth-child(1) .gallery-media,
.realisation-gallery .gallery-item:nth-child(4) .gallery-media {
aspect-ratio: auto;
}
.realisation-gallery .gallery-media::before {
display: none;
}
.realisation-gallery .gallery-media::after {
z-index: 2;
height: 32%;
background: linear-gradient(180deg, transparent, rgba(8, 16, 24, 0.14));
}
.realisation-gallery .gallery-media img {
position: relative;
z-index: 1;
height: auto;
object-fit: contain !important;
}
.realisation-gallery .gallery-item:hover,
.realisation-gallery .gallery-item:focus-within {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 24px 44px rgba(15, 28, 46, 0.16);
transform: translateY(-3px);
}
@media (max-width: 980px) {
.gallery-section {
max-width: 100%;
}
.realisation-gallery .gallery-item,
.realisation-gallery .gallery-item:nth-child(1),
.realisation-gallery .gallery-item:nth-child(2),
.realisation-gallery .gallery-item:nth-child(3),
.realisation-gallery .gallery-item:nth-child(4) {
grid-column: span 6;
}
}
@media (max-width: 640px) {
.realisation-gallery {
grid-template-columns: 1fr;
gap: 18px;
}
.realisation-gallery .gallery-item,
.realisation-gallery .gallery-item:nth-child(1),
.realisation-gallery .gallery-item:nth-child(2),
.realisation-gallery .gallery-item:nth-child(3),
.realisation-gallery .gallery-item:nth-child(4) {
grid-column: 1;
}
.realisation-gallery .gallery-media,
.realisation-gallery .gallery-item:nth-child(1) .gallery-media,
.realisation-gallery .gallery-item:nth-child(4) .gallery-media {
aspect-ratio: auto;
}
}