/* =========================================================================== Offline practice mode. `body.qzr-offline-session` tracks the LIVE restricted state (QzrOffline.restrictToDownloaded(): offline forced, or network down) and is owned by QzrOffline.syncOfflineBodyClass() — every writer, qzr-auth.js included, goes through it so the class can never disagree with the offline widgets it renders alongside. The banner is not decoration: in that state most of the app cannot work (nothing server-backed), and without an explicit signal every failure would read as a bug. It also tells the user their results are not being recorded, which they otherwise have no way of knowing. See docs/architecture/offline-practice-mode.md. =========================================================================== */ /* Text only, no icon glyph. This opened with "\f6ff" (plane-slash), which is not in Font Awesome 5 Free — and at font-weight 600 it would not have selected the Solid face even if it were. Both roads led to a tofu box in front of the message. An icon font inside a pseudo-element cannot fail gracefully, so the banner does without one. */ /* Fixed, and the shell is offset by the banner's MEASURED height in qzr-offline-ui.js (syncBannerOffset). Two dead ends are worth recording so they are not retried: - `padding-top` on does nothing here. Something forces body padding with !important: even an INLINE 80px computes to 0. That is why the original 34px compensation never applied and the banner covered the topbar. - in-flow (static/sticky) does not work either, because is `display: flex; flex-direction: row`, so a ::before becomes a flex ITEM and lands beside the content rather than above it. Hence: out of flow (fixed keeps it from being a flex item at all) plus a measured offset on `.cover-container`, the real shell — padding there does move the content. Measured rather than hardcoded because the text wraps at narrow widths: observed 44.6px and 73px on the same device. */ body.qzr-offline-session::before { content: "Mode hors connexion · seuls tes contenus téléchargés sont disponibles"; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; z-index: 10000; padding: 8px 14px; text-align: center; font-size: var(--qz-fs-xs); line-height: 1.3; /* --qz-warning-bg / --qz-warning already carry their own dark-mode and per-theme overrides in vnext-tokens.css, so no media query is needed here. */ background: var(--qz-warning-bg); color: var(--qz-warning-ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .08); pointer-events: none; } /* No padding here on purpose — the offset lives on `.cover-container` and is applied from JS (syncBannerOffset), because body padding is ignored. */ /* =========================================================================== Offline is a SMALLER app, not the same app with dead controls. Anything that cannot work without a server is removed rather than greyed out. Greying tells the user "this exists, and you may not have it", which is noise when nine controls in ten are unusable; hiding leaves a short, honest surface of things that genuinely work. Everything comes back untouched the moment `qzr-offline-session` is removed. =========================================================================== */ body.qzr-offline-session [data-qzr-online-only] { display: none !important; } /* Le panneau du menu du haut separe desormais CHAQUE element a partir de Reglages. Hors ligne, Reglages et Profil disparaissent avec les autres entrees en ligne — et leurs separateurs restaient, en laissant deux traits colles (mesure : 2 paires). `display:none` ne rapproche pas les freres au sens du selecteur `+`, l'element masque reste STRUCTURELLEMENT entre les deux traits : c'est `:has()` qui permet de viser le separateur par ce qui le SUIT, et donc de retirer celui qui n'introduit plus rien. */ body.qzr-offline-session .qzv-menu__sep:has(+ [data-qzr-online-only]) { display: none !important; } /* The bottom tab bar routes almost entirely to server-backed pages, and the dashboard now carries direct entry points to the two that work. */ body.qzr-offline-session #qzr-mobile-bottom-nav { display: none !important; } /* Dashboard: the mission card advertises a run the device may not hold, and "Afficher plus" unfolds quêtes/chests/activity — all server-backed. The offline quick links injected by qzr-offline-ui.js replace both. */ body.qzr-offline-session .qzv-mission-card, body.qzr-offline-session .qzv-more-toggle, body.qzr-offline-session .qzv-more-body { display: none !important; } /* --- Offline dashboard quick links ---------------------------------------- */ .qzv-offline-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; } .qzv-offline-link { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: var(--qz-r-card, 16px); background: var(--qz-surface); border: 1px solid var(--qz-line); color: inherit; text-decoration: none; } .qzv-offline-link:active { transform: scale(var(--qz-press-scale)); } .qzv-offline-link__icon { font-size: 1.15rem; color: var(--qz-accent); margin-bottom: 2px; } .qzv-offline-link__title { font-weight: 700; font-size: var(--qz-fs-sm, .88rem); } .qzv-offline-link__meta { font-size: var(--qz-fs-xs, .78rem); opacity: .7; } /* Nothing downloaded in that bucket — still reachable, but honest about it. */ .qzv-offline-link--empty { opacity: .6; } /* An offline step whose quiz was never downloaded. It is a real