/* ══════════════════════════════════════════════════════════════════
   SafePhone — styles for the apps and the lessons layer.
   ══════════════════════════════════════════════════════════════════ */
.app { font-size: 1em; }
.app .scroll { padding-bottom: 8px; }
.appbar-actions { display: flex; }
.spinning { animation: spin 1.2s linear infinite; }
.spin-sm { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--outlineVar); border-top-color: var(--primary); animation: spin 1s linear infinite; vertical-align: middle; margin-left: 6px; }
.fab.extended { padding: 0 20px; }
.hist { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.hist div { display: flex; align-items: center; gap: 6px; }

/* ── Settings ────────────────────────────────────────────────────── */
.settings-title { font-size: 34px; font-weight: 400; margin: 30px 24px 16px; }
.settings-root .search-bar { width: calc(100% - 32px); cursor: text; text-align: left; }
.account-card { display: flex; align-items: center; gap: 14px; margin: 8px 16px 14px; padding: 16px; border-radius: 24px; background: var(--primaryContainer); color: var(--onPrimaryContainer); text-align: left; width: calc(100% - 32px); }
.account-card > .ms { font-size: 48px; }
.account-card b { display: block; font-weight: 500; font-size: 17px; }
.account-card small { display: block; font-size: 13px; opacity: .8; }
.account-card.small > .ms { font-size: 40px; }
.cat-list { padding: 0 8px; }
.li.cat { border-radius: 20px; }
.li.cat .li-ic.round { width: 42px; height: 42px; }
.search-top { display: flex; align-items: center; gap: 4px; margin: 8px 8px; height: 56px; border-radius: 28px; background: var(--surfaceC3); padding-right: 6px; }
.settings-search { flex: 1; border: 0; background: none; outline: none; font-size: 17px; color: var(--onSurface); min-width: 0; }
.sec-status { display: flex; gap: 14px; align-items: center; margin: 4px 16px 10px; padding: 18px; border-radius: 24px; }
.sec-status .ms { font-size: 36px; }
.sec-status b { display: block; font-weight: 500; }
.sec-status small { font-size: 13px; }
.sec-status.ok { background: #c4eed0; color: #0d5222; }
.sec-status.warn { background: #ffdfa6; color: #5a3b00; }
.appinfo-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 18px; }
.appinfo-head h2 { margin: 0; font-weight: 400; font-size: 24px; }
.appinfo-actions { display: flex; justify-content: center; gap: 10px; margin: 0 16px 16px; }
.appinfo-actions button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 20px; border: 1px solid var(--outlineVar); font-size: 13px; color: var(--primary); }
.appinfo-actions button:disabled { opacity: .4; }
.battery-big, .storage-big { margin: 0 16px 16px; padding: 20px; border-radius: 24px; background: var(--surfaceC1); display: flex; flex-direction: column; gap: 10px; }
.bb-level { font-size: 44px; font-weight: 400; }
.bb-bar, .st-bar { height: 14px; border-radius: 7px; background: var(--surfaceC4); overflow: hidden; display: flex; }
.bb-bar i { background: var(--primary); display: block; }
.storage-big b { font-size: 32px; font-weight: 400; }
.st-bar i { display: block; height: 100%; }
.vol-card { padding: 8px 0; }
.vol-row { display: flex; align-items: center; gap: 14px; padding: 10px 20px; }
.vol-row > .ms { color: var(--onSurfaceVar); }
.vol-row-t { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.vol-row-t b, .slider-li b { font-weight: 400; font-size: 16px; }
input[type="range"] { accent-color: var(--primary); width: 100%; }
.seg { display: flex; margin: 0 16px 12px; border: 1px solid var(--outline); border-radius: 22px; overflow: hidden; }
.seg-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; font-size: 14px; font-weight: 500; border-right: 1px solid var(--outline); }
.seg-btn:last-child { border-right: 0; }
.seg-btn.on { background: var(--secondaryContainer); color: var(--onSecondaryContainer); }
.seg-btn .ms { font-size: 18px; }
.bright-li { gap: 12px; }
.font-preview { margin: 0 16px 16px; padding: 18px; border-radius: 24px; background: var(--surfaceC2); display: flex; flex-direction: column; gap: 8px; }
.fp-bubble { max-width: 80%; padding: .6em .9em; border-radius: 18px; line-height: 1.35; }
.fp-bubble.in { background: var(--surfaceC4); align-self: flex-start; }
.fp-bubble.out { background: var(--primary); color: var(--onPrimary); align-self: flex-end; }
.fp-time { font-size: 12px; text-align: center; }
.step-slider { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.wp-previews { display: flex; gap: 14px; justify-content: center; margin: 0 16px 10px; }
.wp-prev { width: 130px; height: 250px; border-radius: 20px; border: 3px solid var(--outlineVar); position: relative; color: #fff; display: flex; flex-direction: column; align-items: center; padding-top: 30px; overflow: hidden; }
.wp-prev b { font-size: 34px; font-weight: 300; line-height: .9; }
.wp-prev small { position: absolute; bottom: -24px; font-size: 12px; color: var(--onSurfaceVar); }
.wp-previews { margin-bottom: 36px; }
.wp-icons { position: absolute; bottom: 14px; display: flex; gap: 8px; }
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 16px 10px; }
.wp-thumb { aspect-ratio: 9 / 16; border-radius: 16px; border: 3px solid transparent; display: flex; align-items: center; justify-content: center; color: #fff; }
.wp-thumb.on { border-color: var(--primary); }
.wp-thumb .ms { font-size: 30px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.wp-thumb.photos { background: var(--surfaceC3); color: var(--onSurfaceVar); flex-direction: column; gap: 6px; font-size: 12px; }
.pal-tabs { margin: 0 16px; }
.pal-row { display: flex; gap: 12px; align-items: center; padding: 16px 20px; flex-wrap: wrap; }
.pal { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; border: 3px solid transparent; }
.pal.on { border-color: var(--onSurface); }
.photo-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.photo-pick button { aspect-ratio: 1; background-size: cover; background-position: center; border-radius: 6px; }
.update-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 30px 24px; }
.update-box > .ms { font-size: 64px; color: var(--primary); }
.update-box h2 { font-weight: 400; margin: 0; }
.about-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 20px; font-size: 20px; }
.about-head .ms { font-size: 56px; color: var(--primary); }

/* ── Phone ───────────────────────────────────────────────────────── */
.phone-search { cursor: text; }
.phone-search > span.muted { flex: 1; }
.phone-fab { bottom: calc(96px + var(--navh, 0px)); border-radius: 16px; }
.fav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 16px; }
.fav { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; }
.fav .avatar.lg { width: 84px; height: 84px; }
.recent .li { padding: 8px 12px 8px 16px; }
.recent .li-t small { display: flex; align-items: center; gap: 4px; }
.recent .li-t small .ms { font-size: 16px; }
.recent .li-t b.missed { color: #d93025; }
.call-in { color: #188038; } .call-out { color: #1a73e8; } .call-missed { color: #d93025; }
.recent.open { background: var(--surfaceC2); border-radius: 20px; margin: 4px 8px; }
.recent-actions { display: flex; justify-content: space-around; padding: 4px 8px 12px; }
.recent-actions button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--primary); padding: 6px 10px; border-radius: 14px; }
.dialpad-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surfaceC1); border-radius: 28px 28px 0 0; padding: 10px 24px calc(34px + var(--navh, 0px)); box-shadow: 0 -4px 20px rgba(0,0,0,.15); z-index: 5; }
.dp-suggest .li { min-height: 52px; padding: 4px 8px; }
.dp-number { text-align: center; min-height: 56px; }
.dp-input { width: 100%; border: 0; background: none; text-align: center; font-size: 32px; outline: none; color: var(--onSurface); letter-spacing: 1px; }
.dp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px; margin: 6px 0; }
.dp-key { height: 66px; border-radius: 33px; background: var(--surfaceC3); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dp-key:active { background: var(--primaryContainer); }
.dp-key b { font-size: 28px; font-weight: 400; line-height: 1; }
.dp-key small { font-size: 10px; letter-spacing: 1.5px; color: var(--onSurfaceVar); }
.dp-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; margin-top: 8px; }
.dp-call { width: 110px; height: 60px; border-radius: 30px; background: #1e8e3e; color: #fff; display: flex; align-items: center; justify-content: center; }
.dp-call .ms { font-size: 28px; }
.call-screen { position: absolute; inset: 0; padding: 70px 24px calc(50px + var(--navh, 0px)); display: flex; flex-direction: column; background: linear-gradient(180deg, #1e2b3a, #0c1117); color: #fff; }
.call-top { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.call-top h2 { margin: 6px 0 0; font-weight: 400; font-size: 30px; }
.call-top small { opacity: .8; font-size: 15px; }
.call-grid { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
.call-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; opacity: .95; }
.call-opt .ms { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.call-opt.on .ms { background: #fff; color: #0c1117; }
.call-end-row { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 30px; }
.call-round { width: 72px; height: 72px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; position: relative; }
.call-round .ms { font-size: 32px; }
.call-round span:not(.ms) { position: absolute; bottom: -24px; font-size: 13px; white-space: nowrap; }
.call-round.decline { background: #d93025; }
.call-round.answer { background: #1e8e3e; animation: pulse 1.2s infinite; }
.call-round.msg { background: rgba(255,255,255,.18); width: 56px; height: 56px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 16px rgba(30,142,62,.25); } }
.call-incoming-actions { margin-top: auto; margin-bottom: 30px; display: flex; justify-content: space-around; align-items: center; }
.call-keypad { margin-top: auto; }
.call-keypad .dp-key { background: rgba(255,255,255,.12); color: #fff; }
.ck-digits { text-align: center; font-size: 28px; min-height: 36px; }
.call-hide { color: #fff; }

/* ── Messages ────────────────────────────────────────────────────── */
.thread { padding: 10px 16px; }
.thread .li-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread.unread .li-t b, .thread.unread .li-t small { font-weight: 600; color: var(--onSurface); }
.thread-time { font-size: 12px; color: var(--onSurfaceVar); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.thread-bar { gap: 8px; }
.thread-bar h1 { font-size: 18px; margin-left: 0; }
.thread-bar .avatar { width: 34px; height: 34px; font-size: 14px; }
.spam-banner, .unknown-banner { display: flex; align-items: center; gap: 10px; margin: 0 12px 6px; padding: 10px 12px; border-radius: 16px; font-size: 13px; }
.spam-banner { background: #fce8e6; color: #8c1d18; }
.spam-banner b { display: block; } .spam-banner small { display: block; }
.unknown-banner { background: var(--surfaceC2); }
.unknown-banner span:not(.ms) { flex: 1; }
.bubbles { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.day-sep { text-align: center; font-size: 12px; color: var(--onSurfaceVar); margin: 12px 0 6px; }
.bubble { max-width: 78%; padding: 9px 14px; border-radius: 20px; line-height: 1.4; word-wrap: break-word; font-size: .95em; }
.bubble small { display: block; font-size: 11px; opacity: .7; margin-top: 3px; }
.bubble.them { align-self: flex-start; background: var(--surfaceC3); border-bottom-left-radius: 6px; }
.bubble.me { align-self: flex-end; background: var(--primary); color: var(--onPrimary); border-bottom-right-radius: 6px; }
.bubble.img { padding: 4px; background: transparent; }
.bubble.img img { width: 200px; border-radius: 16px; display: block; cursor: pointer; }
.bubble.img small { color: var(--onSurfaceVar); padding: 0 6px; }
.sms-link { color: inherit; text-decoration: underline; cursor: pointer; word-break: break-all; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 20px; background: var(--surfaceC3); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--onSurfaceVar); animation: typing 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-4px); opacity: .4; } }
.composer { display: flex; align-items: flex-end; gap: 4px; padding: 8px 8px 10px; }
.composer-field { flex: 1; display: flex; align-items: flex-end; background: var(--surfaceC3); border-radius: 24px; padding-left: 16px; min-height: 48px; }
.composer-field textarea { flex: 1; border: 0; background: none; outline: none; resize: none; font-size: 16px; padding: 13px 0; max-height: 120px; color: var(--onSurface); }
.send-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: var(--onPrimary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.send-btn:disabled { background: var(--surfaceC4); color: var(--onSurfaceVar); }
.to-field { display: flex; align-items: center; gap: 10px; padding: 8px 20px; border-bottom: 1px solid var(--outlineVar); }
.to-field input { flex: 1; border: 0; outline: none; background: none; font-size: 16px; padding: 10px 0; color: var(--onSurface); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; font-size: 28px; }
.emoji-grid button { padding: 6px; border-radius: 10px; }

/* ── Contacts ────────────────────────────────────────────────────── */
.letter-row { display: flex; align-items: center; }
.letter { width: 36px; flex: 0 0 36px; text-align: center; color: var(--primary); font-weight: 500; }
.letter-row .li { padding-left: 4px; }
.contact-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 18px; }
.contact-head .avatar.lg { width: 110px; height: 110px; font-size: 44px; }
.contact-head h2 { margin: 6px 0 0; font-weight: 400; font-size: 28px; text-align: center; }
.contact-actions { display: flex; justify-content: center; gap: 22px; margin-bottom: 18px; }
.contact-actions button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; }
.contact-actions button span { width: 56px; height: 56px; border-radius: 50%; background: var(--primaryContainer); color: var(--onPrimaryContainer); display: flex; align-items: center; justify-content: center; }
.contact-actions button:disabled { opacity: .4; }
.fav-on { color: #f9ab00; }
.edit-form { padding: 0 20px 30px; }
.edit-photo { display: flex; justify-content: center; margin: 10px 0 16px; }

/* ── Appareil photo ──────────────────────────────────────────────── */
.camera-app { background: #000; color: #fff; }
.cam-view { position: absolute; left: 0; right: 0; top: 70px; bottom: 210px; overflow: hidden; border-radius: 20px; background: #111; }
.cam-view.flip { animation: flip .35s; }
@keyframes flip { 50% { transform: rotateY(90deg); } }
.cam-video, .cam-sim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.cam-video.mirror { transform: scaleX(-1); }
.cam-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 33.33% 33.33%; pointer-events: none; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: camflash .35s; }
.cam-flash.torch { opacity: .6; }
@keyframes camflash { 0% { opacity: .9; } 100% { opacity: 0; } }
.cam-count { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 90px; font-weight: 300; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.cam-count.rec { top: 20px; font-size: 18px; background: #d93025; padding: 4px 12px; border-radius: 14px; transform: translateX(-50%); }
.cam-note { position: absolute; bottom: 10px; left: 10px; right: 10px; text-align: center; font-size: 12px; background: rgba(0,0,0,.5); border-radius: 12px; padding: 6px; }
.cam-top { position: absolute; top: 36px; left: 0; right: 0; display: flex; justify-content: space-around; }
.cam-top .icon-btn { color: #fff; }
.cam-zoom { position: absolute; bottom: 222px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; background: rgba(0,0,0,.4); border-radius: 20px; padding: 4px; }
.cam-zoom button { width: 36px; height: 36px; border-radius: 50%; font-size: 12px; font-weight: 500; }
.cam-zoom button.on { background: rgba(255,255,255,.9); color: #000; }
.cam-modes { position: absolute; bottom: 160px; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; font-size: 14px; }
.cam-modes button { opacity: .7; padding: 6px 12px; border-radius: 16px; }
.cam-modes button.on { opacity: 1; background: rgba(255,255,255,.18); font-weight: 500; }
.cam-bottom { position: absolute; bottom: calc(50px + var(--navh, 0px)); left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; }
.cam-thumb { width: 52px; height: 52px; border-radius: 50%; background: #333 center/cover; border: 2px solid #fff; }
.cam-thumb.pop { animation: pop .35s; }
@keyframes pop { 50% { transform: scale(1.25); } }
.cam-shutter { width: 80px; height: 80px; border-radius: 50%; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; }
.cam-shutter i { width: 62px; height: 62px; border-radius: 50%; background: #fff; transition: .2s; }
.cam-shutter:active i { transform: scale(.88); }
.cam-shutter.video i { background: #d93025; }
.cam-shutter.recording i { width: 30px; height: 30px; border-radius: 8px; background: #d93025; }
.cam-switch { width: 52px; height: 52px; background: rgba(255,255,255,.15); color: #fff; }
.cam-denied { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; }
.cam-denied > .ms { font-size: 60px; }
.cam-denied h2 { font-weight: 400; margin: 0; }
.cam-denied p { opacity: .8; font-size: 14px; }

/* ── Photos ──────────────────────────────────────────────────────── */
.ph-logo { font-weight: 500; color: var(--onSurfaceVar); }
.sm-av { width: 36px; height: 36px; background: none; color: var(--primary); margin-right: 8px; }
.sm-av .ms { font-size: 32px; }
.ph-day { font-size: 14px; font-weight: 500; padding: 14px 16px 8px; }
.ph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.ph-cell { aspect-ratio: 1; position: relative; overflow: hidden; background: var(--surfaceC3); }
.ph-cell img, .ph-cell video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.ph-cell.sel img { transform: scale(.85); border-radius: 10px; }
.ph-vid, .ph-star { position: absolute; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ph-vid { right: 4px; top: 4px; } .ph-star { left: 4px; bottom: 4px; } .ph-star .ms { font-size: 18px; }
.ph-check { position: absolute; left: 4px; top: 4px; color: #fff; }
.ph-cell.sel .ph-check { color: var(--primary); background: #fff; border-radius: 50%; }
.album-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 16px; }
.album { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 14px; }
.album small { color: var(--onSurfaceVar); font-size: 12px; }
.album-cover { aspect-ratio: 1; border-radius: 16px; background: var(--surfaceC3) center/cover; display: flex; align-items: center; justify-content: center; color: var(--onSurfaceVar); }
.select-bar { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.viewer { position: absolute; inset: 0; background: #000; color: #fff; }
.vw-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.vw-media { max-width: 100%; max-height: 100%; transition: transform .25s; user-select: none; }
.vw-top, .vw-bottom { position: absolute; left: 0; right: 0; display: flex; align-items: center; padding: 0 6px; transition: opacity .2s; background: linear-gradient(rgba(0,0,0,.5), transparent); }
.vw-top { top: 36px; height: 60px; }
.vw-top .icon-btn { color: #fff; }
.vw-date { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.vw-date small { opacity: .75; font-size: 12px; }
.vw-bottom { bottom: var(--navh, 0px); height: 90px; padding-bottom: 26px; justify-content: space-around; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.vw-bottom button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.vw-bottom button:disabled { opacity: .35; }
.viewer.bare .vw-top, .viewer.bare .vw-bottom, .viewer.bare .vw-nav { opacity: 0; pointer-events: none; }
.vw-nav { position: absolute; top: 50%; width: 40px; height: 64px; margin-top: -32px; background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; }
.vw-nav.prev { left: 0; border-radius: 0 20px 20px 0; } .vw-nav.next { right: 0; border-radius: 20px 0 0 20px; }
.share-people { display: flex; gap: 14px; overflow-x: auto; padding: 4px 0 16px; }
.share-people button, .share-apps button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; flex: 0 0 64px; }
.share-apps { display: flex; justify-content: space-around; border-top: 1px solid var(--outlineVar); padding-top: 14px; }
.share-apps .ms { width: 52px; height: 52px; border-radius: 50%; background: var(--secondaryContainer); color: var(--onSecondaryContainer); display: flex; align-items: center; justify-content: center; }
.editor { position: absolute; inset: 0; background: #000; color: #fff; display: flex; flex-direction: column; }
.editor .vw-top { position: static; margin-top: 36px; background: none; padding: 0 12px; }
.ed-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; }
.ed-img { max-width: 100%; max-height: 100%; transition: transform .25s; }
.ed-tools { padding: 10px 0 calc(34px + var(--navh, 0px)); }
.ed-tools .chip { color: #fff; border-color: rgba(255,255,255,.4); }
.ed-tools .chip.on { background: #fff; color: #000; }
.ed-row { display: flex; align-items: center; gap: 10px; padding: 6px 20px; }
.ed-row .icon-btn { color: #fff; }

/* ── Fichiers ────────────────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.cat-tile { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 20px; background: var(--surfaceC1); text-align: left; font-size: 14px; }
.cat-tile b { font-weight: 500; }
.crumbs { display: flex; align-items: center; gap: 2px; overflow-x: auto; padding: 0 16px 8px; font-size: 13px; color: var(--onSurfaceVar); white-space: nowrap; scrollbar-width: none; }
.crumbs button { padding: 4px 6px; border-radius: 8px; }
.crumbs button:last-child { color: var(--primary); font-weight: 500; }
.crumbs .ms { font-size: 16px; }
.f-row { display: flex; align-items: center; padding-right: 6px; }
.f-row.sel { background: var(--secondaryContainer); }
.f-main { flex: 1; display: flex; align-items: center; gap: 14px; padding: 10px 16px; text-align: left; min-width: 0; }
.f-main .li-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.f-ic, .f-thumb { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--surfaceC2); }
.f-thumb { background-size: cover; background-position: center; }
.f-check { color: var(--primary); }
.clip-bar { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 8px 10px; border-radius: 16px; background: var(--primaryContainer); color: var(--onPrimaryContainer); font-size: 13px; flex-wrap: wrap; }
.clip-bar span:not(.ms) { flex: 1; min-width: 140px; }
.clean-card { margin: 0 16px 12px; padding: 16px; border-radius: 24px; background: var(--surfaceC1); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.clean-card b { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.clean-card p { margin: 0; font-size: 14px; }
.clean-card .progress-linear { width: 100%; }
.text-view { padding: 0 20px; }
.text-view pre { white-space: pre-wrap; font-family: inherit; font-size: 16px; line-height: 1.5; margin: 0; user-select: text; }
.text-edit { width: 100%; min-height: 60vh; border: 1px solid var(--outlineVar); border-radius: 12px; padding: 12px; font-size: 16px; line-height: 1.5; background: var(--surfaceC1); outline: none; resize: none; }

/* ── Browser ─────────────────────────────────────────────────────── */
.browser-app { background: #fff; }
.cr-top { display: flex; align-items: center; gap: 2px; padding: 4px 4px 6px; background: var(--surfaceC1); flex: 0 0 auto; }
.cr-top.incog { background: #3c4043; color: #fff; }
.cr-omni { flex: 1; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 22px; background: var(--surfaceC4); min-width: 0; }
.cr-top.incog .cr-omni { background: #202124; }
.cr-lock { font-size: 18px; color: var(--onSurfaceVar); }
.cr-url { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 15px; color: inherit; }
.cr-tabs-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.cr-tabs-btn span { min-width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 5px; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 2px; }
.cr-progress { height: 3px; background: transparent; flex: 0 0 auto; position: relative; overflow: hidden; }
.cr-progress.loading::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 40%; background: #1a73e8; animation: load 1s infinite; }
@keyframes load { from { left: -40%; } to { left: 100%; } }
.cr-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.cr-dlbar { position: absolute; left: 10px; right: 10px; bottom: calc(40px + var(--navh, 0px)); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 12px; background: #202124; color: #fff; font-size: 13px; }
.cr-dlbar span:not(.ms) { flex: 1; }
.cr-dlbar .btn-text { color: #8ab4f8; }
.cr-switcher { position: absolute; inset: 36px 0 0; background: var(--surfaceC2); z-index: 3; display: flex; flex-direction: column; }
.cr-tab-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; align-content: start; }
.cr-tab-card { border-radius: 16px; background: var(--surface); overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.cr-tab-card.on { border-color: var(--primary); }
.cr-tab-card.incog { background: #3c4043; color: #fff; }
.cr-tab-title { display: flex; align-items: center; gap: 4px; padding-left: 12px; font-size: 13px; }
.cr-tab-title span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-tab-prev { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--onSurfaceVar); background: var(--surfaceC1); }
.cr-tab-prev .ms { font-size: 40px; }

/* ── Horloge ─────────────────────────────────────────────────────── */
.clock-body { padding: 0 12px; }
.large-fab { bottom: calc(96px + var(--navh, 0px)); left: 50%; right: auto; transform: translateX(-50%); width: 96px; height: 72px; border-radius: 24px; }
.large-fab .ms { font-size: 34px; }
.alarm-card { background: var(--surfaceC2); border-radius: 26px; padding: 16px 18px 8px; margin-bottom: 10px; }
.alarm-card.on { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.al-row { display: flex; align-items: center; justify-content: space-between; }
.al-time { font-size: 52px; font-weight: 300; line-height: 1; }
.al-sub { font-size: 14px; margin: 6px 0; opacity: .85; }
.al-days { display: flex; gap: 6px; margin: 8px 0; }
.al-day { width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; font-size: 13px; font-weight: 500; opacity: .7; }
.al-day.on { background: var(--primary); color: var(--onPrimary); border-color: var(--primary); opacity: 1; }
.al-foot { display: flex; justify-content: space-between; align-items: center; }
.al-label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.al-label .ms { font-size: 18px; }
.world-now { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 0 26px; }
.wn-time { font-size: 60px; font-weight: 300; font-variant-numeric: tabular-nums; }
.world-now span { color: var(--onSurfaceVar); }
.city-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-radius: 22px; background: var(--surfaceC2); margin-bottom: 8px; }
.city-row b { display: block; font-weight: 400; font-size: 18px; }
.city-row small { color: var(--onSurfaceVar); font-size: 13px; }
.city-time { font-size: 32px; font-weight: 300; }
.timer-run, .sw { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: 30px; }
.timer-ring, .sw-ring { width: 260px; height: 260px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle, var(--surface) 62%, transparent 63%), conic-gradient(var(--primary) calc(var(--p, 0) * 360deg), var(--surfaceC4) 0); }
.sw-ring { background: radial-gradient(circle, var(--surface) 62%, transparent 63%), conic-gradient(var(--surfaceC4) 0 360deg); }
.sw-ring.on { background: radial-gradient(circle, var(--surface) 62%, transparent 63%), conic-gradient(var(--primary) 0 360deg); }
.tr-left, .sw-time { font-size: 44px; font-weight: 300; font-variant-numeric: tabular-nums; }
.timer-btns { display: flex; gap: 12px; }
.sw-laps { width: 100%; max-width: 300px; }
.sw-laps div { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--outlineVar); font-variant-numeric: tabular-nums; }
.timer-set { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 20px; }
.ts-display { display: flex; align-items: baseline; gap: 4px; color: var(--onSurfaceVar); }
.ts-display.has { color: var(--primary); }
.ts-display b { font-size: 52px; font-weight: 300; }
.ts-display small { font-size: 18px; margin-right: 10px; }
.ts-keys { width: 100%; max-width: 330px; }
.ts-start { width: 96px; height: 72px; border-radius: 24px; background: var(--primary); color: var(--onPrimary); display: flex; align-items: center; justify-content: center; }
.ts-start:disabled { opacity: .4; }
.ts-start .ms { font-size: 36px; }
.alarm-ring { position: absolute; inset: 0; z-index: 5; background: linear-gradient(180deg, #243b55, #141e30); color: #fff; display: flex; flex-direction: column; align-items: center; padding-top: 140px; gap: 10px; pointer-events: auto; }
.ar-time { font-size: 90px; font-weight: 300; }
.ar-label { font-size: 24px; }
.ar-sub { opacity: .8; }
.ar-actions { margin-top: auto; margin-bottom: 110px; display: flex; gap: 20px; }
.ar-btn { width: 130px; height: 130px; border-radius: 50%; font-size: 18px; font-weight: 500; }
.ar-btn.snooze { background: rgba(255,255,255,.15); }
.ar-btn.stop { background: #a8c7fa; color: #062e6f; animation: pulse 1.2s infinite; }
.time-pick { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 40px; }
.tp-col { display: flex; flex-direction: column; align-items: center; }
.tp-col input { width: 96px; height: 76px; text-align: center; font-size: 44px; border: 0; border-radius: 12px; background: var(--primaryContainer); color: var(--onPrimaryContainer); outline: none; -moz-appearance: textfield; }
.tp-col input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Calculatrice ────────────────────────────────────────────────── */
.calc-app { background: var(--surface); }
.calc-top { display: flex; justify-content: space-between; padding: 4px 8px; }
.calc-display { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 10px 24px 16px; overflow: hidden; }
.calc-hist { align-self: stretch; overflow: auto; max-height: 50%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-bottom: auto; }
.calc-hist button { display: flex; flex-direction: column; align-items: flex-end; }
.calc-hist small { color: var(--onSurfaceVar); }
.calc-expr { font-size: 52px; font-weight: 300; word-break: break-all; text-align: right; line-height: 1.15; }
.calc-expr.small { font-size: 26px; color: var(--onSurfaceVar); }
.calc-res { font-size: 28px; color: var(--onSurfaceVar); min-height: 36px; text-align: right; }
.calc-res.big { font-size: 56px; color: var(--onSurface); }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 14px 20px; background: var(--surfaceC1); border-radius: 28px 28px 0 0; }
.ck { height: 76px; border-radius: 38px; font-size: 28px; background: var(--surfaceC4); display: flex; align-items: center; justify-content: center; transition: border-radius .15s; }
.ck:active { border-radius: 20px; }
.ck.fn { background: var(--secondaryContainer); color: var(--onSecondaryContainer); font-size: 22px; }
.ck.op { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.ck.eq { background: var(--primary); color: var(--onPrimary); }

/* ── Agenda ──────────────────────────────────────────────────────── */
.cal-grid-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 10px; text-align: center; }
.cal-grid-head span { font-size: 12px; color: var(--onSurfaceVar); padding: 6px 0; }
.cal-day { height: 44px; border-radius: 50%; position: relative; font-size: 15px; margin: 2px auto; width: 44px; }
.cal-day.today { color: var(--primary); font-weight: 700; }
.cal-day.sel { background: var(--primary); color: var(--onPrimary); }
.cal-day i { position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.cal-sel { padding: 14px 20px 6px; font-weight: 500; border-top: 1px solid var(--outlineVar); margin-top: 8px; }
.cal-ev { display: flex; flex-direction: column; text-align: left; margin: 6px 16px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--c) 18%, var(--surface)); border-left: 5px solid var(--c); width: calc(100% - 32px); }
.cal-ev small { color: var(--onSurfaceVar); }
.ev-title { width: 100%; border: 0; border-bottom: 1px solid var(--outlineVar); font-size: 26px; padding: 12px 0; background: none; outline: none; margin-bottom: 8px; color: var(--onSurface); }
.ev-colors { display: flex; gap: 10px; margin: 12px 0; }
.ev-colors .pal { width: 36px; height: 36px; }

/* ── Notes ───────────────────────────────────────────────────────── */
.notes-grid { columns: 2; column-gap: 8px; padding: 0 12px; }
.note { display: block; width: 100%; break-inside: avoid; margin-bottom: 8px; text-align: left; border: 1px solid var(--outlineVar); border-radius: 14px; padding: 12px 14px; position: relative; }
.note b { display: block; font-weight: 500; margin-bottom: 4px; }
.note p { margin: 0; font-size: 14px; white-space: pre-wrap; }
.note ul { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.note li { display: flex; gap: 4px; align-items: center; }
.note li .ms { font-size: 16px; }
.note li.done { text-decoration: line-through; opacity: .6; }
.note-pin { position: absolute; right: 6px; top: 6px; } .note-pin .ms { font-size: 16px; }
.notes-bottom { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 12px; background: var(--surfaceC2); position: relative; }
.notes-bottom .notes-fab { position: static; }
.note-edit { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 36px; padding-bottom: calc(26px + var(--navh, 0px)); background: var(--surface); }
.ne-title { border: 0; background: none; outline: none; font-size: 22px; padding: 8px 20px; color: inherit; }
.ne-text { flex: 1; border: 0; background: none; outline: none; resize: none; font-size: 16px; padding: 8px 20px; line-height: 1.5; color: inherit; }
.ne-list { flex: 1; overflow: auto; padding: 0 12px; }
.ne-item { display: flex; align-items: center; }
.ne-item input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; padding: 8px 0; color: inherit; }
.ne-item input.done { text-decoration: line-through; opacity: .6; }
.ne-add { display: flex; align-items: center; gap: 10px; padding: 10px 12px; opacity: .7; }
.ne-colors { display: flex; gap: 10px; padding: 12px 16px; }
.ne-colors .pal { width: 36px; height: 36px; color: var(--onSurface); }

/* ── Weather ─────────────────────────────────────────────────────── */
.weather-app { background: linear-gradient(180deg, #a8c7fa, var(--surface) 45%); }
#screen[data-theme="dark"] .weather-app { background: linear-gradient(180deg, #1d3557, var(--surface) 45%); }
.wx { display: contents; }
.wx h1 small .ms { font-size: 18px; }
.wx-now { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 10px 24px 20px; gap: 2px 16px; }
.wx-now b { font-size: 96px; font-weight: 300; line-height: 1; grid-row: span 2; }
.wx-big { font-size: 64px; color: #f9ab00; }
.wx-now small { grid-column: 1 / -1; color: var(--onSurfaceVar); }
.wx-card { margin: 0 16px 12px; padding: 14px; border-radius: 24px; background: var(--surfaceC1); }
.wx-hours { display: flex; justify-content: space-between; overflow-x: auto; gap: 12px; }
.wx-hours div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; min-width: 38px; }
.wx-hours .ms { color: #f9ab00; }
.wx-day { display: grid; grid-template-columns: 1fr 70px 30px 40px 34px; align-items: center; padding: 8px 4px; font-size: 15px; }
.wx-day small { color: #4285f4; font-size: 12px; display: flex; align-items: center; gap: 2px; }
.wx-day small .ms { font-size: 14px; }
.wx-day > .ms { color: #f9ab00; }
.wx-day b { text-align: right; font-weight: 500; } .wx-day em { text-align: right; font-style: normal; color: var(--onSurfaceVar); }
.wx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px 12px; }
.wx-tiles div { background: var(--surfaceC1); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.wx-tiles small { color: var(--onSurfaceVar); } .wx-tiles b { font-size: 22px; font-weight: 400; }

/* ── App Shop ────────────────────────────────────────────────────── */
.st { font-size: 14px; vertical-align: -2px; }
.st-section h2 { font-size: 18px; font-weight: 500; margin: 14px 20px 10px; }
.st-scroller { display: flex; gap: 14px; overflow-x: auto; padding: 0 20px 8px; scrollbar-width: none; }
.st-tile { flex: 0 0 90px; display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 13px; }
.st-tile .app-ic, .st-row .app-ic, .st-head .app-ic { border-radius: 22%; }
.st-tile b { font-weight: 400; line-height: 1.25; }
.st-tile small { color: var(--onSurfaceVar); font-size: 12px; }
.st-row { align-items: flex-start; }
.st-row .li-t small { font-size: 13px; }
.st-page { padding: 0 20px; }
.st-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.st-head h2 { margin: 0; font-weight: 400; font-size: 24px; }
.st-head a { color: var(--primary); font-weight: 500; font-size: 14px; display: block; margin: 4px 0; }
.st-head small { font-size: 12px; }
.st-stats { display: flex; justify-content: space-between; text-align: center; margin-bottom: 18px; }
.st-stats div { flex: 1; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--outlineVar); }
.st-stats div:last-child { border: 0; }
.st-stats b { font-weight: 500; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.st-stats b .ms { font-size: 16px; }
.st-stats small { font-size: 11px; color: var(--onSurfaceVar); }
.st-actions { display: flex; gap: 10px; }
.st-actions button { flex: 1; }
.st-progress { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--onSurfaceVar); }
.st-shots { display: flex; gap: 10px; overflow-x: auto; margin: 20px -20px 10px; padding: 0 20px; scrollbar-width: none; }
.st-shot { flex: 0 0 120px; height: 220px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 12px; text-align: center; padding: 10px; }
.st-shot .ms { font-size: 40px; }
.st-h3 { font-size: 17px; font-weight: 500; margin: 20px 0 8px; }
.st-desc { font-size: 14px; line-height: 1.55; color: var(--onSurfaceVar); margin: 0 0 10px; }
.st-page .chips { padding: 0; }
.st-safety { display: flex; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--outlineVar); font-size: 14px; line-height: 1.45; }
.st-safety > .ms { color: #188038; }
.st-safety.bad { background: #fce8e6; color: #8c1d18; border-color: transparent; }
.st-safety.bad > .ms { color: #d93025; }
.st-review { padding: 10px 0; border-bottom: 1px solid var(--outlineVar); font-size: 14px; }
.st-review span { color: #f9ab00; margin-left: 8px; letter-spacing: 1px; }
.st-review p { margin: 4px 0 0; color: var(--onSurfaceVar); }
.storeapp { background: var(--surface); }
.sa-splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--brand); color: #fff; font-size: 20px; }
.sa-splash .ms { font-size: 72px; }
.sa-bar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; background: var(--brand); color: #fff; }
.sa-bar h1 { font-size: 20px; font-weight: 500; margin: 0; }
.sa-title { font-size: 18px; font-weight: 500; margin: 16px 20px 6px; }
.sa-item .li-ic.round { background: color-mix(in srgb, var(--brand) 20%, var(--surface)); color: var(--onSurface); }
.sa-cam { flex: 1; position: relative; overflow: hidden; background: #111; }
.sa-cam video { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.sa-cam-note { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; color: #fff; background: rgba(0,0,0,.5); border-radius: 12px; padding: 6px; font-size: 13px; }
.sa-zoom { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; }

/* ── Exercices (appli) ───────────────────────────────────────────── */
.ex-hero { display: flex; gap: 12px; align-items: center; margin: 8px 16px 6px; padding: 18px; border-radius: 26px; background: linear-gradient(135deg, #ffb74d, #e8710a); color: #fff; }
.ex-hero-t { flex: 1; }
.ex-hero small { opacity: .9; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
.ex-hero h1 { font-size: 24px; font-weight: 500; margin: 4px 0; }
.ex-hero p { margin: 0; font-size: 13px; line-height: 1.4; opacity: .95; }
.ex-prog { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.ex-prog-ring { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; padding-top: 22px; background: radial-gradient(circle, #e8710a 60%, transparent 61%), conic-gradient(#fff calc(var(--p) * 360deg), rgba(255,255,255,.3) 0); }
.ex-prog-ring b { font-size: 22px; } .ex-prog-ring small { font-size: 11px; text-transform: none; }
.ex-cat h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; margin: 18px 20px 6px; color: var(--primary); }
.ex-cat h2 small { margin-left: auto; color: var(--onSurfaceVar); font-weight: 400; }
.ex-item { display: flex; align-items: center; gap: 14px; width: calc(100% - 24px); margin: 0 12px 6px; padding: 12px 14px; border-radius: 18px; background: var(--surfaceC1); text-align: left; }
.ex-item .li-t b { font-size: 16px; }
.ex-ic { color: #e8710a; display: flex; }
.ex-item.ok .ex-ic { color: #188038; }
.level-list { display: flex; flex-direction: column; gap: 10px; }
.level { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px; background: var(--surfaceC3); text-align: left; }
.level > .ms { font-size: 34px; color: var(--primary); }
.level b { display: block; font-weight: 500; font-size: 16px; }
.level small { display: block; font-size: 13px; color: var(--onSurfaceVar); line-height: 1.35; }

/* ── Exercices (couche de guidage) ───────────────────────────────── */
#ex-layer { position: absolute; inset: 0; z-index: 57; pointer-events: none; }
.ex-ring { position: absolute; left: 0; top: 0; border-radius: 16px; opacity: 0; transition: transform .15s, width .15s, height .15s, opacity .2s; }
.ex-ring.show { opacity: 1; }
.ex-ring.l1 { border: 4px solid #e53935; box-shadow: 0 0 0 4000px rgba(0,0,0,.12), 0 0 18px rgba(229,57,53,.7); animation: ring 1.2s infinite; }
.ex-ring.l2 { border: 2px dashed #4c8df6; }
@keyframes ring { 50% { box-shadow: 0 0 0 4000px rgba(0,0,0,.12), 0 0 30px rgba(229,57,53,1); } }
.ex-arrow { position: absolute; left: 0; top: 0; width: 48px; height: 48px; display: none; color: #e53935; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); transition: transform .15s; }
.ex-arrow.show { display: flex; align-items: center; justify-content: center; }
.ex-arrow .ms { font-size: 48px; animation: bob .8s infinite; }
@keyframes bob { 50% { transform: translateY(8px); } }
.ex-card { position: absolute; left: 12px; right: 12px; bottom: 60px; pointer-events: auto; background: #fffbf4; color: #2b2118; border-radius: 22px; padding: 12px 14px 8px; box-shadow: 0 8px 28px rgba(0,0,0,.35); border: 2px solid #ffb74d; font-size: 15px; }
.ex-card.top { bottom: auto; top: 44px; }
.ex-card.docked { position: static; margin: 0; }
.ex-head { display: flex; align-items: center; gap: 8px; }
.ex-head b { flex: 1; font-size: 14px; }
.ex-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; color: #fff; }
.ex-badge.l1 { background: #e53935; } .ex-badge.l2 { background: #1a73e8; } .ex-badge.l3 { background: #3c4043; }
.ex-x { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ex-x .ms { font-size: 20px; }
.ex-steps { display: flex; gap: 4px; margin: 8px 0 4px; }
.ex-steps i { flex: 1; height: 4px; border-radius: 2px; background: #eadfd0; }
.ex-steps i.done { background: #188038; } .ex-steps i.now { background: #e8710a; }
.ex-text { margin: 8px 0; font-size: 16px; line-height: 1.45; font-weight: 500; }
.ex-hint { display: flex; gap: 6px; background: #fff3cd; border-radius: 12px; padding: 8px 10px; font-size: 14px; margin-bottom: 6px; }
.ex-hint .ms { color: #e8a200; font-size: 20px; }
.ex-actions { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.ex-card .btn-text { color: #b35400; }
.ex-done { text-align: center; padding: 6px 4px; }
.ex-done > .ms { font-size: 48px; color: #e8710a; }
.ex-done h3 { margin: 4px 0; font-size: 22px; }
.ex-done p { margin: 0 0 10px; font-size: 14px; }
.ex-done .ex-actions { justify-content: center; }
.ex-done .btn-filled { background: #e8710a; color: #fff; }
.ex-done .btn-tonal { background: #ffe0b2; color: #6d3a00; }

/* ── Effets globaux ──────────────────────────────────────────────── */
#screen.fx-gray > :not(#ex-layer) { filter: grayscale(1); }
#screen.fx-bold { font-weight: 500; }
#screen.fx-bold b, #screen.fx-bold h1, #screen.fx-bold h2 { font-weight: 700; }
#screen.fx-contrast { --onSurfaceVar: var(--onSurface); }
#screen.fx-noanim *, #screen.fx-noanim *::before, #screen.fx-noanim *::after { transition: none !important; animation: none !important; }
#screen.fx-nopct .sb-batt small { display: none; }
#screen.fx-nolocknotif .lk-notifs { display: none; }
.tap-dot { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(255,255,255,.55); border: 2px solid rgba(0,0,0,.3); z-index: 98; pointer-events: none; animation: tapdot .45s forwards; }
@keyframes tapdot { to { transform: scale(1.6); opacity: 0; } }
.tb-focus { outline: 3px solid #34a853 !important; outline-offset: 2px; border-radius: 8px; }

/* ── Installation de l'application (PWA) ─────────────────────────── */
.setup-install { align-self: center; margin-top: 18px; }
.setup-page.signin .setup-install { align-self: flex-start; margin-top: 6px; padding: 0 4px; }
.side-install { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #e8710a; color: #fff; font-weight: 600; font-size: 14px; }
.side-install:hover { background: #f08a2c; }
.side-mobile { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 13px; color: #b8c0cc; }
.side-mobile .ms { font-size: 18px; }
.ex-install { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 14px; background: rgba(255,255,255,.22); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ex-install .ms { font-size: 16px; }
.install-steps { margin: 0 0 12px; padding-left: 20px; font-size: 15px; line-height: 1.55; }
.install-steps li { margin: 6px 0; }
/* On the Welcome / setup screens, dialogs go in front. */
#screen:has(#boot.setup:not([hidden])) #layer-dialog { z-index: 97; }

/* ── Practice cues, plans ───────────────────────────────────────── */
#lock .lk-top { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lk-practice { padding: 1px 8px; border-radius: 10px; background: rgba(251,191,36,.9); color: #1f1600; font-size: 11px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }
.practice-banner { display: flex; gap: 12px; align-items: center; margin: 0 16px 12px; padding: 12px 14px; border-radius: 18px; background: var(--secondaryContainer, #fff4d6); color: var(--onSecondaryContainer, #2b2100); font-size: 14px; line-height: 1.35; }
.practice-banner .ms { font-size: 26px; color: var(--primary); flex: none; }
.pro-badge { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 8px; background: #fbbf24; color: #1f1600; font-size: 11px; font-weight: 700; letter-spacing: .4px; vertical-align: 2px; }
.ex-item.locked .ex-ic { color: var(--onSurfaceVariant, #6b7280); }
.ex-item.locked .li-t b { opacity: .85; }
.pro-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pro-list li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.pro-list .ms { color: #188038; font-size: 20px; }