/* ==========================================================================
   Résidence Da Ayélé — design tokens
   Palette : jardin, terre et lumière du soir — pas de terracotta générique.
   ========================================================================== */
:root{
  --ink:        #262A30;
  --palm:       #3E4551;
  --palm-light: #5C6672;
  --sand:       #EFE9DC;
  --sand-deep:  #E1D5B8;
  --paper:      #FBF9F4;
  --ochre:      #B9924F;
  --brick:      #93412B;
  --line:       rgba(38,42,48,0.16);
  --line-light: rgba(251,249,244,0.28);

  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;

  --wrap: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:500; color:var(--palm); }

.section-kicker{
  font-family:var(--font-body);
  font-size:0.95rem;
  color:var(--brick);
  margin:0 0 8px;
  font-weight:600;
}
.section-title{
  font-size:2.1rem;
  line-height:1.2;
  margin:0 0 28px;
  max-width:14ch;
}

/* ---------------- header ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:24px;
  padding:16px 28px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-logo{ height:56px; width:auto; }
.brand--text-only .brand-logo{ display:none; }
.brand-text{
  display:none;
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--palm);
  line-height:1.05;
}
.brand--text-only .brand-text{ display:block; }
.brand-text em{ display:block; font-style:italic; font-size:0.95rem; font-weight:500; color:var(--brick); }

.main-nav{ display:flex; gap:26px; font-size:0.95rem; }
.main-nav a{ color:var(--ink); border-bottom:1px solid transparent; padding-bottom:2px; }
.main-nav a:hover{ border-color:var(--ochre); }

.btn-whatsapp-mini{
  display:flex; align-items:center; gap:7px;
  background:var(--palm); color:var(--paper);
  padding:9px 16px; border-radius:999px;
  font-size:0.88rem; white-space:nowrap;
}
.nav-toggle{
  display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--palm);
}

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:var(--paper);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(185,146,79,0.35), transparent 45%),
    linear-gradient(160deg, #3E4551 0%, #2C313A 55%, #201E1B 100%);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,12,0.15) 0%, rgba(20,16,12,0.72) 100%);
  z-index:1;
}
.hero-inner{ position:relative; z-index:2; padding-bottom:72px; padding-top:180px; }
.hero-kicker{ font-size:1rem; color:var(--sand); margin:0 0 14px; letter-spacing:0.02em; }
.hero-title{
  font-size:clamp(2.4rem, 5vw, 4rem);
  color:var(--paper);
  max-width:16ch;
  margin:0 0 22px;
}
.hero-sub{ max-width:46ch; font-size:1.08rem; color:var(--sand); margin:0 0 34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  display:inline-block;
  padding:14px 26px;
  font-size:0.95rem;
  font-weight:600;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, background 0.15s ease;
}
.btn-primary{ background:var(--brick); color:var(--paper); }
.btn-primary:hover{ background:#7c3623; }
.btn-ghost{ border-color:var(--line-light); color:var(--paper); }
.btn-ghost:hover{ background:rgba(251,247,236,0.12); }
.btn-block{ width:100%; text-align:center; }

/* ---------------- intro ---------------- */
.intro{ padding:76px 0 20px; }
.intro-text{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.35rem;
  color:var(--palm-light);
  max-width:62ch;
  line-height:1.5;
  margin:0 auto;
  text-align:center;
}

/* ---------------- logement ---------------- */
.logement{ padding:70px 0; }
.logement-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.logement-media{
  aspect-ratio:4/5; overflow:hidden; background:var(--sand-deep);
}
.logement-media img{ width:100%; height:100%; object-fit:cover; }
.logement-media.media--empty{
  background:linear-gradient(150deg, var(--sand-deep), var(--sand));
}

