:root{
  --td-green:#4c7a3d;
  --td-gold:#c1903d;
  --td-brown:#2f261b;
  --td-sand:#f5f2eb;
  --td-ink:#1b1a17;
  --td-muted:#6e675f;
  --td-border:rgba(47,38,27,.12);
  --td-shadow: 0 18px 45px rgba(27,26,23,.12);
}

html{scroll-behavior:smooth;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--td-ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(76,122,61,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(193,144,61,.22), transparent 60%),
    linear-gradient(180deg, #fff, var(--td-sand));
}

a{color: inherit;}
.text-muted{color: var(--td-muted)!important;}

.navbar{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--td-border);
}
.navbar .nav-link{color: rgba(27,26,23,.78);}
.navbar .nav-link:hover{color: rgba(27,26,23,1);}
.navbar .btn{border-radius: 999px;}

.brand-mark{
  width: 38px; height: 38px; object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(27,26,23,.12);
}

.hero{
  padding-top: 6.5rem;
  padding-bottom: 4rem;
}
.hero-card{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--td-border);
  border-radius: 22px;
  box-shadow: var(--td-shadow);
}
.hero-kicker{
  display: inline-flex;
  gap:.5rem;
  align-items:center;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--td-border);
  background: rgba(255,255,255,.7);
  color: rgba(27,26,23,.82);
  font-size: .9rem;
}
.hero h1{
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.hero-illus{
  border-radius: 28px;
  border: 1px solid var(--td-border);
  background:
    radial-gradient(600px 400px at 30% 20%, rgba(76,122,61,.35), transparent 60%),
    radial-gradient(600px 400px at 70% 70%, rgba(193,144,61,.35), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.4));
  min-height: 360px;
  box-shadow: var(--td-shadow);
  position: relative;
  overflow: hidden;
}
.hero-illus::after{
  content:"";
  position:absolute; inset:-60px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.28), transparent 70%),
    repeating-linear-gradient(90deg, rgba(47,38,27,.04) 0 1px, transparent 1px 14px);
  transform: rotate(-8deg);
}

.section{
  padding: 4.5rem 0;
}
.section-title{
  letter-spacing: -0.02em;
}
.soft-card{
  border-radius: 22px;
  border: 1px solid var(--td-border);
  background: rgba(255,255,255,.75);
  box-shadow: 0 14px 34px rgba(27,26,23,.09);
}
.icon-pill{
  width: 46px; height: 46px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(76,122,61,.12);
  border: 1px solid rgba(76,122,61,.18);
}
.badge-td{
  background: rgba(193,144,61,.14);
  border: 1px solid rgba(193,144,61,.25);
  color: rgba(27,26,23,.86);
}
.listing-card .thumb{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--td-border);
}
.listing-card .thumb img{width:100%; height: 220px; object-fit: cover;}
.listing-card .meta{
  font-size: .95rem;
  color: var(--td-muted);
}
.price{
  font-weight: 800;
  letter-spacing: -0.02em;
}
.btn-td{
  background: linear-gradient(135deg, var(--td-green), #3f6b33);
  border: none;
  color:#fff;
}
.btn-td:hover{filter: brightness(.95);}
.btn-ghost{
  border-radius: 999px;
  border: 1px solid var(--td-border);
  background: rgba(255,255,255,.7);
}
.pricing .popular{
  outline: 2px solid rgba(76,122,61,.35);
  box-shadow: 0 22px 60px rgba(76,122,61,.18);
}
.footer{
  border-top: 1px solid var(--td-border);
  background: rgba(255,255,255,.55);
}
.small-note{font-size: .9rem; color: var(--td-muted);}

.form-control, .form-select{
  border-radius: 14px;
  border-color: var(--td-border);
  background: rgba(255,255,255,.9);
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(76,122,61,.16);
  border-color: rgba(76,122,61,.35);
}

/* Bootstrap modal polish */
.modal-content{
  border-radius: 22px;
  border: 1px solid var(--td-border);
  box-shadow: var(--td-shadow);
}

/* --- Banner inspirée de Meetic (structure : fond plein écran + carte centrale) --- */
.navbar.is-hero{
  background: rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.navbar.is-hero .nav-link{color: rgba(27,26,23,.85);}
.navbar.is-hero .navbar-brand .small{color: rgba(27,26,23,.75)!important;}

.navbar.navbar-scrolled{
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--td-border);
}

.hero--meetic{
  position: relative;
  padding-top: 7.5rem;
  padding-bottom: 5.5rem;
  min-height: 78vh;
  display: flex;
  align-items: center;
}
.hero--meetic::before{content:"";position:absolute;inset:0;background:none;}
.hero--meetic::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.28) 45%, rgba(0,0,0,.68)),
    radial-gradient(1200px 650px at 15% 15%, rgba(0,0,0,.14), rgba(0,0,0,.48) 50%, rgba(0,0,0,.62));
}
.hero--meetic .container{position: relative; z-index: 2;}

