@charset "UTF-8";
:root {
  --Nunito: "Nunito", sans-serif;
  --Degular: "degular-text", sans-serif;
  --Space-mono: "Space Mono", monospace;
  --background-light: #FFFFFF;
  --background-light-secondary: #F5F5F5;
  --background-dark: #292929;
  --background-dark-secondary: #474747;
  --background-accent: #50C1C1;
  --background-disabled: #E0E0E0;
  --background-error: #FF453A;
  --bg-opacity-light: rgba(255, 255, 255, 0.1);
  --bg-opacity-accent: rgba(245, 245, 245, 0.2);
  --label-primary-ondark: #FFFFFF;
  --label-primary-onlight: #292929;
  --label-secondary: #A8A8A8;
  --label-accent: #50C1C1;
  --label-error: #FF453A;
  --separator-onlight: #E0E0E0;
  --separator-ondark: #474747;
  --shadow-elevation1: 0px 7px 17px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0px 16px 32px rgba(0, 0, 0, 0.1);
  --shadow-btn-hover: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

.bg-light {
  background: var(--background-light);
}

.bg-light-scd {
  background: var(--background-light-secondary);
}

.bg-dark {
  background: var(--background-dark);
}

.bg-dark-scd {
  background: var(--background-dark-secondary);
}

.bg-accent {
  background: var(--background-accent);
}

.bg-disabled {
  background: var(--background-disabled);
}

.bg-error {
  background: var(--background-error);
}

.label-prim-ondark {
  color: var(--label-primary-ondark);
}

.label-prim-onlight {
  color: var(--label-primary-onlight);
}

.label-secondary {
  color: var(--label-secondary);
}

.label-accent {
  color: var(--label-accent);
}

.label-error {
  color: var(--lbael-error);
}

.sep-onlight {
  background: var(--separator-onlight);
}

.sep-ondark {
  background: var(--separator-ondark);
}

.shadow-elevation1 {
  box-shadow: var(--shadow-elevation1);
}

.shadow-card-hover {
  box-shadow: var(--shadow-card-hover);
}

.display {
  font-family: var(--Degular);
  font-size: 2.625rem;
  line-height: 46px;
  font-weight: bold;
}
@media (min-width: 1200px) {
  .display {
    font-size: 4.375rem;
    line-height: 78px;
  }
}

.headline {
  font-family: var(--Degular);
  font-weight: bold;
}

.headline-small {
  font-family: var(--Degular);
  font-size: 1.5rem;
  line-height: 30px;
  font-weight: bold;
}
@media (min-width: 992px) {
  .headline-small {
    font-size: 2.25rem;
    line-height: 40px;
  }
}

.headline-medium {
  font-family: var(--Degular);
  font-size: 2.25rem;
  line-height: 40px;
  font-weight: bold;
}
@media (min-width: 992px) {
  .headline-medium {
    font-size: 4.375rem;
    line-height: 78px;
  }
}

.headline-large {
  font-family: var(--Degular);
  font-size: 3.563rem;
  line-height: 64px;
  font-weight: bold;
}

.body-bold {
  font-family: var(--Nunito);
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: bold;
}
@media (min-width: 768px) {
  .body-bold {
    font-size: 1rem;
    line-height: 24px;
  }
}
@media (min-width: 1200px) {
  .body-bold {
    font-size: 1.25rem;
    line-height: 30px;
  }
}

.body-medium-regular {
  font-family: var(--Nunito);
  font-size: 1rem;
  line-height: 24px;
  font-weight: 400;
}

.body-medium-bold {
  font-family: var(--Nunito);
  font-size: 1rem;
  line-height: 24px;
  font-weight: bold;
}

.body-regular {
  font-family: var(--Nunito);
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 400;
}
@media (min-width: 768px) {
  .body-regular {
    font-size: 1rem;
    line-height: 24px;
  }
}

.label {
  font-family: var(--Nunito);
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 600;
}
@media (min-width: 1200px) {
  .label {
    font-size: 1rem;
    line-height: 24px;
    font-weight: bold;
  }
}

.caption {
  font-family: var(--Nunito);
  font-size: 0.85rem;
  line-height: 16px;
  font-weight: 500;
}

.chiffre {
  font-family: var(--Space-mono);
  font-size: 1.25rem;
  line-height: 30px;
  font-weight: bold;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
*, ::before, ::after {
  box-sizing: border-box;
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-size: 16px;
  background: var(--background-dark);
}

button {
  border: none;
}

h2 {
  margin: 0;
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
}
@media (min-width: 992px) {
  h2 {
    font-family: var(--Degular);
    font-size: 3.563rem;
    font-weight: bold;
    line-height: 64px;
  }
}

h3 {
  margin: 0;
  font-family: var(--Degular);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 28px;
}
@media (min-width: 992px) {
  h3 {
    font-family: var(--Degular);
    font-size: 2.25rem;
    font-weight: bold;
    line-height: 40px;
  }
}

.d-block {
  display: block;
}

.d-inBlock {
  display: inline-block;
}

@media (min-width: 992px) {
  .d-mobile {
    display: none;
  }
}

.d-pc {
  display: none;
}
@media (min-width: 992px) {
  .d-pc {
    display: block;
  }
}

.opacity-0 {
  opacity: 0;
}

.letter-space-neg-1 {
  letter-spacing: -1px;
}

/*  Chips  */
.chips {
  display: inline-block;
  border-radius: 77px;
  background-color: var(--background-dark);
  color: var(--label-primary-ondark);
  border: 1px solid var(--label-primary-ondark) !important;
  padding: 6px 24px;
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
  cursor: pointer;
}
.chips:active {
  background-color: var(--background-light);
  color: var(--label-primary-onlight);
}
.chips:hover {
  background-color: var(--background-dark-secondary);
}
.chips--inactive {
  background: none;
  border: 1px solid var(--background-light);
  padding: 5px 24px;
  color: var(--label-primary-ondark);
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}

/* Bouton en long avec fleche */
.btn {
  --size: 0px;
  --animationDuration: 0.3s;
  display: inline-flex;
  border-radius: 100px;
  padding: 11px 56px 11px 32px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 0;
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease;
  text-decoration: none;
}
.btn:hover {
  box-shadow: var(--shadow-btn-hover);
}
.btn::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: width, height, var(--animationDuration) ease-in-out;
}
.btn:hover::before {
  width: var(--size);
  height: var(--size);
}
.btn.btn-bg-light {
  background-color: var(--background-dark);
  color: var(--label-primary-ondark);
}
.btn.btn-bg-light::before {
  background-color: var(--bg-opacity-light);
}
.btn.btn-bg-light::after {
  content: url(../img/arrow-right-white.svg);
}
.btn.btn-darktowhite {
  background-color: var(--background-dark);
  color: var(--label-primary-ondark);
  transition: color 0.3s ease-in-out;
}
.btn.btn-darktowhite:hover {
  color: var(--label-primary-onlight);
}
.btn.btn-darktowhite:hover::after {
  content: url(../img/arrow-right.svg);
}
.btn.btn-darktowhite::before {
  background-color: var(--background-light);
  color: var(--label-primary-onlight);
}
.btn.btn-darktowhite::after {
  content: url(../img/arrow-right-white.svg);
}
.btn.btn-bg-dark-white {
  background-color: var(--background-light);
  color: var(--label-primary-onlight);
}
.btn.btn-bg-dark-white::before {
  background-color: var(--background-light-secondary);
}
.btn.btn-bg-dark-white::after {
  content: url(../img/arrow-right.svg);
}
.btn.btn-bg-dark-accent {
  background-color: var(--background-accent);
  color: var(--label-primary-onlight);
}
.btn.btn-bg-dark-accent::before {
  background-color: var(--bg-opacity-accent);
}
.btn.btn-disabled {
  background-color: var(--background-disabled);
  color: var(--label-secondary);
  opacity: 0.5;
}
.btn.btn-disabled:hover {
  box-shadow: none;
}
.btn.btn-disabled::after {
  content: url(../img/arrow-right-grey.svg);
}
.btn.btn-hover-active::before {
  background-color: rgba(245, 245, 245, 0.0901960784);
}
.btn.btn-hover-active:hover {
  color: var(--label-primary-onlight) !important;
  background-color: var(--background-accent) !important;
}

.btn-arrow::after {
  content: url(../img/arrow-right.svg);
  position: absolute;
  top: 12px;
  right: 33px;
  width: 14px;
  height: 9px;
}

/* Bouton rond */
.circle-btn {
  padding: 0;
  width: 48px;
  height: 48px;
  line-height: inherit;
  /* Differentes classes des bouttons ronds */
}
.circle-btn::after {
  content: url("../img/chevron-right.svg");
  padding: 15px 20px;
  top: 0;
  right: 0;
  width: 14px;
  height: 8px;
}
.circle-btn.circle-btn-onlight {
  background-color: var(--background-light);
}
.circle-btn.circle-btn-onlight::before {
  background-color: var(--background-light-secondary);
}
.circle-btn.circle-btn-accent {
  background-color: transparent;
}
.circle-btn.circle-btn-accent::before {
  background-color: var(--background-accent);
}
.circle-btn.circle-btn-ondark {
  transition: background-color 0.3 ease-in-out;
}
.circle-btn.circle-btn-ondark::after {
  content: url("../img/chevron-right-white.svg");
}
.circle-btn.circle-btn-ondark::before {
  background-color: var(--bg-opacity-accent);
}
.circle-btn.circle-btn-disabled-onlight {
  background-color: var(--background-disabled);
  opacity: 0.5;
}
.circle-btn.circle-btn-disabled-onlight:hover {
  box-shadow: none;
}
.circle-btn.circle-btn-disabled-onlight::after {
  content: url("../img/chevron-right-grey.svg");
}
.circle-btn.circle-btn-disabled-ondark {
  border: 1px solid var(--background-disabled);
  opacity: 0.5;
}
.circle-btn.circle-btn-disabled-ondark:hover {
  box-shadow: none;
}
.circle-btn.circle-btn-disabled-ondark::after {
  content: url("../img/chevron-right-grey.svg");
}

/* Bouton flottant type burger au scroll */
.floatting-btn {
  display: inline-block;
  width: 56px;
  height: 56px;
  background-color: var(--background-light);
  box-shadow: var(--shadow-elevation1);
}
.floatting-btn::after {
  content: url("../img/burger.svg");
  position: absolute;
  top: 18px;
  left: 18px;
  width: 20px;
  height: 14px;
}
.floatting-btn::before {
  background-color: var(--background-light-secondary);
}
.floatting-btn:hover {
  box-shadow: var(--shadow-elevation1);
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--background-dark);
}

/* Bouton burger du menu header */
.floatingMenuBtn {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 2rem 0;
  z-index: 4;
  pointer-events: none;
}
.floatingMenuBtn .burger-fade {
  padding: 0;
  border: none;
  pointer-events: all;
}

