/* ============================================================
   LA SUITE RAMOO — Design system
   Cocon luxe : albâtre chaud · encre espresso · bronze/laiton · bois
   ============================================================ */

:root {
  /* Couleurs */
  --albatre:      #F4EFE7;   /* fond principal, blanc chaud */
  --albatre-2:    #EDE6DA;   /* fond alterné */
  --creme:        #FBF8F2;   /* cartes / surfaces claires */
  --espresso:     #211C17;   /* encre, sections sombres */
  --espresso-2:   #2E2820;
  --ardoise:      #1A1714;   /* presque noir, footer */
  --bronze:       #A9824F;   /* accent laiton/bronze */
  --bronze-clair: #C49E6C;
  --bois:         #B6936A;   /* bois caramel */
  --taupe:        #8C7D6B;   /* texte secondaire sur clair */
  --taupe-clair:  #B7AC9C;
  --ligne:        rgba(33, 28, 23, 0.12);
  --ligne-claire: rgba(244, 239, 231, 0.18);

  /* Typo */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", system-ui, sans-serif;

  /* Rythme */
  --mx: clamp(20px, 6vw, 120px);
  --maxw: 1320px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--sans);
  background: var(--albatre);
  color: var(--espresso);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  overflow-x: hidden;
}

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

::selection { background: var(--bronze); color: var(--creme); }

/* Typographie utilitaire ------------------------------------ */
.eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}
.eyebrow::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--bronze);
  display: inline-block;
}
.eyebrow.center::after {
  content: "";
  width: 32px; height: 1px;
  background: var(--bronze);
  display: inline-block;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; }

.display {
  font-size: clamp(48px, 9vw, 132px);
  font-weight: 300;
}
.h2 { font-size: clamp(34px, 5vw, 62px); }
.h3 { font-size: clamp(22px, 2.4vw, 30px); }

.lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--taupe); font-weight: 300; }

.serif-italic { font-style: italic; }

/* Boutons ---------------------------------------------------- */
.btn {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 17px 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  transition: all .4s cubic-bezier(.2,.7,.2,1);
  text-decoration: none;
  background: none;
}
.btn-solid { background: var(--espresso); color: var(--creme); }
.btn-solid:hover { background: var(--bronze); transform: translateY(-2px); }
.btn-outline { border-color: var(--espresso); color: var(--espresso); }
.btn-outline:hover { background: var(--espresso); color: var(--creme); }
.btn-bronze { background: var(--bronze); color: var(--creme); }
.btn-bronze:hover { background: var(--bronze-clair); transform: translateY(-2px); }
.btn-ghost-light { border-color: var(--ligne-claire); color: var(--creme); }
.btn-ghost-light:hover { background: var(--creme); color: var(--espresso); border-color: var(--creme); }

/* Conteneur -------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--mx); }
section { position: relative; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--mx);
  transition: background .5s ease, padding .5s ease, box-shadow .5s ease;
}
.nav.scrolled {
  background: rgba(244, 239, 231, 0.92);
  backdrop-filter: blur(14px);
  padding: 14px var(--mx);
  box-shadow: 0 1px 0 var(--ligne);
}
.nav-brand {
  font-family: var(--serif);
  font-size: 25px;
  letter-spacing: 0.02em;
  color: var(--creme);
  text-decoration: none;
  transition: color .5s ease;
  white-space: nowrap;
}
.nav-brand b { font-weight: 600; letter-spacing: 0.06em; }
.nav.scrolled .nav-brand { color: var(--espresso); }
.nav-links { display: flex; align-items: center; gap: 38px; }
.nav-links a {
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--creme); text-decoration: none; font-weight: 400;
  opacity: .85; transition: opacity .3s, color .5s;
}
.nav-links a:hover { opacity: 1; }
.nav.scrolled .nav-links a { color: var(--espresso); }
.nav-cta {
  border: 1px solid var(--ligne-claire);
  padding: 11px 22px;
  transition: all .4s;
}
.nav.scrolled .nav-cta { border-color: var(--espresso); }
.nav-cta:hover { background: var(--bronze); border-color: var(--bronze) !important; color: var(--creme) !important; opacity: 1 !important; }
.nav-burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; }
.nav-burger span { width: 26px; height: 1.5px; background: var(--creme); transition: background .5s; }
.nav.scrolled .nav-burger span { background: var(--espresso); }

/* ============================================================
   HERO
   ============================================================ */
