/* SynchronisationDesMontres : identité visuelle propre (cadran bleu nuit, cobalt, couleurs de vote franches).
   Chargé après base.css et app.css : ne redéfinit que les jetons et l'habillage, pas la mise en page. */
:root {
  --bg: #F3F5FC; --surface: #FFFFFF; --fg: #141E46; --muted: #5B6488; --line: #DDE2F1;
  --accent: #2B47E6; --accent-ink: #FFFFFF; --accent-soft: #E6EAFF; --lime: #2B47E6;
  --alert: #C9353A; --alert-soft: #FDE4E4;
  --yes: #0E9F55; --yes-ink: #0A7A40; --yes-soft: #DCF5E7;
  --maybe: #E59E00; --maybe-ink: #855A00; --maybe-soft: #FFF0C7;
  --no: #E0464B; --no-ink: #B42B30; --no-soft: #FDE4E4;
  --dial: #141E46; --dial-ink: #FFFFFF; --on-vote: #FFFFFF;
  --r-panel: 18px; --r-ctl: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1330; --surface: #151D42; --fg: #EEF1FF; --muted: #A2AACB; --line: #28325E;
    --accent: #8FA2FF; --accent-ink: #0D1330; --accent-soft: #232E66; --lime: #8FA2FF;
    --alert: #FF7A7E; --alert-soft: #3D1A1E;
    --yes: #3FD38A; --yes-ink: #3FD38A; --yes-soft: #11352A;
    --maybe: #F5C342; --maybe-ink: #F5C342; --maybe-soft: #3A2F0C;
    --no: #FF7A7E; --no-ink: #FF7A7E; --no-soft: #3D1A1E;
    --dial: #EEF1FF; --dial-ink: #0D1330; --on-vote: #0D1330;
  }
}
:root[data-theme="dark"] {
  --bg: #0D1330; --surface: #151D42; --fg: #EEF1FF; --muted: #A2AACB; --line: #28325E;
  --accent: #8FA2FF; --accent-ink: #0D1330; --accent-soft: #232E66; --lime: #8FA2FF;
  --alert: #FF7A7E; --alert-soft: #3D1A1E;
  --yes: #3FD38A; --yes-ink: #3FD38A; --yes-soft: #11352A;
  --maybe: #F5C342; --maybe-ink: #F5C342; --maybe-soft: #3A2F0C;
  --no: #FF7A7E; --no-ink: #FF7A7E; --no-soft: #3D1A1E;
  --dial: #EEF1FF; --dial-ink: #0D1330; --on-vote: #0D1330;
}

