/* Villa Terracotta : design « Ocre » choisi par Hamza le 16/10/2026 (proposition 1 sur 4).
   Fond couleur des murs de la villa, typographie Bodoni Moda (titres) + Jost (texte), photo de la piscine découpée en arche. */
:root {
  --bg: #f3e4d6; --bg2: #ecd6c3; --paper: #faf3ec; --ink: #3b1d12; --mute: #7a5646; --clay: #b9582f; --clay-d: #9a4422; --line: #d9bba3; --ok: #2f6b45; --err: #a3261b;
  --serif: "Bodoni Moda", "Didot", Georgia, serif; --sans: "Jost", "Futura", system-ui, sans-serif;
  --w: 1180px; --r: 2px;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--ink); font: 300 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block; height: auto }
a { color: inherit }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0 0 .5em; text-wrap: balance }
h1 { font-size: clamp(40px, 6.4vw, 78px) } h2 { font-size: clamp(30px, 4vw, 48px) } h3 { font-size: clamp(24px, 2.6vw, 32px) }
h1 em, h2 em { color: var(--clay); font-style: italic }
p { margin: 0 0 1em; max-width: 64ch }
.wrap { max-width: var(--w); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.narrow { max-width: 760px }
.skip { position: absolute; left: -999px } .skip:focus { left: 16px; top: 16px; background: var(--paper); padding: 8px 12px; z-index: 50 }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px }
.kicker, .lbl { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px }
.lead { font-size: clamp(18px, 2vw, 21px) }
.small { font-size: 14px; color: var(--mute) } .muted { color: var(--mute) }
.btn { display: inline-block; background: var(--clay); color: #fff; text-decoration: none; padding: 15px 26px; font: 500 14px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; border: 0; border-radius: var(--r); cursor: pointer; transition: background .2s }
.btn:hover { background: var(--clay-d) } .btn-sm { padding: 11px 16px; font-size: 12px } .btn-light { background: var(--paper); color: var(--ink) } .btn-light:hover { background: #fff }
.btn[disabled] { opacity: .6; cursor: wait }
.link { color: var(--clay-d); text-underline-offset: 4px }

/* En-tête */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.top-in { display: flex; align-items: center; gap: 22px; height: 68px }
.logo { font-family: var(--serif); font-size: 24px; text-decoration: none; white-space: nowrap; margin: 0 }
.menu { display: flex; gap: 26px; margin-left: auto; font-size: 13px; letter-spacing: .14em; text-transform: uppercase }
.menu a { text-decoration: none } .menu a:hover { color: var(--clay) }
.lang { font-size: 13px; letter-spacing: .12em; text-decoration: none; border: 1px solid var(--ink); padding: 6px 9px; border-radius: var(--r) }

/* Accueil */
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 80px) }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center }
.hero-act { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 28px 0 }
.arch { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 48% 48% 0 0 / 36% 36% 0 0 }
.facts { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px }
.facts b { font-family: var(--serif); font-size: 30px; font-weight: 400; margin-right: 6px }
.rating { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 15px; color: var(--mute) }
.badge { background: var(--paper); border: 1px solid var(--line); padding: 3px 10px; font-size: 13px; color: var(--ink) }
.intro { padding: clamp(40px, 7vw, 96px) 0; background: var(--paper); text-align: center }
.intro p { margin-left: auto; margin-right: auto; font-size: 19px }
.spaces { padding: clamp(40px, 6vw, 88px) 0 }
.space { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; margin-bottom: clamp(36px, 6vw, 80px) }
.space.rev .space-pic { order: 2 }
.space-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover }
.space:nth-child(2) .space-pic img { border-radius: 0 0 0 46% / 0 0 0 40% }
.space:nth-child(3) .space-pic img { aspect-ratio: 4 / 5; max-height: 640px }
.suites, .reviews { padding: clamp(40px, 6vw, 88px) 0; background: var(--bg2) }
.sec-h { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px 64px; align-items: end; margin-bottom: 32px }
.sec-h p { margin: 0 }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.strip figure { margin: 0 } .strip img { aspect-ratio: 3 / 4; object-fit: cover; width: 100% }
.strip figcaption { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; color: var(--mute) }
.more { margin: 24px 0 0 }
.amen { padding: clamp(40px, 6vw, 80px) 0 }
.cols { columns: 3 220px; column-gap: 40px; padding: 0; margin: 0; list-style: none }
.cols li { padding: 9px 0; border-bottom: 1px solid var(--line); break-inside: avoid }
.services, .place { padding: clamp(40px, 6vw, 88px) 0 }
.services { background: var(--paper) }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center }
.services-pic img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 0 46% 0 0 / 0 40% 0 0 }
.place-pic img { aspect-ratio: 4 / 3; object-fit: cover; width: 100% }
dl.price, dl.near, .scores dl { margin: 18px 0; padding: 0 }
dl.price div, dl.near div, .scores dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line) }
dt { margin: 0 } dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap }
.scores { display: grid; grid-template-columns: auto auto 1fr; gap: 16px 48px; align-items: start }
.big { font-family: var(--serif); font-size: clamp(54px, 7vw, 84px); line-height: 1; margin: 0 }
.big small { display: block; font: 400 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: 6px }
.scores dl { margin: 0; columns: 2 180px; column-gap: 32px }
.host { margin-top: 32px }
.rules { padding: clamp(40px, 6vw, 80px) 0 }
.rules ul { padding-left: 1.1em } .rules li { margin: 6px 0 }
.cta { background: var(--clay); color: #fff; padding: clamp(40px, 6vw, 72px) 0 }
.cta-in { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between }
.cta h2 { color: #fff } .cta .small { color: #f7e3d6 } .cta a:not(.btn) { color: #fff }

/* Pied de page */
.foot { background: var(--ink); color: #ecd9cb; padding: 48px 0 calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 15px }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px }
.foot a { display: block; text-decoration: none; margin: 4px 0 } .foot a:hover { color: #fff }
.foot .lbl { color: #b99886; margin: 10px 0 6px }
.foot-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; border-top: 1px solid #5a3a2c; padding-top: 18px; font-size: 13px }
.wa-float { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 30 }

/* Pages intérieures */
.page-h { padding: clamp(32px, 5vw, 64px) 0 clamp(16px, 3vw, 32px) }
.text { padding-bottom: 64px } .text h2 { font-size: 26px; margin-top: 1.4em } mark { background: #f4d27a; padding: 0 4px }
.g-group { margin-bottom: 48px } .g-group h2 { font-size: 30px }
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.g-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .2s } .g-item:hover img { opacity: .85 }
.lb { position: fixed; inset: 0; background: rgba(30, 14, 8, .94); z-index: 60; display: grid; place-items: center; padding: 56px 12px }
.lb img { max-height: 86vh; width: auto; max-width: 100% }
.lb button { position: absolute; background: none; border: 0; color: #fff; font: 300 40px/1 var(--sans); cursor: pointer; padding: 12px 18px }
.lb .x { top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px } .lb .pv { left: 4px; top: 50% } .lb .nx { right: 4px; top: 50% }

/* Réservation */
.book { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding-bottom: 72px; align-items: start }
.cal { background: var(--paper); padding: 18px; border: 1px solid var(--line) }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px }
.cal-nav button { background: none; border: 1px solid var(--line); width: 38px; height: 38px; cursor: pointer; font-size: 18px; color: var(--ink) }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.cal-m h3 { font: 500 15px var(--sans); text-transform: capitalize; text-align: center; margin: 4px 0 8px }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums }
.cal-g .dn { font-size: 11px; color: var(--mute); text-transform: uppercase; padding: 4px 0 }
.cal-g button { aspect-ratio: 1; border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit; border-radius: 0 }
.cal-g button:hover:not([disabled]) { background: var(--bg2) }
.cal-g button[disabled] { color: #bca595; cursor: not-allowed; text-decoration: line-through }
.cal-g button.in { background: var(--bg2) } .cal-g button.sel { background: var(--clay); color: #fff }
.book-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px }
.book-form { display: grid; gap: 14px }
label { display: grid; gap: 6px; font-size: 14px; color: var(--mute) }
input, select, textarea { font: 400 16px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 11px 12px; border-radius: var(--r); width: 100%; min-width: 0 }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
fieldset { border: 1px solid var(--line); padding: 10px 14px; margin: 0 } legend { font-size: 14px; color: var(--mute); padding: 0 6px }
.extra { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; color: var(--ink); padding: 6px 0 }
.extra input[type=checkbox], .check input { width: 20px; height: 20px; accent-color: var(--clay) }
.extra small { display: block; color: var(--mute) } .qty { width: 72px }
.check { grid-template-columns: auto 1fr; align-items: start; color: var(--ink) }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.quote { background: var(--paper); border: 1px solid var(--line); padding: 14px 16px }
.quote-h { font-family: var(--serif); font-size: 22px; margin: 0 0 6px }
.quote dl { margin: 0 } .quote dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px }
.quote .tot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 500 }
.pay { display: grid; gap: 10px; border: 1px solid var(--line); background: var(--paper); padding: 12px 14px }
.pay-now { margin: 0 } .pay-now b { font-weight: 500 }
.pay-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #a8948a; font-size: 14px }
.pay-card span { margin-right: 4px } .pay-card svg.card { width: 40px; height: 26px }
.pay-card em { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: var(--bg2); color: var(--mute); padding: 3px 8px }
.form-msg { min-height: 1.4em; margin: 0 } .form-msg.ok { color: var(--ok); font-weight: 500 } .form-msg.err, .quote .err { color: var(--err) }

@media (max-width: 900px) {
  .menu { display: none }
  .top-in { gap: 12px } .lang { margin-left: auto }
  .hero-in, .two, .space, .sec-h, .book { grid-template-columns: 1fr }
  .hero-pic { order: -1 } .arch { aspect-ratio: 1 / 1 }
  .space.rev .space-pic { order: 0 }
  .strip { grid-template-columns: 1fr 1fr }
  .scores { grid-template-columns: auto auto } .scores dl { grid-column: 1 / -1 }
  .foot-in { grid-template-columns: 1fr }
  .g-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px) { .cal-months { grid-template-columns: 1fr } .cal-m + .cal-m { display: none } .row2, .book-dates { grid-template-columns: 1fr } .logo { font-size: 20px } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } * { transition: none !important } }
/* Les colonnes de grille ne doivent jamais s'élargir au-delà de l'écran (texte long, champs de formulaire) */
.hero-in > *, .two > *, .space > *, .sec-h > *, .book > *, .foot-in > *, .row2 > *, .book-dates > * { min-width: 0 }