/*
 * Carte de réservation de la fiche atelier (parts/reservation.php).
 * Complète fiche.css : dates, nombre de personnes, coordonnées, réponse.
 */

/* La carte ouverte (coordonnées visibles) devient plus haute que l'écran :
   elle cesse alors de suivre le défilement, sinon son bas serait inatteignable. */
.union-reservation--ouverte { position: static; }

.union-resa-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.union-resa-form legend { padding: 0; }

.union-resa-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Dates ---------- */

.union-creneau {
  border-radius: 16px !important;   /* deux lignes : une pilule serait trop ronde */
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
}

.union-creneau__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.union-creneau__etat {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

.union-creneau__etat:empty { display: none; }

.union-creneau__ok {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--union-foret);
  opacity: 1;
}

.union-creneau__rares { color: var(--union-terracotta); }

.union-creneau--complet {
  cursor: not-allowed;
  opacity: 0.5;
}

.union-creneau--complet .union-creneau__jour { text-decoration: line-through; }

/* ---------- Personnes et total ---------- */

.union-resa-personnes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.union-resa-personnes select {
  min-width: 5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--filet, rgba(34, 28, 24, 0.14));
  border-radius: 999px;
  background: var(--union-blanc);
  font: inherit;
  cursor: pointer;
}

.union-resa-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet, rgba(34, 28, 24, 0.12));
}

.union-resa-total strong {
  font-family: var(--union-titre);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--union-terracotta);
}

.union-resa-detail {
  margin: 0.2rem 0 1.25rem;
  font-size: 0.78rem;
  opacity: 0.7;
}

/* ---------- Coordonnées ---------- */

.union-resa-etape--coordonnees {
  margin: 0.5rem 0 1.25rem !important;
  padding-top: 1.1rem !important;
  border-top: 1px solid var(--filet, rgba(34, 28, 24, 0.12)) !important;
  animation: union-resa-ouvrir 0.3s ease;
}

@keyframes union-resa-ouvrir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.union-resa-champ { margin: 0 0 0.8rem; }

.union-resa-champ label {
  display: block;
  font-size: 0.8125rem;
  margin: 0 0 0.3rem;
}

.union-resa-champ label span { opacity: 0.6; }

.union-resa-champ input,
.union-resa-champ textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--filet, rgba(34, 28, 24, 0.16));
  border-radius: 12px;
  background: var(--union-blanc);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--union-encre);
}

.union-resa-champ input:focus,
.union-resa-champ textarea:focus {
  outline: 2px solid var(--union-terracotta);
  outline-offset: 1px;
  border-color: transparent;
}

.union-resa-accord {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.78rem;
  line-height: 1.5;
  cursor: pointer;
}

.union-resa-accord input { margin: 0.2rem 0 0; accent-color: var(--union-terracotta); }
.union-resa-accord a { color: var(--union-terracotta); }

.union-resa-rassurer {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.65;
}

.union-resa-erreur {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: rgba(147, 73, 47, 0.1);
  color: #7A3B26;
  font-size: 0.85rem;
}

.union-resa-erreur[hidden] { display: none; }

.union-btn--terracotta[disabled] { opacity: 0.6; cursor: wait; }

.union-btn--contour {
  background: transparent;
  color: var(--union-terracotta);
  border: 1px solid var(--union-terracotta);
}

.union-btn--contour:hover,
.union-btn--contour:focus-visible {
  background: rgba(147, 73, 47, 0.08);
  color: var(--union-terracotta);
}

/* ---------- Réponse ---------- */

.union-resa-merci { outline: none; }
.union-resa-merci[hidden] { display: none; }

.union-resa-merci__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 0.9rem;
  border-radius: 50%;
  background: var(--union-foret);
  color: var(--union-creme);
}

.union-resa-merci__icone svg { width: 20px; height: 20px; }

.union-resa-merci__titre {
  font-family: var(--union-titre);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.union-resa-merci p { font-size: 0.9rem; line-height: 1.6; }
.union-resa-merci strong { font-weight: 400; color: var(--union-terracotta); }

.union-resa-merci__inviter {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet, rgba(34, 28, 24, 0.12));
}

.union-resa-merci__copie { color: var(--union-foret); font-size: 0.8rem !important; margin: 0.5rem 0 0; }

.union-resa-merci__icone .union-icone { color: var(--union-creme); }

/* ---------- Offrir cet atelier ---------- */

.union-resa-offrir {
  margin: 1.25rem 0 0;
  padding: 0.8rem 0.8rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 0.6rem;
  align-items: center;
  background: var(--union-sable, #EEEAE4);
  border-radius: 14px;
}

.union-resa-offrir__icone {
  display: grid;
  place-items: center;
  color: var(--union-terracotta);
}

.union-resa-offrir__texte { display: grid; gap: 0.1rem; line-height: 1.3; }
.union-resa-offrir__texte strong { font-weight: 400; font-size: 0.875rem; white-space: nowrap; }
.union-resa-offrir__texte span { font-size: 0.75rem; opacity: 0.7; }

.union-resa-offrir__bouton {
  display: inline-block;
  width: auto;
  padding: 0.45rem 0.75rem;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: #fff;
}

.union-resa-offrir__bouton:hover,
.union-resa-offrir__bouton:focus-visible { background: var(--union-terracotta); color: var(--union-creme); }

@media (max-width: 420px) {
  .union-resa-offrir { grid-template-columns: auto 1fr; gap: 0.6rem 0.7rem; }
  .union-resa-offrir__bouton { grid-column: 1 / -1; text-align: center; }
}