/* =============================================================================
   FORMS.CSS – ✉️ Formulaire de contact
   Harmonisé le 2025-07-04
   -----------------------------------------------------------------------------
   CHANGEMENTS CLÉS
   • Palette alignée : var(--accent-color) ➜ var(--accent) (déjà définie dans base.css)
   • Unification des doublons (.form-check-label)  → 1 seul bloc
   • Bouton d’envoi #submit-contact converti en « .btn btn-primary » (id conservé)
   • Focus/outline accessibles + variables globales
   • Commentaires & indentation uniformisés
   ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
   1 · WRAPPER
   ------------------------------------------------------------------------ */
.contact-form {
  background-color: #1e1e2e;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .30);
  color: #f0f0f0;
  max-width: 720px;
  margin-inline: auto;
}
html.light .contact-form {
  background-color: #fff;
  color: #222;
  box-shadow: 0 8px 24px rgb(0 0 0 / .05);
}

/* ---------------------------------------------------------------------------
   2 · TYPO & LABELS
   ------------------------------------------------------------------------ */
.contact-form label,
.form-check-label {
  font-weight: 600;
  margin-bottom: .35rem;
  display: inline-block;
}

/* ---------------------------------------------------------------------------
   3 · INPUTS & TEXTAREA
   ------------------------------------------------------------------------ */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: .65rem 1rem;
  border-radius: 8px;
  background-color: #2b2b3a;
  border: 1px solid #444;
  color: #fff;
  font-size: 1rem;
  transition: border .3s ease, box-shadow .3s ease;
}
html.light .contact-form input[type="text"],
html.light .contact-form input[type="email"],
html.light .contact-form textarea {
  background-color: #fff;
  color: #222;
  border: 1px solid #ccc;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary, #3498db);
  box-shadow: 0 0 0 3px rgb(52 152 219 / .20);
  outline: none;
}

/* ---------------------------------------------------------------------------
   4 · RGPD & CHAMPS OPTIONNELS
   ------------------------------------------------------------------------ */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: 1rem;
}
.form-check small {
  font-size: .85rem;
  margin-top: .25rem;
  display: block;
  color: #666;
}

.required { color: red; margin-left: 2px; }

/* ---------------------------------------------------------------------------
   5 · BOUTON D’ENVOI  (id conservé pour JS)  +  Classes .btn .btn-primary
   ------------------------------------------------------------------------ */
#submit-contact,
#submit-contact.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* ← centre horizontalement le contenu */
  gap: 0;                    /* ← supprime l’espace réservé au spinner */
  gap: .5rem;
  font-weight: 600;
  font-size: 1.05rem;
  padding: .6rem 1.4rem;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background .3s ease, transform .2s ease, box-shadow .2s ease;
}
#submit-contact:hover,
#submit-contact:focus {
  background: color-mix(in srgb, var(--primary) 80%, black 20%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(0 0 0 / .15);
}
#submit-contact:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Bouton disabled */
#submit-contact[disabled] {
  background: #e5e5e5;
  color: #999;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------------------------------------------------------------------------
   6 · LOADER SPINNER
   ------------------------------------------------------------------------ */
.spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  margin-left: .5rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  vertical-align: middle;
}
html.light .spinner {
  border-color: #333;
  border-top-color: transparent;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   7 · ALERTES BOOTSTRAP (optionnel)
   ------------------------------------------------------------------------ */
.alert {
  border-radius: 8px;
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   8 · ACCESSIBILITÉ GLOBALE FOCUS
   ------------------------------------------------------------------------ */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   9 · RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .contact-form { padding: 1.5rem 1rem; }
  #submit-contact { width: 100%; justify-content: center; }
}