header {
  --texts-color: var(--label-secondary);
  --texts-color-active: var(--label-primary-onlight);
  --button-background: var(--background-dark);
  --button-text: var(--label-primary-ondark);
  visibility: hidden;
}
@media (min-width: 992px) {
  header {
    margin-top: 41px;
  }
}
header.light {
  --texts-color-active: var(--label-primary-ondark);
  --button-background: var(--background-light);
  --button-text: var(--label-primary-onlight);
}
header .content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem;
}
@media (min-width: 992px) {
  header .content-header {
    padding: 0 4rem;
  }
}
header .content-header .logo-header {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 57px;
}
@media (min-width: 992px) {
  header .content-header .logo-header {
    max-width: 197px;
    gap: 16px;
  }
}
header .content-header .logo-header svg {
  width: 100%;
  fill: var(--texts-color-active);
}
header .content-header .logo-header .baseline {
  display: none;
}
@media (min-width: 992px) {
  header .content-header .logo-header .baseline {
    display: block;
  }
}
header .content-header .burger-header {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
}
@media (min-width: 992px) {
  header .content-header .burger-header {
    display: none;
  }
}
header .content-header .burger-header span {
  height: 2px;
  width: 20px;
  border-radius: 50px;
  background: var(--texts-color-active);
}
header .content-header .menu-pc {
  display: none;
}
@media (min-width: 992px) {
  header .content-header .menu-pc {
    display: block;
  }
}
header .content-header .menu-pc ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 56px;
}
header .content-header .menu-pc ul li {
  display: flex;
  align-items: center;
}
header .content-header .menu-pc ul li .menu-link {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--texts-color);
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
  transition: color 0.2s ease;
}
header .content-header .menu-pc ul li .menu-link:hover {
  color: var(--texts-color-active);
}
header .content-header .menu-pc ul li .menu-link.active {
  color: var(--texts-color-active);
}
header .content-header .menu-pc ul li .btn {
  padding-right: 32px;
  text-decoration: none;
  background-color: var(--button-background);
  color: var(--button-text);
}
header .content-header .menu-pc ul li .btn::after {
  content: "";
}

.hero .intro-hero {
  margin: 124px 0 108px 0;
  padding: 0 1rem 0 2rem;
}
@media (min-width: 992px) {
  .hero .intro-hero {
    padding: 128px 0 100px 50px;
    margin: 0 auto;
    max-width: 1140px;
  }
}
.hero h1 {
  margin-bottom: 24px;
  font-family: var(--Degular);
  font-size: 2.875rem;
  font-weight: bold;
  line-height: 46px;
  font-size: 12vw;
  line-height: 12vw;
}
@media (min-width: 992px) {
  .hero h1 {
    font-family: var(--Degular);
    font-size: 6.25rem;
    font-weight: bold;
    line-height: 94px;
  }
}

.fond-slide-menu {
  background-color: var(--background-accent);
  width: 100%;
  min-height: 100%;
  position: fixed;
  z-index: 1998;
  top: 0;
  transform: translate(100%);
  transition: transform 0.6s cubic-bezier(0.845, 0.195, 0.155, 0.945);
  transition-delay: 1.3s;
}
@media (min-width: 992px) {
  .fond-slide-menu {
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.845, 0.195, 0.155, 0.945);
    transition-delay: 0.5s;
  }
}
.fond-slide-menu.active {
  opacity: 1;
  transform: translate(0);
  transition-delay: 0s;
}

.slide-menu {
  background: url("../img/Logo_background.svg") center;
  background-size: cover;
  background-color: var(--background-dark);
  position: fixed;
  width: 100%;
  min-height: 100%;
  top: 0;
  z-index: 1999;
  transform: translate(100%);
  transition: transform 0.8s cubic-bezier(0.845, 0.195, 0.155, 0.945);
  transition-delay: 0.5s;
}
@media (min-width: 992px) {
  .slide-menu {
    transform: translateY(-100%);
    transition: transform 1s cubic-bezier(0.845, 0.195, 0.155, 0.945);
    transition-delay: 0s;
  }
}
.slide-menu .content-menu {
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .slide-menu .content-menu {
    align-items: flex-start;
    padding: 0 5rem;
    height: 85vh;
  }
}
.slide-menu .content-menu .left-menu {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 32px;
  text-align: center;
}
@media (min-width: 992px) {
  .slide-menu .content-menu .left-menu {
    flex: 1;
    width: 100%;
    text-align: center;
  }
}
.slide-menu .content-menu .left-menu .link-menu {
  text-decoration: none;
  color: var(--label-secondary);
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
  transform: translateY(-16px);
  opacity: 0;
  transition: transform 0.9s 1.5s ease, opacity 0.5s 1.5s ease, color 0.3s 0s ease;
}
.slide-menu .content-menu .left-menu .link-menu:hover {
  color: var(--label-primary-ondark);
}
.slide-menu .content-menu .left-menu .link-menu.active {
  color: var(--label-primary-ondark);
}
@media (min-width: 992px) {
  .slide-menu .content-menu .left-menu .link-menu {
    font-family: var(--Degular);
    font-size: 3.563rem;
    font-weight: bold;
    line-height: 64px;
  }
}
.slide-menu .content-menu .floatting-btn {
  text-decoration: none;
  margin: 48px 0 132px 0;
  padding: 0;
  border: none;
  line-height: 1;
}
@media (min-width: 992px) {
  .slide-menu .content-menu .floatting-btn {
    margin: 3rem 0 5rem 0;
    align-self: center;
  }
}
.slide-menu .content-menu .floatting-btn::after {
  content: url(../img/croix.svg);
  top: 22px;
}
.slide-menu.active {
  opacity: 1;
  transform: translate(0);
  transition-delay: 0.5s;
}
.slide-menu.active .content-menu .left-menu .link-menu {
  transform: translateY(0);
  opacity: 1;
}
.slide-menu .bg-side {
  position: absolute;
}
.slide-menu .bg-side svg {
  width: 100vw;
}
.slide-menu .bg-side svg path {
  width: 100vw;
  fill: var(--background-light);
  opacity: 0.02;
}

