* {
  box-sizing: border-box;
}

::-moz-placeholder {
  font-style: italic;
  color: white;
}

::placeholder {
  font-style: italic;
  color: white;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth !important;
}

:root {
  --fontSizeSmall: 0.85rem;
  --fontSizeXLarge: 3.5rem;
  --fontSizeLarge: 3.125rem;
  --fontSizeH1: 1.625rem;
  --fontSizeH2: 2.68rem;
  --fontSizeH3: 1.875rem;
  --fontSizeH4: 1.1rem;
}

@media (max-width: 1366px) {
  :root {
    --fontSizeSmall: 0.85rem;
    --fontSizeXLarge: calc(3.5rem * 0.8);
    --fontSizeLarge: calc(3.125rem * 0.8);
    --fontSizeH1: calc(1.625rem * 0.8);
    --fontSizeH2: calc(2.68rem * 0.8);
    --fontSizeH3: calc(1.875rem * 0.8);
    --fontSizeH4: max(1rem, calc(1.1rem * 0.8));
  }
}
@media (max-width: 1199px) {
  :root {
    --fontSizeSmall: 0.85rem;
    --fontSizeXLarge: calc(3.5rem * 0.6);
    --fontSizeLarge: calc(3.125rem * 0.6);
    --fontSizeH1: calc(1.625rem * 0.7);
    --fontSizeH2: calc(2.68rem * 0.7);
    --fontSizeH3: calc(1.875rem * 0.7);
    --fontSizeH4: max(1rem, calc(1.1rem * 0.7));
  }
}
body {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 300;
  font-family: "Inter";
  background: #020838;
  color: white;
  overflow-x: hidden;
}

h1, h2, h3, ul, ol, p, img {
  margin: 0;
  padding: 0;
}

h1, .h1 {
  font-size: var(--fontSizeH1);
  line-height: 1.3;
  font-weight: 200;
  text-align: left;
}
h1 strong, .h1 strong {
  font-weight: 700;
}

h2, .h2 {
  text-align: center;
  font-size: var(--fontSizeH2);
  line-height: 1.1;
  margin: 0 0 6rem;
}

h3, .h3 {
  font-weight: 700;
  margin: 0 0 1rem;
  font-size: var(--fontSizeH3);
  line-height: 1.3;
}

h4, .h4 {
  font-weight: 700;
  font-size: var(--fontSizeH4);
  color: #0269E1;
  margin: 0 0 0.25rem;
}

p, ul {
  margin: 0 0 1rem;
}

a {
  color: white;
}

img {
  display: block;
}

strong {
  font-weight: 700;
}

