/* Variables de couleurs */
:root {
  --fond : #ECEFF1;
  --fond-horaires: #ddd;
  --fond-card: #e5e5e5;
  --fond-bleu : #1b7888;
  --fond-bleu-fonce : #146c7b;
  --fond-bleu-clair : #4b7686;
  --fond-bleu-noir : #29444e;
  --fond-bleu-tres-noir : #1a292e;

  --bleu-brillant : #78e8fc;

  --fond-blanc : #eff6f8;
  --fond-rouge : #e55d48;
  --fond-noir : #1e3333;
  --bord-noir : #333;
  --blanc : #fff;
  --noir : #000;

  --success: green;
  --error : red;

  --headerMenuHover: rgb(255,0,56);
}



#contact-div{
  display: block;
  width: 1200px;
  margin: auto;
}

#contact{
  text-align: center;
}

.horaires{
  margin-bottom: 1rem;
  background-color: var(--fond-horaires);
  padding: 1rem;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}




.pt-0{
  padding-top: 0;
}

input[type=text], input[type=email], input[type=number], select, textarea {
  font-size: 1.1rem;
  border-radius: 5px;
  padding: 0.5rem;
  margin: 0.5rem auto;
  border: 1px solid var(--fond-bleu);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

input[type=text], input[type=email], input[type=number], select{
  text-align: left;
  width: 24rem;
}

textarea{
  width: 90%;
  background-color: rgba(240,240,240,0.95);
}

input::placeholder, textarea::placeholder{
  font-size: 0.8rem;
}

/* input[type=text], input[type=email] {
  width: 8rem;
  text-align: left;
  margin-top: 0;
}
 */
input[type=radio] {
  margin-top: 0;
}

input[type=number] {
  width: 5rem;
}


.bouton {
  margin: 0 0.5rem 0 0.5rem;
  color: white;
  font-weight: 700;
  background-color: var(--fond-bleu-fonce);
  padding: 0.7rem;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--fond-bleu-fonce);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.bouton:hover {
  background-color: var(--fond-bleu-noir);
  border: 1px solid black;
}

.bouton:active {
  background-color: var(--fond-bleu-tres-noir);
  
}

.bouton:focus, input:focus, input[type=radio]:focus, input[type=checkbox]:focus, select:focus {
  border-color: var(--bleu-brillant);
}

#googlemap{
  width: 800px;
  height: 400px;
}

#contact-donnees {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#contact-donnees>div {
  margin-bottom: 1rem;
}

#contact-gauche, #contact-droite, #contact-message{
  width: 50%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  
}

#contact-gauche>div, #contact-droite>div, #contact-message>div{
 text-align: left;
}

#contact-message{
  width: 100%;
  /* margin-left: 8%; */
  /* margin-right: 3rem; */
}

#contact-btn{
  display: flex;
  justify-content: center;
  width: 100%;
}

.contact-link{
  color: rgb(227 26 26);
  padding: 0.5rem;
  line-height: 1.5rem;
  cursor: pointer;
}

.contact-link3{
  color: rgb(227 26 26);
  line-height: 1.5rem;
  cursor: pointer;
  padding-left: 1rem;
}

.contact-link:hover{
  font-weight: 700;
  border-radius: 5px;
  background-color: #eee;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

#confirmMailSent{
  animation: 1s ease-in-out;
  color: var(--success);
  font-weight: 600;
  background-color: #eee;
  padding: 0.5rem;
  margin: 0.5rem 10%;
  justify-self: center;
  align-self: center;
  width: 80%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-animation: 1s ease-in-out;
}

.asterisque {
  color: var(--error);
  font-style: italic;
  font-size: 0.7rem;
}

.asterisque-cool{
  color: var(--success);
  font-style: italic;
  font-size: 0.7rem;
}