:root {
  --creme: #FAF6EF;
  --creme-2: #F3EDE2;
  --blanc: #FFFFFF;
  --vert: #1E3A2B;
  --vert-fonce: #16291F;
  --or: #B08D4A;
  --or-clair: #C9A96E;
  --encre: #2C2A25;
  --gris: #6E6A60;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--encre);
  background: var(--creme);
  line-height: 1.7;
  font-size: 17px;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--vert); line-height: 1.15; }

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- Petites majuscules dorées (kicker) ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  font-size: 12px; color: var(--or);
  margin-bottom: 18px;
}
.kicker::before { content: ""; width: 42px; height: 1px; background: var(--or); }

.section-title { font-size: clamp(32px, 4.2vw, 46px); margin-bottom: 16px; }
.section-intro { max-width: 640px; color: var(--gris); margin-bottom: 56px; }

section { padding: 100px 0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px;
  padding: 16px 34px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .3s ease;
}
.btn-or { background: var(--or); color: var(--blanc); }
.btn-or:hover { background: var(--vert); }
.btn-vert { background: var(--vert); color: var(--creme); }
.btn-vert:hover { background: var(--or); }
.btn-ligne { border-color: var(--vert); color: var(--vert); background: transparent; }
.btn-ligne:hover { background: var(--vert); color: var(--creme); }
.btn-ligne-clair { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.btn-ligne-clair:hover { background: #fff; color: var(--vert); }

/* ---------- Navigation ---------- */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding: 22px 0;
}
header.scrolled, header.solide {
  background: rgba(250, 246, 239, .97);
  box-shadow: 0 2px 24px rgba(30, 58, 43, .08);
  padding: 12px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo { display: flex; flex-direction: column; line-height: 1.1; }
.logo .logo-nom {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  color: #fff; letter-spacing: 0.04em; transition: color .35s ease;
}
.logo .logo-sous {
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--or-clair); font-weight: 400;
}
header.scrolled .logo-nom, header.solide .logo-nom { color: var(--vert); }

nav.desktop { display: flex; align-items: center; gap: 34px; }
nav.desktop a.lien {
  font-size: 13.5px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,.92); position: relative; transition: color .35s ease;
}
nav.desktop a.lien::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--or); transition: width .3s ease;
}
nav.desktop a.lien:hover::after { width: 100%; }
header.scrolled nav.desktop a.lien, header.solide nav.desktop a.lien { color: var(--encre); }

.nav-cta { padding: 12px 24px; font-size: 12px; }

.burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 34px; height: 26px; position: relative; z-index: 110;
}
.burger span {
  display: block; height: 2px; background: #fff; margin: 6px 0; transition: all .3s ease;
}
header.scrolled .burger span, header.solide .burger span, header.menu-ouvert .burger span { background: var(--vert); }
header.menu-ouvert .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
header.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
header.menu-ouvert .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu-mobile {
  display: none; position: fixed; inset: 0; background: var(--creme);
  z-index: 105; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.menu-mobile a { font-family: var(--serif); font-size: 28px; color: var(--vert); }
header.menu-ouvert .menu-mobile { display: flex; }

/* ---------- Bannière de page intérieure ---------- */
.banniere-page {
  background:
    linear-gradient(rgba(22, 41, 31, .82), rgba(22, 41, 31, .82)),
    url('https://images.unsplash.com/photo-1603108374191-94b23ff97833?auto=format&fit=crop&w=2000&q=80')
    center / cover no-repeat;
  color: var(--creme);
  padding: 180px 0 80px;
}
.banniere-page h1 { color: #fff; font-size: clamp(36px, 5vw, 56px); }
.banniere-page .kicker { color: var(--or-clair); }
.banniere-page .kicker::before { background: var(--or-clair); }
.banniere-page p.sous-titre { color: rgba(255,255,255,.8); max-width: 640px; margin-top: 14px; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  position: relative; padding: 140px 24px 100px;
  background:
    linear-gradient(rgba(18, 32, 24, .48), rgba(18, 32, 24, .62)),
    url('https://images.unsplash.com/photo-1622231397772-0da2db355a66?auto=format&fit=crop&w=2000&q=80')
    center / cover no-repeat;
}
.hero-contenu { max-width: 880px; color: #fff; }
.hero-sur {
  font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--or-clair); font-weight: 400; margin-bottom: 26px;
}
.hero h1 {
  color: #fff; font-size: clamp(46px, 7vw, 84px); font-weight: 500;
  letter-spacing: 0.02em; margin-bottom: 10px;
}
.hero h1 em { font-style: italic; color: var(--or-clair); }
.hero .accroche {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 3vw, 32px); color: rgba(255,255,255,.95); margin-bottom: 18px;
}
.hero .sous-accroche {
  font-size: 16px; letter-spacing: 0.06em; color: rgba(255,255,255,.8);
  margin-bottom: 44px; font-weight: 300;
}
.hero-boutons { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.hero-fleche {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.75); font-size: 22px; animation: flotte 2.2s ease-in-out infinite;
}
@keyframes flotte { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/* ---------- Double audience ---------- */
.audiences { padding: 0; }
.audiences-grille { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; }
.audience {
  position: relative; display: flex; align-items: flex-end;
  padding: 60px 54px; color: #fff; overflow: hidden;
}
.audience::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18, 32, 24, .85) 0%, rgba(18, 32, 24, .25) 55%, rgba(18, 32, 24, .15) 100%);
  z-index: 1; transition: background .4s ease;
}
.audience:hover::before {
  background: linear-gradient(to top, rgba(18, 32, 24, .92) 0%, rgba(18, 32, 24, .45) 55%, rgba(18, 32, 24, .3) 100%);
}
.audience .fond {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .8s ease;
}
.audience:hover .fond { transform: scale(1.05); }
.audience-proprietaire .fond {
  background-image: url('https://images.unsplash.com/photo-1728402777379-2953042aba4f?auto=format&fit=crop&w=1400&q=80');
}
.audience-voyageur .fond {
  background-image: url('https://images.unsplash.com/photo-1664130583851-0e583e69c292?auto=format&fit=crop&w=1400&q=80');
}
.audience-texte { position: relative; z-index: 2; max-width: 480px; }
.audience-texte .etiquette {
  font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--or-clair); font-weight: 400; margin-bottom: 14px; display: block;
}
.audience-texte h3 { color: #fff; font-size: clamp(28px, 3vw, 38px); margin-bottom: 14px; }
.audience-texte p { color: rgba(255,255,255,.85); margin-bottom: 26px; font-size: 16px; }

/* ---------- Services ---------- */
.services { background: var(--blanc); }
.services-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--creme-2); border: 1px solid var(--creme-2);
}
.service {
  background: var(--blanc); padding: 48px 38px;
  transition: background .35s ease;
}
.service:hover { background: var(--creme); }
.service .icone {
  width: 54px; height: 54px; margin-bottom: 24px;
  color: var(--or);
}
.service .icone svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.1; }
.service h3 { font-size: 23px; margin-bottom: 12px; }
.service p { color: var(--gris); font-size: 15.5px; }

/* ---------- Chiffres clés ---------- */
.chiffres {
  background:
    linear-gradient(rgba(22, 41, 31, .88), rgba(22, 41, 31, .88)),
    url('https://images.unsplash.com/photo-1622392513618-70557cdd0c3c?auto=format&fit=crop&w=2000&q=80')
    center / cover no-repeat;
  color: var(--creme);
}
.chiffres-grille {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center;
}
.chiffre .valeur {
  font-family: var(--serif); font-size: clamp(44px, 5vw, 64px);
  font-weight: 500; color: var(--or-clair); line-height: 1;
}
.chiffre .valeur sup { font-size: 0.45em; top: -0.8em; }
.chiffre .legende {
  margin-top: 12px; font-size: 13.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(250, 246, 239, .8);
}

/* ---------- Témoignages ---------- */
.temoignages-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.temoignage {
  background: var(--blanc); padding: 44px 38px;
  border: 1px solid var(--creme-2); position: relative;
  display: flex; flex-direction: column;
}
.temoignage::before {
  content: "\201C"; font-family: var(--serif); font-size: 90px; line-height: 1;
  color: var(--or-clair); opacity: .55; position: absolute; top: 18px; left: 30px;
}
.temoignage .etoiles { color: var(--or); letter-spacing: 4px; margin: 26px 0 18px; font-size: 15px; }
.temoignage p.avis { color: var(--gris); font-size: 15.5px; font-style: italic; flex: 1; }
.temoignage .auteur { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--creme-2); }
.temoignage .auteur .nom { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--vert); }
.temoignage .auteur .role { font-size: 13px; letter-spacing: 0.08em; color: var(--gris); text-transform: uppercase; }

