/* Même ambiance que le livret d'accueil : sable, mer, polices identiques. Une colonne sur téléphone, deux mois côte à côte sur grand écran. */
:root {
  --bg: #f2eee6; --surface: #fbf9f5; --ink: #2a3434; --muted: #5f6864; --line: #e3ddd0;
  --sea: #4a7b76; --sea-soft: #e0eae6; --sun: #a87b42; --sun-soft: #f2e7d4;
  --free: #fbf9f5; --option: #ecc98f; --booked: #4a7b76; --booked-ink: #fbf9f5; --past: #ebe6dc;
  --danger: #a5483a; --danger-soft: #f6e1dc; --shadow: rgb(60 50 30 / 0.08);
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151a1a; --surface: #1e2525; --ink: #ece6db; --muted: #a59f94; --line: #2e3737;
    --sea: #8ec2b9; --sea-soft: #21332f; --sun: #d8ad74; --sun-soft: #382d20;
    --free: #1e2525; --option: #8a6a3a; --booked: #5f9a92; --booked-ink: #101515; --past: #192020;
    --danger: #e08a7c; --danger-soft: #3a2420; --shadow: rgb(0 0 0 / 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151a1a; --surface: #1e2525; --ink: #ece6db; --muted: #a59f94; --line: #2e3737;
  --sea: #8ec2b9; --sea-soft: #21332f; --sun: #d8ad74; --sun-soft: #382d20;
  --free: #1e2525; --option: #8a6a3a; --booked: #5f9a92; --booked-ink: #101515; --past: #192020;
  --danger: #e08a7c; --danger-soft: #3a2420; --shadow: rgb(0 0 0 / 0.3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--sea); font-weight: 700; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }

.app { max-width: 880px; margin: 0 auto; padding: 0 16px 64px; display: grid; gap: 16px; }
.head { padding: 28px 4px 4px; display: grid; gap: 6px; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sea); font-weight: 700; }
.head h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px, 9vw, 56px); line-height: 1; letter-spacing: -0.01em; }
.head p { color: var(--muted); max-width: 60ch; }
.head .links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px; display: grid; gap: 14px; box-shadow: 0 8px 30px var(--shadow); min-width: 0; }
.card h2 { font-size: 20px; }
.card .lead { color: var(--muted); font-size: 15px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Calendrier */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line); display: inline-block; }
.legend .l-free { background: var(--free); }
.legend .l-option { background: var(--option); }
.legend .l-booked { background: var(--booked); }
.legend .l-half { background: linear-gradient(135deg, var(--booked) 50%, var(--free) 50%); }
.cal-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cal-nav .title { font-family: var(--font-display); font-weight: 700; }
.months { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.month h3 { font-size: 16px; text-transform: capitalize; margin-bottom: 8px; }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.grid .dow { font-size: 11px; text-align: center; color: var(--muted); font-weight: 700; padding-bottom: 2px; }
.day {
  --am: var(--free); --pm: var(--free);
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 9px; padding: 0;
  background: linear-gradient(135deg, var(--am) 50%, var(--pm) 50%);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; position: relative; min-width: 0;
}
.day[data-am="option"] { --am: var(--option); }
.day[data-pm="option"] { --pm: var(--option); }
.day[data-am="reserve"] { --am: var(--booked); }
.day[data-pm="reserve"] { --pm: var(--booked); }
.day[data-am="reserve"][data-pm="reserve"] { color: var(--booked-ink); }
.day:disabled { cursor: default; opacity: 0.45; }
.day.today { box-shadow: inset 0 0 0 2px var(--sun); }
.day.in-range { outline: 3px solid var(--ink); outline-offset: -3px; }
.day.edge { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.day.blank { visibility: hidden; }

/* Formulaires */
form { display: grid; gap: 12px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
label small { font-weight: 400; color: var(--muted); }
input, select, textarea { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-weight: 400; min-height: 44px; }
textarea { min-height: 88px; resize: vertical; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn { border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 700; cursor: pointer; background: var(--sea); color: var(--bg); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.btn.ghost { background: var(--sea-soft); color: var(--sea); }
.btn.quiet { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.small { padding: 7px 12px; min-height: 36px; font-size: 14px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.icon-btn { border: 1px solid var(--line); background: var(--surface); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.summary { background: var(--sea-soft); border-radius: 14px; padding: 12px 14px; font-weight: 700; }
.summary.warn { background: var(--sun-soft); }
.msg { border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.msg.ok { background: var(--sea-soft); }
.msg.err { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.msg.warn { background: var(--sun-soft); }

/* Listes de demandes */
.list { display: grid; gap: 10px; }
.item { border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 8px; background: var(--bg); min-width: 0; }
.item .dates { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.item .meta { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.item .quote { font-style: italic; overflow-wrap: anywhere; white-space: pre-wrap; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.badge.option { background: var(--option); color: var(--ink); }
.badge.reserve { background: var(--booked); color: var(--booked-ink); }
.badge.refuse, .badge.annule, .badge.expiree { background: var(--past); color: var(--muted); border: 1px solid var(--line); }
.badge.conflit { background: var(--danger-soft); color: var(--danger); }
details > summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.copy { display: flex; gap: 8px; }
.copy input { font-size: 13px; }
.foot { text-align: center; color: var(--muted); font-size: 13px; padding-top: 8px; }
.stack { display: grid; gap: 16px; }
.spaced { margin-top: 12px; }
.cal-nav .title { text-transform: capitalize; }
.fields { align-items: start; }