/* Duo — agenda partagé */
:root {
  --bg: #0f0f17; --bg2: #171724; --bg3: #1f1f2f; --line: #2a2a3d; --line2: #34344a;
  --fg: #ecedf3; --fg2: #a5a8bd; --fg3: #6b6e85;
  --me: #3b82f6; --partner: #ec4899; --shared: #a78bfa; --now: #ef4444;
  --radius: 12px; --hour: 64px; --gutter: 52px; --header: 56px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f6f6fa; --bg2: #ffffff; --bg3: #f0f0f6; --line: #e3e3ec; --line2: #d5d5e2; --fg: #16161f; --fg2: #5b5e73; --fg3: #9093a8; --shadow: 0 10px 30px rgba(20,20,40,.12); color-scheme: light; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
body { overscroll-behavior: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
#app { height: 100%; display: flex; flex-direction: column; }

/* ─── login ─── */
.login { margin: auto; width: min(92vw, 380px); text-align: center; padding: 24px; }
.login .logo { width: 84px; height: 84px; margin: 0 auto 14px; }
.login h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -.02em; }
.login p { color: var(--fg2); margin: 0 0 28px; }
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.who button { padding: 18px 10px; border-radius: 16px; background: var(--bg2); border: 2px solid var(--line); font-weight: 600; font-size: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: .15s; }
.who button .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 18px; }
.who button.on { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 25%, transparent); }
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 14px; }
.field label { font-size: 12px; font-weight: 600; color: var(--fg2); text-transform: uppercase; letter-spacing: .06em; }
.field input, .field select, .field textarea { padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg3); outline: none; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--me); box-shadow: 0 0 0 3px color-mix(in oklab, var(--me) 25%, transparent); }
.btn { padding: 12px 18px; border-radius: 12px; font-weight: 600; background: var(--bg3); border: 1px solid var(--line2); display: inline-flex; align-items: center; gap: 8px; justify-content: center; transition: .12s; }
.btn:hover { border-color: var(--fg3); }
.btn.primary { background: var(--fg); color: var(--bg); border-color: transparent; }
.btn.danger { color: #fca5a5; border-color: color-mix(in oklab, #ef4444 40%, transparent); }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.err { color: #fca5a5; font-size: 13px; min-height: 18px; margin-top: 8px; }

/* ─── header ─── */
.top { height: var(--header); display: flex; align-items: center; gap: 10px; padding: 0 12px; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line); background: var(--bg); flex-shrink: 0; }
.top .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -.02em; font-size: 18px; }
.top .brand img { width: 26px; height: 26px; }
.top .title { font-weight: 600; color: var(--fg2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .spacer { flex: 1; }
.top .short { display: none; }
.nav { display: flex; gap: 4px; align-items: center; }
.icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--fg2); }
.icon:hover { background: var(--bg3); color: var(--fg); }
.chips { display: flex; gap: 6px; }
.chip { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--bg3); color: var(--fg2); border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fg3)); }
.chip.on { color: var(--fg); border-color: var(--c, var(--fg3)); background: color-mix(in oklab, var(--c, var(--fg3)) 16%, var(--bg3)); }
.fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 18px; background: var(--fg); color: var(--bg); font-size: 28px; display: grid; place-items: center; box-shadow: var(--shadow); z-index: 30; }

