.section {
  position: relative;
  min-height: 20vh;
  background-color: grey;
  padding: 2rem 1rem 1.25rem;
  z-index: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .section {
    padding: 2rem 3rem 1.25rem;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 2rem 10vw 1.25rem;
  }
}

.bg-peche {
  background-color: #f09992;
}
.bg-peche-light {
  background-color: #f8cac8;
}
.bg-petrole {
  background-color: #365664;
}
.bg-petrole-light {
  background-color: #b6d8ee;
}
.bg-white {
  background-color: white;
}

.section.off-top {
  padding: 2rem 1rem 1.25rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .section.off-top {
    padding: 2rem 3rem 1rem;
  }
}

@media (min-width: 1024px) {
  .section.off-top {
    padding: 2rem 10vw 1rem;
  }
}

.section.off-top .section-content {
  position: relative;
  top: -5rem;
  margin-bottom: -2.5rem;
}

.section .section-content {
  z-index: 50;
}
.section .back-deco {
  position: absolute;
  overflow: hidden;
  bottom: 2.4rem;
  z-index: -10;
}

.section .m-point {
  width: 15rem;
  height: 7.9rem;
}
.section .m-vague {
  width: 20rem;
  height: 4rem;
}

.section .m-point.align-left {
  left: 0;
}

.section .m-point.align-right {
  right: 0;
}

.section .m-vague.align-left {
  left: 1.5rem;
}

.section .m-vague.align-right {
  right: 1.5rem;
}

.m-point.color-white svg {
  fill: white;
}
.m-point.color-peche svg {
  fill: #fdebed;
}
.m-point.color-petrole svg {
  fill: #6c99b2;
}
.m-vague.color-white svg {
  stroke: white;
}
.m-vague.color-peche svg {
  stroke: #fdebed;
}
.m-vague.color-petrole svg {
  stroke: #6c99b2;
}

.section .back-deco .pattern-circle-s {
  stroke: none;
}
.section .back-deco .vague-moyen {
  fill: none;
}