/* Styles partagés des 4 pages logement : hero, section réservation.
   Chaque page définit --casa (couleur du logement) et --casa-deep. */

/* ── HERO ── */
.chero {
  --ink: #16130f;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: calc(100dvh - 64px);
  margin-top: 64px;
  padding: 0;
  background: #faf6ef;
  overflow: hidden;
}
.chero-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4.5rem);
  position: relative;
}
.chero-panel::before {
  content: '';
  position: absolute;
  left: clamp(1.5rem, 5vw, 4.5rem);
  top: clamp(1.5rem, 4vw, 3rem);
  width: 56px; height: 3px;
  background: var(--casa);
}
.chero-tag {
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6c6258;
  margin-bottom: 1.4rem;
}
.chero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 7.2vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}
.chero-casa { display: block; color: var(--ink); }
.chero-name {
  display: block;
  color: var(--casa);
  font-style: italic;
  padding-bottom: 0.08em; /* dégagement du jambage en italique */
}
.chero-sub {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.45;
  color: #3d352c;
  max-width: 30ch;
  margin-bottom: 2.2rem;
}
.chero-actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.chero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.85rem 2.2rem;
  background: var(--casa); color: #fff; text-decoration: none;
  font: 700 0.82rem 'Lato', sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 2px; white-space: nowrap;
  transition: background 0.25s ease, transform 0.15s ease;
}
.chero-cta:hover { background: var(--casa-deep); }
.chero-cta:active { transform: translateY(1px); }
.chero-link {
  font: 700 0.82rem 'Lato', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 0.6rem 0;
  border-bottom: 1px solid currentColor;
}
.chero-link:hover { color: var(--casa); }
.chero-cta:focus-visible, .chero-link:focus-visible { outline: 3px solid var(--casa); outline-offset: 3px; }
.chero-media { position: relative; min-height: 320px; }
.chero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

@media (max-width: 860px) {
  .chero { grid-template-columns: 1fr; min-height: 0; }
  .chero-media { order: -1; height: 52vh; min-height: 280px; }
  .chero-panel { padding: 2.6rem 1.4rem 3rem; }
  .chero-panel::before { top: 1.3rem; left: 1.4rem; }
  .chero-title { font-size: clamp(3rem, 14vw, 4.2rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .chero-media img { animation: cheroImg 1.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .chero-panel > * { animation: cheroUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .chero-panel > :nth-child(2) { animation-delay: 0.08s; }
  .chero-panel > :nth-child(3) { animation-delay: 0.16s; }
  .chero-panel > :nth-child(4) { animation-delay: 0.24s; }
}
@keyframes cheroImg { from { transform: scale(1.06); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes cheroUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── SECTION RÉSERVATION ── */
.casa-resa { background: #f4efe7; padding: 5rem 1.5rem; scroll-margin-top: 64px; }
.casa-resa-inner { max-width: 1100px; margin: 0 auto; }
.casa-resa h2 {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: #16130f; margin-bottom: 0.6rem;
}
.casa-resa h2 em { color: var(--casa); }
.casa-resa-intro { color: #5c5249; max-width: 60ch; margin-bottom: 2rem; }
.casa-resa-intro strong { color: var(--casa-deep); }