/* ─── bandeau « en ce moment » ─── */
.nowbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); flex-shrink: 0; }
.nowcard { background: var(--bg2); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--radius); padding: 8px 10px; min-width: 0; }
.nowcard .who { display: flex; margin: 0; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: .06em; }
.nowcard .what { font-weight: 600; font-size: 14px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowcard .meta { font-size: 12px; color: var(--fg2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowcard .bar { height: 4px; border-radius: 2px; background: var(--line2); margin-top: 7px; overflow: hidden; }
.nowcard .bar i { display: block; height: 100%; background: var(--c); transition: width 1s linear; }
.nowcard.free .what { color: var(--fg2); font-weight: 500; }

/* ─── grille ─── */
.cal { flex: 1; overflow: auto; position: relative; }
.cal-head { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: var(--gutter) repeat(var(--n), minmax(0, 1fr)); background: var(--bg); border-bottom: 1px solid var(--line); }
.dayhead { padding: 8px 4px 6px; text-align: center; border-left: 1px solid var(--line); }
.dayhead .wd { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg3); font-weight: 600; }
.dayhead .dn { font-size: 20px; font-weight: 700; line-height: 1.2; width: 34px; height: 34px; margin: 2px auto 0; display: grid; place-items: center; border-radius: 50%; }
.dayhead.today .dn { background: var(--now); color: #fff; }
.dayhead.today .wd { color: var(--now); }
.cal-body { display: grid; grid-template-columns: var(--gutter) repeat(var(--n), minmax(0, 1fr)); position: relative; }
.hours { position: relative; height: calc(var(--hours) * var(--hour)); }
.hours div { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.hours div:first-child { transform: none; }
.day { position: relative; height: calc(var(--hours) * var(--hour)); border-left: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% var(--hour); }
.day.today { background-color: color-mix(in oklab, var(--now) 4%, transparent); }
.day.weekend { background-color: color-mix(in oklab, var(--fg3) 5%, transparent); }
.ev { position: absolute; border-radius: 8px; padding: 4px 6px; font-size: 12px; line-height: 1.25; overflow: hidden; cursor: pointer;
  background: color-mix(in oklab, var(--c) 22%, var(--bg2)); border-left: 3px solid var(--c); color: var(--fg); transition: filter .12s; }
.ev:hover { filter: brightness(1.15); z-index: 3; }
.ev b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev span { display: block; color: var(--fg2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.shared { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--shared) 26%, var(--bg2)) 0 6px, color-mix(in oklab, var(--shared) 16%, var(--bg2)) 6px 12px); }
.ev.past { opacity: .55; }
.ev.live { box-shadow: 0 0 0 2px var(--c), var(--shadow); z-index: 2; }
.ev.tiny { padding: 1px 6px; font-size: 11px; }
.ev.tiny span { display: none; }
.ev.short span + span { display: none; }
.ev.mid span + span { display: none; }
.chip.all .lbl { display: inline !important; }

/* trait rouge « maintenant » */
.nowline { position: absolute; left: 0; right: 0; height: 2px; background: var(--now); z-index: 4; pointer-events: none; transition: top 1s linear; box-shadow: 0 0 6px color-mix(in oklab, var(--now) 60%, transparent); }
.nowline::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--now); }
.nowpill { position: absolute; left: 4px; z-index: 6; transform: translateY(-50%); background: var(--now); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; pointer-events: none; transition: top 1s linear; box-shadow: var(--shadow); }
.nowghost { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in oklab, var(--now) 55%, transparent); z-index: 1; pointer-events: none; transition: top 1s linear; }

/* ─── modales ─── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .overlay { align-items: center; } }
.modal { background: var(--bg2); border: 1px solid var(--line); border-radius: 20px 20px 0 0; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--shadow); animation: up .18s ease-out; }
@media (min-width: 640px) { .modal { border-radius: 20px; } }
@keyframes up { from { transform: translateY(20px); opacity: 0; } }
.modal h2 { margin: 0 0 14px; font-size: 18px; display: flex; align-items: center; justify-content: space-between; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--bg3); padding: 4px; border-radius: 12px; }
.seg button { padding: 9px 6px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--fg2); display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg button.on { background: var(--bg2); color: var(--fg); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.seg button.on .dot { background: var(--c); }
.seg .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg3); }
.check { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; line-height: 1.3; }
.check input { flex-shrink: 0; }
.field .check { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; color: var(--fg); }
.check input { width: 20px; height: 20px; accent-color: var(--me); }
.actions { display: flex; gap: 10px; margin-top: 16px; }
.actions .btn { flex: 1; }
.conflicts { margin-top: 10px; padding: 10px 12px; background: color-mix(in oklab, #f59e0b 14%, var(--bg3)); border: 1px solid color-mix(in oklab, #f59e0b 40%, transparent); border-radius: 10px; font-size: 13px; }
.conflicts b { display: block; margin-bottom: 4px; }
.conflicts div { color: var(--fg2); }
.detail .k { font-size: 12px; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: 10px; }
.detail .v { font-size: 15px; white-space: pre-wrap; }
.detail .big { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in oklab, var(--c) 18%, var(--bg3)); color: var(--c); }
.slots { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; margin-top: 12px; }
.slot { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--bg3); border-radius: 10px; border: 1px solid var(--line); text-align: left; }
.slot:hover { border-color: var(--shared); }
.slot b { font-weight: 600; }
.slot span { color: var(--fg2); font-size: 13px; }
.hint { font-size: 13px; color: var(--fg2); margin: 8px 0; }
.sep { height: 1px; background: var(--line); margin: 16px 0; }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; z-index: 50; box-shadow: var(--shadow); animation: up .2s; max-width: 90vw; text-align: center; }
.ulist { display: grid; gap: 10px; }
.urow { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.urow input[type=color] { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.urow input[type=text] { padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg3); width: 100%; }

.tools { display: flex; gap: 6px; align-items: center; }
@media (max-width: 640px) {
  :root { --hour: 60px; --gutter: 44px; }
  /* zone sûre iOS (encoche / îlot dynamique) : le padding-top ne doit JAMAIS être écrasé ici */
  .top { height: auto; flex-wrap: wrap; row-gap: 8px; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 10px 10px; }
  .top .brand span { display: none; }
  .tools { width: 100%; order: 10; gap: 5px; }
  .tools .spacer { flex: 1; }
  .top .title { font-size: 15px; font-weight: 700; color: var(--fg); min-width: 0; flex: 1; }
  .top .nav .btn.sm { padding: 8px 10px; border-radius: 999px; }
  .top .icon, .icon.zoom { height: 34px; }
  .nowbar { padding: 10px 10px; gap: 8px; }
  .cal-body { padding-right: 8px; }
  .cal-head { padding-right: 8px; }
  .ev { border-radius: 10px; padding: 4px 8px; }
  .top .nav { gap: 2px; }
  .top .nav .btn.sm { padding: 7px 9px; }
  .top .long { display: none; } .top .short { display: inline; }
  .top .title { padding: 4px 4px; }
  .chip { padding: 6px 8px; }
  .top .icon { width: 32px; }
  .icon.zoom { width: 28px; }
  .viewsel { padding: 6px 20px 6px 9px; font-size: 12px; }
  .top .title { font-size: 13px; }
  .chip { padding: 6px 9px; font-size: 12px; }
  .chip .lbl { display: none; }
  .chip.on .lbl { display: inline; }
  .nowcard .what { font-size: 13px; }
}

