.espace-justice {
  color: var(--app-color-gray)!important;
}
p {
  font-weight: normal;
}
/*.bg-entete-img {
  top: -80%;
} */
.bg-entete h1 {
  font-size: 3rem!important;
}    
.container {
  padding: 15px 15px;
}
.title-container {
  margin-top: -1rem;
  margin-bottom: 2rem;
}
.orange-box {
  background: var(--app-color-orange);
  color: white;
  text-align: center;
  cursor: pointer
}
.orange-box a {
  display: inline-block;
  width: 100%;
  padding: 10px 10px;
}
.bg-gray {
  background: var(--app-color-lightgray); 
}
.img-card-container {
  max-height: 233px;
  overflow: hidden;
}
.img-card-container img, .bandeau-img {
  margin-top: -215px;
}
.gray-box {
  background-color: var(--app-color-gray);
  color: white;
  text-align: center;
  cursor: pointer
}
.gray-box a {
  display: inline-block;
  width: 100%;
  padding: 10px 10px;
}
.card-container {
  width: 25rem;
}
.card {
  padding-top: .2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background: rgba(239, 236, 234, .1);
  margin-bottom: 10px;
}
.card-body {
  height: 275px;
}
.card-text {
  height: auto;
  min-height: 110px;
}
.max-scale {
  margin: 0 auto; 
  max-width: var(--main-max-width);
}
.container-justice {
  display: flex;
  height: 280px;
  max-height: 340px;
  overflow: hidden;
  /*margin-top: 3em;*/
  margin-bottom: 3em;
}
.container-justice .container-justice-img {
  overflow: hidden;
}
.ask-h5 {
  text-align: left;
}
@media only screen and (min-width: 1990px) {
  .card-container {
    width: 23rem;
  }
  .bandeau-img {
    margin-top: -300px
  }
}
@media only screen and (min-width: 2630px) {
  .card-container {
    width: 20rem;
  }
}
@media only screen and (min-width: 1750px) and (max-width: 2299px) {
  .bandeau-img {
    margin-top: -285px;
  }
}
@media only screen and (max-width: 1350px) {
  .container-justice {
    height: 225px;
  }
}

@media only screen and (min-width: 451px) and (max-width: 750px) {
  .bg-entete-img {
    top: 0px;
  }   
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .bg-entete h1 {
    font-size: 2.5rem!important;
  }
  .card-container:nth-child(2) {
    margin-top: 1rem;
  }
  .card-container .card {
    height: 260px;
  }
  .img-card-container {
    height: 100%;
    max-height: 400px;
    overflow: hidden;
  }
  .img-card-container img {
    margin-top: -150px;
  }
  .bg-titre-justice {
    height: 140px;
  }
  .bg-titre-justice h1 {
    padding-top: 55px;
  }
  .bg-justice-img {
    top: -120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 990px) {
  .container-justice {
    height: 175px;
  }
  .bandeau-img {
    margin-top: -115px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 790px) {
  .card-container {
    width: auto;
  }
}
@media only screen and (max-width: 767px) {
  .bg-entete h1 {
    font-size: 2rem!important;
  }
  .container {
    padding: 1em 15px;
  }
  .card-container {
    margin-bottom: 1.5rem;
    height: 100%;
  }
  .card-container .card {
    padding-top: 1rem;
  }
  .card-container .card-body {
    height: 100%;
    /*min-height: 350px;*/
  }
  .title-container {
    text-align: center;
  }
  .title-container h2 {
    font-size: 1.5em;
  }       
  .orange-box h5 {
    text-align: center;
  }
  .orange-box {
    max-width: 100vw!important;
  }
  .orange-box button {
    max-width: 250px;
    margin: 0 auto;
  }
  .ask-h5 {
    text-align: center;
  }
}
@media only screen and (max-width: 450px) {
  .bg-entete-img {
    top: 0px;
  }
}
@media only screen and (orientation: landscape) and (max-width: 767px) {
  .card {
    flex-direction: row!important;
    justify-content: space-around;
    overflow: hidden;
  }
  .card-body {
    width: 60%
  }
  .landscape {
    width: 60%;
    display: flex;
    align-items: center;
  }
}   
@media only screen and (width: 640px) and (height: 360px) {
  .bg-entete-img {
    top: -110px;
  }
}