.feature-list{ list-style:none; margin:0; padding:0; }
.feature-list li{
  display:flex; justify-content:space-between; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.feature-list li:first-child{ border-top:1px solid var(--line); }
.feature-name{ font-weight:600; white-space:nowrap; }
.feature-desc{ text-align:right; color:#54493c; font-size:0.94rem; }

/* ---------------- appartements ---------------- */
.appartements{ padding:80px 0 40px; background:var(--sand); }
.appartements > .wrap{ padding-bottom:20px; }
.apt-row{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  max-width:var(--wrap); margin:0 auto 28px;
  background:var(--paper);
}
.apt-row--reverse{ grid-template-columns:1fr 1.1fr; }
.apt-row--reverse .apt-media{ order:2; }
.apt-media{ aspect-ratio:16/11; overflow:hidden; background:var(--sand-deep); }
.apt-media img{ width:100%; height:100%; object-fit:cover; }
.apt-media.media--empty{ background:linear-gradient(150deg, var(--sand-deep), var(--paper)); }
.apt-info{ padding:44px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.apt-name{ font-size:1.6rem; font-style:italic; }
.apt-desc{ color:#54493c; margin:0; max-width:38ch; }
.apt-book{
  align-self:flex-start;
  background:none; border:none; border-bottom:1px solid var(--ochre);
  color:var(--brick); font-family:var(--font-body); font-weight:600;
  padding:4px 0; cursor:pointer; font-size:0.95rem;
}
.apt-book:hover{ border-color:var(--brick); }

/* ---------------- emplacement ---------------- */
.emplacement{ padding:80px 0; }
.emplacement-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.emplacement-text{ color:#54493c; max-width:42ch; }
.emplacement-services{ display:flex; flex-direction:column; gap:20px; margin-top:28px; }
.service h4{ font-family:var(--font-body); font-size:1rem; margin:0 0 4px; color:var(--brick); }
.service p{ margin:0; color:#54493c; font-size:0.94rem; }
.emplacement-media{ aspect-ratio:4/5; background:var(--sand-deep); overflow:hidden; }
.emplacement-media img{ width:100%; height:100%; object-fit:cover; }
.emplacement-media.media--empty{ background:linear-gradient(150deg, var(--sand-deep), var(--sand)); }

/* ---------------- reservation ---------------- */
.reservation{ padding:80px 0; background:var(--palm); color:var(--paper); }
.reservation .section-title, .reservation h4{ color:var(--paper); }
.reservation-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; }
.reservation-text{ color:var(--sand); max-width:38ch; }
.reservation-direct{ margin-top:36px; padding-top:24px; border-top:1px solid var(--line-light); display:flex; flex-direction:column; gap:8px; }
.reservation-direct p{ margin:0 0 4px; color:var(--sand); font-size:0.9rem; }
.reservation-direct a{ color:var(--paper); font-weight:600; border-bottom:1px solid var(--ochre); width:fit-content; }

.reservation-form{ background:var(--paper); color:var(--ink); padding:40px; }
.form-row{ margin-bottom:20px; }
.form-row--split{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.reservation-form label{ display:block; font-size:0.88rem; font-weight:600; margin-bottom:6px; color:var(--palm); }
.reservation-form input,
.reservation-form select,
.reservation-form textarea{
  width:100%; border:none; border-bottom:1px solid var(--line);
  background:transparent; padding:9px 2px; font-family:var(--font-body); font-size:1rem; color:var(--ink);
}
.reservation-form input:focus,
.reservation-form select:focus,
.reservation-form textarea:focus{ outline:none; border-color:var(--brick); }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-weight:500; }
.checkbox-row input{ width:auto; }
.form-note{ font-size:0.82rem; color:#6b6155; margin-top:12px; }
.form-status{ font-size:0.9rem; margin-bottom:14px; min-height:1.2em; }
.form-status.ok{ color:#1E3A2C; }
.form-status.err{ color:var(--brick); }

/* ---------------- footer ---------------- */
.site-footer{ background:var(--ink); color:var(--sand); padding:56px 0 0; }
.footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(251,247,236,0.15); }
.brand-text--footer{ display:block; color:var(--paper); }
.brand-text--footer em{ color:var(--sand-deep); }
.footer-brand p{ margin:10px 0 0; color:var(--sand-deep); max-width:32ch; }
.footer-contact{ display:flex; flex-direction:column; gap:8px; }
.footer-contact a:hover{ color:var(--ochre); }
.footer-bottom{ padding:20px 0; font-size:0.82rem; color:#8a8071; }

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .logement-grid, .emplacement-grid, .reservation-grid{ grid-template-columns:1fr; gap:36px; }
  .emplacement-media{ order:-1; }
  .apt-row, .apt-row--reverse{ grid-template-columns:1fr; }
  .apt-row--reverse .apt-media{ order:0; }
  .apt-info{ padding:28px; }
  .reservation-form{ padding:28px; }
  .form-row--split{ grid-template-columns:1fr; }
  .hero-inner{ padding-top:140px; }
}