/*
  ITPlatform Tools — Contact Form
  CSS spécifique à l'outil.
  Ne contient QUE ce que base.css V2 ne couvre pas.

  Éléments propres à ce formulaire :
  - .field-required   : astérisque de champ obligatoire
  - .contact-textarea : textarea étendu pour les messages longs
  - .char-counter     : compteur de caractères du message
  - .contact-honeypot : champ anti-bot (invisible)
  - .form-actions     : zone du bouton de soumission
  - .contact-result   : section résultat masquée par défaut (override tool-result)
  - .result-icon      : icône de statut (succès / erreur)
  - .contact-spinner  : indicateur de chargement pendant l'envoi
*/

/* ============================
   CHAMP OBLIGATOIRE
   ============================ */

.field-required {
  color: var(--color-danger);
  margin-left: 2px;
  font-weight: 600;
}

/* ============================
   TEXTAREA MESSAGE
   base.css définit min-height: 120px pour textarea.tool-input
   On l'étend pour le champ message.
   ============================ */

.contact-textarea {
  min-height: 200px;
  font-family: var(--font-sans);  /* Message en prose, pas monospace */
  font-size: var(--text-base);
  resize: vertical;
}

/* ============================
   COMPTEUR DE CARACTÈRES
   ============================ */

.char-counter {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: right;
  margin: var(--space-xs) 0 0 0;
}

.char-counter.warning {
  color: var(--color-warning);
  font-weight: 500;
}

.char-counter.limit {
  color: var(--color-danger);
  font-weight: 600;
}

/* ============================
   HONEYPOT (invisible)
   Display none serait détecté par certains bots sophistiqués ;
   on utilise une combinaison CSS + aria-hidden + tabindex=-1.
   ============================ */

.contact-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ============================
   ZONE DU BOUTON
   ============================ */

.form-actions {
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-base);
}

/* ============================
   SPINNER DE CHARGEMENT
   Affiché dans le bouton pendant la soumission.
   ============================ */

.contact-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

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

/* ============================
   SECTION RÉSULTAT
   Neutraliser white-space: pre-wrap de base.css pour afficher
   des blocs HTML (alerts) proprement dans .tool-result.
   ============================ */

.contact-result {
  white-space: normal;
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

/* ============================
   CONTENU DU RÉSULTAT
   ============================ */

.result-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: var(--space-md);
  display: block;
}

.result-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--space-md) 0;
  color: var(--color-text);
}

.result-body {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-xl) 0;
  line-height: var(--leading-relaxed);
}

.result-action {
  margin-top: var(--space-base);
}

/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 640px) {
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .tool-button {
    width: 100%;
    justify-content: center;
  }
}