/* Melvane by Design — design system
   Palette pierre/encre quasi monochrome (inspirée Onefinestay), échelle
   typographique du hero (inspirée The Thinking Traveller). Voir brief. */

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

:root {
  --bg: #F5F1E8;
  --bg-deep: #EBE0C9;
  --ink: #1C1A17;
  --accent: #8A6D4A;
  --neutral: #B8AFA0;
  --on-dark: #F5F1E8;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* !important nécessaire : le widget Guesty injecte une règle globale
     "body{background:transparent}" dans sa feuille de style (non isolée),
     qui écraserait sinon notre fond sur toutes les pages où le widget
     est présent. */
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}

p {
  margin: 0 0 1.2em;
  max-width: 62ch;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

/* En-tête transparent par-dessus le hero en haut de page, puis blanc cassé
   (coquille d'œuf) dès qu'on défile. Fixe (et non sticky) pour que la photo
   ou la vidéo du hero passe derrière. Le léger dégradé sombre du haut garde
   le texte clair lisible sur les images claires. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  background: linear-gradient(180deg, rgba(28,26,23,0.42), rgba(28,26,23,0));
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.site-header.scrolled {
  background: rgba(245,240,227,0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(28,26,23,0.08);
  box-shadow: 0 4px 24px rgba(28,26,23,0.05);
}

.site-header.scrolled::before { opacity: 0; }

/* Texte clair tant que l'en-tête est transparent */
.site-header:not(.scrolled) .logo { color: var(--on-dark); }
.site-header:not(.scrolled) .btn-outline {
  color: var(--on-dark);
  border-color: rgba(245,241,232,0.75);
}
.site-header:not(.scrolled) .btn-outline:hover {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--ink);
}
.site-header:not(.scrolled) .burger span { background: var(--on-dark); }
.site-header:not(.scrolled) .burger:hover { background: rgba(245,241,232,0.16); }

/* Révélation douce au scroll */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-1 { transition-delay: 0.05s; }
.reveal-2 { transition-delay: 0.15s; }
.reveal-3 { transition-delay: 0.25s; }

.site-header .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.logo {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  cursor: pointer;
  background: var(--ink);
  color: var(--bg);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn:hover {
  background: transparent;
  color: var(--ink);
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.btn-accent:hover {
  background: transparent;
  color: var(--accent);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}

.nav-links {
  display: flex;
  gap: 8px;
}

/* Boutons Owner/Guest actifs selon la page courante */
.nav-links a[aria-current="page"],
.mobile-menu nav a[aria-current="page"] {
  position: relative;
}
.nav-links a.btn[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 8px;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.burger:hover { background: rgba(28,26,23,0.06); }

.burger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.3s ease;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.lang-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.lang-switch button img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(28,26,23,0.18);
}

.lang-switch button:hover { opacity: 0.85; }

.lang-switch button.active {
  opacity: 1;
  background: rgba(28,26,23,0.07);
}

.site-header:not(.scrolled) .lang-switch button.active { background: rgba(245,241,232,0.2); }
.site-header:not(.scrolled) .lang-switch button img { box-shadow: 0 0 0 1px rgba(245,241,232,0.35); }

.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu-backdrop {
  display: none;
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  z-index: 200;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mobile-menu.open { display: flex; opacity: 1; }

/* À partir d'un certain gabarit, le menu plein écran fait "mauvais goût" :
   on passe à un tiroir qui glisse depuis la droite, avec un fond translucide
   qui laisse deviner la page derrière plutôt que de tout recouvrir. */
@media (min-width: 701px) {
  .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(28,26,23,0.45);
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .mobile-menu-backdrop.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
  }

  .mobile-menu {
    display: flex;
    inset: auto;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 90vw);
    height: 100%;
    box-shadow: -24px 0 60px rgba(28,26,23,0.16);
    opacity: 1;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.35s;
  }

  .mobile-menu.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
  }

}

.mobile-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 24px;
  height: 84px;
  flex: none;
  border-bottom: 1px solid rgba(28,26,23,0.08);
}

.mobile-menu-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.mobile-menu-close:hover { background: rgba(28,26,23,0.06); }

.mobile-menu-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 24px 80px;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-display);
  width: 100%;
}

.mobile-menu nav a {
  font-size: clamp(32px, 8vw, 56px);
  padding: 10px 2px;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.55;
}

.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible {
  opacity: 1;
  color: var(--accent);
}

.mobile-menu nav a[aria-current="page"] {
  opacity: 1;
}

.mobile-menu nav a[aria-current="page"]::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 14px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

@media (max-width: 640px) {
  .nav-links { display: none; }
}

/* Tiroir desktop : placé APRÈS les règles de base du menu (même spécificité,
   l'ordre décide), sinon la taille plein écran mobile reprend le dessus. */