.hero-panel{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 70px rgba(27,26,23,.14);
}
.hero-title{
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.hero-sub{
  font-size: 1.05rem;
  color: rgba(27,26,23,.72);
}
.hero-form{
  border-radius: 22px;
  border: 1px solid rgba(47,38,27,.10);
  background: rgba(255,255,255,.82);
}
.hero-form .input-group-text{
  border: 0;
  background: transparent;
  color: rgba(27,26,23,.55);
}
.hero-form .form-control{
  border: 0;
  background: transparent;
}
.hero-form .form-control:focus{
  box-shadow:none;
}
.hero-quick{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  margin-top: .75rem;
}
.hero-quick .chip{
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(47,38,27,.12);
  background: rgba(255,255,255,.72);
  font-size: .92rem;
}
.hero-float{
  position: relative;
  height: 100%;
  min-height: 420px;
}
.hero-float .float-card{
  position:absolute;
  right: 0;
  width: min(360px, 92%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(27,26,23,.14);
}
.hero-float .float-card.one{top: 20px;}
.hero-float .float-card.two{top: 170px; right: 40px;}
.hero-float .float-card.three{top: 320px; right: 10px;}

@media (max-width: 991px){
  .hero-float{display:none;}
  .hero--meetic{min-height: unset; padding-bottom: 3.5rem;}
}


/* Hero slider (version image) */
.hero--slider .hero-media{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero--slider .heroSlider{
  width:100%;
  height:100%;
}
.hero--slider .heroSlider .swiper-slide{
  background-position:center;
  background-size:cover;
  transform: scale(1.03);
}
.hero--slider .heroSlider .swiper-slide::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 520px at 70% 30%, rgba(0,0,0,.06), rgba(0,0,0,.32));
}

/* Texte sur fond sombre */
.hero--meetic .hero-kicker{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.95);
}
.hero--meetic .hero-title{ color: #fff; }
.hero--meetic .hero-sub{ color: rgba(255,255,255,.86); }
.hero--meetic .small-note{ color: rgba(255,255,255,.78); }

/* Réinitialise les couleurs dans la carte */
.hero-panel{ color: var(--td-text); }
.hero-panel .text-muted{ color: rgba(27,26,23,.72)!important; }


/* Listing filters (section "Biens en vitrine") */
.listing-filter{
  border-radius: 22px;
  border: 1px solid var(--td-border);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: 0 18px 50px rgba(27,26,23,.10);
}
.listing-filter .form-select,
.listing-filter .form-control,
.listing-filter .input-group-text{
  background: rgba(255,255,255,.90);
}

.filter-chip.active{
  background: var(--td-green);
  border-color: rgba(0,0,0,0);
  color: #fff;
}
.filter-chip.active:hover{
  filter: brightness(.98);
}


/* --- Hero slider : zoom léger (Ken Burns) + parallax Swiper --- */
.hero--slider .hero-media{
  position:absolute; inset:0;
  z-index: 0;
  background: #0b0b0b;
}
.hero--slider::after{ z-index: 1; }
.hero--slider .container{ position: relative; z-index: 2; }

.hero--slider .hero-media .swiper-wrapper,
.hero--slider .hero-media .swiper-slide{
  height: 100%;
}

.hero--slider .hero-slide-parallax{
  position:absolute;
  inset:-4%; /* marge pour éviter les bords pendant le parallax */
  will-change: transform;
}

.hero--slider .hero-slide-bg{
  position:absolute; inset:0;
  background-position:center;
  background-size:cover;
  transform: scale(1.06);
  transition: transform 7.5s ease;
  will-change: transform;
  filter: saturate(1.05) contrast(1.05);
}

/* Zoom subtil sur la slide active */
.hero--slider .swiper-slide-active .hero-slide-bg{
  transform: scale(1.14);
}

/* Option : petite variation de zoom sur la slide suivante (effet plus vivant) */
.hero--slider .swiper-slide-next .hero-slide-bg{
  transform: scale(1.10);
}


/* --- Navbar lisible sur bannière sombre + état actif --- */
.navbar.is-hero{
  background: rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.navbar.is-hero .navbar-brand .fw-bold{ color: rgba(255,255,255,.96); }
.navbar.is-hero .navbar-brand .small{ color: rgba(255,255,255,.74)!important; }
.navbar.is-hero .nav-link{ color: rgba(255,255,255,.88); }
.navbar.is-hero .nav-link:hover{ color: rgba(255,255,255,.98); }
.navbar.is-hero .nav-link.active{
  color: rgba(255,255,255,.98);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  padding: .38rem .78rem;
}
.navbar.is-hero .navbar-toggler{
  border-color: rgba(255,255,255,.30);
}
.navbar.is-hero .navbar-toggler-icon{
  filter: invert(1);
  opacity: .92;
}

.navbar.navbar-scrolled .nav-link{ color: rgba(27,26,23,.86); }
.navbar.navbar-scrolled .nav-link:hover{ color: rgba(27,26,23,1); }
.navbar.navbar-scrolled .nav-link.active{
  color: rgba(27,26,23,1);
  background: rgba(47,38,27,.06);
  border: 1px solid rgba(47,38,27,.12);
}


/* Scroll-parallax (déplacement du fond au scroll) */
.hero--meetic{ overflow: hidden; }
.hero--meetic .hero-media,
.hero--meetic .hero-slide-parallax,
.hero--meetic video{
  will-change: transform;
}


/* Parallax scroll PRO : le calque media bouge + zoom (via JS) */
.hero--meetic .hero-media,
.hero--meetic .hero-media video{
  transform-origin: center center;
  backface-visibility: hidden;
}


/* Dépôt bien : modal + CTA */
#depositModal .modal-content{
  border-radius: 22px;
}
#depositModal .modal-header{
  border-bottom: 1px solid rgba(47,38,27,.10);
}
#depositModal .modal-footer{
  border-top: 1px solid rgba(47,38,27,.10);
}
.btn-outline-light{
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.92);
}
.btn-outline-light:hover{
  border-color: rgba(255,255,255,.55);
  color: #fff;
  background: rgba(255,255,255,.10);
}
/* Hero quick actions: garder sur une seule ligne (desktop) */
@media (min-width: 768px){
  .hero-quick{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .6rem;
  }
  .hero-quick::-webkit-scrollbar{ height: 0; }
  .hero-quick .chip{
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .hero-quick .btn{
    white-space: nowrap;
    flex: 0 0 auto;
  }
}
/* Navbar CTA "Déposer un bien" */
.navbar .btn-nav-cta{
  border-radius: 999px;
  padding: .5rem .85rem;
}
.navbar.is-hero .btn-nav-cta{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.96);
}
.navbar.is-hero .btn-nav-cta:hover{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.40);
  color: #fff;
}
.navbar.navbar-scrolled .btn-nav-cta{
  background: rgba(47,38,27,.06);
  border: 1px solid rgba(47,38,27,.12);
  color: rgba(27,26,23,.92);
}
.navbar.navbar-scrolled .btn-nav-cta:hover{
  background: rgba(47,38,27,.10);
}
/* Chip clickable (button/link) */
.chip-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background: rgba(255,255,255,.72);
}
.chip-btn{ border: 1px solid rgba(47,38,27,.12); }
.chip-btn:hover{
  background: rgba(255,255,255,.90);
}
.chip--cta{
  border-color: rgba(28,173,102,.28) !important;
  background: rgba(28,173,102,.14) !important;
}
.chip--cta:hover{
  background: rgba(28,173,102,.20) !important;
}
/* Hero quick split: bouton à gauche, chips à droite */
.hero-quick.hero-quick--split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}
.hero-quick.hero-quick--split .hero-quick-left{
  flex:0 0 auto;
}
.hero-quick.hero-quick--split .hero-quick-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 0;
  flex-wrap:wrap;
  margin-left:auto;
}
@media (min-width: 768px){
  .hero-quick.hero-quick--split{ flex-wrap:nowrap; }
  .hero-quick.hero-quick--split .hero-quick-right{ flex-wrap:nowrap; }
  .hero-quick.hero-quick--split .hero-quick-right .chip{ white-space:nowrap; }
}
/* compact par défaut */
  padding: 0;

  border-radius: 999px;
  border: 1px solid rgba(28,173,102,.38);

  /* état "transparent" */
  background: rgba(255,255,255,0);
  color: rgba(28,173,102,.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  overflow: hidden;
  z-index: 1060; /* au-dessus du contenu */
  box-shadow: 0 14px 34px rgba(0,0,0,.12);

  transition:
    max-width .25s ease,
    padding .25s ease,
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    filter .15s ease;
}

