/* === Auth modal overlay === */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  z-index: 1000;
}

/* === Auth modal box === */
.auth-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  max-width: 400px;
  width: 100%;
  padding: 2em;
  position: relative;
}

/* Optional Close button (top-right) */
.auth-modal .close-btn {
  position: absolute;
  top: 0.75em;
  right: 0.75em;
  background: none;
  border: none;
  font-size: 1.25em;
  cursor: pointer;
}

/* === Header text inside modal === */
.auth-modal h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 1.75em;
  color: #333;
}
.auth-modal p.intro {
  margin-bottom: 1.5em;
  color: #555;
  font-size: 0.95em;
}

/* === Form fields & button === */
.auth-modal form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.auth-modal input {
  width: 100%;
  padding: 0.75em;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1em;
  transition: border-color .2s;
}
.auth-modal input:focus {
  border-color: #a11818;
  outline: none;
}
.auth-modal button {
  padding: 0.75em;
  background: #a11818;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 1em;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.auth-modal button:hover {
  background: #871414;
}
.auth-modal button:active {
  transform: scale(0.98);
}

/* === Messages === */
.auth-modal .msg, .auth-modal .error {
  padding: 0.75em 1em;
  border-radius: 6px;
  font-size: 0.9em;
}
.auth-modal .msg {
  background: #e6f4ea;
  color: #2d6a4f;
  border: 1px solid #a8d5ba;
}
.auth-modal .error {
  background: #fdecea;
  color: #9b1c1c;
  border: 1px solid #f5c2c7;
}

/* === Responsive === */
@media (max-width: 480px) {
  .auth-modal {
    padding: 1.5em;
  }
  .auth-modal h2 {
    font-size: 1.5em;
  }
}

.auth-modal .auth-switch,
.auth-modal > form + a {
  display: block;
  text-align: left;
  margin-top: 1em;
  font-size: 0.95em;
  color: #a11818;
  text-decoration: none;
  transition: color .2s, text-decoration .2s;
}
.auth-modal .auth-switch:hover,
.auth-modal > form + a:hover {
  color: #871414;
  text-decoration: underline;
}

/* On cible le <label> lié à la checkbox via l’attribut for */
.remember{
  display: flex;
  align-items: left;
  margin-bottom: 1rem;
  flex-direction: row;
  justify-content: flex-start;
}

/* On espace légèrement la checkbox du texte */
.remember input {
  margin: 0 0.5rem;
  vertical-align: middle;
}