/* Typographie : Bricolage pour les titres et les chiffres (tabulaires), Instrument pour le texte. Plus de chasse fixe. */
body { font-size: 16.5px; }
.vtime, .time-chip, .slot-h .hh, .slot-h .mo, tr.total td, tr.total th, .vtally .num, .cal .dow, .share input, .count {
  font-family: var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.vtime { font-size: .92rem; font-weight: 600; }
.cal .dow { text-transform: none; font-size: .75rem; font-weight: 600; }
.slot-h .mo { text-transform: none; font-size: .78rem; }
.share input { font-size: .9rem; }
.eyebrow { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; color: var(--accent); }
h1 { letter-spacing: -0.03em; }
.panel h2 { font-size: 1.2rem; letter-spacing: -0.01em; }

/* Surfaces et contrôles */
.panel { border-radius: var(--r-panel); padding: 22px; border-color: var(--line); }
.btn { border-radius: var(--r-ctl); padding: 11px 20px; }
.btn.small { padding: 8px 14px; }
.btn.ghost { border-color: var(--line); background: var(--surface); color: var(--accent); }
.btn.ghost:hover { border-color: var(--accent); filter: none; }
.btn.danger { border-color: var(--no); color: var(--no-ink); background: transparent; }
.field input, .field select, .field textarea, .add-time input { border-radius: var(--r-ctl); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); outline-offset: 0; }
.time-chip { background: var(--accent-soft); color: var(--fg); }
.badge { font-family: var(--f-body); font-weight: 700; font-size: .72rem; border-radius: 999px; padding: 2px 9px; background: var(--accent); color: var(--accent-ink); }
.msg.info { background: var(--accent-soft); border-color: transparent; }
.msg.ok { background: var(--yes-soft); border-color: transparent; }
.msg.err { background: var(--no-soft); border-color: transparent; color: var(--fg); }
.notice-off { border-radius: var(--r-panel); }
.mypolls li { border-radius: var(--r-ctl); background: var(--surface); }
footer.foot { border-top: 0; }
.status { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600; padding: 4px 12px 4px 10px; border: 0; display: inline-flex; align-items: center; gap: 7px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.open { background: var(--yes-soft); color: var(--yes-ink); }
.status.closed { background: var(--accent-soft); color: var(--accent); }

/* Calendriers */
.cal button.day { border-radius: 9px; background: var(--surface); }
.cal button.day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal button.day.has { background: var(--accent-soft); border-color: transparent; color: var(--fg); }
.cal button.day.has.best { background: var(--accent); color: var(--accent-ink); }
.cal button.day.has.v-yes { background: var(--yes); border-color: var(--yes); color: var(--on-vote); }
.cal button.day.has.v-maybe { background: var(--maybe); border-color: var(--maybe); color: #241800; }
.cal button.day.has.v-no { background: var(--no-soft); border-color: transparent; color: var(--no-ink); text-decoration: line-through; }
.vlegend .lg::before { border: 0; background: var(--accent-soft); }
.vlegend .lg.v-yes::before { background: var(--yes); }
.vlegend .lg.v-maybe::before { background: var(--maybe); }
.vlegend .lg.v-no::before { background: var(--no-soft); box-shadow: inset 0 0 0 1px var(--no); }

/* Boutons de vote : toujours colorés ; pleins quand ils sont choisis */
.seg { border: 0; gap: 4px; overflow: visible; }
.seg button { border: 0; border-radius: 8px; font-weight: 700; transition: background-color .12s, color .12s, transform .08s; }
.seg button:active { transform: scale(.96); }
.seg button.yes { background: var(--yes-soft); color: var(--yes-ink); }
.seg button.maybe { background: var(--maybe-soft); color: var(--maybe-ink); }
.seg button.no { background: var(--no-soft); color: var(--no-ink); }
.seg button.yes:hover { box-shadow: inset 0 0 0 2px var(--yes); }
.seg button.maybe:hover { box-shadow: inset 0 0 0 2px var(--maybe); }
.seg button.no:hover { box-shadow: inset 0 0 0 2px var(--no); }
.seg button[aria-pressed="true"].yes { background: var(--yes); color: var(--on-vote); }
.seg button[aria-pressed="true"].maybe { background: var(--maybe); color: #241800; }
.seg button[aria-pressed="true"].no { background: var(--no); color: var(--on-vote); }
.vrow:has(.seg button[aria-pressed="true"]) .seg button[aria-pressed="false"] { opacity: .55; }
.seg .mine.yes { color: var(--yes-ink); } .seg .mine.maybe { color: var(--maybe-ink); } .seg .mine.no { color: var(--no-ink); }
.vbulk .btn:nth-of-type(1) { color: var(--yes-ink); border-color: var(--yes); background: var(--yes-soft); }
.vbulk .btn:nth-of-type(2) { color: var(--maybe-ink); border-color: var(--maybe); background: var(--maybe-soft); }
.vbulk .btn:nth-of-type(3) { color: var(--no-ink); border-color: var(--no); background: var(--no-soft); }

/* Liste des créneaux */
.vote-list { border-radius: 14px; border-color: var(--line); }
.vrow { background: var(--surface); }
.vrow.best { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.vtally .bar { background: var(--line); height: 7px; }
.vtally .bar .y { background: var(--yes); } .vtally .bar .m { background: var(--maybe); }
.vote-foot { border-radius: var(--r-panel); box-shadow: 0 -10px 30px color-mix(in srgb, var(--fg) 12%, transparent); }

/* Tableau organisateur */
.table-wrap { border-radius: 14px; }
.cell { border-radius: 9px; font-weight: 800; }
.cell.yes { background: var(--yes); color: var(--on-vote); }
.cell.maybe { background: var(--maybe); color: #241800; }
.cell.no { background: var(--no-soft); color: var(--no-ink); }
th.best, td.best { background: var(--accent-soft) !important; }
tr.me td, tr.me th { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.rank-row { border-radius: 12px; background: var(--surface); }
.rank-row.best { background: var(--accent-soft); border-color: var(--accent); }
.why { border-left-color: var(--no); }
.why.warn { border-left-color: var(--maybe); }

/* En-tête d'accueil : trois montres qui se calent sur la même heure */
.hero.home { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 40px; align-items: center; padding-block: 40px 28px; }
.hero.home h1 { max-width: 16ch; font-size: clamp(2.2rem, 5.4vw, 3.6rem); }
.hero.home .lead { margin-bottom: 0; }
.wordmark { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--accent); margin: 0 0 14px; letter-spacing: -0.01em; }
.watches { display: flex; align-items: center; }
.watch { width: 112px; height: 112px; flex: none; }
.watch + .watch { margin-left: -14px; }
.watch.w2 { width: 148px; height: 148px; z-index: 1; }
.watch .face { fill: var(--surface); stroke: var(--fg); stroke-width: 2.5; }
.watch .tick { stroke: var(--fg); stroke-linecap: round; }
.watch .hand { stroke: var(--fg); stroke-linecap: round; }
.watch .hand.s { stroke: var(--accent); }
.watch .pin { fill: var(--fg); }
.watch.w2 .face { fill: var(--dial); stroke: var(--dial); }
.watch.w2 .tick, .watch.w2 .hand { stroke: var(--dial-ink); }
.watch.w2 .hand.s { stroke: var(--maybe); }
.watch.w2 .pin { fill: var(--maybe); }
.watch.w3 .face { fill: var(--accent); stroke: var(--accent); }
.watch.w3 .tick, .watch.w3 .hand { stroke: var(--accent-ink); }
.watch.w3 .hand.s { stroke: var(--accent-ink); }
.watch.w3 .pin { fill: var(--accent-ink); }
.watch .hand { transform-box: view-box; transform-origin: 50px 50px; }
.watches.sync .hand { transition: transform 1.5s cubic-bezier(.16, .84, .24, 1); }
.watches.sync .w2 .hand { transition-delay: .12s; }
.watches.sync .w3 .hand { transition-delay: .24s; }
.watches.tick .hand.s { transition: none; }
@media (prefers-reduced-motion: reduce) { .watches.sync .hand { transition: none; } }
@media (max-width: 720px) {
  .hero.home { grid-template-columns: 1fr; padding-block: 20px 16px; }
  .watches { order: -1; }
  .watch { width: 72px; height: 72px; } .watch.w2 { width: 92px; height: 92px; } .watch + .watch { margin-left: -10px; }
}

/* En-tête d'un sondage */
.poll-head h1 { margin-bottom: 6px; }
.meta-line { gap: 4px 18px; }

/* Classement organisateur : bouton « Choisir » aligné à droite, plus discret hors meilleur créneau */
.rank-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 10px 14px; }
.rank-row > * { grid-column: 1; }
.rank-row > .btn { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
.rank-row:not(.best) > .btn { background: var(--surface); color: var(--accent); border-color: var(--line); }
.rank-row:not(.best) > .btn:hover { border-color: var(--accent); filter: none; }
@media (max-width: 560px) { .rank-row > .btn { grid-column: 1; grid-row: auto; justify-self: start; } }