/* Formulaire « Demander un training » : couleurs par variables pour suivre le mode sombre. */
.demande {
  --erreur: #b3261e;
  --succes: #0f6e66;
  --sur-degrade: #ffffff;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (prefers-color-scheme: dark) {
  .demande {
    --erreur: #ff9d94;
    --succes: #45d1c5;
    --sur-degrade: #0c1430;
  }
}
.demande-titre { margin: 0; font-size: 17px; font-weight: 700; }
.demande-intro { margin: 0; max-width: 62ch; font-size: 14px; color: var(--encre-douce); }

.demande-formulaire { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.demande-formulaire[hidden] { display: none; }
.demande-groupe { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.demande-etiquette { font-size: 14px; font-weight: 600; }
.demande-champ {
  font: inherit;
  font-size: 16px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--encre-douce);
  border-radius: 14px;
  background: var(--surface);
  color: var(--encre);
}
.demande-commentaire { display: block; resize: vertical; }
.demande-champ:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.demande-champ[aria-invalid="true"] { border-color: var(--erreur); }
.demande-mention { margin: 0; max-width: 62ch; font-size: 13px; color: var(--encre-douce); }

.demande-erreur { margin: 0; font-size: 14px; font-weight: 600; color: var(--erreur); }
.demande-erreur:empty { display: none; }

.demande-bouton {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  min-height: 44px;
  align-self: flex-start;
  border: 0;
  border-radius: 16px;
  padding: 10px 22px;
  color: var(--sur-degrade);
  background: linear-gradient(120deg, var(--bleu), var(--violet));
  cursor: pointer;
}
.demande-bouton:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }
.demande-bouton:disabled { opacity: .65; cursor: progress; }

.demande-succes { margin: 0; font-weight: 600; color: var(--succes); overflow-wrap: anywhere; }
.demande-succes:focus { outline: none; }

@media (max-width: 480px) {
  .demande { padding: 14px; }
  .demande-bouton { align-self: stretch; }
}