/* ─── sélecteur de vue, zoom, saut de date ─── */
.top .title { background: none; padding: 4px 8px; border-radius: 8px; text-align: left; }
.top .title:hover { background: var(--bg3); color: var(--fg); }
.jump { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.viewsel { appearance: none; -webkit-appearance: none; padding-right: 22px; background-image: linear-gradient(45deg, transparent 50%, var(--fg2) 50%), linear-gradient(135deg, var(--fg2) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%; background-size: 4px 4px; background-repeat: no-repeat; cursor: pointer; }
.icon.zoom { font-size: 20px; font-weight: 600; width: 30px; }
.cal.dense .ev { padding: 2px 3px; font-size: 10px; border-left-width: 2px; border-radius: 5px; }
.cal.dense .ev span { display: none; }
.cal.dense .dayhead .dn { font-size: 15px; width: 26px; height: 26px; }
.cal.dense .dayhead .wd { font-size: 9px; }

/* ─── vue mois ─── */
.cal.month { display: flex; flex-direction: column; }
.m-head { display: grid; grid-template-columns: repeat(7, 1fr); position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.m-head div { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg3); font-weight: 600; padding: 8px 0 6px; }
.m-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(96px, 1fr); flex: 1; }
.m-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.m-cell:hover { background: var(--bg3); }
.m-cell.other { opacity: .38; }
.m-cell.weekend { background: color-mix(in oklab, var(--fg3) 5%, transparent); }
.m-cell.today { background: color-mix(in oklab, var(--now) 6%, transparent); }
.m-num { font-size: 13px; font-weight: 600; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 2px; }
.m-cell.today .m-num { background: var(--now); color: #fff; }
.m-ev { font-size: 11px; line-height: 1.3; padding: 1px 5px; border-radius: 5px; border-left: 3px solid var(--c); background: color-mix(in oklab, var(--c) 20%, var(--bg2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ev span { color: var(--fg2); font-variant-numeric: tabular-nums; }
.m-ev.shared { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--shared) 26%, var(--bg2)) 0 5px, color-mix(in oklab, var(--shared) 14%, var(--bg2)) 5px 10px); }
.m-more { font-size: 11px; color: var(--fg2); padding-left: 5px; }
.m-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.m-dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.m-count { font-size: 11px; color: var(--fg2); margin-top: auto; }
@media (max-width: 640px) {
  .m-grid { grid-auto-rows: minmax(58px, 1fr); }
  .m-cell { padding: 3px; }
  .m-num { font-size: 12px; width: 22px; height: 22px; }
}