:root {
  --couleur-principal:#ffffff;
  --couleur-secondaire:#dfdfdf;
  --couleur-titre: #000000;
  --couleur-texte: #000000;
  --couleur-hover: #6f6f6f;
}
html{
    background-image: url("../src/images/fondFormulaire.png");
}

main {
  margin-left: auto;
  margin-right: auto;
  margin-bottom : 0px;
  margin-top : 0px;
  max-width: 50em;
  max-height: 50em;
}
main>*{
    background-color: var(--couleur-principal);
    min-height: 50%;
    align-self: center;
    border: solid;
    justify-content: center;
    border-radius: 25px;
}

h1 {
  color: var(--couleur-titre)
}
form.entree {
    display: table;
}
.entree {
    display: table-row;
}
.entree >label,.entree > input {
    display: table-cell;
    margin-bottom: 10px;
}

.entree > input {
    border-radius: 3px;
    width: 32em;
}

input[type = "date"] {
    border-radius: 0px;
}

article{
    display: none;
}


.entree > label {
    padding-right: 10px;
}

button {
    border : solid;
    background-color : var(--couleur-secondaire);
    border-color: var(--couleur-texte);
}
footer > nav {
  background-color: var(--couleur-principal);
  text-align : center;
}
a {
  color: var(--couleur-texte);
  text-decoration: none;
}
#boutnav {
  color: var(--couleur-texte) ;
}

input:hover {
    border-radius: 0px;
}
button:hover {
  cursor : pointer;
}
button:disabled:hover {
  cursor : not-allowed;
}
footer > nav >*:hover {
  color : var(--couleur-titre-hover);
  font-size: 1.1em;
}

#boutnav:hover {
  color : var(--couleur-titre-hover);
  cursor: pointer;
  font-size: 1.1em;
}
#selection {
  background-color: var(--couleur-principal);
  border: solid;
}
.liens {
  color : var(--couleur-texte);
}
/*Version portrait telephone et tablette*/
@media (hover :none) and (orientation: portrait) {

  main {
    text-align:center;
    border-radius : 50px;

    max-width: 50em;
    max-height: 125em;
  }

  h2 {
    text-align:center;
    padding : 0px;
    margin : 0px;
    font-size : 5em;
  }
  
  #formulaire {
    display :flex;
    flex-direction: column;
  }
  .entree > label {
      font-size: 3em;
  }
  .entree > input {
    font-size : 3em;
    max-width : 10em;
    border : solid;
  }
  button {
    margin-top: 1em;
    font-size : 3em;
    height : 3em;
    border-radius : 20px;
    border : solid;
  }
  .boutnav {
    margin : 0px;
  }
  footer {
    margin-top : 5em;
  }
}
/*Version paysage telephone et tablette (plus adapté aux tablettes)*/
@media (hover :none) and (orientation: landscape) {
  main {
    border-radius : 50px;

    max-width: 50em;
    max-height: 50em;
  }
  h2 {
    text-align:center;
    padding : 0px;
    margin : 0px;
    font-size : 3em;
  }
  .entree >label {
      font-size: 2em;
  }
  .entree >input {
    font-size : 2em;
    max-width : 10em;
    border : solid;
  }
  button {
   font-size : 2em;
   height : 2em;
   border-radius : 20px;
  }
  .boutnav {
    margin : 0px;
  }

  footer {
    margin-top : 1em;
  }
}