/* ========================================================================
SAAFKA Conseiller Template: style.css
Spec: docs/superpowers/specs/2026-05-28-saafka-template-design.md
Rules: §8.7.5 AI-slop kill list (binding), §8.2 motion budget,
§8.7.1 OKLCH palette, §8.7.2 spacing, §8.7.3 type
======================================================================== */
/* ───── Tokens (§8.7.1 / 8.7.2 / 8.7.3 / 8.1) ───── */
:root {
/* Brand blue ramp: SAAFKA brand lock (source of truth: references/) */
--brand-700: #1D4ED8; /* primary hover (darker) */
--brand-600: #2563EB; /* PRIMARY: CTAs, logo, liens forts, accents */
--brand-press:#1E40AF; /* primary press */
--brand-200: #DBEAFE; /* surface: light blue fields, card tints, borders */
--brand-50: #EEF4FF; /* very light blue: subtle section backgrounds */
--surface-green: #DCF7E2; /* soft mint tint: green section backgrounds (W/B/G rotation) */
/* Secondary: SAAFKA mint (signature accent, e.g. the hero badge) */
--secondary: #B1FFBA;
--secondary-press: #9DF4A8;
/* Titles #020713 · Text #212B41 · muted = text at lower opacity (blue-tinted, never raw grey) */
--ink-950: #020713; /* titles H1→H6 */
--ink-800: #111A2E;
--ink-700: #212B41; /* body text */
--ink-500: #6A7286; /* muted (~60%): ledes, captions */
--ink-400: #99A0AE; /* subtle (~45%) */
--ink-300: #CCD2DC; /* dividers / light border */
--ink-200: #E3E7EE; /* borders */
--ink-100: #F1F4FA; /* very light surface */
--paper: #FFFFFF;
--canvas: #FFFFFF;
/* Functional: SAAFKA exact */
--success: #79F083;
--warning: #FDCC62;
--danger: #FF6875;
/* Spacing scale */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
/* Radii */
--r-1: 6px;
--r-2: 10px;
--r-3: 14px;
--r-4: 20px;
--r-5: 28px;
--r-pill: 999px;
/* Shadows: SAAFKA: light, border-first elevation (no heavy drop shadows) */
--sh-1: 0 1px 2px rgba(2,7,19,0.04), 0 1px 1px rgba(2,7,19,0.04);
--sh-2: 0 4px 12px rgba(2,7,19,0.06);
--sh-3: 0 12px 32px rgba(2,7,19,0.08);
--sh-focus: 0 0 0 4px rgba(37,99,235,0.20);
/* Typography */
--font-sans: 'Commissioner', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--t-display: clamp(40px, 5vw, 72px);
--t-h1: clamp(32px, 4vw, 56px);
--t-h2: clamp(26px, 3vw, 40px);
--t-h3: clamp(20px, 2vw, 28px);
--t-lead: 19px;
--t-body: 16px;
--t-small: 14px;
--t-eyebrow: 12px;
/* Easings: never ease-in */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
/* Container */
--container: 1200px;
--gutter-x: var(--s-6);
}
/* ───── Base reset ───── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
font-size: var(--t-body);
line-height: 1.6;
color: var(--ink-700);
background: var(--canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; }
a { color: var(--brand-600); text-decoration: none; transition: color 160ms var(--ease-out); }
a:hover { color: var(--brand-700); }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: var(--r-1); }
/* ───── Layout primitives ───── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter-x); }
.section { padding-block: var(--s-9); }
.section--canvas { background: var(--ink-100); }
.section--paper { background: var(--paper); }
.section--brand-50 { background: var(--brand-50); }
.section--blue { background: var(--brand-200); } /* #DBEAFE: blue in the rotation */
.section--green { background: var(--surface-green); } /* soft mint: green in the rotation */
.measure { max-width: 65ch; }
/* ───── Typography utilities ───── */
.eyebrow {
display: inline-flex; align-items: center; gap: var(--s-2);
font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--brand-600);
background: var(--paper); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
box-shadow: var(--sh-1);
}
.h1, .h2, .h3 { color: var(--ink-950); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.lede { font-size: var(--t-lead); color: var(--ink-500); margin-top: var(--s-3); line-height: 1.5; }
.num { font-weight: 800; color: var(--ink-950); font-variant-numeric: tabular-nums; }
/* ───── Buttons (§8.2 press feedback mandatory) ───── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
padding: var(--s-3) var(--s-5);
border-radius: var(--r-pill);
font-weight: 600; font-size: var(--t-small);
background: var(--ink-950); color: var(--paper);
transition: transform 120ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
will-change: transform;
}
.btn--primary { background: var(--brand-600); color: var(--paper); }
.btn--primary:hover { background: var(--brand-700); }
.btn--ghost { background: transparent; color: var(--ink-950); box-shadow: inset 0 0 0 1px var(--ink-200); }
.btn--ghost:hover { background: var(--ink-100); }
.btn--lg { padding: var(--s-4) var(--s-6); font-size: var(--t-body); }
.btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--t-eyebrow); letter-spacing: 0.04em; }
.btn:active { transform: scale(0.97); }
.btn .icon { width: 16px; height: 16px; }
/* ───── Icons ───── */
.icon { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.5; }
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 24px; height: 24px; }
/* ───── Chips ───── */
.chip {
display: inline-flex; align-items: center; gap: var(--s-2);
padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
font-size: var(--t-small); font-weight: 500; color: var(--ink-700);
background: var(--ink-100); border: 1px solid var(--ink-200);
}
.chip--brand { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* ═════════════════════════════════════════════════════════════════
Section 1: Header
═════════════════════════════════════════════════════════════════ */
.header {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,0.85);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid transparent;
transition: padding 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.header__inner {
max-width: var(--container); margin-inline: auto;
display: flex; align-items: center; justify-content: space-between;
padding: var(--s-5) var(--gutter-x);
transition: padding 200ms var(--ease-out);
}
.header.is-stuck { border-bottom-color: var(--ink-200); }
.header.is-stuck .header__inner { padding-block: var(--s-3); }
.header.is-stuck .header__logo { transform: scale(0.92); }
.header__brand { display: flex; align-items: center; gap: var(--s-3); }
.header__logo {
height: 28px; width: auto;
transition: transform 200ms var(--ease-out);
transform-origin: left center;
}
.header__nav { display: flex; align-items: center; gap: var(--s-6); }
.header__nav a {
color: var(--ink-700); font-size: var(--t-small); font-weight: 500;
}
.header__nav a:hover { color: var(--ink-950); }
.header__cta { display: flex; gap: var(--s-3); }
@media (max-width: 880px) {
.header__nav { display: none; }
}
/* ═════════════════════════════════════════════════════════════════
Section 2: Hero (type-led, no floating shapes)
═════════════════════════════════════════════════════════════════ */
.hero {
padding-block: var(--s-9) clamp(180px, 22vw, 320px);
background: var(--canvas);
text-align: center; position: relative;
overflow: clip; isolation: isolate;
}
/* ── Hero signature: flat-geometric SAAFKA Casablanca skyline as a bottom band ── */
.hero__skyline {
position: absolute; left: 0; right: 0; bottom: 0;
width: 100%; height: clamp(150px, 20vw, 280px);
object-fit: cover; object-position: center bottom;
z-index: 0; pointer-events: none; user-select: none;
animation: skyline-rise 800ms var(--ease-out) 150ms both;
}
@keyframes skyline-rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.hero__inner { max-width: 980px; margin-inline: auto; padding-inline: var(--gutter-x); position: relative; z-index: 1; }
.hero__eyebrow {
margin-bottom: var(--s-5);
background: var(--secondary); color: var(--ink-950); box-shadow: none;
}
.hero__title {
font-size: clamp(40px, 5vw, 72px); font-weight: 800;
color: var(--ink-950); letter-spacing: -0.04em; line-height: 1.03;
max-width: 16ch; margin-inline: auto;
text-wrap: balance;
}
.accent { color: var(--brand-600); }
.hero__tagline {
margin: var(--s-4) auto 0;
font-size: 16px;
font-weight: 500;
color: var(--brand-600);
letter-spacing: -0.01em;
font-style: italic;
}
.hero__cta {
margin-top: var(--s-7);
display: flex; flex-wrap: wrap;
align-items: center; justify-content: center;
gap: var(--s-3);
}
.hero__intents {
margin-top: var(--s-7);
display: inline-flex; gap: var(--s-1);
padding: var(--s-1); background: var(--paper);
border-radius: var(--r-pill); box-shadow: var(--sh-2);
}
.hero__intent {
padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
font-size: var(--t-small); font-weight: 600; color: var(--ink-700);
transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.hero__intent:hover { background: var(--ink-100); }
.hero__intent:active { transform: scale(0.97); }
.hero__intent.is-active { background: var(--brand-600); color: var(--paper); }
.hero__search {
margin: var(--s-6) auto 0; max-width: 720px;
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
background: var(--paper); border-radius: var(--r-pill);
box-shadow: var(--sh-3);
}
.hero__search input {
flex: 1; border: 0; outline: 0; font-size: var(--t-body); color: var(--ink-950);
background: transparent; min-width: 0;
}
.hero__search input::placeholder { color: var(--ink-400); }
.hero__trending {
margin-top: var(--s-5); display: flex; flex-wrap: wrap;
align-items: center; justify-content: center; gap: var(--s-2);
font-size: var(--t-small); color: var(--ink-500);
}
/* ═════════════════════════════════════════════════════════════════
Property card + asymmetric grid (§3 Mes biens, §4 Réseau)
═════════════════════════════════════════════════════════════════ */
.grid-asym {
display: grid; gap: var(--s-5);
grid-template-columns: repeat(3, 1fr);
}
.grid-asym__feature,
.grid-asym__item { grid-column: span 1; }
@media (max-width: 880px) {
.grid-asym { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.grid-asym { grid-template-columns: 1fr; }
}
.property {
background: var(--paper); border-radius: var(--r-5);
overflow: hidden; box-shadow: var(--sh-1);
transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
display: flex; flex-direction: column;
}
@media (hover: hover) and (pointer: fine) {
.property:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
}
.property__media {
position: relative; aspect-ratio: 4 / 3; background: var(--ink-100);
overflow: hidden;
}
.property__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 600ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.property:hover .property__media img { transform: scale(1.05); }
}
.property__badge {
position: absolute; top: var(--s-3); left: var(--s-3);
background: var(--ink-950); color: var(--paper);
padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
display: inline-flex; align-items: center; gap: var(--s-1);
}
.property__badge--brand { background: var(--brand-600); }
.property__badge--louer { background: var(--success); }
.property__meta-text { font-size: var(--t-small); color: var(--ink-500); margin-top: auto; }
.property__fav {
position: absolute; top: var(--s-3); right: var(--s-3);
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.92);
display: grid; place-items: center; color: var(--ink-700);
transition: transform 120ms var(--ease-out), background-color 160ms var(--ease-out);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.property__fav:hover { background: var(--paper); color: var(--danger); }
.property__fav:active { transform: scale(0.92); }
.property__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.property__type { font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.property__title { font-size: var(--t-h3); font-weight: 700; color: var(--ink-950); letter-spacing: -0.01em; line-height: 1.25; }
.property__price { font-size: 22px; font-weight: 800; color: var(--ink-950); }
.property__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--t-small); color: var(--ink-500); margin-top: auto; }
.property__meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.property__advisor {
display: flex; align-items: center; gap: var(--s-2);
padding-top: var(--s-3); border-top: 1px solid var(--ink-100);
font-size: var(--t-small); color: var(--ink-700);
}
.property__avatar {
width: 28px; height: 28px; border-radius: 50%;
background: var(--brand-200); color: var(--brand-700);
display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.empty-state {
background: var(--paper); border: 1px dashed var(--ink-200);
border-radius: var(--r-5); padding: var(--s-7) var(--s-5);
text-align: center; color: var(--ink-500);
grid-column: 1 / -1;
}
.empty-state .h3 { color: var(--ink-700); margin-bottom: var(--s-3); }
/* ───── Section head with right-aligned CTA ───── */
.section-head {
display: flex; align-items: end; justify-content: space-between;
gap: var(--s-6); flex-wrap: wrap;
}
.section-head__cta {
display: inline-flex; align-items: center; gap: var(--s-2);
font-weight: 600; font-size: var(--t-small); color: var(--brand-600);
white-space: nowrap;
transition: gap 200ms var(--ease-out), color 160ms var(--ease-out);
}
.section-head__cta:hover { color: var(--brand-700); gap: var(--s-3); }
.section-head__cta .icon { transition: transform 200ms var(--ease-out); }
.section-head__cta:hover .icon { transform: translateX(2px); }
/* ───── Stat tiles (§7): exemple.html-style 4-tile grid ───── */
.stats-tiles {
display: grid; gap: var(--s-4);
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.stats-tiles { grid-template-columns: repeat(2, 1fr); }
}
.stat-tile {
background: var(--paper); border-radius: var(--r-4);
padding: var(--s-6) var(--s-5);
text-align: center;
box-shadow: var(--sh-1);
transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
}
.stat-tile__num {
font-size: clamp(32px, 3.5vw, 44px);
font-weight: 800;
color: var(--brand-600);
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.stat-tile__label {
margin-top: var(--s-3);
font-size: var(--t-small);
color: var(--ink-500);
font-weight: 500;
}
/* ═════════════════════════════════════════════════════════════════
Section 5: Profil (editorial 2-col, portrait + bio)
═════════════════════════════════════════════════════════════════ */
.profil {
display: grid; gap: var(--s-8);
grid-template-columns: minmax(320px, 420px) 1fr;
align-items: center;
}
.profil__portrait {
border-radius: var(--r-5); overflow: hidden;
aspect-ratio: 1; background: var(--ink-100);
box-shadow: var(--sh-2);
}
.profil__portrait img { width: 100%; height: 100%; object-fit: cover; }
.profil__body { padding-top: var(--s-3); }
.profil__name { margin-bottom: var(--s-3); }
.profil__role { color: var(--ink-500); font-size: var(--t-lead); margin-bottom: var(--s-6); }
.profil__bio { max-width: 65ch; }
.profil__bio p { margin-bottom: var(--s-4); }
.profil__meta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 768px) {
.profil { grid-template-columns: 1fr; }
.profil__portrait { max-width: 340px; }
}
/* ═════════════════════════════════════════════════════════════════
Section 6: Expertise (pure typography)
═════════════════════════════════════════════════════════════════ */
.expertise { max-width: 760px; }
.expertise .h2 { margin-bottom: var(--s-5); }
.expertise p { font-size: var(--t-lead); color: var(--ink-700); }
.expertise p + p { margin-top: var(--s-4); }
.expertise .cta-inline {
margin-top: var(--s-6); display: inline-flex; align-items: center; gap: var(--s-2);
font-weight: 600;
}
/* ═════════════════════════════════════════════════════════════════
Section 7: Stats (editorial prose, NOT metric tiles)
═════════════════════════════════════════════════════════════════ */
.stats-prose {
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.4;
color: var(--ink-700);
font-weight: 400;
max-width: 880px;
letter-spacing: -0.01em;
}
.stats-prose .num {
color: var(--brand-600);
font-weight: 800;
white-space: nowrap;
}
/* ═════════════════════════════════════════════════════════════════
Section 8: vs-Agence (two-col editorial, NOT 4 identical cards)
═════════════════════════════════════════════════════════════════ */
.vs {
display: grid; gap: var(--s-1);
grid-template-columns: 1fr 1fr;
border-radius: var(--r-5); overflow: hidden;
box-shadow: var(--sh-2);
}
.vs__col { padding: var(--s-7) var(--s-6); }
.vs__col--legacy { background: var(--ink-100); color: var(--ink-500); }
.vs__col--saafka { background: var(--brand-600); color: var(--paper); }
.vs__col h3 {
font-size: var(--t-h3); font-weight: 700; margin-bottom: var(--s-5);
letter-spacing: -0.015em;
}
.vs__col--saafka h3 { color: var(--paper); }
.vs__list { display: flex; flex-direction: column; gap: var(--s-4); }
.vs__list li {
display: flex; gap: var(--s-3); align-items: start;
font-size: var(--t-body); line-height: 1.5;
}
.vs__col--legacy .vs__list li::before {
content: ""; width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px;
background: currentColor; opacity: 0.45;
mask: url('/icons.svg#x') center / contain no-repeat;
}
.vs__col--legacy .vs__list li {
position: relative; padding-left: var(--s-5);
}
.vs__col--legacy .vs__list li::before {
position: absolute; left: 0; top: 6px;
content: "·"; font-size: 24px; line-height: 0.5; background: none; mask: none; opacity: 0.6;
}
.vs__col--saafka .vs__list li {
position: relative; padding-left: var(--s-6);
}
.vs__col--saafka .vs__list li::before {
content: ""; position: absolute; left: 0; top: 5px;
width: 18px; height: 18px;
background: currentColor;
mask: url('/icons.svg#check') center / contain no-repeat;
-webkit-mask: url('/icons.svg#check') center / contain no-repeat;
}
@media (max-width: 768px) {
.vs { grid-template-columns: 1fr; }
}
/* ═════════════════════════════════════════════════════════════════
Section 9: Blog
═════════════════════════════════════════════════════════════════ */
.blog-grid {
display: grid; gap: var(--s-5);
grid-template-columns: 1.5fr 1fr 1fr;
}
@media (max-width: 1024px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.article {
background: var(--paper); border-radius: var(--r-5);
overflow: hidden; box-shadow: var(--sh-1);
display: flex; flex-direction: column;
transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.article:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
}
.article__media {
aspect-ratio: 16 / 10; background: var(--ink-100); overflow: hidden;
}
.article__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 600ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.article:hover .article__media img { transform: scale(1.05); }
}
.article__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.article__cat { font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-600); }
.article__title { font-size: var(--t-h3); font-weight: 700; color: var(--ink-950); line-height: 1.25; letter-spacing: -0.01em; }
.article__excerpt { color: var(--ink-500); font-size: var(--t-small); }
.article__byline {
margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--ink-100);
font-size: var(--t-small); color: var(--ink-500);
}
/* ═════════════════════════════════════════════════════════════════
Section 10: FAQ (grid-row animation trick)
═════════════════════════════════════════════════════════════════ */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
border-bottom: 1px solid var(--ink-200);
padding: var(--s-5) 0;
}
.faq details:first-of-type { border-top: 1px solid var(--ink-200); }
.faq summary {
list-style: none;
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-4); cursor: pointer;
font-size: var(--t-lead); font-weight: 600; color: var(--ink-950);
letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; flex-shrink: 0;
width: 22px; height: 22px;
background: currentColor;
mask: url('/icons.svg#chevron-down') center / contain no-repeat;
-webkit-mask: url('/icons.svg#chevron-down') center / contain no-repeat;
transition: transform 240ms var(--ease-in-out);
}
.faq details[open] summary::after { transform: rotate(-180deg); }
.faq__a {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows 240ms var(--ease-in-out);
}
.faq details[open] .faq__a { grid-template-rows: 1fr; }
.faq__a > div {
overflow: hidden; padding-top: var(--s-3);
color: var(--ink-500); font-size: var(--t-body); line-height: 1.6;
max-width: 65ch;
}
/* ═════════════════════════════════════════════════════════════════
Section 11: Zones
═════════════════════════════════════════════════════════════════ */
.zone-tags {
display: flex; flex-wrap: wrap; gap: var(--s-3);
max-width: 900px;
}
.zone-tag {
display: inline-flex; align-items: center; gap: var(--s-2);
padding: var(--s-3) var(--s-4);
border-radius: var(--r-pill);
background: var(--paper); color: var(--ink-700);
font-size: var(--t-small); font-weight: 600;
border: 1px solid var(--ink-200);
transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out),
transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
/* leading dot: surface-blue at rest, primary-blue + pop on hover */
.zone-tag::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--brand-200); flex: 0 0 auto;
transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.zone-tag:hover {
color: var(--ink-950); border-color: var(--brand-600);
transform: translateY(-2px); box-shadow: var(--sh-2);
}
.zone-tag:hover::before { background: var(--brand-600); transform: scale(1.25); }
.zone-tag:active { transform: translateY(0) scale(0.98); }
/* ═════════════════════════════════════════════════════════════════
Section 12: Contact form
═════════════════════════════════════════════════════════════════ */
.contact-wrap {
display: grid; gap: var(--s-8);
grid-template-columns: 1fr 1.2fr; align-items: center;
}
@media (max-width: 880px) {
.contact-wrap { grid-template-columns: 1fr; }
}
.contact-form {
background: var(--paper); border-radius: var(--r-5);
padding: var(--s-6); box-shadow: var(--sh-2);
display: flex; flex-direction: column; gap: var(--s-4);
}
.form-tabs {
display: flex; gap: var(--s-1); padding: var(--s-1);
background: var(--ink-100); border-radius: var(--r-pill);
overflow-x: auto;
}
.form-tab {
padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
font-size: var(--t-small); font-weight: 600; color: var(--ink-500);
white-space: nowrap;
transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.form-tab:hover { color: var(--ink-950); }
.form-tab:active { transform: scale(0.97); }
.form-tab.is-active { background: var(--paper); color: var(--brand-700); box-shadow: var(--sh-1); }
.form-row { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-row--full { grid-template-columns: 1fr; }
.form-field {
display: flex; flex-direction: column; gap: var(--s-1);
}
.form-field label {
font-size: var(--t-small); font-weight: 500; color: var(--ink-700);
}
.form-field input,
.form-field select,
.form-field textarea {
padding: var(--s-3) var(--s-4);
border: 1px solid var(--ink-200); border-radius: var(--r-2);
background: var(--canvas); color: var(--ink-950);
font-size: var(--t-body);
transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-400); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: 0; border-color: var(--brand-600);
box-shadow: 0 0 0 4px var(--brand-50);
}
.form-field textarea { min-height: 100px; resize: vertical; }
.form-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-intro h2 { margin-bottom: var(--s-4); }
.contact-intro p { color: var(--ink-500); font-size: var(--t-lead); max-width: 38ch; }
.contact-intro .chip-row { margin-top: var(--s-5); }
/* ═════════════════════════════════════════════════════════════════
Section 13: Footer
═════════════════════════════════════════════════════════════════ */
.footer {
background: var(--ink-950); color: var(--ink-300);
padding-block: var(--s-9) var(--s-7);
}
.footer__cols {
display: grid; gap: var(--s-7);
grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
@media (max-width: 880px) {
.footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.footer__cols { grid-template-columns: 1fr; }
}
.footer__brand .footer__logo { height: 32px; width: auto; margin-bottom: var(--s-3); filter: brightness(0) invert(1); }
.footer__brand p { color: var(--ink-400); max-width: 40ch; font-size: var(--t-small); }
.footer__brand .footer__socials { margin-top: var(--s-5); display: flex; gap: var(--s-3); }
.footer__brand .footer__socials a {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.08);
display: grid; place-items: center; color: var(--ink-200);
transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.footer__brand .footer__socials a:hover { background: var(--brand-600); color: var(--paper); }
.footer__col h4 {
font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--paper); margin-bottom: var(--s-4);
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--s-3); }
.footer__col a { color: var(--ink-300); font-size: var(--t-small); }
.footer__col a:hover { color: var(--paper); }
.footer__mentions {
margin-top: var(--s-8); padding-top: var(--s-5);
border-top: 1px solid rgba(255,255,255,0.08);
display: flex; flex-wrap: wrap; gap: var(--s-5);
font-size: var(--t-small); color: var(--ink-400);
}
.footer__mentions a { color: var(--ink-400); }
.footer__mentions a:hover { color: var(--paper); }
/* ═════════════════════════════════════════════════════════════════
Reveal animations: page-load stagger (CSS-only, no JS gate)
+ IntersectionObserver for below-fold sections
═════════════════════════════════════════════════════════════════ */
/* Page-load reveals: hero + first visible section, no JS needed */
@keyframes load-fade-up {
from { opacity: 0; transform: translateY(40px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero__eyebrow,
.hero__title,
.hero__tagline,
.hero__cta,
.hero__intents,
.hero__search,
.hero__trending {
animation: load-fade-up 700ms var(--ease-out) backwards;
}
.hero__eyebrow { animation-delay: 80ms; }
.hero__title { animation-delay: 160ms; }
.hero__tagline { animation-delay: 280ms; }
.hero__cta { animation-delay: 380ms; }
.hero__intents { animation-delay: 360ms; }
.hero__search { animation-delay: 460ms; }
.hero__trending { animation-delay: 560ms; }
/* Scroll-triggered section reveals.
Only hidden when JS is present (html.js). Without JS, content shows
normally: no FOUC, no permanently-invisible sections. IntersectionObserver
adds .is-visible as each section scrolls into view. */
/* Container reveal (fade + rise). Containers aren't interactive, so the
:not(.is-visible) hidden state + natural end state is all we need. */
html.js [data-reveal] {
transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
html.js [data-reveal]:not(.is-visible) {
opacity: 0;
transform: translateY(40px);
}
/* Stagger children via a ONE-SHOT animation with fill-mode:backwards. After it
ends, each child reverts to its NATURAL transform (nothing is pinned), so
card/tile/pill :hover and :active transforms keep working. */
html.js [data-reveal]:not(.is-visible) > * { opacity: 0; }
html.js [data-reveal].is-visible > * { animation: reveal-up 650ms var(--ease-out) backwards; }
html.js [data-reveal].is-visible > *:nth-child(1) { animation-delay: 60ms; }
html.js [data-reveal].is-visible > *:nth-child(2) { animation-delay: 140ms; }
html.js [data-reveal].is-visible > *:nth-child(3) { animation-delay: 220ms; }
html.js [data-reveal].is-visible > *:nth-child(4) { animation-delay: 300ms; }
html.js [data-reveal].is-visible > *:nth-child(5) { animation-delay: 380ms; }
html.js [data-reveal].is-visible > *:nth-child(6) { animation-delay: 460ms; }
@keyframes reveal-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* Scroll progress stripe: top of viewport, fills as you scroll */
.scroll-progress {
position: fixed; top: 0; left: 0; z-index: 100;
height: 3px; width: 0;
background: linear-gradient(90deg, var(--brand-600), var(--brand-700));
transition: width 80ms linear;
pointer-events: none;
}
/* ═════════════════════════════════════════════════════════════════
biens.html: dedicated listings page
═════════════════════════════════════════════════════════════════ */
.biens-hero {
padding-block: var(--s-8) var(--s-6);
background: linear-gradient(180deg, var(--brand-50) 0%, var(--canvas) 100%);
}
.breadcrumb {
display: flex; align-items: center; gap: var(--s-2);
font-size: var(--t-small); color: var(--ink-500);
}
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--brand-600); }
.breadcrumb span[aria-hidden] { color: var(--ink-300); }
.filter-bar {
display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.filter-chip {
padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
font-size: var(--t-small); font-weight: 600; color: var(--ink-700);
background: var(--paper); border: 1px solid var(--ink-200);
transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.filter-chip:hover { background: var(--ink-100); }
.filter-chip:active { transform: scale(0.97); }
.filter-chip.is-active { background: var(--brand-600); color: var(--paper); border-color: var(--brand-600); }
.biens-empty {
text-align: center; padding: var(--s-9) var(--s-5);
color: var(--ink-500);
}
.biens-empty .h3 { color: var(--ink-700); margin-bottom: var(--s-3); }
.property[hidden] { display: none; }
/* Live-biens skeleton (shown while fetching the Softnex API) */
.property--skeleton { pointer-events: none; }
.property--skeleton .property__media { background: var(--ink-100); }
.property--skeleton .property__body { gap: var(--s-2); }
.sk { display: block; height: 14px; border-radius: var(--r-1); background: var(--ink-100); }
.sk--sm { width: 30%; } .sk--md { width: 55%; } .sk--lg { width: 80%; height: 20px; }
@keyframes sk-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.property--skeleton .property__media,
.property--skeleton .sk { animation: sk-pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.property--skeleton .property__media,
.property--skeleton .sk { animation: none; }
}
/* Header slides down on first paint */
@keyframes header-drop {
from { opacity: 0; transform: translateY(-100%); }
to { opacity: 1; transform: translateY(0); }
}
.header { animation: header-drop 500ms var(--ease-out) backwards; }
/* ═════════════════════════════════════════════════════════════════
Reduced motion: soften, don't kill. Opacity fades stay, position
movement removed. Users still see something happen, just less.
═════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 200ms !important;
animation-duration: 300ms !important;
scroll-behavior: auto !important;
}
/* Remove the movement, keep the fade */
html.js [data-reveal] { transform: none !important; }
html.js [data-reveal] > * { transform: none !important; }
.hero__eyebrow, .hero__title, .hero__tagline, .hero__cta,
.header { transform: none !important; animation-name: fade-only; }
.hero__skyline { animation: none !important; opacity: 1; transform: none; }
@keyframes fade-only {
from { opacity: 0; }
to { opacity: 1; }
}
.header.is-stuck .header__logo { transform: none; }
}
/* ═════════════════════════════════════════════════════════════════
Responsive section padding
═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.section { padding-block: var(--s-7); }
.hero { padding-block: var(--s-7) var(--s-8); }
}
/* ===== ZELLIGE HORIZON: immersive redesign (workflow synthesis) ===== */
/* ╔══════════════════════════════════════════════════════════════╗
║ SAAFKA ZELLIGE HORIZON: immersive section backgrounds ║
║ 3 planes: (0) woven zellige field · (1) one arch bleed · ║
║ content @ z-index:2 with a clear centre channel. All deco is ║
║ pointer-events:none + aria-hidden, animates NOTHING. ║
╚══════════════════════════════════════════════════════════════╝ */
:root{
/* zellige star tile field: primary blue stroke; ALL # are %23-encoded */
--zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%232563EB' stroke-width='1.2'%3E%3Crect x='24' y='24' width='32' height='32' transform='rotate(45 40 40)'/%3E%3Crect x='24' y='24' width='32' height='32'/%3E%3Cpath d='M40 4V18M40 62V76M4 40H18M62 40H76M14 14L24 24M66 14L56 24M14 66L24 56M66 66L56 56'/%3E%3Ccircle cx='40' cy='40' r='5'/%3E%3C/g%3E%3C/svg%3E");
/* mint-stroke variant for green sections (uses #79F083 ramp for visible stroke on mint) */
--zellige-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%2300A86B' stroke-width='1.2'%3E%3Crect x='24' y='24' width='32' height='32' transform='rotate(45 40 40)'/%3E%3Crect x='24' y='24' width='32' height='32'/%3E%3Ccircle cx='40' cy='40' r='5'/%3E%3C/g%3E%3C/svg%3E");
/* keyhole-arch mask, %23-safe (no # inside; pure path) */
--arch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 420'%3E%3Cpath d='M150 0C70 0 18 54 18 140c0 38 12 66 12 100v180h60V270c0-38 24-64 60-64s60 26 60 64v150h60V240c0-34 12-62 12-100C282 54 230 0 150 0Z'/%3E%3C/svg%3E");
--frame: 1px solid rgba(37,99,235,.16);
}
/* every section becomes a positioned, clipped stage; content lifts above */
.section{ position: relative; isolation: isolate; overflow: clip; }
.section > .container{ position: relative; z-index: 2; }
/* ── PLANE 0 · woven zellige field (per-rotation opacity so it is visible
on white AND on blue/mint, never noisy). Top-band gradient mask keeps
it in the OUTER 25%, leaving the inner copy channel clean. ── */
.section::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background: var(--zellige) center / 140px;
opacity:.04; /* white sections: texture only */
-webkit-mask: linear-gradient(180deg,#000 0 30%, transparent 62%);
mask: linear-gradient(180deg,#000 0 30%, transparent 62%);
}
.section--blue::before{ opacity:.07; } /* blue-on-blue: lift to stay visible */
.section--green::before{ opacity:.07; background-image: var(--zellige-mint); }
/* ── PLANE 1 · ONE oversized keyhole arch, bled off ONE edge, tone-on-tone.
Alternates side per rotation for composed rhythm; always corner-anchored
so the centre stays a clear legible channel. ── */
.section::after{
content:""; position:absolute; z-index:1; pointer-events:none;
width:min(46vw,560px); aspect-ratio:300 / 420;
right:-9%; top:-10%;
color: var(--brand-600); opacity:.07; background: currentColor;
-webkit-mask: var(--arch-mask) center / contain no-repeat;
mask: var(--arch-mask) center / contain no-repeat;
}
.section--blue::after { color: var(--brand-600); opacity:.09; right:-9%; left:auto; top:-10%; bottom:auto; }
.section--green::after{ color: var(--secondary); opacity:.14; left:-10%; right:auto; bottom:-12%; top:auto; }
/* ── PLANE 2 · continuous HORIZON SEAM (neutral, section-color-agnostic so it
survives hidden sections). Pinned to the bottom of seam-bearing sections;
drawn as a mask recolored by currentColor. ── */
.has-seam{ padding-bottom: calc(var(--s-9) + 72px); }
.has-seam .seam{
content:""; position:absolute; left:0; right:0; bottom:0; height:72px; z-index:1;
pointer-events:none; color: var(--paper); /* neutral white silhouette */
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='90' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V58h70V40h60v18h90V30h70v28h120V20l40-12 40 12v38h120V46h80v12h110V34h70v24h120V50h90v8h120V38h70v20h120V60h90V90z'/%3E%3C/svg%3E") bottom / cover no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='90' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V58h70V40h60v18h90V30h70v28h120V20l40-12 40 12v38h120V46h80v12h110V34h70v24h120V50h90v8h120V38h70v20h120V60h90V90z'/%3E%3C/svg%3E") bottom / cover no-repeat;
}
.seam--paper{ color: var(--paper); } /* INTO white sections */
.seam--ink { color: var(--ink-950); opacity:.06; } /* faint variant if desired */
/* ── HERO · faint field behind type + the new inline-SVG generic skyline.
Replaces the ![]()
rules; swap is mechanically complete below. ── */
.hero{ position:relative; isolation:isolate; overflow:clip; }
.hero::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background: var(--zellige) center / 150px; opacity:.05;
-webkit-mask: linear-gradient(180deg,#000 0 22%, transparent 55%);
mask: linear-gradient(180deg,#000 0 22%, transparent 55%);
}
/* signature: giant keyhole arch hugging the headline, bled from the top */
.hero__inner::before{
content:""; position:absolute; z-index:-1; left:50%; top:-6%; transform:translateX(-50%);
width:min(70vw,640px); aspect-ratio:300 / 420; opacity:.06;
color:var(--brand-600); background:currentColor;
-webkit-mask: var(--arch-mask) top / contain no-repeat;
mask: var(--arch-mask) top / contain no-repeat;
}
/* inline