body {
  /* font-size: 17px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("../photos/hero/camps_hero_l.JPG");
  background-size: cover;
  overflow: hidden;
  /* background: linear-gradient(to bottom right, #114357 60%, #f29492); */
  /* line-height: 1.4; */
}
.container {
  width: 70%;
  margin-top: 10em;
}

.collapse-content {
  width: 90%;
  margin: auto;
  box-shadow: 10px 15px 15px 15px rgba(0, 0, 0, 0.445);
  z-index: 0;
}

.collapse {
  background: #fff;
  z-index: -1;
}

.collapse a {
  display: block;
  font-size: 1.3em;
  font-weight: 500;
  padding: 0.3rem 1rem;
  background: var(--clr-menu-dark);
  color: var(--clr-bienvenue);
  position: relative;
  text-decoration: none;
  list-style: none;
  font-family: sans-serif;
}
/* petit triangle */
/* .collapse a:before {
  content: "";
  border-top: 7px solid rgb(255, 253, 253);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  top: 30px;
  right: 30px;
} */

.inner-content {
  padding-left: 1rem;
  color: black;
}

.content {
  max-height: 0em;
  transition: 1s;
  overflow: hidden;
}

.collapse + .collapse a {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

h3 {
  margin-bottom: 15px;
}

.collapse:target .content {
  max-height: 75em;
}

.collapse:target a:before {
  transform: rotate(-90deg);
}

@media (max-width: 768px) {
  .collapse-content {
    width: 100%;
    font-size: 1em;
    font-weight: 400;
  }
  .container {
    width: 100%;
  }
  body {
    background-image: url("../photos/hero/camps_hero_m.JPG");
    background-size: cover;
    overflow: scroll;
  }
}
@media (max-width: 425px) {
  body {
    line-height: 1.3;
  }
  .container {
    width: 100%;
  }
  .collapse-content {
    width: 100%;
  }
  .collapse a {
    font-size: 1em;
    font-weight: 400;
  }
  .inner-content {
    padding: 1.2rem;
  }
  .inner-content h3 {
    margin-bottom: 0.3rem;
  }
  body {
    background-image: url("../photos/hero/camps_hero_s.JPG");
    background-size: cover;
    overflow: scroll;
  }
}
@media (max-width: 320px) {
  .container {
    width: 100%;
  }
  .collapse-content {
    width: 70vw;
  }
  .collapse a {
    font-size: 0.8em;
    font-weight: 400;
  }
  .inner-content {
    padding: 0.8rem;
  }
  .inner-content h3 {
    margin-bottom: 0.3rem;
  }
  body {
    background-image: url("../photos/hero/camps_hero_s.JPG");
    background-size: cover;
    line-height: 1.3;
    overflow: scroll;
  }
}