:root {
  --sand: #f6efe6;
  --sand-2: #efe4d6;
  --terracotta: #b5573a;
  --terracotta-dark: #924229;
  --palm: #2f4a3a;
  --ink: #1e1b18;
  --muted: #6d645b;
  --white: #fffdf9;
  --radius: 18px;
  --shadow: 0 18px 40px -22px rgba(30, 27, 24, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(2rem, 3.5vw, 2.9rem); }
h3 { font-size: 1.5rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--terracotta); font-weight: 600; margin: 0 0 .8em; }

.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  background: var(--terracotta); color: var(--white); font: 600 1rem Inter, sans-serif;
  padding: .95em 1.6em; border-radius: 999px; transition: background .2s, transform .2s;
}
.btn:hover { background: var(--terracotta-dark); transform: translateY(-1px); }
.btn-small { padding: .6em 1.2em; font-size: .9rem; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Navigation */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 3rem); background: rgba(246, 239, 230, .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30, 27, 24, .06);
}
.brand { font: 700 1.5rem "Cormorant Garamond", serif; text-decoration: none; }
.brand em { font-style: normal; color: var(--terracotta); }
.brand-mark { color: var(--palm); }
.nav-links { display: flex; gap: 1.6rem; align-items: center; font-size: .95rem; }
.nav-links a:not(.btn) { text-decoration: none; color: var(--muted); }
.nav-links a:not(.btn):hover { color: var(--ink); }

