/* Styles pour la page de login SPANC */

body {
  font-family: Arial, sans-serif !important;
  background: url("../img/image_fond.jpeg") no-repeat center center fixed !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  color: #333 !important;
  margin: 0 !important;
  padding: 20px !important;
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.login-container {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.login-container img {
  max-width: 150px;
  margin-bottom: 20px;
}

.g-recaptcha {
  margin-bottom: 15px; 
  display: inline-block;
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px;
  margin: 10px 0 15px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 1em;
}

button {
  background-color: #0077b6;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button:hover:not(:disabled) {
  background-color: #005f86;
}

button:disabled {
    background-color: #999;
    cursor: not-allowed;
}

.messages {
  margin-top: 15px;
  padding: 10px;
  border-radius: 5px;
  min-height: 20px;
  text-align: center;
  font-weight: bold;
  display: none; /* Caché par défaut, affiché par JS */
}

.messages.show {
    display: block;
}

.messages.success {
    background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb;
}

.messages.error {
    background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
}

.flash-message {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-weight: bold;
}

.flash-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.flash-warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

/* STYLES POUR LA POPUP MODALE */
.popup-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6); display: none; justify-content: center;
  align-items: center; z-index: 2000; padding: 20px; box-sizing: border-box;
}

.popup-content {
  background: white; padding: 30px; border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2); max-width: 450px; width: 100%;
  text-align: center;
}

.popup-content h3 { margin-top: 0; color: #003a63; font-size: 1.5em; }
.popup-content p { margin-bottom: 20px; color: #555; }
.popup-content form label {
  display: block; text-align: left; font-weight: bold;
  margin-top: 10px; margin-bottom: 5px;
}

.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3); border-radius: 50%;
  border-top-color: #fff; animation: spin 0.8s linear infinite;
  margin-right: 8px; vertical-align: middle;
}

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

.popup-content form label {
  display: block; text-align: left; font-weight: bold;
  margin-top: 10px; margin-bottom: 5px;
}

.popup-content #forceChangePwdError { color: #d93025; font-weight: bold; margin-top: 10px; }
#popup-password-criteria ul { list-style: none; padding: 0; margin: 5px 0 15px 0; }
#popup-password-criteria li {
  text-align: left; display: flex; align-items: center;
  font-size: 0.9em; margin-bottom: 3px;
}
#popup-password-criteria li i { margin-right: 8px; width: 16px; }

/* Responsive */
@media (max-width: 480px) {
  body { padding: 10px; }
  .login-container { padding: 20px; }
  .popup-content { padding: 20px; max-width: 100%; }
}