/* ============================================
   CABINET NEVEU — Expertise en Évaluation Immobilière
   Palette : Navy #0E1F3C / Navy fonce #081426 / Or #C9A24B / Or clair #E4C879 / Creme #FAF7F0
   Typo : Cinzel (titres) / Montserrat (texte)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --navy: #0E1F3C;
  --navy-dark: #081426;
  --navy-soft: #16294a;
  --gold: #C9A24B;
  --gold-light: #E4C879;
  --cream: #FAF7F0;
  --cream-dark: #F1EBDD;
  --ink: #1C1E24;
  --muted: #5B5F6B;
  --line: rgba(14,31,60,0.12);
  --radius: 2px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: 'Cinzel', serif;
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 0.6em;
  font-weight: 600;
  letter-spacing: 0.01em;
}
h1{ font-size: clamp(2rem, 4vw, 3.2rem); }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1.1em; color: var(--ink); }
.lede{ font-size: 1.15rem; color: var(--muted); font-weight: 300; }

.eyebrow{
  font-family:'Montserrat',sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.9em;
  display:block;
}

.container{ max-width: 1120px; margin:0 auto; padding: 0 28px; }
.container-narrow{ max-width: 780px; margin:0 auto; padding: 0 28px; }

/* ===== Laurel crest (signature element) ===== */
.crest{ display:inline-flex; align-items:center; gap:14px; }
.crest-logo{ width:44px; height:44px; object-fit:contain; flex-shrink:0; }
.crest-word{ font-family:'Cinzel', serif; font-weight:600; letter-spacing:0.06em; font-size:1.05rem; color:var(--cream); }
.crest-word small{ display:block; font-family:'Montserrat',sans-serif; font-weight:400; letter-spacing:0.18em; font-size:0.58rem; text-transform:uppercase; color:var(--gold-light); margin-top:2px; }
header .crest-word{ color: var(--navy); }
header .crest-word small{ color:#8a6d24; }

/* ===== Watermark (laurel N crest) on every page ===== */
body::before{
  content:'';
  position: fixed;
  right: -6vw;
  bottom: -6vw;
  width: 46vw;
  max-width: 620px;
  aspect-ratio: 1/1;
  background-image: url('img/watermark-n.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}

/* ===== Header / Nav ===== */
header.site{
  position: sticky; top:0; z-index:50;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding: 16px 28px; max-width:1120px; margin:0 auto; }
nav.main-nav{ display:flex; gap:28px; align-items:center; }
nav.main-nav a{
  font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
  color: var(--navy); position:relative; padding: 4px 0;
}
nav.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--gold);
  transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{ transform:scaleX(1); }
nav.main-nav a.active{ color: var(--gold); }
.nav-toggle{ display:none; }
.btn-nav-contact{
  background:var(--navy); color:var(--cream) !important; padding:10px 20px; font-size:0.75rem;
}

@media (max-width: 860px){
  nav.main-nav{
    position:fixed; inset: 68px 0 0 0; background:var(--cream); flex-direction:column;
    padding: 32px 28px; gap: 22px; transform: translateX(100%); transition: transform .3s ease;
    overflow-y:auto;
  }
  nav.main-nav.open{ transform: translateX(0); }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
  }
  .nav-toggle span{ width:24px; height:2px; background:var(--navy); }
}

/* ===== Hero ===== */
.hero{
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--cream);
  padding: 96px 0 80px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background: radial-gradient(circle, rgba(201,162,75,0.16) 0%, transparent 70%);
}
.hero .eyebrow{ color: var(--gold-light); }
.hero h1{ color:#fff; max-width: 780px; }
.hero p.lede{ color: rgba(250,247,240,0.78); max-width: 620px; }
.hero-actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

.btn{
  display:inline-block; padding: 13px 28px; font-size:0.8rem; text-transform:uppercase;
  letter-spacing:0.1em; font-weight:600; border-radius: var(--radius); border:1px solid transparent;
  transition: all .2s ease; cursor:pointer;
}
.btn-gold{ background: var(--gold); color: var(--navy-dark); }
.btn-gold:hover{ background: var(--gold-light); }
.btn-outline{ border-color: rgba(250,247,240,0.4); color:#fff; }
.btn-outline:hover{ border-color:#fff; }
.btn-navy{ background:var(--navy); color:var(--cream); }
.btn-navy:hover{ background:var(--navy-soft); }

/* ===== Sections ===== */
section{ padding: 72px 0; }
.section-cream-dark{ background: var(--cream-dark); }
.section-navy{ background: var(--navy); color: var(--cream); }
.section-navy h2, .section-navy h3{ color:#fff; }
.section-navy p{ color: rgba(250,247,240,0.75); }
.divider-gold{ width:64px; height:2px; background:var(--gold); margin: 22px 0 30px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* Grid of cards */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--line); padding: 32px 28px; border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color: var(--gold); transform: translateY(-3px); }
.card .num{ font-family:'Cinzel',serif; color: var(--gold); font-size:0.85rem; letter-spacing:0.1em; }

.list-check{ list-style:none; padding:0; margin:0; }
.list-check li{ padding-left: 28px; position:relative; margin-bottom: 14px; }
.list-check li::before{
  content:''; position:absolute; left:0; top:8px; width:12px; height:12px;
  border: 1.5px solid var(--gold); transform: rotate(45deg);
}

/* Secteur chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-block; padding: 9px 18px; font-size:0.82rem; font-weight:500;
  border:1px solid var(--line); border-radius: 999px; background:#fff; color:var(--navy);
  transition: all .2s ease;
}
.chip:hover{ border-color:var(--gold); background:var(--navy); color:#fff; }
.section-navy .chip, .hero .chip{ background:transparent; border-color:rgba(250,247,240,0.3); color:#fff; }
.section-navy .chip:hover, .hero .chip:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy-dark); }

/* Breadcrumb */
.breadcrumb{ font-size:0.78rem; color: var(--muted); padding: 18px 0 0; }
.breadcrumb a{ color: var(--navy); }
.breadcrumb a:hover{ color: var(--gold); }

/* Table (zones / villes) */
table.zones{ width:100%; border-collapse: collapse; margin: 24px 0; }
table.zones th, table.zones td{ text-align:left; padding: 12px 16px; border-bottom:1px solid var(--line); font-size:0.92rem; }
table.zones th{ font-family:'Cinzel',serif; color:var(--navy); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; }

/* FAQ accordion (pure CSS) */
.faq-item{ border-bottom:1px solid var(--line); padding: 22px 0; }
.faq-item summary{ cursor:pointer; font-family:'Cinzel',serif; color:var(--navy); font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; color:var(--gold); font-size:1.3rem; font-family:'Montserrat',sans-serif; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item p{ margin-top:14px; color:var(--muted); }

/* Blog */
.blog-card{ border-bottom:1px solid var(--line); padding: 30px 0; }
.blog-meta{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold); margin-bottom:8px; }
article.post{ max-width: 740px; margin: 0 auto; }
article.post h2{ margin-top: 1.4em; }

/* CTA band */
.cta-band{
  background: var(--navy); color:#fff; padding: 56px 0; text-align:center;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color: rgba(250,247,240,0.75); max-width:560px; margin:0 auto 28px; }

/* Contact form */
form.contact-form{ display:grid; gap:18px; max-width: 620px; }
form.contact-form label{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--navy); font-weight:600; display:block; margin-bottom:6px; }
form.contact-form input, form.contact-form textarea, form.contact-form select{
  width:100%; padding: 13px 14px; border:1px solid var(--line); background:#fff; font-family:'Montserrat',sans-serif;
  font-size:0.95rem; border-radius: var(--radius);
}
form.contact-form input:focus, form.contact-form textarea:focus, form.contact-form select:focus{
  outline: none; border-color: var(--gold);
}
form.contact-form textarea{ min-height: 140px; resize:vertical; }

/* Info block */
.info-line{ display:flex; gap:12px; margin-bottom:16px; align-items:flex-start; }
.info-line .lbl{ font-family:'Cinzel',serif; color:var(--gold); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; min-width:120px; padding-top:2px; }

/* Footer */
footer.site{ background: var(--navy-dark); color: rgba(250,247,240,0.65); padding: 56px 0 28px; }
footer.site .foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px; margin-bottom:40px; }
@media (max-width: 860px){ footer.site .foot-grid{ grid-template-columns:1fr; } }
footer.site h4{ color: var(--gold-light); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; font-family:'Cinzel',serif; }
footer.site a:hover{ color:#fff; }
footer.site ul{ list-style:none; padding:0; margin:0; }
footer.site li{ margin-bottom:10px; font-size:0.88rem; }
.foot-bottom{ border-top:1px solid rgba(250,247,240,0.12); padding-top:22px; font-size:0.76rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

.placeholder{ color:#b45309; background:#fff7ed; padding:1px 6px; border-radius:2px; font-size:0.9em; }

/* WhatsApp floating button */
.whatsapp-float{
  position: fixed; left: 22px; bottom: 22px; z-index: 100;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); }
@media (max-width: 600px){
  .whatsapp-float{ width:50px; height:50px; left:16px; bottom:16px; }
}

/* ===== Photo frames (Cloudinary) with graceful placeholder fallback ===== */
.photo-frame{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  aspect-ratio: 4 / 3;
}
.photo-frame::after{
  content: attr(data-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding: 24px; font-family:'Cinzel',serif; font-size:0.82rem; letter-spacing:0.06em; color: rgba(228,200,121,0.55);
  border: 1px solid rgba(228,200,121,0.25);
  margin: 10px;
}
.photo-frame img.photo-slot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.photo-frame.photo-missing img.photo-slot{ display:none; }
.photo-frame:not(.photo-missing)::after{ display:none; }
.photo-frame.hero-frame{ aspect-ratio: 5/4; }
.photo-frame.portrait-frame{ aspect-ratio: 3/4; max-width: 340px; }
.photo-frame.wide-frame{ aspect-ratio: 16/7; }


a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition: none !important; }
}