/* ═══════════════════════════════════════════════════════════
   Mur'Mures — Booking / Réservation d'intervention
   DESIGN CINÉMATIQUE PREMIUM — v8.0

   Charte graphique :
   • Accent : var(--accent) #e63312 → rouge sang, jamais orange
   • Fond profond : #070707 → noir absolu
   • Surface carte : var(--bg-2) — charte #111113
   • Bordure : var(--border)
   • Cards : photo-header + body (même pattern que impact-card)
   • Radius : 20px cards / 12px inputs / 6px tags
   • Axe vertical unique gauche pour tous les titres
   ═══════════════════════════════════════════════════════════ */

/* ═══ Breadcrumb ═══ */
.booking-breadcrumb {
  padding: 24px clamp(16px, 3vw, 48px) 0;
  color: var(--text-2); font-size: 0.78rem;
  display: flex; gap: 6px; align-items: center;
  max-width: 1120px; margin: 0 auto;
}
.booking-breadcrumb a { color: var(--text-2); transition: color .2s; text-decoration: none; }
.booking-breadcrumb a:hover { color: var(--accent); }
.booking-breadcrumb-sep { color: var(--border); margin: 0 2px; }
.booking-breadcrumb-current { color: var(--text-1); font-weight: 600; }

/* ═══ Hero avec photo ═══ */
.booking-hero {
  position: relative;
  min-height: clamp(280px, 38vw, 420px);
  display: flex; align-items: flex-end;
  padding: 0 clamp(16px, 3vw, 48px) 56px;
  overflow: hidden;
  background: #070707;
  margin-top: 72px;
}
.booking-hero-photo { position: absolute; inset: 0; }
.booking-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
  filter: grayscale(20%) contrast(1.05);
}
.booking-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.58) 38%, transparent 68%),
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.20) 52%, transparent 100%);
  z-index: 1;
}
.booking-hero-content {
  position: relative; z-index: 2;
  max-width: 1120px; width: 100%;
  margin: 0 auto;
}
.booking-hero-content h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900; text-transform: uppercase;
  font-style: italic; letter-spacing: -0.03em;
  line-height: 0.95; margin-bottom: 18px; color: #fff;
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.booking-hero-content h1 span { color: var(--accent); }
.booking-hero-content p {
  color: var(--text-2); font-style: italic;
  font-size: clamp(0.88rem, 1.3vw, 1rem);
  line-height: 1.65; max-width: 520px;
  text-shadow: 0 3px 18px rgba(0,0,0,.5);
}

/* ═══ Page content — noir profond avec texture ═══ */
.booking-page-content {
  position: relative;
  padding: 112px clamp(16px, 3vw, 48px) 80px;
  background: #070707;
  overflow: hidden;
}
.booking-page-content::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(230,51,18,.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(230,51,18,.03) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}
.booking-inner {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto;
}

/* ═══ Steps — axe vertical unique ═══ */
.booking-step { margin-bottom: 64px; }
.booking-step:last-child { margin-bottom: 0; }

.home-eyebrow {
  display: block;
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); margin-bottom: 10px;
}
.section-title {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 900; text-transform: uppercase;
  font-style: italic; letter-spacing: -0.02em;
  line-height: 0.95; margin-bottom: 8px;
  color: var(--text-1); text-align: left;
}
.section-title span { color: var(--accent); }
.section-sub {
  color: var(--text-2); font-style: italic;
  font-size: 0.88rem; margin-bottom: 28px;
  text-align: left; line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   CARDS : photo-header + body
   Même pattern que les impact-cards du site :
   image en haut (N&B au repos, couleur au hover/selected)
   texte en bas, aligné à gauche
   ═══════════════════════════════════════════════════════════ */

/* ── Type cards (3 colonnes) ── */
.booking-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.booking-type-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease;
  position: relative; overflow: hidden;
  text-align: left;
  list-style: none;
  box-shadow: 0 18px 40px var(--shadow);
}
.booking-type-card:hover {
  border-color: var(--accent);
}
.booking-type-card:hover .booking-card-photo img { filter: grayscale(0%); }
.booking-type-card.selected {
  border-color: var(--accent);
}
.booking-type-card.selected .booking-card-photo img { filter: grayscale(0%); }

