/* =========================================================
   Maison Mont Valérien — VERSION MOBILE
   ---------------------------------------------------------
   Chargée uniquement sous 820 px (media dans la balise <link>).
   Elle masque la version ordinateur, réordonne la page et
   redessine chaque écran. La version ordinateur n'est pas
   modifiée : aucune règle d'ici ne s'applique au-dessus de 820 px.
   ========================================================= */

/* ---------- on masque tout ce qui appartient à la version ordinateur ---------- */
body > .nav,
body > .hero,
body > .section-pad:not(#booking):not(#contact),
body > .scrolly,
body > .footer,
body > .album-view,
body > .lightbox { display: none !important; }

/* ---------- ordre de la page mobile ---------- */
body {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow-x: hidden;
}
body > #m1        { order: 1 }
body > #m2        { order: 2 }
body > #mRooms    { order: 3 }
body > .msec-tight{ order: 4 }
body > #m3        { order: 5 }
body > #m3 + .msec{ order: 6 }
body > #m4        { order: 7 }
body > #m5        { order: 8 }
body > #m5avis    { order: 9 }
body > #m6head    { order: 10 }
body > #booking   { order: 11 }
body > #contact   { order: 12 }
body > #m6foot    { order: 13 }
body > #mfooter   { order: 14 }
body > .mnav, body > .msheet, body > .mgal, body > .flag-defs { order: 0 }

/* ---------- éléments communs ---------- */
.msec { padding: 34px 22px 0 }
.msec-tight { padding-top: 18px }
.msec-flush { padding: 34px 16px 0 }
.msec-center { text-align: center; padding-top: 44px }
.msec-top { padding-top: 22px }
.m-anchor { position: relative; top: -70px }

.m-eyebrow {
  display: flex; align-items: center; gap: .62em;
  font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-deep); margin-bottom: 12px;
}
.m-eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--brass); flex: none }
.m-eyebrow.light { color: var(--brass-2) }
.m-eyebrow.center { justify-content: center }

.m-title {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.015em;
  font-size: 2.05rem; line-height: 1.13; color: var(--ink); margin: 0 0 18px;
}
.m-sub { color: var(--muted); font-size: 1rem; margin: -8px 0 20px }
.msec-center .m-sub { margin-bottom: 0 }
.m-lead { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 14px 0 0 }
.m-photo { width: 100%; border-radius: 14px; aspect-ratio: 16/11; object-fit: cover }

/* =========================================================
   1 · ACCUEIL
   ========================================================= */
