/* Aligné sur global.css — nécessite .env-dev / .env-prod sur (BaseLayout). */ .env-prod .hidden-en-prod { display: none !important; } .env-dev .hidden-en-dev { display: none !important; } :root { color-scheme: light; --background: #f4efe7; --card: #fffaf3; --card-strong: #ffffff; --ink: #1f2933; --muted: #6b7280; --brand: #0f766e; --brand-dark: #115e59; --brand-soft: #ccfbf1; --border: #eadfd1; --danger: #b91c1c; --success: #047857; --shadow: 0 20px 60px rgba(31, 41, 51, 0.13); --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif; --font-serif: "Cormorant Garamond", ui-serif, Georgia, serif; --color-zeptheme-sand: #ebe4d8; --color-zeptheme-gold-light: #d4bc94; --color-zeptheme-ink: #0c0c0c; } .reservation-widget, .reservation-widget #root, .reservation-widget .app-shell { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .reservation-widget * { box-sizing: border-box; } .reservation-widget button, .reservation-widget input, .reservation-widget textarea { font: inherit; } .reservation-widget button { cursor: pointer; } .app-shell { width: min(1120px, 100%); margin: 0 auto; } .hero { display: grid; gap: 1rem; align-items: start; padding: 0 0 1rem; } .reservation-widget h1, .reservation-widget h2, .reservation-widget h3, .reservation-widget p { margin-top: 0; } .reservation-widget h1 { max-width: none; margin-bottom: 0.8rem; font-family: var(--font-serif); font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: 0.02em; } .hero-copy { max-width: 36rem; color: #4b5563; font-size: 1.03rem; line-height: 1.7; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding-top: 1rem; } .button, .secondary-link { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; border-radius: 999px; font-weight: 800; text-decoration: none; } .button { border: 0; background: var(--brand); color: white; padding: 0.85rem 1.25rem; box-shadow: 0 10px 25px rgba(15, 118, 110, 0.24); transition: transform 160ms ease, background-color 160ms ease; } .button:hover, .button:focus-visible { background: var(--brand-dark); transform: translateY(-1px); } .button:disabled { cursor: not-allowed; opacity: 0.6; transform: none; } .secondary-link { border: 1px solid var(--border); background: rgba(255, 255, 255, 0.55); color: var(--ink); padding: 0.78rem 1rem; } .hero-card, .panel, .booking-card, .pricing-card { border: 1px solid var(--border); border-radius: 2rem; background: rgba(255, 250, 243, 0.9); box-shadow: var(--shadow); } .hero-card { display: grid; gap: 0.8rem; padding: 1rem; } .hero-stat { display: flex; gap: 0.8rem; align-items: center; border-radius: 1.3rem; background: var(--card-strong); padding: 1rem; } .hero-stat strong { display: block; font-size: 1rem; } .hero-stat span { color: var(--muted); font-size: 0.9rem; } .stat-icon { display: grid; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; place-items: center; border-radius: 1rem; background: var(--color-zeptheme-gold-light); color: var(--brand-dark); font-weight: 900; } .layout { display: grid; gap: 1rem; margin: 0 0 2rem; } .panel, .booking-card, .pricing-card { padding: 1rem; } .panel-header { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; } .panel-header h2, .pricing-card h2 { margin-bottom: 0.25rem; font-size: 1.35rem; } .panel-header p, .pricing-card p { color: var(--muted); line-height: 1.55; } .date-field, .field-caption, .form-grid label { display: grid; gap: 0.4rem; color: #374151; font-size: 0.88rem; font-weight: 800; } .form-grid label input,textarea { font-weight: initial; } input, textarea { width: 100%; border: 1px solid var(--border); border-radius: 1rem; background: var(--card-strong); color: var(--ink); padding: 0.9rem 1rem; outline: 0; } input:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16); } .status { border-radius: 1rem; margin: 0.75rem 0; padding: 0.85rem 1rem; font-weight: 700; } .status.error { background: #fee2e2; color: var(--danger); } .data-load-error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .data-load-error a:hover, .data-load-error a:focus-visible { color: var(--brand-dark); } .status.success { background: #d1fae5; color: var(--success); } .booking-inputs { display: flex; gap: 0.8rem; margin-bottom: 1rem; } .booking-inputs > * { flex: 1 1 0; min-width: 0; } .booking-input-button { display: flex; width: 100%; height: 2.75rem; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--card-strong); color: var(--ink); padding: 0 0.85rem; font-weight: 700; text-align: left; } .booking-input-button:hover, .booking-input-button:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14); outline: 0; } .travellers-field { position: relative; } .travellers-dropdown { position: absolute; z-index: 5; right: 0; left: 0; display: grid; gap: 1rem; border: 1px solid var(--border); border-radius: 1.2rem; margin-top: 0.45rem; background: var(--card-strong); box-shadow: var(--shadow); padding: 1rem; } .traveller-row { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; } .traveller-row strong, .traveller-row span { display: block; } .traveller-row span { color: var(--muted); font-size: 0.84rem; } .counter-control { display: flex; flex: 0 0 auto; align-items: center; gap: 0.65rem; } .counter-control button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: white; color: var(--brand-dark); font-size: 1.2rem; font-weight: 900; } .counter-control button:disabled { cursor: not-allowed; opacity: 0.35; } .counter-control span { min-width: 1.4rem; color: var(--ink); font-weight: 900; text-align: center; } .minimum-notice { display: inline-flex; align-items: center; border-radius: 999px; margin-bottom: 1rem; background: #fff7ed; color: #9a3412; padding: 0.45rem 0.75rem; font-size: 0.9rem; font-weight: 900; } .date-range-picker { border: 1px solid var(--border); border-radius: 1.3rem; background: var(--card-strong); padding: 0.65rem; } .date-range-picker .DayPicker-NavBar { padding-top: 12px; } .date-range-picker .DayPicker { width: 100%; } .date-range-picker .DayPicker-wrapper { padding: 0; outline: 0; } .date-range-picker .DayPicker-Months { display: grid; justify-content: center; gap: 1rem; } .date-range-picker .DayPicker-Month { width: 100%; max-width: 18rem; border-spacing: 0 0.28rem; margin: 0; } .date-range-picker .DayPicker-Caption { color: var(--ink); font-weight: 900; text-align: center; text-transform: capitalize; } .date-range-picker .DayPicker-Weekday { color: var(--muted); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; } .date-range-picker .DayPicker-Day { position: relative; height: 2.35rem; border-radius: 8px; color: var(--ink); outline: 0; } .date-range-picker .DayPicker-Day:not(.DayPicker-Day--disabled):hover, .date-range-picker .DayPicker-Day:not(.DayPicker-Day--disabled):focus-visible { background: var(--brand-soft); color: var(--brand-dark); } .date-range-picker .DayPicker-Day--outside { pointer-events: none; visibility: hidden; } .date-range-picker .DayPicker-Day--busy { color: #9ca3af; text-decoration: line-through; text-decoration-thickness: 2px; } .date-range-picker .DayPicker-Day--busy::after { position: absolute; right: 26%; left: 26%; top: 50%; height: 2px; background: currentColor; content: ""; } .date-range-picker .DayPicker-Day--disabled { cursor: not-allowed; opacity: 0.45; } /* Surcharge react-day-picker (#4A90E2) — ordre des règles = priorité */ .date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) { background-color: var(--brand); color: #fff; } .date-range-picker .DayPicker-Day--inRange:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) { border-radius: 0; background-color: rgba(204, 251, 241, 0.8); color: var(--brand-dark); } .date-range-picker .DayPicker-Day--rangeStart:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside), .date-range-picker .DayPicker-Day--rangeEnd:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) { background-color: var(--brand-dark); color: #fff; } .date-range-picker .DayPicker-Day--rangeStart { border-radius: 8px 0 0 8px; } .date-range-picker .DayPicker-Day--rangeEnd { border-radius: 0 8px 8px 0; } .date-range-picker .DayPicker-Day--rangeStart.DayPicker-Day--rangeEnd { border-radius: 8px; } .date-range-picker .DayPicker-NavButton { top: 0.85rem; } .date-range-picker .DayPicker-NavButton--prev { right: auto; left: 0.85rem; margin-right: 0; } .date-range-picker .DayPicker-NavButton--next { right: 0.85rem; } .calendar-footer-actions { display: flex; justify-content: flex-end; margin-top: 0.8rem; } .calendar-clear-button { border: 0; background: transparent; color: var(--brand-dark); padding: 0.35rem 0; font-size: 0.9rem; text-decoration: underline; } .calendar-clear-button:hover, .calendar-clear-button:focus-visible { color: var(--brand); outline: 0; } .calendar-legend { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.85rem; color: var(--muted); font-size: 0.84rem; font-weight: 800; } .calendar-legend span { display: inline-flex; align-items: center; gap: 0.35rem; } .calendar-legend i { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 999px; } .legend-available { border: 1px solid var(--border); background: white; } .legend-busy { background: #d1d5db; text-decoration: line-through; } .legend-selected { background: var(--brand); } .reservations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .reservation-button { min-height: 3.25rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card-strong); color: var(--ink); font-weight: 900; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; } .reservation-button.active, .reservation-button:hover, .reservation-button:focus-visible { border-color: var(--brand); background: var(--brand); color: white; } .empty-state { border: 1px dashed #d1c5b7; border-radius: 1.2rem; padding: 1rem; color: var(--muted); line-height: 1.6; text-align: center; } .events { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; } .events summary { cursor: pointer; color: var(--brand-dark); font-weight: 900; } .events ul { display: grid; gap: 0.65rem; margin: 0.8rem 0 0; padding: 0; list-style: none; } .events li { display: grid; gap: 0.2rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.7); padding: 0.75rem; } .events span { color: var(--muted); } .booking-card { position: sticky; top: 1rem; } .selected-reservation { border-radius: 1.3rem; background: var(--color-zeptheme-gold-light); color: var(--brand-dark); margin-bottom: 1rem; padding: 1rem; } .selected-reservation-summary { display: flex; flex-direction: column; gap: 0.25rem; color: var(--color-zeptheme-ink, #0c0c0c); } .selected-reservation-hint { color: var(--color-zeptheme-ink, #0c0c0c); } .reservation-price-details { display: grid; gap: 0.45rem; margin-top: 0.75rem; color: var(--ink); font-size: 0.9rem; line-height: 1.45; } .reservation-price-details ul { display: grid; gap: 0.35rem; margin: 0; padding-left: 1.1rem; } .reservation-price-unavailable { color: #9f1239; font-weight: 800; } .form-grid { display: grid; gap: 0.9rem; } .form-grid textarea { min-height: 7rem; resize: vertical; } .form-label-line { display: block; line-height: 1.35; } .form-label-line .helper-text { display: inline; font-size: 0.78rem; font-weight: 400; line-height: 1.35; } .helper-text { color: var(--muted); font-size: 0.86rem; font-weight: 400; line-height: 1.5; } .pricing-table-wrap { overflow: hidden; border: 1px solid var(--border); background: var(--card-strong); } .pricing-table-wrap .pricing-table-scroll { overflow-x: auto; } .pricing-table { width: 100%; min-width: 48rem; border-collapse: collapse; } .pricing-table caption { padding: 1rem; color: var(--brand-dark); font-size: 1.1rem; font-weight: 900; text-align: left; } .pricing-table th, .pricing-table td { border-top: 1px solid var(--border); padding: 0.85rem; text-align: center; vertical-align: middle; } .pricing-table th { color: var(--ink); font-weight: 900; } .pricing-table thead th { background: var(--background, #f4efe7); border-color: var(--color-zeptheme-sand, #ebe4d8); text-transform: uppercase; } .pricing-table thead span { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.75rem; font-weight: 700; line-height: 1.35; text-transform: none; } .pricing-table tbody th { text-align: left; } .pricing-table td { color: var(--brand-dark); font-weight: 900; white-space: nowrap; } .pricing-notes { display: grid; gap: 0.4rem; margin: 1rem 0 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.5; } .footer { padding: 1rem 0 2rem; color: var(--muted); font-size: 0.9rem; text-align: center; } @media (min-width: 720px) { .hero { grid-template-columns: 1fr; gap: 1.25rem; } .hero-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } .hero-stat { align-items: flex-start; padding: 0.9rem 1rem; } .layout { grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr); align-items: start; } .panel, .booking-card, .pricing-card, .hero-card { padding: 1.4rem; } .DayPicker-Months { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr) 26rem; } } .reservation-success-dialog { margin: auto; max-width: min(28rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--border); border-radius: 1.25rem; background: var(--card); box-shadow: var(--shadow); } .reservation-success-dialog::backdrop { background: rgba(12, 12, 12, 0.45); } .reservation-success-dialog__inner { padding: 1.5rem 1.35rem 1.35rem; } .reservation-success-dialog__title { margin: 0 0 0.75rem; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--color-zeptheme-ink); } .reservation-success-dialog__text { margin: 0 0 1.25rem; line-height: 1.6; color: var(--muted); } .reservation-success-dialog__close { width: 100%; }