/* IMPORT */

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
  font-size: 1px;
}



/* ----------- */


/* GENERIQUE */


/* ----------- */


body {
  cursor: none;
  font-family: poppins, sans-serif;
}

strong {
  font-weight: 600;
}

input {
  font-family: poppins, sans-serif;
}


















/* BARRE DEROULANTE */

body {
  overflow-x: hidden;
}

/* Webkit browsers */
::-webkit-scrollbar {
  width: 10rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: #b2b2b2;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #085A49;
}

















/* CURSEUR */


*:hover {
  cursor: none;
}

.circle.dark {
  fill: #eaff00;
}

.circle.light {
  fill: #022921;
}

.cursor {
  position: absolute;
  z-index: 100;
}














/* GO TO THE TOP */
#topBtn {
  opacity: 0;
  position: fixed;
  /* positionne le bouton en position fixe */
  bottom: 20rem;
  /* positionne le bouton à 20rem du bas */
  right: 30rem;
  /* positionne le bouton à 30rem de la droite */
  z-index: 99;
  /* assure que le bouton est au-dessus des autres éléments de la page */
  border: none;
  /* enlève la bordure */
  outline: none;
  /* enlève le focus */
  padding: 15rem;
  /* espace entre le texte et les bords du bouton */
  border-radius: 10rem;
  z-index: 120;
  transition: 0.5s ease-in-out;
}

#topBtn.active {
  opacity: 1;
}

#topBtn.dark {
  background-color: #eaff00;
}

#topBtn.dark:hover {
  border: 1rem solid #eaff00;
  background-color: transparent;
}

#topBtn.dark:hover .arrow-scroll-top {
  fill: #eaff00;
}

#topBtn.light {
  background-color: #022921;
}

#topBtn.light:hover {
  border: 1rem solid #022921;
  background-color: transparent;
}

#topBtn.light .arrow-scroll-top {
  fill: #eaff00;
}

#topBtn.light:hover .arrow-scroll-top {
  fill: #022921;
}















/* MENU BURGER */

.site-nav-menu {
  opacity: 0;
  transition: 0.3s ease-in-out;
  position: absolute;
}

.site-nav-menu.active {
  position: relative;
  z-index: 200;
  /* background-color: red; */
  opacity: 1;
  margin: auto;
  width: 1400rem;
  display: flex;
  align-items: center;
}

