* {
  box-sizing: border-box;
}

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

/* ANIMATION */
@keyframes bg-rotate {
  0% {
    background: #FFD800;
  }
  20% {
    background: #FF3F52;
  }
  40% {
    background: #F77C3B;
  }
  60% {
    background: #00DAB2;
  }
  80% {
    background: #C0FFB9;
  }
  100% {
    background: #FFD800;
  }
}
@keyframes color-rotate {
  0% {
    color: #FFD800;
  }
  20% {
    color: #FF3F52;
  }
  40% {
    color: #F77C3B;
  }
  60% {
    color: #00DAB2;
  }
  80% {
    color: #C0FFB9;
  }
  100% {
    color: #FFD800;
  }
}
@keyframes border-rotate {
  0% {
    border-color: #FFD800;
  }
  20% {
    border-color: #FF3F52;
  }
  40% {
    border-color: #F77C3B;
  }
  60% {
    border-color: #00DAB2;
  }
  80% {
    border-color: #C0FFB9;
  }
  100% {
    border-color: #FFD800;
  }
}
@keyframes scroll {
  from {
    transform: translateY(0rem);
  }
  to {
    transform: translateY(2rem);
  }
}
/* VAR */
:root {
  --width: 70%;
  --outside: 15%;
  --radius: 10rem;
  --marge: 5rem;
  --text1: 6rem;
  --text2: 3.75rem;
  --text3: 2.5rem;
  --text4: 2.25rem;
  --text5: 1.875rem;
  --text6: 1.5rem;
  --text7: 1.375rem;
  --text8: 1.1rem;
  --text9: 1.05rem;
}

@media (max-width: 1920px) {
  :root {
    --width: 90%;
    --outside: 5%;
  }
}
@media (max-width: 1400px) {
  :root {
    --text1: 4.8rem;
    --text2: 3rem;
    --text3: 2rem;
    --text4: 1.8rem;
    --text5: 1.5rem;
    --text6: 1.2rem;
    --text7: 1.15rem;
    --text8: 1.1rem;
    --text9: 1.05rem;
  }
}
@media (max-width: 991px) {
  :root {
    --width: 100%;
    --outside: 0%;
    --radius: 5rem;
    --marge: 2.5rem;
    --text1: 3.6rem;
    --text2: 2.25rem;
    --text3: 1.5rem;
    --text4: 1.5rem;
    --text5: 1.5rem;
    --text6: 1.2rem;
    --text7: 1rem;
    --text8: 1rem;
    --text9: 1rem;
  }
}
@media (max-width: 540px) {
  :root {
    --text1: 2.4rem;
  }
}
/*
    17px > 1.05rem
    19px > 1.1rem
    22px > 1.5rem
    30px > 1.875rem
    36px > 2.25rem
    40px > 2.5rem
    60px > 3.75rem
*/
html {
  font-size: 16px;
}

body {
  font-family: "Lexend Deca";
  font-size: 1rem;
  line-height: 1.5;
  color: black;
}

h1, h2, h3, p, ul {
  margin: 0;
  padding: 0;
}
h1:last-child, h2:last-child, h3:last-child, p:last-child, ul:last-child {
  margin-bottom: 0;
}

h1, .h1 {
  text-align: center;
  font-size: var(--text1);
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 var(--marge);
}
h1 span, .h1 span {
  display: inline-block;
  animation: color-rotate 6s linear infinite;
}

h2, .h2 {
  font-size: var(--text5);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 calc(var(--marge) * 0.5);
  position: relative;
}
h2.dashed, .h2.dashed {
  text-align: center;
  text-transform: uppercase;
}
h2.dashed span, .h2.dashed span {
  display: inline-block;
  position: relative;
  padding: 0 0 2rem;
}
h2.dashed span:after, .h2.dashed span:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  -webkit-mask: no-repeat center/auto 100% url(../images/separation-3.svg);
          mask: no-repeat center/auto 100% url(../images/separation-3.svg);
  background: black;
}
h2.bordered, .h2.bordered {
  margin: 0 0 1.5rem;
}
h2.bordered span, .h2.bordered span {
  display: inline-block;
  position: relative;
  padding: 0 0 2rem;
}
h2.bordered span:before, .h2.bordered span:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 6rem;
  height: 1rem;
  background: no-repeat center left/auto 100% url(../images/type.svg);
}