header {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  bottom: 0;
  width: 22rem;
}
header:before {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  border-right: solid 1px rgba(255, 255, 255, 0.5);
}
header nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}
header nav ul {
  margin: 0;
}
header nav ul li {
  list-style: none;
}
header nav ul li a {
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 20%;
  backdrop-filter: blur(3px);
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  opacity: 0.5;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
header nav ul li a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1rem;
  border-top: solid 1px white;
  width: 1rem;
  transform: translateX(-2rem);
  transition: transform 0.5s ease;
}
header nav ul li a:hover, header nav ul li a.on {
  opacity: 1;
  transform: translateX(1rem);
}
header nav ul li a:hover:before, header nav ul li a.on:before {
  transform: translateX(0);
}
header nav .linkedin {
  display: block;
  width: 1.5rem;
  aspect-ratio: 1;
  margin: 0.5rem 0 0 1.5rem;
  -webkit-mask: no-repeat center/contain url(../images/linkedin.svg);
          mask: no-repeat center/contain url(../images/linkedin.svg);
  background: white;
  transition: background 0.3s ease;
}
header nav .linkedin:hover {
  background: rgb(10, 102, 194);
}
header .logo {
  margin: 2rem 0 4rem 2rem;
}
header .logo img {
  width: 18rem;
}
header .made-in-france {
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 2rem;
  display: flex;
  gap: 0.5rem;
}
header .made-in-france:hover .blanc {
  transform: translateY(0.5rem);
}
header .made-in-france:hover span {
  opacity: 1;
}
header .made-in-france .bleu {
  width: 0.7rem;
  height: 3.5rem;
  background: #2900DD;
  transform: translateY(0.5rem);
}
header .made-in-france .blanc {
  width: 0.7rem;
  height: 3.5rem;
  background: white;
  transition: transform 0.5s ease;
}
header .made-in-france .rouge {
  width: 0.7rem;
  height: 3.5rem;
  background: #EE0909;
  transform: translateY(0.5rem);
}
header .made-in-france span {
  text-transform: uppercase;
  font-size: 0.75rem;
  margin: 0.5rem 0 0 0.25rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

@media (max-width: 1199px) {
  header {
    position: absolute;
    bottom: auto;
  }
  header:before {
    content: none;
  }
  header nav {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    background: #020838;
    border-top: solid 1px rgba(255, 255, 255, 0.5);
    /*overflow: hidden;*/
    transform: none;
  }
  header nav ul {
    display: flex;
    margin: 0;
    overflow: auto;
  }
  header nav ul li a {
    font-size: 0.85rem;
    padding: 1rem;
    white-space: nowrap;
    backdrop-filter: none;
  }
  header nav ul li a.on, header nav ul li a:hover {
    font-weight: 700;
    transform: none;
  }
  header nav ul li a:before {
    content: none;
  }
  header nav .linkedin {
    position: absolute;
    z-index: 1;
    bottom: 4.5rem;
    left: 1rem;
    margin: 0;
  }
  header .made-in-france {
    display: none;
  }
  header .logo img {
    width: 15rem;
  }
}
footer {
  text-align: center;
  padding: 0 0 4rem 22rem;
}
footer ul {
  list-style: none;
}
footer ul li a {
  font-weight: 700;
  text-decoration: none;
}
footer .logo {
  margin: 0 0 1rem;
}
footer .logo img {
  margin: auto;
}

@media (max-width: 1199px) {
  footer {
    padding: 0 0 4rem;
  }
}
section {
  padding: 12rem 0 12rem 22rem;
}
section.height100 {
  /*min-height: 100vh;*/
}

@media (max-width: 1199px) {
  section {
    padding: 6rem 0 6rem 0;
  }
}
/* FORMULAIRE */
form .required {
  font-size: var(--fontSizeSmall);
  text-align: center;
}
form .placeholder {
  display: none;
}
form .form-group {
  position: relative;
  overflow: hidden;
  margin: 0 0 1rem;
}
form .form-group[data-demande] {
  display: none;
}
form .form-group[data-demande].on {
  display: block;
}
form .form-group.select:before {
  content: "";
  position: absolute;
  top: 3rem;
  right: 1rem;
  padding: 0.25rem;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg);
}
form .form-group.select select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
form .form-group.select select option {
  color: #020838;
}
form .form-group.checkbox {
  margin: 0 0 3rem;
}
form label {
  display: block;
  height: 1.5rem;
  margin: 0 0 0.5rem;
}
form label a {
  text-decoration: none;
}
form input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
form input[type=checkbox]:checked + label:after {
  opacity: 1;
}
form input[type=checkbox] + label {
  position: relative;
  height: auto;
  padding: 0 0 0 2rem;
  cursor: pointer;
}
form input[type=checkbox] + label:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 2px;
  border: solid 1px white;
  background: transparent;
}
form input[type=checkbox] + label:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  padding: 0.25rem 0.1rem;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.5s ease;
}
form input[type=file] {
  opacity: 0;
  position: absolute;
  z-index: 1;
  transform: scale(2);
}
form input[type=file] + span {
  display: block;
  font-style: italic;
  width: 75%;
  height: 3rem;
  line-height: 3rem;
  padding: 0 1rem;
  border: solid 1px white;
  border-radius: 0.5rem;
  position: relative;
}
form input[type=file] + span:before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1rem;
  aspect-ratio: 1;
  background: no-repeat center/contain url(../images/plus.svg);
}
form .fields {
  margin: 0 0 3rem;
}
form .form-control, form .form-control-textarea {
  display: block;
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  border: solid 1px white;
  border-radius: 0.5rem;
  background: none;
  color: white;
  padding: 0 1rem;
  font-size: 1rem;
  font-family: "Inter";
  transition: border 0.5s ease;
}
form .form-control:focus, form .form-control-textarea:focus {
  outline: 0;
}
form .form-control:hover, form .form-control:focus, form .form-control-textarea:hover, form .form-control-textarea:focus {
  border-color: rgba(255, 255, 255, 0.6);
}
form .form-control-textarea {
  height: 27rem;
  line-height: 1.4rem;
  padding: 1rem;
  resize: none;
}
form .msg {
  display: none;
  font-weight: 700;
  text-align: center;
  margin-top: 3rem;
}
form .msg.on {
  display: block;
}
form .submit {
  text-align: center;
}

