/* Paragon Mission Control, phone layout (Nov 6, 2026). Loaded by index.html with media="(max-width: 820px)",
   so a computer never applies it. Same brand kit as app.css (#f5f5f7, white, #1d1d1f, orange as the only accent, Inter),
   laid out like an iPhone app: bottom tab bar, large titles, grouped lists, sheets that slide up, 44 px touch targets.
   Every class here starts with "m-" so it never collides with the computer styles. Screens: js/m/. */
:root{
  --m-bg:#f5f5f7; --m-card:#fff; --m-sep:#e5e5ea; --m-label:#636366; --m-mute:#6e6e73; --m-chev:#c7c7cc; --m-fill:#f2f2f7; --m-track:#e8e8ed;
  --m-safe-t:env(safe-area-inset-top,0px); --m-safe-b:env(safe-area-inset-bottom,0px); --m-tab:56px;
  --m-spring:cubic-bezier(.32,.72,0,1);
}
html{background:var(--m-bg)}
body.phone{font-size:17px;line-height:1.35;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
/* the computer menu gives way to the tab bar */
body.phone .nav{display:none !important}
body.phone .shell{display:block;min-height:100dvh}
body.phone .main{padding-bottom:calc(var(--m-tab) + var(--m-safe-b) + 20px)}
body.phone[data-route="lead"] .main{padding-bottom:calc(84px + var(--m-safe-b))}
body.phone.m-selecting .main{padding-bottom:calc(var(--m-tab) + var(--m-safe-b) + 20px)}
/* iOS zooms into any field under 16 px */
input,select,textarea{font-size:16px !important}
html.m-locked,html.m-locked body{overflow:hidden}

/* ---------- page ---------- */
.m-page{max-width:680px;margin:0 auto;padding:calc(var(--m-safe-t) + 10px) 16px 16px;display:flex;flex-direction:column;gap:18px}
.m-loading{color:var(--m-mute);padding:24px 4px;font-size:15px}
.main>div:not(.settled) .m-page>*{animation:rise 380ms var(--ease) both}
.main>div:not(.settled) .m-page>*:nth-child(3){animation-delay:40ms}
.main>div:not(.settled) .m-page>*:nth-child(n+4){animation-delay:80ms}
.m-top{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:36px}
.m-top.sel{display:grid;grid-template-columns:1fr auto 1fr;justify-content:stretch}
.m-top.sel .m-link.end{justify-self:end}
.m-top-title{font-size:17px;font-weight:600;text-align:center;white-space:nowrap}
.m-top .m-link:first-child:not(:only-child){margin-right:auto}
.m-circle{width:36px;height:36px;border-radius:50%;background:var(--m-track);color:var(--ink);display:flex;align-items:center;justify-content:center;text-decoration:none;flex:none;transition:transform 120ms}
.m-circle:active{transform:scale(.92)}
.m-circle.me{background:var(--grad-fill);color:#1d1d1f;font:700 13px var(--display)}
.m-circle.me.seb{background:var(--ink);color:#fff}
.m-link{border:0;background:none;padding:0;min-height:44px;display:inline-flex;align-items:center;gap:6px;font:500 17px var(--display);color:var(--accent-ink);text-decoration:none;cursor:pointer}
.m-link:active{opacity:.55}
.m-link.block{align-self:flex-start;padding:0 4px;font-size:15px}
.m-title{display:flex;flex-direction:column;gap:2px;margin-top:-4px}
.m-title h1{font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.022em}
.m-title.inline{flex-direction:row;align-items:baseline;gap:10px}
.m-title.split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px}
.m-over{font:600 13px/18px var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--m-label)}
.m-sub{font-size:15px;line-height:20px;color:var(--m-mute)}
.m-count{font-size:20px;font-weight:600;color:var(--m-mute)}
.m-eyebrow{font:700 12px/16px var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}
.m-hint{font-size:13px;line-height:18px;color:var(--m-mute);padding:0 4px;margin-top:2px}
.m-p{font-size:16px;line-height:22px}
.m-warn{font-size:14px;line-height:19px;color:var(--amber);background:var(--amber-soft);padding:10px 12px;border-radius:12px}
.m-s{font-size:14px;line-height:19px;color:var(--m-mute)}
.m-s.late,.late{color:var(--red)}
.m-stack{display:flex;flex-direction:column;gap:14px}
.m-list{display:flex;flex-direction:column;gap:20px}

/* ---------- grouped lists ---------- */
.m-sec{display:flex;flex-direction:column;gap:6px}
.m-h{margin:0 0 0 4px;font:600 13px/18px var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--m-label)}
.m-h.big{margin:0;font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.m-group{background:var(--m-card);border-radius:16px;overflow:hidden;--inset:16px}
.m-group.av{--inset:68px}
.m-group.ic{--inset:58px}
.m-group.pk{--inset:52px}
.m-group.q{--inset:74px}
.m-group>*{position:relative}
.m-group>*:not(:last-child)::after{content:"";position:absolute;left:var(--inset);right:0;bottom:0;height:1px;background:var(--m-sep);z-index:2;pointer-events:none}
.m-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:0 14px 0 16px;border:0;background:var(--m-card);color:var(--ink);text-decoration:none;text-align:left;font:inherit;cursor:pointer;transition:background 150ms}
.m-row:active{background:#ebebf0}
.m-row>.m-i:last-child{color:var(--m-chev);flex:none}
.m-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:9px 0}
.m-t{font-size:17px;line-height:22px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.m-t b{font-weight:600}
.m-body .m-s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-group.av .m-t,.m-group.pk .m-t,.m-group.q .m-t{font-weight:500}
.m-end{flex:none;font-size:15px;color:var(--m-mute);font-variant-numeric:tabular-nums}
.m-end.small{font-size:13px}
.m-end.hot{color:var(--accent-ink);font-weight:600}
.m-end.late{color:var(--red);font-weight:600}
.m-row.soon{cursor:default}.m-row.soon .m-t{color:var(--m-mute)}
.m-row.soon:active{background:var(--m-card)}
.m-opt.danger .m-t{color:var(--red)}
.m-opt.center .m-t{text-align:center}
.m-tick{color:var(--accent-ink);flex:none;display:flex}
.m-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#ffe2cc,#fff4ec);color:var(--accent-deep);font:700 15px/1 var(--display);letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;flex:none}
.m-av.out{background:var(--m-track);color:var(--m-mute)}
.m-av.lg{width:60px;height:60px;font-size:21px}
.m-av.me{background:var(--grad-fill);color:#1d1d1f}
.m-av.seb{background:var(--ink);color:#fff}
.m-av.xl{width:84px;height:84px;font-size:30px}
.m-ico{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#1d1d1f;display:flex;align-items:center;justify-content:center;flex:none}
.m-ico.dark{background:var(--ink);color:#fff}
.m-ico.grey{background:#8e8e93;color:#fff}
.m-score{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font:700 12px var(--display);background:var(--m-track);color:var(--ink);flex:none}
.m-score.A{background:var(--ink);color:#fff}
.m-score.C{background:transparent;box-shadow:inset 0 0 0 1px #aeaeb2;color:var(--m-mute)}
.m-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 16px;color:var(--m-chev);text-align:center}
.m-empty .m-t{color:var(--m-mute);white-space:normal}

/* ---------- buttons ---------- */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;border:0;border-radius:14px;font:600 17px/1.2 var(--display);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 120ms,opacity 120ms,background 150ms}
.m-btn:active{transform:scale(.97);opacity:.88}
.m-btn[disabled]{opacity:.38;cursor:not-allowed;transform:none}
.m-btn.primary{background:var(--grad-button);color:#1d1d1f}
.m-btn.primary.danger{background:var(--red);color:#fff}
.m-btn.dark{background:var(--ink);color:#fff}
.m-btn.soft{background:#e9e9ee;color:var(--ink)}
.m-btn.white{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--m-sep)}
.m-btn.plain{background:none;color:var(--accent-ink);min-height:44px;font-weight:500}
.m-btn.sm{min-height:36px;padding:0 14px;border-radius:999px;font-size:15px}
.m-btn.big{min-height:54px;border-radius:15px}
.m-btn.sq{width:54px;padding:0;flex:none}
.m-btn.sq:not(.big){width:52px;min-height:52px}
.m-btn.wide{width:100%}
.m-btn.grow{flex:1 1 auto}
.m-row-btns{display:flex;gap:10px}
.m-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-badge{font:600 12px/16px var(--display);color:var(--accent-deep);background:var(--accent-soft);padding:4px 10px;border-radius:999px}
.m-badge.late{color:var(--red);background:var(--red-soft)}

/* ---------- cards ---------- */
.m-card{background:var(--m-card);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.06)}
.m-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.m-next-main{display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:var(--ink)}
.m-next-main .m-body{padding:0}
.m-next-time{font:700 30px/34px var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;flex:none}
.m-next-time.word{font-size:22px;line-height:34px}
.m-next-name{font-size:19px;line-height:24px;font-weight:600;letter-spacing:-.01em}
.m-quote{font-size:15px;line-height:21px;color:var(--ink2);background:var(--m-bg);border-radius:12px;padding:10px 12px}
.m-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.m-tile{background:var(--m-card);border-radius:16px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);transition:transform 120ms}
.m-tile:active{transform:scale(.97)}
.m-tile b{font:700 28px/32px var(--display);font-variant-numeric:tabular-nums}
.m-tile b.hot{color:var(--accent-ink)}
.m-tile span{font:600 13px/17px var(--display)}
.m-tile small{font-size:12px;line-height:16px;color:var(--m-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-ev .m-s{white-space:nowrap}

/* ---------- search, chips, segmented ---------- */
.m-search{display:flex;align-items:center;gap:6px;height:38px;border-radius:11px;background:var(--m-track);padding:0 8px 0 10px;color:#8e8e93;margin-top:-8px}
.m-search input{flex:1 1 auto;min-width:0;height:38px;min-height:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important;font:17px var(--display) !important;color:var(--ink);-webkit-appearance:none;appearance:none}
.m-search input::-webkit-search-cancel-button{display:none}
.m-search input:focus{box-shadow:none !important}
.m-search-x{width:20px;height:20px;border-radius:50%;border:0;background:#8e8e93;color:var(--m-track);display:flex;align-items:center;justify-content:center;padding:0;flex:none;cursor:pointer}
.m-chips{display:flex;gap:8px;overflow-x:auto;margin:-6px -16px 0;padding:2px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.m-chips::-webkit-scrollbar{display:none}
.m-chip{flex:none;height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--m-card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--m-sep);font:500 14px var(--display);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;transition:background 150ms,color 150ms}
.m-chip:active{transform:scale(.96)}
.m-chip.on{background:var(--ink);color:#fff;box-shadow:none;font-weight:600}
.m-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:34px;border-radius:10px;background:var(--m-track);padding:2px;gap:2px}
.m-seg>*{border:0;border-radius:8px;background:transparent;font:500 13px var(--display);color:var(--ink);display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;padding:0 10px;white-space:nowrap;transition:background 180ms,box-shadow 180ms}
.m-seg>[aria-selected="true"]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);font-weight:600}
.m-seg,.m-msg{scroll-margin-top:12px}
.m-seg.sm{height:32px;grid-auto-columns:auto;border-radius:9px;margin-bottom:4px}
.m-seg.sm>*{border-radius:7px;padding:0 12px}

/* ---------- swipe rows ---------- */
.m-swipe{overflow:hidden;background:var(--m-card)}
.m-swipe-acts{position:absolute;top:0;right:0;bottom:0;display:flex}
.m-swipe-acts button{width:76px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 12px var(--display);cursor:pointer}
.m-swipe-acts .sms{background:var(--accent);color:#1d1d1f}
.m-swipe-acts .call{background:var(--ink);color:#fff}
.m-swipe-acts button[disabled]{background:#c7c7cc;color:#fff}
.m-swipe-front{position:relative;z-index:1;touch-action:pan-y;transition:transform 300ms var(--m-spring);will-change:transform}
.m-pickrow{gap:14px}
.m-tickbox{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px #c7c7cc;display:flex;align-items:center;justify-content:center;flex:none;color:#1d1d1f;transition:background 150ms}
.m-tickbox.on{background:var(--accent);box-shadow:none}
.m-tickbox .m-i{stroke-width:3.4}

/* ---------- tab bar, selection bar, action bar ---------- */
.m-tabbar,.m-selbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(var(--m-tab) + var(--m-safe-b));padding:7px 6px var(--m-safe-b);background:rgba(250,250,252,.84);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid rgba(0,0,0,.16)}
.m-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--m-mute);font:500 10px/12px var(--display);letter-spacing:.01em}
.m-tab .m-i{color:#8e8e93;transition:transform 200ms var(--m-spring)}
.m-tab:active .m-i{transform:scale(.88)}
.m-tab[aria-current="page"]{color:var(--accent-ink);font-weight:600}
.m-tab[aria-current="page"] .m-i{color:var(--accent)}
.m-tab:hover{color:var(--m-mute)}.m-tab[aria-current="page"]:hover{color:var(--accent-ink)}
.m-tab-badge{position:absolute;top:-3px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#1d1d1f;font:700 11px/18px var(--display);text-align:center;box-shadow:0 0 0 2px rgba(250,250,252,.9)}
body[data-route="lead"] .m-tabbar,body.m-selecting .m-tabbar{display:none}
.m-selbar{display:none}
body.m-selecting .m-selbar{display:grid}
.m-selbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;font:500 10px/12px var(--display);color:var(--ink2);cursor:pointer}
.m-selbar button:first-child{color:var(--accent-ink);font-weight:600}
.m-selbar button:first-child .m-i{color:var(--accent)}
.m-selbar button.danger{color:var(--red)}
.m-selbar button:active .m-i{transform:scale(.88)}
.m-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;padding:10px 16px calc(10px + var(--m-safe-b));background:rgba(245,245,247,.88);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid rgba(0,0,0,.14)}
.m-actionbar .m-btn{min-height:52px}
.m-actionbar>*{max-width:680px}

/* ---------- lead card ---------- */
.m-navbar{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0 -6px -8px}
.m-backbar{max-width:680px;margin:0 auto;padding:calc(var(--m-safe-t) + 4px) 10px 0}
.m-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;font:500 17px var(--display);color:var(--accent-ink);text-decoration:none}
.m-back .m-i{margin-left:-2px;stroke-width:2.6}
.m-back:active{opacity:.55}
.m-hero{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.m-hero-av{position:relative}
.m-hero-score{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;border:3px solid var(--m-bg);display:flex;align-items:center;justify-content:center;font:700 12px var(--display);box-sizing:content-box}
.m-hero h1{font-size:26px;line-height:32px;font-weight:700;letter-spacing:-.02em;margin-top:2px;overflow-wrap:anywhere}
.m-hero .m-s{font-size:15px;line-height:20px}
.m-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:2px}
.m-tag{height:30px;padding:0 10px 0 12px;border:0;border-radius:999px;font:600 13px var(--display);display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.m-tag.grey{background:var(--m-track);color:var(--ink)}
.m-tag:active{transform:scale(.96)}
.m-rappel{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--accent-ink)}
.m-rappel.late{color:var(--red)}
.m-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.m-act{height:64px;border:0;border-radius:14px;background:var(--m-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--accent-ink);font:600 12px var(--display);text-decoration:none;cursor:pointer;transition:transform 120ms,background 150ms}
.m-act .m-i{color:var(--accent)}
.m-act:active{transform:scale(.95);background:#fff6ef}
.m-act[aria-disabled="true"],.m-act.off{opacity:.38;cursor:not-allowed;transform:none;background:var(--m-card)}
.m-tabbody{display:flex;flex-direction:column;gap:14px;min-height:40vh}
.m-nextact{background:var(--m-card);border-radius:16px;padding:12px 14px 12px 16px;display:flex;align-items:center;gap:12px;box-shadow:inset 0 0 0 1px var(--accent-tint)}
.m-nextact .m-t{font-weight:600;white-space:normal}
.m-nextact.out{box-shadow:none}.m-nextact.out .m-eyebrow{color:var(--m-mute)}
.m-quote-card{background:var(--accent-soft);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.m-quote-card p{font-size:16px;line-height:22px;color:var(--ink)}
.m-kv{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px 0 16px;color:var(--ink);text-decoration:none;cursor:default}
a.m-kv,.m-kv[role="button"]{cursor:pointer}
a.m-kv:active,.m-kv[role="button"]:active{background:#ebebf0}
.m-kv .k{font-size:15px;color:var(--m-mute);flex:none}
.m-kv .v{flex:1 1 auto;min-width:0;text-align:right;font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.m-kv .v.chips{justify-content:flex-end}
a.m-kv .v{color:var(--accent-ink)}
.m-kv>.m-i:last-child{color:var(--m-chev);flex:none}
.m-crit{display:flex;flex-wrap:wrap;gap:6px;padding:0 2px}
.m-crit .ok{background:var(--green-soft);color:var(--green)} .m-crit .ko{background:var(--red-soft);color:var(--red)}
.m-evrow{display:flex;flex-direction:column;gap:2px;padding:10px 16px}
.m-evrow.hot{background:var(--accent-soft)}
.m-evk{display:flex;justify-content:space-between;gap:10px;font:600 11px/16px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--m-mute)}
.m-evk time{font-weight:500;letter-spacing:0;text-transform:none;font-size:12px;flex:none}
.m-evt{font-size:15px;line-height:21px;overflow-wrap:anywhere}
.m-noteform{display:flex;gap:8px;align-items:center}
.m-noteform .m-input{flex:1 1 auto;min-width:0}
/* message cards */
.m-msg{background:var(--m-card);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.m-msg.off{opacity:.55}
.m-msg header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.m-msg header b{font-size:16px;font-weight:600}
.m-msg-text{white-space:pre-wrap;font-size:15px;line-height:1.5;background:var(--m-bg);border-radius:12px;padding:10px 12px;overflow-wrap:anywhere}
.m-msg-acts{display:flex;flex-wrap:wrap;gap:8px}
/* the fiche form, iOS-style grouped fields */
.m-group.form{--inset:16px}
.m-frow{display:flex;flex-direction:column;gap:1px;padding:8px 16px 6px;cursor:text}
.m-frow>span{font-size:12px;line-height:16px;font-weight:500;color:var(--m-mute)}
.m-frow input:not([type=checkbox]),.m-frow select,.m-frow textarea{border:0 !important;box-shadow:none !important;background:transparent !important;padding:0 !important;min-height:30px !important;border-radius:0;font:17px/1.35 var(--display) !important;color:var(--ink);width:100%}
.m-frow textarea{resize:none;padding-top:4px !important}
.m-frow select{-webkit-appearance:none;appearance:none}
.m-frow.switch{flex-direction:row;align-items:center;justify-content:space-between;min-height:50px;padding-top:0;padding-bottom:0;cursor:pointer}
.m-frow.switch>span{font-size:17px;font-weight:400;color:var(--ink)}
.m-frow input[type=checkbox]{-webkit-appearance:none;appearance:none;width:51px;height:31px;border-radius:999px;background:#e9e9ea;position:relative;flex:none;margin:0;cursor:pointer;transition:background 200ms}
.m-frow input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform 220ms var(--m-spring)}
.m-frow input[type=checkbox]:checked{background:var(--accent)}
.m-frow input[type=checkbox]:checked::after{transform:translateX(20px)}

/* ---------- calls ---------- */
.m-prog{height:5px;border-radius:3px;background:var(--m-track);overflow:hidden;margin-top:-6px}
.m-prog i{display:block;height:5px;border-radius:3px;background:var(--grad-button);min-width:5px;transition:width 500ms var(--ease)}
.m-focus{gap:12px}
.m-focus-name{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.m-focus-name h2{font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.018em}
.m-focus-name .m-s{font-size:15px;line-height:20px}
.m-phone-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.m-phone{font:600 28px/34px var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.m-last{display:flex;gap:10px;font-size:14px;line-height:19px}
.m-last .m-s{flex:none;width:70px;font-size:13px}
.m-focus.done{align-items:center;text-align:center;padding:28px 18px}
.m-focus.done h2{font-size:21px;line-height:26px}
.m-done-ico{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.m-qtime{width:46px;flex:none;font:600 15px var(--display);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.m-qtime.soft{color:var(--m-mute);font-weight:500;font-size:13px}
.m-qtime.late{color:var(--red);font-size:13px}

/* ---------- plus ---------- */
.m-profile{display:flex;align-items:center;gap:14px;background:var(--m-card);border-radius:16px;padding:14px 16px}
.m-profile .m-t{font-size:19px;font-weight:600}
.m-foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0 4px}
.m-foot img{height:22px;width:auto;opacity:.9}
.m-foot span{font-size:12px;color:var(--m-mute);letter-spacing:.04em}
.m-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.m-steps li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:22px}
.m-steps .m-i{vertical-align:-3px;color:var(--accent-ink)}
.m-num{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font:700 13px/26px var(--display);text-align:center;flex:none}

/* ---------- sheets ---------- */
.m-backdrop{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.34);opacity:0;transition:opacity 280ms ease}
.m-backdrop.on{opacity:1}
.m-sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-width:680px;margin:0 auto;max-height:calc(100dvh - var(--m-safe-t) - 28px);display:flex;flex-direction:column;background:var(--m-bg);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.22);transform:translateY(105%);transition:transform 380ms var(--m-spring);padding-bottom:var(--m-safe-b)}
.m-sheet.on{transform:none}
.m-grab{align-self:center;width:38px;height:5px;border-radius:3px;background:#c7c7cc;margin:8px 0 0;flex:none}
.m-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 16px 12px;flex:none;touch-action:none}
.m-sheet-titles{min-width:0}
.m-sheet-head h2{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.015em}
.m-sheet-head p{font-size:15px;line-height:20px;color:var(--m-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-x{width:32px;height:32px;border-radius:50%;border:0;background:var(--m-track);color:var(--m-mute);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:0}
.m-x .m-i{stroke-width:2.6}
.m-sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px 16px;display:flex;flex-direction:column;gap:14px;min-height:0}
.m-sheet-foot{padding:10px 16px 12px;flex:none;display:flex;flex-direction:column;gap:4px;border-top:.5px solid rgba(0,0,0,.08)}
.m-field{display:flex;flex-direction:column;gap:6px}
.m-field>label,.m-lab{margin-left:4px;font:600 13px/18px var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--m-label)}
.m-input{width:100%;min-height:48px !important;border:0 !important;border-radius:12px !important;background:#fff !important;padding:0 14px !important;font:17px var(--display) !important;color:var(--ink);box-shadow:none !important}
textarea.m-input{padding:12px 14px !important;line-height:1.4;resize:none}
.m-input:focus{box-shadow:0 0 0 3px #ec660b3d !important}
.m-pills{display:flex;flex-wrap:wrap;gap:8px}
.m-pill{height:34px;padding:0 13px;border-radius:999px;border:1px solid #d9d9de;background:#fff;font:500 14px var(--display);color:var(--ink);cursor:pointer;transition:background 150ms,color 150ms}
.m-pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.m-pill:active{transform:scale(.96)}
.m-select select{border:0 !important;box-shadow:none !important;background:transparent !important;min-height:44px !important;width:auto;max-width:52%;padding:0 4px 0 0 !important;text-align:right;text-align-last:right;color:var(--m-mute);-webkit-appearance:none;appearance:none;font:17px var(--display) !important;direction:ltr}
.m-select .m-i{color:var(--m-chev);flex:none}
.m-select .m-body{flex:0 1 auto}
.m-select{justify-content:space-between}
/* call result rows */
.m-results{--inset:66px}
.m-res-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:0 14px;border:0;background:transparent;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.m-res-row .m-t{font-weight:600}
.m-res-row .m-s{white-space:normal}
.m-res-ico{width:38px;height:38px;border-radius:50%;background:var(--m-fill);color:var(--ink2);display:flex;align-items:center;justify-content:center;flex:none;transition:background 180ms,color 180ms}
.m-res.warm .m-res-ico{background:var(--accent-soft);color:var(--accent-ink)}
.m-res.danger .m-t{color:var(--red)}
.m-res.danger .m-res-ico{background:var(--red-soft);color:var(--red)}
.m-res .m-tick{visibility:hidden}
.m-res-more{display:none;padding:0 14px 14px 64px;flex-direction:column;gap:10px}
.m-res.on{background:#fffaf6;box-shadow:inset 3px 0 0 var(--accent)}
.m-res.on .m-tick{visibility:visible}
.m-res.on .m-res-ico{background:var(--accent);color:#1d1d1f}
.m-res.danger.on{background:#fff6f6;box-shadow:inset 3px 0 0 var(--red)}
.m-res.danger.on .m-res-ico{background:var(--red);color:#fff}
.m-res.danger.on .m-tick{color:var(--red)}
.m-res.on .m-res-more{display:flex}

/* ---------- computer screens shown on a phone (Parcours, Données, Ajouter) ---------- */
body.phone .page-head{background:transparent;padding:4px 16px 4px;max-width:680px;margin:0 auto}
body.phone .page-head::before,body.phone .page-head::after{display:none}
body.phone .page-head h1{font-size:30px;line-height:36px;letter-spacing:-.02em}
body.phone .page-body{max-width:680px;margin:0 auto;padding-top:8px}
body.phone .card,body.phone .kpi,body.phone .stage{border:0;border-radius:16px;box-shadow:none}
body.phone .loading{padding:24px 16px}
body.phone .error-box{margin:16px;border-radius:16px}

/* ---------- toasts: a pill at the top, like iOS banners ---------- */
.toasts{top:calc(var(--m-safe-t) + 8px);bottom:auto;left:16px;right:16px;max-width:none;align-items:center;z-index:120}
.toast{border-radius:999px;padding:11px 18px;font-size:15px;font-weight:500;text-align:center;max-width:100%;box-shadow:0 8px 30px rgba(0,0,0,.18);animation:m-toast 320ms var(--m-spring) both}
@keyframes m-toast{from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:none}}

@media (hover:hover){.m-row:hover{background:#fafafc}.m-btn.primary:hover{filter:brightness(1.03)}}

/* ---------- v2.1 (Nov 8, 2026): phone pass ---------- */
.m-ico.amber{background:linear-gradient(160deg,#ffd36a,#f1a10f);color:#fff} .m-ico.teal{background:linear-gradient(160deg,#4fd6d0,#14949a);color:#fff}
.m-ico.purple{background:linear-gradient(160deg,#b38bff,#7646f0);color:#fff} .m-ico.green{background:linear-gradient(160deg,#5fdc7c,#20a94a);color:#fff}
button.m-profile{width:100%;border:0;font:inherit;text-align:left;cursor:pointer;color:inherit}
img.m-av{object-fit:cover}
/* every control a finger can hit comfortably: 44 px */
.btn{min-height:44px}
.btn-sm{min-height:40px}
.tool-btn{width:40px;height:40px;border-radius:12px}
.ph-chip{min-height:34px;padding:0 10px;display:inline-flex;align-items:center}
.m-tag{min-height:34px}
/* pop-ups become sheets that slide up from the bottom, with a grabber */
.modal{width:100vw !important;max-width:100vw !important;max-height:92dvh;margin:auto auto 0 !important;border-radius:22px 22px 0 0 !important;animation:sheet-up 420ms cubic-bezier(.16,1,.3,1) both;padding-bottom:env(safe-area-inset-bottom)}
.modal::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:rgba(29,29,31,.18);z-index:3}
.modal-head{padding-top:20px}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.modal::backdrop{background:rgba(0,0,0,.32)}
.modal-body{padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
/* the « Nouvelle démo » window on a phone: full height, steps in the header line, big touch targets */
.modal-create{height:92dvh !important}
.modal-create .modal-body{padding:0}
.wiz-main{padding:24px 18px 0 !important}
.wiz-head h3{font-size:24px}
.wiz-foot{margin:auto -18px 0 !important;padding:12px 18px calc(12px + env(safe-area-inset-bottom)) !important}
.wiz-foot .btn{flex:1}
.wiz-foot .wiz-sum{display:none}
.method{flex-direction:row;align-items:center;padding:12px;gap:12px}
.method-art{display:none}
.method-go{position:static;opacity:1;transform:none;margin-left:auto;flex:none}
.method-text{display:none}
.method-title b{font-size:16px}
.pick-grid{grid-template-columns:1fr 1fr;gap:10px}
.pick-meta a{display:none}
.lead-opt{padding:12px 14px !important}
/* Démos on a phone */
.demo-grid{grid-template-columns:1fr;gap:14px}
.demo-card:hover{transform:none}
.page-head .actions .btn{flex:1 1 auto}
.seg.seg-lg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
.seg.seg-lg .seg-opt{flex:none}
/* Messages on a phone: the list, then one message at a time */
.tpl-layout:not(.m-open) .tpl-editor,.tpl-layout:not(.m-open) .tpl-preview{display:none}
.tpl-layout.m-open .tpl-list{display:none}
.tpl-list{position:static;max-height:none}
.tpl-item{min-height:56px}
.tpl-mback{display:inline-flex !important}
.tpl-actions{position:sticky;bottom:0;background:var(--card);padding-bottom:calc(10px + env(safe-area-inset-bottom));margin:0 -16px;padding-left:16px;padding-right:16px}
/* the demo's progress card */
.pipe-steps{overflow-x:auto;scrollbar-width:none}
.pipe-step span:last-child{font-size:11px}
.review-frame{height:62dvh}
.review-actions{flex-direction:column;align-items:stretch}
.review-actions .btn{width:100%}
.stop-choice{padding:14px}
.m-clock{position:relative;display:flex;align-items:center;gap:16px;margin:2px 16px 14px;padding:12px 16px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 .5px rgba(29,29,31,.08),0 6px 18px -10px rgba(29,29,31,.2);overflow:hidden}
.mc-zone{display:flex;flex-direction:column;gap:1px}
.mc-cap{font:500 10px/14px var(--display);letter-spacing:.18em;text-transform:uppercase;color:#8e8e93}
.mc-zone b{font:200 28px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#1d1d1f}
.mc-sep{width:.5px;align-self:stretch;background:rgba(29,29,31,.14)}
.mc-line{position:absolute;left:16px;right:16px;bottom:7px;height:1px;background:rgba(29,29,31,.07);overflow:hidden}
.mc-line i{display:block;height:100%;background:linear-gradient(90deg,rgba(236,102,11,.25),#ec660b);transform-origin:left;transform:scaleX(0)}
.m-tabbar{grid-template-columns:repeat(5,minmax(0,1fr));padding-left:2px;padding-right:2px}
.m-tab span{font-size:10.5px;letter-spacing:-.01em;white-space:nowrap}
.pipe-steps{overflow:visible}
.pipe-step>span:last-child{display:none}
.pipe-step.now>span:last-child,.pipe-step.fail>span:last-child{display:inline;font-size:12px}
.pipe-step:not(:last-child)::after{margin:0 6px}
.pipe-step{flex:1 1 auto}
.pipe-step.now{flex:0 0 auto}
.m-page [role="tablist"] button[role="tab"]{min-height:38px}

/* ---------- v2.2 (Nov 8, 2026): the phone takes the computer's codes. Same slow glows and grain behind, frosted glass
   surfaces, the same duotone icons on gradient tiles, blocks that rise into place one after the other. Monochrome
   accents only, never a rainbow. ---------- */
:root{
  --g-glass:rgba(255,255,255,.58); --g-strong:rgba(255,255,255,.7); --g-edge:rgba(255,255,255,.85); --g-line:rgba(29,29,31,.07);
  --g-blur:saturate(180%) blur(22px);
  --g-shadow:0 1px 1px rgba(29,29,31,.03),0 8px 24px rgba(29,29,31,.05);
  --m-smooth:cubic-bezier(.22,1,.36,1); --m-sep:rgba(29,29,31,.08);
}
html{background:#eef0f5}
body.phone{background:transparent}
#fx-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(120% 90% at 0% 0%,#fbf3ec 0%,#eef0f5 55%,#e9edf6 100%)}
#fx-bg .aura{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;will-change:transform}
#fx-bg .a1{width:110vw;height:110vw;left:-40vw;top:-40vw;background:radial-gradient(circle,#ffc59a 0,#ffc59a00 68%);animation:m-drift1 60s ease-in-out infinite alternate}
#fx-bg .a2{width:100vw;height:100vw;right:-45vw;top:30vh;background:radial-gradient(circle,#ffe1c9 0,#ffe1c900 68%);animation:m-drift2 80s ease-in-out infinite alternate}
#fx-bg .a3{width:110vw;height:110vw;left:-20vw;bottom:-50vw;background:radial-gradient(circle,#cfdcff 0,#cfdcff00 68%);animation:m-drift1 70s ease-in-out infinite alternate-reverse}
#fx-bg .a4{display:none}
#fx-bg .grain{position:absolute;inset:-50%;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes m-drift1{to{transform:translate3d(14vw,8vh,0) scale(1.1)}}
@keyframes m-drift2{to{transform:translate3d(-12vw,-10vh,0) scale(.94)}}
body.phone .shell,body.phone #devbar{position:relative;z-index:1}

/* glass surfaces */
.m-group,.m-card,.m-tile,body.phone .card,body.phone .message,body.phone .note-box{background:var(--g-strong);border:1px solid var(--g-edge);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow),inset 0 1px 0 rgba(255,255,255,.9)}
.m-row{background:transparent}
.m-row:active{background:rgba(255,255,255,.6)}
.m-card{box-shadow:0 2px 4px rgba(29,29,31,.03),0 16px 40px rgba(29,29,31,.07),inset 0 1px 0 #fff}
.m-search{background:rgba(255,255,255,.6);border:1px solid var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.m-circle{background:rgba(255,255,255,.66);border:1px solid var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:0 4px 14px rgba(29,29,31,.06)}
.m-btn.soft,.m-btn.white{background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(29,29,31,.08),0 4px 14px rgba(29,29,31,.05),inset 0 1px 0 #fff;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.m-btn.dark,.m-btn.primary:not(.danger){color:#fff;background:linear-gradient(180deg,#2c2c31,#121214);box-shadow:0 1px 2px rgba(0,0,0,.25),0 8px 22px -8px rgba(18,18,20,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.m-tabbar,.m-selbar{background:rgba(255,255,255,.62);-webkit-backdrop-filter:saturate(190%) blur(26px);backdrop-filter:saturate(190%) blur(26px);border-top:1px solid var(--g-edge);box-shadow:0 -8px 30px rgba(29,29,31,.06)}
.m-sheet{background:rgba(245,245,248,.86);-webkit-backdrop-filter:saturate(190%) blur(30px);backdrop-filter:saturate(190%) blur(30px);border:1px solid var(--g-edge);border-bottom:0}
body.phone input[type=text],body.phone input[type=search],body.phone input[type=email],body.phone input[type=tel],body.phone input[type=url],body.phone input[type=number],body.phone textarea{background:rgba(255,255,255,.78)}

/* icons: the computer's gradient tiles */
.m-ico{background:linear-gradient(160deg,#ffa15c,#f0620b);color:#fff;border-radius:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.12),0 4px 10px -2px #ec660b55}
.m-ico.dark{background:linear-gradient(160deg,#3a3a40,#121214);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.2),0 4px 10px -2px rgba(0,0,0,.3)}
.m-ico.grey{background:linear-gradient(160deg,#a1a1a8,#6e6e75);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.12),0 4px 10px -2px rgba(0,0,0,.18)}
.m-ico svg.ico .d{fill:#fff;fill-opacity:.28}
svg.m-i.ico .d{fill:currentColor;fill-opacity:.16}
svg.m-i.ico.on .d{fill-opacity:.32}
.m-tab .m-i{transition:transform 260ms var(--m-spring),color 200ms}
.m-tab[aria-current="page"] .m-i{transform:translateY(-1px) scale(1.06)}

/* entrances: each block rises out of a light blur, one after the other, like on the computer */
@keyframes m-rise{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.main>div:not(.settled) .m-page>*{animation:m-rise 560ms var(--m-smooth) both}
.main>div:not(.settled) .m-page>*:nth-child(2){animation-delay:50ms}
.main>div:not(.settled) .m-page>*:nth-child(3){animation-delay:100ms}
.main>div:not(.settled) .m-page>*:nth-child(4){animation-delay:150ms}
.main>div:not(.settled) .m-page>*:nth-child(n+5){animation-delay:200ms}
.main>div:not(.settled) .m-tiles>*{animation:m-rise 600ms var(--m-smooth) both}
.main>div:not(.settled) .m-tiles>*:nth-child(2){animation-delay:140ms}
.main>div:not(.settled) .m-tiles>*:nth-child(3){animation-delay:200ms}
.main>div:not(.settled) .m-group>*{animation:m-rise 520ms var(--m-smooth) both;animation-delay:calc(var(--i,0) * 35ms + 80ms)}
.m-tile,.m-card,.m-group{transition:transform 200ms var(--m-smooth)}
.m-tile:active,a.m-card:active{transform:scale(.97)}
.toast{background:rgba(29,29,31,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:14px}
@media (prefers-reduced-motion:reduce){#fx-bg .aura{animation:none}.main>div .m-page>*,.main>div .m-tiles>*,.main>div .m-group>*{animation:none !important}}
.m-ico.amber,.m-ico.teal,.m-ico.purple,.m-ico.green,.m-ico.blue,.m-ico.pink{background:linear-gradient(160deg,#4a4a52,#1d1d21);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.2),0 4px 10px -2px rgba(0,0,0,.3)}
/* swipe rows keep an opaque front so their actions stay hidden until swiped */
.m-swipe{background:transparent}
.m-swipe-front,.m-swipe-front .m-row{background:#fbfbfd}

/* inspiration library and demo mixing on phones (Nov 10, 2026): the selection bar sits above the tab bar, full width */
.mix-bar{bottom:calc(env(safe-area-inset-bottom) + 88px);left:12px;right:12px;width:auto;transform:translate(0,140%);gap:8px;padding:8px 8px 8px 16px;flex-wrap:wrap;justify-content:flex-end;border-radius:22px}
.mix-bar.in{transform:none}
.mix-bar > span{margin-right:auto}
.lib-cats{overflow-x:auto;flex-wrap:nowrap}