/* Hero */
.hero {
  position: relative; min-height: 92vh; display: grid; align-items: end;
  padding: 7rem clamp(1rem, 4vw, 3rem) 4rem; background: var(--palm) center / cover no-repeat; color: var(--white);
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,15,.15) 0%, rgba(20,18,15,.7) 100%); }
.hero-content { position: relative; max-width: 980px; }
.hero .eyebrow { color: #f3c9a8; }
.hero-sub { font-size: 1.15rem; max-width: 620px; opacity: .92; }
.search {
  margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: .8rem; align-items: end;
  background: var(--white); color: var(--ink); padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow);
}
.search label, .book label { display: grid; gap: .3rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
input, select, textarea {
  font: 400 1rem Inter, sans-serif; color: var(--ink); padding: .75em .9em;
  border: 1px solid #d9cdbd; border-radius: 12px; background: var(--white); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--terracotta); border-color: transparent; }

/* Trust bar */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); color: var(--white); }
.trust div { padding: 1.4rem 1rem; text-align: center; display: grid; gap: .1rem; border-right: 1px solid rgba(255,255,255,.08); }
.trust strong { font: 700 1.6rem "Cormorant Garamond", serif; color: #f3c9a8; }
.trust span { font-size: .85rem; opacity: .8; }

/* Sections */
.section { padding: 5.5rem clamp(1rem, 4vw, 3rem); max-width: 1320px; margin: 0 auto; }
.section.alt { max-width: none; background: var(--sand-2); }
.section.alt > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.section-head { text-align: center; margin-bottom: 2.5rem; }
.filters { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.chip { border: 1px solid #cdbfae; background: transparent; padding: .5em 1.1em; border-radius: 999px; cursor: pointer; font: 500 .9rem Inter, sans-serif; }
.chip.active { background: var(--palm); border-color: var(--palm); color: var(--white); }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; }
.card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .25s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-4px); }
.card-img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: var(--sand-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card:hover .card-img img { transform: scale(1.05); }
.badge { position: absolute; top: .8rem; left: .8rem; background: rgba(255,253,249,.92); padding: .25em .7em; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.card-body { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .35rem; flex: 1; }
.card-body h3 { font-size: 1.35rem; margin: 0; }
.card-meta { color: var(--muted); font-size: .9rem; }
.price { margin-top: auto; padding-top: .5rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.price strong { font-size: 1.25rem; }
.price s { color: var(--muted); font-size: .9rem; }
.price .save { background: #e5efe8; color: var(--palm); font-size: .75rem; font-weight: 600; padding: .15em .6em; border-radius: 999px; }

/* Features */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.features article { background: var(--white); padding: 1.6rem; border-radius: var(--radius); }
.ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--palm); color: var(--white); font-size: 1.2rem; margin-bottom: .8rem; }

/* Location */
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center; }
.ticks { list-style: none; padding: 0; display: grid; gap: .7rem; }
.ticks li::before { content: "✦"; color: var(--terracotta); margin-right: .6rem; }
.map { width: 100%; height: 380px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }

/* FAQ */
.faq { max-width: 820px; display: grid; gap: .8rem; }
.faq details { background: var(--white); border-radius: 14px; padding: 1.1rem 1.3rem; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: .7rem 0 0; color: var(--muted); }

/* Footer */
.footer { background: var(--palm); color: var(--white); padding: 3rem clamp(1rem, 4vw, 3rem); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; align-items: start; }
.footer p { margin: .4rem 0; opacity: .85; }
.footer .brand em { color: #f3c9a8; }
.paylogos { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.paylogos span, .paylist span { border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: .35em .7em; font-size: .8rem; font-weight: 600; letter-spacing: .04em; }
.wa-float { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 15; background: #25d366; color: #fff; text-decoration: none; font-weight: 600; padding: .85em 1.3em; border-radius: 999px; box-shadow: var(--shadow); }

/* Modal */
dialog { width: min(1180px, 96vw); max-height: 94vh; border: 0; border-radius: 22px; padding: 0; background: var(--sand); color: var(--ink); }
dialog::backdrop { background: rgba(20, 18, 15, .6); }
.close { position: sticky; top: .8rem; float: right; margin: .8rem; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--white); font-size: 1.6rem; cursor: pointer; box-shadow: var(--shadow); }
.m-body { padding: 0 clamp(1rem, 3vw, 2.2rem) 2rem; }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: .5rem; border-radius: var(--radius); overflow: hidden; margin: 1rem 0 1.8rem; }
.gallery img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gallery img:first-child { grid-row: span 2; }
.detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.4rem; align-items: start; }
.desc { color: #3c3630; white-space: pre-line; }
.desc.clamp { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.link { background: none; border: 0; color: var(--terracotta); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
.rule { background: #fbe9df; border-left: 4px solid var(--terracotta); padding: .9rem 1rem; border-radius: 10px; font-size: .92rem; }

/* Booking panel */
.book { position: sticky; top: 1rem; background: var(--white); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); display: grid; gap: .9rem; }
.book .row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pay { display: grid; gap: .6rem; }
.book .pay-opt { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid #d9cdbd; border-radius: 12px; padding: .8rem; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 500; color: var(--ink); }
.pay-opt input { width: auto; margin-top: .25rem; }
.pay-opt.off { opacity: .55; cursor: not-allowed; }
.pay-opt small { display: block; color: var(--muted); font-weight: 400; }
.paylist { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; }
.paylist span { border-color: #d9cdbd; color: var(--ink); font-size: .7rem; }
.total { border-top: 1px solid #eadfce; padding-top: .8rem; display: grid; gap: .3rem; font-size: .95rem; }
.total div { display: flex; justify-content: space-between; }
.total .big { font-weight: 700; font-size: 1.1rem; }
.book .pay-opt span { text-transform: none; letter-spacing: 0; }
.check { display: flex !important; gap: .6rem; align-items: flex-start; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: .85rem !important; }
.check input { width: auto; margin-top: .2rem; }
.note { font-size: .8rem; color: var(--muted); margin: 0; }
.err { color: #a12a1a; font-size: .85rem; margin: 0; min-height: 1em; }
.done { background: var(--white); border-radius: var(--radius); padding: 1.6rem; display: grid; gap: .8rem; }
.done dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; }
.done dt { color: var(--muted); }
.done dd { margin: 0; font-weight: 600; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(10,9,8,.92); display: grid; place-items: center; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 10px; }
.lightbox button { position: absolute; top: 50%; background: rgba(255,255,255,.15); color: #fff; border: 0; width: 52px; height: 52px; border-radius: 50%; font-size: 1.8rem; cursor: pointer; }
.lightbox .prev { left: 1.5rem; } .lightbox .next { right: 1.5rem; }
.lightbox .lb-close { top: 1.5rem; right: 1.5rem; }

@media (max-width: 980px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .detail, .split { grid-template-columns: 1fr; }
  .search { grid-template-columns: 1fr 1fr; }
  .search .btn { grid-column: span 2; }
  .footer { grid-template-columns: 1fr; }
  .paylogos { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .nav-links a:not(.btn) { display: none; }
  .trust { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 120px; }
  .gallery img:first-child { grid-column: span 2; grid-row: auto; }
  .gallery img:nth-child(n+4) { display: none; }
  .search { grid-template-columns: 1fr; }
  .search .btn { grid-column: auto; }
  .book .row { grid-template-columns: 1fr; }
}

/* Langues */
.lang { width: auto; padding: .35em .5em; border-radius: 999px; font-size: .85rem; background: transparent; cursor: pointer; }
html[dir="rtl"] body { font-family: Cairo, Inter, sans-serif; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .brand { font-family: Cairo, serif; }
html[dir="rtl"] .eyebrow { letter-spacing: 0; }
html[dir="rtl"] .ticks li::before { margin: 0 0 0 .6rem; }
html[dir="rtl"] .wa-float { right: auto; left: 1.2rem; }
html[dir="rtl"] .badge { left: auto; right: .8rem; }
html[dir="rtl"] .close { float: left; }
html[dir="rtl"] .paylogos { justify-content: flex-start; }
.center { text-align: center; }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 62ch; margin: 0 auto; }

/* Badges hero */
.hero-badges { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.hb { background: rgba(255,253,249,.16); border: 1px solid rgba(255,253,249,.35); backdrop-filter: blur(6px); padding: .4em .9em; border-radius: 999px; font-size: .88rem; font-weight: 600; }

/* Avis */
.section.dark { max-width: none; background: var(--ink); color: var(--white); }
.section.dark > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.section.dark .lead, .section.dark .note { color: rgba(255,253,249,.7); }
.section.dark .eyebrow { color: #f3c9a8; }
.rev-top { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: stretch; margin-bottom: 2rem; }
.rev-badge { background: linear-gradient(160deg, var(--terracotta), #7d3520); border-radius: var(--radius); padding: 2rem 1.5rem; display: grid; gap: .3rem; justify-items: center; text-align: center; }
.rev-score { font: 700 4.2rem/1 "Cormorant Garamond", serif; }
.stars { color: #f3c9a8; letter-spacing: 3px; }
.rev-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rev-stats > div { background: rgba(255,253,249,.06); border-radius: var(--radius); padding: 1.4rem; display: grid; gap: .2rem; }
.rev-stats b { font: 700 2.2rem "Cormorant Garamond", serif; color: #f3c9a8; }
.rev-stats span { opacity: .75; font-size: .9rem; }
.rev-stats .bars { grid-column: span 3; gap: .7rem; }
.bars p { margin: 0; display: grid; grid-template-columns: 130px 1fr 50px; align-items: center; gap: 1rem; }
.bars i { height: 8px; border-radius: 99px; background: rgba(255,253,249,.12); position: relative; overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: #f3c9a8; border-radius: 99px; }
html[dir="rtl"] .bars i::after { inset: 0 0 0 auto; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.quotes figure { margin: 0; background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .8rem; align-content: start; }
.quotes .stars { color: var(--terracotta); }
.quotes blockquote { margin: 0; font: 500 1.2rem/1.45 "Cormorant Garamond", serif; }
.quotes figcaption { color: var(--muted); font-size: .85rem; }
.platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2rem auto 1rem; }
.pf { display: flex; gap: 1rem; align-items: center; border: 1px solid rgba(255,253,249,.18); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.pf div { display: grid; gap: .15rem; }
.pf span:not(.pf-logo) { opacity: .75; font-size: .9rem; }
.pf-logo { font-weight: 700; padding: .5em .9em; border-radius: 10px; white-space: nowrap; }
.pf-logo.airbnb { background: #ff385c; color: #fff; }
.pf-logo.booking { background: #003580; color: #fff; }

/* Conciergerie */
.concierge { background: #eef3f0; border-top: 6px solid var(--palm); }
.concierge .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.concierge .eyebrow { color: var(--palm); }
.concierge .btn { background: var(--palm); }
.concierge .btn:hover { background: #1f3428; }
.c-hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 3rem; align-items: center; padding-top: 5rem !important; }
.c-hero .lead { margin: 0 0 1.5rem; }
.zellige { aspect-ratio: 1; border-radius: 50% 50% 0 0; max-width: 340px; width: 100%; justify-self: center;
  background: conic-gradient(from 45deg at 50% 50%, var(--palm) 0 25%, transparent 0 50%, var(--palm) 0 75%, transparent 0) 0 0 / 56px 56px,
              radial-gradient(circle at 50% 50%, #c98a0e 0 7px, transparent 8px) 0 0 / 28px 28px, #dfe8e3; }
.c-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #cfdcd5; border-bottom: 1px solid #cfdcd5; padding: 0 !important; }
.c-stats div { padding: 1.4rem 1rem; display: grid; gap: .2rem; text-align: center; }
.c-stats b { font: 700 2.2rem "Cormorant Garamond", serif; color: var(--palm); }
.c-stats span { color: var(--muted); font-size: .9rem; }
.c-h { font-size: 1.9rem; margin-bottom: 1.2rem; }
.c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #cfdcd5; border: 1px solid #cfdcd5; border-radius: var(--radius); overflow: hidden; }
.c-grid div { background: #f7faf8; padding: 1.5rem; }
.c-grid h4 { margin: 0 0 .4rem; font-size: 1.05rem; }
.c-grid p { margin: 0; color: var(--muted); }
.c-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 1rem; }
.c-steps li { counter-increment: s; display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem 1rem; }
.c-steps li::before { content: counter(s); grid-row: span 2; font: 700 2.2rem/1 "Cormorant Garamond", serif; color: var(--palm); }
.c-steps span { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.chips span { border: 1px solid #b9cbc1; border-radius: 999px; padding: .45em 1em; background: #f7faf8; }
.c-faq { max-width: none; }
.c-form { background: var(--white); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .9rem; box-shadow: var(--shadow); }
.c-form label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.c-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

@media (max-width: 980px) {
  .rev-top, .c-hero { grid-template-columns: 1fr; }
  .quotes, .platforms, .c-grid { grid-template-columns: 1fr; }
  .c-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .rev-stats { grid-template-columns: 1fr; }
  .rev-stats .bars { grid-column: auto; }
  .bars p { grid-template-columns: 100px 1fr 40px; }
  .c-form .row { grid-template-columns: 1fr; }
  .nav-links { gap: .6rem; }
}

/* ===== Animations ===== */
.hero { background: #1e1b18 !important; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.6s ease, transform 7s linear; }
.hero-slides img.on { opacity: 1; transform: scale(1.0); }
.hero-dots { position: absolute; bottom: 1.4rem; right: clamp(1rem, 4vw, 3rem); display: flex; gap: .4rem; z-index: 2; }
.hero-dots i { width: 26px; height: 3px; background: rgba(255,255,255,.35); border-radius: 3px; }
.hero-dots i.on { background: #fff; }
html[dir="rtl"] .hero-dots { right: auto; left: clamp(1rem, 4vw, 3rem); }
.hero-content > * { animation: rise .9s both; }
.hero-content > :nth-child(2) { animation-delay: .12s; } .hero-content > :nth-child(3) { animation-delay: .24s; }
.hero-content > :nth-child(4) { animation-delay: .36s; } .hero-content > :nth-child(5) { animation-delay: .48s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Bande photo qui défile */
.strip { overflow: hidden; background: var(--ink); padding: .6rem 0; }
.strip-track { display: flex; gap: .6rem; width: max-content; animation: strip 70s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip img { height: 190px; width: 270px; object-fit: cover; border-radius: 12px; }
@keyframes strip { to { transform: translateX(-50%); } }
html[dir="rtl"] .strip-track { animation-name: strip-rtl; }
@keyframes strip-rtl { to { transform: translateX(50%); } }

/* Cartes : photos au survol */
.card-img img { position: absolute; inset: 0; transition: opacity .6s, transform .6s; }
.card-img img.alt { opacity: 0; }
.card-img.cycling img.alt.on { opacity: 1; }
.card-img .dots { position: absolute; bottom: .7rem; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; opacity: 0; transition: opacity .3s; }
.card:hover .dots { opacity: 1; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.dots i.on { background: #fff; }
.card { transition: transform .35s, box-shadow .35s; }
.card:hover { box-shadow: 0 26px 50px -24px rgba(30,27,24,.6); }
.badge.hot { background: var(--terracotta); color: #fff; left: auto; right: .8rem; }
html[dir="rtl"] .badge.hot { right: auto; left: .8rem; }

/* Avis qui défilent */
.quotes.marquee { display: block; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.quotes.marquee .q-track { display: flex; gap: 1.2rem; width: max-content; animation: strip 45s linear infinite; }
.quotes.marquee:hover .q-track { animation-play-state: paused; }
.quotes.marquee figure { width: 380px; flex: none; }

/* Petits mouvements */
.features article, .c-grid div, .rev-stats > div { transition: transform .3s, box-shadow .3s; }
.features article:hover, .c-grid div:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.ico { transition: transform .5s; } .features article:hover .ico { transform: rotate(-12deg) scale(1.1); }
.zellige { animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wa-float { animation: pulse 2.8s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.btn:hover::after { transform: translateX(120%); }
.nav { transition: box-shadow .3s, background .3s; }
.nav.scrolled { box-shadow: 0 8px 30px -18px rgba(0,0,0,.35); background: rgba(246,239,230,.96); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 640px) { .strip img { height: 130px; width: 180px; } .quotes.marquee figure { width: 290px; } }

.card { animation: rise .6s both; animation-delay: calc(var(--i, 0) * 70ms); }
.resp { font-size: .82rem; opacity: .85; margin-top: .3rem; }

/* ===== Ergonomie mobile ===== */
html, body { overflow-x: clip; max-width: 100%; }
.wa-ico { display: none; }
.book-bar { display: none; }
@media (max-width: 760px) {
  /* En-tête compact sur une ligne */
  .nav { padding: .55rem 12px; gap: .5rem; }
  .brand { font-size: 1.15rem; white-space: nowrap; }
  .brand em { display: none; }
  .nav-links { gap: .35rem; }
  .nav-links .btn-small { padding: .5em .85em; font-size: .82rem; }
  .lang { padding: .3em .2em; font-size: .78rem; border-color: #d9cdbd; max-width: 64px; }
  html[dir="rtl"] .brand em { display: none; }

  /* Accueil */
  .hero { min-height: auto; padding: 5.2rem 16px 2.2rem; }
  .hero h1 { font-size: 2.1rem; }
  .hero-sub { font-size: 1rem; }
  .hero-badges { gap: .4rem; }
  .hb { font-size: .78rem; padding: .3em .7em; }
  .hero-dots { display: none; }
  .search { grid-template-columns: 1fr 1fr; gap: .55rem; padding: .8rem; margin-top: 1.2rem; }
  .search label { font-size: .68rem; }
  .search input, .search select { padding: .6em .55em; font-size: .92rem; }
  .search label:nth-child(3) { grid-column: span 2; }
  .search .btn { grid-column: span 2; padding: .8em; }

  /* Bandeau confiance */
  .trust { grid-template-columns: 1fr 1fr; }
  .trust div { padding: .9rem .5rem; }
  .trust strong { font-size: 1.3rem; }
  .trust span { font-size: .75rem; }

  /* Sections plus serrées */
  .section { padding: 3.2rem 16px; }
  .section-head { margin-bottom: 1.6rem; }
  h2 { font-size: 1.85rem; }
  .filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .3rem; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; flex: none; }
  .grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .card-body h3 { font-size: 1.25rem; }
  .card-img .dots { opacity: 1; }

  /* Avis */
  .rev-score { font-size: 3.4rem; }
  .rev-stats { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .rev-stats > div { padding: .9rem .6rem; }
  .rev-stats b { font-size: 1.5rem; }
  .rev-stats span { font-size: .72rem; }
  .rev-stats .bars { grid-column: span 3; }
  .bars p { grid-template-columns: 92px 1fr 38px; gap: .6rem; font-size: .85rem; }
  .quotes blockquote { font-size: 1.05rem; }
  .pf { flex-direction: column; align-items: flex-start; }

  /* Conciergerie */
  .c-hero { padding-top: 3rem !important; gap: 1.5rem; }
  .zellige { max-width: 180px; }
  .c-stats b { font-size: 1.7rem; }
  .c-h { font-size: 1.55rem; }

  /* Pied de page : place pour le bouton WhatsApp */
  .footer { padding-bottom: 5.5rem; }
  .paylogos span { font-size: .72rem; }

  /* WhatsApp : pastille ronde */
  .wa-float { width: 54px; height: 54px; padding: 0; border-radius: 50%; display: grid; place-items: center; right: 14px; bottom: 14px; font-size: 0; }
  .wa-float .wa-ico { display: block; width: 28px; height: 28px; }
  html[dir="rtl"] .wa-float { left: 14px; right: auto; }

  /* Fiche appartement plein écran */
  dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .m-body { padding: 0 16px 6rem; }
  .m-body h2 { font-size: 1.7rem; }
  .close { position: sticky; top: 10px; width: 40px; height: 40px; margin: 10px; }
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .4rem; grid-template: none; margin: .8rem -16px 1.2rem; padding: 0 16px; border-radius: 0; scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery img, .gallery img:first-child { flex: none; width: 86%; height: 240px; scroll-snap-align: center; border-radius: 14px; grid-row: auto; grid-column: auto; }
  .gallery img:nth-child(n+4) { display: block; }
  .detail { gap: 1.4rem; }
  .book { position: static; padding: 1.1rem; }
  .book input, .book select { font-size: 16px; }
  .book-bar { display: flex; position: sticky; bottom: 0; z-index: 4; margin: 0 -16px; padding: .75rem 16px calc(.75rem + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid #eadfce; align-items: center; justify-content: space-between; gap: 1rem; box-shadow: 0 -10px 30px -20px rgba(0,0,0,.4); }
  .book-bar strong { font-size: 1.15rem; }
  .book-bar small { display: block; color: var(--muted); }
  .book-bar.hide { display: none; }
  .lightbox img { max-width: 100vw; border-radius: 0; }
  .lightbox .prev { left: .4rem; } .lightbox .next { right: .4rem; }

  /* Formulaire conciergerie */
  .c-form input, .c-form select, .c-form textarea { font-size: 16px; }
}
@media (max-width: 380px) {
  .brand { font-size: 1rem; }
  .nav-links .btn-small { display: none; }
}