/* état "visible" au hover/focus */
@media (max-width: 576px){
  /* Sur mobile : on masque le libellé */
  }
/* Sur mobile : on masque le libellé */
  }
/* Sur mobile : on raccourcit le libellé */
  }
}
/* Icon pills (uniformisés) */
.icon-pill{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(47,38,27,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.icon-pill i{
  font-size: 1.22rem;
  line-height: 1;
}

/* Floating action button (FAB) : Déposer un bien (transparent -> visible au hover) */
.fab-deposit{
  position: fixed;
  right: 18px;
  bottom: 18px;

  height: 56px;
  
  min-width: 56px; /* rond en mode compact */
  width: auto;
  max-width: 56px; /* compact par défaut */
  padding: 0;

  border-radius: 999px;
  border: 1px solid rgba(28,173,102,.38);

  /* état "transparent" */
  background: rgba(255,255,255,0);
  color: rgba(28,173,102,.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  overflow: hidden;
  z-index: 1060; /* au-dessus du contenu */
  box-shadow: 0 14px 34px rgba(0,0,0,.12);

  transition:
    max-width .25s ease,
    padding .25s ease,
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    filter .15s ease;
}

.fab-deposit i{
  font-size: 1.25rem;
  line-height: 1;
}

.fab-deposit .fab-label{
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;

  opacity: 0;
  max-width: 0;
  transform: translateX(6px);
  overflow: hidden;

  transition: opacity .15s ease, max-width .25s ease, transform .25s ease;
}

/* état "visible" au hover/focus */
.fab-deposit:hover,
.fab-deposit:focus-visible{
  background: var(--td-green);
  color: #fff;
  border-color: rgba(255,255,255,.22);

  max-width: 260px; /* s’étend au hover */
  padding: 0 16px;
  overflow: visible;
  justify-content: flex-start;

  
  gap: .55rem;

  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(0,0,0,.22);
  filter: brightness(1.02);
}

.fab-deposit:hover .fab-label,
.fab-deposit:focus-visible .fab-label{
  opacity: 1;
  max-width: 220px;
  transform: translateX(0);
}

.fab-deposit:active{
  transform: translateY(0);
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
}

@media (max-width: 576px){
  .fab-deposit{
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    max-width: 56px;
    padding: 0;
    justify-content: center;
  }
  /* Sur mobile : on masque le libellé */
  .fab-deposit .fab-label{ display:none; }
}