/* ============================================================
   AGENCY RESKIN — justemplate palette
   Thème : palette sénégalaise terreuse / contrastée
   ============================================================ */

/* On s'appuie sur les custom properties de justemplate/css/styles.css */
:root {
  --bg: #f7efe0;
  --bg-2: #f0e9dd;
  --text: #2a1f18;
  --muted: #6b5b4e;
  --border: rgba(42, 31, 24, 0.10);
  --line-light: rgba(42, 31, 24, 0.12);
  --font: 'Inter', system-ui, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
  --rouge: #9e8262;
  --jaune: #e8b53a;
  --vert: #5fa83a;
  --cream: #000;
  --cream-2: #000;
  --cyan: var(--rouge);
  --yellow: var(--jaune);
  --lime: var(--vert);
  --violet: var(--rouge);
}

* { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  cursor: auto;
}

h1, h2, h3, h4, .hero-title, .section-title, .histoire__signature-name,
.nav__brand-name, .footer__mark {
  font-family: var(--font-heading);
  color: var(--text);
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(158, 130, 98, 0.18), transparent 45%),
    radial-gradient(ellipse at 85% 90%, rgba(232, 181, 58, 0.16), transparent 45%),
    radial-gradient(ellipse at 55% 55%, rgba(95, 168, 58, 0.10), transparent 45%),
    var(--bg);
}

.hero-eyebrow,
.section-label,
.bien-type-tag {
  color: var(--rouge);
}

.hero-eyebrow {
  background: rgba(158, 130, 98, 0.08);
  border-color: rgba(247, 239, 224, 0.14);
}

.hero-eyebrow::before { background: var(--jaune); box-shadow: 0 0 8px var(--jaune); }

.hero-sub { color: var(--muted); }

.btn-primary-magnetic {
  background: linear-gradient(135deg, var(--rouge), var(--jaune));
  color: var(--ink);
  box-shadow: 0 0 28px rgba(158, 130, 98, 0.28);
}

.btn-outline-magnetic {
  border-color: var(--line-light);
  color: var(--text);
}

.btn-outline-magnetic:hover {
  border-color: var(--jaune);
  color: var(--jaune);
}

.hero-terminal {
  background: rgba(247, 239, 224, 0.06);
  border-color: var(--line-light);
  color: var(--rouge);
}

.terminal-prompt { color: var(--vert); }
.terminal-caret { background: var(--rouge); }

/* ---------- TICKER / MARQUEE ---------- */
.ticker-bar {
  background: rgba(247, 239, 224, 0.05);
  border-color: var(--line-light);
}

.ticker-text { color: var(--jaune); }

.marquee {
  background: rgba(247, 239, 224, 0.03);
  border-color: var(--line-light);
}

.marquee-item { color: var(--muted); }
.marquee-item i { color: var(--rouge); }

/* ---------- SECTIONS ---------- */
.section { padding: 5.5rem 0; }
.section-header { margin-bottom: 3rem; }
.section-label { color: var(--rouge); }
.section-title { color: var(--text); }
.section-sub { color: var(--muted); }

.search-section { background: var(--bg-2); border-color: var(--line-light); }

.search-card {
  background: rgba(247, 239, 224, 0.05);
  border-color: var(--line-light);
}

.search-card select,
.search-card input {
  background: rgba(247, 239, 224, 0.06);
  border-color: var(--line-light);
  color: var(--text);
}

.search-card select option { background: var(--bg-2); color: var(--text); }

.search-card select:focus,
.search-card input:focus {
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(158, 130, 98, 0.12);
}

.search-btn {
  background: linear-gradient(135deg, var(--rouge), var(--jaune));
  color: var(--ink);
}

.search-btn:hover {
  box-shadow: 0 8px 24px rgba(158, 130, 98, 0.25);
}

.s-label { color: var(--muted); }

/* ---------- BIEN CARDS ---------- */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }

.bien-card {
  background: rgba(247, 239, 224, 0.05);
  border-color: var(--line-light);
}

.bien-card:hover {
  border-color: var(--jaune);
  transform: translateY(-7px);
  box-shadow: 0 24px 60px rgba(232, 181, 58, 0.14);
}

.bien-card-img { background: var(--bg-2); }

.bien-tag { background: var(--vert); color: var(--ink); }
.bien-photos { background: rgba(26, 15, 10, 0.55); color: var(--cream); }

