[x-cloak] { display: none !important; }

.error-message,
.success-message, .info-message {
  border-radius: 1em;
  padding: clamp(.55em, 2vw, .95em) clamp(.6em, 3vw, 1.1em);  /* ⬅️ Réduit le padding horizontal */
  font-size: .90em;
  font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;
  box-shadow: 0 4px 18px rgba(32,32,32,0.07);
  border: 1.3px solid;
  outline: none;
  max-width: 95vw;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  transition: box-shadow .18s cubic-bezier(.4,0,.2,1);
}

.info-message {
  background: linear-gradient(90deg, #eef6fd 0%, #eaf4ff 100%);
  color: #2e5d86;
  border-color: #7ec2f3;
  box-shadow: 0 4px 18px rgba(32,120,255,0.05);
}

.dark .info-message {
  background: linear-gradient(90deg, #162136 0%, #16293d 100%);
  color: #bee5ff;
  border-color: #4a98dd;
}


.error-message {
  background: linear-gradient(90deg, #fff0f3 0%, #ffe6e6 100%);
  color: #bb2222;
  border-color: #ffb5b5;
  box-shadow: 0 4px 18px rgba(180,0,0,0.05);
}

.dark .error-message {
  background: linear-gradient(90deg, #221517 0%, #2e1515 100%);
  color: #ffbdbd;
  border-color: #ff7575;
}

.success-message {
  background: linear-gradient(90deg, #f2fff7 0%, #e7ffe7 100%);
  color: #19824d;
  border-color: #88e097;
  box-shadow: 0 4px 18px rgba(32,192,64,0.07);
}

.dark .success-message {
  background: linear-gradient(90deg, #12281a 0%, #0e2115 100%);
  color: #a3ffb2;
  border-color: #44bb88;
}

/* Mobile: Ultra adaptatif */
@media (max-width: 480px) {
  .error-message,
  .success-message {
    padding: 0.58em 0.4em;
    font-size: .90em;
    margin-bottom: 0.72em;
    border-radius: .8em;
    max-width: 99vw;
  }
}