/* ==========================================================================
   RÉSERVATION — calendrier en ligne (bas de page, site-wide)
   DA « invitation privée » (Aman / Aesop / galerie d'art) : palette travertin
   scellée en variables locales --bk-*, sans impact sur le reste du site.
   Markup et structure strictement inchangés.
   ========================================================================== */

.booking {
  --bk-bg:          #F6F5F2;   /* travertin clair */
  --bk-bg2:         #F2F0EB;   /* pierre calcaire */
  --bk-card:        #FFFFFF;
  --bk-ink:         #1F1F1C;
  --bk-soft:        #6D6A64;   /* gris pierre */
  --bk-line:        #E5E0D7;
  --bk-bronze:      var(--c-gold);
  --bk-bronze-dark: var(--c-gold-dark);

  background: var(--bk-bg);
  padding-block: clamp(6rem, 4.5rem + 5vw, 10rem);   /* respiration magazine */
  border-top: 1px solid var(--bk-line);
}

/* --- Tête de section : badge, titre, texte — tout respire ----------- */
.booking__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(3.25rem, 2.5rem + 3vw, 5rem);
}
.booking__head .eyebrow { color: var(--bk-bronze); letter-spacing: .3em; }
.booking__head .eyebrow::before { background: var(--bk-bronze); opacity: .6; }
.booking__head h2 {
  margin: 1.5rem 0 1.75rem;
  color: var(--bk-ink);
  font-weight: 300;                 /* serif très légère, éditoriale */
  letter-spacing: -0.015em;
}
.booking__head .lead {
  margin-inline: auto;
  max-width: 680px;
  color: var(--bk-soft);
  font-weight: 400;
  line-height: 1.9;                 /* interligne très généreux */
}
/* Séparateur pierre, très fin, centré — la ponctuation de la section */
.booking__head::after {
  content: "";
  display: block;
  width: 56px; height: 1px;
  margin: 3rem auto 0;
  background: var(--bk-line);
}

/* --- Cadre du calendrier intégré (Calendly / autre) ------------------ */
.booking__frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  min-height: 660px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bk-card);
  border: 1px solid var(--bk-line);
  box-shadow: 0 30px 90px rgba(31, 31, 28, 0.05);   /* diffuse, presque invisible */
}
.booking__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 600px) { .booking__frame { min-height: 720px; } }

/* --- Repli (aucun agenda configuré) : l'invitation privée ------------ */
.booking__fallback {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  background: var(--bk-card);
  border: 1px solid var(--bk-line);
  border-radius: 18px;
  padding: clamp(3rem, 2.25rem + 2.5vw, 4.5rem) clamp(1.75rem, 1rem + 3vw, 3.75rem);
  box-shadow: 0 30px 90px rgba(31, 31, 28, 0.05);
}
.booking__fallback p {
  color: var(--bk-soft);
  line-height: 1.9;
  margin-inline: auto;
}

.booking__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

/* --- Boutons : la signature visuelle ---------------------------------
   58 px de haut, capsule 999 px, 14 px semi-bold espacé, 400 ms.
   Aplat bronze mat strict : ni dégradé, ni glossy, ni ombre décorative. */
.booking .btn {
  height: 58px;
  padding: 0 2.6rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  box-shadow: none;
  transition: background .4s var(--ease-out),
              color .4s var(--ease-out),
              border-color .4s var(--ease-out),
              transform .4s var(--ease-out),
              box-shadow .4s var(--ease-out);
}
.booking .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(192, 102, 72, 0.16);
}
.booking .btn:active { transform: translateY(0); }

/* Principal : bronze mat, aplat pur */
.booking .btn--gold {
  background: var(--bk-bronze);
  border-color: var(--bk-bronze);
  color: #fff;
}
.booking .btn--gold:hover {
  background: var(--bk-bronze-dark);
  border-color: var(--bk-bronze-dark);
}

/* Secondaire : transparent, contour très fin, hover bronze plein */
.booking .btn--ghost {
  background: transparent;
  border: 1px solid var(--bk-line);
  color: var(--bk-ink);
}
.booking .btn--ghost:hover {
  background: var(--bk-bronze);
  border-color: var(--bk-bronze);
  color: #fff;
}

/* --- Note admin (visible connecté uniquement) ------------------------ */
.booking__admin {
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--bk-line);
  color: var(--bk-soft);
}