@media (max-width: 1199px) {
  h2.dashed span:after, .h2.dashed span:after {
    -webkit-mask: no-repeat center/auto 100% url(../images/type.svg);
            mask: no-repeat center/auto 100% url(../images/type.svg);
  }
}
h3, .h3 {
  font-size: var(--text4);
  line-height: 1.2;
  font-weight: 500;
  margin: 0 0 2rem;
}

h4, .h4 {
  font-size: var(--text6);
  line-height: 1.4;
  font-weight: 700;
  margin: 0;
}

p {
  margin: 0 0 2rem;
}

blockquote {
  padding: 0;
  margin: 0 0 2rem;
}

/* HEADER */
header {
  position: fixed;
  z-index: 2;
  width: var(--width);
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  transition: top 0.5s ease;
}
header.dark {
  background: black;
}
header.off {
  top: calc(var(--marge) * -2);
}
header .wrapper {
  width: 100%;
  background: #f8f8f8;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  padding: 2rem 3rem;
  border-radius: 2rem;
  border: solid 1px rgba(0, 0, 0, 0.025);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .wrapper nav ul {
  font-size: var(--text9);
  display: flex;
  align-items: center;
  list-style: none;
}
header .wrapper nav ul li {
  margin: 0 1.5rem;
}
header .wrapper nav ul li.instagram {
  width: 2.5rem;
  height: 2.5rem;
}
header .wrapper nav ul li.instagram a {
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat center/100% url(../images/instagram.svg);
}
header .wrapper nav ul li a:not(.btn) {
  display: inline-block;
  position: relative;
  text-decoration: none;
  font-weight: 600;
  animation: color-rotate 6s linear infinite;
  transition: color 0.5s ease;
}
header .wrapper nav ul li a:not(.btn):hover:before {
  opacity: 0;
}
header .wrapper nav ul li a:not(.btn):before {
  content: attr(data-lien);
  color: black;
  position: absolute;
  z-index: 1;
  top: 0rem;
  left: 0;
  transition: opacity 0.5s ease;
}
header .wrapper nav ul li .btn:hover {
  border: 0;
}
header .wrapper .logo {
  margin: 0 1rem;
  position: relative;
  top: 2px;
}
header .wrapper .logo a {
  display: block;
  width: 14rem;
  height: 2rem;
  -webkit-mask: no-repeat center/100% url(../images/logo.svg);
          mask: no-repeat center/100% url(../images/logo.svg);
  background: black;
}

@media (max-width: 991px) {
  header {
    position: relative;
    top: 0;
  }
  header.dark .wrapper .logo a {
    background: white;
  }
  header .wrapper {
    background: none;
    text-align: center;
    border: 0;
    box-shadow: none;
    padding: 2rem 0;
  }
  header .wrapper nav {
    display: none;
  }
  header .wrapper .logo {
    width: 100%;
  }
  header .wrapper .logo a {
    margin: auto;
  }
}
/* NAV MOBILE */
.mobile {
  display: none;
}

@media (max-width: 991px) {
  .mobile {
    position: fixed;
    z-index: 9;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .mobile.active > div > span em {
    background: no-repeat center/100% url(../images/close.svg);
  }
  .mobile.active nav {
    transform: translateY(0);
  }
  .mobile > div {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-top: solid 1px rgba(0, 0, 0, 0.05);
    height: 3rem;
  }
  .mobile > div > span, .mobile > div a {
    display: block;
    width: 50%;
    height: 3rem;
    line-height: 3rem;
  }
  .mobile > div > span.btn, .mobile > div a.btn {
    padding: 0;
    border-radius: 0;
    border: 0;
  }
  .mobile > div > span.btn:before, .mobile > div a.btn:before {
    content: none;
  }
  .mobile > div > span.btn span, .mobile > div a.btn span {
    border-radius: 0;
    display: block;
    width: 100%;
    padding: 0;
    color: black;
    background: none;
  }
  .mobile > div > span {
    background: white;
  }
  .mobile > div > span em {
    display: inline-block;
    width: 0.6rem;
    aspect-ratio: 1;
    background: no-repeat center/100% url(../images/open.svg);
  }
  .mobile nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    bottom: 3rem;
    height: calc(100vh - 3rem);
    left: 0;
    right: 0;
    transform: translateY(100%);
    background: #f8f8f8;
    transition: transform 0.5s ease;
  }
  .mobile nav ul li {
    list-style: none;
    text-align: center;
  }
  .mobile nav ul li.instagram {
    width: 2.5rem;
    height: 2.5rem;
    margin: 2.5rem auto 2rem;
  }
  .mobile nav ul li.instagram a {
    display: block;
    width: 100%;
    height: 100%;
    background: no-repeat center/100% url(../images/instagram.svg);
  }
  .mobile nav ul li a:not(.btn) {
    display: block;
    color: black;
    text-decoration: none;
    text-align: center;
    padding: 1rem;
  }
  .mobile nav .logo {
    margin: 0 0 2rem;
  }
}
/* FOOTER */
footer {
  position: relative;
  margin: calc(var(--marge) * -2) 0 0;
  background: white;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: calc(var(--marge) * 3) 0 calc(var(--marge) * 2);
  text-align: center;
  font-weight: 300;
}
footer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 18rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: no-repeat center/100% url(../images/disponible.svg);
}
footer p {
  margin: 0;
}
footer p a {
  font-size: var(--text2);
  line-height: var(--text2);
}
footer a:not(.email) {
  color: black;
  text-decoration: none;
}
footer a:not(.email):hover {
  text-decoration: underline;
}
footer a.email {
  position: relative;
  text-decoration: none;
  animation: color-rotate 6s infinite linear;
}
footer a.email:hover:before {
  opacity: 0;
}
footer a.email:before {
  content: attr(data-lien);
  color: black;
  position: absolute;
  z-index: 1;
  left: 0;
  line-height: var(--text2);
  transition: opacity 0.5s ease;
}
footer nav {
  margin: 2rem 0 0;
}
footer .disponibilite {
  font-size: var(--text5);
  font-weight: 800;
  margin: 0 0 1rem;
}
footer .copyright {
  font-size: 1rem;
}
footer .copyright a {
  font-size: 1rem;
}
footer .logo {
  margin: 0 0 1rem;
}
footer .logo img {
  width: 20rem;
}
footer .separation {
  position: relative;
  width: 100%;
  height: 1rem;
  -webkit-mask: no-repeat center/auto 100% url(../images/separation-7.svg);
          mask: no-repeat center/auto 100% url(../images/separation-7.svg);
  background: black; /*linear-gradient(45deg, $jauneClair, $jauneMoyen);*/
  margin: 3rem auto 5rem;
}

