@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg: #F5F6F5;
  --surface: #FFFFFF;
  --text: #1B1F1D;
  --text-2: #5F6B66;
  --text-3: #93A19B;
  --border: #E1E6E3;
  --accent: #16786A;
  --accent-dark: #0F5A50;
  --accent-bg: #E4F2EF;
  --ok: #2E7D4F;
  --ok-bg: #E7F4EC;
  --err: #C64A1F;
  --err-bg: #FDECE4;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20,20,18,0.06), 0 4px 14px rgba(20,20,18,0.05);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, sans-serif;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0 0 0.6rem; }

/* ---- Header ---- */
.site-header{ background:var(--surface); border-bottom:1px solid var(--border); }
.header-inner{ max-width:1180px; margin:0 auto; padding:0.9rem 1.2rem; display:flex; align-items:center; gap:1.4rem; }
.logo{ font-weight:700; font-size:1.15rem; display:flex; align-items:center; gap:0.4rem; }
.logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block; }
.nav-link{ font-size:0.9rem; font-weight:500; color:var(--text-2); }
.nav-link:hover{ color:var(--text); }
.header-spacer{ flex:1; }
.post-btn{
  display:inline-flex; align-items:center; gap:0.4rem;
  background:var(--accent); color:#fff; font-weight:600; font-size:0.88rem;
  border:none; padding:0.6rem 1rem; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.post-btn:hover{ background:var(--accent-dark); }

.page{ max-width:1180px; margin:0 auto; padding:1.8rem 1.2rem 3rem; }

/* ---- Formulaires ---- */
.field{ margin-bottom:0.9rem; display:flex; flex-direction:column; gap:0.3rem; max-width:480px; }
.field label{ font-size:0.85rem; font-weight:600; color:var(--text-2); }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:0.92rem; padding:0.6rem 0.75rem;
  border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:0; }
.field textarea{ resize:vertical; min-height:90px; }
.row2{ display:flex; gap:0.9rem; flex-wrap:wrap; }
.row2 > .field{ flex:1; min-width:180px; }
.checkbox-label{ display:flex; align-items:center; gap:0.45rem; font-weight:500; font-size:0.9rem; color:var(--text); }

.err{ font-size:0.85rem; color:var(--err); background:var(--err-bg); padding:0.65rem 0.9rem; border-radius:9px; margin-bottom:1rem; }
.ok-msg{ font-size:0.85rem; color:var(--ok); background:var(--ok-bg); padding:0.65rem 0.9rem; border-radius:9px; margin-bottom:1rem; }
.hint{ font-size:0.8rem; color:var(--text-3); }

/* ---- Cartes bien ---- */
.property-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.1rem; }
.property-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.property-card:hover{ box-shadow:var(--shadow); }
.property-card-photo{ aspect-ratio:4/3; background:var(--accent-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.property-card-photo img{ width:100%; height:100%; object-fit:cover; }
.property-card-body{ padding:0.85rem 0.95rem; }
.property-card-title{ font-weight:600; font-size:0.95rem; margin:0 0 0.2rem; }
.property-card-city{ font-size:0.82rem; color:var(--text-2); margin:0 0 0.5rem; }
.property-card-price{ font-weight:700; font-size:0.95rem; }
.property-card-price small{ font-weight:400; color:var(--text-2); }

/* ---- Fiche bien ---- */
.property-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.property-photos{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:0.5rem; border-radius:var(--radius); overflow:hidden; margin-bottom:1.4rem; max-height:420px; }
.property-photos img{ width:100%; height:100%; object-fit:cover; display:block; }
.property-photos > *:first-child{ grid-row:span 2; }
.property-layout{ display:flex; gap:2rem; align-items:flex-start; flex-wrap:wrap; }
.property-main{ flex:2; min-width:300px; }
.booking-card{
  flex:1; min-width:280px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.2rem; position:sticky; top:1rem; box-shadow:var(--shadow);
}
.booking-card-price{ font-size:1.2rem; font-weight:700; margin-bottom:0.9rem; }
.booking-card-price small{ font-weight:400; font-size:0.85rem; color:var(--text-2); }
.booking-total-row{ display:flex; justify-content:space-between; font-size:0.88rem; padding:0.3rem 0; }
.booking-total-row.grand{ font-weight:700; border-top:1px solid var(--border); margin-top:0.4rem; padding-top:0.6rem; }

/* ---- Calendrier disponibilité ---- */
.avail-calendar{ display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; max-width:320px; }
.avail-calendar .day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:0.78rem; border-radius:6px; }
.avail-calendar .day.free{ background:var(--accent-bg); color:var(--accent-dark); cursor:pointer; }
.avail-calendar .day.booked{ background:var(--bg); color:var(--text-3); text-decoration:line-through; }
.avail-calendar .day.empty{ visibility:hidden; }

/* ---- Tables (dashboards) ---- */
.data-table{ width:100%; border-collapse:collapse; font-size:0.88rem; background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.data-table th, .data-table td{ text-align:left; padding:0.65rem 0.85rem; border-bottom:1px solid var(--border); }
.data-table th{ color:var(--text-2); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.02em; background:var(--bg); }
.status-tag{ font-size:0.72rem; font-weight:700; padding:0.15rem 0.55rem; border-radius:99px; text-transform:capitalize; display:inline-block; }
.status-pending{ background:#FFF4DE; color:#946200; }
.status-paid, .status-completed{ background:var(--ok-bg); color:var(--ok); }
.status-cancelled{ background:var(--bg); color:var(--text-3); }
.status-draft{ background:var(--bg); color:var(--text-3); }
.status-published{ background:var(--ok-bg); color:var(--ok); }
.status-disabled{ background:var(--err-bg); color:var(--err); }

.dashboard-nav{ display:flex; gap:0.5rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.dashboard-nav a{ font-size:0.85rem; font-weight:600; padding:0.5rem 0.9rem; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text-2); }
.dashboard-nav a.active{ background:var(--accent-bg); color:var(--accent-dark); border-color:transparent; }

.btn-secondary{ background:var(--surface); border:1px solid var(--border); color:var(--text); font-weight:600; font-size:0.85rem; padding:0.5rem 0.9rem; border-radius:8px; cursor:pointer; }
.btn-danger{ background:var(--err-bg); color:var(--err); border:none; font-weight:600; font-size:0.85rem; padding:0.5rem 0.9rem; border-radius:8px; cursor:pointer; }

.site-footer{ text-align:center; padding:2rem; color:var(--text-3); font-size:0.8rem; }