/* ---------- Réserver une table : la fenêtre de demande ---------- */
html.resa-ouverte { overflow: hidden; }

.resa {
  width: min(640px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px);
  padding: 0; border: 0; border-radius: 12px; background: var(--creme); color: var(--encre);
  box-shadow: 0 30px 80px -30px rgba(43, 29, 20, .55); overflow: auto; overscroll-behavior: contain;
}
.resa::backdrop { background: rgba(43, 29, 20, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.resa[open] { animation: resa-entree .45s var(--ease); }
@keyframes resa-entree { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.resa__form, .resa__merci { padding: clamp(24px, 4vw, 40px); }
.resa__tete { position: relative; padding-right: 44px; }
.resa__tete h2, .resa__merci h2 { margin: 6px 0 10px; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.05; }
.resa__tete p { margin: 0; font-size: 15.5px; color: var(--encre-doux); max-width: 48ch; }
.resa__fermer {
  position: absolute; top: -6px; right: -6px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--encre); font-size: 30px; line-height: 1; cursor: pointer;
}
.resa__fermer:hover { background: rgba(43, 29, 20, .07); }

.resa__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 26px; }
.resa .champ select {
  font: 17px/1.5 var(--font-body); color: var(--encre); background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(43, 29, 20, .25); padding: 8px 0; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.resa .champ select:focus { outline: none; border-bottom-color: var(--rouge); }
.resa__service { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.resa__service legend { padding: 0; margin-bottom: 8px; font: 600 12.5px/1.6 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-doux); }
.resa__sante { grid-column: span 2; margin: -8px 0 0; font-size: 13px; color: var(--encre-doux); }
@media (max-width: 640px) { .resa__sante { grid-column: auto; } }
.resa__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* disponibilité du service choisi */
.resa__dispo { margin: -4px 0 0; padding: 12px 14px; border-radius: 8px; font-size: 14.5px; line-height: 1.45; }
.resa__dispo.is-complet { background: #f7e9c9; color: #6b4a0c; }
.resa__dispo.is-ferme { background: var(--creme-2); color: var(--encre); }
/* menu de groupe */
.resa__groupe-menu { padding: 14px 16px; border-radius: 8px; border: 1px solid rgba(43, 29, 20, .18); background: rgba(255, 253, 248, .6); }
.resa__menu-titre { margin: 0 0 4px; font: 600 12.5px/1.6 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-doux); }
.resa__menu-texte { margin: 0 0 10px; font-size: 15px; white-space: pre-line; }
/* cases à cocher */
.resa__case { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.resa__case input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--encre); }
.resa__allergies { margin-top: -6px; }
.resa__groupe { margin: 22px 0 0; font-size: 14.5px; color: var(--encre-doux); }
.resa__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.resa__statut { margin: 0; font-size: 14.5px; color: var(--encre-doux); }
.resa__statut.is-erreur { color: var(--rouge); }
.resa__rgpd { margin: 16px 0 0; font-size: 12.5px; color: var(--encre-doux); }
.resa__merci p { margin: 0 0 24px; max-width: 46ch; color: var(--encre-doux); }
.resa__merci strong { color: var(--encre); font-weight: 600; }

/* téléphone : un panneau qui monte du bas */
@media (max-width: 640px) {
  .resa { width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 94vh; max-height: 94svh; }
  .resa[open] { animation: resa-panneau .4s var(--ease); }
  @keyframes resa-panneau { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .resa__grille { grid-template-columns: 1fr; }
  .resa .champ--large { grid-column: auto; }
}