/* Réservation — complète site.css avec les éléments propres à la page de réservation.
   Mêmes couleurs que le site : pétrole pour la structure, ambre pour l'action, sable pour les fonds clairs. */
:root { --creme: #F6EFE2; --occupe: #E4DCCB; --occupe-txt: #9A9284; --erreur: #A3341F; --erreur-fond: #F8E4DE; }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

.dispo .wrap { padding-top: 72px; padding-bottom: 80px; }
.dispo-info .tarif { font-family: var(--serif); font-size: 22px; color: var(--blanc); margin: 14px 0 4px; }
.dispo-info .saisons { font-size: 15px; color: #9FC3C0; }
.dispo-info .desc { margin-top: 14px; }

/* Calendrier */
.resa-cal { flex: 2 1 460px; min-width: 0; background: var(--creme); color: var(--encre); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal-nav span { font-size: 15px; color: var(--doux); text-align: center; }
.cal-nav span.alerte-cal { color: var(--erreur); font-weight: 700; }
.cal-nav button { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--blanc); color: var(--encre); font-size: 20px; cursor: pointer; }
.cal-nav button:disabled { opacity: .35; cursor: default; }
.mois-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 680px) { .mois-wrap { grid-template-columns: minmax(0, 1fr); } .mois-wrap .mois:nth-child(2) { display: none; } }
.mois h4 { font-family: var(--serif); font-weight: 500; font-size: 20px; text-align: center; margin: 0 0 10px; text-transform: capitalize; }
.jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.nom-jour { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); text-align: center; line-height: 2; }
.jour { aspect-ratio: 1; max-width: 100%; border: 0; border-radius: 10px; background: transparent; color: var(--encre); font: 500 16px/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; position: relative; }
.jour:hover:not(:disabled) { background: #EED6BC; }
.jour:disabled { cursor: default; }
.jour.passe { color: #BDB5A6; }
.jour.haute::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ambre); }
.jour.occupe { background: var(--occupe); color: var(--occupe-txt); text-decoration: line-through; }
.jour.occupe::after { display: none; }
.jour.depart-possible { background: linear-gradient(135deg, transparent 50%, var(--occupe) 50%); }
.jour.dans { background: #EED6BC; border-radius: 0; }
.jour.debut, .jour.fin { background: var(--ambre); color: var(--blanc); }
.jour.debut::after, .jour.fin::after { background: var(--blanc); }
.legende { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--doux); }
.legende i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
.legende i.point { width: 7px; height: 7px; border-radius: 50%; background: var(--ambre); vertical-align: 1px; }

/* Coordonnées + récapitulatif */
.resa-suite .wrap { padding-top: 80px; padding-bottom: 90px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
@media (max-width: 960px) { .resa-suite .wrap { grid-template-columns: minmax(0, 1fr); } }
.resa-suite .titre { margin-bottom: 28px; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.champs .large { grid-column: 1 / -1; }
.champ { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 16px; }
.champ small { font-weight: 400; color: var(--doux); font-size: 14px; }
.champ input, .champ textarea { font: 17px/1.4 var(--sans); color: var(--encre); background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; padding: 13px 16px; width: 100%; min-width: 0; }
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--petrole); box-shadow: 0 0 0 3px rgba(18,90,100,.15); }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--texte); }
.case input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ambre); flex: 0 0 auto; }
.pot { position: absolute; left: -9999px; }

.recap { background: var(--blanc); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 112px; box-shadow: 0 18px 40px rgba(8,40,45,.08); }
.recap h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; }
.recap-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.recap-dates div { background: var(--fond); border-radius: 14px; padding: 10px 14px; }
.recap-dates small { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.recap dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; margin: 0; font-size: 16px; }
.recap dt { color: var(--doux); }
.recap dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.recap .total { border-top: 1px solid var(--ligne); padding-top: 12px; font-weight: 700; color: var(--encre); font-size: 18px; }
.recap .note { font-size: 14px; color: var(--doux); margin: 0; }
.recap .btn { width: 100%; border: 0; cursor: pointer; font-family: var(--sans); }
@media (max-width: 960px) { .recap { position: static; } }

.message { border-radius: 18px; padding: 18px 22px; font-size: 17px; }
.message.ok { background: #E1EEEC; color: var(--petrole-fonce); }
.message.err { background: var(--erreur-fond); color: var(--erreur); }
.message ul { margin: 6px 0 0; padding-left: 20px; }
.dispo .message { margin-bottom: 24px; }

/* Conditions */
.resa-conditions { background: var(--sable); }
.resa-conditions .wrap { padding-top: 90px; padding-bottom: 90px; }
.resa-conditions .titre { margin-bottom: 28px; }
.texte-cond { max-width: 760px; color: var(--texte); }
.texte-cond h4 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--petrole); margin: 28px 0 8px; }
.texte-cond p { margin: 0 0 10px; }
.texte-cond ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* Page d'offre */
.offre .wrap { padding-top: 64px; padding-bottom: 90px; max-width: 820px; display: flex; flex-direction: column; gap: 24px; }
.offre .mot { white-space: pre-line; background: var(--blanc); border-left: 4px solid var(--ambre); border-radius: 0 18px 18px 0; padding: 20px 24px; color: var(--texte); }
.offre .recap { position: static; }
.offre .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.offre .actions .btn { width: auto; }
.btn-discret { background: transparent; color: var(--doux); border: 1px solid var(--ligne) !important; font-weight: 500; }
.btn-discret:hover { color: var(--encre); }
.paiement { background: var(--fond); border-radius: 14px; padding: 14px 18px; font-size: 16px; }
.paiement .num { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.paiement-en-ligne { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--ligne); border-radius: 14px; padding: 16px 18px; }
.option-paiement { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; border-top: 1px solid var(--ligne); padding-top: 12px; }
.option-paiement .montant { display: block; font-family: var(--serif); font-size: 24px; font-variant-numeric: tabular-nums; }
.option-paiement .btn { width: auto; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Sélecteur de langue (liens, même aspect que les boutons du site) */
.langues a{font-size:13px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:6px 10px;min-height:36px;min-width:40px;color:#BFD3D2;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.langues a:hover{color:var(--blanc)}
.langues a[aria-current="true"]{background:#F6EFE2;color:var(--petrole-fonce)}
.menu .langues a:not(.btn)::after{display:none}