/* NJANSANG — styles propres à la page Réservation. Chargé après styles.css (même ordre de couches). */
@layer pages {
  .resa-layout { display: grid; gap: var(--space-6); }
  @media (min-width: 64em) { .resa-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: var(--space-7); } .resa-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
  .resa-aside { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-m); background: var(--color-lin); border: 1px solid var(--color-sable); font-size: .95rem; }
  .resa-aside__contact { font-size: .9rem; color: var(--color-encre-2); padding-block-start: .75rem; border-block-start: 1px solid var(--color-sable); }
  .resa__fallback { display: grid; gap: var(--space-5); }
  .resa { background: var(--color-ivoire); border: 1px solid var(--color-sable); border-radius: var(--radius-l); padding: clamp(1.1rem, .8rem + 2vw, 2.25rem); box-shadow: var(--shadow-s); }
  .stepper { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; margin-block-end: .5rem; }
  .stepper__item { display: grid; gap: .35rem; font-size: .75rem; font-weight: 650; color: var(--color-encre-2); }
  .stepper__item::before { content: ""; height: 4px; border-radius: 4px; background: var(--color-sable); transition: background-color var(--dur-3); }
  .stepper__item.is-done::before, .stepper__item[aria-current="step"]::before { background: var(--color-terracotta); }
  .stepper__item[aria-current="step"] { color: var(--color-encre); }
  .stepper__label { display: none; }
  @media (min-width: 40em) { .stepper__label { display: block; } }
  .resa__progress { font-size: .875rem; color: var(--color-encre-2); margin-block-end: 1.25rem; }
  .resa-step { display: grid; gap: 1.25rem; }
  .resa-step[hidden] { display: none; }
  .resa-step__title { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 400; }
  .resa-step__title:focus { outline: none; }
  .resa-step__title:focus-visible { outline: 2px solid var(--color-encre); outline-offset: 4px; }
  @media (prefers-reduced-motion: no-preference) {
    .resa-step.is-entering { animation: step-in var(--dur-3) var(--ease-out); }
    .resa-step.is-entering-back { animation: step-back var(--dur-3) var(--ease-out); }
    @keyframes step-in { from { opacity: 0; transform: translateX(16px); } }
    @keyframes step-back { from { opacity: 0; transform: translateX(-16px); } }
  }
  .resa-nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; padding-block-start: 1.25rem; margin-block-start: .5rem; border-block-start: 1px solid var(--color-sable); }
  .resa-nav .btn--primary { margin-inline-start: auto; }
  @media (max-width: 39.99em) { .resa-nav .btn { flex: 1 1 100%; } .resa-nav .btn--primary { order: -1; } }
  .counter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
  .counter { display: inline-flex; align-items: center; border: 1.5px solid #8C7462; border-radius: var(--radius-pill); background: var(--color-creme); }
  .counter button { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; color: var(--color-encre); }
  .counter button:hover:not(:disabled) { background: var(--color-lin); }
  .counter button:disabled { opacity: .35; cursor: not-allowed; }
  .counter input { inline-size: 3.25rem; text-align: center; border: 0; background: transparent; font-weight: 700; font-size: 1.15rem; min-height: 3rem; -moz-appearance: textfield; appearance: textfield; }
  .counter input::-webkit-inner-spin-button, .counter input::-webkit-outer-spin-button { -webkit-appearance: none; }
  .counter__plus-more { padding-inline: .9rem !important; inline-size: auto !important; border-radius: var(--radius-pill) !important; font-size: .85rem; font-weight: 650; }
  /* Calendrier */
  .cal { display: grid; gap: .75rem; max-width: 30rem; }
  .cal__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .cal__month { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; text-transform: capitalize; }
  .cal__nav { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; border: 1.5px solid var(--color-ligne); color: var(--color-encre); }
  .cal__nav:hover:not(:disabled) { background: var(--color-lin); }
  .cal__nav:disabled { opacity: .3; cursor: not-allowed; }
  .cal__grid { display: grid; gap: 6px; }
  .cal__row { display: grid; grid-template-columns: repeat(7, minmax(2.5rem, 1fr)); gap: 6px; }
  .cal__dow { text-align: center; font-size: .75rem; font-weight: 650; color: var(--color-encre-2); text-transform: lowercase; padding-block: .25rem; }
  .cal__dow abbr { text-decoration: none; }
  .cal__cell { display: block; }
  .cal__day { position: relative; display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1; min-block-size: 2.75rem; border-radius: var(--radius-s); font-weight: 650; font-variant-numeric: tabular-nums; background: var(--color-creme); border: 1.5px solid var(--color-sable); color: var(--color-encre); transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
  .cal__day:hover:not([aria-disabled="true"]) { border-color: var(--color-encre); }
  .cal__day::after { content: ""; position: absolute; inset-block-end: 5px; inline-size: 6px; block-size: 6px; border-radius: 50%; background: transparent; }
  .cal__day[data-dispo="dispo"]::after { background: #2E7D45; }
  .cal__day[data-dispo="presque"]::after { background: var(--color-ocre); }
  .cal__day[data-dispo="complet"] { color: var(--color-encre-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
  .cal__day[data-dispo="complet"]::after { background: var(--color-terracotta); inline-size: 10px; block-size: 2px; border-radius: 1px; }
  .cal__day[aria-disabled="true"] { color: rgb(94 70 54 / .6); background: repeating-linear-gradient(135deg, var(--color-lin) 0 4px, var(--color-ivoire) 4px 8px); border-color: transparent; cursor: not-allowed; }
  .cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--color-ocre); }
  .cal__day[aria-selected="true"] { background: var(--color-terracotta); border-color: var(--color-terracotta); color: var(--color-ivoire); text-decoration: none; }
  .cal__day[aria-selected="true"]::after { background: var(--color-ivoire); }
  .cal__day:focus-visible { outline: 2px solid var(--color-encre); outline-offset: 2px; z-index: 1; }
  .cal__legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8125rem; color: var(--color-encre-2); }
  .cal__legend span { display: inline-flex; align-items: center; gap: .35rem; }
  .cal__legend i { inline-size: 8px; block-size: 8px; border-radius: 50%; }
  .cal__summary { font-weight: 600; padding: .75rem 1rem; background: var(--color-lin); border-radius: var(--radius-s); }
  @media (max-width: 22em) { .cal__row, .cal__grid { gap: 4px; } .cal__row { grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal__day { min-block-size: 2.4rem; } }
  /* Services et créneaux */
  .services { display: flex; flex-wrap: wrap; gap: .5rem; }
  .suggestions { display: flex; flex-wrap: wrap; gap: .5rem; }
  .suggestions .chip { text-transform: none; }
  .waitlist { display: grid; gap: 1rem; padding: 1.25rem; border-radius: var(--radius-m); background: var(--color-creme); border: 1px solid var(--color-sable); }
  .waitlist__title { font-size: 1.2rem; }
  .special-card { padding: 1.25rem; border-radius: var(--radius-m); background: var(--color-nuit); color: var(--color-creme); display: grid; gap: .6rem; justify-items: start; }
  .special-card a { color: var(--color-ocre); font-weight: 650; }
  .cheffe-seats { font-weight: 650; color: var(--color-ocre-texte); }
  .summary-dl { display: grid; gap: 0; border-block-start: 1px solid var(--color-sable); }
  .summary-dl > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: baseline; padding-block: .8rem; border-block-end: 1px solid var(--color-sable); }
  .summary-dl dt { font-size: .875rem; color: var(--color-encre-2); font-weight: 600; }
  .summary-dl dd { font-weight: 600; }
  .summary-dl button { font-size: .875rem; font-weight: 650; color: var(--color-terracotta-texte); text-decoration: underline; min-height: 44px; }
  @media (max-width: 30em) { .summary-dl > div { grid-template-columns: 1fr auto; } .summary-dl dd { grid-column: 1 / 2; } .summary-dl button { grid-row: 1 / span 2; grid-column: 2; } }
  .confirm { display: grid; gap: 1.25rem; justify-items: start; }
  .confirm__seal { inline-size: 4rem; block-size: 4rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-foret); color: var(--color-creme); }
  .confirm__title { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 400; }
  .confirm__title:focus { outline: none; }
  .confirm__ref { font-size: 1.1rem; }
  .confirm__ref strong { font-family: var(--font-body); letter-spacing: .06em; background: var(--color-lin); padding: .2rem .6rem; border-radius: var(--radius-s); }
  .my-resas { margin-block-end: var(--space-5); padding: 1.25rem 1.5rem; border-radius: var(--radius-m); background: #E4EEDF; border: 1px solid #A9C9A4; display: grid; gap: .75rem; }
  .my-resas__title { font-size: 1.25rem; }
  .my-resas ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
  .my-resas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 1rem; border-radius: var(--radius-s); background: var(--color-ivoire); }
  .my-resas__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
  .autres .h3 { margin-block-end: var(--space-5); }
  .cal__table { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; margin-inline: -4px; width: calc(100% + 8px); }
  .cal__table td { padding: 0; }
  .cal__legend i { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; }
  .cal__legend .lg-dispo { background: #2E7D45; }
  .cal__legend .lg-presque { background: var(--color-ocre); }
  .cal__legend .lg-complet { background: var(--color-terracotta); inline-size: 10px; block-size: 2px; border-radius: 1px; }
  .cal__legend .lg-ferme { inline-size: 12px; block-size: 12px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--color-sable) 0 3px, var(--color-ivoire) 3px 6px); border: 1px solid var(--color-sable); }
  .field--spaced { margin-block-start: .75rem; }
  @media (max-width: 29.99em) { .resa { padding: .85rem; border-radius: var(--radius-m); } .cal__table { border-spacing: 3px; margin-inline: -3px; width: calc(100% + 6px); } }
  .seg--wrap { flex-wrap: wrap; border-radius: var(--radius-m); }
  .waitlist .btn { justify-self: start; }
}