.mnav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease);
}
.mnav.solid { background: rgba(247,244,239,.94); backdrop-filter: blur(14px); box-shadow: var(--shadow-sm) }
.mnav-brand { display: flex; align-items: center; gap: 11px; min-width: 0 }
.mnav-mark {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.02rem; color: #fff;
  background: linear-gradient(145deg, var(--brass-2), var(--brass-deep));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.mnav-name {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 14px rgba(0,0,0,.4);
}
.mnav.solid .mnav-name { color: var(--ink); text-shadow: none }
.mnav-right { display: flex; align-items: center; gap: 10px; flex: none }
.mnav-cta {
  padding: .72em 1.25em; border-radius: 100px; background: var(--brass); color: #fff;
  font-size: .92rem; font-weight: 600; white-space: nowrap;
}
.mnav-burger { display: grid; gap: 5px; width: 34px; padding: 4px 0; background: none; border: 0 }
.mnav-burger span { display: block; height: 2.4px; border-radius: 2px; background: #fff; transition: background .35s }
.mnav.solid .mnav-burger span { background: var(--ink) }

/* Menu — ouverture discrète : le fond se pose, les liens montent un par un. */
.msheet {
  position: fixed; inset: 0; z-index: 95;
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
  padding: 90px 26px 40px; background: rgba(21,24,28,.97);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
/* état ouvert : une seule classe, posée sur <html> */
.m-menu .msheet { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s, 0s }

.msheet-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.1);
  opacity: 0; transform: scale(.85) rotate(-45deg);
  transition: opacity .32s var(--ease) .06s, transform .32s var(--ease) .06s, background .25s;
}
.m-menu .msheet-close { opacity: 1; transform: none }
.msheet-close:active { background: rgba(255,255,255,.2) }
.msheet-close svg { width: 20px; height: 20px }

.msheet nav { display: flex; flex-direction: column; gap: 4px }
.msheet nav a {
  font-family: var(--serif); font-size: 1.6rem; color: #fff; padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  opacity: 0; transform: translateY(9px);
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.m-menu .msheet nav a { opacity: 1; transform: none }
.m-menu .msheet nav a:nth-child(1) { transition-delay: .05s }
.m-menu .msheet nav a:nth-child(2) { transition-delay: .09s }
.m-menu .msheet nav a:nth-child(3) { transition-delay: .13s }
.m-menu .msheet nav a:nth-child(4) { transition-delay: .17s }
.m-menu .msheet nav a:nth-child(5) { transition-delay: .21s }
.m-menu .msheet nav a:nth-child(6) { transition-delay: .25s }
.m-menu .msheet nav a:nth-child(7) { transition-delay: .29s }
.m-menu .msheet nav a:nth-child(8) { transition-delay: .33s }

.msheet-cta {
  display: block; text-align: center; padding: 1em; border-radius: 100px;
  background: var(--brass); color: #fff; font-weight: 600;
  opacity: 0; transform: translateY(9px);
  transition: opacity .34s var(--ease) .37s, transform .34s var(--ease) .37s;
}
.m-menu .msheet-cta { opacity: 1; transform: none }

/* les trois barres se muent en croix pendant l'ouverture */
.mnav-burger span { transform-origin: center }
.m-menu .mnav-burger span:nth-child(1) { transform: translateY(7.4px) rotate(45deg) }
.m-menu .mnav-burger span:nth-child(2) { opacity: 0 }
.m-menu .mnav-burger span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg) }
.mnav-burger span { transition: transform .3s var(--ease), opacity .2s var(--ease), background .35s }

/* la page reste exactement où elle était pendant que le menu est ouvert */
.m-menu body { position: fixed; left: 0; right: 0; width: 100% }

@media (prefers-reduced-motion: reduce) {
  .msheet, .msheet-close, .msheet nav a, .msheet-cta, .mnav-burger span { transition: none }
}

.m1 { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden }
.m1-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.m1-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,15,.5) 0%, rgba(10,12,15,.05) 30%,
              rgba(10,12,15,.42) 62%, rgba(10,12,15,.88) 100%);
}
.m1-inner { position: relative; width: 100%; padding: 0 20px 24px }
.m1-badge {
  display: inline-flex; align-items: center; gap: .55em; margin-bottom: 16px;
  padding: .58em 1.1em; border-radius: 100px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff; font-size: .95rem; font-weight: 600;
}
.m1-badge .st { color: var(--brass-2); letter-spacing: .04em }
.m1 h1 {
  font-family: var(--serif); font-weight: 600; color: #fff;
  font-size: clamp(2.9rem, 12.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em;
  margin: 0 0 12px; text-shadow: 0 2px 26px rgba(0,0,0,.38);
}
.m1 p { color: rgba(255,255,255,.92); font-size: 1.06rem; font-weight: 300; margin: 0 0 22px }
.m1-cta {
  display: block; text-align: center; padding: 1.15em 1em; border-radius: 100px;
  background: var(--brass); color: #fff; font-weight: 700; font-size: 1.06rem;
  box-shadow: 0 14px 34px -14px rgba(182,146,79,.8);
}
.m1-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px;
  background: #fff; border-radius: 18px; padding: 18px 6px;
  box-shadow: 0 18px 44px -22px rgba(10,12,15,.6);
}
.m1-stats > div { display: grid; justify-items: center; gap: 9px; padding: 0 4px; position: relative }
.m1-stats > div + div::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line);
}
.m1-stats .ic { width: 26px; height: 26px; color: var(--brass-deep) }
.m1-stats .ic svg { width: 100%; height: 100% }
.m1-stats b { font-size: .84rem; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25 }

/* =========================================================
   2 · CHAMBRES (carrousel)
   ========================================================= */