.site-nav-liste {
  /* background-color: orange; */
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.site-nav-item {
  font-size: 69rem;
  text-decoration: none;
  border: none;
  font-family: poppins, sans-serif;
}

.site-nav-item.dark {
  background-color: transparent;
  color: #eaff00;
  transition: 0.2s ease-in;
}

.site-nav-item.dark:hover {
  -webkit-text-stroke: 1rem #eaff00;
  color: transparent;
}

.site-nav-item.light {
  background-color: transparent;
  color: #022921;
  transition: 0.2s ease-in;
}

.site-nav-item.light:hover {
  -webkit-text-stroke: 2rem #022921;
  color: transparent;
}

.visible {
  display: block;
}

.hidden {
  display: none;
}

.svg-arrow-menu {
  opacity: 0;
  transition: 0.7s;
  transform: translateX(-10rem);
}

li:hover>.svg-arrow-menu {
  transform: translateX(0rem);
  opacity: 1;
}

.svg-arrow-menu-mode.dark {
  fill: #eaff00;
}

.svg-arrow-menu-mode.light {
  fill: #022921;
}



















/* MENU */

.site-header.hidden {
  display: block;
  width: 100%;
  height: 100vh;
}

.site-header.hidden.black {
  background-color: #022921;
}

.site-header.hidden.black {
  background-color: white;
}

.site-header.visible {
  display: block;
  width: 100%;
  min-height: 120rem;
}

.dark {
  background-color: #022921;
  transition: 0.5s;
}

.light {
  background-color: white;
  transition: 0.5s;
}

.site-header-wrapper {
  width: 1080rem;
  min-height: 120rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header-logo img {
  position: relative;
  z-index: 200;
  width: 150rem;
  height: 80rem;
}

.site-all-nav {
  width: 150rem;
  height: 80rem;
  display: flex;
  align-items: center;
}

.site-nav-burger {
  width: 55rem;
  height: auto;
  /* border: 1rem solid red; */
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 200;
}

.site-nav-burger-top {
  width: 100%;
  height: 22rem;
  margin-bottom: 3rem;
  transition: 0.2s;
  /* background: orange; */
  display: flex;
  justify-content: center;
}

.site-nav-burger-bottom {
  width: 100%;
  height: 22rem;
  display: flex;
  margin-top: 3rem;
  transition: 0.2s;
  /* background: green; */
  justify-content: center;
}

.site-nav-burger-square {
  border-radius: 4rem;
  width: 21rem;
  height: 21rem;
  margin: 0rem 3rem;
  transition: 0.2s;
}

.site-nav-burger-square.dark {
  background-color: #EBFD36;
}

.site-nav-burger-square.light {
  background-color: #022921;
}

.site-nav-burger:hover .site-nav-burger-square {
  margin: auto 2rem;
}

.site-nav-burger:hover .site-nav-burger-bottom {
  margin-top: 1rem;
}

.site-nav-burger:hover .site-nav-burger-top {
  margin-bottom: 1rem;
}

.site-toggle-theme {
  position: relative;
  z-index: 200;
  width: 60rem;
  height: 52rem;
  border-radius: 13rem;
  border: none;
  margin-right: 30rem;
  transition: 0.3s;
}

.site-toggle-theme.dark {
  background-color: #EBFD36;
}

.site-toggle-theme.dark:hover {
  border: 1rem solid #EBFD36;
  background-color: transparent;
  cursor: none;
}

.site-toggle-theme:hover .dark {
  fill: #EBFD36;
}

.site-toggle-theme.light {
  background-color: #022921;
}

.site-toggle-theme.light:hover {
  border: 1rem solid #022921;
  background-color: transparent;
  cursor: none;
}

.site-toggle-theme:hover .light {
  fill: #022921;
}

.site-toggle-theme .light path {
  fill: #EBFD36;
}











/* CONTACT */

.site-contact {
  width: 100%;
  min-height: 435rem;
  background-color: #085A49;
}

.site-contact-wrapper {
  margin: auto;
  width: 1425rem;
  min-height: 435rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-contact-wrapper-text {
  text-align: center;
  width: auto;
  height: auto;
}

.site-contact-wrapper h3 {
  margin-bottom: -20rem;
  text-align: center;
  font-size: 55rem;
  color: #EBFD36;
  font-weight: 500;
}

.site-contact-wrapper p {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.site-contact-wrapper button {
  border: none;
}







/* OVERLAY POP UP */

#overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  opacity: 0;
  background-color: rgb(0, 0, 0);
  transition: 0.5s ease-in-out;
}

#overlay.active {
  z-index: 400;
  opacity: 0.8;
}















/* FORM POP-UP */

.site-form-background {
  position: fixed;
  z-index: 400;
  width: 100%;
  height: 90vh;
  bottom: -200%;
  left: 0;
  right: 0;
  transition: bottom 0.5s ease-in-out;
  display: flex;
  align-items: center;
  background-color: #085A49;
}

.site-form-background.open {
  bottom: 0;
}

.site-form {
  position: fixed;
  z-index: 600;
  width: 100%;
  height: 90vh;
  bottom: -200%;
  left: 0;
  right: 0;
  transition: bottom 0.5s ease-in-out;
  /* background-color: orange; */
}

.site-form-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 1080rem;
  height: 100%;
  margin: auto;
  /* background-color: red; */
}

.site-form-left {
  width: 50%;
  height: 100%;
  /* background-color: green; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.site-form-right {
  width: 50%;
  height: 100%;
  background-image: url(../img/img_contact.jpg);
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


.site-form-wrapper .site-title {
  padding-bottom: 10rem;
  font-size: 60rem;
  font-weight: 600;
  text-transform: none;
}

.site-form.open {
  bottom: 0;
}

#close-site-form {
  position: absolute;
  top: -30rem;
  right: 0rem;
  border: none;
}

.site-form-wrapper .submit {
  border: none;
}

#close-site-form svg {
  transform: scaleY(-1);
}

#close-site-form:hover {
  border: 1rem solid #eaff00;
}

.site-form-wrapper .site-title {
  -webkit-text-stroke: 1rem #eaff00;
  color: transparent;
}

.site-form-top .site-text {
  line-height: 25rem;
  font-size: 18rem;
  font-weight: 400;
}

.site-form-contact input,
.site-form-wrapper textarea {
  padding-left: 5rem;
  font-family: poppins, sans-serif;
  border: 1rem solid white;
  background-color: transparent;
  color: white;
  font-size: 13rem;
  font-weight: 300;
}

.site-form-contact input {
  height: 30rem;
}

.site-form-wrapper textarea {
  padding-left: 5rem;
  height: 80rem;
}

::placeholder {
  font-family: 'Poppins';
  font-size: 12rem;
  opacity: 0.6;
  color: white;
  font-weight: 200;
  font-style: italic;
  padding-left: 5rem;
}

.site-form-content {
  width: 388rem;
  /* background-color: purple; */
}

.site-form-contact {
  /* background-color: yellow; */
  display: grid;
}

.site-form-contact label {
  font-size: 15rem;
  text-transform: uppercase;
  color: white;
  margin-bottom: 5rem;
}

.site-form-contact {
  margin-bottom: 30rem;
}





/* MESSAGE SEND */

.site-message-send {
  width: 100%;
  height: 50vh;
}

.site-message-send-wrapper {
  width: 1080rem;
  margin: 30rem auto;
}

.site-message-send-wrapper .site-title {
  padding-bottom: 30rem;
  font-weight: 600;
  font-size: 70rem;
  color: transparent;
  text-transform: none;
}

.site-message-send-wrapper .site-title.dark {
  -webkit-text-stroke: 1rem #eaff00;
  color: transparent;
}

.site-message-send-wrapper .site-title.light {
  -webkit-text-stroke: 1rem #022921;
  color: transparent;
}


.site-message-send-wrapper button {
  border: none;
  font-family: poppins, sans-serif;
}




/* FOOTER */

.site-footer {
  width: 100%;
  height: 230rem;
  position: relative;
  z-index: 200;
  overflow: hidden;
}

.site-footer-wrapper {
  width: 1080rem;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.site-footer-all-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.site-footer-content {
  width: 430rem;
  height: 80rem;
  /* background-color: purple; */
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.site-footer-title {
  font-size: 13rem;
  font-weight: 300;
  opacity: 0.7;
  text-transform: uppercase;
}

.site-footer-title.dark,
.site-footer-text.dark {
  color: white;
  background-color: transparent;
}

.site-footer-title.light,
.site-footer-text.light {
  color: #022921;
  background-color: transparent;
}

.site-footer-link {
  width: 195rem;
  display: flex;
  justify-content: space-between;
}

.site-footer-text {
  font-size: 15rem;
  color: white;
  text-decoration: none;
}

.site-footer-img {
  position: absolute;
  z-index: 100;
  width: 700rem;
  right: -150rem;
  top: -55rem;
  transform: rotate(10deg);
}

.site-footer-img img {
  width: 100%;
  height: auto;
}












/* -------- */

/* ACCUEIL */

/* -------- */





/* ANIMATION */



.site-main {
  width: 100%;
  min-height: 150rem;
}

.site-main-wrapper {
  width: 1080rem;
  min-height: 100rem;
  margin: auto;
  overflow: hidden;
}

.messagedefilant {
  display: block;
  padding: 50rem 0rem 10rem;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 150rem;
}

.messagedefilant div {
  position: absolute;
  min-width: 100%;
  /* au minimum la largeur du conteneur */
}

.messagedefilant div h1,
.messagedefilant div:after {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  white-space: nowrap;
  top: 0;
}

.messagedefilant div h1 {
  font-size: 140rem;
  font-weight: 700;
  color: transparent;
  text-transform: uppercase;
  animation: defilement 10s infinite linear;
}

.messagedefilant.dark div h1,
.messagedefilant.dark div:after {
  -webkit-text-stroke: 1rem #EBFD36;
}

.messagedefilant.light div h1,
.messagedefilant.light div:after {
  -webkit-text-stroke: 1rem #022921;
}

.messagedefilant div:after {
  color: transparent;
  font-weight: 700;
  font-size: 140rem;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-text);
  animation: defilement2 10s infinite linear;
}

@-moz-keyframes defilement {
  0% {
    margin-left: 0;
  }

  100% {
    margin-left: -115%;
  }
}

@-moz-keyframes defilement2 {
  0% {
    margin-left: 115%;
  }

  100% {
    margin-left: 0%;
  }
}

@keyframes defilement {
  0% {
    margin-left: 0;
  }

  100% {
    margin-left: -115%;
  }
}

@keyframes defilement2 {
  0% {
    margin-left: 115%;
  }

  100% {
    margin-left: 0%;
  }
}


.site-texte-fun {
  margin-left: 80rem;
  font-size: 10rem;
  font-weight: 400;
}

.site-texte-fun.dark {
  color: white;
}

.site-texte-fun.light {
  color: #022921;
}















/* ABOUT ME */


.site-aboutme {
  width: 100%;
  min-height: 650rem;
}

.site-aboutme-wrapper {
  width: 1425rem;
  min-height: 650rem;
  margin: auto;
  /* background-color: red; */
  display: flex;
  align-items: center;
  position: relative;
}

.site-aboutme-image {
  width: 710rem;
  height: 515rem;
  background-color: aliceblue;
}

.site-aboutme-image img {
  width: 100%;
  height: auto;
}

.site-aboutme-text {
  width: 742rem;
  padding: 60rem;
  min-height: 150rem;
  position: absolute;
  background-color: #085A49;
  right: 0%;
}

.site-aboutme-text h2 {
  color: #eaff00 !important;
  background-color: transparent;
  padding-bottom: 10rem;
}

.site-text {
  font-size: 16rem;
  line-height: 25rem;
  color: white;
  margin-bottom: 50rem;
}

.btn.yellow {
  font-family: 'Poppins';
  color: #022921;
  font-weight: 400;
  text-decoration: none;
  background-color: #EBFD36;
  border-radius: 40rem;
  padding: 20rem 40rem;
  position: relative;
  z-index: 200;
  transition: 0.2s;
}

.btn.yellow:hover {
  color: #EBFD36;
  border: 1rem solid #EBFD36;
  background: transparent;
}













/* WORKS */

.site-works {
  width: 100%;
  min-height: 1300rem;
}

.site-works.visible {
  display: flex;
  align-self: center;
}

.site-works-wrapper {
  width: 1080rem;
  min-height: 1000rem;
  margin: auto;
  text-align: center;
}

.site-title {
  font-weight: 200;
  font-size: 15rem;
  text-transform: uppercase;
  padding-bottom: 45rem;
  text-align: left;
}

.site-title.dark {
  color: #EBFD36;
}

.site-title.light {
  color: #022921;
}

.site-liste-works {
  margin-bottom: 50rem;
}

.site-item-work-line {
  display: block;
  width: 100%;
  height: 1rem;
}

.site-item-work-line.dark {
  background-color: white;
}

.site-item-work-line.light {
  background-color: #085A49;
}

.site-item-work-link {
  position: relative;
  z-index: 200;
  background-color: transparent;
  width: 100%;
  height: 240rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-item-work-link h4 {
  font-weight: 600;
  font-size: 45rem;
  width: 120rem;
}

.site-item-work-link.dark h4 {
  color: #eaff00;
}

.site-item-work-link.light h4 {
  color: #022921;
}

.site-item-work-link p {
  font-size: 17rem;
  font-weight: 200;
}

.site-item-work-link.dark p {
  color: white;
}

.site-item-work-link.light p {
  color: #085A49;
}

.btn {
  font-size: 14rem;
  font-weight: 400;
  text-decoration: none;
  border-radius: 40rem;
  padding: 20rem 40rem;
  position: relative;
  z-index: 200;
  transition: 0.2s;
}

.btn.dark {
  background-color: #EBFD36;
  color: #022921;
}

.btn.dark:hover {
  color: #EBFD36;
  border: 1rem solid #EBFD36;
  background: transparent;
}

.btn.light {
  background-color: #022921;
  color: #eaff00;
}

.btn.light:hover {
  color: #022921;
  border: 1rem solid #022921;
  background: transparent;
}

.btn svg {
  width: 15rem;
  margin-left: 10rem;
}

.btn:hover .svg-arrow {
  fill: #eaff00;
}

.btn.light .svg-arrow {
  fill: #eaff00;
}

.btn.light:hover .svg-arrow {
  fill: #022921;
}















/* -------------- */

/* REALISATIONS */

/* -------------- */


.site-main-realisations {
  width: 100%;
  min-height: 320rem;
}

.site-main-realisations-wrapper {
  width: 1080rem;
  margin: 30rem auto;
}

.site-main-realisations-wrapper .site-title {
  padding-bottom: 30rem;
  font-weight: 600;
  font-size: 70rem;
  color: transparent;
  text-transform: none;
}

.site-main-realisations-wrapper .site-title.dark {
  -webkit-text-stroke: 1rem #eaff00;
}

.site-main-realisations-wrapper .site-title.light {
  -webkit-text-stroke: 1rem #022921;
}


.site-main-realisations-wrapper .site-text.dark {
  width: 800rem;
  color: white;
}

.site-main-realisations-wrapper .site-text.light {
  width: 800rem;
  color: #085A49;
}









/* ALLS WORKS AND FILTER */

.site-filter-works {
  width: 100%;
  min-height: 100rem;
}

.site-filter-works-wrapper {
  width: 1080rem;
  margin: 50rem auto;
  position: relative;
  z-index: 200;
}

.all-filter {
  margin-bottom: 60rem;
}



/* Masquer les boutons de type radio */
input[type=radio] {
  display: none;
}

/* Ajouter un style de bouton pour les boutons de type radio */
input[type=radio]+label {
  position: relative;
  z-index: 200;
  padding: 10rem 20rem;
  font-size: 20rem;
  font-weight: 400;
  border-radius: 40rem;
  transition: 0.3s;
  margin-right: 35rem;
}

input[type=radio]+label.dark {
  border: 1rem solid #eaff00;
  color: #eaff00;
  background-color: transparent;
}

input[type=radio]+label.light {
  border: 1rem solid #022921;
  color: #022921;
  background-color: transparent;
}


/* Ajouter un style de bouton lorsqu'il est sélectionné */
input[type=radio]:checked+label.dark {
  background-color: #eaff00;
  color: #022921;
}

input[type=radio]:checked+label.light {
  background-color: #022921;
  color: #eaff00;
}

.all-works .site-item-work-link {
  height: 150rem;
}

.site-item-work-services {
  width: 300rem;
}

.all-works-title {
  font-size: 25rem;
  font-weight: 300;
  display: flex;
  justify-content: space-between;
  margin: 40rem auto;
  text-transform: uppercase;
}

.all-works-title.dark {
  color: #eaff00;
  background-color: transparent;
}

.all-works-title.light {
  color: #022921;
  background-color: transparent;
}

.all-works-title h3 {
  margin-top: 15rem;
}

.all-works-title h3:nth-child(1) {
  width: 140rem;
}

.all-works-title h3:nth-child(2) {
  width: 300rem;
}

























/* -------------- */

/* PROJECT WORK */

/* -------------- */

.site-main-realisations-details {
  margin-top: 70rem;
  display: flex;
  justify-content: space-between;
}

.site-main-realisations-details h1 {
  text-transform: normal;
}


.site-main-realisations-details-content h3 {
  font-size: 16rem;
  font-weight: 400;
  text-transform: uppercase;
}

.site-main-realisations-details-content.dark h3 {
  color: #022921;
}

.site-main-realisations-details-content.dark h3 {
  color: #EBFD36;
}

.site-main-realisations-details-content:nth-child(3) {
  text-align: right;
}

.site-main-realisations-details-content h4 {
  margin-top: 10rem;
  font-weight: 300;
  font-size: 15rem;
}

.site-main-realisations-details-content.dark h4 {
  color: white;
}

.site-main-realisations-details-content.light h4 {
  color: #085A49;
}








/* PICTURE PROJECT*/

.site-details-work {
  margin: 150rem 0rem 150rem 0rem;
  width: 100%;
  min-height: 500rem;
}

.site-details-work-wrapper {
  width: 1440rem;
  min-height: 500rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


.site-details-work-picture {
  margin-bottom: 20rem;
  overflow: hidden;
}

.site-details-work-picture img,
.site-details-work-picture video {
  width: 100%;
  height: auto;
}

.site-details-work-picture video {
  cursor: pointer;
}

video::-webkit-media-controls {
  position: relative;
  z-index: 200;
}

.site-details-work-btn {
  margin-top: 70rem;
}












/* -------------- */

/* ABOUT */

/* -------------- */


.site-main-about {
  width: 100%;
  min-height: 800rem;
  /* background-color: green; */
}

.site-main-about-wrapper {
  /* background-color: red; */
  width: 1440rem;
  margin: auto;
  min-height: 800rem;
  display: flex;
  align-items: center;
  position: relative;
}

.site-main-about-text {
  width: 60%;
  background-color: #085A49;
  min-height: 500rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  z-index: 1;
}

.site-main-about-text .site-title {
  margin: 50rem 80rem 0rem 80rem;
  font-weight: 600;
  font-size: 70rem;
  color: transparent;
  text-transform: none;
  background-color: transparent;
  -webkit-text-stroke: 1rem #eaff00;
}

.site-main-about-text .site-text {
  margin: 5rem 80rem 50rem 80rem;
}

.site-main-about-img {
  width: 70%;
  height: 750rem;
  background-color: aliceblue;
  position: absolute;
  right: 0%;
}



/* ABILITY */

.site-ability {
  width: 100%;
  min-height: 1400rem;
  display: flex;
  align-self: center;
}

.site-ability-wrapper {
  width: 1080rem;
  margin: auto;
}

.site-ability-wrapper h2 {
  margin-bottom: -20rem;
  font-size: 45rem;
  color: #EBFD36;
  font-weight: 500;
  text-transform: none;
}

.site-ability-content {
  margin-top: 70rem;
  display: flex;
  justify-content: flex-start;
}

.site-ability-content-left {
  margin-right: 120rem;
}

.site-ability-bloc {
  width: 525rem;
  height: auto;
  margin-bottom: 80rem;
  /* background-color: red; */
}

.site-ability-bloc h3 {
  padding-bottom: 10rem;
}

.site-ability-bloc p {
  margin-top: 15rem;
  margin-bottom: 0;
}

.site-text.light {
  color: #085A49;
}