.hero { height: 100svh; min-height: 640px; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.hero-slides { position: absolute; inset: 0; z-index: 0; background: var(--espresso); }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  animation: kenburns 8s ease-out forwards;
  transform: scale(1.08);
}
.hero-slide.active { opacity: 1; z-index: 1; }
@keyframes kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.12); }
}
.hero-veil {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to top, rgba(20,17,14,.82) 0%, rgba(20,17,14,.30) 40%, rgba(20,17,14,.15) 70%, rgba(20,17,14,.45) 100%);
}
.hero-content { position: relative; z-index: 3; width: 100%; padding-bottom: clamp(48px, 8vh, 96px); }
.hero-content .eyebrow { color: var(--creme); }
.hero-content .eyebrow::before { background: var(--creme); }
.hero h1 { color: var(--creme); margin: 22px 0 0; text-shadow: 0 2px 40px rgba(0,0,0,.3); }
.hero-sub {
  color: rgba(251,248,242,.86);
  max-width: 540px;
  margin-top: 26px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 300;
}
.hero-actions { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; }

/* indicateurs + compteur */
.hero-meta {
  position: absolute; z-index: 3; right: var(--mx); bottom: clamp(48px, 8vh, 96px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 16px;
}
.hero-dots { display: flex; gap: 10px; }
.hero-dot { width: 28px; height: 2px; background: rgba(251,248,242,.3); border: none; padding: 0; cursor: pointer; transition: background .4s; }
.hero-dot.active { background: var(--bronze-clair); }
.hero-scroll { color: rgba(251,248,242,.7); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; writing-mode: vertical-rl; }
@media (max-width: 760px){ .hero-meta { display: none; } }

/* ============================================================
   SECTION : intro / l'écrin
   ============================================================ */
.section-pad { padding: clamp(80px, 12vh, 160px) 0; }

.intro-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.intro-copy h2 { margin: 24px 0 28px; }
.intro-copy p + p { margin-top: 18px; }
.intro-figure { position: relative; }
.intro-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.intro-figure .tag {
  position: absolute; bottom: -1px; left: -1px;
  background: var(--albatre); padding: 20px 28px 14px 0;
}
.intro-figure .tag .num { font-family: var(--serif); font-size: 40px; color: var(--bronze); line-height: 1; }
.intro-figure .tag .lbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }

.stats { display: flex; gap: clamp(28px, 5vw, 64px); margin-top: 44px; flex-wrap: wrap; }
.stat .n { font-family: var(--serif); font-size: clamp(38px, 4vw, 52px); color: var(--espresso); line-height: 1; }
.stat .l { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); margin-top: 8px; }

/* ============================================================
   SECTION : bande pleine largeur (signature)
   ============================================================ */
.feature { position: relative; min-height: 80vh; display: flex; align-items: center; overflow: hidden; }
.feature-bg { position: absolute; inset: 0; z-index: 0; }
.feature-bg img { width: 100%; height: 100%; object-fit: cover; }
.feature-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(110deg, rgba(20,17,14,.85) 0%, rgba(20,17,14,.5) 45%, rgba(20,17,14,.05) 100%); }
.feature-card { position: relative; z-index: 1; max-width: 540px; color: var(--creme); }
.feature-card .eyebrow { color: var(--bronze-clair); }
.feature-card .eyebrow::before { background: var(--bronze-clair); }
.feature-card h2 { color: var(--creme); margin: 22px 0 24px; }
.feature-card p { color: rgba(251,248,242,.82); }

/* ============================================================
   SECTION : les espaces (galerie)
   ============================================================ */
.section-head { max-width: 720px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head h2 { margin: 22px 0 0; }
.section-head p { margin-top: 22px; }

.spaces { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 64px; }
.space {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--espresso);
}
.space img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.space:hover img { transform: scale(1.06); }
.space::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(20,17,14,.7), transparent 55%); opacity: .9; transition: opacity .5s; }
.space-cap { position: absolute; left: 26px; bottom: 22px; z-index: 2; color: var(--creme); }
.space-cap .t { font-family: var(--serif); font-size: 27px; line-height: 1.1; }
.space-cap .s { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-clair); margin-top: 4px; }
.space .plus {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  width: 40px; height: 40px; border: 1px solid var(--ligne-claire); border-radius: 50%;
  display: grid; place-items: center; color: var(--creme);
  opacity: 0; transform: translateY(-6px); transition: all .5s;
}
.space:hover .plus { opacity: 1; transform: translateY(0); }