.mrooms-wrap { overflow: hidden }
.mrooms {
  display: flex; gap: 14px; padding: 4px 22px 10px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mrooms::-webkit-scrollbar { display: none }
.mroom {
  flex: 0 0 84%; scroll-snap-align: start;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 34px -22px rgba(10,12,15,.4);
}
.mroom img { width: 100%; aspect-ratio: 16/11; object-fit: cover }
.mroom-body { padding: 16px 18px 20px }
.mroom-tag {
  display: block; color: var(--brass-deep); font-size: .82rem; font-weight: 600;
  padding-bottom: 8px; margin-bottom: 10px; position: relative;
}
.mroom-tag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--brass) }
.mroom h3 { font-family: var(--serif); font-size: 1.42rem; font-weight: 600; color: var(--ink); margin: 0 0 14px }
.mchips { display: flex; flex-wrap: wrap; gap: 8px }
.mchip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em .9em; border: 1px solid var(--line); border-radius: 100px;
  font-size: .84rem; color: var(--text); white-space: nowrap;
}
.mchip svg { width: 16px; height: 16px; color: var(--brass-deep); flex: none }

.mrooms-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 2px }
.mrooms-count { font-size: .95rem; color: var(--muted-2) }
.mrooms-count b { color: var(--brass-deep); font-weight: 700 }
.mdots { display: flex; gap: 8px; justify-content: center }
.mdots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(21,24,28,.16); transition: background .3s, width .3s }
.mdots i.on { background: var(--brass); width: 20px; border-radius: 100px }

.mfamily {
  display: flex; align-items: center; gap: 16px; margin-top: 26px;
  padding: 18px 20px; border-radius: 16px; background: #ece3d6;
}
.mfamily .ic { flex: 0 0 54px; width: 54px; height: 54px; color: var(--brass-deep) }
.mfamily .ic svg { width: 100%; height: 100% }
.mfamily-txt { border-left: 1px solid rgba(143,112,56,.28); padding-left: 16px }
.mfamily-txt b { display: block; color: var(--brass-deep); font-size: .98rem; margin-bottom: 3px }
.mfamily-txt span { color: var(--text); font-size: .93rem; line-height: 1.5 }

/* =========================================================
   3 · JARDIN
   ========================================================= */
.mgarden { position: relative; border-radius: 24px; overflow: hidden; min-height: 62svh; display: flex; align-items: flex-end }
.mgarden img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.mgarden-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,15,0) 34%, rgba(10,12,15,.62) 66%, rgba(10,12,15,.94) 100%);
}
.mgarden-txt { position: relative; padding: 0 22px 30px; width: 100% }
.mgarden-txt h2 {
  font-family: var(--serif); font-size: 2.3rem; line-height: 1.1; font-weight: 600;
  color: #fff; margin: 0 0 10px; letter-spacing: -.015em;
}
.mgarden-txt p { color: rgba(255,255,255,.88); font-size: 1rem; font-weight: 300; margin: 0 }

.mduo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.mduo-card {
  display: flex; flex-direction: column; background: #fbf9f6; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(21,24,28,.06);
}
.mduo-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover }
.mduo-body { display: flex; flex-direction: column; flex: 1; padding: 14px 14px 16px }
.mduo-tag {
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-deep); margin-bottom: 8px;
}
.mduo-body h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 0 0 10px; line-height: 1.2 }
.mduo-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; font-size: .82rem; color: var(--muted); line-height: 1.35;
}
.mduo-foot i { font-style: normal; color: var(--brass); font-size: 1.35rem; line-height: 1; flex: none }

/* =========================================================
   4 · GALERIE + ESSENTIEL
   ========================================================= */
.mmosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start }
.mtile {
  position: relative; display: block; padding: 0; border: 0; border-radius: 14px;
  overflow: hidden; background: none; width: 100%;
}
.mtile img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1/1 }
.mtile-tall img { aspect-ratio: 4/5 }
.mtile::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(180deg, transparent, rgba(10,12,15,.62));
}
.mtile span {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  color: #fff; font-size: .95rem; font-weight: 500; text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.mghost {
  display: block; width: 100%; margin-top: 14px; padding: 1.05em;
  border: 1px solid rgba(21,24,28,.3); border-radius: 12px; background: none;
  font-size: .96rem; font-weight: 600; color: var(--ink);
}
.mfeatures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.mfeature {
  display: flex; align-items: center; gap: 12px; min-height: 74px;
  padding: 14px 14px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(21,24,28,.05); font-size: .94rem; color: var(--ink); line-height: 1.25;
}
.mfeature .ic { flex: 0 0 26px; width: 26px; height: 26px; color: var(--brass-deep) }
.mfeature .ic svg { width: 100%; height: 100% }

/* =========================================================
   5 · EMPLACEMENT + AVIS
   ========================================================= */
.mmap { position: relative; border-radius: 16px; overflow: hidden; height: 340px; background: var(--paper-2) }
.mmap iframe { width: 100%; height: 100%; border: 0; filter: saturate(.82) }
.mmap-card {
  position: absolute; left: 12px; right: 12px; bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 14px 34px -18px rgba(10,12,15,.55);
}
.mmap-pin {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(182,146,79,.14); color: var(--brass-deep);
}
.mmap-pin svg { width: 21px; height: 21px }
.mmap-name {
  flex: 1; min-width: 0; font-family: var(--serif); font-size: 1.02rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mmap-go {
  flex: none; padding: .78em 1.05em; border-radius: 100px;
  background: var(--ink); color: #fff; font-size: .9rem; font-weight: 600;
}
.mdist { margin-top: 18px }
.mdist-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid rgba(21,24,28,.09);
}
.mdist-row:last-child { border-bottom: 0 }
.mdist-row .pin {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(182,146,79,.13); color: var(--brass-deep);
}
.mdist-row .pin svg { width: 21px; height: 21px }
.mdist-row b { flex: 1; font-size: 1.02rem; font-weight: 600; color: var(--ink) }
.mdist-row .t { font-family: var(--serif); font-size: 1.06rem; color: var(--brass-deep) }

.mavis { margin-top: 34px; padding: 34px 16px 30px; background: var(--ink); border-radius: 26px 26px 0 0 }
.mavis-head { display: flex; align-items: center; gap: 16px; padding: 0 6px 22px }
.mavis-head .big { font-family: var(--serif); font-size: 3.5rem; line-height: .9; color: #fff }
.mavis-meta { display: flex; flex-direction: column; gap: 5px }
.mavis-meta .st { color: var(--brass-2); font-size: 1.2rem; letter-spacing: .16em }
.mavis-meta span:last-child { color: rgba(255,255,255,.72); font-size: .92rem }

.mavis-stage { position: relative }
.mavis-track {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 40px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mavis-track::-webkit-scrollbar { display: none }
.mavis-card {
  flex: 0 0 100%; scroll-snap-align: center;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 20px 20px 18px;
}
.mavis-card .q { display: block; height: .5em; margin-bottom: .8rem; color: var(--brass-2); font-family: var(--serif); font-size: 2.2rem; line-height: .6 }
.mavis-card p { color: rgba(255,255,255,.88); font-size: 1rem; font-weight: 300; line-height: 1.6; margin: 0 0 16px }
.mavis-card footer { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12) }
.mavis-card .av {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 600; background: linear-gradient(145deg, var(--brass-2), var(--brass-deep));
}
.mavis-card .who { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.mavis-card .who b { display: flex; align-items: center; gap: .5em; color: #fff; font-size: .96rem; font-weight: 600 }
.mavis-card .who .st { color: var(--brass-2); font-size: .8rem; letter-spacing: .12em }
.mavis-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.1); color: #fff; font-size: 1.3rem; line-height: 1;
}
.mavis-arrow.prev { left: 0 }
.mavis-arrow.next { right: 0 }
.mavis .mdots { margin: 18px 0 22px }
.mavis .mdots i { background: rgba(255,255,255,.24) }
.mavis .mdots i.on { background: var(--brass-2) }
.mavis-cta {
  display: block; text-align: center; margin: 0 8px; padding: 1.05em;
  border-radius: 100px; background: #fff; color: var(--ink); font-weight: 600;
}

/* =========================================================
   6 · DISPONIBILITÉS — on réhabille le vrai calendrier
   ========================================================= */
#booking { padding: 6px 22px 0 !important; background: var(--paper) !important }
#booking .wrap { padding: 0 !important; max-width: none !important }
#booking .section-head { display: none }

/* display:contents → les enfants du panneau deviennent ordonnables */
/* align-items vient de la version ordinateur (« start ») : en colonne, il
   fait rétrécir le calendrier sur sa largeur de contenu, collé à gauche.
   On rétablit l'étirement pour qu'il occupe toute la largeur, donc qu'il
   soit centré entre les deux marges de la section. */
#booking .bk-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0; box-shadow: none; background: none; border: 0; padding: 0 }
#booking .bk-panel { display: contents }
#booking .bk-panel-head { display: none }

/* La section ne montre que le calendrier : le nombre de voyageurs et le
   montant passent dans la fiche qui s'ouvre une fois les dates choisies
   (#mBk). Le <select> reste dans la page, masqué : c'est lui que booking.js
   lit pour calculer le tarif. */
#booking .bk-panel > .field { display: none }

#booking .bk-cal { order: 3; background: #fff; border: 0; border-radius: 20px; padding: 18px 16px 20px; margin: 0; box-shadow: 0 18px 44px -30px rgba(10,12,15,.5) }
#booking .bk-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 0; border: 0; margin-bottom: 4px }
#booking .bk-nav { display: contents }
#booking #bkPrev, #booking #bkNext {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink);
}
#booking #bkPrev { grid-column: 1 } #booking #bkNext { grid-column: 3 }
#booking #bkPrev svg, #booking #bkNext svg { width: 18px; height: 18px }
#booking .bk-range, #booking .bk-reset { display: none }
#booking .bk-mtitle { font-family: var(--serif); font-size: 1.3rem; text-transform: none; letter-spacing: 0; color: var(--ink); text-align: center; margin-bottom: 10px }
#booking .bk-months { grid-template-columns: 1fr; gap: 0 }
#booking .bk-dows span { font-size: .8rem; color: var(--muted-2); font-weight: 500 }
/* même écart de colonne que les jours, sinon les initiales des jours de la
   semaine ne tombent pas exactement au-dessus des chiffres */
