/* ORELYS phone: the Espace de travail screen (wsphone.js) */
.wp-h { font-family: var(--font-display); font-size: 22px; margin: 6px 0 2px; padding-right: 100px; }
.wp-sub { color: var(--ink-mute); font-size: 13px; margin: 0 0 12px; }
.wp-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.wp-tools .wp-q { flex: 1; min-width: 0; }
.wp-list { display: flex; flex-direction: column; gap: 6px; }
.wp-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--stroke); color: var(--ink); font: inherit; }
.wp-item:active { background: var(--panel-hi); }
.wp-ic { font-size: 22px; width: 28px; text-align: center; flex: none; }
.wp-txt { min-width: 0; display: flex; flex-direction: column; }
.wp-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-txt small { color: var(--ink-mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-empty { color: var(--ink-mute); padding: 18px 4px; }
.wp-back { margin-bottom: 10px; }
/* one page: same look as on the PC, fitted to the width; light by default, dark on request (05/11) */
.wp-sheet { --pi: #1b1c1c; --ps: #55595a; --pl: #e4e6e6; --pc: #f3f4f4; --pbg: #ffffff; background: var(--pbg); color: var(--pi); margin: -6px -14px 0; padding: 8px 16px 90px; min-height: 86vh; border-radius: 14px; }
.wp-sheet.dk { --pi: #e9ecea; --ps: #aab0ad; --pl: #2e3231; --pc: #1f2221; --pbg: #121413; }
.wp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wp-top .btn { background: var(--pc); color: var(--pi); border-color: var(--pl); }
.wp-state { flex: 1; text-align: right; font-size: 11.5px; color: var(--ps); }
.wp-mode { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--pl); background: var(--pc); color: var(--pi); display: grid; place-items: center; }
.wp-cover { height: 110px; margin: 0 -16px 10px; background-size: cover; background-position: center; }
.wp-title { width: 100%; font-family: var(--font-display); font-size: 23px; font-weight: 700; background: none; border: 0; color: var(--pi); padding: 4px 0 6px; outline: none; }
.wp-body { min-height: 50vh; font-size: 15px; line-height: 1.5; color: var(--pi); outline: none; padding: 2px 0 30px; overflow-wrap: anywhere; }
.f-serif .wp-title, .f-serif .wp-body { font-family: Georgia, "Times New Roman", serif; }
.wp-body p { margin: 0 0 5px; min-height: 1.5em; }
.wp-body h1 { font: 700 20px/1.3 var(--font-display); margin: 16px 0 4px; } .wp-body h2 { font: 650 17px/1.35 var(--font-display); margin: 13px 0 3px; } .wp-body h3 { font: 600 15px/1.4 var(--font-display); margin: 10px 0 2px; }
.f-serif .wp-body h1, .f-serif .wp-body h2, .f-serif .wp-body h3 { font-family: Georgia, serif; }
.wp-body ul, .wp-body ol { padding-left: 22px; margin: 0 0 6px; } .wp-body li { margin: 2px 0; }
.wp-body ul.check { list-style: none; padding-left: 26px; } .wp-body ul.check > li { position: relative; }
.wp-body ul.check > li::before { content: ""; position: absolute; left: -24px; top: 3px; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--ps); }
.wp-body ul.check > li.done::before { background: var(--pi); border-color: var(--pi); } .wp-body ul.check > li.done { color: var(--ps); text-decoration: line-through; }
.wp-body blockquote { border-left: 2px solid var(--ps); margin: 8px 0; padding-left: 12px; color: var(--ps); }
.wp-body a { color: inherit; text-decoration: underline; } .wp-body mark { color: #1b1c1c; border-radius: 3px; padding: 0 2px; }
.wp-body hr { border: 0; border-top: 1px solid var(--pl); margin: 12px 0; } .wp-body pre { background: var(--pc); padding: 9px 11px; border-radius: 6px; overflow-x: auto; font-size: 13px; }
.wp-body .ws-callout { display: flex; gap: 9px; padding: 9px 12px; border-radius: 6px; margin: 7px 0; background: var(--pc); box-shadow: inset 2px 0 0 var(--ps); }
.wp-body .ws-callout > div { flex: 1; min-width: 0; } .wp-body .ws-callout > .ic { font-size: 15px; }
.wp-body .ws-callout.c-bleu { background: color-mix(in srgb, #2b5a94 11%, var(--pc)); box-shadow: inset 2px 0 0 #2b5a94; }
.wp-body .ws-callout.c-vert { background: color-mix(in srgb, #2f6b52 11%, var(--pc)); box-shadow: inset 2px 0 0 #2f6b52; }
.wp-body .ws-callout.c-rouge { background: color-mix(in srgb, #bf3a30 10%, var(--pc)); box-shadow: inset 2px 0 0 #bf3a30; }
.wp-body .ws-callout.c-jaune { background: color-mix(in srgb, #d8a800 14%, var(--pc)); box-shadow: inset 2px 0 0 #d8a800; }
.wp-body .ws-callout.c-violet { background: color-mix(in srgb, #8e24aa 10%, var(--pc)); box-shadow: inset 2px 0 0 #8e24aa; }
.wp-body .ws-callout.c-rose { background: color-mix(in srgb, #ec407a 10%, var(--pc)); box-shadow: inset 2px 0 0 #ec407a; }
.wp-body .ws-callout.c-orange { background: color-mix(in srgb, #ff7a1a 11%, var(--pc)); box-shadow: inset 2px 0 0 #ff7a1a; }
.wp-body .ws-clabel { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ps); }
.wp-body table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13.5px; }
.wp-body th { text-align: left; font-weight: 600; border-bottom: 1px solid var(--pi); padding: 4px 12px 4px 0; min-width: 70px; } .wp-body td { border-bottom: 1px solid var(--pl); padding: 4px 12px 4px 0; min-width: 70px; }
.wp-body details { margin: 6px 0; } .wp-body summary { font-weight: 600; }
.wp-body .ws-keep { margin: 8px 0; padding: 8px 11px; border: 1px solid var(--pl); border-radius: 6px; font-size: 13px; color: var(--ps); user-select: none; min-height: 34px; }
.wp-body .ws-keep:empty::before { content: "Bloc gardé sur le PC"; } .wp-body .ws-keep img { display: block; width: 100%; border-radius: 4px; }
/* a dark page: text set in black stays readable */
.dk .wp-body [style*="rgb(0, 0, 0)"], .dk .wp-body [style*="rgb(27, 28, 28)"], .dk .wp-body [style*="rgb(31, 58, 95)"], .dk .wp-body [style*="#111111"], .dk .wp-body [style*="#1f3a5f"] { color: inherit !important; }
.wp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: space-between; gap: 2px; padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px) * 0); background: #f3f4f4; color: #1b1c1c; border-top: 1px solid #dfe2e1; }
.wp-bar.dk, .wp-menu.dk { background: #1d201f; color: #e9ecea; border-color: #2e3231; }
.wp-bar button { flex: 1; height: 38px; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; display: grid; place-items: center; border-radius: 8px; }
.wp-bar .sw { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#bf3a30, #2f6b52, #2b5a94, #111111, #bf3a30); }
.wp-menu { position: fixed; left: 8px; right: 8px; z-index: 61; padding: 6px; border-radius: 12px; background: #fff; color: #1b1c1c; border: 1px solid #dfe2e1; box-shadow: 0 8px 24px rgba(0,0,0,.2); display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.wp-menu button { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; padding: 9px 10px; border-radius: 8px; text-align: left; }
.wp-menu i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.wp-note { color: var(--ps); font-size: 12px; margin-top: 6px; }