.notre-mission {
  margin: auto;
  text-align: center;
  width: min(500px, calc(100% - 40px));
  padding-top: 0px;
}

.notre-mission div {
  color: var(--red);
  margin-bottom: 40px;
  margin-top: 15px;
  font-size: 25px;
}

.notre-mission i {
  position: relative;
  width : 100%;
}

.notre-mission p {
  font-family: var(--font4), serif;
}


@media (min-width : 700px) {

  .notre-histoire-container {
    width : calc(100% + 100px);
    background-color: var(--orange);
    margin-left: -50px;
    color: white;
    padding: 30px 0;
    margin-top: 70px;
  }

  .notre-histoire {
    margin: auto;
    text-align: center;
    width: min(500px, calc(100% - 40px));
  }

}

@media (max-width : 700px) {

  .notre-histoire-container {
    width : calc(100% + 40px);
    background-color: var(--orange);
    margin-left: -20px;
    color: white;
    padding: 30px 0;
    margin-top: 70px;
  }

  .notre-histoire {
    margin: auto;
    text-align: center;
    width: min(500px, calc(100% - 40px));
  }

}

.notre-histoire p {
  font-family: var(--font4), serif;
}

.notre-histoire h3 {
  margin-bottom: 30px;
  font-size: 25px;
}


.heading {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--red-light), var(--red-light));
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
}


.heading-1 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--blue-very-light), var(--blue-very-light));
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
}

.heading-2 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--orange-dark), var(--orange-dark));
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
}


.heading--1 {
  --underline-width: 10;
  --underline-offset-y: -2px;
}

.heading--2 {
  --underline-width: 14;
  --underline-offset-y: -5px;
}

.heading--3 {
  --underline-width: 8;
  --underline-offset-y: -2px;
}

:root {
  --underline-intrinsic-width: 8;
  --underline-width: 12;
  --underline-cap-width: 4px;
  --underline-offset-y: -2px;
  --underline-padding-x: 0.12em;
}

.notre-histoire div {
  margin-bottom: 40px;
  margin-top: 15px;
  font-size: 25px;
}
  

.a-propos-nous-contacter {
  margin: auto;
  text-align: center;
  width: min(500px, calc(100% - 40px));
  padding-top: 30px;
}

.a-propos-nous-contacter h1 {
  color: var(--blue);
}

.a-propos-nous-contacter h3 {
  font-family: var(--font4), serif;
  font-weight: lighter;
}

.contactez-nous-button-a-propos {
  height: auto;
  font-size: 20px;
  display: inline-block;
  color: white;
  padding: 10px;
  background-color: var(--blue);
  text-decoration: none;
  border-radius: 10px;
  margin-bottom: 0px;
  width: auto;
  position: relative;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);
  font-family: var(--font3), serif;
  margin-top: 20px;
}