/* ---------- Tarifs (style JCM Invest, aux couleurs de la maison) ---------- */
.tarifs { background: var(--vert); color: var(--creme); }
.tarifs .kicker { color: var(--or-clair); }
.tarifs .kicker::before { background: var(--or-clair); }
.tarifs .section-title { color: var(--creme); }
.tarifs-citation {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.6;
  color: rgba(250, 246, 239, .92);
  max-width: 860px; margin: 0 auto 70px; text-align: center;
}
.tarifs-citation em { color: var(--or-clair); font-style: italic; }
.tarifs-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; max-width: 1020px; margin: 0 auto; }
.offre {
  background: var(--creme); color: var(--encre);
  padding: 52px 44px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.offre:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0, 0, 0, .25); }
.offre h3 { font-size: 28px; margin-bottom: 8px; }
.offre .taux {
  font-family: var(--serif); font-weight: 500; color: var(--or);
  font-size: clamp(30px, 3.4vw, 40px); margin: 18px 0 8px; line-height: 1.2;
}
.offre .taux-detail { font-size: 14px; letter-spacing: 0.08em; color: var(--gris); text-transform: uppercase; margin-bottom: 26px; }
.offre ul { list-style: none; width: 100%; margin-bottom: 34px; }
.offre ul li {
  padding: 11px 0; color: var(--gris); font-size: 15.5px;
  border-bottom: 1px solid var(--creme-2);
}
.offre ul li:last-child { border-bottom: none; }
.tarifs-note { text-align: center; margin-top: 44px; font-size: 14px; color: rgba(250, 246, 239, .65); }

/* ---------- FAQ ---------- */
.faq { background: var(--creme-2); }
.faq-liste { max-width: 820px; }
.faq-item { background: var(--blanc); border: 1px solid rgba(30, 58, 43, .08); margin-bottom: 14px; }
.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 30px; text-align: left;
  font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--vert);
}
.faq-question .signe {
  flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--or);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--or); font-family: var(--sans); font-weight: 300; font-size: 20px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.faq-item.ouvert .signe { transform: rotate(45deg); background: var(--or); color: #fff; }
.faq-reponse { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-reponse p { padding: 0 30px 26px; color: var(--gris); font-size: 15.5px; }

/* ---------- Bandeau contact ---------- */
.bandeau {
  background: var(--vert-fonce); color: var(--creme); text-align: center; padding: 90px 24px;
}
.bandeau h2 { color: var(--creme); font-size: clamp(30px, 4vw, 44px); margin-bottom: 14px; }
.bandeau h2 em { font-style: italic; color: var(--or-clair); }
.bandeau p { color: rgba(250, 246, 239, .75); max-width: 560px; margin: 0 auto 36px; }

/* ---------- Nos biens ---------- */
.biens { background: var(--blanc); }
.biens-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.bien {
  border: 1px solid var(--creme-2); background: var(--creme);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.bien:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(30, 58, 43, .12); }
.bien .visuel { height: 300px; overflow: hidden; position: relative; }
.bien .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bien:hover .visuel img { transform: scale(1.06); }
.bien .badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--or); color: #fff; font-size: 11px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; padding: 7px 14px;
}
.bien .corps { padding: 36px 34px 40px; display: flex; flex-direction: column; flex: 1; }
.bien h3 { font-size: 27px; margin-bottom: 4px; }
.bien .lieu {
  font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--or); margin-bottom: 16px;
}
.bien .caracteristiques {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 16px;
  font-size: 14px; color: var(--vert); letter-spacing: 0.04em;
}
.bien .caracteristiques span::before { content: "— "; color: var(--or); }
.bien p.description { color: var(--gris); font-size: 15.5px; flex: 1; margin-bottom: 26px; }
.bien .btn { align-self: flex-start; }
.bien .vignettes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px 10px 0;
}
.bien .vignettes img {
  height: 66px; width: 100%; object-fit: cover; cursor: pointer;
  opacity: .7; border: 2px solid transparent; transition: opacity .3s ease, border-color .3s ease;
}
.bien .vignettes img:hover { opacity: 1; }
.bien .vignettes img.actif { opacity: 1; border-color: var(--or); }