/* tailles d'agencement */
.sp-tall  { grid-column: span 4; aspect-ratio: 3/4; }
.sp-wide  { grid-column: span 8; aspect-ratio: 16/10; }
.sp-half  { grid-column: span 6; aspect-ratio: 4/3; }
.sp-third { grid-column: span 4; aspect-ratio: 4/5; }

/* ============================================================
   SECTION : équipements
   ============================================================ */
.amen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 60px; background: var(--ligne); border: 1px solid var(--ligne); }
.amen {
  background: var(--albatre); padding: 38px 32px;
  transition: background .4s;
}
.amen:hover { background: var(--creme); }
.amen .mark { width: 9px; height: 9px; background: var(--bronze); transform: rotate(45deg); margin-bottom: 22px; }
.amen h3 { font-size: 21px; }
.amen p { font-size: 14.5px; color: var(--taupe); margin-top: 7px; line-height: 1.6; }

/* ============================================================
   SECTION : réservation
   ============================================================ */
.resa { background: var(--espresso); color: var(--creme); }
.resa .eyebrow { color: var(--bronze-clair); }
.resa .eyebrow::before { background: var(--bronze-clair); }
.resa h2 { color: var(--creme); }
.resa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); margin-top: 60px; align-items: start; }
.resa-intro p { color: rgba(251,248,242,.72); }
.resa-perks { margin-top: 36px; display: flex; flex-direction: column; gap: 2px; }
.resa-perk { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid var(--ligne-claire); }
.resa-perk:last-child { border-bottom: 1px solid var(--ligne-claire); }
.resa-perk .k { font-family: var(--serif); font-size: 20px; color: var(--bronze-clair); min-width: 130px; }
.resa-perk .v { color: rgba(251,248,242,.82); font-size: 15px; }

