/* Widget de réservation — inspiré de la modale fournie. */
:root { --accent: #f15a29; }

* { box-sizing: border-box; }

/* L'attribut HTML `hidden` doit toujours l'emporter, même sur les éléments
   ayant un display explicite (.resa-form en flex, .cal-grid en grid, etc.). */
[hidden] { display: none !important; }

.resa-body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #2b2b2b;
  background: transparent;
}

.resa-wrap {
  max-width: 1040px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Étapes */
.resa-steps {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
}
.resa-steps .step { color: #b7b7b7; display: inline-flex; align-items: center; gap: 8px; }
.resa-steps .step.active { color: #2b2b2b; }
.resa-steps .dot { width: 9px; height: 9px; border-radius: 50%; background: #d8d8d8; display: inline-block; }
.resa-steps .step.active .dot { background: var(--accent); }

/* Colonnes */
.resa-cols { display: flex; min-height: 540px; }
.resa-left { flex: 1; padding: 30px 34px; border-right: 1px solid #f0f0f0; min-width: 0; }
.resa-right { flex: 1; padding: 22px 26px; position: relative; min-width: 0; }

.resa-title { font-size: 24px; line-height: 1.25; margin: 4px 0 14px; }
.resa-desc { color: #555; font-size: 15px; line-height: 1.6; margin-bottom: 22px; max-height: 220px; overflow: auto; }

/* Formulaire */
.resa-form { display: flex; flex-direction: column; gap: 12px; }
.resa-form.locked { opacity: .65; }
.field {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #d9d9d9;
  border-radius: 9px;
  font-size: 15px;
  outline: none;
}
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(241,90,41,.12); }

/* Champ téléphone : un seul contrôle unifié (indicatif + numéro). */
.field-phone {
  display: flex;
  align-items: stretch;
  border: 1px solid #d9d9d9;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.field-phone:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(241,90,41,.12); }
.field-phone select {
  border: 0;
  border-right: 1px solid #ececec;
  background: #fafafa;
  padding: 0 10px;
  font-size: 14px;
  color: #444;
  outline: none;
  max-width: 120px;
  cursor: pointer;
}
.field-phone input {
  flex: 1;
  border: 0;
  padding: 13px 14px;
  font-size: 15px;
  outline: none;
  min-width: 0;
}
.field-phone input:focus { box-shadow: none; }

.resa-gdpr { display: flex; gap: 9px; font-size: 12.5px; color: #777; line-height: 1.5; }
.resa-gdpr input { margin-top: 3px; }

.resa-btn {
  margin-top: 6px;
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 15px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.resa-btn:hover { filter: brightness(.96); }
.resa-btn:disabled { opacity: .6; cursor: default; }

.resa-error {
  background: #fdecec; border: 1px solid #f3b4b4; color: #b3261e;
  border-radius: 8px; padding: 10px 12px; font-size: 14px;
}

/* Confirmation */
.resa-confirmed { text-align: center; padding: 30px 10px; }
.resa-confirmed .check {
  width: 54px; height: 54px; line-height: 54px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 28px; margin: 0 auto 14px;
}
.resa-confirmed h2 { margin: 0 0 8px; font-size: 22px; }
.resa-confirmed p { color: #555; }

/* Boutons « Ajouter à l'agenda » — discrets et compacts */
.cal-add-label { font-size: 12.5px; color: #9a9a9a; margin: 26px 0 10px; }
.resa-cal-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cal-add-btn {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
  background: #fff; color: #444;
  border: 1px solid #e3e3e3; border-radius: 8px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 500;
  transition: border-color .15s, color .15s, background .15s;
}
.cal-add-btn::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zM5 9h14v10H5V9z'/%3E%3C/svg%3E");
          mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zM5 9h14v10H5V9z'/%3E%3C/svg%3E");
}
.cal-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Calendrier */
.resa-cal { user-select: none; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cal-month { color: #8a8a8a; font-size: 16px; }
.cal-nav button {
  border: 0; background: #f4f4f4; width: 30px; height: 30px; border-radius: 7px;
  cursor: pointer; font-size: 16px; color: #555; margin-left: 6px;
}
.cal-nav button:disabled { opacity: .35; cursor: default; }

.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekdays { color: #b3b3b3; font-size: 11px; letter-spacing: .04em; margin-bottom: 8px; }
.cal-weekdays span { text-align: center; padding: 6px 0; }

.cal-grid { gap: 6px; }
.cal-day {
  aspect-ratio: 1 / 1;
  border: 0; background: transparent; border-radius: 9px;
  font-size: 15px; color: #c9c9c9; cursor: default;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.cal-day.blank { visibility: hidden; }
.cal-day.past, .cal-day.empty { color: #d2d2d2; }
.cal-day.available {
  color: #2b2b2b; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
}
.cal-day.available::after {
  content: ""; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.cal-day.available:hover { background: color-mix(in srgb, var(--accent) 22%, #fff); }

.cal-empty { text-align: center; color: #999; font-size: 14px; margin: 18px 0 6px; }

/* Créneaux */
.cal-slots .slots-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cal-slots .slots-head button { border: 0; background: #f4f4f4; padding: 7px 12px; border-radius: 7px; cursor: pointer; }
.cal-slots #slots-date { color: #555; text-transform: capitalize; }
.slots-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; max-height: 360px; overflow: auto; }
.slot-btn {
  border: 1px solid var(--accent); color: var(--accent); background: #fff;
  padding: 11px 0; border-radius: 8px; font-size: 15px; cursor: pointer; font-weight: 600;
}
.slot-btn:hover { background: var(--accent); color: #fff; }
.slots-empty { grid-column: 1 / -1; color: #888; text-align: center; }

/* Le calendrier reste visible (estompé) tant que le formulaire n'est pas validé. */
.resa-right.locked .resa-cal { opacity: .4; filter: grayscale(.15); transition: opacity .25s; }

/* Voile bloquant : léger, pour laisser deviner le calendrier derrière. */
.resa-overlay {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.resa-overlay.hidden { display: none; }
.overlay-msg {
  background: #fff; border: 1px solid #efefef; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  padding: 18px 22px; max-width: 300px; text-align: center;
  color: #444; font-size: 15px; line-height: 1.5;
}

/* Fallback si color-mix non supporté */
@supports not (background: color-mix(in srgb, red, blue)) {
  .cal-day.available { background: #fdeee8; }
  .cal-day.available:hover { background: #fbdccf; }
}

/* Responsive : en mobile, le formulaire est une CARTE superposée par-dessus le
   calendrier (qui reste visible, estompé, en fond). Le calendrier passe en
   position absolue (couche de fond) ; le formulaire reste dans le flux pour que
   l'iframe d'embed se dimensionne dessus sans rien couper. */
@media (max-width: 820px) {
  .resa-cols { display: flex; position: relative; min-height: 540px; align-items: flex-start; }

  /* Calendrier : couche de fond (un peu plus visible qu'en desktop) */
  .resa-right {
    position: absolute; inset: 0; z-index: 0;
    width: auto; padding: 22px 20px;
    pointer-events: none;            /* non cliquable tant que le formulaire n'est pas validé */
  }
  .resa-right.locked .resa-cal { opacity: .6; }
  .resa-overlay { display: none; }   /* le formulaire fait office de voile en mobile */

  /* Formulaire : carte flottante (compacte) au-dessus du calendrier */
  .resa-left {
    position: relative; z-index: 1;
    flex: 1 1 auto;
    margin: 22px 26px;               /* plus de marge -> on voit plus le calendrier autour */
    background: #fff;
    border-right: 0;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,.22);
    padding: 20px 16px;
  }
  .resa-desc { max-height: 120px; }  /* description plus courte -> carte plus petite */
  .resa-title { font-size: 20px; margin-bottom: 10px; }
  .resa-form { gap: 9px; }

  /* Étape 2 : formulaire validé -> le calendrier reprend le flux et devient interactif */
  #resa.unlocked .resa-cols { min-height: 0; }
  #resa.unlocked .resa-left { display: none; }
  #resa.unlocked .resa-right { position: static; z-index: auto; pointer-events: auto; }

  /* Étape 3 : confirmation -> la zone gauche revient en flux normal, pleine largeur */
  #resa.confirmed .resa-left {
    display: block; position: static; margin: 0;
    border-radius: 0; box-shadow: none;
  }

  .resa-steps { gap: 16px; font-size: 13.5px; padding: 14px; flex-wrap: wrap; }
  .slots-list { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

@media (max-width: 380px) {
  .field-phone select { max-width: 96px; }
  .slots-list { grid-template-columns: repeat(3, 1fr); }
}