/* Connexion à la console Jokobee (connexion.js) : écran de connexion et barre du haut (retour, adresse, déconnexion).
   Couleurs prises des variables de chaque page (--carte, --encre, --muet, --ligne, --accent, --pb), avec repli. */
.cx-bloque { overflow:hidden; }
.cx-voile { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px;
  background:var(--fond, #f4f6f8); }
.cx-boite { width:min(380px, 100%); background:var(--carte, #fff); color:var(--encre, #17212b); border:1px solid var(--ligne, #dde3e9);
  border-radius:14px; padding:28px 24px; display:flex; flex-direction:column; gap:14px; text-align:center; }
.cx-boite h1 { font-size:20px; margin:0; }
.cx-texte { margin:0; color:var(--muet, #5d6b78); }
.cx-google { font:inherit; font-weight:600; padding:10px 16px; border-radius:10px; border:1px solid var(--accent, #1f6fb2);
  background:var(--accent, #1f6fb2); color:#fff; cursor:pointer; }
.cx-google:disabled { opacity:.6; cursor:default; }
.cx-message { margin:0; min-height:1.4em; font-size:13px; color:var(--pb, #b42318); }
.cx-barre { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left))); padding:8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  border-bottom:1px solid var(--ligne, #dde3e9); background:var(--carte, #fff); font-size:13px; }
.cx-retour { color:var(--accent, #1f6fb2); text-decoration:none; font-weight:600; }
.cx-retour:hover { text-decoration:underline; }
.cx-titre { font-weight:600; }
.cx-droite { display:flex; align-items:center; gap:10px; color:var(--muet, #5d6b78); }
.cx-sortir { font:inherit; border:1px solid var(--ligne, #dde3e9); background:var(--carte, #fff); color:var(--encre, #17212b); border-radius:8px; padding:4px 10px; cursor:pointer; }
.cx-sortir:hover { border-color:var(--accent, #1f6fb2); }
@media (max-width:520px) { .cx-qui { display:none; } }