.bien-type-tag { color: var(--rouge); }
.bien-title { color: var(--text); }
.bien-loc { color: var(--muted); }
.bien-meta span { color: var(--muted); }
.bien-meta i { color: var(--rouge); }
.bien-prix { color: var(--jaune); }
.bien-prix-sub { color: var(--muted); }

.bien-cta {
  color: var(--rouge);
  border-color: var(--rouge);
}

.bien-cta:hover {
  background: var(--rouge);
  color: var(--cream);
}

.card-scroll-dot { background: rgba(247, 239, 224, 0.4); }
.card-scroll-dot.active { background: var(--rouge); }

/* ---------- FEATURES / À PROPOS ---------- */
.features-section,
.coaching-section {
  background: var(--bg-2);
  border-color: var(--line-light);
}

.feature-card,
.coaching-card {
  background: rgba(247, 239, 224, 0.05);
  border-color: var(--line-light);
}

.feature-card:hover,
.coaching-card:hover {
  border-color: var(--rouge);
}

.feature-title,
.coaching-card h3 { color: var(--text); }

.feature-desc,
.coaching-card p { color: var(--muted); }

.feature-icon {
  background: var(--rouge);
  color: var(--cream);
}

.coaching-card::before {
  background: linear-gradient(90deg, var(--rouge), var(--jaune));
}

/* ---------- ABOUT / CONTACT / CTA ---------- */
.about-section,
.cta-section { background: var(--bg-2); }

.about-section h2,
.about-section h3,
.cta-section h2 { color: var(--text); }

.about-section p,
.cta-section p { color: var(--muted); }

.cform-input,
.cform-textarea {
  background: rgba(247, 239, 224, 0.06);
  border-color: var(--line-light);
  color: var(--text);
}

.cform-input:focus,
.cform-textarea:focus {
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(158, 130, 98, 0.12);
}

.cform-btn {
  background: linear-gradient(135deg, var(--rouge), var(--jaune));
  color: var(--ink);
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line-light);
  color: var(--muted);
}

.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--jaune); }

.footer__mark {
  background: var(--rouge);
  color: var(--cream);
}

/* ---------- NAV (justemplate) ---------- */
.nav { color: rgba(42, 31, 24, 0.85); }
.nav__brand-name { color: var(--text); }
.nav__links a { color: rgba(42, 31, 24, 0.75); }
.nav__links a:hover { color: var(--text); }
.nav__links a::after { background: var(--rouge); }
.nav.is-scrolled { background: rgba(247, 239, 224, 0.9); border-bottom-color: var(--line-light); }
.nav__burger span { background: var(--text); }

.nav .nav__cta {
  background: var(--vert);
  color: #fff;
  padding: .6rem 1.2rem;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  text-decoration: none;
}

.nav .nav__cta:hover { background: #4a8f2f; }

/* ---------- MISC ---------- */
.gradient-flow { display: none; }
.glitch { color: var(--rouge); text-shadow: 2px 0 var(--jaune), -2px 0 var(--vert); }

.empty-state { border-color: var(--line-light); }
.empty-state h3 { color: var(--text); }
.empty-state p { color: var(--muted); }
.empty-state i { color: var(--rouge); }

.section-divider { color: var(--rouge); }
.section-divider::before,
.section-divider::after { background: var(--line-light); }

a { color: inherit; }

/* ---------- BLANC -> NOIR ---------- */
.nav-brand,
.mobile-toggle,
.hero-title,
.section-title,
.search-card select,
.search-card input,
.search-card select option,
.card-scroll-nav,
.bien-title,
.bien-prix,
.empty-state h3,
.feature-title,
.coaching-title,
.coaching-badge,
.about-section *,
.about-value,
.cform input,
.cform textarea,
.cform select,
.cform select option,
.footer-brand,
.footer h4,
.modal-visite-head h3,
.lb-close,
.lb-nav {
  color: var(--text) !important;
}

.about-text {
  background: #5e4b35;
  color: #000 !important;
  padding: 1.5rem;
  border-radius: 12px;
}

/* ---------- FOOTER BLANC ---------- */
.footer *,
.site-footer * {
  color: #fff !important;
}

/* ---------- LOGO SIZE ---------- */
.nav__brand-mark,
.footer-brand-icon {
  width: 48px !important;
  height: 48px !important;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav__brand-mark img,
.footer-brand-icon img {
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: cover;
  display: block;
}

@media (max-width: 1100px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; }
}