/* CLASSES */
.text-center {
  text-align: center;
}

/* VIDEOS */
.bulles {
  position: fixed;
  inset: 0;
  z-index: 1;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
}
.bulles video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.soleil {
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%;
  z-index: -1;
  filter: blur(2px) brightness(1.1);
  transform: scale(3);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  opacity: 0;
}
.soleil video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* LANGUES */
.langues {
  position: fixed;
  z-index: 3;
  top: 2rem;
  right: 2rem;
  border: solid 1px rgba(255, 255, 255, 0.5);
  border-radius: 2rem;
  font-weight: 500;
  display: flex;
  flex-direction: row-reverse;
  background: #020838;
  overflow: hidden;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.langues.on {
  opacity: 1;
  transform: none;
}
.langues a {
  padding: 0.25rem 0;
  text-decoration: none;
  opacity: 0.5;
  width: 3rem;
  text-align: center;
}
.langues a.active {
  background: white;
  color: #0269E1;
  opacity: 1;
  border-radius: 2rem;
}

@media (max-width: 767px) {
  .langues {
    top: auto;
    right: 1rem;
    bottom: 4.5rem;
    font-size: 0.85rem;
  }
  .langues a {
    width: 2.5rem;
  }
}
/* BOUTON */
.btn {
  display: inline-block;
  position: relative;
  padding: 0.75rem 1.5rem;
  color: white;
  background: none;
  text-transform: uppercase;
  letter-spacing: 20%;
  font-size: var(--fontSizeSmall);
  font-weight: 500;
  border: 0;
  transition: color 0.5s ease;
}
.btn:hover {
  color: #0269E1;
}
.btn:hover:before {
  border-color: #0269E1;
  transform: translate(-0.25rem, -0.25rem);
}
.btn:hover:after {
  border-color: #0269E1;
  transform: translate(0.25rem, -0.25rem);
}
.btn:hover span:before {
  border-color: #0269E1;
  transform: translate(-0.25rem, 0.25rem);
}
.btn:hover span:after {
  border-color: #0269E1;
  transform: translate(0.25rem, 0.25rem);
}
.btn:before, .btn:after {
  content: "";
  position: absolute;
  top: 0;
  border-top: solid 1px white;
  width: 0.75rem;
  aspect-ratio: 1;
  transition: border 0.5s ease, transform 0.5s ease;
}
.btn:before {
  left: 0;
  border-left: solid 1px white;
}
.btn:after {
  right: 0;
  border-right: solid 1px white;
}
.btn span {
  display: inline-block;
}
.btn span:before, .btn span:after {
  content: "";
  position: absolute;
  bottom: 0;
  border-bottom: solid 1px white;
  width: 0.75rem;
  aspect-ratio: 1;
  transition: border 0.5s ease, transform 0.5s ease;
}
.btn span:before {
  left: 0;
  border-left: solid 1px white;
}
.btn span:after {
  right: 0;
  border-right: solid 1px white;
}

.plus {
  position: relative;
  text-transform: uppercase;
  font-weight: 200;
  padding: 0 0 0 2rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.5s ease;
}
.plus:hover {
  color: #0269E1;
}
.plus:before, .plus:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 1.2rem;
  aspect-ratio: 1;
  transition: background 0.5s ease;
}
.plus:before {
  border-radius: 1rem;
  background: white;
}
.plus:after {
  background: no-repeat center/contain url(../images/plus.svg);
}

.btns {
  display: flex;
  justify-content: center;
  gap: 1rem 3rem;
}