/* Photo header des cartes */
.booking-card-photo {
  position: relative;
  height: 180px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.booking-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(100%) contrast(1.1);
  transition: filter .5s ease, transform .5s ease;
  transform: scale(1);
}
.booking-card-photo::after { content: none; }

/* Body des cartes */
.booking-card-body {
  padding: 20px 24px 24px;
  position: relative; z-index: 2;
}
.booking-card-body h3 {
  font-size: 0.95rem; font-weight: 900;
  text-transform: uppercase; margin-bottom: 6px;
  letter-spacing: 0.02em; color: var(--text-1);
}
.booking-card-body p {
  color: var(--text-2); font-size: 0.82rem;
  line-height: 1.55;
}

/* ═══ Cellule mobile cards (2 colonnes) ═══ */
.booking-cellule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.booking-cellule-option {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease;
  position: relative; overflow: hidden;
  text-align: left;
  list-style: none;
  box-shadow: 0 18px 40px var(--shadow);
}
.booking-cellule-option:hover {
  border-color: var(--accent);
}
.booking-cellule-option:hover .booking-card-photo img { filter: grayscale(0%); }
.booking-cellule-option.selected {
  border-color: var(--accent);
}
.booking-cellule-option.selected .booking-card-photo img { filter: grayscale(0%); }

/* Cellule cards : photo plus grande (2 colonnes = plus d'espace) */
.booking-cellule-option .booking-card-photo { height: 220px; }

.booking-cellule-tag {
  display: inline-block; margin-top: 12px;
  padding: 4px 10px; font-size: 0.65rem;
  font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: 6px;
  background: rgba(230,51,18,.08); color: var(--accent);
}

/* ═══ Form layout (2 colonnes) ═══ */
.booking-form-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px; align-items: start;
}

/* Colonne info */
.booking-form-info > p {
  color: var(--text-2); font-style: italic;
  margin-bottom: 24px; line-height: 1.65;
  font-size: 0.88rem;
}

.booking-info-bloc {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 14px;
  text-align: left;
}
.booking-info-bloc:last-child { margin-bottom: 0; }
.booking-info-bloc h4 {
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.booking-info-bloc h4 svg { display: inline-block; flex-shrink: 0; }
.booking-info-bloc h4 i { margin-right: 5px; }
.booking-info-bloc ul { list-style: none; margin: 0; padding: 0; }
.booking-info-bloc li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; color: var(--text-2); font-size: 0.82rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  list-style: none;
}
.booking-info-bloc li > span:not(.booking-info-num) { display: inline-flex; align-items: center; line-height: 1.4; }
.booking-info-bloc li:last-child { border-bottom: none; }
.booking-info-bloc li i { color: var(--accent); width: 14px; text-align: center; font-size: 11px; }
.booking-info-bloc li svg { display: inline-block; flex-shrink: 0; }
.booking-info-bloc li strong { color: var(--text-1); }

/* Colonne form */
.booking-form-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  text-align: left;
}

/* Form rows */
.booking-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 14px;
}
.booking-form-row-full { grid-template-columns: 1fr; }

.booking-form-group { display: flex; flex-direction: column; }
.booking-form-group label {
  font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-2); margin-bottom: 5px;
}
.booking-form-group input,
.booking-form-group select,
.booking-form-group textarea {
  background: #070707;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--text-1); font-size: 0.88rem;
  font-family: inherit; transition: border-color .2s; outline: none;
}
.booking-form-group input:focus,
.booking-form-group select:focus,
.booking-form-group textarea:focus { border-color: var(--accent); }
.booking-form-group input::placeholder,
.booking-form-group textarea::placeholder { color: rgba(255,255,255,.25); }
.booking-form-group select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L2 5h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.booking-form-group select option { background: var(--bg-2); color: var(--text-1); }
.booking-form-group textarea { resize: vertical; min-height: 90px; }

/* Submit */
.booking-submit-row {
  margin-top: 20px;
  display: flex; gap: 12px; align-items: center;
}
.booking-submit-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer;
  transition: filter .2s, transform .2s;
  font-size: 0.75rem;
}
.booking-submit-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.booking-submit-btn i { font-size: 13px; }
.booking-submit-note { font-size: 0.72rem; color: var(--text-2); font-style: italic; }