@media (max-width: 991px) {
  footer:before {
    width: 9rem;
  }
  footer .logo img {
    width: 10rem;
  }
}
@media (max-width: 540px) {
  footer p a {
    font-size: var(--text6);
    line-height: var(--text6);
  }
  footer p a.email:before {
    top: 3px;
    line-height: var(--text6);
  }
  footer .disponibilite {
    font-size: var(--text6);
    font-weight: 700;
    margin: 0 0 0.5rem;
  }
  footer .separation {
    -webkit-mask: no-repeat center/auto 100% url(../images/separation-1.svg);
            mask: no-repeat center/auto 100% url(../images/separation-1.svg);
    background: black;
    margin: 3rem auto;
  }
  footer .copyright {
    font-size: 0.85rem;
    line-height: 1.3;
  }
}
/* MAIN */
/* CLASSES */
/* TEXTE */
.text-left {
  text-align: left;
}

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

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

/* IMAGES */
.image.radius img {
  border-radius: 2rem;
}
.image img {
  width: 100%;
  display: block;
}

/* BTN */
.btn {
  font-size: var(--text9);
  color: white;
  font-weight: 700;
  text-decoration: none;
  animation: bg-rotate 6s infinite linear;
  display: inline-block;
  border-radius: 5rem;
  cursor: pointer;
  transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
  padding: 4px;
}
.btn.bordered span {
  background: white;
  color: black;
}
.btn:hover.bordered span {
  background: black;
  color: white;
}
.btn:hover span {
  background: white;
  color: black;
}
.btn span {
  padding: 0.75rem 2rem;
  display: block;
  background: black;
  border-radius: calc(5rem - 4px);
  transition: background 0.5s ease, color 0.5s ease;
}

