/* ============================================================
   Base partagée : indicateur d'état et écran de connexion
   cloud.css · Phase 3
   ============================================================ */

/* ---- pastille d'état, dans la barre du haut ---- */
.cloud-etat{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  font-size:13px; line-height:1; cursor:default; user-select:none;
  transition:color .2s;
}
.cloud-ok      { color:var(--ok, #2e7d5b); }
.cloud-attente { color:var(--muted, #8a8a80); }
.cloud-ko      { color:var(--danger, #c0392b); cursor:pointer; }

/* ---- écran de connexion ---- */
.cloud-login{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:var(--bg, #F2EFE9);
}
.cloud-login-carte{
  width:100%; max-width:360px;
  display:flex; flex-direction:column; gap:12px;
  background:var(--card, #fff);
  border:1px solid var(--line, #e2ded4);
  border-radius:16px; padding:28px 24px;
  box-shadow:0 12px 40px rgba(0,0,0,.10);
}
.cloud-login-logo{
  align-self:center;
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent, #171815); color:#fff;
  font-weight:700; letter-spacing:.5px;
}
.cloud-login-carte h2{ margin:4px 0 0; text-align:center; font-size:20px; }
.cloud-login-carte p.muted{ margin:0; text-align:center; font-size:13px; }
.cloud-login-carte .btn{ width:100%; justify-content:center; }
.cloud-login-erreur{
  margin:0; min-height:18px; font-size:13px;
  color:var(--danger, #c0392b); text-align:center;
}
.cloud-login-aide{ margin-top:4px; font-size:12px; line-height:1.5; }

@media (max-width:480px){
  .cloud-login{ padding:0; }
  .cloud-login-carte{ height:100%; max-width:none; border:0; border-radius:0;
                      justify-content:center; box-shadow:none; }
}

/* ============================================================
   Bandeau d'aperçu — toujours visible, donc toujours réversible
   ============================================================
   Prévisualiser un peintre fait disparaître les Paramètres, donc l'endroit
   d'où l'on est parti. Ce bandeau est le seul chemin de retour : il doit
   rester visible sur toutes les pages, y compris sur mobile. */
.apercu-barre{
  position:fixed; left:0; right:0; top:0; z-index:200;
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; padding:9px 16px;
  background:var(--portal-bg, #eef1fb);
  border-bottom:1px solid var(--portal, #6b7bb5);
  font-size:12.5px; line-height:1.5;
}
.apercu-barre .mini{ white-space:nowrap; }
body.en-apercu .app{ padding-top:40px; }
body.en-apercu .topbar{ top:40px; }
@media (max-width:720px){
  .apercu-barre{ padding:8px 12px; font-size:12px; }
  body.en-apercu .app{ padding-top:52px; }
}