/** Styles css globales **/

body {
  font-family: 'Raleway', 'Robboto', sans-serif;
  font-size: 1rem;
  width: 100%;
  margin: 0 auto;
}

.containeur-generale {
  margin: 0px 10px 0px 10px;
}

/** Styles Menu de navigation **/

header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

header img {
  width: 5em;
}

nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
}

nav ul li {
  text-decoration: none;
  list-style-type: none;
  margin: 0px 30px;
}

nav ul li::before {
  content: '';
  display: inline-block;
  position: relative;
  top: -17px;
  height: 2px;
  width: 100%;
  background-color: transparent;
}

nav ul li:hover::before {
  background-color: #0065fc;
}

nav ul li a {
  color: #0065fc;
  font-size: 0.8em;
  text-decoration: none;
}

.noir a {
  color: black;
}

/** Styles Formulaire **/

h1 {
  font-size: 1em;
}

.navigation p {
  font-size: 0.8em;
}

.form1 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

form input:focus {
  border: 1px solid #f2f2f2;
}

div .recherche {
  display: inline-block;
}
.bouton1 {
  background-color: #0065fc;
  display: inline-block;
  border-radius: 0px 10px 10px 0px;
  padding: 10px 15px;
  font-size: 15px;
  border: 2px solid #0065fc;
  color: #fff;
  border-collapse: collapse;
}

form label {
  background-color: #f2f2f2;
  padding: 10px 15px;
  color: #000;
  border-radius: 10px 0px 0px 10px;
}

label .fa-map-marker-alt {
  color: #000;
  font-size: 15px;
}

.fa-search {
  position: absolute;
  left: -99999px;
}

/** Styles Filtres **/

