/* ============================================================
   TOIT POUR TOI — Design System
   Palette: Vert Sauge · Rose Poudré · Ardoise
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --sage:        #7fa08a;
  --sage-dark:   #5a7a66;
  --sage-deep:   #2e4a3a;
  --sage-light:  #a8c4b2;
  --sage-pale:   #dceae3;
  --rose:        #c4938a;
  --rose-light:  #dbb0a8;
  --rose-pale:   #f5e8e5;
  --ink:         #1e2a24;
  --ink-soft:    #2e3d35;
  --ink-muted:   #445550;
  --stone:       #f4f0ec;
  --stone-dark:  #e5dfd7;
  --white:       #ffffff;
  --cream:       #faf8f6;
  --muted:       #7a8c84;
  --muted-light: #b0bdb8;
  --gold:        var(--sage);
  --gold-light:  var(--sage-light);
  --gold-dark:   var(--sage-dark);
  --green:       #4a8c6a;
  --orange:      #c47a2e;
  --red:         #a03030;
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:   'DM Sans', sans-serif;
  --nav-h:       80px;
  --max-w:       1320px;
  --section-pad: 100px;
  --shadow-sm:   0 2px 12px rgba(46,74,58,0.07);
  --shadow-md:   0 8px 32px rgba(46,74,58,0.11);
  --shadow-lg:   0 20px 60px rgba(46,74,58,0.17);
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}

/* ─ NAV ─ */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;display:flex;align-items:center;padding:0 48px;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.nav.transparent{background:transparent}
.nav.scrolled{background:rgba(30,42,36,.97);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(127,160,138,.25)}
.nav.light{background:var(--white);border-bottom:1px solid rgba(0,0,0,.07)}
.nav.light .nav-logo-text{color:var(--ink)}
.nav.light .nav-logo-text span{color:var(--muted)}
.nav.light .nav-logo-img{filter:none}
.nav.light .nav-links a{color:var(--ink-muted)}
.nav.light .nav-links a:hover,.nav.light .nav-links a.active{color:var(--sage-dark)}
.nav.light .nav-cta{border-color:var(--sage);color:var(--sage-dark)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--max-w);margin:0 auto}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-img{height:42px;width:auto;object-fit:contain;filter:brightness(0) invert(1);transition:filter .3s}
.nav-logo-text{font-family:var(--font-display);font-size:1.2rem;font-weight:500;color:var(--white);line-height:1.1}
.nav-logo-text span{display:block;font-size:.6rem;font-family:var(--font-body);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-light);margin-top:2px}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{font-size:.77rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--sage-light)}
.nav-cta{padding:10px 24px;border:1px solid rgba(127,160,138,.6);color:var(--sage-light);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:all .2s var(--ease);display:inline-block}
.nav-cta:hover{background:var(--sage);border-color:var(--sage);color:var(--white)}

/* ─ CONTAINER ─ */
.container{max-width:var(--max-w);margin:0 auto;padding:0 48px}

/* ─ SECTION HEADERS ─ */
.section-eyebrow{display:inline-block;font-size:.67rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-dark);margin-bottom:14px}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:400;line-height:1.15;color:var(--ink)}
.section-title.light{color:var(--white)}
.section-subtitle{font-size:1rem;color:var(--muted);max-width:560px;margin-top:16px;line-height:1.75}

/* ─ PROPERTY CARD ─ */
.prop-card{background:var(--white);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);position:relative}
.prop-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.prop-card-img{position:relative;overflow:hidden;aspect-ratio:4/3}
.prop-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.prop-card:hover .prop-card-img img{transform:scale(1.06)}
.prop-badge{position:absolute;top:14px;left:14px;padding:5px 12px;font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.badge-vente{background:var(--sage-deep);color:var(--white)}
.badge-location{background:var(--rose);color:var(--white)}
.badge-luxury{background:rgba(127,160,138,.15);border:1px solid var(--sage);color:var(--sage-dark)}
.badge-sous-compromis{background:var(--orange);color:var(--white)}
.badge-vendu{background:var(--red);color:var(--white)}
.prop-card-body{padding:22px 24px}
.prop-card-price{font-family:var(--font-display);font-size:1.32rem;font-weight:500;color:var(--ink);margin-bottom:5px}
.prop-card-title{font-size:.91rem;font-weight:500;color:var(--ink);margin-bottom:4px;line-height:1.4}
.prop-card-location{font-size:.77rem;color:var(--muted);display:flex;align-items:center;gap:4px;margin-bottom:14px}
.prop-card-specs{display:flex;gap:16px;padding-top:14px;border-top:1px solid var(--stone-dark)}
.prop-spec{display:flex;align-items:center;gap:5px;font-size:.77rem;color:var(--muted)}
.prop-spec svg{width:13px;height:13px;color:var(--sage)}

/* ─ BUTTONS ─ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;font-family:var(--font-body);font-size:.77rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:all .25s var(--ease)}
.btn-primary{background:var(--sage);color:var(--white)}
.btn-primary:hover{background:var(--sage-dark)}
.btn-outline{border:1px solid var(--sage);color:var(--sage-dark)}
.btn-outline:hover{background:var(--sage);color:var(--white)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--ink-soft)}
.btn-ghost{color:var(--muted);border:1px solid var(--stone-dark)}
.btn-ghost:hover{border-color:var(--sage);color:var(--sage-dark)}
.btn-rose{background:var(--rose);color:var(--white)}
.btn-rose:hover{background:#b07e75}

/* ─ FORMS ─ */
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:.69rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.form-control{width:100%;padding:12px 16px;background:var(--white);border:1px solid var(--stone-dark);font-size:.88rem;color:var(--ink);transition:border-color .2s,box-shadow .2s;outline:none;appearance:none;border-radius:0}
.form-control:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(127,160,138,.13)}
.form-control::placeholder{color:var(--muted-light)}
select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8c84' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

/* ─ GRID ─ */
.props-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}

/* ─ STATUS ─ */
.status-dot{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:500}
.status-dot::before{content:'';width:7px;height:7px;border-radius:50%}
.status-chaud::before{background:#e74c3c}
.status-tiède::before{background:var(--orange)}
.status-froid::before{background:#5b9bd5}
.status-nouveau::before{background:var(--sage)}

/* ─ FOOTER ─ */
.footer{background:var(--sage-deep);color:rgba(255,255,255,.55);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand-name{font-family:var(--font-display);font-size:1.3rem;color:var(--white);margin-bottom:12px}
.footer-logo-img{height:44px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1) opacity(.85)}
.footer-tagline{font-size:.83rem;line-height:1.75}
.footer-h{font-size:.65rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-light);margin-bottom:18px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:.83rem;transition:color .2s}
.footer-links a:hover{color:var(--sage-light)}
.footer-bottom{padding-top:32px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;font-size:.76rem}

/* ─ REVEAL ─ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ─ RESPONSIVE ─ */
@media(max-width:1024px){.container,.nav{padding:0 32px}}
@media(max-width:768px){
  :root{--nav-h:64px;--section-pad:64px}
  .container,.nav{padding:0 20px}
  .nav-links{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .props-grid{grid-template-columns:1fr}
}