@media (max-width: 767px) {
  .btns {
    flex-wrap: wrap;
  }
}
/* IMAGE */
.image.radius img {
  border-radius: 1rem;
}
.image img {
  width: 100%;
  height: auto;
}

/* TITRE ET SURTITRE */
.surtitre {
  font-size: var(--fontSizeH4);
  margin: 0 0 1rem;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 30%;
  color: #0269E1;
}

/* TOP */
.top {
  position: fixed;
  z-index: 3;
  bottom: 2rem;
  right: 2rem;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 3rem;
  border: solid 1px white;
  margin: 0 0 1rem;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.5s ease, background 0.5s ease;
}
.top.on {
  opacity: 1;
}
.top:hover {
  background: #0269E1;
}
.top:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/fleche.svg);
          mask: no-repeat center/contain url(../images/fleche.svg);
  background: white;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: background 0.5s ease;
}

@media (max-width: 1199px) {
  .top {
    display: none;
  }
}
/* FEATURED */
.featured {
  min-height: 100vh;
}
.featured h1, .featured .h1 {
  font-size: var(--fontSizeXLarge);
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: calc(100% - 22rem);
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 0 0 0 22rem;
}
.featured video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#magnetCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: plus-lighter;
}

@media (max-width: 1199px) {
  .featured h1, .featured .h1 {
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
  }
}
/* PARTENAIRES */
.partenaires {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 7rem 0 0;
  margin: 0 0 0 22rem;
}
.partenaires .liste {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: scroll 45s linear infinite;
}
.partenaires .liste img {
  opacity: 0.5;
  margin: 0 1rem;
  flex-shrink: 0;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 1199px) {
  .partenaires {
    padding: 0;
    margin: 0;
  }
}
@media (max-width: 767px) {
  .partenaires .liste img {
    height: 3rem;
  }
}
/* FONCTIONNEMENT */
.fonctionnement {
  position: relative;
}
.fonctionnement:before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 70%;
  width: 15rem;
  height: 30rem;
  transform: rotate(180deg);
  opacity: 0.05;
  background: no-repeat center/contain url(../images/forme-logo-demi.svg);
}
.fonctionnement .bg div {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: screen;
  background: no-repeat center/cover url(../images/sable.jpeg);
}
.fonctionnement .bg:before, .fonctionnement .bg:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: 10vh;
}
.fonctionnement .bg:before {
  top: 0;
  background: linear-gradient(to bottom, #020838 10%, transparent);
}
.fonctionnement .bg:after {
  bottom: 0;
  background: linear-gradient(to top, #020838, transparent);
}
.fonctionnement .wrapper-slider {
  width: 100%;
  max-width: 80vw;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 1199px) {
  .fonctionnement:before {
    width: 10rem;
  }
}
/* SLIDER */
.wrapper-slider {
  width: 100%;
  max-width: 80vw;
  margin: 0 auto;
  position: relative;
}

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.slider .slide {
  position: absolute;
  width: 100%;
  padding: 0 2rem;
  opacity: 0;
  filter: blur(0px);
}
.slider .slide.active {
  opacity: 1;
}
.slider .slide h3, .slider .slide .h3 {
  font-size: var(--fontSizeXLarge);
  line-height: 1.1;
  font-weight: 200;
  margin: 0 0 2rem;
}
.slider .slide .contenu {
  display: flex;
  justify-content: flex-end;
}
.slider .slide .contenu div {
  width: 50%;
  margin: 0 5rem 0 0;
}

@media (max-width: 767px) {
  .slider .slide {
    padding: 0;
  }
  .slider .slide .contenu {
    flex-wrap: wrap;
  }
  .slider .slide .contenu div {
    width: 100%;
    margin: 0 0 2rem;
  }
}
.dots {
  position: absolute;
  top: 22rem;
  left: 0;
  right: 0;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}
.dots .dot {
  width: 0.6rem;
  aspect-ratio: 1;
  border-radius: 0.75rem;
  background: white;
  cursor: pointer;
}
.dots .dot.active {
  background: #0269E1;
}

@media (max-width: 767px) {
  .dots {
    top: auto;
    bottom: 0;
    justify-content: center;
  }
}
.nav {
  position: absolute;
  top: 11rem;
  right: 0;
}
.nav .next, .nav .prev {
  position: relative;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 3rem;
  border: solid 1px #0269E1;
  margin: 0 0 1rem;
  cursor: pointer;
  transition: background 0.5s ease;
}
.nav .next:hover, .nav .prev:hover {
  background: #0269E1;
}
.nav .next:hover:before, .nav .prev:hover:before {
  background: white;
}
.nav .next:before, .nav .prev:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/fleche.svg);
          mask: no-repeat center/contain url(../images/fleche.svg);
  background: #0269E1;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: background 0.5s ease;
}
.nav .next:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

