/* Aurélie Ndjock-Lambert (démo) — styles propres à la page Réserver un appel.
   Chargée après styles.css, uniquement sur rendez-vous.html. Même couche « pages ». */
@layer pages {
/* ===== Rendez-vous ===== */
.booking { display: grid; gap: var(--space-6) var(--gutter); align-items: start; }
@media (min-width: 64em) { .booking { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .booking__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.booking__main { background: var(--color-creme); border: 1px solid var(--color-filet); border-radius: var(--radius-2); padding: clamp(1.1rem, 4vw, 2.5rem); box-shadow: var(--shadow-1); display: grid; gap: var(--space-6); min-inline-size: 0; }
.stepper { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; counter-reset: st; font-size: var(--fs-small); }
.stepper li { flex: 1; margin: 0; display: grid; gap: .45rem; color: var(--color-attenue); }
.stepper li::before { content: ""; block-size: 3px; border-radius: 3px; background: var(--color-lin-2); }
.stepper li[aria-current="step"], .stepper li.is-done { color: var(--color-encre); }
.stepper li[aria-current="step"]::before { background: var(--color-prune); }
.stepper li.is-done::before { background: var(--color-sauge-texte); }
.stepper b { font-weight: 500; }
.step-panel { display: grid; gap: var(--space-6); }
.step-panel > h2 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); font-weight: 400; }
.step-panel > h2:focus { outline: none; }
.type-cards { display: grid; gap: .75rem; }
@media (min-width: 40em) { .type-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tz-row { display: grid; gap: .5rem; }
@media (min-width: 40em) { .tz-row { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; } .tz-row .field__hint { grid-column: 1 / -1; } }
.tz-row label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.tz-row label .icon { color: var(--color-prune); }
.week-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.week-nav__title { font: 500 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.2 var(--font-display); color: var(--color-prune); text-align: center; flex: 1; }
.week-nav .round-btn { inline-size: 2.75rem; block-size: 2.75rem; flex: none; }
.dst-note { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--radius-1); background: #F1E9F0; border: 1px solid #DCC8D7; font-size: var(--fs-small); }
.dst-note .icon { color: var(--color-prune); margin-block-start: .1rem; }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.day { position: relative; }
.day input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.day label { display: grid; justify-items: center; gap: .1rem; padding: .6rem .2rem; min-block-size: 5.25rem; border-radius: var(--radius-2); border: 1px solid var(--color-attenue); background: var(--color-lin); cursor: pointer; text-align: center; transition: border-color var(--dur-1), background-color var(--dur-1); }
.day__wd { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-attenue); font-weight: 500; }
.day__num { font: 500 1.6rem/1.1 var(--font-display); color: var(--color-prune); font-variant-numeric: lining-nums; }
.day__state { font-size: .72rem; line-height: 1.25; color: var(--color-encre); }
.day label:hover { border-color: var(--color-prune); }
.day input:checked + label { background: var(--color-prune); border-color: var(--color-prune); }
.day input:checked + label .day__wd, .day input:checked + label .day__num, .day input:checked + label .day__state { color: var(--color-lin); }
.day input:focus-visible + label { outline: 2px solid var(--color-prune); outline-offset: 2px; }
.day input:disabled + label { cursor: not-allowed; background: transparent; border-style: dashed; border-color: var(--color-filet); }
.day input:disabled + label .day__num { color: var(--color-attenue); }
.day input:disabled + label .day__state { color: var(--color-attenue); }
@media (max-width: 29.99em) { .day__state { font-size: .66rem; } .day label { padding-inline: .1rem; } .days { gap: .3rem; } }
.slots-fieldset legend { font-weight: 500; margin-block-end: .8rem; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.4rem), 1fr)); gap: .55rem; }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.slot label { display: grid; align-content: center; justify-items: center; gap: .1rem; min-block-size: 3.6rem; padding: .55rem .4rem; border-radius: var(--radius-2); border: 1px solid var(--color-attenue); background: var(--color-lin); cursor: pointer; text-align: center; font-variant-numeric: lining-nums tabular-nums; transition: border-color var(--dur-1), background-color var(--dur-1); }
.slot__time { font-weight: 500; font-size: 1.125rem; color: var(--color-encre); }
.slot__ref { font-size: .75rem; color: var(--color-attenue); }
.slot__night { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--color-prune); }
.slot__night .icon { inline-size: .9rem; block-size: .9rem; }
.slot label:hover { border-color: var(--color-prune); }
.slot input:checked + label { background: var(--color-prune-pale); border-color: var(--color-prune); box-shadow: inset 0 0 0 1px var(--color-prune); }
.slot input:focus-visible + label { outline: 2px solid var(--color-prune); outline-offset: 2px; }
.slot input:disabled + label { cursor: not-allowed; background: transparent; border-style: dashed; border-color: var(--color-filet); }
.slot input:disabled + label .slot__time { text-decoration: line-through; color: var(--color-attenue); font-weight: 400; }
.slot--mine label { border-color: var(--color-sauge-texte) !important; border-style: solid !important; background: var(--color-sauge-pale) !important; }
.slot--mine .slot__time { text-decoration: none !important; color: var(--color-sauge-texte) !important; }
.slot--mine .slot__ref { color: var(--color-sauge-texte); font-weight: 500; }
.empty-state { padding: 1.25rem; border: 1px dashed var(--color-filet); border-radius: var(--radius-2); text-align: center; display: grid; gap: .75rem; justify-items: center; color: var(--color-attenue); }
.step-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-filet); }
.step-actions .btn:only-child { margin-inline-start: auto; }
.summary { background: var(--color-prune-nuit); color: var(--color-lin); border-radius: var(--radius-2) var(--radius-2) var(--radius-1) var(--radius-1); padding: clamp(1.4rem, 3vw, 2rem); display: grid; gap: var(--space-4); position: relative; overflow: hidden; isolation: isolate; }
.summary::before { content: ""; position: absolute; inset-block-end: -2.5rem; inset-inline-end: -2.5rem; inline-size: min(34%, 9rem); aspect-ratio: 4 / 5; border: 1px solid rgb(232 180 160 / .2); border-radius: var(--radius-arch); z-index: -1; }
.summary h2 { font: 500 var(--fs-eyebrow)/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--color-terracotta-clair); }
.summary__empty { font: italic 400 1.5rem/1.3 var(--font-display); color: var(--color-sombre-2); }
.summary dl { display: grid; gap: .75rem; margin: 0; }
.summary dl div { display: grid; gap: .1rem; }
.summary dt { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-sombre-2); }
.summary dd { margin: 0; font-size: 1rem; }
.summary__time { font: 400 2rem/1.1 var(--font-display) !important; color: var(--color-lin); font-variant-numeric: lining-nums; }
.summary__free { display: inline-flex; gap: .5rem; align-items: center; color: var(--color-terracotta-clair); font-size: var(--fs-small); padding-block-start: .75rem; border-block-start: 1px solid rgb(201 187 196 / .25); }
@media (prefers-reduced-motion: no-preference) { .summary.is-updated dd { animation: q-in var(--dur-3) var(--ease-out); } }
.summary-help { margin-block-start: var(--space-4); font-size: var(--fs-small); color: var(--color-attenue); display: grid; gap: .5rem; }
.review { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-block-start: 1px solid var(--color-filet); }
.review > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem var(--space-4); padding-block: .85rem; border-block-end: 1px solid var(--color-filet); align-items: center; }
@media (min-width: 40em) { .review > li { grid-template-columns: 11rem minmax(0, 1fr) auto; } }
.review__k { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-attenue); font-weight: 500; }
.review__v { margin: 0; }
@media (max-width: 39.99em) { .review__v { grid-column: 1; } .review .review__edit { grid-row: 1 / span 2; grid-column: 2; } }
.review__edit { font-size: var(--fs-small); }
.confirm { display: grid; gap: var(--space-5); }
.confirm h2 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 300; }
.confirm h2:focus { outline: none; }
.confirm__recap { font-size: var(--fs-lead); font-weight: 300; max-inline-size: 50ch; }
.confirm__next { display: grid; gap: var(--space-3); padding: 1.1rem 1.25rem; background: var(--color-lin); border-radius: var(--radius-1); }
.confirm__next h3 { font-size: 1.35rem; }
.confirm__next ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.confirm__next li { margin: 0; }
.existing { display: grid; gap: .75rem; padding: 1rem 1.15rem; border-radius: var(--radius-1); background: var(--color-sauge-pale); border: 1px solid #C3CEB8; color: #3E5038; }
.existing p { display: flex; gap: .6rem; align-items: flex-start; }
.existing .icon { color: var(--color-sauge-texte); margin-block-start: .2rem; }
.existing .btn-row .btn { min-block-size: 2.75rem; }
.how-call { display: grid; gap: var(--space-7) var(--gutter); align-items: center; }
@media (min-width: 64em) { .how-call { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.how-call .media { aspect-ratio: 3 / 2; border-radius: var(--radius-2); }
@media (max-width: 63.99em) { .how-call .media { aspect-ratio: 4 / 3; } }
.fallback-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }


@media (max-width: 29.99em) { .stepper { font-size: .78rem; gap: .35rem; } }

}