/* O'Vestiaire — Réserver (cadre de réservation Zenchef) */

.reserver-head { padding-bottom: clamp(36px, 4vw, 56px); }
.reserver-head .lead { margin: 26px 0 0; max-width: 52ch; font-size: 18px; color: rgba(247, 243, 234, .92); }
#reservation { padding-top: clamp(40px, 5vw, 72px); }

.resa-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }

/* ---------- Le cadre ---------- */
.resa {
  position: relative; display: grid; gap: 34px; padding: clamp(26px, 3.4vw, 46px); isolation: isolate;
  border-radius: var(--alv-radius-lg); border: 1px solid var(--alv-line); background: var(--alv-surface); box-shadow: var(--alv-shadow-2);
}
.resa::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url("../img/marque/trame-courbes.jpg") right top / cover; mix-blend-mode: screen; opacity: .22; pointer-events: none; }
.resa__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--alv-hair); }
.resa__bar .label { margin: 0; }
.resa__via { font: 700 13px/1 var(--alv-font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--alv-ink-soft); }
.resa__step { display: grid; gap: 16px; }
.resa__q { display: flex; align-items: center; gap: 14px; margin: 0; font: 400 clamp(24px, 2.2vw, 30px)/1.05 var(--alv-font-display); text-transform: uppercase; letter-spacing: -.02em; color: var(--alv-cream); }

.stepper { display: inline-flex; align-items: center; gap: 18px; }
.stepper button { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; border: 1px solid var(--alv-line); background: rgba(10, 9, 4, .5); transition: border-color var(--alv-dur-s), box-shadow var(--alv-dur-s), transform var(--alv-dur-xs) var(--alv-ease-out); }
.stepper button svg { width: 18px; height: 18px; }
.stepper button:active { transform: scale(.94); }
.stepper button[aria-disabled="true"] { opacity: .35; cursor: default; } /* borne atteinte : le focus reste, l'annonce vocale le dit */
.stepper button[aria-disabled="true"]:active { transform: none; }
@media (hover: hover) { .stepper button[aria-disabled="false"]:hover { border-color: var(--alv-gold-solid); box-shadow: var(--alv-glow-gold); } }
.stepper output { min-width: 2ch; text-align: center; font: 400 clamp(46px, 5vw, 64px)/1 var(--alv-font-display); letter-spacing: -.04em; background: var(--alv-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stepper__unit { font: 700 14px/1 var(--alv-font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--alv-ink-soft); }
.resa__warn:not(.is-on) { visibility: hidden; } /* place réservée : le bouton ne bouge pas quand l'avertissement paraît */
.resa__warn { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--alv-line); font-size: 16px; color: var(--alv-cream); }

.quick { display: flex; flex-wrap: wrap; gap: 10px; }
.quick button { height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--alv-line); font: 700 13px/1 var(--alv-font-label); letter-spacing: .13em; text-transform: uppercase; color: var(--alv-ink-soft); transition: color var(--alv-dur-s), background-color var(--alv-dur-s), border-color var(--alv-dur-s); }
@media (hover: hover) { .quick button:hover { color: var(--alv-ink); border-color: var(--alv-cream); } }
.quick button.is-on { color: #1A1206; background: var(--alv-gold-fill); border-color: transparent; }
.dayfield input { width: 100%; max-width: 340px; height: 54px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--alv-line); background: rgba(10, 9, 4, .5); color: var(--alv-ink); font: 600 17px/1 var(--alv-font-body); color-scheme: dark; transition: border-color var(--alv-dur-s), box-shadow var(--alv-dur-s); }
.dayfield input:focus { outline: 0; border-color: var(--alv-gold-solid); box-shadow: var(--alv-glow-gold); }
.resa__hours { margin: 0; font-size: 15px; line-height: 1.5; color: var(--alv-ink-soft); }
.resa__hours b { color: var(--alv-cream); font-weight: 600; }
.resa__hours.is-closed { color: var(--alv-cream); }

