/* ============================================
   KILOGRAPH — contact-form.css
   Styles du formulaire de contact sécurisé
   ============================================ */

/* ---- États de validation en temps réel ---- */
.form-group.valid input,
.form-group.valid select,
.form-group.valid textarea {
  border-color: #2d7a4f;
}
.form-group.valid label::after {
  content: ' ✓';
  color: #2d7a4f;
  font-size: 0.75rem;
}

.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {
  border-color: var(--rouge);
}

.field-error {
  display: block;
  font-size: 0.72rem;
  color: var(--rouge);
  margin-top: 0.35rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.form-group.invalid .field-error {
  opacity: 1;
  transform: none;
}

/* ---- Honeypot — totalement invisible ---- */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  tab-index: -1 !important;
}

/* ---- Bouton — états ---- */
.btn-submit {
  position: relative;
  overflow: hidden;
  min-width: 200px;
  transition: background 0.2s, opacity 0.2s, transform 0.15s;
}
.btn-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
}
.btn-submit .btn-text { transition: opacity 0.2s; }
.btn-submit .btn-spinner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.btn-submit.loading .btn-text { opacity: 0; }
.btn-submit.loading .btn-spinner { opacity: 1; }

/* Spinner SVG */
.spinner-ring {
  width: 20px; height: 20px;
  animation: spinRing 0.8s linear infinite;
}
@keyframes spinRing {
  to { transform: rotate(360deg); }
}

/* ---- Message de confirmation ---- */
.form-success {
  display: none;
  border-left: 3px solid #2d7a4f;
  background: rgba(45,122,79,0.06);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.form-success.show {
  display: block;
  animation: successReveal 0.45s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes successReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.success-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #2d7a4f; margin-bottom: 1rem;
}
.success-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.form-success h3 {
  font-family: 'Fraunces', serif; font-size: 1.1rem;
  font-weight: 700; margin-bottom: 0.4rem; color: #2d7a4f;
}
.form-success p { font-size: 0.88rem; color: var(--gris); line-height: 1.7; }
.form-success a { color: var(--rouge); }

/* ---- Message d'erreur réseau ---- */
.form-error-msg {
  display: none;
  border-left: 3px solid var(--rouge);
  background: rgba(196,30,42,0.05);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-size: 0.85rem; color: var(--rouge); line-height: 1.6;
}
.form-error-msg.show { display: block; }

/* ---- Rate limit warning ---- */
.rate-limit-msg {
  display: none;
  font-size: 0.8rem; color: var(--rouge);
  margin-top: 0.5rem; font-style: italic;
}
.rate-limit-msg.show { display: block; }

/* ---- Indicateur de force du message ---- */
.msg-length {
  font-size: 0.68rem; color: var(--gris);
  text-align: right; margin-top: 0.3rem;
  letter-spacing: 0.04em; transition: color 0.2s;
}
.msg-length.good { color: #2d7a4f; }
.msg-length.warn { color: #c47a00; }