#booking .bk-dows { gap: 2px }
#booking .bk-days { gap: 6px 2px }
#booking .bk-day { aspect-ratio: 1/1.06; border-radius: 12px }
#booking .bk-num { font-size: 1.02rem; font-weight: 700 }
#booking .bk-price { display: block !important; font-size: .74rem; color: #2f7a58; font-weight: 500 }
#booking .bk-day.taken { border-radius: 12px }
#booking .bk-day.taken .bk-num { color: var(--muted-2) }
/* même bande que sur ordinateur : les nuits du milieu portent la couleur
   des deux extrémités, pour qu'on voie le séjour d'un seul coup d'œil */
#booking .bk-day.sel, #booking .bk-day.in-range { background: var(--brass); border-color: var(--brass); border-radius: 12px }
#booking .bk-day.sel .bk-num, #booking .bk-day.sel .bk-price,
#booking .bk-day.in-range .bk-num, #booking .bk-day.in-range .bk-price { color: #fff }
#booking .bk-legend { justify-content: flex-start; gap: 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
#booking .bk-legend span:nth-child(3) { display: none }
#booking .bk-legend span { font-size: .9rem; color: var(--muted) }
#booking .bk-sync { display: none }

/* bouton de rappel sous le calendrier, quand la fiche a été fermée
   alors que des dates sont toujours choisies */
.mbk-open {
  order: 5; width: 100%; margin-top: 16px; padding: 1.1em;
  border: 0; border-radius: 100px; background: var(--ink);
  color: #fff; font-family: inherit; font-size: 1.02rem; font-weight: 600;
}
.mbk-open[hidden] { display: none }

/* =========================================================
   FICHE TARIF (mobile) — voyageurs, puis montant
   ========================================================= */