@media (max-width: 767px) {
  .nav {
    display: none;
  }
}
/* MISSION */
.nous-connaitre {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}
.nous-connaitre .bg {
  position: absolute;
  inset: 0;
  opacity: 1;
  overflow: hidden;
  clip-path: inset(10% 0 10% 22rem);
}
.nous-connaitre .bg:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(2, 8, 56, 0.5);
}
.nous-connaitre .bg video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.nous-connaitre .wrapper > div:not(.bg) {
  position: relative;
  z-index: 1;
}
.nous-connaitre .mission {
  font-size: var(--fontSizeXLarge);
  line-height: 1.4;
  font-weight: 100;
  text-align: center;
}
.nous-connaitre .mission strong {
  color: #0269E1;
  font-weight: 700;
}

@media (max-width: 1199px) {
  .nous-connaitre .bg {
    clip-path: inset(10% 0 10% 0);
  }
}
/* TECHNOLOGIE */
.technologie .liste {
  margin: 0 0 2rem;
}
.technologie .liste .etape {
  position: relative;
  height: calc(100% - 4rem);
  margin: 0 0 4rem;
  padding: 0 0 1rem;
}
.technologie .liste .etape:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0.6) 4px, transparent 4px, transparent 8px);
}
.technologie .liste .etape h3 {
  color: #0269E1;
}
.technologie .liste .etape .numero {
  font-size: var(--fontSizeLarge);
  line-height: 2rem;
  color: white;
  font-weight: 700;
  position: absolute;
  top: -1rem;
  right: 1rem;
  z-index: 1;
}
.technologie .liste .etape .image {
  margin: 0 0 1rem;
}
.technologie .liste .etape .image img {
  border-radius: 0 1rem;
}

@media (max-width: 767px) {
  .technologie {
    padding: 0 0 6rem;
  }
}
/* PRODUITS */
.produits {
  position: relative;
  z-index: 2;
  background: #0269E1;
}
.produits:before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  top: -15rem;
  width: 15rem;
  height: 30rem;
  background: no-repeat center/contain url(../images/forme-logo-demi.svg);
}
.produits .surtitre {
  color: white;
}
.produits .produit {
  position: relative;
  height: calc(100% - 2rem);
  min-height: 30rem;
  margin: 0 0 2rem;
}
.produits .produit a, .produits .produit .en-cours {
  padding: 2rem 2rem 8rem 2rem;
  position: relative;
  display: block;
  height: 100%;
  z-index: 1;
  text-decoration: none;
  border-radius: 1rem;
  overflow: hidden;
  filter: blur(2px);
  pointer-events: none;
}
.produits .produit a.on, .produits .produit .en-cours.on {
  filter: blur(0px);
  pointer-events: all;
}
.produits .produit a:hover:after, .produits .produit .en-cours:hover:after {
  opacity: 1;
}
.produits .produit a:before, .produits .produit .en-cours:before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: no-repeat center/cover var(--pack);
}
.produits .produit a:after, .produits .produit .en-cours:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: rgba(2, 105, 225, 0.75);
  transition: opacity 0.5s ease;
}
.produits .produit .en-cours {
  filter: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fontSizeH1);
  font-weight: 700;
  font-style: italic;
  padding: 2rem;
}
.produits .produit .reference {
  font-weight: 700;
  text-align: right;
  margin: 0 0 0.5rem;
}
.produits .produit .logo {
  margin: 0 0 1rem;
}
.produits .produit .logo img {
  max-height: 5rem;
}
.produits .produit .pictogramme {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 4rem;
  background: white;
  border-radius: 1rem 1rem 0 0;
}
.produits .produit .pictogramme.laboratoire:before {
  -webkit-mask: no-repeat center/contain url(../images/laboratoire.svg);
          mask: no-repeat center/contain url(../images/laboratoire.svg);
}
.produits .produit .pictogramme.industrie:before {
  -webkit-mask: no-repeat center/contain url(../images/industrie.svg);
          mask: no-repeat center/contain url(../images/industrie.svg);
}
.produits .produit .pictogramme.collectivite:before {
  -webkit-mask: no-repeat center/contain url(../images/collectivite.svg);
          mask: no-repeat center/contain url(../images/collectivite.svg);
}
.produits .produit .pictogramme:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #020838;
  width: 2rem;
  aspect-ratio: 1;
}

