/* ═══════════════════════════════════════════════════════
   ACCESS-BG.CSS — Glassmorphism Floating Orbs
   Sao — AMS Croix Blanche Marseille
   
   Orbs: red (#E63946), amber (#F4A261), blue (#1E40AF)
   Dark navy background with depth gradient
   Frosted glass card + reflective sheen sweep
   Conic-gradient rotating border on submit button
═══════════════════════════════════════════════════════ */

/* ── SCENE ── */

#screen-access {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #060D18;
  background: radial-gradient(ellipse at 30% 20%, #0E1A2E 0%, #060D18 60%),
              radial-gradient(ellipse at 80% 80%, #0A1225 0%, #060D18 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Subtle noise texture overlay */
#screen-access::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}


/* ── ORBS ── */

.sao-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
  pointer-events: none;
  z-index: 1;
}

/* Red orb — large, slow clockwise orbit */
.sao-orb1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 40% 40%, #FF6B81, #E63946 50%, #B91C1C 100%);
  top: -10%;
  left: -8%;
  animation: sao-orbit1 18s ease-in-out infinite;
}

/* Amber orb — medium, counter-clockwise drift */
.sao-orb2 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle at 60% 30%, #FBBF24, #F4A261 50%, #D97706 100%);
  bottom: -5%;
  right: -6%;
  animation: sao-orbit2 22s ease-in-out infinite;
}

/* Blue orb — smaller, diagonal float */
.sao-orb3 {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 50% 50%, #60A5FA, #2563EB 50%, #1E40AF 100%);
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  animation: sao-orbit3 25s ease-in-out infinite;
  opacity: .4;
}

@keyframes sao-orbit1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(12vw, 8vh) scale(1.08); }
  50%      { transform: translate(8vw, 18vh) scale(.95); }
  75%      { transform: translate(-4vw, 10vh) scale(1.04); }
}

@keyframes sao-orbit2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-10vw, -12vh) scale(1.06); }
  50%      { transform: translate(-6vw, -6vh) scale(.92); }
  75%      { transform: translate(4vw, -14vh) scale(1.1); }
}

@keyframes sao-orbit3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  33%      { transform: translate(-60%, -40%) scale(1.12); }
  66%      { transform: translate(-42%, -58%) scale(.9); }
}


/* ── FROSTED GLASS CARD ── */

.access-box {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 380px;
  padding: 40px 32px 32px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 1px 0 rgba(255, 255, 255, .08) inset;
  text-align: center;
  overflow: hidden;
  animation: sao-cardIn .8s cubic-bezier(.16, 1, .3, 1) both;
}

/* Reflective sheen sweep */
.access-box::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, .04) 45%,
    rgba(255, 255, 255, .08) 50%,
    rgba(255, 255, 255, .04) 55%,
    transparent 60%
  );
  animation: sao-sheen 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sao-sheen {
  0%, 100% { transform: translateX(-30%) translateY(-30%) rotate(25deg); }
  50%      { transform: translateX(30%) translateY(30%) rotate(25deg); }
}

@keyframes sao-cardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.97);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}


/* ── LOGO ── */

.access-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 20px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
  animation: sao-fadeUp .6s .15s cubic-bezier(.16,1,.3,1) both;
}


/* ── TYPOGRAPHY ── */

.access-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 6px;
  animation: sao-fadeUp .6s .2s cubic-bezier(.16,1,.3,1) both;
}

.access-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .45);
  letter-spacing: .06em;
  margin-bottom: 28px;
  animation: sao-fadeUp .6s .25s cubic-bezier(.16,1,.3,1) both;
}


/* ── ERROR ── */

.access-err {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: #FF6B81;
  background: rgba(230, 57, 70, .1);
  border: 1px solid rgba(230, 57, 70, .2);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 14px;
}


/* ── INPUT ── */

#screen-access .auth-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  letter-spacing: .15em;
  outline: none;
  transition: border-color .2s, background .2s;
  box-sizing: border-box;
  animation: sao-fadeUp .6s .3s cubic-bezier(.16,1,.3,1) both;
}

#screen-access .auth-input::placeholder {
  color: rgba(255, 255, 255, .2);
  letter-spacing: .2em;
}

#screen-access .auth-input:focus {
  border-color: rgba(230, 57, 70, .5);
  background: rgba(255, 255, 255, .08);
}

#screen-access .field label {
  color: rgba(255, 255, 255, .5) !important;
}


/* ── SUBMIT BUTTON — Conic gradient rotating border ── */

#screen-access .auth-btn {
  position: relative;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  background: #E63946;
  transition: transform .12s;
  animation: sao-fadeUp .6s .35s cubic-bezier(.16,1,.3,1) both;
}

