@font-face {
  font-family: "font-1";
  src: url(./assets/fonts/BodoniModa_9pt-Regular.ttf);
}

@font-face {
  font-family: "font-2";
  src: url(./assets/fonts/NunitoSans-Bold.ttf);
}


.jauneDune{color:#fff8e6}
.bleulumiere{color:#006869}
.terreOr{color:#b55929}
.bleutogether{color: #e4f1fb}
.gristogether{color: #454545}

.space{
  width: 4px;
  height: auto;
  display: inline-block;
}

* {
  list-style-type: none;
}
body {
  background: #e4f1fb;
  color: #454545 ;
  text-align: center;
  font-family: "font-1", cursive;
}
h1 {
  font-size: 30pt;
  letter-spacing: 3px;
  margin: 0;
}

h3 {
  font-size: 24pt;
  letter-spacing: 3px;
  margin: 10;
}

h4 {
  font-size: 10pt;
  letter-spacing: 3px;
  margin: 10;
}

input {
  background:#fff8e6;
  color: #454545 ;
  border-radius: 25px;
  outline: none;
  border: 3px solid;
  border-color:#006869;
  border-width: 3px ;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: "font-2", cursive;
  margin: 3px 0px;
  width: 300px;
  padding: 10px 0px;
}
input::placeholder {
  text-align: center;
  font-size: 1.2rem;
}

button[type="submit"] {
  background:#fff8e6;
  color: #454545 ;
  border-radius: 25px;
  outline: none;
  border: 3px solid;
  border-color:#006869;
  border-width: 3px ;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: "font-2", cursive;
  margin: 3px 0px;
  width: 300px;
  padding: 10px 0px;
}

button[type="submit"]:hover {
  background:#fff8e6;
  color: whitesmoke ;
  border-radius: 25px;
  outline: none;
  border: 3px solid;
  border-color:#006869;
  border-width: 3px ;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: "font-2", cursive;
  margin: 3px 0px;
  width: 300px;
  padding: 10px 0px;

}

input[type="submit2"] {
  border-radius: 25px;
  border: 3px solid;
  background: #fff8e6;
  transition: 0.3s ease;
  cursor: pointer;
  border-color: #b55929;
  border-width: 3px;
}


input[type="submit2"]:hover {
  background: #fff8e6;
  color: white;
  letter-spacing: 1px;
  border-color: #b55929;
}

button[type="Retour"] {
  background:#fff8e6;
  color: #454545 ;
  border-radius: 25px;
  outline: none;
  border: 3px solid;
  border-color:#b55929;
  border-width: 3px ;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: "font-2", cursive;
  margin: 3px 0px;
  width: 300px;
  padding: 10px 0px;
}

button[type="Retour"]:hover {
  background:#fff8e6;
  color: whitesmoke ;
  border-radius: 25px;
  outline: none;
  border: 3px solid;
  border-color:#b55929;
  border-width: 3px ;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: "font-2", cursive;
  margin: 3px 0px;
  width: 300px;
  padding: 10px 0px;
}

button[type="start_stop_chrono"] {
  background:#fff8e6;
  color: #454545 ;
  border-radius: 25px;
  outline: none;
  border: 3px solid;
  border-color:#006869;
  border-width: 3px ;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: "font-2", cursive;
  margin: 3px 0px;
  width: 100px;
  padding: 10px 0px;
}

button[type="start_stop_chrono"]:hover {
  background:#fff8e6;
  color: whitesmoke ;
  border-radius: 25px;
  outline: none;
  border: 3px solid;
  border-color:#006869;
  border-width: 3px ;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: "font-2", cursive;
  margin: 3px 0px;
  width: 100px;
  padding: 10px 0px;

}

button[type="reset"] {
  background:#fff8e6;
  color: #454545 ;
  border-radius: 25px;
  outline: none;
  border: 3px solid;
  border-color:#b55929;
  border-width: 3px ;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: "font-2", cursive;
  margin: 3px 0px;
  width: 300px;
  padding: 10px 0px;
}

button[type="reset"]:hover {
  background:#fff8e6;
  color: whitesmoke ;
  border-radius: 25px;
  outline: none;
  border: 3px solid;
  border-color:#b55929;
  border-width: 3px ;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: "font-2", cursive;
  margin: 3px 0px;
  width: 300px;
  padding: 10px 0px;

}

chrono {
  text-align: center;
  font-size: 100px;
  margin-bottom: 30px;
}

table, caption, th, td {
  border: 2px solid #b55929;
  border-collapse: collapse;
  margin: auto;
  }

  caption, th, td {
  padding: 8px;
  }
  
  th {
  background-color: #006869;
  color: #fff8e6
  }
  
  td {
  background-color: #fff8e6;
  }

img {
  object-fit: cover;
  width: 40%;
  max-width: 250px;
}
.result-container {
  margin: 0 auto;
}
ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: auto;
  max-width: 1400px;
}
li {
  max-width: 400px;
  border: 2px solid rgb(206, 206, 206);
  border-radius: 10px;
  padding: 20px;
  margin: 10px;
}
h2 {
  margin: 10px 0 25px;
}
.card-content {
  display: grid;
  grid-template-columns: 40% 60%;
}
.card-content img {
  width: 90%;
  border-radius: 5px;
  box-shadow: -3px 3px 10px 3px #242323;
}
.card-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
	        height:500px;
            max-width : 100%;
	    }