.containeur-filtre {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.containeur-filtre h2 {
  margin: 42px 5px 20px 5px;
  font-size: 0.9em;
}

.bouton {
  display: block;
  border-radius: 30px;
  font-size: 15px;
  background-color: #fff;
  border: 1px solid #f2f2f2;
  height: 50px;
  margin: 30px 5px 20px 5px;
  padding: 0;
  padding-right: 15px;
}

.logofiltre {
  padding: 18px;
  border-radius: 50%;
  background-color: #deebff;
  width: 12px;
}

.info {
  display: flex;
}

.info p {
  margin: 1.8em 0.8em;
  font-size: 0.7em;
}

.bouton:hover {
  transition-duration: 1s;
  background-color: #f2f2f2;
}

.bout1 {
  display: flex;
}

/** Styles Hébergements à Marseilles **/

.hebergements-marseille {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.articles-gauche {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  width: 95%;
  margin: 0 auto;
}

.articles-gauche img {
  width: 100%;
  height: 130px;
  border-radius: 1.25em 1.25em 0em 0em;
  object-fit: cover;
}

.sec-droite img {
  width: 35%;
  height: 170px;
  object-fit: cover;
  border-radius: 0.625em 0em 0em 0.625em;
}

.populaires {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.titre-populaires {
  display: flex;
  justify-content: space-around;
  font-weight: bold;
}

.hebergement {
  margin-bottom: 2em;
}

.hebergement figure {
  margin: 0;
}

.sec-gauche {
  margin-right: 1em;
}

.sec-droite {
  margin-right: 2px;
}

.sec-gauche,
.sec-droite {
  background-color: #f2f2f2;
  border-radius: 10px;
}

.sec-gauche figcaption {
  margin-left: 0.5em;
}

.sec-gauche figcaption p {
  line-height: 0.7em;
  margin-top: 5px;
  color: #000;
  font-size: 0.7em;
}

.sec-droite figcaption p {
  line-height: 1em;
  font-size: 0.7em;
}

.sec-gauche article a,
.sec-droite article a {
  text-decoration: none;
}

.sec-gauche figure {
  border-radius: 1.25em 1.25em;
  background-color: #fff;
  box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
}

.sec-droite figure {
  border-radius: 1.25em 1.25em;
  background-color: #fff;
}

.fas {
  color: #0065fc;
  font-size: 12px;
}

.etoiles-la-cannebiere :nth-child(5),
.etoiles-les-mouettes :nth-child(5),
.le-panier :nth-child(5) {
  color: #f2f2f2;
}

.etoiles-de-la-mer :nth-child(4),
.etoiles-de-la-mer :nth-child(5) {
  color: #f2f2f2;
}

.chambres-hote :nth-child(5),
.bleu-blanc :nth-child(5) {
  color: #f2f2f2;
}

.fa-chart-line {
  color: #000;
  font-size: 20px;
}

.hebergements-marseille figcaption p:nth-child(1) {
  font-weight: bold;
  color: #000;
}

.sec-droite figcaption p:nth-child(2) {
  color: #000;
}

.sec-droite figcaption {
  margin-right: 2em;
}

.sec-droite figcaption p {
  line-height: 1.6em;
  font-size: 0.7em;
}

.afficher {
  text-decoration: none;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  margin-left: 30px;
}

@media screen and (min-width: 320px) and (max-width: 678px) {
  .hebergements-marseille {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }

  .articles-gauche {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
}

/** Styles Activités Marseilles **/

.activites-marseille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin: 0 auto;
}

.activites-gauche {
  display: grid;
  grid-template-columns: 50% 50%;
  width: 100%;
}

.activites-gauche article {
  margin: 0;
}

.activites-gauche figure {
  margin: 0;
}

.activites-droites figure {
  margin: 0;
}

.activites-gauche article {
  margin-right: 1.5em;
}

.activites-droites .calanques {
  margin-right: 1.3em;
}

.activites-droites article {
  margin-left: 1.5em;
}

.activites-droites article {
  margin: 0;
}

.activites-droites {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.vieux-port img,
.calanques img {
  width: 100%;
  height: 18em;
  border-radius: 10px 10px 0px 0px;
  object-fit: cover;
}

.haut img,
.bas img {
  width: 100%;
  height: 7.3em;
  border-radius: 10px 10px 0px 0px;
  object-fit: cover;
}

.activites .haut {
  margin-bottom: 1.5em;
}
.card1 figcaption p,
.card2 figcaption p {
  font-size: 0.7em;
  margin: 0.5em;
  color: #000;
  font-weight: bold;
}

.card1 {
  border: 1px solid #fff;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
}

.card2 {
  border: 1px solid #fff;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
}

.activites a {
  text-decoration: none;
}

/** Styles Footer **/

.sec-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.sec-footer div {
  width: 33.33%;
}

footer {
  background-color: #f2f2f2;
  margin: 0;
  margin-top: 50px;
}

footer h4 {
  margin-left: 2.7em;
  font-size: 0.8em;
}

footer li {
  line-height: 30px;
  list-style-type: none;
  font-size: 0.8em;
}

footer li a {
  text-decoration: none;
  color: black;
}

/**  section @media Queries  **/

/**  section Menu de navigation @media Queries - Smarphones, tablettes desktop **/

@media screen and (min-width: 320px) and (max-width: 560px) {
  .containeur-generale,
  footer {
    width: 95%;
    margin-right: 0;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  nav ul {
    margin: 0;
    padding: 0;
  }

  nav ul li {
    margin: 10px 20px;
  }

  nav ul li:nth-child(3) {
    position: relative;
    left: 205px;
    bottom: 125px;
    font-weight: bold;
  }

  .barre-heberg a{
    border-bottom: 2px solid #0065FC;
    height: 2px;
    padding: 10px;
  }

  .hebergements-marseille {
    width: 100%;
  }

  .activites-marseille {
    width: 100%;
  }

  .sec-gauche {
    width: 100%;
  }

  div .activites-gauche,
  div .activites-droites {
    margin: 0;
    width: 100%;
  }

  div .sec-droite {
    margin: 0 auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/**  section Filtres @media Queries - Smarphones, tablettes desktop **/

@media screen and (min-width: 320px) and (max-width: 678px) {
  .containeur-filtre {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  form {
    margin-bottom: 2em;
  }

  .bouton1 {
    display: none;
  }

  .texte-header {
    margin-bottom: 2.5em;
  }

  .fa-search {
    position: absolute;
    left: 240px;
    margin-top: 0;
    font-size: 1em;
    width: 1em;
    background-color: #0065fc;
    color: #fff;
    height: 0.73em;
    padding: 0.75em;
    border-radius: 10px;
  }

  .bouton {
    display: block;
    border-radius: 30px;
    font-size: 10px;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    height: 50px;
    padding: 0;
    padding-right: 15px;
  }

  .logofiltre {
    width: 10px;
  }

  .filtre_roman,
  .filtre_animaux {
    display: flex;
    width: 155px;
    align-items: center;
    font-size: 0.5em;
    font-weight: bold;
  }

  .containeur-filtre h2 {
    margin: 0;
    margin-bottom: 1em;
  }

  .containeur-filtre button {
    margin: 0;
    margin-bottom: 1em;
  }

  .bout1 .filtre_eco {
    margin-right: 0.7em;
  }

  .navigation h1 {
    font-size: 1em;
  }

  .navigation {
    margin-right: 9px;
  }

  nav ul li a {
    font-size: 18px;
  }

  header img {
    width: 100px;
  }

  .recherche input {
    width: 200px;
  }
}

/**  section Hébergement à Marseille @media Queries - Smarphones, tablettes desktop **/

@media screen and (min-width: 320px) and (max-width: 678px) {
  .hebergements-marseille {
    margin: 0 auto;
    width: 100%;
    margin-bottom: 2em;
  }

  .sec-droite {
    margin-bottom: 2em;
  }

  .articles-gauche {
    width: 100%;
  }

  .articles-gauche img {
    width: 100%;
    height: auto;
  }

  .sec-gauche {
    background-color: #fff;
  }

  .sec-gauche .titre {
    margin-left: 2em;
    font-size: 0.9em;
  }

  .populaires {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0 auto;
  }

  .heberg {
    margin-bottom: 2em;
    margin-left: 20px;
    margin-right: 15px;
  }

  .sec-gauche img {
    height: 150px;
  }

  .sec-droite img {
    width: 25%;
  }

  section .navigation {
    margin: 0;
  }

  .titre {
    margin: 40px 0px 30px 0px;
    font-weight: bold;
    position: relative;
    right: 30px;
  }

  .heberg img {
    width: 42%;
  }

  .heberg figcaption {
    margin-right: 0;
    position: relative;
    right: 20px;
  }

  .heberg figcaption p {
    font-size: 0.6em;
  }
}

@media screen and (min-width: 679px) and (max-width: 1024px) {
  .containeur-generale {
    width: 97.5%;
    margin-right: 0;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  footer {
    width: 100%;
    margin-right: 0;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .hebergements-marseille {
    display: flex;
    flex-direction: column-reverse;
  }

  .articles-droite {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 100%;
    justify-content: space-between;
  }

  .sec-droite {
    margin-bottom: 1em;
  }

  .articles-droite figure {
    margin: 0;
  }
  .sec-droite {
    order: 1;
  }

  .sec-gauche {
    order: 0;
  }

  .heberg {
    margin-right: 0;
    margin-bottom: 1em;
    margin-left: 1em;
  }

  .sec-droite img {
    width: 5em;
  }

  .sec-gauche {
    width: 100%;
  }

  .titre-populaires {
    justify-content: space-between;
  }

  .populaires figcaption {
    margin-left: 1.5em;
  }
}

/**  section Activités à Marseille @media Queries - Smarphones, tablettes desktop **/

@media screen and (min-width: 320px) and (max-width: 678px) {
  .activites-marseille {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
  }

  .activites-gauche {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 95%;
    margin: 0 auto;
  }

  .activites-gauche .vieux-port {
    margin-right: 0;
  }

  .activites-gauche figure img {
    height: 200px;
  }

  .activites-droites figure img {
    height: 200px;
  }

  .activites-droites .calanques {
    margin-right: 0;
  }

  .activites-droites .haut {
    margin-right: 0;
  }

  .activites-gauche .haut,
  .activites-gauche .bas {
    margin-right: 0;
  }

  .activites-droites {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 2em;
    width: 95%;
    margin: 0 auto;
  }

  .pomegues {
    margin-bottom: 1.5em;
  }

  .activites-gauche .vieux-port {
    margin-bottom: 2em;
  }

  .activites-droites .calanques {
    margin-bottom: 2em;
  }

  .notre-dame article {
    border: 1px solid #fff;
    background-color: #fff;
    box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
  }

  .titre-activites {
    margin-left: 2em;
    position: relative;
    right: 40px;
    font-size: 20px;
  }
}

@media screen and (min-width: 679px) and (max-width: 1024px) {
  .activites-marseille {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
  }

  .activites-gauche article {
    margin-bottom: 2em;
  }

  .activites-droites {
    margin-right: 0px;
  }

  .pomegues article {
    margin-right: 0;
  }
}

/** Styles Footer - @media Queries - Smarphones, Tablettes et desktop  **/

@media screen and (min-width: 320px) and (max-width: 678px) {
  footer {
    margin-top: 1.25em;
    width: 100%;
    margin: 0;
    margin-top: 1.5em;
  }

  footer h4 {
    margin-left: 0;
    font-size: 0.8em;
  }

  footer ul {
    position: relative;
    right: 40px;
  }

  .sec-footer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .sec-footer div {
    width: 100%;
    margin-left: 40px;
  }
}

@media screen and (min-width: 679px) and (max-width: 1024px) {
  .sec-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sec-footer h4 {
    display: block;
    width: 100%;
  }

  .heberg {
    margin-right: 6px;
  }

  footer ul li {
    font-size: 0.6em;
  }
}