:root {
  color-scheme: dark;
  --boot-bg-0: #020403;
  --boot-bg-1: #06100c;
  --boot-card: rgba(8, 14, 11, 0.88);
  --boot-gold: rgba(226, 201, 129, 0.92);
  --boot-green: rgba(132, 204, 22, 0.76);
  --boot-text: #f8eed2;
  --boot-muted: rgba(235, 234, 216, 0.62);
}

html[data-auth-pending="1"] body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(132, 204, 22, 0.13), transparent 26%),
    radial-gradient(circle at 18% 78%, rgba(245, 158, 11, 0.10), transparent 22%),
    linear-gradient(180deg, var(--boot-bg-0) 0%, var(--boot-bg-1) 48%, var(--boot-bg-0) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-auth-pending="1"] #home-view {
  display: none !important;
}

html[data-auth-pending="1"] #dashboard-view,
html[data-auth-pending="1"] #admin-view {
  visibility: hidden !important;
}

.auth-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(132, 204, 22, 0.13), transparent 26%),
    radial-gradient(circle at 18% 78%, rgba(245, 158, 11, 0.10), transparent 22%),
    linear-gradient(180deg, var(--boot-bg-0) 0%, var(--boot-bg-1) 48%, var(--boot-bg-0) 100%);
  color: var(--boot-text);
  /* Fade-in : visibility visible immédiatement, opacité anime de 0 → 1 */
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Fade-out du boot screen quand auth-pending passe à false.
 *
 * Technique CSS directionnelle :
 * - La règle ici définit la transition HIDE (opacity fade + visibility retardée)
 * - La règle de base (.auth-boot-screen) définit la transition SHOW
 *   (opacity fade sans délai, visibility visible immédiatement)
 *
 * visibility 0s linear 300ms : l'élément reste visible pendant tout le
 * fondu (pointer-events et accessibilité coupés après 300 ms seulement).
 */
html:not([data-auth-pending="1"]) .auth-boot-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 300ms;
}

.auth-boot-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: min(360px, calc(100vw - 40px));
  padding: 30px 34px;
  border-radius: 26px;
  border: 1px solid rgba(226, 201, 129, 0.18);
  background: linear-gradient(180deg, rgba(11, 18, 15, 0.90), rgba(5, 10, 8, 0.80));
  box-shadow: 0 34px 90px -52px rgba(0, 0, 0, 0.96), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.auth-boot-mark {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  border: 1px solid rgba(226, 201, 129, 0.22);
  background: radial-gradient(circle at 50% 35%, rgba(214, 230, 101, 0.20), transparent 58%), rgba(8, 14, 11, 0.84);
  box-shadow: 0 0 32px rgba(132, 204, 22, 0.12);
}

.auth-boot-spinner {
  position: absolute;
  inset: -7px;
  border-radius: 24px;
  border: 2px solid rgba(226, 201, 129, 0.10);
  border-top-color: var(--boot-green);
  border-right-color: rgba(226, 201, 129, 0.42);
  animation: authBootSpin 1.05s linear infinite;
}

.auth-boot-card strong {
  color: var(--boot-text);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.auth-boot-card small {
  color: var(--boot-muted);
  font-size: 0.9rem;
}

@keyframes authBootSpin {
  to { transform: rotate(360deg); }
}