/* BASE */

body {
  font-family: "Raleway", sans-serif; /* arial, verdana, sans serif; */
  font-size: 1.2em;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* FLEXBOX */

/* En-tete */
header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* Contenu principale */
main {
  background-color: white;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Section du titre, barre de recherche et du filtre */
#top_section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 15px 0px 50px 0px;
}

/* Central Section*/
#main_section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 30px;
}

/* Resultats Recherche */
article {
  width: 63%;
  flex-wrap: wrap;
}

/* Encard des  populaires*/
aside {
  width: 30%;
}

article,
aside {
  display: flex;
  flex-direction: column;
  min-height: 700px;
}

/* Encard des activites */
#activ_section {
  display: flex;
  flex-direction: column;
}

/* Bas de page */

footer {
  background-color: #f2f2f2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Padding principal */

header,
main,
.footer_frame {
  width: 90%;
  max-width: 1735px;
}

/* SOUS-BLOCS */

/* Logo */

#logo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 105px;
}

.logo__img {
  width: 110px;
  height: 50px;
  object-fit: cover;
}

/* Menu navigation */

nav {
  flex-direction: column-reverse;
}

#menu {
  display: flex;
  justify-content: space-between;

  width: 300px;
}

li {
  padding-top: 20px;
  padding-right: 0px;
  margin-right: 0px;
}

nav li {
  border-top: 5px solid white;
  margin-top: 0px;
  padding-top: 60px;
  margin-right: 0px;
}

nav li:hover {
  border-top: 5px solid #0065fc;
}
nav li:hover > a {
  color: #0065fc;
}

/* Titre de la page */

.page_title {
  margin-bottom: 15px;
}

/* Champ de recherche de localisations */

#search {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 3px solid #eeeeee;
  padding: 0;
  border-radius: 25px;
  width: fit-content;
}

#search__img {
  background-color: #eeeeee;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 20px 0px 0px 17px;
  font-size: 1.2em;
}

#search__img:active {
  background-color: #f3f3f3;
}

#search__form--margin {
  margin: 20px 0px 10px 20px;
}

#search__text {
  border: none;
  outline: none;
  font-size: 1.1em;
  color: black;
  justify-content: center;
  align-items: center;
}

/* Boutton icon */

@media all and (min-width: 768px) {
  #search_button--img {
    display: none;
  }
}

::placeholder {
  /* texte d'exemple de la barre de recherche*/
  color: black;
  font-weight: bolder;
  text-align: left;
  display: inline-block;
}

.search__button {
  background-color: #0065fc;
  color: white;
  font-weight: bolder;
  border-radius: 0px 20px 20px 0px;
  display: inline-block;
  padding: 20px 20px;
  cursor: pointer;
}

.search__button:active {
  background-color: #3b89ff;
}

/* Filtre */
#filter {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-top: 15px;
  padding-bottom: 30px;
}

#filter_bloc {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#filter--title {
  padding-right: 30px;
}

.filter__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 2px solid #d3d3d3;
  margin: 10px;
  border-radius: 30px;
  height: fit-content;
  width: fit-content;
}

.filter__item:hover {
  color: #0065fc;
  background-color: #deebff;
  border-color: darkgrey;
  box-shadow: 0px 0px 10px rgb(216, 240, 255);
}

.filter__item:hover > .filter__item--img {
  background-color: #bed8ff;
}

.filter__item--img {
  background-color: #deebff;
  padding: 10px;
  border-radius: 30px 30px 30px 30px;

  font-size: 27px;
  color: #0065fc;
}

.filter__item--txt {
  padding: 8px;
  font-weight: bold;
}

/* Ligne informative */

.info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.info__img {
  border: 0.2em solid #d3d3d3;
  border-radius: 50%;
  padding-right: 6px;
  padding-left: 6px;
  padding-top: 1px;
  padding-bottom: 1px;

  font-size: 14px;
  color: #0065fc;
}

.info__text {
  padding-left: 8px;
}

/* Encard des resultats */

#results {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-content: stretch;
  flex-wrap: wrap;
  min-height: 560px;
}

.result_cardbloc {
  padding: 0px;
  width: 280px;

  box-sizing: border-box;
}

/* Flex child*/

.result_card {
  background-color: white;
  margin: 5px;
  padding: 7px;
  border-radius: 30px;
  box-shadow: 0px 0px 15px lightgrey;
  width: 90%;
  height: fit-content;
}

