/* Si tu as ajouté .container dans d'autres pages, garde ça cohérent */
.container {
  width: min(900px, 100%);
  padding: 24px 16px;
}


.form-grid {
  width: 100%;
  max-width: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 10px auto 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-size: 14px;
}

input[type="text"],
input[type="number"],
select {
  height: 42px;
  padding: 0 10px;          /* IMPORTANT */
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.25);
  font-size: 16px;
  line-height: 42px;        /* IMPORTANT */
  box-sizing: border-box;
  appearance: none;         /* neutralise le style natif */
  -webkit-appearance: none;
  -moz-appearance: none;
}


.file-info {
  margin: 10px auto 0;
  font-size: 14px;
  text-align: center;
  max-width: 800px;
  word-break: break-word;
}

.hint {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 6px;
}

/* Responsive */
@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .buttons-row {
    flex-direction: column;
    align-items: stretch;
  }
  button, .btn-file {
    width: 100%;
    max-width: 420px;
  }
}

/* Pour que le <a class="btn-file"> ressemble aussi à un bouton si tu l'utilises ailleurs */
.btn-file {
  text-decoration: none;
}

.logo {
  display: block;
  margin: 0 auto 30px auto;
}

h1 {
  text-align: center;
}

/* --- Correction espacement boutons --- */

.buttons-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Supprime les marges verticales excessives des boutons */
button,
.btn-file {
  margin: 0 !important;
}

.required {
  color: #be1825;     /* même rouge que tes boutons */
  margin-left: 4px;
  font-weight: bold;
}

.form-error {
  color: #be1825;
  font-size: 14px;
  margin: 8px auto 4px;
  text-align: center;
  display: none;
}

/* Champ invalide */
.field-error input,
.field-error select {
  border-color: #be1825;
  background-color: #fff5f6;
}

/* ---------- Responsive mobile ---------- */
@media (max-width: 600px) {
  /* marge latérale globale */
  body {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* évite les largeurs fixes trop grandes */
  h1 {
    font-size: 34px;       /* au lieu de 70px */
    margin-bottom: 24px;
  }

  .logo {
    width: 120px;          /* au lieu de 160px */
    margin-bottom: 16px;
  }

  .btn {
    width: 100%;           /* au lieu de 400px */
    max-width: 420px;
    font-size: 18px;       /* au lieu de 30px */
    padding: 14px;
  }
}