/* Shared components: language switch, gallery, booking widget, edit overlay.
   Each theme defines --accent / --ink / --paper / --font-display / --font-body;
   sensible fallbacks are provided so this file works standalone too. */

.mc-positioned { position: relative; }

/* ---------- Language switch ---------- */
.mc-lang-switch{
  display: flex; gap: 2px; flex: none;
  border: 1px solid color-mix(in srgb, var(--ink, #222) 25%, transparent);
  border-radius: 999px; padding: 2px;
}
.mc-lang-switch button{
  all: unset; cursor: pointer;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border-radius: 999px;
  color: var(--ink, #222); opacity: 0.55;
}
.mc-lang-switch button[aria-pressed="true"]{ opacity: 1; background: var(--accent, #C97A3D); color: var(--paper, #fff); }

.mc-gallery-trigger{
  all: unset; cursor: pointer; color: inherit; font-size: 0.88rem; opacity: 0.9;
}
.mc-gallery-trigger:hover{ opacity: 1; text-decoration: underline; }

/* ---------- Gallery overlay + lightbox ---------- */
.mc-gallery-overlay{
  position: fixed; inset: 0; z-index: 400;
  background: color-mix(in srgb, var(--ink, #211C18) 96%, black 4%);
  display: none; flex-direction: column; overflow-y: auto;
}
.mc-gallery-overlay.open{ display: flex; }
.mc-gallery-head{
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.6rem;
  background: color-mix(in srgb, var(--ink, #211C18) 92%, transparent);
  backdrop-filter: blur(6px);
}
.mc-gallery-head h2{ color: var(--paper, #fff); font-size: 1.2rem; margin: 0; }
.mc-gallery-close{
  all: unset; cursor: pointer; color: var(--paper, #fff);
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--paper, #fff) 40%, transparent);
  border-radius: 999px; padding: 0.4rem 0.9rem;
}
.mc-gallery-grid{
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; padding: 1.6rem;
}
.mc-gallery-grid button{ all: unset; cursor: pointer; display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; }
.mc-gallery-grid img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mc-gallery-grid button:hover img{ transform: scale(1.05); }
@media (max-width: 900px){ .mc-gallery-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .mc-gallery-grid{ grid-template-columns: 1fr; } }

.mc-lightbox{
  position: fixed; inset: 0; z-index: 410; background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
}
/* Image et légende empilées : l'écart reste le même quelle que soit la taille de l'image
   (la légende était fixée au bas de l'écran et touchait presque les grandes photos). */
.mc-lightbox.open{ display: flex; flex-direction: column; }
.mc-lightbox img{ max-width: 88vw; max-height: 78vh; object-fit: contain; }
.mc-lightbox .lb-cap{ margin: 1.25rem 0 0; padding-inline: 1rem; text-align: center; color: #fff; font-size: 0.85rem; }
.mc-lightbox button{ all: unset; cursor: pointer; position: absolute; color: #fff; font-size: 1.6rem; padding: 0.6rem 1rem; }
.mc-lightbox .lb-close{ top: 1rem; right: 1rem; font-size: 1.2rem; }
.mc-lightbox .lb-prev{ left: 1rem; top: 50%; transform: translateY(-50%); }
.mc-lightbox .lb-next{ right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- Booking widget ---------- */
/* minmax(0,…) partout : un `1fr` nu vaut minmax(auto,1fr), et le `auto` prend la
   largeur min-content des <input> (size=20 ≈ 199px), ce qui force la grille à
   déborder sur mobile au lieu de se réduire. */
.mc-booking{
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start;
  text-align: left;
}
@media (max-width: 900px){ .mc-booking{ grid-template-columns: minmax(0, 1fr); } }

.mc-booking-cal{ min-width: 0; }
.mc-cal-head{ display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.mc-cal-nav{ all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--ink, #222) 25%, transparent); font-size: 1.1rem; }
.mc-cal-nav:hover{ background: color-mix(in srgb, var(--accent, #C97A3D) 15%, transparent); }
.mc-cal-year{ font-family: var(--font-display, serif); font-size: 1.2rem; min-width: 8ch; text-align: center; }
.mc-cal-months{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 640px){ .mc-cal-months{ grid-template-columns: minmax(0, 1fr); } }
.mc-cal-month-title{ font-family: var(--font-display, serif); text-transform: capitalize; font-size: 1rem; margin-bottom: 0.6rem; text-align: center; }
.mc-cal-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mc-cal-dow{ text-align: center; font-size: 0.66rem; text-transform: uppercase; opacity: 0.5; padding-bottom: 4px; }
.mc-cal-day{
  all: unset; box-sizing: border-box; cursor: pointer; text-align: center;
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15; font-size: 0.8rem; border-radius: 6px;
  background: color-mix(in srgb, var(--accent, #C97A3D) 8%, transparent);
}
.mc-cal-day .p{ font-size: 0.52rem; opacity: 0.7; letter-spacing: -0.01em; }
.mc-cal-day:disabled{ cursor: not-allowed; opacity: 0.35; background: transparent; }

/* Seuls les samedis sont réservables : ils ressortent, les autres jours restent
   lisibles (prix visible) mais sans apparence cliquable. */
.mc-cal-day.is-sat{ font-weight: 700; }
/* s-out / s-in : samedis de départ et d'arrivée d'un séjour confirmé, affichés
   comme disponibles (seules les nuits du milieu apparaissent occupées). */
.mc-cal-day.is-sat:is(.s-available, .s-out, .s-in):not(.selected):not(.in-range){
  background: color-mix(in srgb, var(--accent, #C97A3D) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #C97A3D) 45%, transparent);
}
.mc-cal-day.not-sat.s-available:disabled{ cursor: default; opacity: 1; }

.mc-cal-day.s-pending{ background: #E8B84B; opacity: 0.75; color: #3a2c00; }
.mc-cal-day.s-blocked{ background: #C1441F; opacity: 0.55; color: #fff; }
.mc-cal-day.s-past{ background: transparent; }

.mc-cal-day.s-out, .mc-cal-day.s-in{ opacity: 1; color: var(--ink, #222); }

.mc-cal-day:hover:not(:disabled):not(.selected){ background: color-mix(in srgb, var(--accent, #C97A3D) 30%, transparent); }
.mc-cal-day.selected{ background: var(--accent, #C97A3D); color: #fff; font-weight: 700; }
.mc-cal-day.in-range{ background: color-mix(in srgb, var(--accent, #C97A3D) 45%, transparent); }
/* Jours de début septembre affichés à la suite d'août (dernière semaine de la saison). */
.mc-cal-day.is-next > span:first-child{ font-style: italic; opacity: 0.75; }
.mc-cal-legend{ display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; font-size: 0.76rem; opacity: 0.8; }
.mc-cal-legend .dot{ display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.mc-cal-legend .dot.available{ background: color-mix(in srgb, var(--accent, #C97A3D) 30%, transparent); }
.mc-cal-legend .dot.pending{ background: #E8B84B; }
.mc-cal-legend .dot.blocked{ background: #C1441F; }
.mc-cal-selection{ margin-top: 1.2rem; font-size: 0.92rem; min-height: 1.4em; }
.mc-cal-total{ display: inline-block; margin-top: 0.15rem; color: color-mix(in srgb, var(--accent, #C97A3D) 80%, #000); }

.mc-booking-form{ display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.mc-field-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; }
@media (max-width: 480px){ .mc-field-row{ grid-template-columns: minmax(0, 1fr); } }
.mc-booking-form label{ display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; opacity: 0.85; min-width: 0; }
.mc-booking-form input, .mc-booking-form textarea, .mc-booking-form select{
  font: inherit; font-size: 0.95rem; padding: 0.6rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--ink, #222) 25%, transparent);
  border-radius: 6px; background: var(--paper, #fff); color: var(--ink, #222);
  width: 100%; min-width: 0; max-width: 100%;
}
.mc-booking-form input:focus, .mc-booking-form textarea:focus, .mc-booking-form select:focus{ outline: 2px solid var(--accent, #C97A3D); outline-offset: 1px; }
.mc-booking-form select{ cursor: pointer; }
.mc-booking-form select option{ color: var(--ink, #222); }
/* Tant qu'aucun nombre n'est choisi, le « 0 » affiché se lit comme une valeur par défaut. */
.mc-booking-form select:required:invalid{ color: color-mix(in srgb, var(--ink, #222) 55%, transparent); }
.mc-field-guests select{ max-width: 8rem; }
.mc-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mc-form-note{ font-size: 0.76rem; opacity: 0.65; margin: 0; }
.mc-form-error{ color: #a33; font-size: 0.85rem; margin: 0; }
.mc-submit{
  all: unset; cursor: pointer; text-align: center;
  background: var(--accent, #C97A3D); color: #fff; font-weight: 600;
  padding: 0.85rem 1.4rem; border-radius: 8px; margin-top: 0.4rem;
}
.mc-submit:hover{ filter: brightness(1.08); }
.mc-submit:disabled{ opacity: 0.6; cursor: wait; }
.mc-booking-success{ text-align: center; padding: 2.5rem 1rem; }
.mc-booking-success h3{ font-family: var(--font-display, serif); font-size: 1.6rem; margin-bottom: 0.6rem; }

/* ---------- Modal de confirmation ---------- */
.mc-modal{
  position: fixed; inset: 0; z-index: 700;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.mc-modal[hidden]{ display: none; }
.mc-modal-backdrop{
  position: absolute; inset: 0;
  background: rgb(20 14 10 / .58); backdrop-filter: blur(3px);
  animation: mc-modal-fade .28s ease both;
}
.mc-modal-card{
  position: relative; z-index: 1;
  width: 100%; max-width: 420px; max-height: calc(100vh - 2.5rem); overflow-y: auto;
  background: var(--paper, #fff); border-radius: 18px; text-align: center;
  box-shadow: 0 30px 70px -20px rgb(0 0 0 / .45);
  animation: mc-modal-pop .4s cubic-bezier(.2,.9,.3,1.15) both;
}
.mc-modal-close{
  all: unset; cursor: pointer; position: absolute; top: 0.5rem; right: 0.75rem; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--ink, #222);
  background: rgb(255 255 255 / .75); backdrop-filter: blur(4px);
}
.mc-modal-close:hover{ background: #fff; }
.mc-modal-art{ display: block; }
.mc-modal-art svg{ display: block; width: 100%; height: auto; }
.mc-modal-body{ padding: 1.5rem 1.75rem 1.75rem; }
.mc-modal-body h3{
  font-family: var(--font-display, serif); font-style: italic;
  font-size: 1.7rem; font-weight: 400; margin: 0 0 0.6rem;
}
.mc-modal-body p{
  margin: 0 0 1.4rem; font-size: 0.95rem; line-height: 1.6;
  color: color-mix(in srgb, var(--ink, #222) 78%, transparent);
}
.mc-modal-btn{
  all: unset; cursor: pointer; text-align: center;
  background: var(--accent, #C97A3D); color: #fff; font-weight: 600; font-size: 0.92rem;
  padding: 0.8rem 2.2rem; border-radius: 8px;
}
.mc-modal-btn:hover{ filter: brightness(1.08); }

@keyframes mc-modal-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes mc-modal-pop{
  from{ opacity: 0; transform: translateY(14px) scale(.96); }
  to{ opacity: 1; transform: none; }
}

/* Scène : olivier dans la garrigue */
.mc-modal-art [class*="mc-"]{ transform-box: fill-box; }
.mc-tree{ transform-origin: 50% 100%; animation: mc-wind-trunk 7s ease-in-out infinite; }
.mc-canopy{ transform-origin: 50% 100%; animation: mc-wind 7s ease-in-out infinite; }
.mc-leaf{ transform-origin: 50% 100%; animation: mc-wind-leaf 5.5s ease-in-out infinite; }
.mc-scrub{ transform-origin: 50% 100%; animation: mc-wind-leaf 6.5s ease-in-out infinite; }
.mc-lav{ transform-origin: 50% 100%; animation: mc-sway-wide 4.5s ease-in-out infinite; }
.mc-grass{ transform-origin: 50% 100%; animation: mc-sway-wide 4s ease-in-out infinite; }
.mc-sun{ transform-origin: 50% 50%; animation: mc-glow 6s ease-in-out infinite; }
.mc-d2{ animation-delay: -1.3s; }
.mc-d3{ animation-delay: -2.6s; }
.mc-d4{ animation-delay: -3.9s; }

/* Rafales irrégulières plutôt qu'un va-et-vient régulier : plus proche du vent réel. */
@keyframes mc-wind{
  0%{ transform: rotate(-2.6deg) translateX(-1.2px); }
  18%{ transform: rotate(1.2deg) translateX(.4px); }
  34%{ transform: rotate(3.6deg) translateX(1.6px); }
  50%{ transform: rotate(.8deg) translateX(.2px); }
  68%{ transform: rotate(3deg) translateX(1.3px); }
  84%{ transform: rotate(-.6deg) translateX(-.4px); }
  100%{ transform: rotate(-2.6deg) translateX(-1.2px); }
}
@keyframes mc-wind-leaf{
  0%{ transform: rotate(-3deg); }
  30%{ transform: rotate(2.2deg); }
  55%{ transform: rotate(4deg); }
  78%{ transform: rotate(.6deg); }
  100%{ transform: rotate(-3deg); }
}
/* Le tronc ne fait que fléchir : l'essentiel du mouvement reste dans le feuillage. */
@keyframes mc-wind-trunk{
  0%,100%{ transform: rotate(-.7deg); }
  34%{ transform: rotate(.9deg); }
  68%{ transform: rotate(.3deg); }
}
@keyframes mc-sway-wide{
  0%,100%{ transform: rotate(-6deg); }
  45%{ transform: rotate(6deg); }
}
@keyframes mc-glow{
  0%,100%{ opacity: .8; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.06); }
}

/* Olives : une chute toutes les 1,4 s sur un cycle de 14 s, soit 10 olives
   décalées qui tombent l'une après l'autre en continu. --x/--y portent la
   distance jusqu'au panier, définie par olive dans le SVG. */
.mc-olive{
  opacity: 0;
  animation: mc-olive-fall 14s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes mc-olive-fall{
  0%,3%{ opacity: 0; transform: translate(0,0); }
  /* accélération de la chute appliquée au segment 5% → 22% */
  5%{ opacity: 1; transform: translate(0,0); animation-timing-function: cubic-bezier(.45,0,.75,.9); }
  22%{ opacity: 1; transform: translate(var(--x,0), var(--y,0)); }
  27%{ opacity: 0; }
  100%{ opacity: 0; transform: translate(var(--x,0), var(--y,0)); }
}

@media (prefers-reduced-motion: reduce){
  .mc-modal-backdrop, .mc-modal-card, .mc-tree,
  .mc-canopy, .mc-leaf, .mc-scrub, .mc-lav, .mc-grass, .mc-sun{ animation: none; }
  .mc-olive{ animation: none; opacity: 1; }
}

/* ---------- Edit overlay — désactivé en production ---------- */
.mc-edit-toggle{ display: none !important; }
.mc-edit-toggle-hidden{
  all: unset; cursor: pointer; position: fixed; top: 50%; right: 0; z-index: 500;
  transform: translateY(-50%);
  background: #16181c; color: #fff; font-family: -apple-system, sans-serif; font-size: 0.78rem;
  font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.9rem 0.55rem; writing-mode: vertical-rl; border-radius: 8px 0 0 8px;
  box-shadow: -4px 0 16px rgb(0 0 0 / .25);
}
.mc-edit-toggle.is-active{ background: var(--accent, #C97A3D); }
.mc-edit-toggle:hover{ padding-right: 0.8rem; }

body.mc-edit-active [data-edit-id]{ cursor: pointer; }
body.mc-edit-active [data-edit-id].mc-edit-hover{ outline: 2px dashed color-mix(in srgb, var(--accent, #C97A3D) 70%, transparent); outline-offset: 2px; }
body.mc-edit-active [data-edit-id].mc-edit-selected{ outline: 2px solid var(--accent, #C97A3D); outline-offset: 2px; }

.mc-resize-handle{
  display: none; position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px;
  background: var(--accent, #C97A3D); border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; z-index: 5;
}
.mc-edit-selected .mc-resize-handle{ display: block; }

.mc-edit-login{
  position: fixed; inset: 0; z-index: 600; background: rgb(0 0 0 / .5);
  display: none; align-items: center; justify-content: center;
}
.mc-edit-login.open{ display: flex; }
.mc-edit-login-card{
  background: #fff; color: #222; border-radius: 12px; padding: 1.8rem; width: min(360px, 90vw);
  font-family: -apple-system, sans-serif;
}
.mc-edit-login-card h3{ margin: 0 0 0.4rem; }
.mc-edit-login-card p{ margin: 0 0 1rem; font-size: 0.88rem; color: #555; }
.mc-edit-login-card input{ width: 100%; box-sizing: border-box; padding: 0.6rem 0.7rem; border: 1px solid #ccc; border-radius: 6px; font: inherit; margin-bottom: 0.6rem; }
.mc-edit-login-error{ color: #a33; font-size: 0.82rem; margin: 0 0 0.6rem; }
.mc-edit-login-actions{ display: flex; justify-content: flex-end; gap: 0.6rem; }
.mc-btn-ghost{ all: unset; cursor: pointer; padding: 0.55rem 1rem; border-radius: 6px; font-size: 0.85rem; color: #555; }
.mc-btn-ghost:hover{ background: #f0f0f0; }
.mc-btn-solid{ all: unset; cursor: pointer; padding: 0.55rem 1.1rem; border-radius: 6px; font-size: 0.85rem; background: #16181c; color: #fff; }

.mc-edit-panel{
  position: fixed; top: 0; right: 0; height: 100vh; width: 320px; max-width: 90vw; z-index: 550;
  background: #fff; color: #222; box-shadow: -8px 0 24px rgb(0 0 0 / .18);
  padding: 1.4rem; overflow-y: auto; font-family: -apple-system, sans-serif;
  transform: translateX(100%); transition: transform 0.25s ease;
}
.mc-edit-panel.open{ transform: translateX(0); }
.mc-edit-panel-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.mc-edit-id{ font-size: 0.68rem; color: #999; font-family: monospace; }
.mc-edit-row{ display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; color: #555; margin-bottom: 0.9rem; }
.mc-edit-row select, .mc-edit-row input[type="text"]{
  font: inherit; padding: 0.5rem 0.6rem; border: 1px solid #ddd; border-radius: 6px;
}
.mc-edit-text{ font: inherit; padding: 0.5rem 0.6rem; border: 1px solid #ddd; border-radius: 6px; resize: vertical; }
input[type="color"]{ width: 100%; height: 36px; border: 1px solid #ddd; border-radius: 6px; padding: 2px; }
.mc-edit-panel-actions{ display: flex; justify-content: space-between; margin-top: 1.2rem; border-top: 1px solid #eee; padding-top: 1rem; }
.mc-edit-hint{ font-size: 0.76rem; color: #999; line-height: 1.5; margin-top: 1rem; }
.mc-edit-img-preview{ width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; margin-bottom: 1rem; }
.mc-edit-img-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 220px; overflow-y: auto; }
.mc-edit-img-thumb{ all: unset; cursor: pointer; aspect-ratio: 1; overflow: hidden; border-radius: 4px; }
.mc-edit-img-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.mc-edit-upload{ display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; color: #555; margin: 0.9rem 0; }

.mc-edit-row select{ width: 100%; box-sizing: border-box; }
.mc-edit-toolbar{ display: flex; gap: 6px; flex-wrap: wrap; }
.mc-toolbar-btn{
  all: unset; box-sizing: border-box; cursor: pointer; text-align: center;
  min-width: 34px; padding: 0.4rem 0.55rem; border: 1px solid #ddd; border-radius: 6px;
  font-size: 0.85rem; color: #333;
}
.mc-toolbar-btn:hover{ background: #f5f5f5; }
.mc-toolbar-btn.active{ background: #16181c; color: #fff; border-color: #16181c; }
.mc-slider-head{ display: flex; justify-content: space-between; align-items: baseline; }
.mc-slider-value{ font-family: monospace; font-size: 0.72rem; color: #16181c; background: #f0f0f0; padding: 0.1rem 0.4rem; border-radius: 4px; }
.mc-edit-row input[type="range"]{ width: 100%; accent-color: #16181c; }