@media (max-width: 1199px) {
  .produits:before {
    width: 10rem;
    opacity: 0.5;
  }
}
/* APPLUCATIONS */
.applications {
  padding-bottom: 0;
}
.applications > .container {
  position: relative;
  z-index: 1;
}
.applications .liste {
  margin-bottom: 14rem;
  display: flex;
  gap: 6rem 10rem;
  flex-wrap: wrap;
  justify-content: center;
}
.applications .liste .application {
  width: calc(50% - 10rem);
  position: relative;
  padding: 0 0 0 2rem;
  opacity: 0;
  filter: blur(20px);
  align-self: flex-start;
}
.applications .liste .application:nth-child(even) {
  transform: translateY(8rem);
}
.applications .liste .application:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0.6) 4px, transparent 4px, transparent 8px);
}
.applications .liste .application:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4rem;
  right: 100%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0.6) 4px, transparent 4px, transparent 8px);
}
.applications .liste .application h3 {
  color: #0269E1;
}
.applications .liste .application ul {
  margin: -0.5rem 0 0 1rem;
  font-weight: 700;
}

@media (max-width: 1366px) {
  .applications .liste {
    gap: 6rem;
  }
  .applications .liste .application {
    width: calc(50% - 7rem);
  }
}
@media (max-width: 1199px) {
  .applications .liste {
    gap: 2rem 0;
    margin-bottom: 6rem;
  }
  .applications .liste .application {
    width: 100%;
  }
  .applications .liste .application:nth-child(even) {
    transform: none;
  }
}
/* CARTOUCHE */
.cartouche {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: var(--fontSizeH4);
  line-height: 1.2;
  background: #0269E1;
  border-radius: 0 2rem 2rem 0;
  padding: 0.75rem 1.5rem 0.75rem 3.75rem;
  margin: 0 0 1rem;
}
.cartouche.laboratoire:before {
  -webkit-mask: no-repeat center/contain url(../images/laboratoire.svg);
          mask: no-repeat center/contain url(../images/laboratoire.svg);
}
.cartouche.industrie:before {
  -webkit-mask: no-repeat center/contain url(../images/industrie.svg);
          mask: no-repeat center/contain url(../images/industrie.svg);
}
.cartouche.collectivite:before {
  -webkit-mask: no-repeat center/contain url(../images/collectivite.svg);
          mask: no-repeat center/contain url(../images/collectivite.svg);
}
.cartouche:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  width: 2rem;
  aspect-ratio: 1;
  background: white;
}

