/* =====================================================
   KEL'ONGLES Studio — Écran de connexion (à la charte)
   ===================================================== */
body.locked { overflow: hidden; }
/* Verrou réel : l'app est masquée (donc NI cliquable NI atteignable au clavier)
   tant que la connexion n'est pas validée. Évite l'affichage-éclair des données
   et empêche d'atteindre les champs derrière le voile avec Tab. */
html.cloud-locked .app { visibility: hidden !important; }

#authgate {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 1.4rem;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(227,200,140,.28), transparent 60%),
    radial-gradient(110% 55% at 0% 100%, rgba(201,158,147,.24), transparent 55%),
    var(--cream, #F7F0E7);
}
#authgate.show { display: flex; }

.ag-card {
  width: 100%; max-width: 384px;
  background: var(--ivory, #FCF8F2);
  border: 1px solid var(--line, #eaded0);
  border-radius: 22px;
  padding: 2.2rem 1.9rem 1.7rem;
  box-shadow: 0 40px 90px -40px rgba(80,55,40,.55);
  text-align: center;
  animation: agIn .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes agIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ag-card { animation: none; } }

.ag-logo {
  width: 66px; height: 66px; object-fit: contain;
  border-radius: 17px; border: 1px solid var(--line, #eaded0);
  background: #fff; box-shadow: 0 10px 26px -14px rgba(80,55,40,.4);
}
.ag-brand {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.28rem; color: var(--rose-deep, #B07E72);
  letter-spacing: .02em; margin-top: .8rem; line-height: 1;
}
.ag-brand small {
  display: block; font-family: var(--font-sans, 'Jost', sans-serif);
  font-size: .58rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-deep, #A6813F); font-weight: 600; margin-top: .32rem;
}
.ag-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500; font-size: 2rem; color: var(--charcoal, #2B2521);
  margin-top: 1.15rem;
}
.ag-sub {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.12rem; color: var(--charcoal-soft, #4A4038);
  margin-top: .25rem; margin-bottom: 1.4rem;
}

.ag-form { display: flex; flex-direction: column; gap: .85rem; text-align: left; }
.ag-field { display: flex; flex-direction: column; gap: .34rem; }
.ag-field span {
  font-family: var(--font-sans, 'Jost', sans-serif);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-deep, #A6813F); font-weight: 600;
}
.ag-field input {
  font-family: var(--font-sans, 'Jost', sans-serif);
  font-size: 1rem; color: var(--charcoal, #2B2521);
  background: #fff; border: 1px solid var(--line, #eaded0);
  border-radius: 12px; padding: .78rem .9rem; width: 100%;
  transition: border-color .16s, box-shadow .16s;
}
.ag-field input::placeholder { color: #c9bcab; }
.ag-field input:focus {
  outline: none; border-color: var(--gold, #C6A15B);
  box-shadow: 0 0 0 3px rgba(198,161,91,.18);
}

.ag-error {
  min-height: 1.1rem; font-size: .84rem; color: var(--alert, #c56a5c);
  font-family: var(--font-sans, 'Jost', sans-serif); font-weight: 500;
}
.ag-error:empty { min-height: 0; }

.ag-btn {
  margin-top: .3rem; border: none; border-radius: 12px;
  padding: .85rem 1rem; font-family: var(--font-sans, 'Jost', sans-serif);
  font-size: .98rem; font-weight: 600; color: var(--ivory, #FCF8F2);
  background: linear-gradient(135deg, var(--gold-light, #E3C88C), var(--gold-deep, #A6813F));
  box-shadow: 0 12px 26px -14px rgba(166,129,63,.7);
  transition: transform .12s, filter .16s;
}
.ag-btn:hover { filter: brightness(1.04); }
.ag-btn:active { transform: translateY(1px); }
.ag-btn:disabled { opacity: .65; cursor: default; filter: grayscale(.15); }

.ag-foot {
  margin-top: 1.3rem; font-size: .78rem; color: var(--text-muted, #8B7E71);
  font-family: var(--font-sans, 'Jost', sans-serif);
}

/* ---- Pastille "état de connexion" (dans Réglages) ---- */
.sync-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sync-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; font-family: var(--font-sans, 'Jost', sans-serif);
  padding: .32rem .7rem; border-radius: 20px;
  background: var(--ivory, #FCF8F2); border: 1px solid var(--line, #eaded0);
  color: var(--charcoal-soft, #4A4038);
}
.sync-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted, #8B7E71); }
.sync-pill.ok    .dot { background: var(--ok, #5c9e6f); }
.sync-pill.wait  .dot { background: var(--warn, #c98a3a); }
.sync-pill.err   .dot { background: var(--alert, #c56a5c); }
.sync-pill.local .dot { background: var(--gold, #C6A15B); }