/* Success */
.booking-success {
  text-align: center; padding: 36px 20px;
  animation: bookingFadeIn .5s ease;
}
@keyframes bookingFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.booking-success-icon { font-size: 2.5rem; color: #22c55e; margin-bottom: 14px; }
.booking-success h3 { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; margin-bottom: 8px; }
.booking-success p { color: var(--text-2); font-style: italic; font-size: 0.85rem; }

/* ═══ Témoignages placeholder ═══ */
.booking-testi-empty {
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
}
.booking-testi-empty i { font-size: 1.8rem; color: rgba(255,255,255,.12); margin-bottom: 14px; display: block; }
.booking-testi-empty h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; }
.booking-testi-empty p { color: var(--text-2); font-size: 0.82rem; font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   CTA BANDEAU — page interventions
   Design : photo de fond, gradient overlay, cinématique
   Pas de boîte noire plate. Un vrai bandeau qui appelle.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   BREAKPOINT : Tablette (768 – 1023 px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .booking-hero { padding: 0 28px 56px; }
  .booking-page-content { padding: 48px 28px 64px; }
  .booking-types-grid { grid-template-columns: 1fr; gap: 14px; }
  .booking-cellule-grid { gap: 14px; }
  .booking-form-layout { grid-template-columns: 1fr; gap: 28px; }
}

/* ═══════════════════════════════════════════════════════════
   BREAKPOINT : Mobile (370 – 767 px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .booking-hero { min-height: 220px; padding: 0 20px 40px; }
  .booking-hero-content h1 { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .booking-hero-content p { font-size: 0.82rem; }
  .booking-page-content { padding: 36px 20px 56px; }
  .booking-step { margin-bottom: 40px; }

  .booking-types-grid { grid-template-columns: 1fr; gap: 12px; }
  .booking-type-card .booking-card-photo { height: 140px; }
  .booking-card-body { padding: 16px 18px 20px; }

  .booking-cellule-grid { grid-template-columns: 1fr; gap: 12px; }
  .booking-cellule-option .booking-card-photo { height: 160px; }

  .booking-form-layout { grid-template-columns: 1fr; gap: 24px; }
  .booking-form-card { padding: 22px; }
  .booking-form-row { grid-template-columns: 1fr; gap: 10px; }
  .booking-form-group input,
  .booking-form-group select,
  .booking-form-group textarea { font-size: 16px; }
  .booking-submit-row { flex-direction: column; align-items: stretch; }
  .booking-submit-btn { justify-content: center; width: 100%; }
  .booking-testi-empty { padding: 28px 20px; }

  .booking-breadcrumb { padding: 16px 20px 0; font-size: 0.72rem; }
}

/* ═══════════════════════════════════════════════════════════
   BREAKPOINT : Petit desktop (1024 – 1499 px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1499px) {
  .booking-hero { padding: 0 28px 56px; }
  .booking-page-content { padding: 56px 28px 72px; }
  .booking-types-grid { gap: 16px; }
  .booking-type-card .booking-card-photo { height: 160px; }
  .booking-cellule-grid { gap: 16px; }
  .booking-cellule-option .booking-card-photo { height: 200px; }
  .booking-form-layout { gap: 32px; }
  .booking-form-card { padding: 26px; }
}

/* ═══════════════════════════════════════════════════════════
   BREAKPOINT : Grand desktop (1500+)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1500px) {
  .booking-hero { min-height: 420px; padding: 0 48px 72px; }
  .booking-page-content { padding: 72px 48px 96px; }
  .booking-form-layout { gap: 48px; }
  .booking-form-card { padding: 32px; }
}

/* ═══════════════════════════════════════════════════════════
   Mode clair
   ═══════════════════════════════════════════════════════════ */
body.light-mode .booking-hero-photo img { filter: grayscale(18%) brightness(0.8); }
body.light-mode .booking-hero-overlay {
  background:
    linear-gradient(0deg, rgba(244,244,242,.94) 0%, rgba(244,244,242,.58) 38%, transparent 68%),
    linear-gradient(90deg, rgba(244,244,242,.78) 0%, rgba(244,244,242,.20) 52%, transparent 100%);
}
body.light-mode .booking-hero-content h1 { color: var(--text-1); text-shadow: none; }
body.light-mode .booking-hero-content p { color: var(--text-2); text-shadow: none; }

body.light-mode .booking-page-content { background: #f4f4f2; }
body.light-mode .booking-page-content::before {
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(230,51,18,.03) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(230,51,18,.02) 0%, transparent 50%);
}

/* Cartes : fond blanc en mode clair */
body.light-mode .booking-type-card,
body.light-mode .booking-cellule-option {
  background: #fff;
  border-color: rgba(0,0,0,.08);
}
body.light-mode .booking-card-photo::after {
  background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,.5) 60%, transparent 100%);
}
body.light-mode .booking-type-card:hover,
body.light-mode .booking-cellule-option:hover {
  border-color: var(--accent);
}
body.light-mode .booking-type-card.selected,
body.light-mode .booking-cellule-option.selected {
  border-color: var(--accent);
}
body.light-mode .booking-card-photo img { filter: grayscale(60%) contrast(1.05); }
body.light-mode .booking-type-card:hover .booking-card-photo img,
body.light-mode .booking-type-card.selected .booking-card-photo img,
body.light-mode .booking-cellule-option:hover .booking-card-photo img,
body.light-mode .booking-cellule-option.selected .booking-card-photo img {
  filter: grayscale(0%);
}

