/*
** Réalisation : LaFabrikk
** https://www.lafabrikk.fr
*/

.problematique-top {
  position: relative;
}
.problematique-top-inner {
  position: relative;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  height: 18rem;
  padding: var(--KPM057) var(--KPM051) var(--KPM015) var(--KPM051);
  border-radius: var(--KPM012);
}
body.page .problematique-top h1 {
  width: 70%;
  margin-bottom: var(--KPM010);
  color: #fff;
  text-align: left;
}
.problematique-top p {
  width: 50%;
  font-size: var(--KPM022);
  line-height: var(--KPM025);
  color: #fff;
}
.problematique-top-inner svg {
  position: absolute;
  top: var(--KPM040);
  right: 0;
}
.problematique-top > svg {
  position: absolute;
  top: 13.875rem;
  left: 10rem;
}
.problematique-top img {
  position: absolute;
  top: 15.625rem;
  right: -7.125rem;
  width: 12.625rem;
  height: 12.125rem;
  border-radius: var(--KPM012);
  object-fit: cover;
  object-position: center center;
}

.problematique-citation {
  position: relative;
  padding: var(--KPM070) 7.375rem var(--KPM060);
}
.problematique-citation:before {
  content: '';
  position: absolute;
  top: var(--KPM031);
  left: calc(50% - var(--KPM012));
  width: var(--KPM024);
  height: var(--KPM018);
  background-image: url(../img/kpm-g-quote.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.problematique-citation > img {
  position: absolute;
  top: var(--KPM080);
  left: -7.125rem;
  width: 12.625rem;
  height: 12.125rem;
  border-radius: var(--KPM012);
  object-fit: cover;
  object-position: center center;
}
.problematique-citation > svg {
  position: absolute;
  top: 15.6875rem;
  left: -0.8125rem;
}
.problematique-citation .citation {
  font-size: var(--KPM040);
  line-height: var(--KPM046);
  color: var(--KPMcolgreen);
  text-align: center;
}
.problematique-citation .citation-author {
  margin-top: var(--KPM025);
  font-size: var(--KPM018);
  line-height: var(--KPM024);
  text-align: center;
  color: var(--KPMcoldarkblue);
}
.problematique-citation .citation-author span {
  display: inline-block;
  padding: var(--KPM002) var(--KPM003);
  background-color: var(--KPMcollightblue);
  font-size: var(--KPM014);
  line-height: var(--KPM017);
  text-transform: uppercase;
  color: #fff;
}

.problematique-chapeau {
  position: relative;
  padding: 0 7.375rem;
}
.problematique-chapeau > svg:nth-child(1) {
  position: absolute;
  top: -5rem;
  right: 8.4375rem;
}
.problematique-chapeau > svg:nth-child(2) {
  z-index: 5;
  position: absolute;
  top: calc(100% + var(--KPM049));
  right: 55%;
}
.problematique-chapeau-inner {
  position: relative;
  font-size: var(--KPM026);
  line-height: var(--KPM032);
  text-align: center;
  color: var(--KPMcoldarkblue);
}

.problematique-blocs {
  position: relative;
  z-index: 6;
  justify-content: space-between;
  margin-top: var(--KPM088);
}
.problematique-bloc {
  overflow: hidden;
  position: relative;
  width: 49.03%;
  padding: var(--KPM078) var(--KPM050) var(--KPM042);
  border-radius: var(--KPM012);
}
.problematique-bloc img {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--KPM012);
  transition: all 0.2s;
}
.problematique-bloc:hover img {
  scale: 1.1;
}
.problematique-bloc:before {
  content: '';
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: var(--KPM012);
}
.problematique-bloc-surtitre {
  z-index: 3;
  position: relative;
  width: 58%;
  font-size: var(--KPM023);
  line-height: var(--KPM030);
  font-weight: 300;
  color: #fff;
}
.problematique-bloc-titre {
  z-index: 3;
  position: relative;
  width: 80%;
  margin: 0;
  font-size: var(--KPM034);
  line-height: var(--KPM044);
  color: #fff;
}
.problematique-bloc a {
  z-index: 3;
  position: absolute;
  bottom: var(--KPM042);
  right: var(--KPM050);
}

.problematique-cta {
  margin-top: var(--KPM072);
  padding-bottom: var(--KPM079);
  text-align: center;
}
.problematique-cta .btn {
  padding-left: 9.1875rem;
  padding-right: 9.1875rem;
}

.problematique-interlude {
  padding-top: var(--KPM077);
  background-color: #fff;
}
.problematique-interlude .inner {
  justify-content: space-between;
}
.problematique-interlude-bloc {
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  width: 49.03%;
  margin-top: 0;
  padding: var(--KPM052) var(--KPM072) var(--KPM058);
}
.problematique-interlude-titre {
  margin-bottom: var(--KPM018);
  font-size: var(--KPM036);
  line-height: var(--KPM044);
  color: #fff;
  text-align: center;
}
.problematique-interlude-catalogue {
  background-color: var(--KPMcolgreen);
}
.problematique-interlude-catalogue .btn.btn-dl > div {
  border-radius: 10rem;
  border: var(--KPM001) solid #83BA23;
}
.problematique-interlude-cta {
  background-color: #004C98;
}
.problematique-interlude-cta .btn.btn-dl {
  color: #004C98;
}
.problematique-interlude-cta .btn.btn-dl > div svg {
  stroke: #004C98;
} 

.problematique-content {
  padding-top: var(--KPM100);
  background-color: #fff;
}
.problematique-content-bloc {
  align-items: center;
  justify-content: space-between;
}
.problematique-content-bloc-texte {
  width: 55.48%
}
.problematique-content-bloc-texte h2 {
  margin-bottom: var(--KPM012);
  font-size: var(--KPM026);
  line-height: var(--KPM032);
}
.problematique-content-bloc-texte h2 span {
  color: var(--KPMcollightblue);
}
.problematique-content-bloc-texte p {
  font-size: var(--KPM018);
  line-height: var(--KPM024);
}
.problematique-content-bloc-image {
  width: 32.06%;
}
.problematique-content-bloc2 {
  margin-top: 7.5rem;
}

.problematique-interlude-2 {
  padding-top: 7.5rem;
  padding-bottom: var(--KPM050);
}

body.page-template-tpl-problematique #accueil-trainings {
  margin-top: var(--KPM088);
  margin-bottom: 7.5rem;
}

