/* REALTI one card — styles.css */
@font-face{font-family:"Basier Square";src:url("assets/fonts/BasierSquare-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Basier Square";src:url("assets/fonts/BasierSquare-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Basier Square";src:url("assets/fonts/BasierSquare-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* ==========================================================================
   REALTI Design System — Colors & Type
   Brand: REALTI Group (Swiss Design Authority for high-end real estate)
   ========================================================================== */

/* ---------- FONTS ----------
   Basier Square — the only typeface for all text.
   Regular 400 · Medium 500 · SemiBold 600 · Bold 700 (+ italics at 600/700).
   (Garde, 700 and italics removed: unused on the one-card.) */
:root {
  /* ==============================================================
     COLOR — raw palette (from uploads/Colors.png + figma metadata)
     ============================================================== */

  /* Neutrals (primary surface / text system) — only what the brand actually uses */
  --white:        #FFFFFF;  /* dominant surface */
  --off-white:    #F2F2F2;  /* subtle page surface */
  --grey-300:     #D9D9D9;  /* divider */
  --grey-500:     #A1A1A1;  /* muted text */
  --ink-800:      #222222;
  --ink-900:      #141414;  /* primary dark text */
  --black:        #000000;

  /* Brand navy — the REALTI signature. Two real values: primary + pale alt bg. */
  --navy-900:     #00113A;  /* primary brand navy — logo, text, fills, dark sections */
  --navy-mist:    #CBDAE4;  /* cool pale blue — alternative page background to navy 900 */

  /* Accent — used sparingly ("avec parcimonie"): the single REALTI accent color */
  --blue-accent:  #3F97FF;  /* electric blue — links, small dots, arrows. ONLY accent in the system. */

  /* Shadow tokens — REALTI uses shadows sparingly.
     There are really just two: a soft dark lift on large display text,
     and a soft white glow on focused form inputs placed on navy. */
  --shadow-headline:    0px 4px 54px rgba(0,0,0,0.30);   /* text-shadow for display headlines on dark bg */
  --shadow-focus-dark:  0px 4px 14px rgba(255,255,255,0.5), 0px 1px 1px rgba(255,255,255,0.25); /* input focus on navy */

  /* Overlays — preferred over drop shadows for modal / hero washes. */
  --overlay-05:       rgba(0,0,0,0.05);
  --overlay-10:       rgba(0,0,0,0.10);
  --overlay-25:       rgba(0,0,0,0.25);
  --overlay-40:       rgba(0,0,0,0.40);
  --overlay-75:       rgba(0,0,0,0.75);
  --light-25:         rgba(255,255,255,0.25);
  --light-50:         rgba(255,255,255,0.50);

  /* ==============================================================
     SEMANTIC — use these in components
     ============================================================== */
  --bg-page:       var(--white);
  --bg-subtle:     var(--off-white);
  --bg-inverse:    var(--navy-900);
  --bg-ink:        var(--ink-900);

  --fg-primary:    var(--ink-900);     /* body text on light */
  --fg-brand:      var(--navy-900);    /* headline ink */
  --fg-muted:      var(--grey-500);    /* meta, captions */
  --fg-subtle:     rgba(20,20,20,0.5); /* dimmed body */
  --fg-on-dark:    var(--white);
  --fg-on-dark-muted: rgba(255,255,255,0.6); /* dimmed white for nav labels on navy */
  --fg-link:       var(--blue-accent);

  --border-hair:   rgba(0,0,0,0.10);
  --border-soft:   var(--grey-300);
  --border-strong: var(--ink-900);

  --accent-primary: var(--blue-accent);

  /* ==============================================================
     TYPE SCALE
     Basier Square is the signature body + display.
     Garde is a secondary editorial serif-ish display used in hero.
     ============================================================== */
  --font-sans:     "Basier Square", system-ui, -apple-system, sans-serif;
  --font-display:  "Garde", "Basier Square", serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* Sizes (px) — modular scale per REALTI Figma (base 16, ratio 1.25).
     Figma page: /Social-media/Type-social. These are the ONLY sizes. */
  --fs-61:    61px;  /* 3.812rem */
  --fs-49:    49px;  /* 3.062rem */
  --fs-39:    39px;  /* 2.438rem */
  --fs-31:    31px;  /* 1.938rem */
  --fs-25:    25px;  /* 1.562rem */
  --fs-20:    20px;  /* 1.250rem */
  --fs-16:    16px;  /* 1.000rem — base */
  --fs-13:    13px;  /* 0.812rem */
  --fs-10:    10px;  /* 0.625rem */

  /* Semantic aliases — prefer these in components. */
  --fs-display:   var(--fs-61);
  --fs-h1:        var(--fs-49);
  --fs-h2:        var(--fs-39);
  --fs-h3:        var(--fs-31);
  --fs-h4:        var(--fs-25);
  --fs-body-lg:   var(--fs-20);
  --fs-body:      var(--fs-16);
  --fs-caption:   var(--fs-13);
  --fs-micro:     var(--fs-10);

  --lh-tight:   1.0;    /* @kind other */
  --lh-snug:    1.1;    /* @kind other */
  --lh-scale:   1.25;   /* @kind other */
  --lh-normal:  1.35;   /* @kind other */
  --lh-body:    1.5;    /* @kind other */

  --tr-display:  -0.02em;  /* @kind other */
  --tr-body:     -0.02em;  /* @kind other */
  --tr-tight:    -0.02em;  /* @kind other */
  --tr-normal:   0;        /* @kind other */
  --tr-wide:     0.02em;   /* @kind other */

  /* ==============================================================
     SPACING & RADII
     ============================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radii — REALTI uses three, strictly by role.
     00: square (default) for all surfaces — cards, images, sections, form fields.
     Pill:  9999px for ALL buttons & CTAs. In the Figma these appear as
            borderRadius: 66.77, 172, 320… — i.e. half-height of the button.
     Circle: 50% for round marks — circle CTAs, R-monogram, avatars, slider counter.
     --radius-chip (2px) is only used on tiny state chips. */
  --radius-sharp:  0;
  --radius-chip:   2px;
  --radius-pill:   9999px;
  --radius-circle: 50%;

  /* Motion */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);   /* @kind other */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:     160ms;   /* @kind other */
  --dur-base:     280ms;   /* @kind other */
  --dur-slow:     520ms;   /* @kind other */
}

/* ==========================================================================
   BASE ELEMENT STYLES
   ========================================================================== */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-scale);
  letter-spacing: var(--tr-display);
  color: var(--fg-brand);
  font-weight: 400;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-scale);
  letter-spacing: var(--tr-display);
  color: var(--fg-brand);
  font-weight: 400;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-scale);
  letter-spacing: var(--tr-display);
  color: var(--fg-brand);
  font-weight: 400;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-scale);
  letter-spacing: var(--tr-display);
  color: var(--fg-brand);
  font-weight: 400;
  margin: 0;
}