.result_card:hover {
  box-shadow: 0px 0px 15px rgb(216, 240, 255);
}

.result_card--img {
  border-radius: 23px 23px 0% 0%;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.result_card--text {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  color: black;
  padding-left: 5%;
  width: 90%;
  max-width: 251px;
  padding-bottom: 0px;
  padding-top: 10px;
  height: 65px;
  margin: 0%;
}

.results--aff-plus {
  padding-left: 10px;
}
/* Encard des plus populaires */

#popular__title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.populars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 630px;
}

.popular_bloc {
  padding: 0px;
  width: 90%;
  height: 30%;
  margin: 1%;
}

.popular_card {
  background-color: white;
  padding: 7px;
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  box-shadow: 0px 0px 15px lightgrey;
  width: auto;
  height: fit-content;
}

.popular_card:hover {
  box-shadow: 0px 0px 15px rgb(216, 240, 255);
}

.popular_card--img {
  border-radius: 23px 0px 0px 23px;
  width: 40%;
  height: 165px;
  margin-right: 5%;
  object-fit: cover;
}

.popular_card__text {
  color: black;
  margin-left: 0px;
  padding-left: 0px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 5px;
  padding-top: 10px;

  width: 45%;
}

.pad-txt-lft {
  padding-left: 20px;
}

/* Encard des activites */

#activ_section {
  display: flex;
  flex-direction: column;
  height: 600px;
}

/* css grid */
.activity-galery {
  display: grid;
  grid-template-columns: 22% 22% 22% 22%;
  grid-template-rows: 13% 14% 14% 14% 13%;
  grid-auto-rows: 1fr;
  gap: 8% 4%;
  grid-auto-flow: row;
  grid-template-areas:
    "p1 p2 p4 p5"
    "p1 p2 p4 p5"
    "p1 p2 p4 p6"
    "p1 p3 p4 p6"
    "p1 p3 p4 p6";
  width: 100%;
  height: 465px;
}

.p1 {
  grid-area: p1;
}

.p2 {
  grid-area: p2;
}

.p3 {
  grid-area: p3;
}

.p4 {
  grid-area: p4;
}

.p5 {
  grid-area: p5;
}

.p6 {
  grid-area: p6;
}

.activ_card {
  display: flex;
  flex-direction: column;
  background-color: white;
  margin: 0px;
  padding: 0px;
  border-radius: 40px 40px 30px 30px;
  box-shadow: 0px 0px 15px lightgrey;
  width: 100%;
  height: 100%;
}

.activ_card:hover {
  box-shadow: 0px 0px 15px rgb(216, 240, 255);
}

.activ_card--img {
  border-radius: 33px 33px 0% 0%;
  object-fit: cover;
  width: 100%;
  height: 95%;
}

.activ_card--img--full {
  height: 415px;
}

.activ_card--img--60p {
  height: 210px;
}

.activ_card--img--40p {
  height: 110px;
}
.activ_card__text {
  color: black;
  padding-top: 10px;
  padding-left: 8%;
  width: 90%;
  height: 5%;
}

.activ_card__text--style {
  width: 100%;
}

.activ_sing {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.activ_dual {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Pied de la page */

.footer_frame {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 45px;
  padding-bottom: 60px;
}

.footer__item {
  display: flex;
  flex-direction: column;
  width: 33.030303%;
  align-items: flex-start;
}

footer ul {
  margin: 0px;
  padding: 0px;
}

/* ELEMENTS */

/* Pseudo-elements*/

h1 {
  font-size: 1.5em;
}

h2,
#popular_img {
  font-size: 1.3em;
  margin-left: 10px;
}

article h3 {
  margin-bottom: 5px;
}

h4,
p {
  margin-top: 0px;
  margin-bottom: 0px;

  font-size: 0.9em;

  overflow: hidden;
  text-overflow: ellipsis;
}

a {
  text-decoration: none;
  color: black;
  width: 100%;
  height: 100%;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

/* Fond des encards*/

.background--aside,
.background--article {
  background-color: #f2f2f2;
  padding: 15px;
  margin: 0px;
  border-radius: 30px;
}

/* Etoiles */

.stars_bloc {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.star--blue {
  color: #0065fc;
  font-size: 15px;
}

.star--grey {
  color: #d3d3d3;
  font-size: 15px;
}