/* ==========================================================
   RÉSERVATION — Le Saladin (partagé fr/ en/ de/)
   ========================================================== */
:root{--or:#C5A059;--fond:#FFFDF8;--texte:#2b2b2b;--doux:#8a7a5c;--vert:#1E8E5A;}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:'Poppins',sans-serif;background:var(--fond);color:var(--texte);}
.resa-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid rgba(197,160,89,.35);
}
.resa-header .nom{font-size:1.4rem;font-weight:300;letter-spacing:.08em;text-decoration:none;color:var(--texte);}
.resa-header .retour{font-size:.8rem;color:var(--doux);text-decoration:none;}
.resa-wrap{max-width:640px;margin:0 auto;padding:26px 16px 50px;}
h1{font-size:1.6rem;font-weight:600;text-align:center;margin:0 0 6px;}
.sous-titre{
  text-align:center;color:var(--or);font-size:1.25rem;font-weight:600;
  line-height:1.35;margin:10px 0 6px;
}
.note-resa{text-align:center;color:var(--doux);font-size:.9rem;line-height:1.5;margin:0 0 26px;}
.champ{margin-bottom:16px;}
.champ label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--doux);margin-bottom:6px;}
.champ input,.champ select,.champ textarea{
  width:100%;padding:12px 14px;border:1px solid rgba(197,160,89,.5);border-radius:10px;
  background:#fff;font-family:inherit;font-size:1rem;color:var(--texte);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--or);}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){.duo{grid-template-columns:1fr;}}
.btn-envoyer{
  display:block;width:100%;padding:16px;border:0;border-radius:40px;
  background:var(--or);color:#fff;font-family:inherit;font-size:1.05rem;
  font-weight:600;letter-spacing:.04em;cursor:pointer;
  box-shadow:0 4px 14px rgba(197,160,89,.35);
}
.btn-tel{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:1.25rem;
  width:100%;padding:15px;margin-top:12px;border:2px solid var(--vert);
  border-radius:40px;background:var(--vert);color:#fff;font-weight:600;text-decoration:none;text-align:center;
}
.note{font-size:.85rem;color:var(--doux);text-align:center;margin-top:18px;line-height:1.5;}
.btn-tel .note-tel{font-size:.875rem;font-weight:400;line-height:1.2;}
.btn-tel .note-tel{font-size:.875rem;font-weight:400;line-height:1.2;}
.adresse{text-align:center;font-size:.9rem;color:#555;margin-top:28px;line-height:1.6;}
.pied{text-align:center;font-size:.75rem;color:#b6b0a4;padding:16px 0;}

/* ==========================================================
   AJOUTS POUR LE SYSTÈME DE RÉCAPITULATIF (Review Order)
   ========================================================== */

/* Classe utilitaire pour masquer les éléments */
.hidden {
  display: none !important;
}

/* Carte de récapitulatif */
.review-card {
  background: rgba(197, 160, 89, 0.06);
  border: 1px dashed var(--or);
  border-radius: 12px;
  padding: 28px 24px;
  animation: fadeIn 0.4s ease-out;
}

.review-title {
  text-align: center;
  color: var(--texte);
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 8px;
}

.review-details {
  margin: 24px 0;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(197, 160, 89, 0.2);
}

.review-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(197, 160, 89, 0.15);
  font-size: 0.95rem;
}

.review-row:last-child {
  border-bottom: none;
}

.review-label {
  font-weight: 600;
  color: var(--doux);
  flex: 1;
}

.review-value {
  color: var(--texte);
  text-align: right;
  flex: 1.5;
  font-weight: 500;
}

/* Groupe de boutons en bas du récapitulatif */
.btn-group {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn-group .btn-envoyer {
  margin: 0;
}

.btn-secondary {
  background-color: var(--doux) !important;
  box-shadow: 0 4px 14px rgba(138, 122, 92, 0.35) !important;
}

.btn-secondary:hover {
  background-color: #6d5f46 !important;
}

/* Petite animation d'apparition douce */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ajustement mobile pour les boutons groupés */
@media (max-width: 520px) {
  .btn-group {
    flex-direction: column-reverse; /* Met "Confirmer" en premier visuellement sur mobile */
  }
}