/* ═══════════════════════════════════════════════════════════════════════════
   MOTEUR DE RÉSERVATION SÉJOUR — habillage repris À L'IDENTIQUE du widget du
   site (astro/src/components/MoteurResaWidget.astro, bloc <style is:global>).
   Copié tel quel le 2026-08-23 pour que le parcours séjour d'un coffret ait le
   MÊME visuel que le moteur de www.ribiera.fr : rail d'étapes, calendrier deux
   mois, listes de durées et de chambres, prestations, barre de pied.
   ⚠️ Si le visuel du site change, c'est ce fichier qu'il faut recopier.
   Les jetons de couleur du site (tokens.css) sont repris en tête : la page
   coffret est servie par boutique-admin, elle n'a pas la feuille du site.
   ═══════════════════════════════════════════════════════════════════════════ */
.mr-ov, .mr-ov *, .mr-panel, .mr-panel * { box-sizing: border-box; }
.mr-ov {
  --r-cream: oklch(96.5% 0.012 80);
  --r-cream-2: oklch(94% 0.018 78);
  --r-bone: oklch(98% 0.008 85);
  --r-ivory: oklch(91% 0.022 80);
  --r-ink: oklch(22% 0.012 60);
  --r-ink-soft: oklch(34% 0.014 65);
  --r-ink-mute: oklch(50% 0.015 70);
  --r-terre: oklch(54% 0.105 40);
  --r-terre-deep: oklch(44% 0.110 38);
  --r-olive: oklch(48% 0.060 130);
  --r-or: oklch(68% 0.080 80);
  --r-line: oklch(82% 0.018 70);
  --r-line-soft: oklch(89% 0.015 75);
  --font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-family: var(--font-sans);
  color: var(--r-ink);
  line-height: 1.55;
}
.mr-ov button { font: inherit; cursor: pointer; color: inherit; }
.mr-ov h2, .mr-ov h3 { font-weight: 500; }
.mr-ov .serif { font-family: var(--font-display); }
.mr-ov img { max-width: 100%; }

.mr-host-ancv{max-width:1100px;margin:0 auto;padding:2rem clamp(1rem,4vw,2rem) 0}
.mr-host-ancv:empty{display:none}
/* ── Moteur de réservation — widget en surcouche, classes mr- ────────── */
.mr-eyebrow{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--r-ink-mute);font-weight:500;margin:0}
.mr-muted{color:var(--r-ink-mute);font-size:.86rem;margin:.35rem 0 0}

