@font-face {
  font-family: SpaceGrotesk;
  src: url('../fonts/SpaceGrotesk-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: SpaceGrotesk;
  src: url('../fonts/SpaceGrotesk-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: SpaceGrotesk;
  src: url('../fonts/SpaceGrotesk-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: SpaceGrotesk;
  src: url('../fonts/SpaceGrotesk-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --primaire--lightpink: #f9bdd1;
  --primaire--black: #0b0a10;
  --primaire--white: white;
  --secondaire--blue: #4181fe;
  --dégradé--darkblue: #1e1932;
  --dégradé--darkviolet: #2a2249;
  --primaire--gris: #1a191e;
  --secondaire--purple: #7022e6;
  --secondaire--magenta: #ff29e2;
  --secondaire--lavande: #cec6e5;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

h1 {
  color: var(--primaire--lightpink);
  letter-spacing: -5px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 128px;
  font-weight: 300;
  line-height: 136px;
}

h2 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

h3 {
  color: var(--primaire--lightpink);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 52px;
}

h4 {
  color: var(--primaire--lightpink);
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 36px;
  font-weight: 500;
  line-height: 52px;
}

.body {
  background-color: var(--primaire--black);
  color: var(--primaire--white);
  font-family: SpaceGrotesk, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 32px;
}

.navbar {
  background-color: #ddd0;
  padding-top: 32px;
  position: fixed;
  inset: 0 0% auto;
}

.navlink {
  color: var(--primaire--white);
  padding: 0;
  font-size: 16px;
  line-height: 23px;
  transition: flex .2s, all .35s;
}

.navlink:hover {
  background-image: linear-gradient(90deg, var(--secondaire--blue), #25b8f2 64%);
  letter-spacing: .3px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 600;
}

.navlink.w--current {
  color: var(--primaire--white);
}

.navdiv-vertical {
  background-color: var(--primaire--white);
  width: .5px;
  height: 16px;
}

.nav-menu {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  border: .5px solid var(--primaire--white);
  background-image: linear-gradient(90deg, var(--dégradé--darkblue), var(--dégradé--darkviolet));
  border-radius: 64px;
  justify-content: center;
  align-items: center;
  padding: 24px 32px;
  display: flex;
  overflow: hidden;
}

.container {
  max-width: 1264px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 200px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
}

.container.header {
  max-width: none;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
}

.section {
  overflow: hidden;
}

.section.hero {
  margin-top: -72px;
}

.section.bio {
  overflow: visible;
}

.video-header {
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.icon-arrow-wrapper {
  justify-content: center;
  align-items: center;
  margin-top: 64px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.icon-arrow {
  margin-left: auto;
  margin-right: auto;
}

.video-wrapper {
  width: 100vw;
  height: 85vh;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.video-gradient {
  z-index: 10;
  background-image: linear-gradient(0deg, var(--primaire--black), var(--primaire--black) 0%, #0b0a1000);
  height: 128px;
  position: absolute;
  inset: auto 0% 0%;
}

.h2-tag {
  background-color: var(--primaire--gris);
  border-radius: 64px;
  justify-content: center;
  align-items: center;
  padding: 20px 24px;
}

.spectacle-heading {
  z-index: 10;
  margin-left: 20%;
  position: relative;
}

._2-col-spectacle {
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  margin-top: 200px;
  display: flex;
  position: relative;
}

.photo-spectacle-wrapper {
  border-radius: 16px;
  width: 504px;
  max-width: 32rem;
  height: 684px;
  position: relative;
  overflow: hidden;
}

.photo {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.photo.is-1 {
  position: absolute;
}

.info-spectacle-wrapper {
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  flex-flow: column;
  max-width: 32rem;
  display: flex;
}

.text-info {
  font-size: 16px;
  line-height: 28px;
}

.text-info-wrapper.mediation {
  display: none;
}

.highlight {
  color: var(--primaire--lightpink);
  font-weight: 600;
}

.spectacle-wrapper {
  margin-left: 16px;
  margin-right: 16px;
  position: relative;
}

.team-wraper {
  margin-top: 200px;
  margin-left: 16px;
  margin-right: 16px;
}

.team-card {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  max-width: 288px;
  display: flex;
}

.team-image-wrapper {
  border-radius: 16px;
  max-width: 298px;
  height: 298px;
  position: relative;
  overflow: hidden;
}

.team-image-wrapper.link-image {
  color: var(--primaire--white);
  text-decoration: none;
}

.team-gradient {
  z-index: 5;
  background-image: linear-gradient(0deg, var(--secondaire--purple), var(--secondaire--purple) 0%, #7022e600);
  height: 40%;
  position: absolute;
  inset: auto 0% 0%;
}

.image-team {
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

.team-name {
  z-index: 10;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 24px;
  font-weight: 500;
  position: absolute;
  inset: auto 16px 16px;
}

.role-wrapper {
  text-align: center;
  justify-content: center;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
}

.role {
  color: var(--primaire--white);
  text-align: center;
  font-size: 16px;
  line-height: 28px;
}

.role.link-block {
  text-decoration: underline;
}

.team-card-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 64px;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-top: 64px;
  display: flex;
}

.collaborateurs-wraper {
  margin-top: 200px;
  margin-left: 16px;
  margin-right: 16px;
}

.marquee-wrapper {
  margin-top: 200px;
}

.inner-marquee {
  grid-column-gap: 104px;
  grid-row-gap: 104px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-left: 64px;
  display: flex;
}

.marquee {
  background-color: var(--primaire--white);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  height: 128px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  overflow: hidden;
}

.h2-container {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.collaborateurs-wrapper {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 64px;
  display: flex;
}

.collaborateurs-col {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  display: flex;
}

.collaborateur {
  border-bottom: .5px solid var(--primaire--white);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
}

.collaborateur.is-first {
  border-top: .5px solid var(--primaire--white);
  border-bottom: .5px solid var(--primaire--white);
}

.collaborateur-name {
  font-weight: 500;
}

.collab-role {
  font-size: 16px;
  line-height: 28px;
}

.introducti-n-mediation-wrapper {
  max-width: 835px;
  margin-top: 64px;
  margin-left: 8%;
}

.mediation-wrapper {
  z-index: 10;
  margin-left: 16px;
  margin-right: 16px;
  position: relative;
}

.footer-section {
  margin-top: 200px;
  overflow: hidden;
}

.container-footer {
  display: flex;
}

.footer {
  background-image: linear-gradient(135deg, var(--dégradé--darkblue), var(--secondaire--purple) 57%, var(--secondaire--blue));
  border-radius: 16px;
  width: 100%;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.contact {
  background-color: var(--primaire--white);
  border-radius: 16px;
  flex-flow: column;
  justify-content: space-between;
  min-width: 416px;
  padding: 32px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.mediation-photo-wrapper {
  border-radius: 16px;
  width: 100%;
  margin-top: 88px;
  position: relative;
  overflow: hidden;
}

.mediation-photo {
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

.mediation-gradient {
  z-index: 10;
  background-image: linear-gradient(0deg, var(--primaire--black), #0b0a1000);
  height: 144px;
  position: absolute;
  inset: auto 0% 0%;
}

._2-col-mediation {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  justify-content: space-between;
  width: 100%;
  margin-top: 88px;
  display: flex;
}

.mediation-description {
  margin-top: 48px;
}

.mediation-divider {
  background-color: var(--primaire--white);
  align-items: stretch;
  width: .5px;
  height: 100%;
}

.mediation-descriptio-wrapper {
  width: 50%;
}

.contact-button-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 88px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.primary-button {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: var(--primaire--white);
  color: var(--primaire--black);
  letter-spacing: -.5px;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  padding: 16px 64px;
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.numeros_content {
  margin-left: 56px;
  margin-right: 56px;
}

.numero {
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 64px;
  display: flex;
}

.numero.is-right, .numero.is-left {
  border-bottom: .5px solid var(--primaire--white);
  margin-top: 48px;
  padding-bottom: 48px;
}

.numeros-wrapper {
  background-image: linear-gradient(135deg, var(--dégradé--darkblue), var(--dégradé--darkviolet));
  border-radius: 16px;
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 128px;
  padding-bottom: 128px;
  overflow: hidden;
}

.numero-photo-wrapper {
  border-radius: 16px;
  width: 400px;
  overflow: hidden;
}

.numero-photo {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.numero-description {
  margin-top: 48px;
}

.numero-content-wrapper {
  width: 60%;
}

.numero-divider {
  background-color: var(--primaire--white);
  width: 100%;
  height: .5px;
  margin-top: 64px;
}

.bio-wrapper {
  z-index: 10;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
}

.apropos-wrapper {
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 64px;
  display: flex;
}

.apropos-photo-wrapper {
  border-radius: 16px;
  min-width: 400px;
  max-width: 512px;
  overflow: hidden;
}

.apropos-text-wrapper {
  width: 100%;
}

.apropos-photo {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.demarche-wrapper {
  z-index: 10;
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 200px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
}

.demarche-text-wrapper {
  max-width: 620px;
}

.demarche-photo-wrapper {
  border-radius: 16px;
  min-width: 400px;
  max-width: 512px;
  height: 384px;
  position: sticky;
  top: 135px;
  overflow: hidden;
}

.demarche-photo {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

._2-col-demarche {
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 64px;
  display: flex;
}

.email-text {
  color: var(--primaire--black);
  font-size: 18px;
}

.arrow-icon {
  width: 24px;
  height: 24px;
}

.text-block {
  color: var(--primaire--black);
  letter-spacing: -2px;
  font-size: 36px;
  font-weight: 500;
  line-height: 52px;
  text-decoration: none;
}

.contacme-footer {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.socials {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footerlink {
  color: var(--primaire--white);
  font-size: 16px;
  line-height: 23px;
  text-decoration: none;
  transition: color .35s;
}

.footerlink:hover {
  color: var(--secondaire--magenta);
}

.footer-divider {
  background-color: var(--primaire--white);
  width: .5px;
  height: 16px;
}

.footer-divider.is-mobile {
  display: none;
}

.footer-2-col-nav {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.bottom-infos {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.signature {
  color: var(--primaire--white);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-weight: 400;
  line-height: 0;
  text-decoration: none;
  display: flex;
}

.signature-span-p1, .signature-span-p2 {
  letter-spacing: -5px;
  font-size: 112px;
  font-weight: 400;
  line-height: 112px;
}

.footer-content {
  z-index: 10;
  grid-column-gap: 128px;
  grid-row-gap: 128px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.nav-container {
  justify-content: space-between;
  align-items: center;
  margin-left: 32px;
  margin-right: 32px;
  display: flex;
}

.mediation-divider-wrapper.is-last {
  display: none;
}

.text-button {
  font-size: 20px;
}

.brand {
  line-height: 0;
}

.logo-p {
  display: none;
}

.footer-col-g, .footer-col-d {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.divider-footer-horizontal.is-mobile, .burgermenu-wrapper {
  display: none;
}

.bubble-1 {
  z-index: 1;
  width: 1000px;
  max-width: none;
  position: absolute;
  inset: auto 53% 33% auto;
}

.subtitle-h1 {
  color: var(--primaire--lightpink);
  letter-spacing: -1px;
  font-size: 44px;
  line-height: 56px;
}

.h1-header {
  margin-top: 64px;
}

.bubble-2 {
  z-index: -1;
  max-width: 800px;
  position: absolute;
  inset: 1100% 64% auto auto;
}

.bubble-footer {
  position: absolute;
  inset: 35% auto auto 18%;
}

.bubble-duo-1 {
  z-index: 1;
  max-width: 800px;
  position: absolute;
  inset: 9% auto auto 53%;
}

.bubble-duo-2 {
  z-index: 0;
  max-width: 850px;
  position: absolute;
  inset: 23% auto auto 65%;
}

.navbubble-1, .navbubble-2 {
  display: none;
}

.contact-text {
  text-align: left;
  font-size: 16px;
  line-height: 24px;
}

.contact-text-wrapper.mediation {
  text-align: left;
}

.introduction-m-diation-text {
  font-size: 36px;
  line-height: 52px;
}

.spectacle-button-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.review-wrapper {
  max-width: 1082px;
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
}

.review-container {
  background-image: linear-gradient(180deg, #7022e61a, var(--secondaire--purple));
  border-radius: 16px;
  max-width: 1050px;
  padding: 32px;
  overflow: hidden;
}

._2-col-grid-websites {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  max-width: 836px;
  margin-top: 64px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.promo-websites {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  background-image: linear-gradient(180deg, var(--dégradé--darkblue), var(--dégradé--darkviolet));
  border-radius: 16px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 32px;
  display: flex;
  overflow: hidden;
}

.logo-website {
  height: 104px;
}

.websites-wrapper {
  max-width: 836px;
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
}

.slider {
  background-color: #ddd0;
  height: auto;
  margin-top: 64px;
}

.svg-arrow-left {
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.svg-arrow-right {
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.slide-nav {
  display: none;
}

.mask {
  max-width: 620px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.p-person-quote {
  width: 50%;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.p-quote {
  margin-bottom: 0;
}

.quote-wrapper {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.secondary-button-wrapper {
  margin-top: 48px;
  display: flex;
}

.secondary {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 1px solid var(--primaire--white);
  color: var(--primaire--white);
  letter-spacing: -.5px;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  padding: 16px 64px;
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .35s, color .35s;
  display: flex;
}

.secondary:hover {
  background-color: var(--primaire--white);
  color: var(--primaire--black);
}

.secondary.devis {
  padding-left: 50px;
  padding-right: 50px;
}

.code-embed {
  width: 24px;
  height: 24px;
}

.opener, .closer {
  text-align: center;
  text-decoration: underline;
}

.see-more-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: center;
  align-items: flex-start;
  display: none;
}

.navbar-en {
  background-color: #ddd0;
  padding-top: 32px;
  position: fixed;
  inset: 0 0% auto;
}

.arrow-down, .arrow-up {
  width: 24px;
  height: 24px;
}

.see-more-button {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.see-less-button {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: center;
  align-items: center;
  display: none;
}

.button-row {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 104px;
    line-height: 112px;
  }

  h3, h4 {
    font-size: 24px;
    line-height: 38px;
  }

  .body {
    font-size: 16px;
    line-height: 28px;
  }

  .navbar {
    padding-top: 16px;
    top: 0;
  }

  .navlink {
    text-align: center;
    padding: 20px 0;
    font-size: 28px;
    line-height: 36px;
  }

  .navdiv-vertical {
    width: 304px;
    height: .5px;
    margin: 24px auto;
  }

  .nav-menu {
    background-color: var(--primaire--black);
    background-image: none;
    border-style: none;
    border-radius: 0;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    padding-top: 88px;
  }

  .container {
    margin-left: 0;
    margin-right: 0;
    padding-top: 184px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .container.header {
    padding-left: 0;
    padding-right: 0;
  }

  .video-wrapper {
    height: 80vh;
  }

  .spectacle-heading {
    margin-left: 0%;
  }

  ._2-col-spectacle {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 184px;
  }

  .photo-spectacle-wrapper {
    width: 50%;
    max-width: none;
    height: 480px;
  }

  .info-spectacle-wrapper {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 50%;
    max-width: none;
  }

  .text-info {
    font-size: 12px;
    line-height: 20px;
  }

  .spectacle-wrapper {
    margin-left: 0;
    margin-right: 0;
  }

  .team-wraper {
    margin-top: 184px;
    margin-left: 0;
    margin-right: 0;
  }

  .team-card {
    max-width: 336px;
  }

  .team-image-wrapper {
    max-width: 336px;
    height: 336px;
  }

  .role-wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .team-card-wrapper {
    grid-row-gap: 48px;
    margin-top: 48px;
  }

  .collaborateurs-wraper {
    margin-top: 184px;
    margin-left: 0;
    margin-right: 0;
  }

  .marquee-wrapper {
    margin-top: 184px;
  }

  .inner-marquee {
    grid-column-gap: 88px;
    grid-row-gap: 88px;
  }

  .marquee {
    height: 112px;
  }

  .logo-partenaires.isotone {
    height: 24px;
  }

  .logo-partenaires.acm, .logo-partenaires.edcm, .logo-partenaires.enc {
    height: 56px;
  }

  .logo-partenaires.ado {
    height: 80px;
  }

  .logo-partenaires.tohu, .logo-partenaires.ndg, .logo-partenaires.quai, .logo-partenaires.cca {
    height: 56px;
  }

  .logo-partenaires.montreal {
    height: 48px;
  }

  .logo-partenaires.calq {
    height: 56px;
  }

  .collaborateurs-wrapper {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 365px;
    margin-top: 48px;
    overflow: hidden;
  }

  .collaborateurs-col {
    width: 100%;
  }

  .collaborateur.is-first.is-tablet {
    border-top-style: none;
    border-top-width: 0;
  }

  .introducti-n-mediation-wrapper {
    margin-top: 48px;
    margin-left: 0%;
  }

  .mediation-wrapper {
    margin-left: 0;
    margin-right: 0;
  }

  .footer-section {
    margin-top: 184px;
  }

  .container-footer {
    flex-flow: column;
  }

  .footer {
    border-bottom-right-radius: 0;
  }

  .contact {
    grid-column-gap: 88px;
    grid-row-gap: 88px;
    border-bottom-right-radius: 16px;
    order: -1;
    min-width: auto;
  }

  .mediation-photo-wrapper {
    margin-top: 64px;
  }

  ._2-col-mediation {
    flex-flow: column;
    width: 548px;
    margin-top: 64px;
    margin-left: auto;
    margin-right: auto;
  }

  .mediation-divider {
    width: 100%;
    height: .5px;
  }

  .mediation-descriptio-wrapper {
    width: 100%;
  }

  .contact-button-wrapper {
    margin-top: 64px;
  }

  .numeros_content {
    margin-left: 16px;
    margin-right: 16px;
  }

  .numero.is-right, .numero.is-left {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    justify-content: space-between;
    align-items: flex-start;
  }

  .numeros-wrapper {
    margin-left: 0;
    margin-right: 0;
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .numero-photo-wrapper {
    width: auto;
    max-width: 250px;
  }

  .numero-divider {
    margin-top: 48px;
  }

  .bio-wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .apropos-wrapper {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
    flex-flow: column;
    margin-top: 48px;
  }

  .apropos-text-wrapper {
    width: 548px;
  }

  .demarche-wrapper {
    margin-top: 184px;
    padding-left: 0;
    padding-right: 0;
  }

  .demarche-text-wrapper {
    max-width: 548px;
    margin-left: auto;
    margin-right: auto;
  }

  .demarche-photo-wrapper {
    order: -1;
    width: 100%;
    min-width: auto;
    max-width: none;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    position: static;
  }

  ._2-col-demarche {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
    flex-flow: column;
    margin-top: 48px;
  }

  .text-block {
    font-size: 30px;
    line-height: 44px;
  }

  .footer-2-col-nav {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .signature-span-p1, .signature-span-p2 {
    font-size: 88px;
    line-height: 96px;
  }

  .footer-content {
    grid-column-gap: 88px;
    grid-row-gap: 88px;
  }

  .nav-container {
    margin-left: 16px;
    margin-right: 16px;
  }

  .mediation-divider-wrapper.is-last {
    display: block;
  }

  .text-button {
    font-size: 20px;
    line-height: 26px;
  }

  .burgermenu {
    height: 32px;
  }

  .menu-button {
    padding: 0;
  }

  .menu-button.w--open {
    background-color: #0000;
  }

  .footer-col-g, .footer-col-d {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .burgermenu-wrapper {
    border: .5px solid var(--primaire--white);
    background-image: linear-gradient(45deg, var(--dégradé--darkblue), var(--dégradé--darkviolet));
    border-radius: 64px;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    display: flex;
  }

  .bubble-1 {
    width: 864px;
    inset: auto 53% 26% auto;
  }

  .subtitle-h1 {
    font-size: 32px;
    line-height: 48px;
  }

  .h1-header {
    margin-top: 48px;
  }

  .bubble-2 {
    max-width: 800px;
    top: 1161%;
    right: 45%;
  }

  .navbubble-1 {
    display: block;
    position: absolute;
    inset: 17% 69% auto auto;
  }

  .navbubble-2 {
    display: block;
    position: absolute;
    inset: auto auto 14% 67%;
  }

  .contact-text-wrapper.mediation {
    text-align: left;
    width: 548px;
  }

  .introduction-m-diation-text {
    font-size: 24px;
    line-height: 38px;
  }

  .spectacle-button-wrapper {
    margin-top: 64px;
  }

  .review-wrapper {
    margin-top: 184px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  ._2-col-grid-websites {
    margin-top: 48px;
  }

  .websites-wrapper {
    margin-top: 184px;
  }

  .slider {
    margin-top: 48px;
  }

  .mask {
    max-width: 460px;
  }

  .secondary.devis {
    padding-left: 32px;
    padding-right: 32px;
  }

  .opener, .closer {
    text-decoration: none;
  }

  .see-more-container {
    cursor: pointer;
    padding-top: 16px;
    display: block;
  }

  .navbar-en {
    padding-top: 16px;
    top: 0;
  }

  .see-less-button {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    letter-spacing: -4px;
    font-size: 80px;
    line-height: 88px;
  }

  .navlink {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 24px;
    line-height: 28px;
  }

  .navdiv-vertical {
    width: 248px;
  }

  .nav-menu {
    padding-top: 48px;
  }

  .container {
    padding-top: 160px;
  }

  .icon-arrow-wrapper {
    margin-top: 88px;
  }

  .video-wrapper {
    height: 70vh;
  }

  ._2-col-spectacle {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 64px;
  }

  .photo-spectacle-wrapper {
    order: -1;
    width: 80%;
    max-width: 80%;
    height: 60vh;
  }

  .info-spectacle-wrapper {
    width: 80%;
  }

  .team-wraper {
    margin-top: 160px;
  }

  .team-card {
    max-width: 216px;
  }

  .team-image-wrapper {
    max-width: 216px;
    height: 216px;
  }

  .team-name {
    font-size: 20px;
    line-height: 24px;
    bottom: 8px;
    left: 8px;
    right: 8px;
  }

  .role {
    font-size: 12px;
    line-height: 20px;
  }

  .team-card-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 32px;
    justify-content: center;
  }

  .collaborateurs-wraper, .marquee-wrapper {
    margin-top: 160px;
  }

  .inner-marquee {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
    margin-left: 32px;
  }

  .marquee {
    height: 88px;
  }

  .logo-partenaires.isotone {
    height: 16px;
  }

  .logo-partenaires.acm, .logo-partenaires.edcm, .logo-partenaires.enc {
    height: 48px;
  }

  .logo-partenaires.ado {
    height: 72px;
  }

  .logo-partenaires.tohu, .logo-partenaires.ndg, .logo-partenaires.quai, .logo-partenaires.cca {
    height: 48px;
  }

  .logo-partenaires.montreal {
    height: 32px;
  }

  .logo-partenaires.calq {
    height: 48px;
  }

  .mediation-photo-wrapper {
    margin-top: 48px;
  }

  ._2-col-mediation {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    width: 80%;
    margin-top: 48px;
  }

  .contact-button-wrapper {
    margin-top: 48px;
  }

  .primary-button {
    padding: 16px 48px;
  }

  .numero.is-right, .numero.is-left {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-bottom: 32px;
  }

  .numeros-wrapper {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .numero-photo-wrapper {
    order: -1;
    width: 80%;
    max-width: none;
  }

  .numero-content-wrapper {
    width: 80%;
  }

  .apropos-wrapper {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
  }

  .apropos-photo-wrapper {
    width: 80%;
    min-width: auto;
    max-width: none;
  }

  .apropos-text-wrapper {
    width: 80%;
  }

  .demarche-text-wrapper {
    width: 80%;
    max-width: none;
  }

  .footer-divider.is-mobile {
    width: 1px;
    height: 100px;
    display: block;
  }

  .footer-divider.is-desktop {
    display: none;
  }

  .footer-2-col-nav {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
  }

  .bottom-infos {
    flex-flow: column;
  }

  .signature {
    justify-content: flex-start;
    align-items: center;
  }

  .signature-span-p1, .signature-span-p2 {
    font-size: 80px;
    line-height: 88px;
  }

  .footer-content {
    justify-content: flex-start;
    align-items: center;
  }

  .menu-button {
    text-align: center;
    justify-content: center;
    align-items: center;
    position: static;
  }

  .heading-3 {
    font-size: 14px;
    line-height: 18px;
  }

  .footer-col-g, .footer-col-d {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 50%;
    display: flex;
  }

  .divider-footer-horizontal.is-mobile {
    background-color: var(--primaire--white);
    width: 100%;
    height: .5px;
    display: block;
  }

  .bubble-1 {
    width: 704px;
    inset: auto 53% 59% auto;
  }

  .subtitle-h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .bubble-2 {
    max-width: 600px;
    top: 1245%;
    right: 45%;
  }

  .bubble-footer {
    max-width: 130%;
    inset: 49% 0% auto;
  }

  .bubble-duo-1 {
    max-width: 500px;
    top: 14%;
  }

  .bubble-duo-2 {
    max-width: 600px;
    top: 22%;
    left: 53%;
  }

  .navbubble-1 {
    top: 13%;
  }

  .navbubble-2 {
    bottom: 41%;
    left: 69%;
  }

  .contact-text-wrapper.mediation {
    text-align: left;
    width: 80%;
  }

  .spectacle-button-wrapper {
    justify-content: flex-start;
    align-items: center;
    margin-top: 48px;
  }

  .review-wrapper {
    margin-top: 160px;
  }

  .review-container {
    padding: 16px;
  }

  ._2-col-grid-websites {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 16px;
    overflow: scroll;
  }

  .promo-websites {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    justify-content: flex-start;
    align-items: center;
    width: 50%;
    min-width: 360px;
    padding: 24px;
  }

  .logo-website {
    width: auto;
    height: 80px;
  }

  .websites-wrapper {
    margin-top: 160px;
  }

  .slider {
    flex-flow: column;
    display: flex;
  }

  .mask {
    width: 100%;
    margin-bottom: 104px;
  }

  .p-person-quote {
    width: auto;
  }

  .left-arrow {
    inset: auto 0% 0% -68px;
  }

  .right-arrow {
    inset: auto 0 0% 68px;
  }

  .secondary {
    padding: 16px 48px;
  }

  .secondary.devis {
    padding-left: 36px;
    padding-right: 36px;
  }
}

@media screen and (max-width: 479px) {
  .photo-spectacle-wrapper {
    width: 100%;
    max-width: none;
  }

  .info-spectacle-wrapper {
    width: auto;
  }

  .team-card {
    width: 47%;
    max-width: none;
  }

  .team-image-wrapper {
    width: 100%;
    max-width: none;
    height: 200px;
  }

  .image-team {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .team-card-wrapper {
    flex-flow: wrap;
  }

  .collaborateur {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .collaborateur.is-first {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }

  .footer {
    padding: 32px 16px;
  }

  .contact {
    padding: 16px;
  }

  ._2-col-mediation {
    width: auto;
  }

  .primary-button {
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
  }

  .numero-photo-wrapper, .numero-content-wrapper, .apropos-photo-wrapper, .apropos-text-wrapper, .demarche-text-wrapper {
    width: auto;
  }

  .demarche-photo-wrapper {
    height: 35vh;
  }

  .menu-button {
    padding: 12px;
  }

  .logo-g {
    display: none;
  }

  .logo-p {
    display: inline-block;
  }

  .bubble-1 {
    width: 504px;
    display: block;
    inset: auto 139px 896px auto;
  }

  .heading-4 {
    font-size: 64px;
    line-height: 72px;
  }

  .bubble-2 {
    width: 150%;
    top: 1430%;
    right: 28%;
  }

  .bubble-footer {
    max-width: 600px;
    top: 57%;
  }

  .bubble-duo-1 {
    max-width: 460px;
    top: 20%;
    left: 16%;
  }

  .bubble-duo-2 {
    max-width: 550px;
    top: 25%;
    left: 39%;
  }

  .navbubble-2 {
    bottom: 61%;
  }

  .contact-text-wrapper.mediation {
    text-align: left;
    width: 100%;
  }

  .promo-websites {
    min-width: 268px;
    padding: 16px;
  }

  .secondary {
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
  }

  .secondary.devis {
    padding-left: 20px;
    padding-right: 20px;
  }
}


@font-face {
  font-family: 'SpaceGrotesk';
  src: url('../fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpaceGrotesk';
  src: url('../fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpaceGrotesk';
  src: url('../fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpaceGrotesk';
  src: url('../fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}