/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
.paragraph--type--sections.services {
  margin-bottom: 6rem;
}
.paragraph--type--sections.services .paragraph--type--colonnes-left-right {
  margin-bottom: 3rem;
}
.paragraph--type--sections.services .paragraph--type--colonnes-left-right .main-wrap {
  display: flex;
  align-items: center;
  gap: 50px;
}
.paragraph--type--sections.services .paragraph--type--colonnes-left-right .main-wrap > .field {
  width: 50%;
}
.paragraph--type--sections.services .paragraph--type--colonnes-left-right .main-wrap img {
  border-radius: 30px;
  width: 100%;
  height: auto;
}
.paragraph--type--sections.services .paragraph--type--colonnes-left-right .main-wrap ul {
  padding: 0 0 0 18px;
}
.paragraph--type--sections.services .section-intro-lr {
  padding: 6rem 0 3rem;
}
.paragraph--type--sections.services .section-intro-lr .main-wrap .intro-body .intro-left h2 {
  transform: translateY(-15px);
  font-size: 2.125rem;
}
.paragraph--type--sections.video {
  background-color: #f4f4f4;
  border-radius: 30px 30px 0 0;
  margin-bottom: -48px;
  padding: 90px 0 140px;
  text-align: center;
  display: none;
}
.paragraph--type--sections.video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  max-width: 850px;
}

@media only screen and (max-width: 768px) {
  .paragraph--type--sections.services .paragraph--type--colonnes-left-right .main-wrap {
    gap: 20px;
    flex-direction: column;
  }
  .paragraph--type--sections.services .paragraph--type--colonnes-left-right .main-wrap > .field {
    width: 100%;
  }
  .paragraph--type--sections.services .section-intro-lr {
    padding: 6rem 0 3rem;
  }
  .paragraph--type--sections.services .section-intro-lr .main-wrap .intro-body .intro-left h2 {
    transform: translateY(0);
  }
  .field--name-field-bloc-right:has(.paragraph--type--image) {
    order: -1;
  }
}
@media only screen and (max-width: 480px) {
  .paragraph--type--sections.services {
    margin-bottom: 0;
  }
  .paragraph--type--sections.services .section-intro-lr {
    padding: 3rem 0 2rem;
  }
  .paragraph--type--sections.services .section-intro-lr .main-wrap .intro-body .intro-left .intro-title {
    font-size: 1.75rem;
  }
  .paragraph--type--sections.services .section-intro-lr .main-wrap .intro-body .intro-right .intro-text p {
    margin-bottom: 0;
  }
  .paragraph--type--sections.services .paragraph--type--colonnes-left-right {
    margin-bottom: 0;
  }
  .paragraph--type--sections.services .paragraph--type--colonnes-left-right .main-wrap > .field h2 {
    margin: 0;
  }
  .paragraph--type--sections.services .paragraph--type--colonnes-left-right .main-wrap ul {
    padding: 0;
  }
}