.btns {
  margin: 0 0 calc(var(--marge) * 2);
}
.btns a {
  margin: 0 0 1.5rem;
}

@media (max-width: 991px) {
  .btns {
    margin: 0 0 calc(var(--marge) * 2);
  }
}
/* RETOUR EN HAUT */
.top {
  position: fixed;
  bottom: 5rem;
  right: 5rem;
  width: 5rem;
  aspect-ratio: 1;
  background: white;
  border: solid 6px black;
  border-radius: 50%;
  cursor: pointer;
  transition: border 0.5s ease;
}
.top:hover {
  border-color: #FFD800;
}
.top:hover:before {
  background: #FFD800;
}
.top:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
  -webkit-mask: no-repeat center/100% url(../images/top.svg);
          mask: no-repeat center/100% url(../images/top.svg);
  background: black;
  transition: background 0.5s ease;
}

/* LIEN AVEC FLECHE */
.lien {
  font-size: var(--text9);
  position: relative;
  display: inline-block;
  padding: 0 2.5rem 0 0;
  font-weight: 600;
  transition: transform 0.5s ease;
}
.lien:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/100% url(../images/lien.svg);
          mask: no-repeat center/100% url(../images/lien.svg);
  animation: bg-rotate 6s linear infinite;
}

a.lien {
  position: relative;
  text-decoration: none;
  animation: color-rotate 6s linear infinite;
}
a.lien:hover {
  transform: translateX(1rem);
}
a.lien:hover:before {
  opacity: 0;
}
a.lien:before {
  content: attr(data-lien);
  color: black;
  position: absolute;
  z-index: 1;
  left: 0;
  transition: opacity 0.5s ease;
}

/* FEATURED */
.featured {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: white;
  position: relative;
  padding: calc(var(--marge) * 2) 0 0 0;
  height: 100vh;
  border-radius: 0 0 var(--radius) var(--radius);
}
.featured h1 span, .featured .h1 span {
  position: relative;
  z-index: 1;
  font-weight: 300;
  animation: color-rotate 6s linear infinite;
}
.featured h1 span:before, .featured .h1 span:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.4rem -1.25rem;
  background: black;
  border-radius: 2rem;
}
.featured h1 strong, .featured .h1 strong {
  font-weight: 400;
}
.featured h1 br, .featured .h1 br {
  display: none;
}
.featured p {
  font-size: var(--text7);
  font-weight: 300;
  max-width: 75%;
  margin: 0 auto 2rem;
}
.featured p:last-child {
  margin: 0 auto;
}
.featured .oeil {
  position: absolute;
  top: 5rem;
  left: -9rem;
  width: 21rem;
  aspect-ratio: 1;
  background: no-repeat center/100% url(../images/oeil.svg);
}
.featured .doigt {
  position: absolute;
  bottom: 5rem;
  right: 5rem;
  width: 18rem;
  aspect-ratio: 1;
  background: no-repeat center/100% url(../images/doigts.svg);
}

@media (max-width: 1199px) {
  .featured .oeil, .featured .doigt {
    display: none;
  }
}
@media (max-width: 991px) {
  .featured {
    height: auto;
    padding: calc(var(--marge)) 0 calc(var(--marge) * 2) 0;
  }
  .featured h1 span:before, .featured .h1 span:before {
    border-radius: 1rem;
  }
  .featured h1 br, .featured .h1 br {
    display: block;
  }
}
@media (max-width: 540px) {
  .featured h1, .featured .h1 {
    line-height: 1.3;
  }
  .featured h1 span:before, .featured .h1 span:before {
    inset: -0.15rem -1.25rem;
  }
  .featured p {
    max-width: 100%;
  }
}
/* HEADER */
.header {
  padding: calc(var(--marge) * 3) var(--outside) 0;
  position: relative;
}
.header.dark {
  color: white;
  background: black;
}
.header.dark h2 span:after, .header.dark .h2 span:after {
  background: white;
}
.header h1, .header .h1 {
  font-size: var(--text1);
}
.header .loupe {
  position: absolute;
  top: 50%;
  right: 8rem;
  width: 18rem;
  aspect-ratio: 1;
  background: no-repeat center/100% url(../images/loupe.svg);
}
.header .introduction {
  max-width: 50%;
  margin: 0 auto 4rem;
  text-align: center;
  font-size: var(--text9);
}
.header .introduction p {
  font-weight: 300;
}
.header .introduction .annee {
  font-weight: 700;
}
.header .scroll {
  width: 5rem;
  aspect-ratio: 1;
  margin: 0 auto 5rem;
  -webkit-mask: no-repeat center/100% url(../images/scroll.svg);
          mask: no-repeat center/100% url(../images/scroll.svg);
  animation: bg-rotate 6s linear infinite, scroll 1s ease infinite alternate;
}
.header .separation {
  width: 100%;
  height: 1rem;
  background: no-repeat center/auto 100% url(../images/separation-11.svg);
  margin: auto;
}

