/* ==========================================================================
   Réserver dans La Suite — la vidéo de la maison en fond, deux colonnes :
   le discours à gauche, l'agenda Calendly à droite.
   La page emprunte sa composition à l'écran 1 de La Suite (vidéo plein cadre,
   voile, texte blanc) mais ne charge pas salons.css : elle n'a besoin ni des
   tarifs, ni de la mosaïque, ni du carnet d'adresses. Les quelques règles
   communes — vidéo de fond, dégradé, typographie didone — sont donc reprises
   ici, à leur juste taille.
   ========================================================================== */

.reservation {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--header-h) - var(--retour-h));
  padding: var(--u12) var(--u6);
  background: var(--black);
  overflow: hidden;
}

@supports not (height: 100svh) {
  .reservation { min-height: calc(100vh - var(--header-h) - var(--retour-h)); }
}

.reservation__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--black);
}

.reservation::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.55) 55%, rgb(0 0 0 / 0.45)),
    linear-gradient(to bottom, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.15) 40%, rgb(0 0 0 / 0.45));
}

/* --------------------------------------------------------------------------
   Les deux colonnes. L'agenda a une largeur de confort plutôt qu'une fraction :
   en dessous de ~460px, Calendly replie son calendrier sous les créneaux et la
   colonne devient un long ruban.
   -------------------------------------------------------------------------- */
.reservation__inner {
  position: relative;
  z-index: 1;                     /* au-dessus du voile ::after */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: clamp(var(--u6), 5vw, var(--u12));
  align-items: center;
  width: 100%;
  max-width: var(--container);
}

/* --- Colonne de gauche : le discours ------------------------------------- */

.reservation__eyebrow {
  margin: 0 0 var(--u3);
  font-size: var(--surtitre-taille);
  font-weight: var(--surtitre-graisse);
  letter-spacing: var(--surtitre-lettrage);
  text-transform: uppercase;
  color: var(--white);
}

.reservation__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

.reservation__title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  margin-top: var(--u4);
  background: var(--red);
}

.reservation__line {
  display: block;
  text-wrap: balance;
}

.reservation__infos {
  display: grid;
  gap: var(--u3);
  margin: var(--u6) 0 0;
  color: var(--white);
}

.reservation__info dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.reservation__info dd {
  margin: var(--u1) 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--white);
}

.reservation__info a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: var(--cursor-pointer);
  transition: color var(--ease);
}

.reservation__info a:hover,
.reservation__info a:focus-visible {
  color: var(--beige);
}

/* --- Colonne de droite : l'agenda ---------------------------------------- */

.reservation__agenda {
  padding: var(--u2);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-media);
  background: var(--black-elegant);
}

.reservation__agenda .calendly-inline-widget {
  border-radius: calc(var(--radius-media) - 8px);
  overflow: hidden;
}

.reservation__secours {
  margin: var(--u2) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--muted);
}

.reservation__secours a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: var(--cursor-pointer);
}

.reservation__secours a:hover,
.reservation__secours a:focus-visible {
  color: var(--red);
}

/* --------------------------------------------------------------------------
   Sous 1024px, les deux colonnes ne tiennent plus côte à côte sans étrangler
   l'agenda : le discours passe au-dessus, le calendrier prend toute la largeur.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .reservation__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--u8);
    max-width: 620px;
  }
  .reservation::after {
    background: linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.72),
      rgb(0 0 0 / 0.5) 40%,
      rgb(0 0 0 / 0.68)
    );
  }
}

@media (max-width: 767px) {
  .reservation {
    padding: var(--u8) var(--u3);
  }
  .reservation__agenda {
    padding: var(--u1);
    overflow-x: auto;
  }
}