/* Rotating conic gradient border */
#screen-access .auth-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  background: conic-gradient(
    from var(--sao-btn-angle, 0deg),
    #E63946,
    #F4A261,
    #3B82F6,
    #E63946
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sao-btnRotate 4s linear infinite;
  z-index: -1;
}

@property --sao-btn-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes sao-btnRotate {
  to { --sao-btn-angle: 360deg; }
}

#screen-access .auth-btn:active {
  transform: scale(.97);
}

#screen-access .auth-btn:hover {
  background: #D32F3D;
}


/* ── STAGGERED FADE-UP ── */

@keyframes sao-fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ── FOOTER (on access screen) ── */

#screen-access .app-footer {
  position: relative;
  z-index: 10;
  margin-top: 32px;
  animation: sao-fadeUp .6s .5s cubic-bezier(.16,1,.3,1) both;
}

#screen-access .app-footer,
#screen-access .footer-copy,
#screen-access .footer-links a {
  color: rgba(255, 255, 255, .25);
}

#screen-access .footer-links a:hover {
  color: rgba(255, 255, 255, .5);
}

#screen-access .footer-logo {
  opacity: .25;
}


/* ── RESPONSIVE ── */

@media (max-width: 480px) {
  .sao-orb1 { width: 280px; height: 280px; filter: blur(60px); }
  .sao-orb2 { width: 220px; height: 220px; filter: blur(60px); }
  .sao-orb3 { width: 160px; height: 160px; filter: blur(50px); }

  .access-box {
    padding: 32px 24px 24px;
    border-radius: 20px;
  }

  .access-title { font-size: 20px; }
}

/* Reduce motion for accessibility */
/* ═══════════════════════════════════════════════════════
   LANDING SCREEN — Same glassmorphism treatment
═══════════════════════════════════════════════════════ */

#screen-landing {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  background: #060D18;
  background: radial-gradient(ellipse at 70% 30%, #0E1A2E 0%, #060D18 60%),
              radial-gradient(ellipse at 20% 75%, #0A1225 0%, #060D18 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 0;

}

/* Noise overlay */
#screen-landing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Logo */
.landing-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: contain;
  padding: 5px;
  position: relative;
  z-index: 10;
  display: block;
  margin: 0 auto 20px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .12);
  animation: sao-fadeUp .6s .1s cubic-bezier(.16,1,.3,1) both;
}

/* Title */
.landing-title {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 10;
  letter-spacing: -.02em;
  animation: sao-fadeUp .6s .18s cubic-bezier(.16,1,.3,1) both;
}

/* Subtitle */
.landing-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  text-align: center;
  margin-top: 6px;
  margin-bottom: 36px;
  text-transform: uppercase;
  letter-spacing: .12em;
  position: relative;
  z-index: 10;
  animation: sao-fadeUp .6s .25s cubic-bezier(.16,1,.3,1) both;
}

/* Buttons — frosted glass cards */
.landing-btn {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 380px;
  padding: 18px 20px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  color: #fff;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: background .2s, border-color .2s, transform .1s;
}

.landing-btn:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
}

.landing-btn:active {
  transform: scale(.98);
}

/* Chef de poste — red solid */
.btn-chef {
  background: rgba(230, 57, 70, .85);
  border-color: rgba(230, 57, 70, .3);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(230, 57, 70, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.btn-chef:hover {
  background: rgba(230, 57, 70, .95);
  border-color: rgba(230, 57, 70, .5);
}

.btn-chef .landing-btn-icon {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .15);
}

/* Admin */
.btn-admin {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .15);
}

/* Icon boxes */
.landing-btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.landing-btn-text { flex: 1; }
.landing-btn-title { font-size: 14px; font-weight: 700; }
.landing-btn-desc { font-size: 11px; opacity: .55; margin-top: 2px; font-weight: 400; }

/* Stagger animations on buttons */
.landing-btn:nth-child(4) { animation: sao-fadeUp .6s .32s cubic-bezier(.16,1,.3,1) both; }
.landing-btn:nth-child(5) { animation: sao-fadeUp .6s .40s cubic-bezier(.16,1,.3,1) both; }
.landing-btn:nth-child(6) { animation: sao-fadeUp .6s .48s cubic-bezier(.16,1,.3,1) both; }

/* Footer */
#screen-landing .app-footer {
  position: relative;
  z-index: 10;
  margin-top: 32px;
  animation: sao-fadeUp .6s .55s cubic-bezier(.16,1,.3,1) both;
}

#screen-landing .app-footer,
#screen-landing .footer-copy,
#screen-landing .footer-links a {
  color: rgba(255, 255, 255, .25);
}