/* EQUIPES */
.equipes .container {
  position: relative;
  z-index: 1;
}
.equipes .liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem;
}
.equipes .equipe {
  width: 20rem;
  margin: 0 0 4rem;
  text-align: center;
}
.equipes .equipe .image {
  width: 50%;
  margin: auto;
}
.equipes .equipe .image img {
  aspect-ratio: 1;
  border-radius: 10rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.equipes .equipe .details {
  padding: 1rem 0;
}
.equipes .equipe .details a {
  display: inline-block;
  width: 1.5rem;
  aspect-ratio: 1;
  background: no-repeat center/contain url(../images/linkedin.svg);
}
.equipes .equipe .details .prenom {
  font-size: var(--fontSizeH4);
  text-transform: uppercase;
}
.equipes .equipe .details .nom {
  font-size: var(--fontSizeH1);
  text-transform: uppercase;
  font-weight: 700;
  color: #0269E1;
}
.equipes .equipe .details .poste {
  font-style: italic;
}

/* OPPORTUNITES */
.opportunites {
  padding: 0 0 10rem 22rem;
}
.opportunites .container {
  position: relative;
  z-index: 1;
}
.opportunites .opportunite {
  position: relative;
  height: calc(100% - 2rem);
  margin: 0 0 2rem;
}
.opportunites .opportunite.spontanee {
  overflow: hidden;
  min-height: 10rem;
}
.opportunites .opportunite.spontanee a {
  display: flex;
  align-items: center;
  height: 100%;
  transition: color 0.5s ease;
}
.opportunites .opportunite.spontanee a:hover:before {
  inset: 0;
  background: #0269E1;
}
.opportunites .opportunite.spontanee a:hover .titre {
  color: white;
}
.opportunites .opportunite.spontanee a:before {
  border: solid 1px #0269E1;
  transition: background 0.5s ease;
}
.opportunites .opportunite.spontanee a:after {
  content: "";
  position: absolute;
  inset: 1rem;
  right: 0;
  -webkit-mask: no-repeat center right/contain url(../images/forme-logo-demi.svg);
          mask: no-repeat center right/contain url(../images/forme-logo-demi.svg);
  background: #020838;
  mix-blend-mode: color-dodge;
}
.opportunites .opportunite.spontanee a .titre {
  font-size: var(--fontSizeH2);
  font-weight: 300;
  line-height: 1.1;
  color: #0269E1;
  position: relative;
  z-index: 1;
  transition: color 0.5s ease;
}
.opportunites .opportunite a {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 1.5rem;
}
.opportunites .opportunite a:hover:before {
  inset: -0.5rem;
}
.opportunites .opportunite a:hover .plus {
  color: #0269E1;
}
.opportunites .opportunite a:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #020838;
  border-radius: 1rem;
  transition: inset 0.5s ease;
}
.opportunites .opportunite .reference {
  margin: 0 0 0.25rem;
}
.opportunites .opportunite .contrat {
  margin: 0 0 0.4rem;
}

@media (max-width: 1199px) {
  .opportunites {
    padding: 0 0 4rem 0;
  }
}
/* ACTUALITE */
.actualites {
  padding-top: 0;
}
.actualites .container {
  position: relative;
  z-index: 1;
}
.actualites .liste {
  margin: 0 0 2rem;
}
.actualites .liste .actualite {
  margin: 0 0 4rem;
}
.actualites .liste .actualite a {
  text-decoration: none;
}
.actualites .liste .actualite .image {
  margin: 0 0 2rem;
}
.actualites .liste .actualite .image img {
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16/9;
}
.actualites .liste .actualite h4, .actualites .liste .actualite .h4 {
  max-width: 75%;
  margin: 0 0 2rem;
}

/* CONTACT */
.contact {
  padding-top: 0;
}

/* POPIN */
.popin {
  position: fixed;
  z-index: 4;
  width: 6rem;
  height: 6rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  background: #020838;
  border-radius: 1rem;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;
}
.popin.on {
  opacity: 1;
  pointer-events: all;
  display: flex;
}
.popin.expanded {
  width: 100vw;
  height: 100vh;
  top: 0%;
}
.popin.expanded:before {
  opacity: 0.05;
  transition: opacity 0.5s ease 0.5s;
}
.popin.expanded .close {
  opacity: 1;
}
.popin:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100vw;
  height: 70vh;
  opacity: 0;
  background: no-repeat center right/contain url(../images/forme-logo-demi.svg);
  transition: opacity 0.5s ease 0s;
}
.popin .ajax {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.popin .ajax.on {
  opacity: 1;
}
.popin .ajax .popin-content {
  margin: 0;
  padding: 0;
}
.popin .close {
  position: fixed;
  z-index: 1;
  top: 2rem;
  right: 2rem;
  padding: 0 3rem 0 0;
  color: white;
  line-height: 2rem;
  text-transform: uppercase;
  text-align: right;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.5s ease 0.5s, color 0.5s ease;
}
.popin .close:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/croix-large.svg);
          mask: no-repeat center/contain url(../images/croix-large.svg);
  background: white;
  transition: background 0.5s ease;
}
.popin .close:hover {
  color: #0269E1;
}
.popin .close:hover:before {
  background: #0269E1;
}

