/* Feuille de style supplémentaire pour les nouvelles pages (Stories 8.2 et 8.3) */

/* ========== Formulaires d'inscription et de validation ========== */
.form-inscription,
.form-validateur {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form-inscription label,
.form-validateur label {
  margin-top: var(--space-6);
  display: block;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.form-inscription input,
.form-validation input,
.form-validateur select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  box-sizing: border-box;
  border: 1px solid var(--color-surface-cool);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.2s, outline 0.2s;
}

.form-inscription input::placeholder,
.form-validateur input::placeholder {
  color: var(--color-text-muted);
}

.form-inscription input:focus,
.form-validateur input:focus,
.form-validateur select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.form-inscription input:disabled,
.form-validateur input:disabled,
.form-validateur select:disabled {
  background: var(--color-surface-cool);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-inscription input[type="password"] {
  font-family: 'Courier New', monospace;
  letter-spacing: 0.1em;
}

/* Note sous un champ */
.note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  margin-bottom: 0;
  line-height: var(--line-height-normal);
}

/* ========== Fieldsets (groupes de formulaire) ========== */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  padding: 0;
  width: 100%;
}

/* ========== Zone de dépôt de fichiers (upload) ========== */
.upload-zone {
  border: 2px dashed var(--color-surface-cool);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  background: var(--color-bg);
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
}

.upload-zone.drag-over {
  border-color: var(--color-primary);
  background: rgba(86, 117, 104, 0.05);
}

.upload-zone .file-label {
  display: block;
  cursor: pointer;
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

.upload-zone input[type="file"] {
  display: none;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .upload-zone {
    padding: var(--space-6);
  }
}

@media (prefers-color-scheme: dark) {
  .upload-zone {
    border-color: var(--color-surface-cool);
    background: var(--color-bg);
  }

  .upload-zone.drag-over {
    border-color: var(--color-primary-light);
    background: rgba(122, 154, 139, 0.1);
  }
}