/* ---------- Page contact ---------- */
.page-contact { background: var(--blanc); }
.contact-grille { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; align-items: start; }
.contact-infos h2 { font-size: 30px; margin-bottom: 18px; }
.contact-infos p { color: var(--gris); margin-bottom: 30px; }
.contact-infos ul { list-style: none; }
.contact-infos ul li {
  display: flex; gap: 16px; align-items: baseline; margin-bottom: 20px; font-size: 16px;
}
.contact-infos .picto { color: var(--or); font-size: 17px; }
.contact-infos a:hover { color: var(--or); }

.formulaire {
  background: var(--creme); border: 1px solid var(--creme-2); padding: 50px 46px;
}
.champ { margin-bottom: 30px; }
.champ > .etiquette-champ {
  display: block; font-weight: 400; font-size: 15px; letter-spacing: 0.04em;
  color: var(--vert); margin-bottom: 10px;
}
.obligatoire { color: var(--or); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"],
.champ select, .champ textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid rgba(30, 58, 43, .18); background: var(--blanc);
  font-family: var(--sans); font-weight: 300; font-size: 16px; color: var(--encre);
  transition: border-color .3s ease;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--or);
}
.champ textarea { min-height: 170px; resize: vertical; }
.champ .indication { font-size: 13px; color: var(--gris); margin-top: 6px; }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.radios { display: flex; flex-direction: column; gap: 10px; }
.radios label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 16px; }
.radios input[type="radio"] { accent-color: var(--vert); width: 18px; height: 18px; }
.formulaire .btn { margin-top: 6px; }
.form-confirmation { display: none; margin-top: 20px; color: var(--vert); font-weight: 400; }

/* ---------- Mentions légales ---------- */
.legal { background: var(--blanc); }
.legal .container { max-width: 860px; }
.legal h2 { font-size: 26px; margin: 44px 0 14px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--gris); font-size: 15.5px; margin-bottom: 10px; }
.legal ul { padding-left: 22px; }
.a-completer { background: #F6EBD4; padding: 1px 7px; font-size: 14px; }

/* ---------- Pied de page ---------- */
footer { background: var(--vert-fonce); color: rgba(250, 246, 239, .75); padding: 80px 0 0; font-size: 15px; }
.footer-grille {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 60px;
}
footer .logo-nom { color: var(--creme); }
footer h4 {
  color: var(--creme); font-family: var(--sans); font-weight: 400;
  font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 22px;
}
footer ul { list-style: none; }
footer ul li { margin-bottom: 12px; }
footer a:hover { color: var(--or-clair); }
.footer-coord li { display: flex; gap: 12px; align-items: baseline; }
.footer-coord .picto { color: var(--or-clair); font-size: 14px; }
.footer-sociaux { display: flex; gap: 14px; margin-top: 26px; }
.footer-sociaux a {
  width: 40px; height: 40px; border: 1px solid rgba(250, 246, 239, .25); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: all .3s ease;
}
.footer-sociaux a svg { width: 17px; height: 17px; fill: currentColor; }
.footer-sociaux a:hover { border-color: var(--or); background: var(--or); color: #fff; }
.footer-bas {
  border-top: 1px solid rgba(250, 246, 239, .12); padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(250, 246, 239, .5);
}
.footer-bas a:hover { color: var(--or-clair); }

/* ---------- Apparition au défilement ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  nav.desktop { display: none; }
  .burger { display: block; }
  .audiences-grille { grid-template-columns: 1fr; }
  .audience { min-height: 480px; }
  .services-grille { grid-template-columns: repeat(2, 1fr); }
  .chiffres-grille { grid-template-columns: repeat(2, 1fr); }
  .temoignages-grille { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .tarifs-grille { grid-template-columns: 1fr; max-width: 560px; }
  .biens-grille { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .contact-grille { grid-template-columns: 1fr; }
  .footer-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  section { padding: 70px 0; }
  .services-grille { grid-template-columns: 1fr; }
  .chiffres-grille { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-grille { grid-template-columns: 1fr; }
  .chiffres { background-attachment: scroll; }
  .champ-double { grid-template-columns: 1fr; }
  .formulaire { padding: 36px 26px; }
}