@media (max-width: 1199px) {
  .header .loupe {
    display: none;
  }
  .header .introduction {
    max-width: 80%;
  }
}
@media (max-width: 991px) {
  .header {
    padding: calc(var(--marge)) var(--outside) 0;
  }
  .header .introduction {
    max-width: 100%;
  }
}
/* FILTRES */
.filtres {
  margin: calc(var(--marge) * 2) var(--outside) 0;
}
.filtres ul {
  display: flex;
  justify-content: center;
  list-style: none;
  font-size: var(--text6);
}
.filtres ul li {
  margin: 0 2.5rem;
  cursor: pointer;
  position: relative;
  animation: color-rotate 6s linear infinite;
}
.filtres ul li.active {
  font-weight: 700;
  animation: color-rotate 6s linear infinite;
}
.filtres ul li.active:before {
  opacity: 0;
}
.filtres ul li:hover:before {
  opacity: 0;
}
.filtres ul li:before {
  content: attr(data-lien);
  color: black;
  position: absolute;
  z-index: 1;
  top: 0rem;
  left: 0;
  transition: opacity 0.5s ease;
}

@media (max-width: 767px) {
  .filtres {
    display: none;
  }
}
/* NOS SERVICES */
.nos-services {
  font-size: var(--text9);
  padding: calc(var(--marge) * 2) var(--outside) calc(var(--marge) * 4);
  border-radius: 0 0 var(--radius) var(--radius);
}
.nos-services.bg {
  margin: calc(var(--marge) * -2) 0 0;
  padding: calc(var(--marge) * 4) var(--outside) calc(var(--marge) * 2);
  background: #f8f8f8;
}
.nos-services h2 {
  text-align: center;
}
.nos-services .service {
  display: flex;
  align-items: flex-start;
  position: relative;
  font-weight: 300;
  margin: 0 0 var(--marge);
  gap: 2rem;
}
.nos-services .service img {
  height: 10rem;
}
.nos-services .separation {
  width: 100%;
  height: 1rem;
  background: no-repeat center left/auto 100% url(../images/separation-7.svg);
  margin: 0rem auto var(--marge) 12rem;
}

@media (max-width: 1400px) {
  .nos-services .service {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 991px) {
  .nos-services .service {
    margin: 0 0 calc(var(--marge) * 2);
    gap: 0.5rem;
  }
  .nos-services .service img {
    width: 100%;
    max-width: 7rem;
  }
  .nos-services .separation {
    margin: 0 auto calc(var(--marge) * 2);
  }
}
/* PROJETS */
.projets {
  padding: calc(var(--marge) * 2) var(--outside) var(--marge);
}
.projets h2 {
  text-align: center;
}
.projets .projet {
  margin-bottom: var(--marge);
}
.projets .projet a {
  text-decoration: none;
  color: black;
}
.projets .projet a:hover .image .hover:before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(10);
  transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}
