/* ============================================================
   SABEL IMMO — DESIGN SYSTEM « SIGNATURE »
   Audacieux · grande typo · off-white + noir + vermillon
   Type : Syne (display) + Space Grotesk (texte/UI)
   Ombres portées nettes (hard shadow), blocs de couleur.
   ============================================================ */
:root{
  /* Surfaces */
  --paper:#F5F1E8;       /* off-white chaud */
  --paper-2:#ECE6D8;     /* sable */
  --card:#FFFDF8;        /* blanc cass\u00e9 */
  --cream:#EFEADD;       /* section altern\u00e9e */

  /* Encre */
  --ink:#131211;         /* presque noir */
  --ink-2:#3D3A34;       /* brun-gris */
  --ink-soft:#8A857A;    /* gris chaud */

  /* Accent signature */
  --brick:#2E43E0;       /* cobalt (principal) */
  --brick-dark:#2334C0;
  --sage:#16171B;        /* near-black (blocs sombres) */
  --sage-dark:#0E0F12;
  --gold:#FF6A4D;        /* corail (pop secondaire) */

  /* Lignes & ombres */
  --line:#DAD3C3;
  --line-2:#C7BFAC;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --shadow-brick:6px 6px 0 var(--brick);

  /* Rayons */
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;
  --pill:999px;

  --bd:2.5px solid var(--ink);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
img,svg,video{max-width:100%; height:auto;}
body{
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga","ss01";
}

/* ======= NAV ======= */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  column-gap:24px;
  padding:16px 30px;
  background:var(--paper);
  border-bottom:var(--bd);
}
.nav-meta{
  display:flex; gap:16px; align-items:center;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
  font-family:'Space Grotesk',monospace;
}
.nav-meta .dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--brick); margin-right:7px; vertical-align:middle;
  animation:blink 1.8s infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.nav-logo{
  font-family:'Syne',sans-serif;
  font-weight:800; font-size:1.35rem; color:var(--ink); text-decoration:none;
  letter-spacing:-.03em; white-space:nowrap; padding:0 6px; justify-self:center;
  display:inline-flex; align-items:center; gap:10px;
}
.nav-logo .amp{color:var(--brick); font-weight:700; position:relative; z-index:0;}
.nav-logo .amp::after{content:''; position:absolute; left:-1px; right:-1px; bottom:.04em; height:.14em; background:var(--gold); z-index:-1;}
.logo-ic{width:37px; height:37px; display:block; flex-shrink:0;}
.footer-brand .logo-ic{width:46px; height:46px;}
.nav-links{
  display:flex; align-items:center; gap:4px; list-style:none; justify-content:flex-end;
}
.nav-links a{
  font-family:'Space Grotesk',sans-serif;
  font-size:.86rem; font-weight:600; letter-spacing:.01em;
  color:var(--ink); text-decoration:none;
  padding:9px 15px; border-radius:var(--pill); white-space:nowrap;
  border:2px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
}
.nav-links a:hover{border-color:var(--ink);}
.nav-links a.active{background:var(--ink); color:var(--paper);}
.nav-cta{
  background:var(--brick) !important; color:#fff !important;
  border:2px solid var(--ink) !important;
  box-shadow:3px 3px 0 var(--ink);
  padding:9px 18px !important;
  transition:transform .12s, box-shadow .12s !important;
}
.nav-cta:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink);}

@media(max-width:1080px){
  nav{grid-template-columns:auto 1fr; column-gap:16px; padding:12px 18px;}
  .nav-meta{display:none;}
  .nav-logo{justify-self:start; padding:0;}
}
@media(max-width:760px){
  .nav-links a{font-size:.8rem; padding:7px 10px;}
  .nav-cta{padding:7px 13px !important;}
}
@media(max-width:640px){
  .nav-links a:not(.nav-cta):not([href$="login.html"]){display:none;}
}
@media(max-width:420px){
  .nav-links a:not(.nav-cta){display:none;}
}

/* ======= GENERIC TYPE ======= */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink);
  background:var(--card);
  padding:6px 14px; border:2px solid var(--ink); border-radius:var(--pill);
  margin-bottom:24px; white-space:nowrap;
}
.kicker-num{color:var(--brick); font-weight:700;}

h1.editorial, h2.editorial, h3.editorial{
  font-family:'Syne',sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.98;
  color:var(--ink);
}
h1.editorial em, h2.editorial em, h3.editorial em, .ital{
  font-style:normal; color:var(--brick);
}

.lede{
  font-size:1.18rem; line-height:1.6; color:var(--ink-2);
  max-width:56ch;
}

/* ======= BUTTONS ======= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.95rem; font-weight:700; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  padding:15px 26px; border-radius:var(--pill);
  border:2.5px solid var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .15s, color .15s;
}
.btn-primary{background:var(--brick); color:#fff; box-shadow:5px 5px 0 var(--ink);}
.btn-primary:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink);}
.btn-secondary{background:var(--paper); color:var(--ink); box-shadow:5px 5px 0 var(--ink);}
.btn-secondary:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); background:var(--ink); color:var(--paper);}
.btn-ghost{background:var(--card); color:var(--ink); box-shadow:4px 4px 0 var(--ink);}
.btn-ghost:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}
.btn .arrow{font-size:1.1em; line-height:1; transition:transform .15s;}
.btn:hover .arrow{transform:translateX(4px);}

/* ======= FOOTER ======= */
footer{background:var(--ink); color:var(--paper); margin-top:0; border-top:var(--bd);}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
  padding:70px 40px 40px; max-width:1280px; margin:0 auto;
}
.footer-brand .nav-logo{font-size:1.9rem; color:var(--paper);}
.footer-brand .nav-logo .amp{color:var(--brick);}
.footer-brand p{font-size:.98rem; line-height:1.6; color:rgba(245,241,232,.6); margin-top:16px; max-width:36ch;}
.footer-col h4{font-family:'Syne',sans-serif; font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
.footer-col a{color:rgba(245,241,232,.8); text-decoration:none; font-weight:500; transition:color .15s;}
.footer-col a:hover{color:var(--brick);}
.footer-bar{
  border-top:1px solid rgba(245,241,232,.16); padding:22px 40px;
  max-width:1280px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-size:.82rem; color:rgba(245,241,232,.5); font-weight:500;
  font-family:'Space Grotesk',monospace;
}
.footer-bar em{color:var(--gold); font-style:normal;}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr; padding:50px 22px 30px;}
  .footer-bar{flex-direction:column; gap:10px; text-align:center; padding:22px;}
}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr;}}

/* ======= REVEAL ======= */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.visible{opacity:1; transform:translateY(0);}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* ======= IMAGE SLOTS ======= */
image-slot{display:block; background:var(--paper-2);}

/* ======= UTILITIES ======= */
.container{max-width:1280px; margin:0 auto;}
section{padding:96px 40px;}
@media(max-width:900px){section{padding:64px 20px;}}
.rule{height:2.5px; background:var(--ink); border:0;}