.btn--lg { --h: 62px; width: 100%; font-size: 15px; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.resa__fine { margin: -14px 0 0; font-size: 14px; line-height: 1.5; color: var(--alv-ink-soft); }
.resa__phone { margin: -14px 0 0; font-size: 15px; color: var(--alv-ink-soft); }
.resa__phone a { color: var(--alv-ink); font-weight: 600; }
@media (hover: hover) { .resa__phone a:hover { color: var(--alv-ink); text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- Colonne de droite ---------- */
.resa-side { display: grid; gap: 28px; }
.side-block { padding: clamp(24px, 3vw, 34px); border-radius: var(--alv-radius-lg); border: 1px solid var(--alv-hair); background: var(--alv-surface); }
.side-block .label { margin: 0 0 20px; }
.soirs { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.soirs li[hidden] { display: none; }
.soirs li { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 18px; align-items: start; }
.soirs .date-chip { padding: 8px 0 7px; }
.soirs .date-chip b { font-size: 26px; }
.soirs h3 { margin: 0 0 4px; font: 400 clamp(22px, 1.9vw, 27px)/1.02 var(--alv-font-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--alv-cream); }
.soirs p { margin: 0 0 12px; font-size: 14px; color: var(--alv-ink-soft); }
.soirs__act { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.faq details { border-top: 1px solid var(--alv-hair); }
.faq details:last-child { border-bottom: 1px solid var(--alv-hair); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font: 700 16px/1.3 var(--alv-font-label); letter-spacing: .06em; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--alv-gold-solid); border-bottom: 2px solid var(--alv-gold-solid); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--alv-dur-faq) var(--alv-ease-out); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
@media (hover: hover) { .faq summary:hover { color: var(--alv-ink); text-decoration: underline; text-underline-offset: 3px; } }
.faq details p { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--alv-ink-soft); }
.faq details a { color: var(--alv-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .faq details a:hover { color: var(--alv-ink); text-decoration: underline; text-underline-offset: 3px; } }

@media (max-width: 900px) {
  .resa-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stepper { gap: 12px; }
  .stepper button { width: 50px; height: 50px; }
  .quick button { flex: 1 1 auto; padding: 0 12px; }
  .dayfield input { max-width: none; }
  .soirs li { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
}

/* en-tête : deux polaroïds de la carte imprimée, comme sur La carte (masqués sous 900 px) */
.reserver-head__pola { max-width: 440px; justify-self: end; }
@media (max-width: 900px) { .reserver-head__pola { display: none; } }

/* ---------- Peaufinage 05/10 ---------- */
.resa__q { line-height: 1.12; }
.resa__phone a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.resa-side .label { margin-top: 0; }
@media (max-width: 900px) { .resa-grid { gap: 64px; } .resa-side { gap: 64px; } }
@media (max-width: 640px) {
  .reserver-head { padding-bottom: 48px; }
  .reserver-head .lead { font-size: 17px; }
  .quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick button { padding: 0 8px; }
  .resa__hours { min-height: 3em; } /* deux lignes réservées : le bouton ne bouge pas d'un message à l'autre */
}

/* ---------- Mouvement ---------- */
/* « Bon à savoir » : le volet s'ouvre et se referme en hauteur (Chrome 131+ ; ailleurs, ouverture instantanée) */
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size var(--alv-dur-faq) var(--alv-ease-out), opacity var(--alv-dur-faq) var(--alv-ease-out), content-visibility var(--alv-dur-faq) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } } /* le pseudo-élément échappe à la règle globale */
}
/* Jour posé depuis une soirée : le reflet or du bouton passe une fois (le même que celui du survol) */
@keyframes resa-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.btn.is-sheen::after { animation: resa-sheen var(--alv-dur-sheen) var(--alv-ease-out) 1; }
@media (max-width: 640px) { .quick button { font-size: 12px; letter-spacing: .06em; white-space: nowrap; padding: 0 6px; } }