/* Page hôte (démonstration : tient lieu de site derrière le widget) */
.mr-host-hero{position:relative;overflow:hidden}
.mr-host-hero img{width:100%;height:clamp(340px,58vh,620px);object-fit:cover;object-position:center 62%}
.mr-host-cap{position:absolute;inset:auto 0 0 0;padding:clamp(1.6rem,4vw,3.4rem);background:linear-gradient(to top,rgba(20,16,12,.78),transparent);color:#FBF6EC}
.mr-host-cap h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.03;color:#fff;margin:.4rem 0 0;max-width:18ch}
.mr-host-cap p{margin:.7rem 0 0;font-size:1rem;color:rgba(255,248,238,.9);max-width:48ch}
.mr-cta{margin-top:1.6rem;background:var(--r-terre);color:#FFF7EE;border:0;padding:1rem 2rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;transition:background .2s ease}
.mr-cta:hover{background:var(--r-terre-deep)}
.mr-host-note{background:var(--r-bone);padding:2.4rem 0 3.4rem}
.mr-host-note p{max-width:70ch;margin:0 auto;padding:0 1.4rem;font-size:.9rem;color:var(--r-ink-soft);line-height:1.7}

/* Surcouche */
/* Au-dessus de tout ce que la page hôte peut poser (bandeau cookies, pastille
   d'offres…) : la croix de fermeture se retrouvait sous un badge du site. */
.mr-ov{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vh,3rem) clamp(1rem,4vw,3rem)}
.mr-ov[hidden]{display:none}
/* 🔶 L'en-tête du site est en `position:fixed` : au-dessus du panneau centré, il
   restait visible à travers le voile — un bandeau crème avec le bouton doré
   « Offrir » et le sélecteur de langue, juste au-dessus de la croix de fermeture
   (« un truc orange en haut à droite », Laurent le 2026-08-22). On le masque
   pendant l'ouverture ; `visibility` plutôt que `display` pour ne pas provoquer
   de saut de mise en page à la fermeture. */
html.mr-modal .site-header{visibility:hidden}
.mr-ov-bg{position:absolute;inset:0;background:rgba(20,16,12,.58);animation:mrFade .3s ease}
@keyframes mrFade{from{opacity:0}to{opacity:1}}
.mr-panel{position:relative;width:min(860px,100%);height:100%;max-height:min(900px,92vh);background:#fff;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(20,16,12,.5),0 0 0 1px rgba(20,16,12,.05);animation:mrSlide .42s cubic-bezier(.2,.75,.25,1)}
@media(max-width:720px){.mr-ov{padding:0}.mr-panel{max-height:none;border-radius:0}}
@keyframes mrSlide{from{transform:translateY(18px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.mr-ph{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.4rem .3rem;flex:none}
.mr-ph-nom{font-family:var(--font-display);font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--r-ink);line-height:1}
.mr-ph-nom small{display:block;font-family:var(--font-sans);font-size:.58rem;letter-spacing:.2em;color:var(--r-ink-mute);margin-top:.25rem}
.mr-close{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--r-ink-mute);padding:.2rem .4rem}
.mr-close:hover{color:var(--r-ink)}
.mr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.2rem 1.9rem 1.9rem}
@media(max-width:620px){.mr-body{padding:.2rem 1.1rem 1.4rem}}
.mr-rail-wrap{flex:none;background:#fff;border-bottom:1px solid var(--r-line-soft);padding:0 1.9rem}
@media(max-width:620px){.mr-rail-wrap{padding:0 1.1rem}}
.mr-rail{display:flex;align-items:center;padding:.5rem 0;overflow-x:auto;scrollbar-width:none}
.mr-rail::-webkit-scrollbar{display:none}
.mr-rstep{display:flex;align-items:center;gap:.45rem;font-size:.7rem;letter-spacing:.04em;color:var(--r-ink-mute);white-space:nowrap}
.mr-rstep .mr-n{width:20px;height:20px;border:1px solid var(--r-line);border-radius:50%;display:grid;place-items:center;font-size:.64rem;flex:none;font-variant-numeric:tabular-nums}
.mr-rstep.mr-done .mr-n{background:var(--r-olive);border-color:var(--r-olive);color:#fff}
.mr-rstep.mr-now{color:var(--r-ink)}
.mr-rstep.mr-now .mr-n{border-color:var(--r-terre);color:var(--r-terre)}
.mr-rline{flex:1;height:1px;background:var(--r-line);margin:0 .45rem;min-width:8px}
@media(max-width:620px){.mr-rstep .mr-l{display:none}}

.mr-step{display:none;padding:1rem 0 .6rem}
.mr-step.mr-on{display:block;animation:mrEnter .34s cubic-bezier(.2,.7,.3,1)}
@keyframes mrEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mr-title{margin-bottom:1rem}
.mr-title-c{margin-bottom:.9rem}
.mr-title-c h2{font-size:clamp(1.1rem,2.4vw,1.35rem);line-height:1.3;max-width:52ch}
.mr-title h2{font-size:clamp(1.5rem,3.6vw,2.05rem);line-height:1.1;margin:0;max-width:24ch}
.mr-title p{margin:.5rem 0 0;color:var(--r-ink-soft);font-size:.88rem}

/* Pied du panneau */
.mr-pf{flex:none;border-top:1px solid var(--r-line);background:#fff;padding:.8rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.mr-pf-info{display:flex;align-items:center;gap:1.2rem;min-width:0;flex-wrap:wrap}
.mr-pf-info>div{display:flex;flex-direction:column;min-width:0}
.mr-pf-info span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--r-ink-mute)}
.mr-pf-info b{font-size:.9rem;font-weight:500;white-space:nowrap}
.mr-pf-arrow{color:var(--r-ink-mute);align-self:flex-end;padding-bottom:.1rem}
.mr-pf-tot b{font-family:var(--font-sans);font-size:1.15rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
@media(max-width:620px){.mr-pf{padding:.7rem 1rem}.mr-pf-info{gap:.8rem}.mr-pf-info b{font-size:.82rem}}

/* Calendrier */
.mr-counters{margin-top:1rem}
.mr-inclus{margin:.9rem 0 0;font-size:.76rem;color:var(--r-ink-mute);line-height:1.55;border-top:1px solid var(--r-line-soft);padding-top:.8rem}
/* Calendrier sans cadres : ce sont les chiffres et les prix qui font la grille,
   pas des filets. Une case indisponible s'efface au lieu de se remplir de beige —
   l'œil ne doit s'accrocher qu'aux dates qu'on peut vendre. */
.mr-dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--r-ink-mute);margin-bottom:.55rem}
.mr-dow span{text-align:center}
.mr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;background:transparent;border:0}
.mr-day{background:none;border:0;border-radius:12px;padding:.45rem .1rem;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;transition:background .16s ease,color .16s ease;position:relative}
.mr-day .mr-d{font-size:.98rem;font-variant-numeric:tabular-nums lining-nums;line-height:1.15}
.mr-day .mr-p{font-size:.66rem;color:var(--r-ink-mute);font-variant-numeric:tabular-nums;line-height:1.15}
.mr-day.mr-off{opacity:.22;cursor:default}
.mr-day.mr-empty{background:none}
.mr-day.mr-full,.mr-day.mr-ferme{cursor:default}
.mr-day.mr-full .mr-d,.mr-day.mr-ferme .mr-d{opacity:.3}
.mr-day.mr-full .mr-p,.mr-day.mr-ferme .mr-p{font-size:.58rem;letter-spacing:.02em;text-transform:lowercase;opacity:.5}
.mr-day.mr-deal .mr-p{color:var(--r-olive)}
.mr-day:hover:not(.mr-off):not(.mr-full):not(.mr-ferme):not(.mr-in):not(.mr-out){background:var(--r-cream)}
/* Sélection : la nuit d'arrivée et celle de départ tiennent la traîne entre elles */
.mr-day.mr-mid{background:var(--r-cream);border-radius:0}
.mr-day.mr-in,.mr-day.mr-out{background:var(--r-terre);color:#FFF7EE}
.mr-day.mr-in{border-radius:12px 0 0 12px}
.mr-day.mr-out{border-radius:0 12px 12px 0}
.mr-day.mr-in.mr-out{border-radius:12px}
.mr-day.mr-in .mr-p,.mr-day.mr-out .mr-p{color:rgba(255,247,238,.82)}
.mr-pax{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-top:1px solid var(--r-line-soft);padding:.65rem 0;font-size:.88rem}
.mr-pax b{font-weight:500;display:block}
.mr-pax small{display:block;font-size:.76rem;color:var(--r-ink-mute)}
.mr-ctrl{display:flex;align-items:center;gap:.75rem}
.mr-ctrl button{width:30px;height:30px;border:1px solid var(--r-line);background:none;display:grid;place-items:center;font-size:1rem;line-height:1}
.mr-ctrl button:hover:not([disabled]){border-color:var(--r-terre);color:var(--r-terre)}
.mr-ctrl button[disabled]{opacity:.3;cursor:default}
.mr-ctrl b{font-family:var(--font-sans);font-size:1.05rem;min-width:22px;text-align:center;font-weight:500;font-variant-numeric:tabular-nums lining-nums}



.mr-pax-t{margin:1rem 0 0;font-size:.9rem;font-weight:500}
.mr-pax-sub{padding:.75rem 0}
.mr-pax-sub span b{font-weight:400;color:var(--r-ink-soft)}
.mr-alt{margin-top:2.4rem;border-top:1px solid var(--r-line);padding-top:1.6rem}
.mr-alt h3{font-size:1.35rem;margin:0;line-height:1.2}
.mr-alt-sub{margin:.5rem 0 1.1rem;font-size:.86rem;color:var(--r-ink-soft);line-height:1.6;max-width:56ch}
.mr-alt-card{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:1.1rem;align-items:center;border:1px solid var(--r-line);background:var(--r-cream);padding:1rem}
@media(max-width:620px){.mr-alt-card{grid-template-columns:1fr;gap:.8rem}}
.mr-alt-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mr-alt-bd b{display:block;font-size:1.05rem;font-weight:500}
.mr-alt-det{display:block;font-size:.82rem;color:var(--r-ink-mute);margin-top:.25rem}
.mr-alt-cmp{display:inline-block;margin-top:.5rem;font-size:.78rem;color:var(--r-olive)}
.mr-alt-px{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}
@media(max-width:620px){.mr-alt-px{align-items:flex-start;text-align:left}}
.mr-alt-px .mr-pick{margin-top:.6rem}

/* Cormorant est en chiffres elzéviriens par défaut : sur les prix et les quantités
   le « 1 » se lit « I ». On force les chiffres alignés partout où l'on affiche un nombre. */
.mr-tot-px,.mr-pack-nuit,.mr-barre,.mr-tot b,.mr-px,.mr-rate-px,.mr-per,.mr-hors,.mr-pf-tot b,.mr-alt-px .mr-tot-px,.mr-line span:last-child,.mr-l b,.mr-pf-info b{font-variant-numeric:lining-nums tabular-nums}


/* Calendrier — deux mois côte à côte, flèches lisibles */
.mr-nav{width:30px;height:30px;border:1px solid var(--r-line);background:#fff;border-radius:50%;display:grid;place-items:center;flex:none;transition:border-color .2s ease,background .2s ease}
.mr-nav span{display:block;width:10px;height:10px;border-left:1.5px solid var(--r-ink);border-bottom:1.5px solid var(--r-ink);transform:rotate(45deg) translate(1px,-1px)}
.mr-nav-r span{transform:rotate(-135deg) translate(1px,-1px)}
.mr-nav:hover:not([disabled]){border-color:var(--r-ink);background:var(--r-ink)}
.mr-nav:hover:not([disabled]) span{border-color:#fff}
.mr-nav[disabled]{opacity:.25;cursor:default}
.mr-nav-vide{width:30px;height:30px;flex:none}
.mr-nav-mob{display:none}
@media(max-width:760px){.mr-nav-mob{display:grid}}
.mr-months{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:760px){.mr-months{grid-template-columns:1fr}.mr-months .mr-month:last-child{display:none}}
.mr-month-h{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-bottom:.5rem;min-height:32px}
.mr-month-t{margin:0;font-size:1rem;text-align:center;text-transform:capitalize;font-variant-numeric:lining-nums}

/* Durée du séjour */
.mr-duree.mr-on{border-color:var(--r-terre);box-shadow:0 0 0 1px var(--r-terre)}
.mr-duree-nuit{font-size:.72rem;color:var(--r-ink-mute);font-variant-numeric:lining-nums tabular-nums}


/* ── Grammaire de vente (direction A) : pastille de remise, ruban, prix barré,
      économie chiffrée, bouton sur chaque carte. Réutilisée par les durées,
      les formules et les chambres pour que tout le tunnel parle pareil. ── */
.mr-off{position:absolute;top:-1px;right:-1px;background:var(--r-terre);color:#FFF7EE;font-size:.78rem;font-weight:500;padding:.3rem .55rem;font-variant-numeric:lining-nums}
.mr-ruban{display:inline-block;align-self:flex-start;background:var(--r-ink);color:var(--r-bone);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:.26rem .5rem;margin-bottom:.45rem}
.mr-ruban-v{background:var(--r-olive)}
.mr-eco{align-self:flex-start;background:rgba(90,107,75,.12);color:var(--r-olive);font-size:.76rem;padding:.22rem .45rem;margin-top:.4rem;font-variant-numeric:lining-nums tabular-nums}
.mr-barre,.mr-duree-px s,.mr-room-px s{color:var(--r-ink-mute);text-decoration:line-through;font-variant-numeric:lining-nums tabular-nums}

/* Durées — cartes vendeuses */
/* Durées : une LISTE, pas neuf cartes. Les cartes noires « CHOISIR CES 1 NUIT »
   et les pavés « Vous économisez » faisaient site de promotions ; ici la ligne
   entière est cliquable, le prix barré reste discret, et les durées
   indisponibles tiennent en une phrase au lieu de quatre cases vides. */
.mr-durees{display:flex;flex-direction:column;border-top:1px solid var(--r-line-soft)}
.mr-duree{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;
  border:0;border-bottom:1px solid var(--r-line-soft);background:none;padding:1.05rem .9rem;text-align:left;
  transition:background .18s ease}
.mr-duree::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .18s ease}
.mr-duree:hover{background:var(--r-cream)}
.mr-duree.mr-on{background:var(--r-cream)}
.mr-duree.mr-on::before{background:var(--r-terre)}
.mr-duree-g{min-width:0}
.mr-duree-n{font-family:var(--font-display);font-size:1.25rem;font-weight:500;line-height:1.2;display:block}
.mr-duree-nuit{display:block;font-size:.8rem;color:var(--r-ink-mute);margin-top:.15rem;font-variant-numeric:lining-nums tabular-nums}
.mr-tag{display:inline-block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--r-terre);margin-left:.6rem;vertical-align:.15em}
.mr-tag-v{color:var(--r-olive)}
.mr-duree-px{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;white-space:nowrap}
.mr-duree-px s{font-size:.78rem;color:var(--r-ink-mute);text-decoration:line-through;font-variant-numeric:lining-nums tabular-nums}
.mr-duree-px b{font-family:var(--font-sans);font-size:1.35rem;font-weight:600;letter-spacing:-.01em;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.mr-duree.mr-on .mr-duree-px b{color:var(--r-terre)}
 /* La remise longue durée est un argument de vente, pas une note de bas de page :
    pastille olive, comme « Vous économisez » sur les formules. */
.mr-remise{display:inline-block;margin-left:.5rem;padding:.16rem .5rem;border-radius:999px;
  background:rgba(90,107,75,.14);color:var(--r-olive);font-size:.68rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;vertical-align:.05em}
.mr-duree.mr-on .mr-remise{background:var(--r-olive);color:#fff}
.mr-indispo{margin:.9rem 0 0;font-size:.8rem;color:var(--r-ink-mute)}
@media(max-width:480px){.mr-duree{padding:.9rem .6rem}.mr-duree-n{font-size:1.1rem}.mr-duree-px b{font-size:1.3rem}}

/* Formules — carte façon moteur actuel */
.mr-packs{display:flex;flex-direction:column;gap:0}
.mr-pack{display:grid;grid-template-columns:200px minmax(0,1fr) 150px;gap:1.2rem;padding:1.6rem 0;border-top:1px solid var(--r-line-soft);align-items:start}
.mr-pack:first-child{border-top:0;padding-top:.3rem}
.mr-pack.mr-on{background:var(--r-cream);box-shadow:0 0 0 1rem var(--r-cream)}
@media(max-width:640px){.mr-pack{grid-template-columns:1fr;gap:.9rem}}
.mr-pack-ph{position:relative;overflow:hidden}
.mr-pack-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mr-pack-tags{position:absolute;inset:.5rem auto auto .5rem;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.mr-pack-tags span{background:rgba(28,38,48,.82);color:#fff;font-size:.6rem;letter-spacing:.02em;padding:.2rem .45rem}
.mr-pack-bd h3{font-size:1.2rem;line-height:1.2;margin:0}
.mr-pack-pax{display:flex;align-items:center;gap:.45rem;margin:.5rem 0 0;font-size:.84rem;color:var(--r-ink-soft)}
.mr-pack-pax svg{color:var(--r-ink-mute)}
.mr-pack-res{margin:.6rem 0 0;font-size:.84rem;color:var(--r-ink-soft);line-height:1.6}
/* En bureau le « Inclus : … » s'affiche en entier : rien à déplier. */
.mr-pack-det{display:none;background:none;border:0;padding:.5rem 0 0;font-size:.82rem;color:var(--r-ink);text-decoration:underline;text-underline-offset:3px}
/* Les catégories écartées ferment l'étape : un filet les détache de ce qui est
   réellement réservable. Vides, elles ne laissent aucune trace. */
.mr-rooms-no:not(:empty){margin-top:1.4rem;border-top:1px solid var(--r-line);padding-top:.2rem}
.mr-pack-px{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
@media(max-width:640px){.mr-pack-px{align-items:flex-start;text-align:left}}
.mr-barre{color:var(--r-ink-mute);text-decoration:line-through;font-size:.85rem;font-variant-numeric:tabular-nums}
.mr-pack-nuit{font-family:var(--font-sans);font-size:1.5rem;font-weight:600;letter-spacing:-.015em;line-height:1.1;font-variant-numeric:tabular-nums}
.mr-pack-nuit small{font-family:var(--font-sans);font-size:.72rem;font-weight:400;color:var(--r-ink-mute)}
/* « À partir de » : coiffe le prix barré ET le prix vendu — les deux sont ceux
   de la catégorie la moins chère encore libre, le client choisit sa chambre après. */
.mr-apd{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--r-ink-mute);line-height:1.4}
/* Taxe de séjour : une mention obligatoire, à lire mais pas à mettre en avant. */
.mr-hors{font-size:.66rem;color:var(--r-ink-mute);line-height:1.3}
.mr-pack-px .mr-pick{margin-top:.6rem;width:100%;text-align:center}
@media(max-width:640px){.mr-pack-px .mr-pick{width:auto}}
.mr-desc{margin-top:.9rem;background:var(--r-bone);padding:.9rem 1rem}
.mr-desc p{margin:0;font-size:.86rem;color:var(--r-ink-soft);line-height:1.7}
.mr-desc ul{margin:.6rem 0 0;padding:0;list-style:none;font-size:.82rem;color:var(--r-ink-soft)}
.mr-desc li{padding:.2rem 0 .2rem 1rem;position:relative}
.mr-desc li::before{content:"";position:absolute;left:0;top:.8rem;width:6px;height:1px;background:var(--r-or)}


.mr-ruban-abs{position:absolute;top:.6rem;left:.6rem;margin:0;z-index:2}
.mr-pack{position:relative}
.mr-pack-phare{background:var(--r-cream);box-shadow:0 0 0 1px var(--r-terre)}
.mr-pack-px .mr-pick{background:var(--r-ink);border-color:var(--r-ink);color:var(--r-bone);letter-spacing:.14em;text-transform:uppercase;font-size:.66rem;padding:.7rem 1rem}
.mr-pack-px .mr-pick:hover{background:var(--r-terre);border-color:var(--r-terre)}
.mr-pack-phare .mr-pack-px .mr-pick{background:var(--r-terre);border-color:var(--r-terre)}
.mr-pack-nuit{color:var(--r-terre)}
.mr-room-px s{display:block;font-size:.85rem}

/* Chambres — carte verticale, photo pleine largeur du panneau */
/* Chambres : une LISTE compacte, toutes les catégories visibles d'un coup.
   La photo ne s'affiche qu'au dépliage — une image plein cadre par catégorie
   noyait les 8 catégories et obligeait à faire défiler pour comparer.
   Une catégorie complète tient en une ligne grise, elle ne disparaît pas :
   voir qu'il ne reste que du haut de gamme fait partie de l'information. */
.mr-rooms{display:flex;flex-direction:column;border-top:1px solid var(--r-line-soft)}
.mr-room{border-bottom:1px solid var(--r-line-soft)}
.mr-room-l{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;
  background:none;border:0;padding:.95rem .9rem;text-align:left;position:relative;transition:background .18s ease}
.mr-room-l::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .18s ease}
.mr-room-l:hover{background:var(--r-cream)}
.mr-room.mr-on .mr-room-l{background:var(--r-cream)}
.mr-room.mr-on .mr-room-l::before{background:var(--r-terre)}
.mr-room-nom{font-family:var(--font-display);font-size:1.15rem;font-weight:500;line-height:1.2;display:block}
.mr-room-meta{display:block;font-size:.76rem;color:var(--r-ink-mute);margin-top:.2rem}
.mr-room-meta em{font-style:normal;color:var(--r-terre)}
.mr-room-px{display:flex;flex-direction:column;align-items:flex-end;gap:.05rem;white-space:nowrap;text-align:right}
.mr-room-px s{font-size:.74rem;color:var(--r-ink-mute);text-decoration:line-through;font-variant-numeric:lining-nums tabular-nums}
.mr-tot-px{font-family:var(--font-sans);font-size:1.2rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.mr-per{font-size:.72rem;color:var(--r-ink-mute);font-variant-numeric:tabular-nums}
.mr-room.mr-no{opacity:.55}
.mr-room-ind{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .9rem;font-size:.84rem;color:var(--r-ink-mute)}
.mr-room-ind b{font-weight:400;color:var(--r-ink-soft)}
.mr-more{display:inline-flex;align-items:center;gap:.45rem;background:none;border:0;padding:.15rem 0;margin:0 0 .55rem .9rem;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--r-ink-mute)}
.mr-more:hover{color:var(--r-terre)}
.mr-desc{padding:0 .9rem 1.1rem}
.mr-desc .mr-gal{margin-bottom:.9rem}
.mr-gal{position:relative;overflow:hidden;background:var(--r-cream)}
.mr-gal>img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mr-dots{position:absolute;left:0;right:0;bottom:.7rem;display:flex;justify-content:center;gap:.4rem}
.mr-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);transition:background .2s ease,transform .2s ease}
.mr-dots button.mr-a{background:#fff;transform:scale(1.3)}
.mr-specs{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:.7rem}
.mr-spec{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--r-ink-soft)}
.mr-spec svg{flex:none;color:var(--r-ink-mute)}
.mr-badge-dispo{font-size:.72rem;color:var(--r-terre)}
@media(max-width:480px){.mr-room-nom{font-size:1.02rem}.mr-tot-px{font-size:1.15rem}}

/* Détail chambre + tarifs */
.mr-detail{margin-bottom:2rem}
.mr-detail .mr-galwrap{margin-bottom:1.1rem}
.mr-detail .mr-gal>img{aspect-ratio:16/10}
.mr-detail h2{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.06;margin:0}
.mr-detail .mr-specs{margin-top:1.1rem}
.mr-descbox{margin-top:1.4rem}
.mr-descbox h4{font-size:1.2rem;margin:0 0 .5rem}
.mr-descbox p{margin:0;font-size:.88rem;color:var(--r-ink-soft);line-height:1.7}
.mr-descbox ul{margin:.7rem 0 0;padding:0;list-style:none;font-size:.86rem;color:var(--r-ink-soft)}
.mr-descbox li{padding:.28rem 0 .28rem 1rem;position:relative}
.mr-descbox li::before{content:"";position:absolute;left:0;top:.9rem;width:6px;height:1px;background:var(--r-or)}
.mr-rate{border:1px solid var(--r-line);background:#fff;padding:1.3rem 1.4rem;text-align:left;display:block;width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.mr-rate:hover{border-color:var(--r-or)}
.mr-rate.mr-on{border-color:var(--r-terre);box-shadow:0 0 0 1px var(--r-terre)}
.mr-rate-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.mr-rate-top h3{font-size:1.35rem;margin:0;line-height:1.15}
.mr-radio{width:20px;height:20px;border:1px solid var(--r-line);border-radius:50%;flex:none;position:relative;margin-top:.15rem}
.mr-rate.mr-on .mr-radio{border-color:var(--r-terre)}
.mr-rate.mr-on .mr-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--r-terre)}
.mr-rate-px{margin:.4rem 0 0;font-size:1rem;font-variant-numeric:tabular-nums}
.mr-rate-px small{color:var(--r-ink-mute);font-size:.78rem;font-variant-numeric:normal}
.mr-rate-inc{background:var(--r-cream);padding:.9rem 1rem;margin-top:.9rem}
.mr-rate-inc ul{margin:0;padding:0;list-style:none;font-size:.84rem;color:var(--r-ink-soft)}
.mr-rate-inc li{padding:.22rem 0 .22rem 1rem;position:relative}
.mr-rate-inc li::before{content:"";position:absolute;left:0;top:.85rem;width:6px;height:1px;background:var(--r-or)}
.mr-rate-cond{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.85rem;font-size:.8rem;color:var(--r-ink-mute)}
.mr-rate-cond b{color:var(--r-olive);font-weight:500}
.mr-rate-cond i{width:3px;height:3px;background:var(--r-line);border-radius:50%;display:inline-block}

/* Prestations */
.mr-incl{border:1px solid var(--r-olive);background:rgba(90,107,75,.07);padding:1rem 1.1rem;margin-bottom:1.5rem}
.mr-incl b{font-weight:500;font-size:.88rem;display:block;margin-bottom:.35rem}
.mr-incl ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.84rem;color:var(--r-ink-soft)}
.mr-incl li::before{content:"✓";color:var(--r-olive);margin-right:.4rem}
.mr-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.mr-opt-wrap{display:flex;flex-direction:column}
.mr-opt-wrap .mr-opt{flex:1}
/* Compteur « pour combien de personnes » : hors du bouton, un bouton dans un
   bouton n'étant pas du HTML valide. */
.mr-qte{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;border:1px solid var(--r-line);border-top:0;padding:.55rem .9rem;background:var(--r-cream)}
.mr-qte>span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--r-ink-mute)}
.mr-qte .mr-ctrl{gap:.55rem}
.mr-qte .mr-ctrl button{width:26px;height:26px;background:#fff}
.mr-qte .mr-ctrl button[disabled]{opacity:.35}
.mr-qte-n{font-size:.78rem;color:var(--r-ink-soft);text-transform:none;letter-spacing:0}
@media(max-width:600px){.mr-opts{grid-template-columns:1fr}}
.mr-opt{border:1px solid var(--r-line);background:#fff;text-align:left;overflow:hidden;display:flex;flex-direction:column;padding:0;transition:transform .22s ease,box-shadow .22s ease,border-color .2s ease}
.mr-opt:hover{transform:translateY(-2px);box-shadow:0 18px 40px -28px rgba(36,30,23,.45)}
.mr-opt.mr-on{border-color:var(--r-terre)}
.mr-opt>img{width:100%;height:150px;object-fit:cover}
.mr-opt-bd{padding:1rem 1.05rem 1.1rem;display:flex;flex-direction:column;flex:1;gap:.3rem}
.mr-opt-h{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.mr-opt-bd b{font-weight:500;font-size:1.05rem;display:block;line-height:1.25}
.mr-px{font-size:.92rem;font-variant-numeric:tabular-nums;color:var(--r-ink-soft);margin-top:.15rem;display:block}
.mr-px small{font-size:.78rem;color:var(--r-ink-mute);font-variant-numeric:normal}
.mr-opt-bd small.mr-det{color:var(--r-ink-mute);font-size:.82rem;line-height:1.55;margin-top:.5rem}
.mr-add{background:var(--r-terre);color:#FFF7EE;border:0;padding:.6rem 1.3rem;font-size:.84rem;flex:none}
.mr-add:hover{background:var(--r-terre-deep)}
.mr-opt.mr-on .mr-add{background:var(--r-olive)}
.mr-offert{color:var(--r-olive)}
.mr-upg{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--r-or);display:block}
.mr-special{margin-top:2rem;border-top:1px solid var(--r-line-soft);padding-top:1.4rem}
.mr-special h3{font-size:1.25rem;margin:0 0 .6rem}
.mr-special textarea{width:100%;max-width:44rem;padding:.75rem .8rem;border:1px solid var(--r-line);background:#fff;font:inherit;font-size:.88rem;resize:vertical}
.mr-special textarea:focus{outline:none;border-color:var(--r-terre)}

/* Confirmation */
.mr-confirm{display:flex;flex-direction:column;gap:1.4rem}
.mr-card{border:1px solid var(--r-line);background:#fff}
.mr-card>img{width:100%;height:210px;object-fit:cover}
.mr-card-bd{padding:1.4rem}
.mr-card-bd h3{font-size:1.6rem;margin:0}
.mr-lines{margin-top:1.1rem}
.mr-line{display:flex;justify-content:space-between;gap:.9rem;font-size:.88rem;padding:.6rem 0;border-bottom:1px dotted var(--r-line)}
.mr-line:last-child{border-bottom:0}
.mr-line span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.mr-line.mr-rem span{color:var(--r-olive)}
.mr-tot{display:flex;justify-content:space-between;align-items:baseline;gap:.9rem;margin-top:.6rem;padding-top:1rem;border-top:1px solid var(--r-line)}
.mr-tot b{font-family:var(--font-sans);font-size:1.7rem;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.mr-fields{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.9rem}
@media(max-width:600px){.mr-fields{grid-template-columns:1fr}}
.mr-fields label{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--r-ink-mute);margin-bottom:.3rem}
.mr-fields input{width:100%;padding:.65rem .7rem;border:1px solid var(--r-line);background:var(--r-bone);color:var(--r-ink);font:inherit;font-size:.88rem}
.mr-fields input:focus{outline:none;border-color:var(--r-terre)}
.mr-wide{grid-column:1/-1}
.mr-dep{background:var(--r-cream);border:1px solid var(--r-line);padding:1.1rem;margin-top:1.1rem}
.mr-l{display:flex;justify-content:space-between;gap:.75rem;font-size:.88rem;margin-bottom:.35rem}
.mr-l b{font-weight:500;font-variant-numeric:tabular-nums}
.mr-dep p{margin:.6rem 0 0;font-size:.76rem;color:var(--r-ink-mute);line-height:1.55}

.mr-back{border:1px solid var(--r-line);background:none;padding:.7rem 1.1rem;font-size:.84rem}
.mr-back:hover{border-color:var(--r-ink)}
.mr-next{background:var(--r-terre);color:#FFF7EE;border:0;padding:.85rem 1.8rem;font-size:.88rem;letter-spacing:.03em;transition:background .2s ease}
.mr-next:hover{background:var(--r-terre-deep)}
.mr-next[disabled]{opacity:.4;cursor:default}
.mr-acts{display:flex;gap:.6rem;align-items:center;flex:none}
.mr-full{width:100%;margin-top:1rem}
/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — retours Laurent du 2026-08-22 : « le nombre de chambres et de
   personnes n'est pas visible, il faut descendre », « le titre sur 1 ligne
   au lieu de 2 », « le bouton suivant à droite sur la même ligne », « les
   packs, il faut bien les voir sur une seule page, sans scroll ».
   Tout est confiné à ce bloc : la mise en page de bureau, validée, ne bouge pas.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  /* — Étape 1 : chambres et voyageurs AVANT le calendrier —
     Ils étaient sous un calendrier de 300 px : personne ne les voyait. Et c'est
     l'ordre logique, puisque le nombre de chambres filtre les jours affichés. */
  .mr-step[data-step="1"].mr-on{display:flex;flex-direction:column}
  .mr-step[data-step="1"] .mr-title{order:1}
  .mr-step[data-step="1"] .mr-counters{order:2;margin-top:.35rem}
  .mr-step[data-step="1"] .mr-months{order:3;margin-top:.5rem}
  .mr-step[data-step="1"] .mr-inclus{order:4}

  /* Compteurs sur deux colonnes, sans le sous-titre : ~70 px gagnés. */
  .mr-counters{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
  .mr-pax{padding:.5rem 0;font-size:.82rem;gap:.4rem}
  .mr-pax small{display:none}
  .mr-pax-t,.mr-pax-sub{grid-column:1/-1}
  .mr-ctrl{gap:.5rem}
  .mr-ctrl button{width:27px;height:27px}

  /* Titre d'étape sur une ligne. */
  .mr-title{margin-bottom:.5rem}
  .mr-title-c{margin-bottom:.4rem}
  .mr-title-c h2{font-size:.95rem;line-height:1.25}
  .mr-title h2{font-size:1.25rem;max-width:none}
  /* Le sous-titre d'étape est une phrase d'explication de trois lignes qui mangeait
     86 px sur un petit écran : on le borne à deux lignes. */
  .mr-title p{font-size:.8rem;margin-top:.3rem;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* Pied : tout sur une seule ligne, « Suivant » calé à droite. Le nombre de
     voyageurs y faisait doublon — il est désormais en haut de l'étape 1. */
  /* 🔴 Le pied ne tient PAS en une ligne avec quatre informations : à 412 px les
     blocs se chevauchaient (« 18 sept. 2026 » par-dessus « Durée à choisir », le
     total sous les boutons). On ne garde donc que le TOTAL — c'est la seule chose
     qui compte au moment d'appuyer sur Suivant ; les dates sont déjà rappelées
     dans le sous-titre de l'étape.
     ⚠️ Les sélecteurs sont `.mr-pf-info > .x` : `.mr-pf-info > div` pose
     `display:flex` avec une spécificité supérieure, un simple `.mr-pf-pax` était
     ignoré en silence. */
  .mr-pf{flex-wrap:nowrap;gap:.6rem;padding:.6rem .9rem;align-items:center}
  .mr-pf-info{flex-wrap:nowrap;gap:.6rem;min-width:0;flex:0 1 auto;overflow:hidden}
  .mr-pf-info>.mr-pf-in,
  .mr-pf-info>.mr-pf-out,
  .mr-pf-info>.mr-pf-pax,
  .mr-pf-info>.mr-pf-arrow{display:none}
  .mr-pf-info>div{min-width:0}
  .mr-pf-info b{font-size:.78rem;overflow:hidden;text-overflow:ellipsis}
  .mr-pf-info span{font-size:.55rem;letter-spacing:.1em}
  .mr-pf-tot b{font-size:1.05rem}
  .mr-acts{flex:none;margin-left:auto}
  .mr-next{padding:.75rem 1.1rem;font-size:.84rem}
  .mr-back{padding:.6rem .8rem;font-size:.8rem}

  /* — Formules : cartes compactes, plusieurs visibles d'un coup —
     La photo pleine largeur en 4/3 mangeait 290 px : une seule formule tenait
     à l'écran. Vignette carrée à gauche, prix et bouton sur une ligne dessous. */
  .mr-pack{grid-template-columns:92px minmax(0,1fr);grid-template-areas:"ph bd" "px px";
    gap:.5rem .8rem;padding:.85rem 0}
  .mr-pack:first-child{padding-top:.2rem}
  .mr-pack-ph{grid-area:ph}
  .mr-pack-ph img{aspect-ratio:1}
  .mr-pack-tags{display:none}
  .mr-pack-bd{grid-area:bd}
  .mr-pack-bd h3{font-size:1rem}
  .mr-pack-pax{display:none}
  /* Le « Inclus : … » est long à dessein ; sur mobile on n'en montre que le
     début — c'est là que se trouve ce qui distingue la formule (dîner, massage) —
     et « Détails du tarif » libère le texte entier. */
  .mr-pack-res{margin-top:.3rem;font-size:.78rem;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mr-pack-bd.mr-res-ouvert .mr-pack-res{-webkit-line-clamp:unset;display:block}
  .mr-pack-det{display:inline-block;padding-top:.3rem;font-size:.78rem}
  .mr-pack-px{grid-area:px;flex-direction:row;flex-wrap:wrap;align-items:baseline;
    justify-content:space-between;gap:.35rem .7rem}
  /* En ligne, le libellé doit rester collé devant les deux prix. */
  .mr-apd{order:-1;align-self:center}
  .mr-pack-nuit{font-size:1.15rem}
  .mr-pack-px .mr-pick{margin-top:0;width:auto;padding:.6rem 1rem}
  .mr-hors{flex:1 1 100%;order:3}
}

/* Petits téléphones (iPhone SE et compagnie) : 667 px de haut, il reste ~510 px
   utiles entre l'en-tête, le fil des étapes et le pied. Pour que les trois formules
   tiennent quand même sans défilement, on resserre encore — titre de formule sur
   une ligne, « Inclus : … » sur une seule aussi (le reste est dans « Détails »). */
@media(max-width:640px) and (max-height:730px){
  .mr-pack{grid-template-columns:76px minmax(0,1fr);padding:.55rem 0;gap:.35rem .7rem}
  .mr-pack-bd h3{font-size:.88rem;line-height:1.25}
  .mr-pack-res{-webkit-line-clamp:1;font-size:.74rem;margin-top:.2rem}
  .mr-pack-det{padding-top:.2rem;font-size:.74rem}
  .mr-pack-nuit{font-size:1.05rem}
  .mr-pack-px{gap:.25rem .6rem}
  .mr-pack-px .mr-pick{padding:.5rem .9rem;font-size:.8rem}
  .mr-hors{font-size:.62rem}
  .mr-title{margin-bottom:.3rem}
  .mr-title h2{font-size:1.1rem}
  .mr-title p{-webkit-line-clamp:1;font-size:.76rem}
  /* On récupère aussi quelques pixels sur les bandeaux fixes du panneau. */
  .mr-ph{padding:.5rem 1rem .15rem}
  .mr-ph-nom{font-size:.82rem}
  .mr-ph-nom small{display:none}
  .mr-rail{padding:.35rem 0}
  .mr-body{padding-top:.1rem}
}

@media(prefers-reduced-motion:reduce){.mr-step.mr-on{animation:none}.mr-opt,.mr-gal>img{transition:none}}

/* ═══════════════════════════════════════════════════════════════════════
   AJOUTS PROPRES AU COFFRET — tout ce que le moteur du site n'a pas :
   le bandeau du bon, l'acceptation du complément, l'écran de fin.
   ═══════════════════════════════════════════════════════════════════════ */
.mr-cof{background:var(--r-cream);border-left:2px solid var(--r-or);padding:.85rem 1rem;margin-bottom:1.1rem;font-size:.84rem;color:var(--r-ink-soft);line-height:1.6}
.mr-cof b{font-weight:500;color:var(--r-ink)}
.mr-charge{color:var(--r-ink-mute);font-size:.9rem;padding:2rem 0;text-align:center}
.mr-err{color:var(--r-terre);font-size:.88rem;margin:.9rem 0 0}
.mr-accept{display:flex;align-items:flex-start;gap:.5rem;margin-top:.7rem;font-size:.82rem;color:var(--r-ink-soft);line-height:1.5;cursor:pointer}
.mr-accept input{margin-top:.2rem;flex:none}
.mr-fin{text-align:center;padding:2.5rem 0 1rem}
.mr-fin-ok{font-size:2.4rem;color:var(--r-olive);margin:0 0 .4rem}
.mr-fin h2{font-size:1.8rem;margin:0 0 .6rem}
.mr-fin p{margin:.3rem 0;font-size:.92rem;color:var(--r-ink-soft)}
.mr-fin .mr-next{margin-top:1.6rem}
/* Le panneau est monté sur la page coffret, qui n'a pas d'en-tête fixe :
   rien à masquer, mais la police du site doit être chargée (Cormorant + Inter,
   déjà appelées par coffret.html). */
.mr-ov .mr-lines small{font-weight:400}
/* Jour hors grille (déjà passé, ou au-delà de l'horizon publié) — voir le
   commentaire de coffret-sejour.js : surtout pas `.mr-off`, qui est la pastille. */
.mr-ov .mr-day.mr-day-hs{opacity:.22;cursor:default}
/* Le titre de l'étape 1 tient sur une ligne : `.mr-title h2` le borne à 24ch,
   ce qui renvoyait le point d'interrogation à la ligne suivante. */
.mr-ov .mr-title-c h2{max-width:52ch}
/* Créneaux des prestations comprises dans le coffret (restaurant, SPA, massage). */
.mr-creneaux{border-top:1px solid var(--r-line-soft);margin-top:1.2rem;padding-top:1rem}
.mr-creneaux h4{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--r-ink-mute);margin:0 0 .7rem;font-weight:500}
.mr-creneaux label{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--r-ink-mute);margin:.8rem 0 .3rem}
.mr-creneaux select{width:100%;padding:.65rem .7rem;border:1px solid var(--r-line);background:var(--r-bone);color:var(--r-ink);font:inherit;font-size:.88rem}
.mr-creneaux select:focus{outline:none;border-color:var(--r-terre)}
.mr-creneaux .mr-muted{font-size:.76rem;margin-top:.4rem}

/* ── « Détail » — la pastille à côté du nom de la chambre ──────────────────
   Remplace le lien « VOIR LA CHAMBRE » en capitales sous la ligne, jugé moche.
   Discrète au repos (filet fin, texte sourd), terre cuite au survol et quand la
   fiche est ouverte ; le chevron pivote pour dire si c'est ouvert ou fermé. */
.mr-ov .mr-room-l{cursor:pointer}
.mr-ov .mr-room-titre{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.mr-ov .mr-det-btn{display:inline-flex;align-items:center;gap:.4rem;flex:none;
  background:transparent;border:1px solid var(--r-line);border-radius:999px;
  padding:.2rem .6rem .22rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--r-ink-mute);line-height:1.4;transition:color .18s ease,border-color .18s ease,background .18s ease}
.mr-ov .mr-det-btn:hover{color:var(--r-terre);border-color:var(--r-terre);background:rgba(255,255,255,.7)}
.mr-ov .mr-det-btn .mr-det-chev{width:5px;height:5px;flex:none;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease}
.mr-ov .mr-det-btn.mr-det-on{color:var(--r-terre);border-color:var(--r-terre);background:#fff}
.mr-ov .mr-det-btn.mr-det-on .mr-det-chev{transform:rotate(-135deg) translate(-1px,-1px)}
.mr-ov .mr-desc{padding-top:.2rem}
@media(max-width:480px){.mr-ov .mr-det-btn{font-size:.62rem;padding:.18rem .5rem}}

/* ── Durées d'une même prestation (massage 60/90/120) ──────────────────────
   Une seule carte au lieu de trois : les durées sont des puces sous la carte,
   hors du <button> (un bouton dans un bouton n'est pas du HTML valide). */
.mr-ov .mr-var{display:flex;gap:.35rem;border:1px solid var(--r-line);border-top:0;padding:.5rem;background:#fff}
.mr-ov .mr-var-b{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  border:1px solid var(--r-line);background:#fff;padding:.35rem .2rem;font-size:.78rem;line-height:1.2;
  transition:border-color .18s ease,background .18s ease,color .18s ease}
.mr-ov .mr-var-b small{font-size:.68rem;color:var(--r-ink-mute);font-variant-numeric:lining-nums tabular-nums}
.mr-ov .mr-var-b:hover{border-color:var(--r-terre)}
.mr-ov .mr-var-b.mr-on{border-color:var(--r-terre);background:var(--r-terre);color:#FFF7EE}
.mr-ov .mr-var-b.mr-on small{color:rgba(255,247,238,.85)}
.mr-ov .mr-var + .mr-qte{border-top:0}
/* Tarif barré + écart en pourcentage, sur la même ligne (étape Durée). */
.mr-ov .mr-ref{display:flex;align-items:center;gap:.4rem}
.mr-ov .mr-pct{background:var(--r-terre);color:#FFF7EE;font-size:.66rem;font-weight:600;letter-spacing:.04em;
  padding:.1rem .35rem;border-radius:3px;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}