.problematique-problematique {
  background-color: #fff;
}
.problematique-problematique #blocproblematique {
  margin-top: 0;
  padding-top: var(--KPM100);
  padding-bottom: var(--KPM100);
}

#problematique-enfants {
  padding-top: var(--KPM050);
  padding-bottom: var(--KPM100);
  background-color: #fff;
}
#problematique-enfants h2 {
  text-align: center;
}
.problematique-enfants-liste {
  gap: var(--KPM024);
  justify-content: center;
}
.problematique-enfant {
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  width: calc(25% - var(--KPM018));
  padding: var(--KPM030) var(--KPM020);
  border-radius: var(--KPM012);
  color: #fff;
  transition: all 0.2s;
}
.problematique-enfant:hover {
  transform: rotateZ(3deg)
}
.problematique-enfant > svg {
  position: absolute;
  right: 0;
  top: var(--KPM040);
  opacity: 1;
  transition: all 0.2s;
}
.problematique-enfant:hover > svg {
  opacity: 0.5;
}
.problematique-enfant-titre {
  position: relative;
  font-size: var(--KPM020);
  line-height: var(--KPM023);
}
.problematique-enfant a {
  position: relative;
  margin-top: var(--KPM020);
  margin-bottom: var(--KPM020);
  color: #fff;
}
.problematique-enfant a:hover {
  text-decoration: underline;
}

#problematique-content {
  padding-top: var(--KPM100);
  background-color: #fff;
}