.mbk { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end }
.mbk[hidden] { display: none }
.mbk-veil { position: absolute; inset: 0; background: rgba(10,12,15,.5); backdrop-filter: blur(2px) }
.mbk-sheet {
  position: relative; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0; background: var(--ink); color: #fff;
  animation: mbkUp .34s var(--ease) both;
}
@keyframes mbkUp { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .mbk-sheet { animation: none } }
.mbk-x {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.12); color: #fff; font-size: .95rem;
}
.mbk-dates {
  display: block; padding-right: 44px;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-2);
}
.mbk-title {
  font-family: var(--serif); font-weight: 600; font-size: 1.7rem; line-height: 1.15;
  color: #fff; margin: 8px 0 20px; padding-right: 44px;
}
.mbk-step[hidden] { display: none }

/* --- 1 · les voyageurs --- */
.mbk-guests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.mbk-g {
  padding: .95em 0; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
  color: #fff; font-family: inherit; font-size: 1.15rem; font-weight: 600;
}
.mbk-g.on { background: var(--brass); border-color: var(--brass); color: #fff }

/* --- 2 · le montant, rendu par booking.js --- */
.mbk-back {
  display: block; margin: -4px 0 16px; padding: 0;
  border: 0; background: none; color: rgba(255,255,255,.62);
  font-family: inherit; font-size: .92rem;
}
.mbk .bk-summary { margin-top: 0; text-align: center }
.mbk .bk-lines { text-align: left; margin-bottom: 14px }
.mbk .bk-line { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; color: rgba(255,255,255,.82); font-size: .95rem }
.mbk .bk-line.disc span:last-child { color: var(--brass-2) }
.mbk .bk-total { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; margin-bottom: 20px;
  border-top: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 1.1rem }
.mbk .bk-warn { color: var(--brass-2); font-size: .9rem; margin-bottom: 12px }
.mbk .bk-cta { display: flex; width: 100%; justify-content: center; padding: 1.1em; font-size: 1.02rem }
.mbk .bk-cta.is-off { opacity: .45; pointer-events: none }
.mbk .bk-cta2 { width: 100%; margin-top: 10px; padding: 1.1em; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.3); background: none; color: #fff;
  font-family: inherit; font-size: 1.02rem; font-weight: 600 }
.mbk .bk-note { color: rgba(255,255,255,.55); font-size: .8rem; line-height: 1.5; margin-top: 14px }

/* =========================================================
   7 · CONTACT — le vrai formulaire, réhabillé pour le mobile
   ---------------------------------------------------------
   On réutilise le formulaire de la version ordinateur plutôt
   que d'en écrire un second : « Demander à Ziad » remplit donc
   les mêmes champs (dates, voyageurs, message) sur mobile.
   ========================================================= */
#contact { padding: 34px 22px 0 !important; background: var(--paper) !important }
#contact .wrap { padding: 0 !important; max-width: none !important }
#contact .contact-grid { display: flex; flex-direction: column; gap: 20px }

#contact .eyebrow {
  display: flex; align-items: center; gap: .62em;
  font-size: .74rem; letter-spacing: .2em; margin-bottom: 12px;
}
#contact .section-title { font-size: 2.05rem; line-height: 1.13; margin: 0 0 14px }
#contact .contact-info p { font-size: 1rem; line-height: 1.6; margin: 0; max-width: none }
#contact .contact-methods { display: none }   /* le formulaire suffit ici */

#contact .contact-card {
  padding: 22px 18px 24px; border-radius: 20px; margin: 0;
  box-shadow: 0 18px 44px -30px rgba(10,12,15,.5);
}
/* minmax(0,…) + min-width : sans cela, la largeur minimale que Safari iOS
   impose aux champs de date élargit la colonne, et « Départ » déborde de
   la carte. C'est le débordement visible sur la version précédente. */
#contact .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
#contact .field { margin-bottom: 14px; min-width: 0 }
#contact .field label { font-size: .86rem }
#contact .field input, #contact .field select, #contact .field textarea {
  min-width: 0; max-width: 100%;
  padding: .95em .9em; border-radius: 12px; background: #faf8f5; font-size: .98rem;
}
/* Safari iOS habille les champs de date à sa façon : taille imposée et
   texte centré. On lui reprend la main pour qu'ils soient alignés sur
   « Nom complet » et « E-mail ». */