footer {
  background-color: var(--background-dark);
  color: var(--label-primary-ondark);
  border-top: 1px solid var(--background-dark-secondary);
  padding: 24px 51px 24px 51px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (min-width: 992px) {
  footer {
    padding: 40px 112px 40px 112px;
    flex-direction: row;
  }
}
footer span {
  font-family: var(--Nunito);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 16px;
}
footer .ico-social {
  display: flex;
  gap: 22px;
}
footer .ico-social a:hover path {
  fill: grey;
}

/*  Section Hero Home  */
.hero {
  /*  Partie centrale animé avec photos et video  */
}
.hero .intro {
  max-width: 590px;
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.hero .intro span {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}
@media (min-width: 992px) {
  .hero .intro {
    font-family: var(--Nunito);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 30px;
  }
  .hero .intro span {
    font-family: var(--Nunito);
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 30px;
  }
}
.hero h1 {
  letter-spacing: -1px;
}
.hero h1 .line {
  overflow: hidden;
}
.hero h1 .line div {
  display: inline-block;
  visibility: hidden;
  padding-bottom: 12px;
}
.hero .hero-content.d-pc .diaporama {
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.hero .hero-content.d-pc .diaporama .diaporama-container {
  --spacer: 2rem;
  position: absolute;
  width: 100%;
  height: 100%;
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column {
  position: absolute;
  bottom: 0;
  height: auto;
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--1 {
  width: 17.5vw;
  height: auto;
  left: -10vw;
  transform: translate(0, calc(-50vh + 16vw));
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--2 {
  width: 17.5vw;
  height: auto;
  left: 10vw;
  transform: translate(0, calc(-50vh + 22vw));
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--3 {
  width: 40vw;
  height: 100%;
  left: 50%;
  transform: translate(-50%, -10vw);
  z-index: -1;
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--3 .bloc-video {
  will-change: scroll-position, clip-path, transform;
  position: relative;
  width: 100vw;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 10vw);
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--3 .bloc-video img, .hero .hero-content.d-pc .diaporama .diaporama-container .column.column--3 .bloc-video video {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-clip-path: polygon(30vw 15vw, 70vw 15vw, 70vw calc(100vh - 15vw), 30vw calc(100vh - 15vw));
          clip-path: polygon(30vw 15vw, 70vw 15vw, 70vw calc(100vh - 15vw), 30vw calc(100vh - 15vw));
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--3 .bloc-video .texts-background {
  position: relative;
  height: 100%;
  background: #000;
  opacity: 0.7;
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--3 .bloc-video .video-text {
  position: absolute;
  text-align: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 860px;
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--3 .bloc-video .video-text h2 {
  font-family: var(--Degular);
  font-size: 3.563rem;
  font-weight: bold;
  line-height: 64px;
  margin-bottom: 1rem;
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--3 .bloc-video .video-text p {
  font-family: var(--Nunito);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 30px;
  max-width: 80%;
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--4 {
  width: 17.5vw;
  height: auto;
  right: 10vw;
  transform: translate(0, calc(-50vh + 22vw));
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column.column--5 {
  width: 17.5vw;
  height: auto;
  right: -10vw;
  transform: translate(0, calc(-50vh + 22vw));
}
.hero .hero-content.d-pc .diaporama .diaporama-container .column img {
  width: 100%;
  margin-bottom: var(--spacer);
}
.hero .hero-content.d-mobile .diaporama {
  overflow: hidden;
}
.hero .hero-content.d-mobile .diaporama .diapo-img {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 200%;
  gap: 16px;
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .hero .hero-content.d-mobile .diaporama .diapo-img {
    width: 300%;
    margin-left: -100%;
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
    justify-content: center;
    align-items: flex-end;
  }
  .hero .hero-content.d-mobile .diaporama .diapo-img > * {
    width: 10%;
  }
  .hero .hero-content.d-mobile .diaporama .diapo-img .bloc-video {
    width: calc(20% + 2rem);
    height: auto;
  }
}
.hero .hero-content.d-mobile .diaporama .diapo-img.ligne-img1 {
  transform: translateX(-100px);
}
@media (min-width: 992px) {
  .hero .hero-content.d-mobile .diaporama .diapo-img.ligne-img1 {
    transform: translateX(0px);
  }
}
.hero .hero-content.d-mobile .diaporama .diapo-img.ligne-img1 img {
  width: 100%;
}
.hero .hero-content.d-mobile .diaporama .diapo-img.ligne-img2 {
  transform: translateX(-300px);
}
@media (min-width: 992px) {
  .hero .hero-content.d-mobile .diaporama .diapo-img.ligne-img2 {
    transform: translateX(0px);
  }
}
.hero .hero-content.d-mobile .diaporama .diapo-img.ligne-img2 img {
  width: 100%;
}
.hero .hero-content.d-mobile .bloc-video {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.hero .hero-content.d-mobile .bloc-video .video-mobile {
  position: absolute;
  z-index: -1;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100dvh;
}
.hero .hero-content.d-mobile .bloc-video .texts-background {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}
.hero .hero-content.d-mobile .bloc-video .video-text {
  position: absolute;
  text-align: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
}
.hero .hero-content.d-mobile .bloc-video .video-text h2 {
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
  margin-bottom: 1rem;
}
.hero .hero-content.d-mobile .bloc-video .video-text p {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  max-width: 80%;
}

/*  Section Centre Services  */
.centre-service {
  background-color: var(--background-dark);
  color: var(--label-primary-ondark);
}
@media (min-width: 992px) {
  .centre-service {
    background: url("../img/shape-services.svg"), url("../img/shape-services.svg");
    background-repeat: no-repeat;
    background-position: right, 75%;
  }
}
.centre-service .content-service {
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 992px) {
  .centre-service .content-service {
    max-width: 1440px;
    padding: 120px 112px;
    margin: 0 auto;
    gap: 56px;
  }
}
.centre-service .content-service h2 {
  max-width: 675px;
}
.centre-service .content-service .para-service {
  max-width: 700px;
}
.centre-service .content-service .info-service {
  max-width: 90%;
  margin-bottom: 1rem;
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
@media (min-width: 992px) {
  .centre-service .content-service .info-service {
    max-width: 80%;
  }
}
.centre-service .content-service .info-service span {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}

/*  Section Prestation  */
.prestation {
  background-color: var(--background-light-secondary);
  color: var(--label-primary-onlight);
  overflow: hidden;
  /*  Liste Prestations  */
}
.prestation .prestations-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 1rem;
}
@media (min-width: 992px) {
  .prestation .prestations-container {
    padding: 128px 112px;
  }
}
.prestation .swiper {
  overflow: visible;
}
.prestation .header-presta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
@media (min-width: 992px) {
  .prestation .header-presta {
    margin-bottom: 56px;
  }
}
.prestation .header-presta .bloc-btn {
  display: none;
}
@media (min-width: 992px) {
  .prestation .header-presta .bloc-btn {
    display: block;
  }
}
.prestation .header-presta .bloc-btn .btn-prev {
  margin-right: 32px;
}
.prestation .header-presta .bloc-btn .btn-prev::after {
  content: url(../img/chevron-left.svg);
}
.prestation .header-presta .bloc-btn .swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.prestation .list-presta {
  display: grid;
  gap: 16px;
}
@media (min-width: 992px) {
  .prestation .list-presta {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    width: 180%;
  }
}
.prestation .list-presta .bloc-presta {
  background-color: var(--background-light);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* transition: box-shadow 0.6s ease; */
  cursor: grab;
  /*  Anim des blocs Prestations ouverture  */
}
@media (min-width: 992px) {
  .prestation .list-presta .bloc-presta {
    width: 384px;
  }
  /* .prestation .list-presta .bloc-presta:hover {
    box-shadow: var(--shadow-card-hover);
  } */
}
.prestation .list-presta .bloc-presta.active .content-presta {
  padding: 9px 16px 16px 16px;
}
.prestation .list-presta .bloc-presta .content-presta {
  padding: 16px;
  transition: padding 0.3s ease 0.4s;
}
@media (min-width: 992px) {
  .prestation .list-presta .bloc-presta .content-presta {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 32px 24px 24px;
  }
}
.prestation .list-presta .bloc-presta .content-presta .header-bloc-presta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.prestation .list-presta .bloc-presta .content-presta .header-bloc-presta .title-presta {
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (min-width: 992px) {
  .prestation .list-presta .bloc-presta .content-presta .header-bloc-presta .title-presta {
    margin-bottom: 1rem;
  }
}
.prestation .list-presta .bloc-presta .content-presta .header-bloc-presta .picto-presta {
  width: 46px;
  height: 46px;
}
@media (min-width: 992px) {
  .prestation .list-presta .bloc-presta .content-presta .header-bloc-presta .picto-presta {
    display: none;
  }
}
.prestation .list-presta .bloc-presta .content-presta .header-bloc-presta .chevron {
  transform: rotate(90deg);
  margin-right: 5px;
}
@media (min-width: 992px) {
  .prestation .list-presta .bloc-presta .content-presta .header-bloc-presta .chevron {
    display: none;
  }
}
.prestation .list-presta .bloc-presta .content-presta .explain-presta {
  display: block;
  overflow: hidden;
  opacity: 0;
}
@media (min-width: 992px) {
  .prestation .list-presta .bloc-presta .content-presta .explain-presta {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    opacity: 1;
  }
}
.prestation .list-presta .bloc-presta .content-presta .explain-presta p {
  padding-right: 1.2rem;
  font-family: var(--Nunito);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
}
@media (min-width: 992px) {
  .prestation .list-presta .bloc-presta .content-presta .explain-presta p {
    padding-right: 1rem;
    font-family: var(--Nunito);
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
  }
}
.prestation .list-presta .bloc-presta .content-presta .explain-presta .keypoints {
  display: block;
  margin-top: 1rem;
  font-family: var(--Nunito);
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 20px;
}
@media (min-width: 992px) {
  .prestation .list-presta .bloc-presta .content-presta .explain-presta .keypoints {
    font-family: var(--Nunito);
    font-size: 1rem;
    font-weight: bold;
    line-height: 24px;
  }
}
@media (max-width: 992px) {
  .prestation .list-presta .bloc-presta .image-presta {
    height: 0;
  }
  .prestation .list-presta .bloc-presta .image-presta .visu-presta {
    transform: translateY(-200px);
    z-index: 1;
  }
  .prestation .list-presta .bloc-presta .explain-presta {
    z-index: 0;
    height: 0px;
  }
}

/*  Section Metier  */
.metier {
  background-color: var(--background-light);
}
.metier .content-metier {
  margin: 0 auto;
  max-width: 1440px;
  padding: 40px 0;
}
@media (min-width: 992px) {
  .metier .content-metier {
    padding: 128px 112px;
  }
}
.metier .content-metier h2 {
  padding: 0 16px;
  margin-bottom: 32px;
}
@media (min-width: 992px) {
  .metier .content-metier h2 {
    padding: 0 32px 0 16px;
    padding: 0;
    margin-bottom: 80px;
  }
}
.metier .content-metier h2 .line {
  overflow: hidden;
}
.metier .bloc-metier {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 992px) {
  .metier .bloc-metier {
    gap: 36px;
    flex-direction: row;
    padding: 0;
  }
}
.metier .bloc-metier .info-metier {
  padding: 0 48px 0 16px;
}
.metier .bloc-metier .info-metier h3 {
  margin-bottom: 4px;
}
@media (min-width: 992px) {
  .metier .bloc-metier .info-metier {
    padding: 0;
    max-width: 384px;
  }
  .metier .bloc-metier .info-metier h3 {
    margin-bottom: 24px;
  }
}
.metier .bloc-metier .info-metier .text-metier {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.metier .bloc-metier .info-metier .text-metier span {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}
.metier .bloc-metier .info-metier .text-metier:first-of-type {
  margin: 0 0 24px 0;
}
.metier .bloc-metier.bloc-media {
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .metier .bloc-metier.bloc-media {
    margin-bottom: 120px;
  }
  .metier .bloc-metier.bloc-media .img-media {
    max-width: 592px;
  }
}
.metier .bloc-metier.bloc-luxe {
  flex-direction: column-reverse;
}
@media (min-width: 992px) {
  .metier .bloc-metier.bloc-luxe {
    flex-direction: row;
    justify-content: flex-end;
  }
  .metier .bloc-metier.bloc-luxe .info-metier {
    text-align: right;
  }
  .metier .bloc-metier.bloc-luxe .img-luxe {
    max-width: 488px;
  }
}
.metier .bloc-autre-metier {
  padding: 40px 48px 0 16px;
}
.metier .bloc-autre-metier h3 {
  margin-bottom: 4px;
}
@media (min-width: 992px) {
  .metier .bloc-autre-metier {
    padding: 0;
    text-align: center;
    margin: 130px auto 0 auto;
    max-width: 488px;
  }
  .metier .bloc-autre-metier h3 {
    margin-bottom: 24px;
  }
}
.metier .bloc-autre-metier .text-metier {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.metier .bloc-autre-metier .text-metier span {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}

/*  Section clients avec defilempent des marques  */
.clients {
  background: var(--background-dark);
  color: var(--label-primary-ondark);
  padding: 40px 0 64px 0;
}
@media (min-width: 992px) {
  .clients {
    padding: 124px 0 140px 0;
  }
}
.clients h2 {
  padding: 0 16px 56px 16px;
}
@media (min-width: 992px) {
  .clients h2 {
    padding: 0 0 80px 112px;
  }
}
.clients .liste-clients {
  position: relative;
  overflow: hidden;
}
.clients .liste-clients::before, .clients .liste-clients::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  height: 100%;
  width: 30%;
}
.clients .liste-clients::before {
  left: 0;
  background: linear-gradient(to right, var(--background-dark), transparent);
}
.clients .liste-clients::after {
  right: 0;
  background: linear-gradient(to left, var(--background-dark), transparent);
}
.clients .liste-clients .liste-clients-container {
  --gap:56px;
  --duration:60s;
  display: flex;
  gap: var(--gap);
  height: 35px;
}
@media (min-width: 768px) {
  .clients .liste-clients .liste-clients-container {
    --gap: 96px;
    --duration:65s;
  }
}
@media (min-width: 992px) {
  .clients .liste-clients .liste-clients-container {
    height: 65px;
    --gap: 128px;
    --duration:90s;
  }
}
@media (min-width: 1200px) {
  .clients .liste-clients .liste-clients-container {
    --gap: 128px;
    --duration:100s;
  }
}
.clients .liste-clients .liste-clients-container .logo-list {
  display: flex;
  gap: var(--gap);
  animation: scrollLeft var(--duration) linear infinite;
}
.clients .liste-clients .liste-clients-container .logo-list .logo {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 992px) {
  .clients .liste-clients .liste-clients-container .logo-list .logo {
    width: 160px;
  }
}
@keyframes scrollLeft {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(-100% - var(--gap)), 0);
  }
}

/*  Partie video avec anim texte */
.body-agence {
  background-color: var(--background-light);
}

.hero-agence .intro-hero {
  margin-top: 75px;
  margin-bottom: 80px;
}
.hero-agence .intro-hero .content-titre-hero {
  overflow: hidden;
  padding: 1rem 0;
}
.hero-agence h1 .line {
  display: inline;
}
@media (min-width: 992px) {
  .hero-agence h1 .line {
    display: initial;
  }
}
.hero-agence h1 .line div {
  display: inline;
}
@media (min-width: 992px) {
  .hero-agence h1 .line div {
    display: inline-block;
  }
}
@media (min-width: 992px) {
  .hero-agence .intro-hero {
    padding: 140px 0 120px 50px;
  }
}

.bloc-video-agence {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.bloc-video-agence img, .bloc-video-agence video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.bloc-video-agence .video-mobile {
  position: absolute;
  z-index: -1;
}
.bloc-video-agence .texts-background {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}
.bloc-video-agence .info-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
}
.bloc-video-agence .info-video .titre-video {
  color: var(--label-primary-ondark);
  font-family: var(--Degular);
  font-size: 2.875rem;
  font-weight: bold;
  line-height: 46px;
  text-align: center;
  margin-bottom: 32px;
}
@media (min-width: 992px) {
  .bloc-video-agence .info-video .titre-video {
    font-family: var(--Degular);
    font-size: 6.25rem;
    font-weight: bold;
    line-height: 94px;
    margin-bottom: 48px;
  }
}
.bloc-video-agence .info-video .texte-video .content-para {
  overflow: hidden;
  padding-top: 10px;
}
.bloc-video-agence .info-video .texte-video p {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}
@media (min-width: 992px) {
  .bloc-video-agence .info-video .texte-video p {
    font-family: var(--Nunito);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 30px;
    max-width: 800px;
    margin: 0 auto;
  }
}
.bloc-video-agence .info-video .texte-video p.first-para {
  margin-bottom: 16px;
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
}
@media (min-width: 992px) {
  .bloc-video-agence .info-video .texte-video p.first-para {
    font-family: var(--Degular);
    font-size: 3.563rem;
    font-weight: bold;
    line-height: 64px;
    margin-bottom: 24px;
  }
}
.bloc-video-agence .info-video .texte-video p.second-para {
  margin-bottom: 24px;
}

/*  Partie nos valeurs  */
.valeurs {
  background-color: var(--background-dark);
  color: var(--label-primary-ondark);
}
@media (min-width: 992px) {
  .valeurs {
    height: 120vh;
    min-height: 1055px;
  }
}
@media screen and (min-width: 1920px) {
  .valeurs {
    height: 100vh;
  }
}
.valeurs .bloc-content {
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .valeurs .bloc-content {
    padding: 128px 112px;
  }
}
.valeurs h2 {
  padding: 56px 0 56px 16px;
}
@media (min-width: 992px) {
  .valeurs h2 {
    padding: 0;
    max-width: 280px;
    font-family: var(--Degular);
    font-size: 6.25rem;
    font-weight: bold;
    line-height: 94px;
  }
}
.valeurs .content-valeurs {
  display: grid;
  position: relative;
  /*  Liste des blocs valeurs  */
  /*  pictos slider mobile bas de page  */
}
@media (min-width: 992px) {
  .valeurs .content-valeurs {
    grid-template-columns: 1fr 1fr;
  }
}
.valeurs .content-valeurs .pictos-valeurs {
  display: none;
  position: relative;
  overflow: hidden;
}
.valeurs .content-valeurs .pictos-valeurs .lottie {
  position: absolute;
  left: 40%;
  top: 30vh;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.valeurs .content-valeurs .pictos-valeurs .lottie.active {
  opacity: 1;
}
@media (min-width: 992px) {
  .valeurs .content-valeurs .pictos-valeurs {
    display: block;
  }
}
.valeurs .content-valeurs .liste-valeurs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 50px;
  gap: 0;
}
@media (min-width: 992px) {
  .valeurs .content-valeurs .liste-valeurs {
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    margin-bottom: 0;
    padding-left: 0;
  }
}
.valeurs .content-valeurs .liste-valeurs .bloc-valeur {
  cursor: pointer;
  justify-content: center;
  width: 100vw;
  margin-bottom: 36px;
  padding: 0 50px;
  display: grid;
}
@media (min-width: 992px) {
  .valeurs .content-valeurs .liste-valeurs .bloc-valeur {
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 0;
    padding: 0;
  }
}
@media (min-width: 992px) {
  .valeurs .content-valeurs .liste-valeurs .bloc-valeur .picto-mobile {
    display: none;
  }
}
.valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur {
  text-align: left;
  position: relative;
}
@media (min-width: 992px) {
  .valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur {
    padding: 0;
    overflow: hidden;
  }
}
.valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur .titre-valeur {
  display: flex;
  gap: 8px;
  flex-direction: column;
  margin-bottom: 16px;
  background-color: var(--background-dark);
  z-index: 1;
}
@media (min-width: 992px) {
  .valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur .titre-valeur {
    flex-direction: row;
    gap: 32px;
    align-items: center;
    opacity: 0.3;
    transition: opacity 0.3s ease-in-out;
  }
  .valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur .titre-valeur:hover, .valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur .titre-valeur.active {
    opacity: 1;
  }
}
.valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur .titre-valeur .num-valeur {
  font-family: var(--Space-mono);
  font-size: 1.25rem;
  font-weight: bold;
}
@media (min-width: 992px) {
  .valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur .titre-valeur .num-valeur {
    padding-top: 7px;
  }
}
.valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur .titre-valeur h3 {
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
}
.valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur .text-valeur {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  max-width: 330px;
}
@media (min-width: 992px) {
  .valeurs .content-valeurs .liste-valeurs .bloc-valeur .infos-valeur .text-valeur {
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    height: 0px;
    transform: translateY(50px);
    margin-left: 55px;
  }
}
.valeurs .content-valeurs .liste-valeurs .separator {
  content: "";
  height: 1px;
  width: 488px;
  background-color: var(--separator-ondark);
  display: none;
}
@media (min-width: 992px) {
  .valeurs .content-valeurs .liste-valeurs .separator {
    display: block;
  }
}
.valeurs .content-valeurs .slide-carrousel {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
@media (min-width: 992px) {
  .valeurs .content-valeurs .slide-carrousel {
    display: none;
  }
}
.valeurs .content-valeurs .slide-carrousel .picto-slide {
  content: "";
  width: 15px;
  height: 4px;
  border-radius: 50px;
  background-color: var(--label-primary-ondark);
  opacity: 0.2;
  transition: opacity 0.2 ease-in-out;
}
.valeurs .content-valeurs .slide-carrousel .picto-slide.active {
  opacity: 1;
}
.valeurs .content-valeurs .swiper-pagination .swiper-pagination-bullet {
  content: "";
  width: 15px;
  height: 4px;
  border-radius: 50px;
  background-color: var(--label-primary-ondark);
  opacity: 0.2;
  transition: opacity 0.2s ease-in-out;
}
.valeurs .content-valeurs .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

/*  Partie des engagements  */
.engagement {
  background-color: var(--background-light-secondary);
  overflow: hidden;
  /*  Anim conversation mobile Engagement  */
  /*  Disposition grid des blos engagement PC  */
}
.engagement .content-engagement {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 1rem;
}
@media (min-width: 992px) {
  .engagement .content-engagement {
    padding: 128px 112px;
  }
}
.engagement .header-engagement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
@media (min-width: 992px) {
  .engagement .header-engagement {
    margin-bottom: 56px;
  }
}
.engagement .header-engagement .titre-engagement h3 {
  color: var(--label-secondary);
  font-family: var(--Degular);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 28px;
}
@media (min-width: 992px) {
  .engagement .header-engagement .titre-engagement h3 {
    font-family: var(--Degular);
    font-size: 2.25rem;
    font-weight: bold;
    line-height: 40px;
  }
}
.engagement .header-engagement .bloc-btn {
  display: none;
}
@media screen and (min-width: 768px) and (max-width: 1920px) {
  .engagement .header-engagement .bloc-btn {
    display: block;
  }
}
.engagement .header-engagement .bloc-btn .btn-prev {
  margin-right: 32px;
}
.engagement .header-engagement .bloc-btn .btn-prev::after {
  content: url(../img/chevron-left.svg);
}
.engagement .bloc-engagement-mobile {
  height: 80vh;
  border-radius: 16px;
  background-color: var(--background-light);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
@media (min-width: 992px) {
  .engagement .bloc-engagement-mobile {
    display: none;
  }
}
.engagement .bloc-engagement-mobile .bulle-msg {
  border-radius: 16px 16px 0px 16px;
  color: var(--label-primary-onlight);
  background-color: var(--background-light-secondary);
  margin-right: 32px;
  margin-bottom: 1rem;
  transform-origin: right bottom;
}
.engagement .bloc-engagement-mobile .waiting-msg {
  padding: 20px 27px;
  display: flex;
  gap: 6px;
  flex-direction: row;
  position: absolute;
  bottom: 39px;
  right: 35px;
  margin-right: 0;
}
.engagement .bloc-engagement-mobile .waiting-msg .point {
  width: 6px;
  height: 6px;
  border-radius: 20px;
  background-color: var(--background-dark);
}
.engagement .bloc-engagement-mobile .convers-parts {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
.engagement .bloc-engagement-mobile .img-bilan {
  position: absolute;
  z-index: 9;
  bottom: 0;
  right: 0;
  opacity: 0;
}
.engagement .bloc-engagement-mobile .img-earth, .engagement .bloc-engagement-mobile .img-demain {
  position: absolute;
  bottom: 0;
  z-index: 9;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
}
.engagement .bloc-engagement-mobile .second-part {
  position: relative;
}
.engagement .bloc-engagement-mobile .img-terre {
  max-width: 215px;
  margin: 0 auto;
  padding-bottom: 74px;
}


/* .engagement .bloc-engagement-mobile .img-ecocode {
  position: absolute;
  bottom: 0;
  z-index: 9;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
} */
.engagement .bloc-engagement-mobile .img-ecocode {
  max-width: 215px;
  margin: 0 auto;
  padding-bottom: 37px;
}


.engagement .bloc-engagement-mobile .today {
  font-family: var(--Degular);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 28px;
  padding: 9px 16px;
}
.engagement .bloc-engagement-mobile .para-engage {
  padding: 16px 16px 24px 16px;
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  max-width: 270px;
}
.engagement .bloc-engagement-mobile .para-engage span {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}
.engagement .bloc-engagement-mobile .img-bilan {
  max-width: 80%;
}
.engagement .bloc-engagement-pc {
  display: none;
  grid-template-columns: 280px 488px 344px 720px;
  grid-template-rows: 260px 300px;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}
@media (min-width: 992px) {
  .engagement .bloc-engagement-pc {
    display: grid;
  }
}
.engagement .bloc-engagement-pc > div {
  background-color: var(--background-light);
  border-radius: 16px;
  /* transition: box-shadow 0.3s ease-in-out; */
}
/* .engagement .bloc-engagement-pc > div:hover {
  box-shadow: var(--shadow-card-hover);
} */
.engagement .bloc-engagement-pc p {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.engagement .bloc-engagement-pc p span {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}
.engagement .bloc-engagement-pc .bloc-today {
  grid-row-end: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 32px 47px 32px;
}
.engagement .bloc-engagement-pc .bloc-today img {
  max-width: 178px;
  margin: 0 auto;
}
.engagement .bloc-engagement-pc .bloc-today h4 {
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
  padding: 45px 0 20px 0;
}
.engagement .bloc-engagement-pc .bloc-rechauffement {
  grid-column-start: 2;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 67px;
  padding: 32px;
  align-items: center;
}
.engagement .bloc-engagement-pc .bloc-rechauffement img {
  max-width: 80px;
}
.engagement .bloc-engagement-pc .bloc-diversite {
  grid-column-start: 2;
  grid-row-start: 2;
  position: relative;
  overflow: hidden;
  padding: 32px;
}
.engagement .bloc-engagement-pc .bloc-diversite p {
  max-width: 290px;
  margin-bottom: 32px;
}
.engagement .bloc-engagement-pc .bloc-diversite .sous-para {
  color: var(--label-secondary);
}
.engagement .bloc-engagement-pc .bloc-diversite img {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 181px;
}



.engagement .bloc-engagement-pc .bloc-ecocode {
  grid-column-start: 4;
  display: grid;
  grid-template-columns: 5fr 1fr;
  gap: 16px;
  padding: 32px;
  align-items: center;
}
.engagement .bloc-engagement-pc .bloc-ecocode h4 {
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
  padding-bottom: 20px;
}
.engagement .bloc-engagement-pc .bloc-ecocode img {
  max-width: 120px;
}
.engagement .bloc-engagement-pc .bloc-tomorrow-2 {
  grid-column-start: 4;
  grid-row-start: 2;
  display: grid;
  grid-template-columns: 3fr 1fr;
  position: relative;
  overflow: hidden;
  padding: 32px;
}
.engagement .bloc-engagement-pc .bloc-tomorrow-2 h4 {
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
  padding-bottom: 20px;
}
.engagement .bloc-engagement-pc .bloc-tomorrow-2 p {
  margin-bottom: 32px;
}
.engagement .bloc-engagement-pc .bloc-tomorrow-2 .sous-para {
  color: var(--label-secondary);
}
.engagement .bloc-engagement-pc .bloc-tomorrow-2 img {
  position: absolute;
  bottom: 0;
  right: 24px;
  max-width: 181px;
}




.engagement .bloc-engagement-pc .bloc-dilemme {
  grid-row-end: span 2;
  background: var(--background-dark);
  color: var(--label-primary-ondark);
  padding: 32px;
  overflow: hidden;
  position: relative;
}
.engagement .bloc-engagement-pc .bloc-dilemme p {
  margin-bottom: 32px;
}
.engagement .bloc-engagement-pc .bloc-dilemme img {
  width: 260px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.engagement .bloc-engagement-pc .bloc-tomorrow {
  grid-row-end: span 2;
  padding: 32px;
  overflow: hidden;
  position: relative;
}
.engagement .bloc-engagement-pc .bloc-tomorrow h4 {
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
  margin-bottom: 24px;
}
.engagement .bloc-engagement-pc .bloc-tomorrow p {
  margin-bottom: 32px;
}
.engagement .bloc-engagement-pc .bloc-tomorrow img {
  width: 176px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/*  Partie Equipe */
.content-photo-team {
  overflow: hidden;
}

.photo-team {
  width: 100%;
  animation: zoom 8s alternate infinite;
}

.equipe {
  background-color: var(--background-dark);
  color: var(--label-primary-ondark);
}
.equipe h2 {
  padding: 0 0 40px 16px;
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .equipe h2 {
    padding: 0 0 96px 0;
  }
}
.equipe h3 {
  font-family: var(--Degular);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 28px;
  margin-bottom: 4px;
}
.equipe .pres-equipe {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--label-secondary);
}
.equipe .big-para {
  max-width: 80%;
}
.equipe .content-equipe {
  display: grid;
  gap: 42px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 0;
  /*  Disposition gauche droite equipe  */
}
@media (min-width: 992px) {
  .equipe .content-equipe {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    padding: 128px 112px;
  }
}
@media (min-width: 992px) {
  .equipe .content-equipe .lead {
    position: sticky;
    top: 2rem;
  }
}
.equipe .content-equipe .lead .desc-lead {
  margin-left: 16px;
}
@media (min-width: 992px) {
  .equipe .content-equipe .lead .desc-lead {
    margin-left: 0;
  }
}
.equipe .content-equipe .lead img {
  margin-bottom: 16px;
}
.equipe .content-equipe .team {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
@media (min-width: 992px) {
  .equipe .content-equipe .team {
    margin-top: 160px;
  }
}
@media screen and (min-width: 968px) and (max-width: 1400px) {
  .equipe .content-equipe .team > div {
    flex-wrap: wrap;
  }
  .equipe .content-equipe .team > div > div {
    margin-top: 16px;
  }
}
.equipe .content-equipe .team .team-android, .equipe .content-equipe .team .team-design {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  max-width: 70%;
}
.equipe .content-equipe .team .team-android img, .equipe .content-equipe .team .team-design img {
  margin-bottom: 16px;
}
@media (min-width: 992px) {
  .equipe .content-equipe .team .team-android, .equipe .content-equipe .team .team-design {
    flex-direction: row;
    max-width: 100%;
    padding: 0;
  }
  .equipe .content-equipe .team .team-android img, .equipe .content-equipe .team .team-design img {
    margin: 0 30px 0 0;
    max-width: 384px;
  }
}
.equipe .content-equipe .team .team-ios, .equipe .content-equipe .team .team-serveur {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-end;
  text-align: right;
  padding: 0 16px;
  max-width: 70%;
}
.equipe .content-equipe .team .team-ios img, .equipe .content-equipe .team .team-serveur img {
  margin-bottom: 16px;
}
@media (min-width: 992px) {
  .equipe .content-equipe .team .team-ios, .equipe .content-equipe .team .team-serveur {
    flex-direction: row-reverse;
    max-width: 100%;
    padding: 0;
    align-items: flex-start;
  }
  .equipe .content-equipe .team .team-ios img, .equipe .content-equipe .team .team-serveur img {
    margin: 0 0 0 30px;
    max-width: 384px;
  }
}
.equipe .content-equipe .team .team-projet .desc-projet {
  margin-left: 16px;
}
@media (min-width: 992px) {
  .equipe .content-equipe .team .team-projet .desc-projet {
    margin-left: 0;
  }
}
.equipe .content-equipe .team .team-projet img {
  margin-bottom: 16px;
}

/*  Partie trombinoscope equipe  */
.discover-team {
  background-color: var(--background-dark);
  border-top: 1px solid var(--separator-ondark);
  color: var(--label-primary-ondark);
  display: flex;
  flex-direction: column;
}
.discover-team .content-discover {
  display: flex;
  padding: 40px 16px;
  max-width: 1440px;
  margin: 0 auto;
  flex-direction: column;
}
@media (min-width: 992px) {
  .discover-team .content-discover {
    flex-direction: row;
    align-items: center;
    gap: 36px;
    padding: 128px 112px;
  }
}
.discover-team .content-discover .intro-discover h2 {
  text-align: center;
  margin-bottom: 32px;
}
.discover-team .content-discover .intro-discover h2 span {
  color: var(--label-accent);
}
@media (min-width: 992px) {
  .discover-team .content-discover .intro-discover h2 {
    text-align: left;
    font-family: var(--Degular);
    font-size: 3.563rem;
    font-weight: bold;
    line-height: 64px;
  }
}
.discover-team .content-discover .photo-discover {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.discover-team .content-discover .photo-discover img {
  width: 100%;
}
.discover-team .content-discover .photo-discover .littles-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
@media (min-width: 992px) {
  .discover-team .content-discover .photo-discover .littles-photo img {
    max-width: 200px;
  }
}
.discover-team .content-discover .photo-discover .arrow-pc {
  display: none;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease-in-out;
}
@media (min-width: 992px) {
  .discover-team .content-discover .photo-discover .arrow-pc {
    display: flex;
  }
  .discover-team .content-discover .photo-discover .arrow-pc .circle-btn {
    border: 1px solid var(--background-light);
  }
  .discover-team .content-discover .photo-discover .arrow-pc .circle-btn::after {
    content: url(../img/arrow-right-white.svg);
    padding: 13px;
    top: 0;
    right: 7px;
    width: 20px;
    height: 12px;
  }
  .discover-team .content-discover .photo-discover .arrow-pc .circle-btn:hover {
    border: 1px solid var(--background-accent);
  }
  .discover-team .content-discover .photo-discover .arrow-pc .circle-btn:hover::after {
    content: url(../img/arrow-right.svg);
  }
}
.discover-team .btn-trombi {
  display: block;
  text-align: center;
  margin: 0 16px 40px 16px;
}
@media (min-width: 992px) {
  .discover-team .btn-trombi {
    display: none;
  }
}

/*  Partie des recrutements  */
.join-team {
  background-color: var(--background-accent);
  color: var(--label-primary-onlight);
}
.join-team .content-join-team {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 40px 16px;
  gap: 16px;
}
@media (min-width: 992px) {
  .join-team .content-join-team {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 128px 112px;
  }
}
.join-team .content-join-team .intro-join h2 span {
  color: var(--label-primary-ondark);
}
.join-team .content-join-team .search-profil {
  max-width: 80%;
}
.join-team .content-join-team .search-profil p {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.join-team .content-join-team .search-profil p span {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}
.join-team .content-join-team .search-profil .btn {
  display: block;
  text-align: center;
  margin-top: 24px;
}
@media (min-width: 992px) {
  .join-team .content-join-team .search-profil .btn {
    display: inline-block;
  }
}

body.body-contact {
  background: url("../img/background-contact.jpg");
  background-position: top right;
  background-size: cover;
}
@media (min-width: 992px) {
  body.body-contact {
    background-position: center;
  }
}

.contact {
  display: grid;
  align-items: center;
}
.contact .msg-send {
  position: fixed;
  top: 125px;
  left: 50%;
  transform: translate(-50%, -200px);
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 8px;
  gap: 8px;
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
  transition: transform 0.3s ease-in-out;
}
.contact .msg-send img {
  max-width: 20px;
}
.contact .msg-send.active {
  transform: translate(-50%, 0px);
}
.contact .send-good {
  background-color: var(--background-accent);
  color: var(--label-primary-onlight);
  width: 186px;
}
.contact .send-wrong {
  background-color: var(--background-error);
  color: var(--label-primary-ondark);
  width: 168px;
}
.contact .content-contact {
  margin: 56px auto 32px auto;
  color: var(--label-primary-ondark);
}
@media (min-width: 992px) {
  .contact .content-contact {
    margin: 112px auto 132px auto;
  }
}
.contact .content-contact h2 {
  margin: 0 1rem;
  text-align: center;
}
.contact .content-contact h3 {
  text-align: center;
  margin: 0 1rem;
  color: var(--label-secondary);
}
.contact .content-contact .content-form {
  background-color: var(--background-dark);
  border-radius: 1rem;
  margin: 25px 16px;
  padding: 24px 16px;
}
@media (min-width: 992px) {
  .contact .content-contact .content-form {
    padding: 56px 72px;
    width: 800px;
    margin: 56px 0;
    border-radius: 2.24rem;
  }
}
.contact .content-contact .content-form h4 {
  font-family: var(--Degular);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 28px;
}
.contact .content-contact .content-form form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .contact .content-contact .content-form form {
    margin-top: 32px;
  }
}
.contact .content-contact .content-form form .form-chips {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}
@media (min-width: 992px) {
  .contact .content-contact .content-form form .form-chips {
    gap: 32px;
  }
}
.contact .content-contact .content-form form .form-chips .chips,
.contact .content-contact .content-form form .file-upload .chips {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}
.contact .content-contact .content-form form .form-identity {
  display: flex;
  gap: 32px;
  flex-direction: column;
  margin-bottom: 24px;
}
@media (min-width: 992px) {
  .contact .content-contact .content-form form .form-identity {
    flex-direction: row;
    gap: 24px;
  }
}
.contact .content-contact .content-form form .form-identity .firstname, .contact .content-contact .content-form form .form-identity .lastname {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media (min-width: 992px) {
  .contact .content-contact .content-form form .form-identity .firstname, .contact .content-contact .content-form form .form-identity .lastname {
    width: 50%;
  }
}
.contact .content-contact .content-form form label {
  font-family: var(--Nunito);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 16px;
  margin-bottom: 4px;
}
.contact .content-contact .content-form form input {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--label-primary-ondark);
}
.contact .content-contact .content-form form input:focus {
  outline: 1px solid var(--label-primary-ondark);
}
.contact .content-contact .content-form form input:placeholder {
  color: var(--label-secondary);
}
.contact .content-contact .content-form form input[type=radio] {
  display: none;
}
.contact .content-contact .content-form form input[type=radio]:checked + label {
  background-color: var(--background-light);
  color: var(--label-primary-onlight);
}
.contact .content-contact .content-form form input[type=text], .contact .content-contact .content-form form input[type=email] {
  border: 1px solid var(--background-dark-secondary);
  background: var(--background-dark);
  padding: 12px 16px;
  border-radius: 8px;
  width: 100%;
}
.contact .content-contact .content-form form input[type=button] {
  border: none;
}
.contact .content-contact .content-form form .email {
  margin-bottom: 24px;
}
.contact .content-contact .content-form form .email input[type=email].active {
  outline: 1px solid var(--background-error);
}
.contact .content-contact .content-form form .email .wrong-mail {
  color: var(--label-error);
  font-family: var(--Nunito);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 16px;
  display: none;
  margin-top: 5px;
}
.contact .content-contact .content-form form .email .wrong-mail.active {
  display: block;
}
.contact .content-contact .content-form form .bloc-textarea {
  margin-bottom: 14px;
}
.contact .content-contact .content-form form .file-upload {
  margin-bottom: 40px;
}
.contact .content-contact .content-form form .file-upload input::file-selector-button {
  display: none;
}
.contact .content-contact .content-form form .file-upload .chips {
  margin-top: 4px;
  margin-right: 10px;
}
.contact .content-contact .content-form form .file-upload .chips .upload-icon {
  display: inline-block;
  vertical-align: middle;
  padding-right: 4px;
}
.contact .content-contact .content-form form textarea {
  border: 1px solid var(--background-dark-secondary);
  background: var(--background-dark);
  padding: 12px 16px;
  color: var(--label-primary-ondark);
  border-radius: 8px;
  width: 100%;
  height: 120px;
  min-height: 50px;
  resize: vertical;
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.contact .content-contact .content-form form textarea:focus {
  outline: 1px solid var(--label-primary-ondark);
}
.contact .content-contact .content-form form .btn-send {
  justify-content: center;
}
@media (min-width: 992px) {
  .contact .content-contact .content-form form .btn-send {
    align-self: flex-end;
  }
}
.contact .content-contact .content-form form .btn-send::after {
  content: url(../img/ico-send-disabled.svg);
  width: 15px;
  height: 12px;
  padding-left: 8px;
  position: initial;
}
.contact .content-contact .content-form form .btn-send.active {
  background-color: var(--background-accent);
  color: var(--label-primary-onlight);
}
.contact .content-contact .content-form form .btn-send:disabled {
  cursor: default;
  background-color: var(--background-light);
  color: var(--label-primary-onlight);
}
.contact .content-contact .content-form form .btn-send.active::after {
  content: url(../img/ico-send.svg);
}
.page-equipe .content-equipe {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1440px;
  padding: 40px 16px 40px 16px;
  color: var(--label-primary-ondark);
}
@media (min-width: 992px) {
  .page-equipe .content-equipe {
    padding: 96px 112px 266px 112px;
  }
}
.page-equipe .content-equipe h2 {
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .page-equipe .content-equipe h2 {
    margin-bottom: 56px;
  }
}
.page-equipe .content-equipe h2 span {
  color: var(--label-accent);
}
.page-equipe .content-equipe .trombinoscope {
  margin: 0 auto;
}
.page-equipe .content-equipe .trombinoscope .content-trombi {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
  .page-equipe .content-equipe .trombinoscope .content-trombi {
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}
.page-equipe .content-equipe .trombinoscope .membre {
  margin-bottom: 34px;
}
.page-equipe .content-equipe .trombinoscope .membre img {
  width: 100%;
}
.page-equipe .content-equipe .trombinoscope .membre .info-membre {
  margin-top: 8px;
  overflow: hidden;
}
.page-equipe .content-equipe .trombinoscope .membre .info-membre .content-nom {
  overflow: hidden;
}
.page-equipe .content-equipe .trombinoscope .membre .info-membre .content-nom .nom-membre {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}
@media (min-width: 992px) {
  .page-equipe .content-equipe .trombinoscope .membre .info-membre .content-nom .nom-membre {
    transform: translateY(50px);
    font-family: var(--Degular);
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 28px;
  }
}
.page-equipe .content-equipe .trombinoscope .membre .info-membre .poste {
  font-family: var(--Nunito);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  color: var(--label-secondary);
}
@media (min-width: 992px) {
  .page-equipe .content-equipe .trombinoscope .membre .info-membre .poste {
    font-family: var(--Nunito);
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
    transform: translateY(50px);
  }
}

.hero-recrutement .content-hero {
  max-width: 1440px;
  margin: 0 auto;
  color: var(--label-primary-ondark);
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 992px) {
  .hero-recrutement .content-hero {
    padding-left: 112px;
  }
}
.hero-recrutement .content-hero .big-claim {
  font-family: var(--Degular);
  font-size: 2.875rem;
  font-weight: bold;
  line-height: 46px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 114px 1rem 200px 1rem;
}
@media (min-width: 992px) {
  .hero-recrutement .content-hero .big-claim {
    font-family: var(--Degular);
    font-size: 6.25rem;
    font-weight: bold;
    line-height: 94px;
    padding: 262px 0;
    flex-direction: row;
  }
}
.hero-recrutement .content-hero .big-claim .masque-claim {
  height: 65px;
  overflow: hidden;
}
@media (min-width: 992px) {
  .hero-recrutement .content-hero .big-claim .masque-claim {
    height: 95px;
  }
}
.hero-recrutement .content-hero .big-claim .masque-claim .start-claim span {
  color: var(--label-secondary);
}
@media (min-width: 992px) {
  .hero-recrutement .content-hero .big-claim .masque-claim .start-claim span {
    display: none;
  }
}
.hero-recrutement .content-hero .big-claim .content-big-claim {
  position: relative;
}
@media (min-width: 992px) {
  .hero-recrutement .content-hero .big-claim .content-big-claim {
    margin-left: 8px;
  }
}
.hero-recrutement .content-hero .big-claim .content-big-claim .cursor-figma {
  position: absolute;
  z-index: 2;
}
.hero-recrutement .content-hero .big-claim .content-big-claim .cursor-figma.cursor-denis {
  top: -50px;
  right: 40px;
}
.hero-recrutement .content-hero .big-claim .content-big-claim .cursor-figma.cursor-franck {
  bottom: -60px;
  left: 0px;
}
.hero-recrutement .content-hero .big-claim .content-big-claim .cursor-figma.cursor-mathilde {
  bottom: -50px;
  right: 50px;
}
@media (min-width: 992px) {
  .hero-recrutement .content-hero .big-claim .content-big-claim .cursor-figma.cursor-denis {
    top: -30px;
    right: 400px;
  }
  .hero-recrutement .content-hero .big-claim .content-big-claim .cursor-figma.cursor-franck {
    bottom: -40px;
    left: 100px;
  }
  .hero-recrutement .content-hero .big-claim .content-big-claim .cursor-figma.cursor-mathilde {
    bottom: -30px;
    right: 200px;
  }
}
.hero-recrutement .content-hero .big-claim .content-big-claim .content-anim-claim {
  overflow: hidden;
  height: 13vw;
}
@media (min-width: 992px) {
  .hero-recrutement .content-hero .big-claim .content-big-claim .content-anim-claim {
    height: 120px;
  }
}
.hero-recrutement .content-hero .big-claim .content-big-claim .anim-claim {
  display: flex;
  flex-direction: column;
}
.hero-recrutement .content-hero .big-claim .content-big-claim .anim-claim .claim {
  padding-bottom: 3vw;
  font-size: 11vw;
  line-height: 11vw;
}
@media (min-width: 992px) {
  .hero-recrutement .content-hero .big-claim .content-big-claim .anim-claim .claim {
    padding-bottom: 32px;
    font-size: inherit;
    line-height: inherit;
  }
}
.hero-recrutement .content-hero .big-claim .content-big-claim .anim-claim .claim img {
  width: 90px;
}
.hero-recrutement .content-hero .big-claim .content-big-claim .anim-claim span {
  display: none;
}
@media (min-width: 992px) {
  .hero-recrutement .content-hero .big-claim .content-big-claim .anim-claim span {
    display: inline-block;
  }
}
.hero-recrutement .content-hero .content-little-claim {
  overflow: hidden;
}
.hero-recrutement .content-hero .little-claim {
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
}
@media (min-width: 992px) {
  .hero-recrutement .content-hero .little-claim {
    font-family: var(--Degular);
    font-size: 3.563rem;
    font-weight: bold;
    line-height: 64px;
    margin-bottom: 83px;
    max-width: 800px;
  }
}
.hero-recrutement .content-hero .little-claim span {
  color: var(--label-accent);
}

.avantages .content-avantages {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1rem;
}
.avantages .content-avantages .bloc-avantage {
  position: relative;
  color: var(--label-primary-ondark);
}
.avantages .content-avantages .bloc-avantage:hover {
  background-color: var(--background-accent);
}
.avantages .content-avantages .bloc-avantage:hover img {
  opacity: 1;
  mix-blend-mode: multiply;
}
.avantages .content-avantages .bloc-avantage img {
  mix-blend-mode: multiply;
  opacity: 0.4;
  transition: background-color 0.3s ease-in-out;
}
.avantages .content-avantages .bloc-avantage h3 {
  font-family: var(--Degular);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 28px;
}
@media (min-width: 992px) {
  .avantages .content-avantages .bloc-avantage h3 {
    font-family: var(--Degular);
    font-size: 2.25rem;
    font-weight: bold;
    line-height: 40px;
  }
}
.avantages .content-avantages .bloc-avantage p {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.avantages .content-avantages .avantages-pc {
  display: none;
  max-width: 1216px;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .avantages .content-avantages .avantages-pc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
.avantages .content-avantages .avantages-pc .content-bloc {
  padding: 48px;
  position: absolute;
  z-index: 2;
}
.avantages .content-avantages .avantages-pc .content-bloc h3 {
  margin-bottom: 8px;
}
.avantages .content-avantages .avantages-pc .avantages-left {
  display: flex;
  flex-direction: column;
}
.avantages .content-avantages .avantages-pc .avantages-left > div {
  align-self: flex-start;
}
.avantages .content-avantages .avantages-pc .avantages-left .av-mutuelle {
  margin-top: 205px;
}
.avantages .content-avantages .avantages-pc .avantages-right {
  margin-top: 70px;
  display: grid;
}
.avantages .content-avantages .avantages-pc .avantages-right > div {
  justify-self: flex-end;
}
.avantages .content-avantages .avantages-pc .avantages-right .av-loisirs {
  margin-top: 205px;
}
.avantages .content-avantages .avantages-pc .bloc-horizontal p {
  max-width: 72%;
}
.avantages .content-avantages .avantages-pc .bloc-vertical p {
  max-width: 90%;
}
.avantages .content-avantages .avantages-mobile {
  padding: 24px 0 40px 0;
}
@media (min-width: 992px) {
  .avantages .content-avantages .avantages-mobile {
    display: none;
  }
}
.avantages .content-avantages .avantages-mobile .swiper {
  overflow: visible;
}
.avantages .content-avantages .avantages-mobile .list-avantage {
  display: grid;
  gap: 16px;
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--background-dark-secondary);
  padding: 24px 16px;
  gap: 16px;
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage .shade {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage .content-avantage {
  z-index: 2;
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage.av-teletravail {
  background: url(../img/recrutement/img-teletravail.png) center no-repeat;
  background-size: cover;
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage.av-enfance {
  background: url(../img/recrutement/img-petite-enfance.png) center no-repeat;
  background-size: cover;
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage.av-mutuelle {
  background: url(../img/recrutement/img-mutuelle.png) center no-repeat;
  background-size: cover;
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage.av-loisirs {
  background: url(../img/recrutement/img-loisir.png) center no-repeat;
  background-size: cover;
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage .header-bloc-avantage {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage .header-bloc-avantage .chevron {
  transform: rotate(90deg);
  margin-right: 5px;
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage .header-bloc-avantage .chevron path {
  fill: var(--label-primary-ondark);
}
.avantages .content-avantages .avantages-mobile .list-avantage .bloc-avantage .explain-avantage {
  z-index: 0;
  height: 0px;
  opacity: 0;
  overflow: hidden;
  transform: translateY(20px);
}
.avantages .content-avantages .bloc-autre-avantage {
  display: none;
}
@media (min-width: 992px) {
  .avantages .content-avantages .bloc-autre-avantage {
    display: block;
    color: var(--label-primary-ondark);
    margin: 0 auto;
    max-width: 488px;
    text-align: center;
    padding: 128px 0;
    font-family: var(--Nunito);
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
  }
  .avantages .content-avantages .bloc-autre-avantage h3 {
    margin-bottom: 16px;
  }
}

.emplois {
  background: url(../img/shape-services.svg), url(../img/shape-services.svg), rgba(71, 71, 71, 0.3);
  background-repeat: no-repeat;
  background-position: right -10% top 15%, right -200% top 15%;
  background-size: 80%;
}
@media (min-width: 992px) {
  .emplois {
    background-position: right, 40%;
    background-size: contain;
  }
}
.emplois .content-emplois {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 16px;
  color: var(--label-primary-ondark);
}
@media (min-width: 992px) {
  .emplois .content-emplois {
    padding: 128px 112px;
  }
}
.emplois .content-emplois h2 {
  margin-bottom: 32px;
}
@media (min-width: 992px) {
  .emplois .content-emplois h2 {
    margin-bottom: 56px;
  }
}
.emplois .content-emplois .list-emplois {
  display: grid;
  gap: 16px;
}
@media (min-width: 992px) {
  .emplois .content-emplois .list-emplois {
    gap: 24px;
  }
}
.emplois .content-emplois .list-emplois .bloc-emploi {
  background-color: var(--background-dark-secondary);
  padding: 24px 16px;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: var(--label-primary-ondark);
  transition: background-color 0.2s ease-in-out;
}
@media (min-width: 992px) {
  .emplois .content-emplois .list-emplois .bloc-emploi {
    padding: 32px;
  }
}
.emplois .content-emplois .list-emplois .bloc-emploi .arrow {
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease-in-out;
  display: flex;
  transform: rotate(-45deg);
}
.emplois .content-emplois .list-emplois .bloc-emploi .arrow.arrow-pc {
  display: none;
}
@media (min-width: 992px) {
  .emplois .content-emplois .list-emplois .bloc-emploi .arrow.arrow-pc {
    display: block;
  }
}
@media (min-width: 992px) {
  .emplois .content-emplois .list-emplois .bloc-emploi .arrow.arrow-mobile {
    display: none;
  }
}
.emplois .content-emplois .list-emplois .bloc-emploi .arrow .circle-btn {
  border: 1px solid var(--background-light);
  transition: background-color 0.2s ease-in-out;
}
.emplois .content-emplois .list-emplois .bloc-emploi .arrow .circle-btn::after {
  content: url(../img/arrow-right-white.svg);
  padding: 13px;
  top: 0;
  right: 7px;
  width: 20px;
  height: 12px;
}
.emplois .content-emplois .list-emplois .bloc-emploi .arrow .circle-btn:hover {
  border: 1px solid var(--background-accent);
}
.emplois .content-emplois .list-emplois .bloc-emploi .arrow .circle-btn:hover::after {
  content: url(../img/arrow-right.svg);
}
.emplois .content-emplois .list-emplois .bloc-emploi:hover .circle-btn {
  border: 1px solid var(--background-accent);
  background-color: var(--background-accent);
}
.emplois .content-emplois .list-emplois .bloc-emploi:hover .circle-btn::after {
  content: url(../img/arrow-right.svg);
}
.emplois .content-emplois .list-emplois .bloc-emploi .header-bloc {
  display: flex;
  align-items: center;
  gap: 26px;
  justify-content: space-between;
}
.emplois .content-emplois .list-emplois .bloc-emploi .header-bloc h4 {
  font-family: var(--Degular);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 28px;
}
@media (min-width: 992px) {
  .emplois .content-emplois .list-emplois .bloc-emploi .header-bloc h4 {
    font-family: var(--Degular);
    font-size: 2.25rem;
    font-weight: bold;
    line-height: 40px;
  }
}
.emplois .content-emplois .list-emplois .bloc-emploi .info-poste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 24px 0;
}
@media (min-width: 992px) {
  .emplois .content-emplois .list-emplois .bloc-emploi .info-poste {
    flex-direction: row;
    gap: 24px;
    padding: 8px 0 24px 0;
  }
}
.emplois .content-emplois .list-emplois .bloc-emploi .info-poste p {
  display: flex;
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
}
.emplois .content-emplois .list-emplois .bloc-emploi .info-poste p img {
  margin-right: 10px;
}
.emplois .content-emplois .list-emplois .bloc-emploi .detail-poste {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--label-secondary);
  max-width: 90%;
}
.emplois .expansion {
  padding: 40px 0 0 0;
  color: var(--label-primary-ondark);
}
@media (min-width: 992px) {
  .emplois .expansion {
    padding: 128px 0 0 0;
  }
}
.emplois .expansion h2 span {
  color: var(--label-accent);
}
.emplois .expansion .liste-donnees {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 0;
}
@media (min-width: 992px) {
  .emplois .expansion .liste-donnees {
    flex-direction: row;
    gap: 112px;
  }
}
.emplois .expansion .liste-donnees .donnees.new-dev {
  align-self: flex-end;
}
@media (min-width: 992px) {
  .emplois .expansion .liste-donnees .donnees.new-dev {
    align-self: center;
  }
}
.emplois .expansion .liste-donnees .donnees .bloc-chiffre {
  color: var(--label-accent);
  font-family: var(--Degular);
  font-size: 6.25rem;
  font-weight: bold;
  line-height: 94px;
  display: flex;
}
.emplois .expansion .liste-donnees .donnees .bloc-chiffre .anim-chiffre {
  position: relative;
  margin-left: 8px;
}
.emplois .expansion .liste-donnees .donnees .bloc-chiffre .anim-chiffre > span {
  position: absolute;
}
.emplois .expansion .liste-donnees .donnees .explain-donnee {
  font-family: var(--Nunito);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 30px;
}

.seminaire .content-seminaire {
  display: grid;
  padding: 40px 0 80px 16px;
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .seminaire .content-seminaire {
    padding: 128px 0 96px 112px;
    grid-template-columns: 1fr 1fr;
  }
}
.seminaire .header-seminaire {
  color: var(--label-primary-ondark);
}
.seminaire .header-seminaire h2 span {
  color: var(--label-accent);
}
.seminaire .header-seminaire .masque-seminaire {
  overflow: hidden;
}
.seminaire .header-seminaire .explain-seminaire {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  max-width: 80%;
  margin-top: 16px;
}
@media (min-width: 992px) {
  .seminaire .header-seminaire .explain-seminaire {
    margin-top: 24px;
  }
}
.seminaire .slider-seminaire {
  position: relative;
  overflow: hidden;
  margin-bottom: 80px;
}
@media (min-width: 992px) {
  .seminaire .slider-seminaire {
    margin-bottom: 144px;
  }
}
.seminaire .slider-seminaire .slider-container {
  --gap:16px;
  --duration:90s;
  display: flex;
  gap: var(--gap);
  height: 350px;
}
@media (min-width: 992px) {
  .seminaire .slider-seminaire .slider-container {
    --gap: 32px;
    --duration:20s;
  }
}
@media (min-width: 992px) {
  .seminaire .slider-seminaire .slider-container {
    height: 531px;
  }
}
.seminaire .slider-seminaire .slider-container .list-photo {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap);
  flex-shrink: 0;
}
.seminaire .slider-seminaire .slider-container .list-photo > * {
  height: 100%;
}
@keyframes scrollLeft {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(-100% - var(--gap)), 0);
  }
}

.hero-projet {
  margin-top: 53px;
}
@media (min-width: 992px) {
  .hero-projet {
    margin-top: 97px;
  }
}
.hero-projet .content-hero {
  max-width: 1440px;
  margin: 0 auto;
  color: var(--label-primary-ondark);
  padding: 0 1rem;
}
.hero-projet .content-hero .intro-hero {
  padding: 0;
  padding-left: 1rem;
  margin: 0;
}
@media (min-width: 992px) {
  .hero-projet .content-hero .intro-hero {
    padding: 0 0 88px 50px;
    margin: 0 auto;
  }
}
.hero-projet .content-hero .label-prim-onlight {
  overflow: hidden;
}
.hero-projet .content-hero .label-prim-onlight span {
  display: block;
  padding-bottom: 20px;
}
.hero-projet .slider-projets {
  display: flex;
  height: 60vh;
  overflow: hidden;
  width: 100%;
  z-index: 0;
  margin-bottom: 51px;
}
@media (min-width: 992px) {
  .hero-projet .slider-projets {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0px 50px 38px 50px;
    height: 70vh;
  }
}
.hero-projet .slider-projets .projets-container {
  display: flex;
  justify-content: flex-start;
}
@media (min-width: 992px) {
  .hero-projet .slider-projets .projets-container {
    gap: 8px;
  }
}
.hero-projet .slider-projets .projets-container > div {
  position: relative;
  color: var(--label-primary-ondark);
  overflow: hidden;
  border-radius: 16px;
  width: 57vw;
  transition: width ease 200ms;
  margin-left: 2rem;
}
@media (min-width: 992px) {
  .hero-projet .slider-projets .projets-container > div {
    transition: width 1.4s cubic-bezier(0.11, 0.79, 0.19, 1);
    width: 20%;
    flex-shrink: 1;
  }
}
.hero-projet .slider-projets .projets-container > div.active {
  width: 57vw;
}
@media (min-width: 992px) {
  .hero-projet .slider-projets .projets-container > div.active {
    width: 100%;
  }
}
.hero-projet .slider-projets .projets-container > div.active .bloc-shadow {
  transform: translateY(0px);
}
.hero-projet .slider-projets .projets-container > div.active .content-projet {
  transform: translateY(0px);
}
.hero-projet .slider-projets .projets-container > div .bloc-shadow {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  transform: translateY(300px);
  transition: all 0.3s ease-in-out;
}
.hero-projet .slider-projets .projets-container > div .img-projet {
  height: 100%;
}
.hero-projet .slider-projets .projets-container > div .img-projet img {
  border-radius: 16px;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.hero-projet .slider-projets .projets-container > div .content-projet {
  z-index: 1;
  position: absolute;
  bottom: 0;
  padding: 21px 1rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  overflow: hidden;
  transform: translateY(100%);
  transition: all 0.3s ease-in-out;
}
@media (min-width: 992px) {
  .hero-projet .slider-projets .projets-container > div .content-projet {
    padding: 38px;
    min-width: 200px;
  }
}
.hero-projet .slider-projets .projets-container > div .content-projet .left-content {
  display: flex;
  flex-direction: column;
}
.hero-projet .slider-projets .projets-container > div .content-projet .left-content img {
  width: 56px;
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .hero-projet .slider-projets .projets-container > div .content-projet .left-content img {
    width: 80px;
    margin-bottom: 0;
  }
}
.hero-projet .slider-projets .projets-container > div .content-projet .left-content h2 {
  color: var(--label-primary-ondark);
}
@media (min-width: 992px) {
  .hero-projet .slider-projets .projets-container > div .content-projet .left-content h2 {
    text-wrap: nowrap;
  }
}
.hero-projet .slider-projets .projets-container > div .content-projet .left-content p {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--label-secondary);
  padding-top: 8px;
}
.hero-projet .slider-projets .projets-container > div .content-projet .arrow {
  transform: rotate(-45deg);
}
.hero-projet .swiper-pagination {
  margin-top: 16px;
  margin-bottom: 1rem;
  position: initial;
}
.hero-projet .swiper-pagination .swiper-pagination-bullet {
  content: "";
  width: 15px;
  height: 4px;
  border-radius: 50px;
  background-color: var(--label-primary-onlight);
  opacity: 0.2;
  transition: opacity 0.2s ease-in-out;
}
.hero-projet .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

.hero-detail .content-hero {
  padding: 56px 52px 40px 32px;
}
@media (min-width: 992px) {
  .hero-detail .content-hero {
    padding: 128px 216px 128px 216px;
  }
}
.hero-detail .content-hero .header-projet .nom-projet {
  overflow: hidden;
  font-family: var(--Degular);
  font-size: 2.875rem;
  font-weight: bold;
  line-height: 46px;
}
.hero-detail .content-hero .header-projet .nom-projet span {
  display: block;
  padding-bottom: 20px;
}
@media (min-width: 992px) {
  .hero-detail .content-hero .header-projet .nom-projet span {
    font-family: var(--Degular);
    font-size: 6.25rem;
    font-weight: bold;
    line-height: 94px;
  }
}
.hero-detail .content-hero .header-projet .text-pres-projet {
  margin: 24px 0 40px 0;
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  overflow: hidden;
}
.hero-detail .content-hero .header-projet .text-pres-projet span {
  display: block;
}
@media (min-width: 992px) {
  .hero-detail .content-hero .header-projet .text-pres-projet {
    margin: 40px 0 56px 0;
    max-width: 590px;
  }
}
.hero-detail .content-hero .infos-projet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (min-width: 992px) {
  .hero-detail .content-hero .infos-projet {
    display: flex;
    gap: 128px;
  }
}
.hero-detail .content-hero .infos-projet .infos .titre-info {
  font-family: var(--Nunito);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 20px;
  color: var(--label-secondary);
  margin-bottom: 8px;
}
.hero-detail .content-hero .infos-projet .infos .desc-info {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: bold;
  line-height: 24px;
  max-width: 130px;
}

.banner-couv img {
  width: 100%;
}

.d-pc {
  display: none;
}
@media (min-width: 992px) {
  .d-pc {
    display: block;
  }
}

@media (min-width: 992px) {
  .d-mobile {
    display: none !important;
  }
}

.border-r {
  border-radius: 16px;
}

.contour {
  border: 1px solid var(--separator-onlight);
}

.info-bloc {
  padding-top: 16px;
}
.info-bloc .sous-titre-bloc {
  font-family: var(--Degular);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 28px;
}
.info-bloc .sous-explain-bloc {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

.projet-details {
  max-width: 1440px;
  margin: 0 auto;
}
.projet-details .bloc-detail {
  padding: 40px 16px 0 16px;
}
.projet-details .bloc-detail h3 {
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
}
@media (min-width: 992px) {
  .projet-details .bloc-detail {
    padding: 128px 112px 0 112px;
  }
  .projet-details .bloc-detail h3 {
    font-family: var(--Degular);
    font-size: 3.563rem;
    font-weight: bold;
    line-height: 64px;
  }
}
.projet-details .bloc-detail .approche-img {
  display: flex;
  justify-content: center;
}
.projet-details .explain-section {
  font-family: var(--Nunito);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  padding: 16px 0 32px 0;
}
@media (min-width: 992px) {
  .projet-details .explain-section {
    max-width: 700px;
    padding: 16px 0 40px 0;
  }
}
.projet-details .conception-pc {
  display: none;
}
@media (min-width: 992px) {
  .projet-details .conception-pc {
    display: block;
  }
}
.projet-details .conception-pc .double-bloc-conception {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.projet-details .conception-pc .info-bloc {
  margin-bottom: 96px;
}
@media (min-width: 992px) {
  .projet-details .conception-mobile {
    display: none;
  }
}
.projet-details .conception-mobile .liste-bloc-conception {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.projet-details .conception-mobile .liste-bloc-conception .bloc-conception {
  width: calc(100vw - 2rem);
  display: grid;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
.projet-details .swiper-pagination {
  margin-top: 56px;
  margin-bottom: 1rem;
  position: initial;
}
.projet-details .swiper-pagination .swiper-pagination-bullet {
  content: "";
  width: 15px;
  height: 4px;
  border-radius: 50px;
  background-color: var(--label-primary-onlight);
  opacity: 0.2;
  transition: opacity 0.2s ease-in-out;
}
.projet-details .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}
.projet-details .bloc-conception-pc {
  margin-top: 96px;
}

.pres-produit .rendu-appli img {
  margin: 0 auto;
}
.pres-produit .content-pres-produit {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 992px) {
  .pres-produit .content-pres-produit {
    padding: 56px 112px 0px 112px;
  }
}
.pres-produit .content-pres-produit .bloc-grid-rendu {
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
}
@media (min-width: 992px) {
  .pres-produit .content-pres-produit .bloc-grid-rendu {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
.pres-produit .content-pres-produit .bloc-grid-rendu .grid-right {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
@media (min-width: 992px) {
  .pres-produit .content-pres-produit .bloc-grid-rendu .grid-right {
    gap: 51px;
  }
}
.pres-produit .content-pres-produit .bloc-branding {
  margin: 0 auto;
}

.prototype {
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .prototype {
    margin-bottom: 128px;
  }
}
.prototype .content-prototype {
  margin: 0 auto;
}
.prototype .content-prototype .prototype-img {
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: 490px;
}
@media (min-width: 576px) {
  .prototype .content-prototype .prototype-img {
    height: auto;
  }
}

.autres-projets {
  background: var(--background-dark);
  color: var(--label-primary-ondark);
}
.autres-projets .content-autres-projets {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 0px 80px 16px;
}
@media (min-width: 992px) {
  .autres-projets .content-autres-projets {
    padding: 128px 112px 128px 112px;
  }
}
.autres-projets .content-autres-projets .swiper-autre {
  overflow: hidden;
}
.autres-projets .content-autres-projets h3 {
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
}
@media (min-width: 992px) {
  .autres-projets .content-autres-projets h3 {
    font-family: var(--Degular);
    font-size: 3.563rem;
    font-weight: bold;
    line-height: 64px;
  }
}
.autres-projets .content-autres-projets .liste-autres-projet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
}
@media (min-width: 992px) {
  .autres-projets .content-autres-projets .liste-autres-projet {
    gap: 32px;
    margin-top: 68px;
  }
}
.autres-projets .content-autres-projets .liste-autres-projet .projet {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  width: 253px;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-content: left;
  color: var(--label-primary-ondark);
  transition: width 0.5s cubic-bezier(0.25, 0.04, 0, 0.99), background 0.5s ease-in-out;
}
@media (min-width: 992px) {
  .autres-projets .content-autres-projets .liste-autres-projet .projet:hover .content-projet {
    transform: translate(0, 0);
  }
}
@media (min-width: 992px) {
  .autres-projets .content-autres-projets .liste-autres-projet .projet:hover .bloc-shadow {
    transform: translate(0, 0);
  }
}
@media (min-width: 992px) {
  .autres-projets .content-autres-projets .liste-autres-projet .projet {
    width: 100%;
    display: flex;
  }
}
.autres-projets .content-autres-projets .liste-autres-projet .projet .bloc-shadow {
  position: absolute;
  content: "";
  width: 100%;
  height: 50%;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  transition: transform 0.3s ease;
}
@media (min-width: 992px) {
  .autres-projets .content-autres-projets .liste-autres-projet .projet .bloc-shadow {
    transform: translate(0, 100%);
  }
}
.autres-projets .content-autres-projets .liste-autres-projet .projet .img-projet {
  height: 100%;
}
.autres-projets .content-autres-projets .liste-autres-projet .projet .img-projet img {
  border-radius: 16px;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.autres-projets .content-autres-projets .liste-autres-projet .projet .content-projet {
  z-index: 1;
  position: absolute;
  bottom: 0;
  padding: 16px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  transition: transform 0.3s ease 0.1s;
}
@media (min-width: 992px) {
  .autres-projets .content-autres-projets .liste-autres-projet .projet .content-projet {
    padding: 31px 26px;
    transform: translate(0, 100%);
  }
}
.autres-projets .content-autres-projets .liste-autres-projet .projet .content-projet .left-content h2 {
  font-family: var(--Degular);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 40px;
}
.autres-projets .content-autres-projets .liste-autres-projet .projet .content-projet .left-content p {
  font-family: var(--Nunito);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  color: var(--label-secondary);
  padding-top: 8px;
}
@media (min-width: 992px) {
  .autres-projets .content-autres-projets .liste-autres-projet .projet .content-projet .left-content p {
    font-family: var(--Nunito);
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
  }
}
.autres-projets .content-autres-projets .liste-autres-projet .projet .content-projet .arrow {
  transform: rotate(-45deg);
}/*# sourceMappingURL=styles.css.map */