@media (max-width: 1199px) {
  .popin .ajax {
    align-items: flex-start;
    padding: 6rem 0;
    overflow: auto;
  }
}
/* POPIN CONTENU */
.popin-content {
  width: 100%;
  position: relative;
  z-index: 1;
  margin: 10rem 0;
  padding: 0 0 0 22rem;
}
.popin-content.actualite .image img, .popin-content.histoire .image img {
  aspect-ratio: 1.2/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.popin-content.opportunite .caracteristiques {
  margin: 0 0 3rem;
}
.popin-content.produit .cartouche {
  margin: 0 0 4rem;
}
.popin-content.produit h4, .popin-content.produit .h4 {
  color: white;
  text-transform: uppercase;
}
.popin-content.produit .technique {
  margin: 0 0 3rem;
}
.popin-content.histoire h1, .popin-content.histoire .h1 {
  padding: 0 2rem;
}
.popin-content.histoire .contenu div:not(.image) {
  position: relative;
  padding: 4rem 0 0;
}
.popin-content.histoire .contenu div:not(.image):before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  transform: rotate(90deg);
  opacity: 1;
  background: no-repeat center/contain url(../images/forme-logo-demi.svg);
}
.popin-content > .container {
  width: 100%;
  flex: 0 1 auto;
}
.popin-content h1, .popin-content .h1 {
  font-size: var(--fontSizeLarge);
  font-weight: 700;
  margin: 0 0 2rem;
  text-align: left;
}
.popin-content ul {
  margin: 0 0 1rem 1rem;
}
.popin-content .detail {
  margin: 0 0 2rem;
}

@media (max-width: 1199px) {
  .popin-content .image {
    margin: 0 0 1rem;
  }
}
/* LOADER */
.loader {
  width: 3rem;
  height: 3rem;
  border: 5px solid white;
  border-bottom-color: #0269E1;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader.hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* REFERENCE / TYPE DE CONTRAT */
.contrat {
  display: flex;
  gap: 1rem;
}
.contrat span + span {
  position: relative;
}
.contrat span + span:before {
  content: "";
  position: absolute;
  top: 2px;
  left: -0.5rem;
  bottom: 2px;
  border-left: solid 2px #0269E1;
}

/* DATE DE PUBLICATION / LIEU / DATE DE DEBUT / SALAIRE / EX */
.publication, .lieu, .date-debut, .salaire, .experience {
  position: relative;
  padding: 0 0 0 2rem;
}
.publication.small, .lieu.small, .date-debut.small, .salaire.small, .experience.small {
  padding: 0 0 0 1.5rem;
}
.publication.small:before, .lieu.small:before, .date-debut.small:before, .salaire.small:before, .experience.small:before {
  width: 1rem;
}
.publication:before, .lieu:before, .date-debut:before, .salaire:before, .experience:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1.25rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/contain url(../images/localisation.svg);
          mask: no-repeat center/contain url(../images/localisation.svg);
  background: white;
}

.publication {
  font-style: italic;
  font-size: var(--fontSizeSmall);
  padding: 0 0 0 1.5rem;
}
.publication:before {
  width: 1rem;
  -webkit-mask: no-repeat center/contain url(../images/publication.svg);
          mask: no-repeat center/contain url(../images/publication.svg);
}

.lieu:before {
  -webkit-mask: no-repeat center/contain url(../images/localisation.svg);
          mask: no-repeat center/contain url(../images/localisation.svg);
}

.date-debut:before {
  -webkit-mask: no-repeat center/contain url(../images/publication.svg);
          mask: no-repeat center/contain url(../images/publication.svg);
}

.salaire:before {
  -webkit-mask: no-repeat center/contain url(../images/euro.svg);
          mask: no-repeat center/contain url(../images/euro.svg);
}

.experience:before {
  -webkit-mask: no-repeat center/contain url(../images/experience.svg);
          mask: no-repeat center/contain url(../images/experience.svg);
}/*# sourceMappingURL=style.css.map */