@charset "UTF-8";
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/*
* Mixin pour les typographies fluides responsives
*
* $min-font-size - La taille de police minimum
* $max-font-size - La taille de police maximum
*
* Dans l'exemple ci-dessous l'élément aura une font-size minimum de 12px en dessous du le breakpoint small et maximum 18px au dessus du breakpoint large
* .mon-element {
* 	@include fluid-type(12px, 18px);
* }
*
* On peut également redéfinir les breakpoint minimum et maximum comme ci-dessous 
* .mon-element {
* 	@include fluid-type(12px, 18px, 768px, 1200px);
* }
*/
@media screen and (min-width: 1120px) {
  .axtopsection-block {
    position: relative;
  }
  .axtopsection-block::after {
    position: absolute;
    inset: 0;
    background-color: var(--backgroundColor-filter);
    content: "";
    z-index: 0;
    opacity: 0.4;
  }
  .axtopsection-block .container-title-groupe, .axtopsection-block .container-text {
    z-index: 2;
  }
}
@media screen and (min-width: 1120px) and (min-width: 1120px) {
  .text-element {
    padding: var(--padding-container);
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
  }
}
.axtopsection-block {
  background-color: var(--white);
}
.axtopsection-block .topsection-background {
  padding-top: calc(var(--section-spacer) / 2);
  position: relative;
  background: transparent linear-gradient(209deg, var(--primary-ligth) 0%, var(--primary) 100%) 0 0 no-repeat padding-box;
  background-size: 100% 85%;
}
@media screen and (min-width: 1120px) {
  .axtopsection-block .topsection-background {
    height: var(--heightBlock);
    padding-top: 0;
    background: none;
  }
}
.axtopsection-block .topsection-background .axtopsection-fond {
  background-image: url(../../assets/img/fonds/fond-alaloupe.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1120px) {
  .axtopsection-block .topsection-background .axtopsection-fond {
    background-image: none;
  }
}
@media screen and (min-width: 1120px) {
  .axtopsection-block .topsection-background .axtopsection-fond .container-title-groupe {
    top: calc(var(--section-spacer) / 2);
  }
}
.axtopsection-block .topsection-background .axtopsection-fond .container-title-groupe .ax-title2 {
  color: var(--white);
  text-align: center;
  padding-bottom: 25px;
  max-width: 1000px;
}
@media screen and (min-width: 1120px) {
  .axtopsection-block .topsection-background .axtopsection-fond .container-title-groupe .ax-title2 {
    padding-bottom: 0;
    text-align: start;
  }
}
.axtopsection-block .topsection-background .axtopsection-fond video, .axtopsection-block .topsection-background .axtopsection-fond img {
  width: 90%;
  left: 50%;
  margin: 0 auto;
  border-radius: 10px;
}
@media screen and (min-width: 1120px) {
  .axtopsection-block .topsection-background .axtopsection-fond video, .axtopsection-block .topsection-background .axtopsection-fond img {
    border-radius: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    position: absolute;
    object-fit: cover;
  }
}
.axtopsection-block .container-text {
  padding: 0;
}
@media screen and (min-width: 1120px) {
  .axtopsection-block .container-text {
    padding: 50px 0;
    width: 100%;
    margin: 0;
  }
}
.axtopsection-block .description-top-section {
  font-family: var(--font-family-medium);
  padding-bottom: 20px;
  text-align: center;
  color: var(--white);
  font-size: 14px;
}
@media screen and (min-width: 1120px) {
  .axtopsection-block .description-top-section {
    font-size: 20px;
  }
}
@media screen and (min-width: 1120px) {
  .axtopsection-block .description-top-section {
    max-width: 700px;
    text-align: start;
  }
}
@media screen and (max-height: 800px) {
  .axtopsection-block .description-top-section {
    max-width: 900px;
  }
}
.axtopsection-block .btn {
  margin: 0 auto 20px;
}
@media screen and (min-width: 1120px) {
  .axtopsection-block .btn {
    margin: 0;
  }
}