.projets .projet a:hover .image .hover:after {
  transform: translateX(0);
  transition: transform 0.5s ease 0.15s;
}
.projets .projet a:hover .image img {
  opacity: 0.8;
}
.projets .projet a:hover .lien {
  transform: translateX(1rem);
}
.projets .projet .image {
  position: relative;
  margin: 0 0 2rem;
}
.projets .projet .image .hover {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  overflow: hidden;
}
.projets .projet .image .hover:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.projets .projet .image .hover:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(50% - 2.5rem);
  left: calc(50% - 2.5rem);
  transform: translateX(-10rem);
  width: 5rem;
  height: 5rem;
  -webkit-mask: no-repeat center/contain url(../images/lien.svg);
          mask: no-repeat center/contain url(../images/lien.svg);
  animation: bg-rotate 6s infinite linear;
  transition: transform 0.5s ease 0s;
}
.projets .projet .image img {
  aspect-ratio: 1.4;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.5s ease;
}
.projets .projet .image p {
  position: absolute;
  font-size: var(--text9);
  font-weight: 700;
  background: white;
  top: 1.5rem;
  right: 1.5rem;
  border-radius: 2rem;
  padding: 0.5rem 1rem;
}
.projets .document {
  position: relative;
  font-size: var(--text9);
  font-weight: 300;
  margin: 0 0 1rem;
}

/* PITCH */
.pitch {
  margin: 0 var(--outside) calc(var(--marge) * 2);
}
.pitch .wrapper {
  color: white;
  font-size: var(--text2);
  font-weight: 300;
  text-align: center;
  border: solid 4px black;
  border-radius: 2rem;
  padding: calc(var(--marge) * 2) var(--marge);
  background: black;
}
.pitch .wrapper p {
  margin: 0;
}
.pitch .wrapper strong {
  font-weight: 500;
}
.pitch .wrapper .border {
  display: inline-block;
  border: solid 4px transparent;
  animation: border-rotate 6s infinite linear;
  border-radius: 2rem;
  padding: 0 1.5rem;
}
.pitch .wrapper .color {
  animation: color-rotate 6s infinite linear;
}

@media (max-width: 991px) {
  .pitch {
    margin: var(--marge) 0 calc(var(--marge) * 2);
  }
  .pitch .wrapper {
    line-height: 1.6;
  }
  .pitch .wrapper .border {
    border-radius: 1rem;
    padding: 0 0.75rem;
  }
}
/* TEMOIGNAGES */
.temoignages {
  padding: calc(var(--marge) * 2) var(--outside) calc(var(--marge) * 5);
  position: relative;
}
.temoignages.bg {
  background: #f8f8f8;
  border-radius: var(--radius) var(--radius) 0 0;
}
.temoignages .enveloppe {
  position: absolute;
  top: 0;
  right: calc(var(--marge) * 2);
  width: 20rem;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: no-repeat center/100% url(../images/temoignages.svg);
}
.temoignages .slider {
  margin: 0 0 5rem;
}
.temoignages .slider .temoignage {
  margin: 0 1rem 0;
}
.temoignages .temoignage {
  background: White;
  padding: var(--marge);
  border-radius: 2rem;
  margin: 0 1rem var(--marge);
}
.temoignages .temoignage.border {
  border: solid 2px black;
}
.temoignages .temoignage.alone {
  text-align: center;
  font-size: var(--text9);
  padding: var(--marge) calc(var(--marge) * 0.5) calc(var(--marge) * 0.5);
}
.temoignages .temoignage .auteur {
  font-size: var(--text9);
  text-align: right;
}
.temoignages .temoignage .auteur span {
  color: black;
}

@media (max-width: 1199px) {
  .temoignages .enveloppe {
    display: none;
  }
}
/* CLIENT */
.client {
  font-weight: 300;
  margin: calc(var(--marge) * 2) var(--outside) 0;
}
.client a:not(.lien) {
  color: black;
  text-decoration: underline;
}
.client a:not(.lien):hover {
  text-decoration: none;
}
.client .mission h2, .client .mission .h2 {
  text-transform: none;
  font-size: 2rem;
}

@media (max-width: 1400px) {
  .client .mission {
    margin: 0 0 var(--marge);
  }
}
/* DETAIL PROJET */
.detail-projet {
  padding: 5rem var(--outside) calc(var(--marge) * 2);
  text-align: center;
}
.detail-projet.p-bottom {
  margin-bottom: calc(var(--marge) * 3);
}
.detail-projet .image {
  margin: 0 0 2rem;
}

