:root {
  --bleu-1: #204583;
  --bleu-2: #277ECE;
  --bleu-3: #399ad0;
  --bleu-4: #235A86;
  --jaune-1: #ffc30f;
  --jaune-2: #FFAF0F;
  --jaune-3: #FFF42C;
  --bleu-clair-1: #e6f1f7;
  --blanc: #ffffff;
  --gris-clair: #fafafa;
  --fond-site: #EBECF0;
  --color-8: #ffffff;
  --color-9: #ffffff;
  --color-10: #ffffff;
  --font-1: "DM Sans", sans-serif;
}
BODY {
  /*background-color: var(--fond-site);*/
  background-color: var(--blanc);
  font-family: var(--font-1);
}
DIV.lp-bp {
  margin: 0 auto;
  max-width: 1440px;
  padding: 0px;
  background-color: var(--blanc);
}
.container {
}
.container-fluid {
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
/*HEADER*/
HEADER.container-fluid {
  background-color: var(--blanc);
}
.logo-banque {
  width: 240px;
  margin: 2em;
}
.logo.text-right {
  text-align: right;
}
/*INTRO*/
SECTION.intro {
  background: rgb(91, 221, 229);
  background: -moz-radial-gradient(circle, rgba(91, 221, 229, 1) 0%, rgba(43, 106, 166, 1) 75%);
  background: -webkit-radial-gradient(circle, rgba(91, 221, 229, 1) 0%, rgba(43, 106, 166, 1) 75%);
  background: radial-gradient(circle, rgba(91, 221, 229, 1) 0%, rgba(43, 106, 166, 1) 75%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5bdde5", endColorstr="#2b6aa6", GradientType=1);
}
.intro DIV.intro-text {
  padding: 0em 10em 0em 2em;
}
.intro-text H1 {
  color: var(--blanc);
  font-size: 3em;
  font-weight: 900;
  margin-bottom: 0.5em;
}
.intro .intro-text P {
  color: var(--blanc);
  font-size: 1.5em;
}
.intro .intro-text .d-grid {
  padding: 1em 0em;
}
.intro .intro-text BUTTON.btn.btn-primary {
  color: var(--blanc);
  background-color: var(--jaune-1);
  border: 0px solid black;
  font-size: 2.25em;
  font-weight: bold;
  /*+border-radius: 0.5em;*/
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  -khtml-border-radius: 0.5em;
  border-radius: 0.5em;
  padding: 0.25em;
}
.intro .intro-text BUTTON.btn.btn-primary:hover, .intro .intro-text BUTTON.btn.btn-primary:focus, .intro .intro-text BUTTON.btn.btn-primary:active {
  color: var(--blanc);
  background-color: var(--jaune-2);
  border: 0px solid black;
}
/*PARCOURS*/
SECTION.parcours {
  background: var(--blanc);
  padding-top: 4em;
  padding-bottom: 4em;
}
.parcours DIV.parcours-text {
  padding: 0em 5em 0em 2em;
}
.parcours .parcours-text H2 {
  color: var(--bleu-4);
  font-size: 3em;
  font-weight: 900;
  margin-bottom: 0.5em;
}
.parcours .parcours-text P {
  color: var(--bleu-4);
  font-size: 1.55em;
  font-weight: 300;
  margin-bottom: 1.5em;
}
.parcours .bloc {
  display: flex;
  align-items: center;
  font-size: 1.4em;
  font-weight: bold;
  padding: 1em;
  color:var(--blanc) ;
  /*+border-radius: 1em;*/
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  -khtml-border-radius: 1em;
  border-radius: 1em;
  line-height: 1.2;
  margin-bottom: 0;
  width: 80%;
}
.col-bulle-left {
  text-align: center;
  padding: 0em 1em 0em 0em;
  width: 20%;
}
.parcours H3 {
  font-weight: bold;
  font-size: 1.8em;
  margin-bottom: 0;
}
.parcours .bulle {
  width: 100px;
  text-align: center;
  margin: 0 auto;
}
.parcours .bulle.bleu-1 {
  fill: var(--bleu-1);
}
.parcours-text P.bloc {
  color: #FFFFFF !important;
  font-size: 1.4em;
  line-height: normal;
}
.parcours .parcours-1 H3 {
  color: var(--bleu-1);
}
.parcours-1, .parcours-2, .parcours-3 {
  padding: 0em;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  gap: 10px 10px;
  font-size: 0.8em;
  margin-bottom: 1.5em;
}
.parcours-1 .bloc {
  background-color: var(--bleu-1);
}
.parcours .bulle.bleu-2 {
  fill: var(--bleu-2);
}
.parcours .parcours-2 H3 {
  color: var(--bleu-2);
}
.parcours-2 .bloc {
  background-color: var(--bleu-2);
}
.parcours .bulle.bleu-3 {
  fill: var(--bleu-3);
}
.parcours .parcours-3 H3 {
  color: var(--bleu-3);
}
.parcours-3 .bloc {
  background-color: var(--bleu-3);
}
/*CONSEILS*/
SECTION.conseils {
  background-color: var(--bleu-2);
  padding-top: 4em;
  padding-bottom: 2em;
}
.conseils H2 {
  color: var(--blanc);
  font-size: 4em;
  font-weight: 900;
  margin-bottom: 0.5em;
}
.conseils .conseils-text {
  padding: 0 4.3em 0 0;
}
.conseils .conseils-text H3 {
  font-weight: bold;
  font-size: 1.6em;
  color: var(--jaune-3);
  position: relative;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
.conseils .conseils-text H3:after {
  position: absolute;
  border: 0px solid black;
  content: ' ';
  width: 140px;
  border-top: 7px dotted var(--jaune-3);
  bottom: 0;
  left: 0;
}
.conseils .conseils-text UL {
  color: var(--blanc);
  font-size: 1.125em;
  font-weight: bold;
}
/*CONSEILS 2*/
SECTION.conseils-2 {
  background-color: var(--bleu-4);
  padding-top: 2em;
  padding-bottom: 2em;
}
.conseils-2 H2 {
  color: var(--blanc);
  font-size: 4em;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.conseils-2 .conseils-text {
  padding-top: 4em;
  padding-bottom: 1em;
}
.conseils-2 .conseils-text H3 {
  font-weight: bold;
  font-size: 1.6em;
  color: var(--jaune-3);
  position: relative;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
.conseils-2 .conseils-text H3:after {
  position: absolute;
  border: 0px solid black;
  content: ' ';
  width: 140px;
  border-top: 7px dotted var(--jaune-3);
  bottom: 0;
  left: 0;
}
.conseils-2 .conseils-text UL {
  color: var(--blanc);
  font-size: 1.125em;
  font-weight: bold;
}
/*JOUER*/
SECTION.jouer {
  background: var(--bleu-clair-1) left bottom no-repeat;
  padding-top: 4em;
  padding-bottom: 4em;
}
.jouer H2 {
  color: var(--bleu-4);
  font-size: 4em;
  font-weight: 900;
  margin-bottom: 0.5em;
}
.jouer .lead {
  color: var(--bleu-4);
  font-size: 1.5em;
  /*font-weight: bold;*/
  /*margin-bottom: 0.5em;*/
}
.jouer .jouer-text {
  padding: 0em 1em;
}
.jouer .jouer-text .d-grid {
  padding: 2em 6em 1em;
}
.jouer .jouer-text BUTTON.btn.btn-secondary {
  color: var(--blanc);
  background-color: var(--bleu-4);
  border: 0px solid black;
  font-size: 2.25em;
  font-weight: bold;
  /*+border-radius: 0.5em;*/
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  -khtml-border-radius: 0.5em;
  border-radius: 0.5em;
  padding: 0.25em;
}
.jouer .jouer-text BUTTON.btn.btn-secondary:hover, .intro .intro-text BUTTON.btn.btn-secondary:focus, .intro .intro-text BUTTON.btn.btn-secondary:active {
  color: var(--blanc);
  background-color: var(--jaune-2);
  border: 0px solid black;
}
/*ACCOMPAGNE*/
SECTION.accompagne {
  background-color: var(--gris-clair);
  padding-top: 4em;
  padding-bottom: 4em;
}
.accompagne DIV.accompagne-text {
  padding: 0em 2em 0em 2em;
}
.accompagne-text H2 {
  color: var(--bleu-1);
  font-size: 3.5em;
  font-weight: 400;
  margin-bottom: 0.5em;
}
.accompagne .accompagne-text P {
  color: var(--bleu-1);
  font-size: 1.5em;
}
/*FOOTER*/
FOOTER.outro {
  background-color: var(--bleu-2);
  padding-top: 4em;
  padding-bottom: 4em;
}
.outro A.nav-link {
  color: var(--blanc);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.25em;
}
.outro A.nav-link:hover, .outro A.nav-link:active, .outro A.nav-link:focus {
  color: var(--jaune-3);
}
@media (max-width: 1400px) {
  .intro .intro-text P {
    font-size: 1.5em;
  }
  .intro DIV.intro-text {
    padding: 2em;
  }
  .parcours .parcours-text P {
    font-size: 1.25em;
  }
  .parcours .bloc {
    font-size: 1.2em;
    padding: 1em 1em;
    line-height: normal;
  }
  .conseils H2 {
    font-size: 3.5em;
  }
}
@media (max-width: 1200px) {
  .intro DIV.intro-text {
    padding: 2em;
  }
  .intro-text H1 {
    text-align: center;
  }
  .parcours .bloc {
    font-size: 1em;
    line-height: normal;
  }
  .parcours .parcours-text H2 {
    text-align: center;
  }
  .accompagne DIV.accompagne-text {
    padding: 0em 1em 0em 1em;
  }
  .parcours-1, .parcours-2, .parcours-3 {
    padding: 0em;
  }
  .conseils H2 {
    text-align: left;
  }
}
@media (max-width: 992px) {
  .intro DIV.intro-text {
    padding: 2em;
  }
  .parcours-1, .parcours-2, .parcours-3 {
    padding: 0em;
  }
  .parcours DIV.parcours-text {
    padding: 2em;
  }
  .conseils .conseils-text H3 {
    padding-bottom: 1em;
    margin-bottom: 1em;
    padding-top: 1em;
  }
  .conseils-2 .conseils-text {
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .jouer .jouer-text {
    padding: 2em;
  }
  .accompagne DIV.accompagne-text {
    padding: 2em;
  }
  .outro A.nav-link {
    font-size: 0.8em;
  }
}
@media (max-width: 768px) {
  .parcours .bloc {
    height: auto;
    display: flex;
    align-items: center;
    font-size: 1.4em;
    font-weight: bold;
    padding: 1em 2em;
    color: var(--blanc);
    /*+border-radius: 1em;*/
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    -khtml-border-radius: 1em;
    border-radius: 1em;
    line-height: 1.2;
  }
}
@media (max-width: 576px) {
  .logo-banque {
    width: 240px;
  }
  .intro-text H1 {
    font-size: 2em;
  }
  .intro .intro-text P {
    font-size: 1.2em;
  }
  .intro .intro-text .d-grid {
    padding: 1em 0em;
  }
  .intro .intro-text BUTTON.btn.btn-primary {
    font-size: 2em;
  }
  .parcours .parcours-text H2 {
    font-size: 2em;
  }
  .parcours .parcours-text P {
    font-size: 1.2em;
  }
  .intro DIV.intro-text {
    padding: 2em 0em;
  }
  .parcours DIV.parcours-text {
    padding: 2em 0em;
  }
  .parcours H3 {
    font-size: 2em;
  }
  .parcours .bloc {
    height: auto;
    font-size: 1em;
    line-height: normal;
    padding: 2em;
  }
  .parcours .bulle {
    width: 100px;
  }
  .conseils H2 {
    font-size: 2em;
  }
  .jouer H2 {
    font-size: 2em;
  }
  .jouer .lead {
    font-size: 1.2em;
  }
  .jouer .jouer-text {
    padding: 2em 0em;
  }
  .jouer .jouer-text .d-grid {
    padding: 1em;
  }
  .accompagne DIV.accompagne-text {
    padding: 2em 0em;
  }
  .accompagne-text H2 {
    font-size: 2em;
  }
  .accompagne .accompagne-text P {
    font-size: 1.2em;
  }
  .outro A.nav-link {
    font-size: 1em;
  }
}