@font-face {
  font-display: swap;
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400;
  src: url('../font/RobotoMono-Regular.woff') format("woff");
}

body {
  font-family: "Roboto Mono", sans-serif;
  font-size: 16px;
}

/* header */
header {
  background-color: #007cb7;
  padding: 20px;
  position: sticky;
  top: 0;
  width: 100%;
}

header img {
  height: 50px;
  width: 100%;
}

/* main */
main {
  margin: 10px auto 0;
  max-width: 1000px;
  padding: 0 20px;
}

/* link home */
.home nav {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.home nav a {
  color: #007cb7;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.titre {
  font-size: 2rem;
  margin: 0;
  text-align: center;
}

.texte-debut {
  background-color: #f6f7f8;
  border: 1px solid #d6d8db;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 20px;
  text-align: justify;
  width: 100%;
}

.texte-debut h2 {
  font-size: 1.5rem;
  margin: 0;
  text-align: left;
}

.texte1-footer {
  color: black;
  font-weight: 700;
  margin: 0;
}

.texte1-footer p {
  margin: 0;
}

/* formulaire */
.formulaire {
  background-color: #f6f7f8;
  border: 1px solid #d6d8db;
  border-radius: 5px;
  box-sizing: border-box;
  margin-bottom: 20px;
  margin-top: 20px;
  overflow: hidden;
  padding: 20px;
  width: 100%;
}

.formulaire * {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.formulaire h2 {
  font-size: 1.5rem;
  margin-bottom: 40px;
  margin-top: 1rem;
  text-align: center;
}

.formulaire-form {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr);
  margin-bottom: 40px;
  width: 100%;
}

/* ----------- ADAPTATION POUR forma ------------ */
.forma {
  display: contents;
}

.forma > label {
  color: #007cb7;
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
}

.forma > input,
.forma > select,
.forma > textarea,
.forma > div {
  grid-column: span 1;
}

/* radios et checkboxes */
.sexe label,
.orientation label,
.conaissances label {
  color: #373737;
  cursor: pointer;
  display: block;
  font-weight: 400;
  margin-bottom: 8px;
  text-align: left;
}

.conaissances input,
.orientation input,
.sexe input {
  cursor: pointer;
  margin-right: 8px;
}

.formulaire-form select {
  background-color: #f6f7f8;
  border: 1px solid #d6d8db;
  border-radius: 5px;
  color: #373737;
  cursor: pointer;
  font-size: 1rem;
  padding: 5px 8px;
}

#civil {
  background-color: #fff !important;
}

.formulaire-form input,
.formulaire-form textarea {
  background-color: #fff;
  border: 1px solid #d6d8db;
  border-radius: 5px;
  font-size: 1rem;
  padding: 5px 8px;
}

.adresse {
  display: grid;
  gap: 5px;
  grid-column: 2;
  grid-template-columns: minmax(0, 2fr) minmax(0, 4fr);
}

.formulaire-form textarea {
  grid-column: 2 / 5;
  height: 130px;
  resize: vertical;
}

/* Validation */
input:valid,
select:valid {
  border-left: 4px solid #218838;
}

input:invalid,
select:invalid {
  border-left: 4px solid #c82333;
}

input[type="date"]::-webkit-datetime-edit {
  color: #373737;
  cursor: pointer;
}

input[type="date"]::-moz-datetime-edit {
  color: #373737;
  cursor: pointer;
}

/* bouton */
.bouton {
  margin-top: 20px;
  text-align: center;
}

.bouton button {
  background-color: #007cb7;
  border: 2px solid black;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  padding: 10px 50px;
  text-align: center;
}

.bouton button:hover {
  background-color: #005680;
}

/* footer */
footer {
  background-color: #373737;
  color: #fff;
  font-size: 1rem;
  padding: 6px;
  text-align: center;
  width: 100%;
}

/* responsive */
@media (width <= 768px) {
  .formulaire-form {
    grid-template-columns: 1fr 1fr;
  }

  .forma {
    display: block;
    width: 100%;
  }

  .forma > label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
  }

  .forma textarea {
    grid-column: auto;
    width: 100%;
  }

  .forma > input,
  .forma > select,
  .forma > textarea,
  .forma > div {
    grid-column: auto;
    width: 100%;
  }

  .adresse {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}

@media (width <= 480px) {
  .forma {
    display: contents;
  }

  .forma > label {
    margin-bottom: 0;
    text-align: left;
  }

  .forma textarea#commentaire {
    grid-column: auto;
    width: 100%;
  }

  .formulaire-form {
    gap: 15px;
    grid-template-columns: 1fr;
  }

  .adresse {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}