:root {
  --site-cyan: #00c8ff;
  --site-pink: #ff4db8;
  --site-yellow: #ffd400;
  --site-ink: #182230;
  --site-muted: #5f6b7a;
  --site-border: rgba(24, 34, 48, .14);
  --site-surface: #ffffff;
}

.site-appbar {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid var(--site-border);
  color: var(--site-ink);
  position: relative;
  z-index: 30;
}
.site-appbar-inner {
  width: min(1520px, 100%);
  margin: 0 auto;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.siteAppBar-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 9px;
}
.site-brand {
  font-size: .86rem;
  font-weight: 850;
  letter-spacing: .02em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-switcher {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.site-link,
.site-install-button {
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  background: #f1f1ee;
  color: var(--site-ink);
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-link[aria-current="page"] {
  background: var(--site-cyan);
  color: #062433;
}
.site-install-button {
  background: var(--site-pink);
  color: #3b0430;
}
.site-install-button[hidden] { display: none !important; }
.site-connection {
  font-size: .76rem;
  color: var(--site-muted);
  white-space: nowrap;
}
.site-connection.is-offline {
  color: #9a3412;
  font-weight: 750;
}

/* Gate commun aux deux pages. Les anciennes classes restent prises en charge. */
.gate-overlay,
.gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: #f4f7fb !important;
}
.gate-overlay.hidden,
.gate.hidden { display: none !important; }
.gate-box,
.gate-card {
  width: min(420px, 100%) !important;
  padding: 18px !important;
  background: #ffffff !important;
  color: var(--site-ink) !important;
  border: 0 !important;
  border-top: 5px solid var(--site-pink) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .12) !important;
}
.gate-box h2,
.gate-card h2 { margin: 0 0 6px !important; }
.gate-box p,
.gate-card p { color: var(--site-muted); }
.gate-box input,
.gate-card input {
  width: 100%;
  background: #ffffff !important;
  color: var(--site-ink) !important;
  border: 1px solid var(--site-border) !important;
}

@media (max-width: 640px) {
  .site-appbar-inner { align-items: flex-start!important; }
  .site-brand { padding-top: 8px; }
  .site-switcher { gap: 5px; }
  .site-link, .site-install-button { padding: 7px 8px; }
  .site-connection { width: 100%; text-align: right; }
}