/* Synchronisation des montres : mêmes bases que PunchLime (base.css), accent ambre. */
:root { --accent: #A24A00; --accent-ink: #FFFFFF; --accent-soft: #FBE6CC; --lime: #F2A33A; --yes: #1F7A3E; --yes-soft: #D7F0DF; --maybe: #8A6200; --maybe-soft: #FBEBB8; --no-soft: #ECEFF0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #F5B04C; --accent-ink: #0C1417; --accent-soft: #3A2A0C; --lime: #F5B04C; --yes: #7BDB9A; --yes-soft: #12341F; --maybe: #F2C95A; --maybe-soft: #3A2E0A; --no-soft: #1A262B; }
}
:root[data-theme="dark"] { --accent: #F5B04C; --accent-ink: #0C1417; --accent-soft: #3A2A0C; --lime: #F5B04C; --yes: #7BDB9A; --yes-soft: #12341F; --maybe: #F2C95A; --maybe-soft: #3A2E0A; --no-soft: #1A262B; }

main { padding-bottom: 60px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 16px; min-width: 0; }
.panel h2 { font-size: 1.25rem; margin-bottom: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.hint { color: var(--muted); font-size: .9rem; margin: 0; }
.msg { padding: 10px 12px; border-radius: 8px; margin: 10px 0 0; font-size: .95rem; }
.msg.err { background: var(--alert-soft); color: var(--fg); border: 1px solid var(--alert); }
.msg.ok { background: var(--yes-soft); border: 1px solid var(--yes); }
.msg.info { background: var(--accent-soft); border: 1px solid var(--accent); }

/* Calendrier */
.cal-wrap { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 760px) { .cal-wrap { grid-template-columns: 1fr; } }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-family: var(--f-display); font-weight: 700; text-transform: capitalize; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .dow { font-family: var(--f-mono); font-size: .72rem; text-align: center; color: var(--muted); text-transform: uppercase; }
.cal button.day { aspect-ratio: 1; min-height: 40px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; cursor: pointer; font-size: .95rem; }
.cal button.day:hover:not(:disabled) { border-color: var(--accent); }
.cal button.day[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.cal button.day:disabled { opacity: .35; cursor: not-allowed; }
.cal button.day.today { box-shadow: inset 0 0 0 2px var(--lime); }
.cal .blank { visibility: hidden; }
.day-list { display: grid; gap: 10px; }
.day-row { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.day-row h3 { font-size: 1rem; text-transform: capitalize; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.times { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.time-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); border-radius: 999px; padding: 4px 6px 4px 12px; font-family: var(--f-mono); font-size: .88rem; }
.time-chip button { border: 0; background: transparent; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; font-size: 1rem; line-height: 1; }
.time-chip button:hover { background: var(--surface); }
.add-time { display: inline-flex; gap: 6px; }
.add-time input { width: 7.2em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.quick .field { flex: 1 1 130px; }

/* Grille de vote */
.poll-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: flex-start; }
.status { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); }
.status.open { background: var(--yes-soft); border-color: var(--yes); }
.status.closed { background: var(--accent-soft); border-color: var(--accent); }
.meta-line { color: var(--muted); font-size: .95rem; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; }
.tz-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 14px 0 8px; font-size: .92rem; color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table.grid-vote { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; }
.grid-vote th, .grid-vote td { padding: 8px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; vertical-align: middle; }
.grid-vote th:last-child, .grid-vote td:last-child { border-right: 0; }
.grid-vote tr:last-child > * { border-bottom: 0; }
.grid-vote th.who, .grid-vote td.who { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; min-width: 130px; max-width: 180px; overflow-wrap: anywhere; }
.grid-vote thead th { background: var(--surface); font-weight: 500; font-size: .88rem; min-width: 92px; }
.slot-h { display: grid; gap: 2px; justify-items: center; line-height: 1.25; }
.slot-h .mo { font-family: var(--f-mono); font-size: .7rem; text-transform: uppercase; color: var(--muted); }
.slot-h .dd { font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; }
.slot-h .hh { font-family: var(--f-mono); font-size: .82rem; }
.slot-h .wd { font-size: .78rem; color: var(--muted); }
th.best, td.best { background: var(--accent-soft) !important; }
th.chosen, td.chosen { box-shadow: inset 0 0 0 2px var(--accent); }
.badge { display: inline-block; font-size: .7rem; font-family: var(--f-mono); background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 1px 6px; margin-top: 4px; }
.cell { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; font-weight: 700; background: var(--no-soft); color: var(--muted); }
.cell.yes { background: var(--yes-soft); color: var(--yes); }
.cell.maybe { background: var(--maybe-soft); color: var(--maybe); }
button.cell { border: 1px solid var(--line); cursor: pointer; width: 44px; height: 44px; font-size: 1.1rem; }
button.cell:hover { border-color: var(--accent); }
tr.me td, tr.me th { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
tr.total td, tr.total th { font-family: var(--f-mono); font-size: .85rem; background: var(--bg); }
.who small { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; }
.who .del { font-size: .8rem; margin-left: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--muted); margin: 10px 0 0; }
.vote-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.share { display: grid; gap: 10px; }
.share .copy { display: flex; gap: 8px; flex-wrap: wrap; }
.share input { flex: 1 1 260px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-family: var(--f-mono); font-size: .85rem; }
.mypolls { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mypolls li { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.mypolls a { font-weight: 600; }
.notice-off { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 10px; padding: 16px; }
footer.foot { color: var(--muted); font-size: .88rem; padding-block: 20px 40px; border-top: 1px solid var(--line); display: flex; gap: 8px 20px; flex-wrap: wrap; }
.btn.ghost { color: var(--accent); }
.hp { position: absolute; left: -9999px; }

/* Vue participant : mini-calendriers et choix par date */
.mini-cals { display: flex; flex-wrap: wrap; gap: 20px 32px; }
.mini-cal { flex: 1 1 240px; max-width: 320px; min-width: 0; }
.cal.mini { gap: 3px; }
.cal.mini .day { aspect-ratio: 1; min-height: 34px; font-size: .88rem; border-radius: 6px; }
.cal .day.off { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-height: 34px; font-size: .88rem; color: var(--muted); opacity: .45; }
.cal button.day.has { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; cursor: pointer; }
.cal button.day.has.best { background: var(--accent); color: var(--accent-ink); }
.cal button.day.has[aria-pressed="true"] { background: var(--accent-soft); color: var(--fg); }
.day-cards { display: grid; gap: 12px; margin-top: 4px; }
.day-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; scroll-margin-top: 80px; transition: box-shadow .3s; }
.day-card.flash { box-shadow: 0 0 0 3px var(--accent); }
.day-card h3 { font-size: 1.1rem; text-transform: capitalize; margin-bottom: 10px; }
.slot-row { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.slot-row:first-of-type { border-top: 0; padding-top: 0; }
.slot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.slot-meta strong { font-family: var(--f-mono); font-weight: 500; }
.slot-row.best .slot-meta strong { color: var(--accent); }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice { min-height: 46px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .95rem; padding: 6px 4px; }
.choice:hover { border-color: var(--accent); }
.choice[aria-pressed="true"].yes { background: var(--yes-soft); border-color: var(--yes); color: var(--yes); }
.choice[aria-pressed="true"].maybe { background: var(--maybe-soft); border-color: var(--maybe); color: var(--maybe); }
.choice[aria-pressed="true"].no { background: var(--no-soft); border-color: var(--muted); color: var(--fg); }
details.more > summary { cursor: pointer; font-weight: 600; }
details.panel.more { padding: 14px 18px; }
details.panel.more[open] > summary { margin-bottom: 12px; }
.time-chip.new { background: transparent; border: 1px dashed var(--accent); }
.day-row { scroll-margin-top: 80px; }
.cal-wrap .day-list { max-height: 520px; overflow: auto; }