/* Info blocs + form */
body.light-mode .booking-info-bloc,
body.light-mode .booking-form-card,
body.light-mode .booking-testi-empty {
  background: #fff;
  border-color: rgba(0,0,0,.08);
}
body.light-mode .booking-form-group input,
body.light-mode .booking-form-group select,
body.light-mode .booking-form-group textarea {
  background: #f4f4f2;
  border-color: rgba(0,0,0,.1);
  color: var(--text-1);
}
body.light-mode .booking-form-group input::placeholder,
body.light-mode .booking-form-group textarea::placeholder { color: #999; }
body.light-mode .booking-form-group select option { background: #fff; }

/* Cartes réservation : état commun à toutes les cartes. */
.booking-type-card .booking-card-photo img,
.booking-cellule-option .booking-card-photo img {
  filter: grayscale(100%) contrast(1.1) !important;
  transform: scale(1);
  transition: filter .45s ease, transform .45s ease;
}
.booking-type-card:hover,
.booking-cellule-option:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px rgba(0,0,0,.28);
}
.booking-type-card:hover .booking-card-photo img,
.booking-cellule-option:hover .booking-card-photo img {
  filter: grayscale(0%) contrast(1) !important;
  transform: scale(1.05);
}
/* Une carte sélectionnée garde le même repos noir et blanc ; l’accent reste sur la bordure. */
.booking-type-card.selected .booking-card-photo img,
.booking-cellule-option.selected .booking-card-photo img {
  filter: grayscale(100%) contrast(1.1) !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE FINAL — page Réserver une intervention
   ═══════════════════════════════════════════════════════════ */
.booking-page-content {
  margin-top: 50px;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.booking-page-content .booking-inner,
.booking-page-content .booking-step,
.booking-page-content .booking-types-grid,
.booking-page-content .booking-cellule-grid,
.booking-page-content .booking-form-layout {
  min-width: 0;
}
.booking-page-content img,
.booking-page-content input,
.booking-page-content select,
.booking-page-content textarea {
  max-width: 100%;
}

/* 370–767 px : une colonne, champs et cartes respirent. */
@media (min-width: 370px) and (max-width: 767px) {
  .booking-page-content {
    margin-top: 50px;
    padding: 64px 20px 60px !important;
  }
  .booking-inner { width: 100%; }
  .booking-step { margin-bottom: 48px; }
  .booking-types-grid,
  .booking-cellule-grid,
  .booking-form-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .booking-type-card .booking-card-photo { height: 170px; }
  .booking-cellule-option .booking-card-photo { height: 190px; }
  .booking-card-body { padding: 18px 20px 22px; }
  .booking-section-title,
  .section-title { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .booking-form-card { padding: 20px; }
  .booking-form-row { grid-template-columns: 1fr !important; }
}

/* 768–1023 px : deux colonnes pour les cartes, formulaire en une colonne. */
@media (min-width: 768px) and (max-width: 1023px) {
  .booking-page-content {
    margin-top: 50px;
    padding: 72px 32px 76px !important;
  }
  .booking-types-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .booking-cellule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .booking-form-layout { grid-template-columns: 1fr; gap: 28px; }
  .booking-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-type-card .booking-card-photo { height: 190px; }
  .booking-cellule-option .booking-card-photo { height: 210px; }
}

/* 1024–1499 px : composition desktop équilibrée. */
@media (min-width: 1024px) and (max-width: 1499px) {
  .booking-page-content {
    margin-top: 50px;
    padding: 76px 40px 88px !important;
  }
  .booking-inner { max-width: 1120px; margin-left: auto; margin-right: auto; }
  .booking-types-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .booking-cellule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .booking-form-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; }
}

/* 1500–1950 px : largeur maximale constante, pas d’étirement excessif. */
@media (min-width: 1500px) {
  .booking-page-content {
    margin-top: 50px;
    padding: 84px 48px 100px !important;
  }
  .booking-inner { max-width: 1120px; margin-left: auto; margin-right: auto; }
  .booking-types-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .booking-cellule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-form-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; }
}

@media (max-width: 369px) {
  .booking-page-content { margin-top: 50px; padding: 52px 14px 48px !important; }
  .booking-types-grid,
  .booking-cellule-grid,
  .booking-form-layout { grid-template-columns: 1fr !important; }
}

/* Les cartes sélectionnées restent N&B au repos mais passent bien en couleur au hover. */
.booking-type-card.selected:hover .booking-card-photo img,
.booking-cellule-option.selected:hover .booking-card-photo img {
  filter: grayscale(0%) contrast(1) !important;
  transform: scale(1.05);
}

/* Nouveau parcours de réservation : introduction, calendrier et récapitulatif. */
.booking-intro {
  max-width: 850px;
  margin: 0 auto 64px;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-2);
  text-align: left;
}
.booking-intro h1 { margin-bottom: 14px; }
.booking-intro > p { color: var(--text-2); font-style: italic; line-height: 1.7; margin: 0 0 22px; }
.booking-intro-steps { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--text-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.booking-intro-steps b { color: var(--accent); margin-right: 5px; }

.booking-calendar-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); gap: 24px; align-items: stretch; }
.booking-calendar { background: var(--bg-2); border: 1px solid var(--border); border-radius: 20px; padding: 22px; }
.booking-calendar-head { display: grid; grid-template-columns: 40px 1fr 40px; gap: 12px; align-items: center; margin-bottom: 20px; text-align: center; }
.booking-calendar-head strong { color: var(--text-1); font-size: 1rem; text-transform: capitalize; }
.booking-calendar-head button { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text-1); font-size: 24px; line-height: 1; cursor: pointer; }
.booking-calendar-head button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.booking-calendar-head button:disabled { opacity: .3; cursor: not-allowed; }
.booking-calendar-weekdays,.booking-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.booking-calendar-weekdays { margin-bottom: 8px; color: var(--text-2); font-size: .68rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.booking-calendar-day,.booking-calendar-empty { min-height: 42px; }
.booking-calendar-day { border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text-1); cursor: pointer; font-weight: 700; }
.booking-calendar-day.is-free { background: #e5f5ec; color: #187d4c; border-color: transparent; }
.booking-calendar-day.is-busy { background: #f8dddd; color: #c40000; border-color: transparent; font-weight: 800; text-decoration: line-through; cursor: not-allowed; }
.booking-calendar-day:hover:not(:disabled),.booking-calendar-day.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.booking-calendar-day:disabled { opacity: .6; cursor: not-allowed; }
.booking-calendar-day.is-busy:disabled { opacity: 1; }
.booking-calendar-legend { display: flex; gap: 16px; margin: 14px 0 4px; font-size: 11px; color: var(--text-2); }
.booking-calendar-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.booking-calendar-legend .free { background: #bde7cf; }
.booking-calendar-legend .busy { background: #f0baba; }
.booking-date-selected { display: flex; flex-direction: column; justify-content: center; padding: 26px; border: 1px solid var(--border); border-radius: 20px; background: #000; }
.booking-date-selected strong { display: block; color: var(--text-1); font-size: 1.35rem; line-height: 1.2; margin: 8px 0 12px; }
.booking-date-selected p { color: var(--text-2); font-size: .85rem; line-height: 1.6; font-style: italic; }
.booking-request-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 30px; }
.booking-request-summary > div { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-2); }
.booking-request-summary span { display: block; color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.booking-request-summary strong { color: var(--text-1); font-size: .9rem; }

/* Etapes 1 et 2 : N&B au repos, couleur uniquement après sélection + coche verte. */
.booking-type-card.selected,
.booking-cellule-option.selected { border-color: var(--accent) !important; }
.booking-type-card.selected .booking-card-photo img,
.booking-cellule-option.selected .booking-card-photo img { filter: grayscale(0%) contrast(1) !important; }
.booking-type-card.selected::after,
.booking-cellule-option.selected::after { content: '✓'; position: absolute; right: 14px; bottom: 14px; z-index: 5; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #20b86b; font-size: 18px; font-weight: 900; box-shadow: 0 5px 15px rgba(0,0,0,.4); }
.booking-type-card:hover .booking-card-photo img,
.booking-cellule-option:hover .booking-card-photo img { filter: grayscale(100%) contrast(1.1) !important; }
.booking-type-card.selected:hover .booking-card-photo img,
.booking-cellule-option.selected:hover .booking-card-photo img { filter: grayscale(0%) contrast(1) !important; }

@media (max-width: 767px) {
  .booking-intro { margin-bottom: 42px; padding: 22px 20px; }
  .booking-intro-steps { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
  .booking-calendar-layout { grid-template-columns: 1fr; gap: 14px; }
  .booking-date-selected { min-height: 150px; }
  .booking-request-summary { grid-template-columns: 1fr; gap: 10px; }
  .booking-calendar-day,.booking-calendar-empty { min-height: 38px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .booking-calendar-layout { grid-template-columns: 1fr; }
  .booking-date-selected { min-height: 150px; }
}

/* Créneaux intégrés au calendrier. */
.booking-time-picker { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.booking-time-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.booking-time-option { padding: 10px 8px; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--text-2); font-size: .75rem; font-weight: 800; cursor: pointer; }
.booking-time-option:hover,
.booking-time-option.is-selected { border-color: var(--accent); background: var(--accent); color: #fff; }
@media (max-width: 560px) { .booking-time-options { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Consentement RGPD obligatoire. */
.booking-rgpd { display:flex; align-items:flex-start; gap:10px; margin:18px 0 4px; color:var(--text-2); font-size:.75rem; line-height:1.5; text-transform:none; letter-spacing:0; cursor:pointer; }
.booking-rgpd input { width:18px; height:18px; min-width:18px; margin:2px 0 0; accent-color:var(--accent); }
.booking-rgpd span { flex:1; }
.booking-rgpd a { color:var(--accent); text-decoration:underline; }

/* Carte introductive : largeur complète de la grille de l’Étape 1. */
.booking-intro {
  width: 100%;
  max-width: none;
  margin: 0 0 56px;
  padding: 34px 42px;
}
.booking-intro h1 {
  font-size: clamp(2rem, 3.2vw, 3rem);
  margin-bottom: 16px;
}
.booking-intro > p {
  max-width: 900px;
  font-size: 1rem;
  line-height: 1.75;
}
.booking-intro-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  font-size: .82rem;
}
@media (max-width: 767px) {
  .booking-intro { padding: 24px 20px; margin-bottom: 42px; }
  .booking-intro h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .booking-intro > p { font-size: .92rem; }
  .booking-intro-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.booking-preset-summary { padding: 20px 24px; background: var(--bg-3, #141414); border: 1px solid var(--border); border-radius: 16px; scroll-margin-top: 96px; }
.booking-preset-change { color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: underline; margin-left: 6px; }

.mm-btn-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: mm-spin 0.7s linear infinite; vertical-align: -2px; }
@keyframes mm-spin { to { transform: rotate(360deg); } }
.booking-info-num { position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-right: 4px; }
.booking-info-num-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; font-family: inherit; }

/* 10.13.159 — champ leurre antispam, hors écran et hors navigation clavier. */
.mm-form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}

/* 10.13.161 — information RGPD adaptée à une demande précontractuelle. */
.booking-privacy-note{margin:22px 0 26px;color:var(--text-2);font-size:12px;line-height:1.65}
.booking-privacy-note a{color:var(--accent);font-weight:800;text-decoration:underline;text-underline-offset:3px}