/* ============================================================
   Mode hors-ligne : bouton d'état, pastille de progression,
   fenêtre de détail et bandeau de mise à jour
   ============================================================ */

/* ---------- Bouton dans la barre du haut ---------- */
.off-btn{position:relative;}
.off-btn .off-dot{
  position:absolute;top:6px;right:6px;width:11px;height:11px;border-radius:50%;
  background:#B9B2A5;border:2px solid #fff;
}
.off-btn[data-state="ready"] .off-dot{background:var(--ok,#1E9E5A);}
.off-btn[data-state="downloading"] .off-dot,
.off-btn[data-state="checking"] .off-dot{background:var(--primary,#FF5E14);animation:offPulse 1.1s ease-in-out infinite;}
.off-btn[data-state="partial"] .off-dot,
.off-btn[data-state="paused"] .off-dot,
.off-btn[data-state="waiting"] .off-dot{background:#E3A400;}
.off-btn[data-state="unsupported"]{display:none;}
@keyframes offPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.35);opacity:.6;}}

/* ---------- Pastille de progression (flottante) ---------- */
.sync-pill{
  position:fixed;left:14px;bottom:16px;z-index:60;
  display:none;align-items:center;gap:10px;max-width:calc(100vw - 28px);
  background:var(--dark,#02245B);color:#fff;border:none;cursor:pointer;
  padding:10px 16px 10px 12px;border-radius:999px;font:600 13.5px/1.2 inherit;font-family:inherit;
  box-shadow:0 12px 26px -10px rgba(2,36,91,.6);
}
.sync-pill.show{display:inline-flex;}
body.tabbar-on .sync-pill{bottom:calc(86px + env(safe-area-inset-bottom));}
.sync-pill .ring{
  width:20px;height:20px;border-radius:50%;flex:none;
  background:conic-gradient(var(--primary,#FF5E14) calc(var(--p,0) * 1%), rgba(255,255,255,.25) 0);
  -webkit-mask:radial-gradient(circle 6.5px, transparent 98%, #000 100%);
          mask:radial-gradient(circle 6.5px, transparent 98%, #000 100%);
}

/* ---------- Fenêtre de détail ---------- */
.off-modal{max-width:460px;}
.off-state{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.off-state-ico{
  width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--orange-tint,#FFE7D6);color:var(--primary,#FF5E14);
}
.off-state-ico svg{width:22px;height:22px;}
.off-modal[data-state="ready"] .off-state-ico{background:#DFF5E8;color:#1E9E5A;}
.off-modal[data-state="partial"] .off-state-ico,
.off-modal[data-state="paused"] .off-state-ico,
.off-modal[data-state="waiting"] .off-state-ico{background:#FFF3D6;color:#8A5B00;}
.off-state h3{font-size:17px;margin:0 0 2px;}
.off-state p{margin:0;font-size:13.5px;color:var(--muted);}
.off-bar{height:10px;border-radius:999px;background:var(--paper-dim,#F2EDE4);overflow:hidden;margin:6px 0 4px;}
.off-bar>i{display:block;height:100%;width:0;border-radius:999px;background:var(--primary,#FF5E14);transition:width .25s ease;}
.off-modal[data-state="ready"] .off-bar>i{background:#1E9E5A;}
.off-bar-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:14px;}
.off-list{list-style:none;margin:0 0 16px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.off-list li{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;font-size:14px;}
.off-list li+li{border-top:1px solid var(--line);}
.off-list li span:last-child{font-weight:700;color:var(--ink);}
.off-actions{display:flex;flex-wrap:wrap;gap:10px;}
.off-note{font-size:12.5px;color:var(--muted);margin:14px 0 0;line-height:1.45;}

/* ---------- Bandeau « nouvelle version » ---------- */
.update-banner{
  position:fixed;left:50%;top:14px;transform:translate(-50%,-140%);z-index:210;
  display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);
  background:var(--ink,#1B1A17);color:#fff;padding:11px 12px 11px 18px;border-radius:999px;
  font-size:14px;font-weight:600;box-shadow:0 14px 30px rgba(0,0,0,.35);
  transition:transform .3s ease;
}
.update-banner.show{transform:translate(-50%,0);}
.update-banner .btn{padding:8px 16px;font-size:13.5px;white-space:nowrap;}
.update-banner .later{background:none;border:none;color:#fff;opacity:.7;cursor:pointer;font-size:20px;line-height:1;padding:2px 6px;}