#contact .field input[type="date"] {
  -webkit-appearance: none; appearance: none; text-align: left;
}
#contact .field textarea { min-height: 104px }
#contact .form-hint { font-size: .9rem; margin: 0 0 16px }
#contact .btn-primary { padding: 1.1em; font-size: 1.02rem }

.mask-link {
  display: block; text-align: center; color: var(--brass-deep);
  font-size: 1.02rem; text-decoration: underline; text-underline-offset: 4px;
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.mfooter {
  display: flex; align-items: center; gap: 16px; margin-top: 30px;
  padding: 26px 22px 34px; background: var(--ink);
}
.mf-mark {
  flex: 0 0 62px; width: 62px; height: 62px; border-radius: 15px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: #fff;
  background: linear-gradient(145deg, var(--brass-2), var(--brass-deep));
}
.mf-txt { display: flex; flex-direction: column; gap: 2px }
.mf-txt b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: #fff }
.mf-txt span, .mf-txt a { color: rgba(255,255,255,.6); font-size: .95rem }
.mf-txt a { color: rgba(255,255,255,.75) }

/* =========================================================
   GALERIE PLEIN ÉCRAN
   ========================================================= */
.mgal { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: flex; flex-direction: column }
.mgal[hidden] { display: none }
.mgal-bar {
  /* pas de « gap » : la colonne du retour disparaît avec lui, sinon le
     titre resterait décalé de la largeur de l'écart sur la liste des albums */
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper);
}
/* le titre occupe la 2e colonne ; le retour, quand il est là, prend la 1re */
#mGalTitle { grid-column: 2; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mgal-count { grid-row: 2; grid-column: 2; font-size: .84rem; color: var(--muted-2); margin-top: -6px }
.mgal-back {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  border: 0; background: none; padding: 0; margin-right: 12px;
  font-size: .96rem; font-weight: 600; color: var(--brass-deep); white-space: nowrap;
}
.mgal-back[hidden] { display: none }
.mgal-x {
  grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-left: 12px;
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(21,24,28,.06); font-size: 1rem; color: var(--ink);
}
.mgal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch }

/* --- niveau 1 : les albums, une pièce par vignette --- */
.mgal-albums { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 16px 14px 30px }
.mgal-albums[hidden] { display: none }
.mgal-album { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left }
.mga-cover { position: relative; display: block; border-radius: 14px; overflow: hidden }
.mga-cover img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block }
.mga-n {
  position: absolute; top: 8px; right: 8px;
  padding: 5px 9px; border-radius: 100px;
  background: rgba(10,12,15,.62); backdrop-filter: blur(6px);
  color: #fff; font-size: .72rem; font-weight: 600;
}
.mga-txt { display: block; margin-top: 9px; padding: 0 2px }
.mga-txt b { display: block; font-size: .98rem; font-weight: 600; color: var(--ink) }
.mga-txt span { display: block; margin-top: 2px; font-size: .84rem; color: var(--muted); line-height: 1.35 }

/* --- niveau 2 : les photos de l'album --- */
.mgal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 14px 30px }
.mgal-grid[hidden] { display: none }
.mgal-shot { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 12px; overflow: hidden }
.mgal-shot.wide { grid-column: 1 / -1 }
.mgal-shot img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block }
.mgal-shot.wide img { aspect-ratio: 4/3 }

/* --- niveau 3 : une photo en plein écran, on fait défiler l'album --- */
.mphoto { position: fixed; inset: 0; z-index: 110; background: #0b0d10; display: flex; align-items: center }
.mphoto[hidden] { display: none }
.mphoto-track {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.mphoto-track::-webkit-scrollbar { display: none }
.mphoto-slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; padding: 54px 0 }
.mphoto-slide img { max-width: 100%; max-height: 100%; object-fit: contain }
.mphoto-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px); color: #fff; font-size: 1rem;
}
.mphoto-count {
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center;
  color: rgba(255,255,255,.72); font-size: .88rem; letter-spacing: .04em;
}

/* pas d'animations d'apparition sur mobile : tout est visible d'emblée */
[data-reveal] { opacity: 1 !important; transform: none !important }