/* Carte calendrier */
.cal-card { background: var(--creme); color: var(--espresso); padding: clamp(24px, 3vw, 38px); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.cal-title { font-family: var(--serif); font-size: 26px; text-transform: capitalize; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav button {
  width: 38px; height: 38px; border: 1px solid var(--ligne); background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--espresso); transition: all .3s;
}
.cal-nav button:hover:not(:disabled) { background: var(--espresso); color: var(--creme); }
.cal-nav button:disabled { opacity: .25; cursor: not-allowed; }
.cal-dow { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 8px; }
.cal-dow span { text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); padding: 6px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cal-cell {
  aspect-ratio: 1; border: none; background: none; cursor: pointer; position: relative;
  font-family: var(--sans); font-size: 15px; color: var(--espresso); font-weight: 300;
  display: grid; place-items: center; transition: background .2s, color .2s;
}
.cal-cell:hover:not(:disabled):not(.empty):not(.available) { background: var(--albatre-2); }
.cal-cell.empty { cursor: default; }
.cal-cell.past { color: var(--taupe-clair); cursor: not-allowed; opacity: .4; }
.cal-cell.booked { background: rgba(210,55,50,.12); color: rgba(170,35,30,.7); cursor: not-allowed; text-decoration: line-through; }
.cal-cell.booked:hover { background: rgba(210,55,50,.12); }
.cal-cell.booked.checkout { cursor: pointer; text-decoration: none; opacity: 1; border: 1px dashed rgba(210,55,50,.5); }
.cal-cell.booked.checkout:hover { background: rgba(210,55,50,.22); }
.cal-cell.available { background: rgba(45,145,75,.11); color: #2a7040; }
.cal-cell.available:hover { background: rgba(45,145,75,.24); }
.cal-cell.in-range { background: var(--albatre-2); border-radius: 0; }
.cal-cell.endpoint { background: var(--espresso); color: var(--creme); font-weight: 400; }
.cal-cell.endpoint.start { border-radius: 0; }
.cal-legend { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.cal-legend span { font-size: 12px; color: var(--taupe); display: flex; align-items: center; gap: 7px; }
.cal-legend i { width: 13px; height: 13px; display: inline-block; border-radius: 2px; }
.cal-legend i.sel { background: var(--espresso); }
.cal-legend i.avail-i { background: rgba(45,145,75,.25); border: 1px solid rgba(45,145,75,.5); }
.cal-legend i.booked-i { background: rgba(210,55,50,.2); border: 1px solid rgba(210,55,50,.4); }

/* récap prix */
.cal-summary { margin-top: 24px; border-top: 1px solid var(--ligne); padding-top: 20px; }
.cal-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 15px; }
.cal-row .lbl { color: var(--taupe); }
.cal-row.remise .lbl { color: #2a7040; }
.cal-row.remise span:last-child { color: #2a7040; font-weight: 400; }
.cal-row.total { border-top: 1px solid var(--ligne); margin-top: 10px; padding-top: 16px; }
.cal-row.total .lbl { color: var(--espresso); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.cal-row.total .amt { font-family: var(--serif); font-size: 30px; color: var(--espresso); }
.cal-dates { display: flex; gap: 14px; margin-top: 4px; }
.cal-date { flex: 1; border: 1px solid var(--ligne); padding: 12px 14px; }
.cal-date .lbl { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.cal-date .val { font-family: var(--serif); font-size: 19px; margin-top: 2px; }
.cal-date .val.empty { color: var(--taupe-clair); }
.cal-card .btn { width: 100%; justify-content: center; margin-top: 22px; }
.cal-card .btn:disabled { opacity: .4; cursor: not-allowed; }
.cal-hint { font-size: 12.5px; color: var(--taupe); text-align: center; margin-top: 14px; }

/* Chargement */
.cal-loading { text-align: center; padding: 32px 0; color: var(--taupe); font-size: 14px; letter-spacing: .06em; }

/* Options */
.cal-options { margin-top: 22px; border-top: 1px solid var(--ligne); padding-top: 18px; }
.cal-options-title { font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); margin-bottom: 14px; }
.cal-option {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 14px; border: 1px solid var(--ligne);
  cursor: pointer; margin-bottom: 8px;
  transition: border-color .3s, background .3s;
}
.cal-option:hover { border-color: var(--bronze); }
.cal-option.checked { border-color: var(--espresso); background: var(--albatre-2); }
.cal-option input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-width: 18px; border: 1.5px solid var(--taupe-clair); cursor: pointer; position: relative; transition: border-color .2s, background .2s; margin-top: 1px; }
.cal-option input[type="checkbox"]:checked { background: var(--espresso); border-color: var(--espresso); }
.cal-option input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid var(--creme); border-top: none; border-left: none; transform: rotate(45deg); }
.cal-option-info { flex: 1; }
.cal-option-name { font-size: 14.5px; color: var(--espresso); margin-bottom: 3px; }
.cal-option-desc { font-size: 12px; color: var(--taupe); line-height: 1.5; }
.cal-option-price { font-family: var(--serif); font-size: 20px; color: var(--bronze); white-space: nowrap; }

/* Bouton WhatsApp */
.btn-whatsapp { background: #25D366; color: #fff; border-color: transparent; }
.btn-whatsapp:hover { background: #1ebe5d; color: #fff; }
.btn-whatsapp:disabled { background: var(--albatre-2); color: var(--taupe); cursor: not-allowed; }

/* ─── Calendrier formulaire contact ───────────────────── */
.ccal { width: 100%; }
.ccal-range { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ccal-slot { flex: 1; border: 1px solid var(--ligne); padding: 11px 14px; transition: border-color .2s; cursor: default; }
.ccal-slot.picking { border-color: var(--bronze); }
.ccal-label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.ccal-val { font-family: var(--serif); font-size: 17px; margin-top: 3px; color: var(--espresso); }
.ccal-val.empty { font-family: var(--sans); font-size: 13px; color: var(--taupe-clair); }
.ccal-arrow { color: var(--taupe-clair); flex-shrink: 0; }
.ccal-widget { border: 1px solid var(--ligne); padding: 18px 18px 14px; }
.ccal-hint { margin-left: auto; color: var(--bronze); font-size: 11.5px; }

/* ============================================================
   SECTION : contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 96px); margin-top: 60px; align-items: start; }
.contact-aside h2 { margin: 22px 0 24px; }
.contact-aside p { color: var(--taupe); }
.contact-block { margin-top: 34px; }
.contact-block .k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); }
.contact-block .v { font-family: var(--serif); font-size: 23px; margin-top: 5px; }
.contact-block .v a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ligne); transition: border-color .3s; }
.contact-block .v a:hover { border-color: var(--bronze); }
.socials { display: flex; gap: 12px; margin-top: 30px; }
.socials a { width: 44px; height: 44px; border: 1px solid var(--ligne); display: grid; place-items: center; color: var(--espresso); transition: all .3s; }
.socials a:hover { background: var(--espresso); color: var(--creme); }
.socials svg { width: 18px; height: 18px; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); margin-bottom: 9px; }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 16px; font-weight: 300; color: var(--espresso);
  background: var(--creme); border: 1px solid var(--ligne); padding: 14px 16px;
  border-radius: 0; transition: border-color .3s; width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--bronze); }
.field input::placeholder, .field textarea::placeholder { color: var(--taupe-clair); }
.form .btn { grid-column: 1 / -1; justify-content: center; }
.form-note { grid-column: 1/-1; font-size: 13px; color: var(--taupe); text-align: center; }
.form-success {
  grid-column: 1/-1; background: var(--creme); border: 1px solid var(--bronze);
  padding: 26px; text-align: center;
}
.form-success .t { font-family: var(--serif); font-size: 26px; color: var(--bronze); }
.form-success .s { color: var(--taupe); margin-top: 6px; font-size: 15px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ardoise); color: var(--albatre); padding: clamp(64px,9vh,110px) 0 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 56px; border-bottom: 1px solid var(--ligne-claire); }
.footer-brand .b { font-family: var(--serif); font-size: 34px; }
.footer-brand .b b { font-weight: 600; }
.footer-brand p { color: var(--taupe-clair); max-width: 320px; margin-top: 16px; font-size: 15px; }
.footer-cols { display: flex; gap: clamp(40px, 7vw, 96px); flex-wrap: wrap; }
.footer-col h4 { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-clair); font-weight: 400; margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; color: var(--taupe-clair); text-decoration: none; font-size: 15px; margin-bottom: 11px; transition: color .3s; }
.footer-col a:hover { color: var(--creme); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; font-size: 13px; color: var(--taupe); }
.footer-bottom a { color: var(--taupe); text-decoration: none; }
.footer-bottom a:hover { color: var(--creme); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   SÉPARATEURS VAGUES (SVG) — se recolorent via les variables
   ============================================================ */
.wave {
  position: absolute; left: 0; width: 100%;
  height: clamp(38px, 5vw, 68px);
  z-index: 6; pointer-events: none; line-height: 0;
}
.wave svg { width: 100%; height: 100%; display: block; }
.wave path { fill: currentColor; }
/* poke vers le haut, dans la section précédente */
.wave-top { top: 0; transform: translateY(-99%); }
/* couleurs de remplissage (= couleur de la section qui porte la vague) */
.wf-albatre  { color: var(--albatre); }
.wf-albatre2 { color: var(--albatre-2); }
.wf-espresso { color: var(--espresso); }
.wf-ardoise  { color: var(--ardoise); }

.footer { position: relative; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .intro-figure { max-width: 480px; }
  .resa-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .amen-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .spaces { gap: 12px; }
  .sp-tall, .sp-wide, .sp-half, .sp-third { grid-column: span 12; aspect-ratio: 4/3; }
  .footer-top { flex-direction: column; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .amen-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .cal-dates { flex-direction: column; }
  .hero-actions .btn { flex: 1; justify-content: center; }
}

/* nav mobile panel */
.mnav { position: fixed; inset: 0; z-index: 200; background: var(--espresso); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; transform: translateY(-100%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.mnav.open { transform: none; }
.mnav a { color: var(--creme); font-family: var(--serif); font-size: 32px; text-decoration: none; }
.mnav .close { position: absolute; top: 24px; right: 24px; background: none; border: none; color: var(--creme); font-size: 30px; cursor: pointer; }