/* ===== DelegCloud Joyeux – Lisible ===== */
:root{
  --dc-blue:   #2563EB;   /* bleu moyen lisible (titres/liens) */
  --dc-blue2:  #1E3A8A;   /* bleu foncé (accent/bouton) */
  --dc-dark:   #0F2451;   /* bleu nuit léger pour ombres */
  --dc-cyan:   #22D3EE;   /* cyan confettis/focus */
  --dc-orange: #F97316;   /* orange hover */
  --dc-yellow: #FACC15;   /* jaune confettis */
  --dc-cream:  #FFF8F0;   /* fond de la box */
  --dc-text:   #374151;   /* gris bleuté doux (texte secondaire) */
  --dc-ph:     #6B7280;   /* placeholder */
}

/* ===== Fond vivant : dégradé + halos colorés ===== */
body#body-login{
  background:
    radial-gradient(900px 600px at 10% 25%, rgba(250,204,21,.25) 0, transparent 70%),
    radial-gradient(900px 600px at 85% 25%, rgba(249,115,22,.22) 0, transparent 70%),
    radial-gradient(1000px 700px at 30% 85%, rgba(34,211,238,.22) 0, transparent 70%),
    linear-gradient(135deg, #E0F2FE 0%, #C7D2FE 45%, #FDE68A 120%);
  background-attachment: fixed;
  color: var(--dc-text);
}

/* ===== Logo rond + halo doux ===== */
#body-login .logo img{
  width:110px; height:110px;
  border-radius:50%;
  background:#fff; padding:6px;
  box-shadow:
    0 0 0 6px rgba(250,204,21,.35),
    0 0 24px rgba(34,211,238,.35),
    0 8px 16px rgba(15,36,81,.18);
}

/* ===== Boîte de connexion claire et joyeuse ===== */
#body-login .login-box{
  background: rgba(255,248,240,.95);
  border:1px solid rgba(15,36,81,.10);
  border-radius:20px;
  box-shadow:
    0 12px 28px rgba(15,36,81,.20),
    0 0 38px rgba(250,204,21,.18);
  backdrop-filter: blur(6px);
  padding:30px;
  position: relative;
}

/* Confettis doux autour de la box */
#body-login .login-box::after{
  content:"";
  position:absolute; inset:-42px;
  background:
    radial-gradient(circle at 18% 28%, var(--dc-yellow) 0 6px, transparent 7px),
    radial-gradient(circle at 86% 24%, var(--dc-orange) 0 6px, transparent 7px),
    radial-gradient(circle at 36% 88%, var(--dc-cyan)   0 6px, transparent 7px),
    radial-gradient(circle at 70% 78%, var(--dc-blue2)  0 6px, transparent 7px);
  opacity:.55; pointer-events:none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.06));
}

/* ===== Titres, labels, textes ===== */
#body-login h1, #body-login h2, #body-login label{
  color: var(--dc-blue) !important;
  font-weight:600;
}
#body-login,
#body-login .login-additional,
#body-login .login-additional a,
#body-login .login-additional span{
  color: var(--dc-text) !important;
}
#body-login a{
  color: var(--dc-blue) !important;
  font-weight:500;
}
#body-login a:hover{ color: var(--dc-orange) !important; }

/* Placeholders */
#body-login input::placeholder{ color: var(--dc-ph) !important; }

/* ===== Champs ===== */
#body-login input[type="text"],
#body-login input[type="email"],
#body-login input[type="password"]{
  background:#ffffffdd;
  border:1px solid rgba(15,36,81,.20);
  color:#0f172a;
  border-radius:10px; padding:10px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
#body-login input:focus{
  outline:none !important;
  border-color: var(--dc-cyan);
  box-shadow:0 0 0 3px rgba(34,211,238,.30);
  background:#fff;
}

/* ===== Bouton principal ===== */
#body-login input[type="submit"],
#body-login .primary,
#body-login button.primary{
  background: linear-gradient(90deg, var(--dc-blue2), var(--dc-blue));
  border:none !important;
  color:#fff !important;
  border-radius:14px !important;
  font-weight:600; letter-spacing:.3px;
  box-shadow:0 6px 16px rgba(30,58,138,.35);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
#body-login .primary:hover{
  background: linear-gradient(90deg, var(--dc-orange), var(--dc-yellow));
  box-shadow:0 8px 22px rgba(249,115,22,.45);
  transform: translateY(-2px);
}

/* ===== Pied de page ===== */
#body-login #footer, #body-login .powered-by{ color: rgba(15,36,81,.70); }
#body-login #footer a{ color: var(--dc-blue); }
#body-login #footer a:hover{ color: var(--dc-orange); }

/* ===== Petites améliorations responsive ===== */
@media (max-width: 640px){
  #body-login .login-box{ margin: 0 14px; padding:22px; }
  #body-login .logo img{ width:90px; height:90px; }
}

/* ===== Variante automatique en mode sombre (OS) ===== */
@media (prefers-color-scheme: dark){
  body#body-login{
    background:
      radial-gradient(900px 600px at 10% 25%, rgba(250,204,21,.10) 0, transparent 70%),
      radial-gradient(900px 600px at 85% 25%, rgba(249,115,22,.10) 0, transparent 70%),
      radial-gradient(1000px 700px at 30% 85%, rgba(34,211,238,.10) 0, transparent 70%),
      linear-gradient(135deg, #0b1320, #0f1b33 60%, #1f2937 120%);
    color:#e5e7eb;
  }
  #body-login .login-box{
    background: rgba(15,23,42,.80);
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 38px rgba(34,211,238,.12);
  }
  #body-login input{
    background: rgba(255,255,255,.08);
    color:#e5e7eb;
    border-color: rgba(255,255,255,.18);
  }
  #body-login a{ color:#93c5fd !important; }
}