@media (max-width: 991px) {
  .detail-projet.p-bottom {
    margin-bottom: calc(var(--marge) * 5);
  }
}
/* AVIS */
.avis {
  padding: calc(var(--marge) * 2) var(--outside) calc(var(--marge) * 4);
  border-radius: var(--radius) var(--radius) 0 0;
  background: #f8f8f8;
}
.avis .wrapper {
  background: white;
  border-radius: 2rem;
  padding: calc(var(--marge) * 2) 2rem;
  margin: 0 0 2rem;
  position: relative;
}
.avis .wrapper blockquote {
  font-size: var(--text9);
  text-align: center;
}
.avis .wrapper .auteur {
  position: absolute;
  bottom: 1rem;
  right: 2rem;
  text-align: right;
}
.avis .wrapper .auteur span {
  color: #FFD800;
}

/* CONTACT */
.contact {
  padding: var(--marge) var(--outside) calc(var(--marge) * 5);
  background: black;
  color: white;
}
.contact button {
  border: 0;
}
.contact .form-group {
  margin: 0 0 3rem;
}
.contact .form-group.error label {
  color: #FF3F52;
}
.contact .form-group label {
  display: block;
  margin: 0 0 1rem;
  line-height: 1rem;
  transition: color 0.5s ease;
}
.contact .form-group .form-control, .contact .form-group .form-control-textarea {
  font-family: "Lexend Deca";
  font-size: 1rem;
  line-height: 3rem;
  width: 100%;
  height: 3rem;
  border-radius: 2rem;
  border: 0;
  padding: 0 1rem;
  outline: 0;
}
.contact .form-group .form-control-textarea {
  height: 27rem;
  padding: 2rem;
  resize: none;
}
.contact .required {
  margin: -2rem 0 2rem;
}
.contact .btn {
  color: white;
}
.contact .msg {
  color: #00DAB2;
  font-weight: 700;
  font-size: var(--text9);
  margin: var(--marge) 0 0;
  display: none;
}
.contact .msg.on {
  display: block;
}

/* OWL */
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: calc(50% - 1.5rem);
  width: 3rem;
  aspect-ratio: 1;
  -webkit-mask: no-repeat center/100% url(../images/lien.svg);
          mask: no-repeat center/100% url(../images/lien.svg);
  animation: bg-rotate 6s linear infinite;
}
.owl-carousel .owl-nav button.owl-prev:hover:before, .owl-carousel .owl-nav button.owl-next:hover:before {
  opacity: 0;
}
.owl-carousel .owl-nav button.owl-prev:before, .owl-carousel .owl-nav button.owl-next:before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: no-repeat center/100% url(../images/lien.svg);
          mask: no-repeat center/100% url(../images/lien.svg);
  background: black;
  transition: opacity 0.5s ease;
}
.owl-carousel .owl-nav button.owl-prev span, .owl-carousel .owl-nav button.owl-next span {
  display: none;
}
.owl-carousel .owl-nav button.owl-prev {
  left: -3rem;
  transform: rotate(180deg);
}
.owl-carousel .owl-nav button.owl-next {
  right: -3rem;
}
.owl-carousel .owl-dots {
  display: flex;
  justify-content: center;
  margin: 2rem 0 0;
}
.owl-carousel .owl-dots .owl-dot {
  width: 0.75rem;
  aspect-ratio: 1;
  background: black;
  border-radius: 1rem;
  margin: 0 0.25rem;
}
.owl-carousel .owl-dots .owl-dot.active {
  animation: bg-rotate 6s linear infinite;
}

/* GENERIQUE */
.generique {
  line-height: 1.7;
  padding: var(--marge) var(--outside) calc(var(--marge) * 4);
}
.generique a {
  color: black;
}

/*
--text1: 6rem;
--text2: 3.75rem;
--text3: 2.5rem;
--text4: 2.25rem;
--text5: 1.875rem;
--text6: 1.5rem;
--text7: 1.375rem;
--text8: 1.1rem;
--text9: 1.05rem;
*/
.generique-seo {
  line-height: 1.7;
  padding: var(--marge) var(--outside) calc(var(--marge) * 4);
}
.generique-seo h2 {
  font-size: var(--text9);
  font-weight: 700;
  margin: 0 0 1rem;
}
.generique-seo h3 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  margin: 0;
  padding: 0 0 0 1.5rem;
}
.generique-seo h3:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1rem;
  aspect-ratio: 1;
  background: no-repeat center left/100% url(../images/titre-3.svg);
}
.generique-seo p:last-child {
  margin: 0 0 2rem;
}
.generique-seo a {
  color: black;
}/*# sourceMappingURL=styles.css.map */