@media (min-width: 701px) {
  .mobile-menu-body {
    justify-content: flex-start;
    padding-top: 48px;
  }

  .mobile-menu nav { gap: 2px; }

  .mobile-menu nav a {
    font-size: 26px;
    padding: 9px 2px;
  }

  .mobile-menu nav a[aria-current="page"]::after {
    width: 6px;
    height: 6px;
    margin-left: 10px;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--on-dark);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28,26,23,0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 24px 80px;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: end;
}

.hero-title {
  font-size: clamp(72px, 12vw, 160px);
  color: var(--on-dark);
  margin: 0;
  line-height: 0.95;
}

.hero-subtitle {
  color: var(--on-dark);
  font-size: 17px;
  max-width: 42ch;
  margin-bottom: 32px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

@media (max-width: 760px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero { min-height: 100vh; align-items: center; }
}

/* ---------- Sections ---------- */

section { padding: 96px 0; }

.section-title {
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 24px;
}

.section-lede {
  max-width: 60ch;
  color: var(--ink);
  font-size: 18px;
  margin-bottom: 48px;
}

/* Reassurance stats */

.stats {
  background: var(--bg-deep);
  color: var(--ink);
  padding: 64px 0;
  border-top: 1px solid rgba(28,26,23,0.07);
  border-bottom: 1px solid rgba(28,26,23,0.07);
}

.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  color: var(--ink);
  margin-bottom: 4px;
}

.stat-label {
  color: rgba(28,26,23,0.55);
  font-size: 14px;
}

@media (max-width: 700px) {
  .stats .container { grid-template-columns: repeat(2, 1fr); }
}

/* Pourquoi Melvane / différenciants */

.proof {
  background: var(--bg-deep);
  color: var(--ink);
  border-top: 1px solid rgba(28,26,23,0.07);
  border-bottom: 1px solid rgba(28,26,23,0.07);
}

.proof .section-title,
.proof h3 { color: var(--ink); }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 48px;
}

.proof-block h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.proof-block p {
  color: rgba(28,26,23,0.6);
  font-size: 16px;
}

.proof-numbers {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.rating-card {
  flex: 1 1 180px;
  background: var(--bg);
  border: 1px solid rgba(28,26,23,0.08);
  border-radius: 6px;
  padding: 28px 32px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.rating-card:hover {
  border-color: rgba(28,26,23,0.16);
  box-shadow: 0 12px 32px rgba(28,26,23,0.06);
  transform: translateY(-2px);
}

.rating-stars {
  position: relative;
  display: inline-block;
  font-size: 17px;
  letter-spacing: 3px;
  color: rgba(28,26,23,0.15);
  margin-bottom: 16px;
}

.rating-stars::before {
  content: '★★★★★';
  position: absolute;
  inset: 0;
  width: var(--pct, 100%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--accent);
}

.proof-number-value {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--ink);
  line-height: 1;
}

.proof-number-value span {
  font-family: var(--font-body);
  font-size: 18px;
  color: rgba(28,26,23,0.45);
  margin-left: 2px;
}

.proof-number-label {
  color: rgba(28,26,23,0.5);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 10px;
}

@media (max-width: 860px) {
  .proof-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Pillars (Ce qui nous distingue) */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 48px;
}

.pillar h3 { font-size: 22px; margin-bottom: 10px; }
.pillar p { color: var(--ink); }

@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; gap: 32px; }
}

/* Apartments grid */

.apartments-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 48px;
}

.apartment-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  margin-bottom: 20px;
}

.apartment-card .quartier {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.apartment-card h3 { font-size: 22px; margin-bottom: 8px; }

.apartment-card p { font-size: 15px; color: var(--ink); }

@media (max-width: 760px) {
  .apartments-grid { grid-template-columns: 1fr; }
}

.section-cta {
  margin-top: 40px;
}

.section-cta a {
  font-weight: 600;
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  padding-bottom: 2px;
}

/* Two-col editorial (guest experience) */

.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.editorial img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

@media (max-width: 860px) {
  .editorial { grid-template-columns: 1fr; gap: 32px; }
}

/* Owners page specific blocks */

.owner-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid rgba(28,26,23,0.08);
}

.owner-block:last-of-type { border-bottom: none; }

.owner-block img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Pilules de service (cliquables, ancrent vers le détail plus bas) */

.service-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.service-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 6px 6px;
  background: var(--bg);
  border: 1px solid rgba(28,26,23,0.08);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(28,26,23,0.07);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.service-pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-dark);
  font-size: 11px;
  font-weight: 700;
}

.service-pill:hover {
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: 0 8px 20px rgba(28,26,23,0.16);
  transform: translateY(-2px);
}