.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-scale);
  letter-spacing: var(--tr-display);
  color: var(--fg-brand);
  font-weight: 400;
}

.eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-wide);
  color: var(--fg-muted);
}

p, .body {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-primary);
}

small, .body-sm {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--fg-subtle);
}

a {
  color: var(--fg-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* A hairline horizontal rule in the REALTI style — soft dark line */
hr, .rule {
  border: 0;
  height: 1px;
  background: var(--border-hair);
  margin: var(--space-5) 0;
}

/* A 1px blue tick — used at top-left of nav overlays (see /UI/nav).
   The single accent color in the system. */
.tick-accent {
  display: inline-block;
  width: 78px;
  height: 1px;
  background: var(--blue-accent);
}


*{box-sizing:border-box}html,body{margin:0}body{font-family:"Basier Square",system-ui,sans-serif;color:#00113A;background:#fff}
a{color:#00113A;text-decoration:none}a:hover{color:#3F97FF}
.stage,.svc{display:contents}.veil{position:absolute;left:0;top:0;background:no-repeat;transform:translate(calc(var(--vx,0px) + var(--p)),calc(var(--vy,0px) + var(--q)));-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect;opacity:0;transition:opacity 1.4s cubic-bezier(.65,0,.35,1);pointer-events:none}.veil.on{opacity:0}.hero{position:relative;height:100vh;height:100svh;min-height:760px;overflow:hidden;background:#fff}
#topo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.nav{position:absolute;left:clamp(24px,4.4vw,64px);right:clamp(24px,4.4vw,64px);top:36px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:4}
.nav img{height:60px;width:auto;display:block}
.pill{justify-self:end;display:inline-flex;align-items:center;height:48px;padding:0 28px;border-radius:9999px;background:#00113A;color:#fff;font-size:15px;font-weight:500;transition:background .28s cubic-bezier(.2,.8,.2,1),transform .05s}.pill:hover{background:#3F97FF;color:#fff}
.w{position:absolute;left:50%;top:50%;transform:translate(-50%,-47%);z-index:2;white-space:nowrap;font-weight:500;line-height:.9;letter-spacing:-.065em;color:transparent;padding:.18em .06em .3em;overflow:visible;opacity:0;transition:opacity 1.4s cubic-bezier(.65,0,.35,1)}

.w.on{opacity:1;transition-duration:1.4s}
@property --p{syntax:'<length>';inherits:true;initial-value:0px}
@property --q{syntax:'<length>';inherits:true;initial-value:0px}
@keyframes pan{from{--p:0px;--q:0px}to{--p:-100px;--q:30px}}
.w{-webkit-background-clip:text;background-clip:text;background-image:var(--img);background-repeat:no-repeat;background-position:calc(var(--ox,0px) + var(--p)) calc(var(--oy,0px) + var(--q))}
.l{display:inline-block;padding:.16em .03em .32em;margin:-.16em -.03em -.32em;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:var(--img);background-repeat:no-repeat;background-position:calc(var(--ox,0px) + var(--p)) calc(var(--oy,0px) + var(--q))}

.k{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#3F97FF}
.s{position:absolute;z-index:3;width:min(370px,31vw)}
.s h2{margin:10px 0 0;font-size:clamp(17px,1.5vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.15;min-height:2.3em}
.s p{margin:8px 0 0;font-size:clamp(13px,1.1vw,15px);line-height:1.45;color:#3a4260;text-wrap:pretty}
.s.l{left:clamp(24px,4.4vw,64px)}.s.r{right:clamp(24px,4.4vw,64px);text-align:right}.s.t{top:156px}.s.b{bottom:56px;height:210px}
.s::before{content:"";display:block;height:1px;width:28px;background:#00113A;margin-bottom:14px;transition:width .52s cubic-bezier(.2,.8,.2,1),background .28s}.s:hover::before{width:72px;background:#3F97FF}.s.r::before{margin-left:auto}
.crop{position:absolute;width:14px;height:14px;border:0 solid #00113A;z-index:2}
footer{background:#00113A;color:#fff;padding:clamp(56px,7vw,104px) clamp(24px,4.4vw,64px) 28px;font-size:clamp(15px,1.2vw,18px);line-height:1.5}footer a{color:#fff}footer a:hover{color:#3F97FF}
.fh{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid rgba(255,255,255,.18)}
.cta{display:inline-flex;align-items:center;gap:.28em;font-size:clamp(40px,7.5vw,128px);font-weight:500;letter-spacing:-.045em;line-height:.95}.cta i{font-style:normal;font-size:.32em;display:inline-flex;align-items:center;justify-content:center;width:2.8em;height:1.5em;border:1px solid rgba(255,255,255,.28);color:#3F97FF;border-radius:9999px;transition:width .6s cubic-bezier(.2,.8,.2,1),background .28s,border-color .28s}.cta i svg{width:2em;height:.6em;overflow:visible;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.cta:hover i{width:4.2em;background:#3F97FF;border-color:#3F97FF;color:#fff}.cta:hover i svg{transform:translateX(.5em)}
.fh p{max-width:300px;margin:0;color:rgba(255,255,255,.7)}
.fc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;row-gap:32px;padding:clamp(32px,4vw,56px) 0;border-bottom:1px solid rgba(255,255,255,.18)}.fc h2{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#3F97FF}.fc ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}.fc div{color:rgba(255,255,255,.78)}
.fb{display:flex;justify-content:flex-end;align-items:center;gap:16px;flex-wrap:wrap;padding-top:28px;font-size:14px;color:rgba(255,255,255,.7)}.fl{width:min(100%,300px);height:auto;display:block}.fb span{display:flex;flex-wrap:wrap;gap:8px 24px}.fb a{white-space:nowrap}.fcc{display:contents}@media(min-width:1280px){.fc li{white-space:nowrap}}@media(min-width:641px) and (max-width:1279px){.fc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ov{position:fixed;inset:0;z-index:50;background:rgba(0,17,58,.55);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}.ov.on{opacity:1;visibility:visible}
.md{position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;background:#fff;color:#00113A;padding:44px 44px 36px;transform:translateY(16px);transition:transform .52s cubic-bezier(.2,.8,.2,1)}.ov.on .md{transform:none}
.md h2{margin:0;font-size:31px;font-weight:400;letter-spacing:-.02em;line-height:1.15}.md .sub{margin:10px 0 28px;font-size:15px;line-height:1.45;color:#3a4260}
.md .x{position:absolute;right:20px;top:16px;width:44px;height:44px;border:0;background:none;font-size:26px;color:#00113A;cursor:pointer}.md .x:hover{color:#3F97FF}
.md label{display:block;margin-bottom:18px}.md label span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6B7183;margin-bottom:6px}
.md input,.md select,.md textarea{width:100%;font:inherit;font-size:16px;color:#00113A;background:none;border:0;border-bottom:1px solid #00113A;padding:8px 0;border-radius:0;outline:none;transition:border-color .28s}.md textarea{resize:vertical;min-height:72px}.md input:focus,.md select:focus,.md textarea:focus{border-color:#3F97FF}
.md .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.md button.go{margin-top:8px;height:48px;padding:0 28px;border:0;border-radius:9999px;background:#00113A;color:#fff;font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .28s cubic-bezier(.2,.8,.2,1),transform .05s}.md button.go:hover{background:#3F97FF}.md button.go:active,.pill:active{transform:scale(.98)}.go .ch,.pill .ch{display:inline-block;margin-left:.35em;transition:transform .28s cubic-bezier(.2,.8,.2,1)}.go:hover .ch,.pill:hover .ch{transform:translateX(3px)}.go .ch,.pill .ch{color:#3F97FF}.go:hover .ch,.pill:hover .ch{color:#fff}
.md .ok{display:none}.md.sent form{display:none}.md.sent .ok{display:block}.md.sent .hd{display:none}
@media(min-width:1700px){.nav img{height:72px}.s{width:430px}.s.t{top:184px}.s h2{font-size:26px}.s p{font-size:17px}}
@media(max-width:1024px){.hero{height:auto;min-height:0;padding:132px clamp(24px,4.4vw,64px) 48px;display:flex;flex-direction:column}.stage{display:block;position:relative;flex:none;height:clamp(200px,34svh,340px)}.svc{display:grid;grid-template-columns:1fr 1fr;gap:40px 40px;margin-top:28px;position:relative;z-index:3}.s,.s.b{position:static;width:auto;height:auto}.s h2{min-height:0}.s.l,.s.r{left:auto;right:auto;text-align:left}.s.r::before{margin-left:0}.crop{display:none}.nav{top:24px}.nav img{height:52px}.s p{font-size:16px}}
@media(max-width:640px){.hero{padding-top:112px}.nav img{height:42px}.pill{height:40px;padding:0 18px}.stage{height:clamp(170px,28svh,260px)}.svc{grid-template-columns:1fr;gap:0;margin-top:12px}.s{display:grid;grid-template-columns:40px 1fr;column-gap:4px;padding:18px 0;border-top:1px solid rgba(0,17,58,.14)}.s:last-child{border-bottom:1px solid rgba(0,17,58,.14)}.s::before{display:none}.s .k{grid-row:1/3;padding-top:5px}.s h2{margin:0;font-size:20px}.s p{margin:6px 0 0;font-size:15px}footer .fc{grid-template-columns:1fr;gap:28px}.fb{flex-direction:column;align-items:flex-start;justify-content:flex-start}}
@media(max-width:560px){.md .row{grid-template-columns:1fr;gap:0}.md{padding:40px 24px 28px}}
@media(prefers-reduced-motion:reduce){.w.pre .l{transform:none}.w.on .l{transition:none}}
.crop.tl{left:clamp(12px,2vw,40px);top:136px;border-left-width:1px;border-top-width:1px}.crop.tr{right:clamp(12px,2vw,40px);top:136px;border-right-width:1px;border-top-width:1px}.crop.bl{left:clamp(12px,2vw,40px);bottom:24px;border-left-width:1px;border-bottom-width:1px}.crop.br{right:clamp(12px,2vw,40px);bottom:24px;border-right-width:1px;border-bottom-width:1px}
.md .k.mb{margin-bottom:14px}
/* accessibility */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid #3F97FF;outline-offset:3px}
.md input:focus-visible,.md select:focus-visible,.md textarea:focus-visible{outline:0;border-color:#3F97FF;box-shadow:0 1px 0 #3F97FF}
.md .x:focus-visible{outline-offset:-4px}
/* buttons that replaced href="#" anchors */
button.pill,button.cta{border:0;font-family:inherit;cursor:pointer}button.cta{background:none;color:#fff;padding:0;text-align:left}button.cta:hover{color:#3F97FF}
/* form extras */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.md .consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 20px;font-size:13px;line-height:1.45;color:#3a4260}.md .consent input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:#00113A}.md .consent a{color:#00113A;text-decoration:underline;text-underline-offset:2px}.md .consent a:hover{color:#3F97FF}
.md .err{display:none;margin:0 0 16px;font-size:14px;line-height:1.45;color:#B3261E}.md .err.on{display:block}
.md button.go[disabled]{opacity:.6;cursor:progress}

address{font-style:normal}
.md .consent{margin-bottom:20px}.md .consent input{padding:0;border:0}.md .consent span{display:inline;margin:0;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:#3a4260}
.md .consent input:focus-visible{outline:2px solid #3F97FF;outline-offset:3px;box-shadow:none}

/* validation du formulaire */
.md .fe{display:block;margin-top:6px;font-size:12px;line-height:1.35;color:#B3261E}.md .fe:empty{display:none}
.md .fe button{border:0;background:none;padding:0;font:inherit;color:#00113A;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.md .fe button:hover{color:#3F97FF}
.md .fe.hint{color:#3a4260}
.md input[aria-invalid="true"]:not(:focus-visible),.md textarea[aria-invalid="true"]:not(:focus-visible){border-color:#B3261E}
@media(max-width:560px){}
.md .consent+.fe{margin:-12px 0 16px}

/* « facultatif » en gris clair, placeholders dans le même gris */
.md em.opt{font-style:normal;font-weight:400;letter-spacing:0;text-transform:none;font-size:12px;color:#A1A1A1;margin-left:6px}
.md input::placeholder,.md textarea::placeholder{color:#A1A1A1;opacity:1}