#screen-landing .footer-links a:hover {
  color: rgba(255, 255, 255, .5);
}

#screen-landing .footer-logo {
  opacity: .25;
}

/* ═══════════════════════════════════════════════════════
   POSTE & ADMIN-LOGIN — Glassmorphism auth screens
═══════════════════════════════════════════════════════ */

#screen-poste,
#screen-admin-login {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  overflow-y: auto;
  background: #060D18;
  background: radial-gradient(ellipse at 50% 30%, #0E1A2E 0%, #060D18 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

/* Noise overlay */
#screen-poste::before,
#screen-admin-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Auth box — frosted glass */
#screen-poste .auth-box,
#screen-admin-login .auth-box {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 380px;
  padding: 36px 30px 28px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 1px 0 rgba(255, 255, 255, .08) inset;
  text-align: center;
  overflow: hidden;
  animation: sao-cardIn .8s cubic-bezier(.16, 1, .3, 1) both;
}

/* Sheen sweep on auth boxes */
#screen-poste .auth-box::after,
#screen-admin-login .auth-box::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, .04) 45%,
    rgba(255, 255, 255, .08) 50%,
    rgba(255, 255, 255, .04) 55%,
    transparent 60%
  );
  animation: sao-sheen 6s ease-in-out infinite;
  pointer-events: none;
}

/* Titles */
#screen-poste .auth-box-title,
#screen-admin-login .auth-box-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

#screen-poste .auth-box-sub,
#screen-admin-login .auth-box-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 24px;
}

/* Inputs — dark theme */
#screen-poste .auth-input,
#screen-admin-login .auth-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color .2s, background .2s;
  margin-bottom: 12px;
  box-sizing: border-box;
}

#screen-poste .auth-input-lg {
  font-family: 'DM Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-align: center;
}

#screen-poste .auth-input::placeholder,
#screen-admin-login .auth-input::placeholder {
  color: rgba(255, 255, 255, .25);
}

#screen-poste .auth-input:focus,
#screen-admin-login .auth-input:focus {
  border-color: rgba(230, 57, 70, .5);
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

/* Submit button — red with conic border */
#screen-poste .auth-btn,
#screen-admin-login .auth-btn {
  position: relative;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  background: #E63946;
  margin-bottom: 10px;
  transition: transform .12s;
}

#screen-poste .auth-btn::before,
#screen-admin-login .auth-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  background: conic-gradient(
    from var(--sao-btn-angle, 0deg),
    #E63946, #F4A261, #3B82F6, #E63946
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sao-btnRotate 4s linear infinite;
  z-index: -1;
}

#screen-poste .auth-btn:hover,
#screen-admin-login .auth-btn:hover {
  background: #D32F3D;
}

#screen-poste .auth-btn:active,
#screen-admin-login .auth-btn:active {
  transform: scale(.97);
}

/* Remove the old conic ::after from style.css */
#screen-poste .auth-btn::after,
#screen-admin-login .auth-btn::after {
  content: none;
}

/* Back button */
#screen-poste .auth-back,
#screen-admin-login .auth-back {
  color: rgba(255, 255, 255, .4);
  font-size: 13px;
}

#screen-poste .auth-back:hover,
#screen-admin-login .auth-back:hover {
  color: rgba(255, 255, 255, .7);
}

/* Error */
#screen-poste .auth-err,
#screen-admin-login .auth-err {
  color: #FF6B81;
  background: rgba(230, 57, 70, .1);
  border: 1px solid rgba(230, 57, 70, .2);
  border-left: 3px solid #E63946;
  border-radius: 8px;
}

/* Section step specifics */
#screen-poste .section-step-title {
  color: rgba(255, 255, 255, .35) !important;
}

#screen-poste #section-list button {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
}

#screen-poste #section-list button:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .2);
}

/* Footer on admin-login */
#screen-admin-login .app-footer {
  position: relative;
  z-index: 10;
  margin-top: 24px;
}

#screen-admin-login .app-footer,
#screen-admin-login .footer-copy,
#screen-admin-login .footer-links a {
  color: rgba(255, 255, 255, .25);
}

#screen-admin-login .footer-logo {
  opacity: .25;
}

/* ── Respecter le système .screen/.active ── */
#screen-access:not(.active),
#screen-landing:not(.active),
#screen-poste:not(.active),
#screen-admin-login:not(.active) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sao-orb,
  .access-box::after {
    animation: none !important;
  }
  .access-box,
  .access-logo,
  .access-title,
  .access-sub,
  #screen-access .auth-input,
  #screen-access .auth-btn,
  #screen-access .app-footer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}