/* Détail des prestations (cibles des ancres ci-dessus) : mêmes blocs
   alternés image/texte que l'intro de la page, un par prestation. */

.owner-block[id] {
  scroll-margin-top: 110px;
}

.service-detail {
  padding-top: 16px;
  border-top: 2px solid var(--accent);
}

.service-detail-num {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.service-detail h3 {
  font-size: 26px;
  margin-bottom: 12px;
}

.service-detail p {
  font-size: 16px;
  color: rgba(28,26,23,0.65);
}

@media (max-width: 860px) {
  .owner-block { grid-template-columns: 1fr; gap: 32px; }
}

/* Contact / booking bands */

.booking-band {
  background: var(--ink);
  color: var(--on-dark);
  text-align: center;
  padding: 80px 0;
}

.booking-band h2 { color: var(--on-dark); }
.booking-band p { color: var(--neutral); margin: 0 auto 32px; }

.widget-shell {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  max-width: 900px;
  margin: 0 auto;
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(28,26,23,0.08);
  border: 1px solid rgba(28,26,23,0.06);
}

.widget-placeholder {
  border: 1px dashed var(--neutral);
  border-radius: 4px;
  padding: 48px 24px;
  text-align: center;
  color: var(--ink);
  font-size: 14px;
}

/* ---------- Widget Guesty : habillage "natif" ----------
   Le widget n'est pas dans un iframe (voir snippet fourni par Guesty),
   donc son DOM est dans notre propre page : on peut le restyler avec
   notre propre CSS, malgré ce que suggérait le brief initial. Seules
   les règles internes qui utilisent des couleurs/valeurs calculées en
   JS (ex. la couleur "brand-primary") restent hors de notre contrôle
   direct, mais on la pilote déjà via le paramètre "color" du widget. */

.guesty-root-element,
.guesty-root-element * {
  font-family: var(--font-body) !important;
}

/* Le widget rend chaque champ dans une balise <section> — notre règle
   globale "section { padding: 96px 0 }" (pensée pour les sections de
   page) s'y appliquait aussi et gonflait chaque champ de ~192px de vide.
   On neutralise le padding uniquement à l'intérieur du widget. */
.guesty-root-element section {
  padding: 0 !important;
}

/* La destination (cities-dropdown) est un <select> que Guesty passe lui-même
   en display:none tant qu'aucune destination n'est configurée côté back-office
   (une seule option placeholder désactivée) — mais sa section garde sa largeur
   dans le flex, ce qui créait un grand vide à gauche de la barre. On la masque
   entièrement ; à réactiver dès que des destinations existent dans Guesty. */
.guesty-root-element .cities-dropdown {
  display: none !important;
}

.guesty-root-element.guesty-widget__container {
  display: flex !important;
  align-items: stretch !important;
  gap: 0;
  width: 100%;
  border: 1px solid rgba(28,26,23,0.15);
  border-radius: 8px;
  /* Pas d'overflow:hidden ici : le calendrier (.lightpick) et le menu du
     sélecteur de voyageurs se positionnent en absolute par rapport à cette
     barre et débordent volontairement en dessous — un overflow:hidden les
     couperait entièrement. On simule le pourtour arrondi uniquement sur le
     bouton (seul enfant avec un fond plein) au lieu de clipper le conteneur. */
  background: var(--bg);
}

.guesty-root-element .guesty-widget__item {
  margin: 0 !important;
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 4px 20px;
  border-right: 1px solid rgba(28,26,23,0.12);
}

.guesty-root-element .guesty-widget__item:last-child {
  border-right: none;
  flex: 0 0 auto;
  padding: 0;
}

/* Le champ dates pèse deux fois plus qu'un champ simple (2 inputs à l'intérieur) */
.guesty-root-element .guesty-widget__item:has(#guesty-search-widget__datepicker) {
  flex: 2 1 0;
}

.guesty-root-element #guesty-search-widget__datepicker {
  display: flex;
  align-items: center;
  width: 100%;
}

.guesty-root-element #guesty-search-widget__datepicker > div {
  flex: 1 1 50%;
  min-width: 0;
}

.guesty-root-element #guesty-search-widget__datepicker > div:first-child {
  border-right: 1px solid rgba(28,26,23,0.12);
}

.guesty-root-element .__super-input {
  border: none !important;
  background: transparent !important;
  width: 100%;
  height: 56px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  box-sizing: border-box;
}

.guesty-root-element .guests-dropdown,
.guesty-root-element .selectr-container {
  width: 100%;
}

.guesty-root-element .selectr-selected {
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  height: 56px !important;
  display: flex !important;
  align-items: center;
  padding: 0 16px !important;
  font-size: 14px !important;
}

.guesty-root-element .guesty-search-submit-btn {
  height: 56px !important;
  width: 180px !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent) !important;
  color: var(--on-dark) !important;
  transition: opacity 0.2s ease;
}

.guesty-root-element .guesty-search-submit-btn:hover {
  opacity: 0.85;
}

@media (max-width: 700px) {
  .guesty-root-element.guesty-widget__container {
    flex-direction: column;
    border-radius: 12px;
  }
  .guesty-root-element .guesty-widget__item {
    border-right: none;
    border-bottom: 1px solid rgba(28,26,23,0.12);
    width: 100%;
  }
  .guesty-root-element .guesty-widget__item:last-child {
    border-bottom: none;
  }
  .guesty-root-element .guesty-search-submit-btn {
    width: 100% !important;
    border-radius: 0 0 12px 12px !important;
  }
}

/* Contact form */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

form.contact-form { display: flex; flex-direction: column; gap: 16px; }

.contact-form label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 6px;
  display: block;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--neutral);
  border-radius: 2px;
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}

.contact-form textarea { min-height: 140px; resize: vertical; }

.contact-info p { margin-bottom: 8px; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Footer */

.site-footer {
  background: var(--ink);
  color: var(--neutral);
  padding: 56px 0 32px;
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.site-footer a { color: var(--on-dark); }

.site-footer .footer-bottom {
  margin-top: 40px;
  font-size: 13px;
  color: var(--neutral);
  border-top: 1px solid rgba(245,241,232,0.15);
  padding-top: 20px;
}

/* Page hero (non-home pages) */

.page-hero {
  padding: 160px 0 64px;
  text-align: left;
}

.page-hero h1 { font-size: clamp(48px, 7vw, 84px); }

/* Variante photographique : image d'ambiance Paris en fond, overlay ink
   pour la lisibilité du texte clair — remplace le bandeau plat sur les
   pages secondaires (tendance 2026 : hero éditorial plutôt qu'un simple
   titre sur fond uni). */
.page-hero.has-image {
  position: relative;
  padding: 284px 0 88px;
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
}

.page-hero.has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,26,23,0.55), rgba(28,26,23,0.4));
}

.page-hero.has-image .container {
  position: relative;
  z-index: 1;
}

.page-hero.has-image h1,
.page-hero.has-image .section-lede {
  color: var(--on-dark);
}

.page-hero.has-image .section-lede {
  color: rgba(245,241,232,0.85);
}

/* Variante vidéo : fond animé (boucle silencieuse). Titre, sous-titre et
   widget forment un seul bloc, centré verticalement dans la vidéo (pas
   seulement le titre avec le widget qui déborde en bas). */
.page-hero.has-video {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  padding: 224px 0 140px;
  /* Pas d'overflow:hidden ici : le calendrier du widget s'ouvre vers le bas et
     déborde du hero — c'est .hero-media qui rogne la vidéo (ci-dessous). */
  color: var(--on-dark);
}

.page-hero.has-video .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.page-hero.has-video .hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.page-hero.has-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(28,26,23,0.42);
  z-index: 1;
}

.page-hero.has-video .container {
  position: relative;
  z-index: 2;
}

.page-hero.has-video h1 {
  font-size: clamp(32px, 4.2vw, 52px);
  color: var(--on-dark);
}

.page-hero.has-video .section-lede {
  color: rgba(245,241,232,0.85);
  margin-bottom: 0;
}

.page-hero.has-video .widget-shell {
  margin: 36px 0 0;
  max-width: 720px;
}

@media (max-width: 700px) {
  .page-hero.has-video { min-height: auto; padding: 150px 0 56px; }
  .page-hero.has-video .widget-shell { max-width: none; }
}

/* Bande éditoriale plein cadre (pause visuelle entre deux sections) */

.editorial-break {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.editorial-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(28,26,23,0.32);
}

.editorial-break .container {
  position: relative;
  z-index: 1;
  padding-top: 64px;
  padding-bottom: 64px;
}

.editorial-break .section-title {
  color: var(--on-dark);
}

.editorial-break .pillar h3 {
  color: var(--on-dark);
}

.editorial-break .pillar p {
  color: rgba(245,241,232,0.82);
}

@media (max-width: 700px) {
  .editorial-break { background-attachment: scroll; min-height: 46vh; }
}

/* Practical info list (Guests) */

.practical-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.practical-item h3 { font-size: 18px; margin-bottom: 8px; }
.practical-item p { font-size: 15px; }

@media (max-width: 860px) {
  .practical-list { grid-template-columns: 1fr; }
}

/* Team */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.team-card { text-align: left; }
.team-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: 12px;
}
.team-card h3 { font-size: 16px; margin-bottom: 2px; }
.team-card p { font-size: 13px; color: var(--neutral); margin: 0; }

@media (max-width: 860px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}