@charset "UTF-8";
body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #444;
}

.swal-button {
  padding: 8px 15px;
  background-color: #4A9459;
  font-size: 13px;
  color: white;
  font-weight: bold;
  border-radius: 6px;
}
.swal-button:focus {
  box-shadow: none;
}
.swal-button:not([disabled]):hover {
  background-color: #4A9459;
}

.swal-text {
  font-family: "Electrolize", sans-serif;
  text-align: center;
  color: #252c2a;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  padding: 0px;
}

.swal-text:first-child {
  margin-top: inherit;
}

.swal-modal {
  border-radius: 0;
  background-color: #d9d9d9;
  padding: 20px 30px;
  text-align: center;
  margin: 0px;
  max-width: 90%;
  width: inherit;
}

.swal-footer {
  text-align: inherit;
  padding: 0;
  margin-top: 15px;
}

body {
  background: #211d63;
  background: linear-gradient(0deg, #207944 0%, #252c2a 100%);
  height: 100vh;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
  overflow-x: hidden;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body,
html {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: default;
  outline: none;
}

.hidelink {
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

button,
a,
input,
a img {
  cursor: pointer;
}

.arrow-left :hover,
.arrow-right :hover {
  cursor: pointer;
}

#content1 {
  height: 100svh;
}

#project-description {
  text-transform: none;
  position: relative;
  /* contexte pour l'enfant */
  width: 100%;
  height: 100%;
  display: flex;
  /* utile pour centrer aussi */
  justify-content: center;
  align-items: center;
}

.project-details {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: auto;
  padding: 15px;
  background-color: #d9d9d9;
  border: 5px solid #207944;
  color: #207944;
  text-transform: initial;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.projets-items {
  justify-content: space-between;
  display: flex;
  align-items: center;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.img-more {
  height: 30px;
  width: auto;
}

p,
.nav__link,
.projets-items,
#project-link,
li a, .paragraphCS, .paragraph {
  font-family: "Electrolize", sans-serif;
  font-weight: 400;
  font-style: bold;
  line-height: 1.4;
  text-transform: uppercase;
}

.caseStudy {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.paragraph {
  color: #d9d9d9;
  font-size: 20px;
  margin-bottom: 50px;
  text-transform: none;
}
.paragraph:first-of-type, .paragraph:nth-of-type(3) {
  margin-bottom: 20px;
}

.paragraphCS {
  transform: rotate(-90deg);
  transform-origin: left;
  position: absolute;
  bottom: -8px;
  left: 16px;
  font-size: 20px;
  color: #d9d9d9;
}
.paragraphCS:hover {
  transform: rotate(-90deg) scaleX(0.95);
  transition: all 250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.titleh1 {
  font-size: 36px;
  text-align: center;
  margin-bottom: 50px;
  margin-top: 70px;
  font-weight: 900;
  font-weight: 900;
}

.titleCS, .titleh1 {
  font-family: "Electrolize", sans-serif;
  font-style: bold;
  text-transform: uppercase;
  color: #d9d9d9;
}

.titleCS {
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 26px;
}

.header {
  margin-top: 10px;
  margin-left: 10px;
}

.popup {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10000;
  color: #252c2a;
}

.popup-content {
  background: #d9d9d9;
  color: #252c2a;
  padding: 20px 30px;
  text-align: center;
  max-width: 300px;
}

.popup-ok {
  margin-top: 15px;
  padding: 8px 15px;
  border: none;
  background: #4A9459;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}

.popup .popup-content .popup-text {
  color: #252c2a;
  text-transform: none;
}

.projets:hover {
  background-color: none;
  color: #d9d9d9;
}

.projets-laptop {
  width: 100vw;
  height: 100vh;
  transform: scaleX(1.1);
}

.stroke-test {
  visibility: visible;
}

.svg-stroke {
  position: absolute;
  top: 45%;
  right: 0;
}

#content2 #content3,
#content4,
#content5 {
  margin-left: 16px;
  margin-top: 16px;
  margin-right: 16px;
}

#content2 {
  margin-left: 16px;
  margin-right: 8px;
}

.hidden {
  display: none !important;
}

.nav_button {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 10002;
  background-color: transparent;
  border: none;
}

body[data-menu] .nav {
  align-items: center;
  display: flex;
  margin: auto;
  position: fixed;
  justify-content: center;
  height: 100svh;
  width: 100vw;
  background: linear-gradient(0deg, #207944 0%, #252c2a 100%);
  z-index: 10001;
  top: 0;
}

body[data-menu] .nav-desktop {
  align-items: center;
  display: flex;
  margin: auto;
  position: fixed;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(0deg, #207944 0%, #252c2a 100%);
  z-index: 10001;
  top: 0;
}

body[data-menu] .nav__button--icon {
  z-index: 10001;
  position: relative;
}

.nav__list {
  text-align: center;
}

.nav__list--el {
  margin: 25px;
  width: 270px;
  text-transform: inherit;
}

.nav__list--el button {
  background: transparent;
  border: 5px solid #d9d9d9;
}

.close {
  height: 40px;
  width: 40px;
}

.ground {
  height: 35px;
  width: 35px;
}

#zone-projets {
  z-index: 300;
}

foreignObject {
  z-index: 1000000;
}

.svg-home {
  transform: scale(0.8, 0.9);
  position: absolute;
  bottom: 0;
  transform-origin: bottom center;
}

.svg-w {
  position: absolute;
  top: -40px;
  width: -webkit-fill-available;
}

.projets {
  z-index: -1000;
}
.projets-items a {
  color: #d9d9d9;
  text-transform: initial;
  width: 160px;
}

.switch {
  transform-origin: 475.5px 75.5px;
  transform-box: fill-box;
  transition: transform 2s ease;
  cursor: pointer;
}

.switch.active {
  transform: rotate(-33deg);
  transform-origin: top left;
}

.svg-intro {
  transition: opacity 1s ease;
  width: 85vw;
  margin-left: auto;
  display: flex;
  height: 100svh;
  margin-right: auto;
  filter: brightness(50%);
}

.svg-intro.show {
  opacity: 1;
}

.main-shape {
  fill: transparent;
  stroke: #4a9459;
  stroke-width: 7.5;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}

.main-shape.filled {
  stroke: white;
}

.switch.filled {
  stroke-dashoffset: 0;
  stroke: white;
}

.text-welcome {
  display: none;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.text-welcome.show {
  display: block;
  opacity: 1;
}

.intro {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  height: 100svh;
  background: black;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: pointer;
}

.test-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: drawLine 4s forwards;
          animation: drawLine 4s forwards;
}

.test-circle {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  opacity: 0;
  -webkit-animation: opacityCircle 0.5s ease-in forwards;
          animation: opacityCircle 0.5s ease-in forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.test-block {
  opacity: 0;
  -webkit-animation: opacityBlock 0.5s ease-in forwards;
          animation: opacityBlock 0.5s ease-in forwards;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.accueil .home-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

.accueil .home-circle {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  opacity: 0;
}

.accueil .home-block {
  opacity: 0;
}

/* Lancement seulement quand anim-start est ajouté */
.accueil.anim-start .home-line {
  -webkit-animation: drawLine 4s forwards;
          animation: drawLine 4s forwards;
}

.accueil.anim-start .home-circle {
  -webkit-animation: opacityCircle 0.5s ease-in forwards;
          animation: opacityCircle 0.5s ease-in forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.accueil.anim-start .home-block {
  -webkit-animation: opacityBlock 0.5s ease-in forwards;
          animation: opacityBlock 0.5s ease-in forwards;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

@-webkit-keyframes opacityBlock {
  to {
    opacity: 1;
  }
}

@keyframes opacityBlock {
  to {
    opacity: 1;
  }
}
@-webkit-keyframes opacityCircle {
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes opacityCircle {
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@-webkit-keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}
.square {
  height: 350px;
  width: 350px;
  border: 5px solid #4a9459;
}

.title-projets {
  font-size: 63px;
}

.title {
  font-size: 45px;
  line-height: 1.2;
  color: #d9d9d9;
}
.title.title:nth-of-type(2) {
  margin-left: 100px;
}

.svg {
  position: absolute;
  bottom: 0;
  right: 0;
}
.svg-nav {
  position: absolute;
  bottom: 0;
  transform: scale(0.8, 0.9);
  transform-origin: bottom center;
}

.navDesktop {
  height: 95vh;
  position: absolute;
  top: 0;
  width: 90vw;
  transform: scaleX(1.1);
}

.img-slider .slider-item img:not(.abeille):not(.square) {
  height: 230px;
  width: 350px;
  border: 5px solid #4a9459;
}

.diode {
  height: 40px;
  width: 40px;
}

.img-slider {
  height: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: -5px;
}
.img-slider.slider-item {
  text-align: center;
}

.slider-item {
  display: none;
}
.slider-item.show {
  display: block;
}

.svg-projets {
  margin-top: -35px;
}

.photo-title,
.creation-title,
.contact-title,
.projet-title {
  display: flex;
  flex-direction: row;
  margin-top: 100px;
}

.slider-nav {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.slider-nav li img {
  height: 50px;
  width: 50px;
}

.photo-svg {
  margin-top: 30px;
}

.contact-list button {
  background-color: transparent;
}

.contact-list {
  border: 5px #4a9459 solid;
  margin-top: -5px;
  padding: 100px 16px 60px 16px;
  z-index: 2000;
  position: relative;
}
.contact-list li {
  text-align: center;
  color: #d9d9d9;
  margin-bottom: 32px;
}
.contact-list li:last-of-type {
  margin-bottom: 0px;
  padding: 16px 32px 16px 32px;
  margin-top: 10px;
  border: 0 solid;
  background-color: #d9d9d9;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.contact-list li:last-of-type .btn-contact {
  color: #252c2a;
  text-transform: none;
}
.contact-list li:last-of-type button {
  color: #252c2a;
}
.contact-list li:last-of-type button a {
  color: #252c2a;
  font-family: "Electrolize", sans-serif;
  font-size: 24px;
}
.contact-list li:last-of-type buttonp {
  font-size: 18px;
}
.contact-list li:nth-of-type(3) {
  margin-bottom: 50px;
}

@media only screen and (min-width: 800px) {
  .contact-list {
    border: none;
  }

  #project-description {
    text-transform: none;
  }

  .project-details {
    transition: opacity 0.3s ease;
    opacity: 1;
    width: 45%;
    top: inherit;
    right: 30px;
    transform: inherit;
    bottom: 30px;
    height: auto;
    text-transform: inherit;
  }

  .projet-title,
.photo-title,
.creation-title,
.contact-title {
    margin-top: 0;
  }

  .img-slider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -38%);
  }

  .svg-more {
    transform: scale(0.7);
    transform-origin: center;
  }

  .svg-intro {
    width: 70vw;
  }

  ::-webkit-scrollbar {
    width: 5px;
  }

  ::-webkit-scrollbar-thumb {
    background: #d9d9d9;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  .caseStudy {
    width: 65%;
  }

  .titleh1 {
    margin-bottom: 60px;
  }

  .svg-w {
    height: 100vh;
    top: 0;
    transform: inherit;
  }

  .navDesktop {
    transform: inherit;
  }

  .svg-nav {
    transform: inherit;
    width: 100vw;
    height: 85svh;
  }

  .svg-home {
    transform: inherit;
    width: 100vw;
    height: 70svh;
  }

  .header {
    margin-left: 20px;
    margin-top: 20px;
  }

  .projets-tablet {
    margin-top: -40px;
  }

  .img-slider .slider-item img:not(.abeille):not(.square) {
    height: 40svh;
    width: 40vw;
  }

  .square {
    height: 350px;
    width: 350px;
  }

  .photo-svg {
    margin-top: 40px;
    margin-left: 5px;
  }

  .contact-list {
    width: 75vw;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
  }
  .contact-list li p {
    font-size: 20px;
  }
  .contact-list li:last-of-type .btn-contact {
    color: #252c2a;
    text-transform: none;
    font-size: 20px;
  }

  .contact-list li:nth-of-type(3) {
    margin-bottom: 100px;
  }

  .title {
    font-size: 67px;
  }
}
@media only screen and (min-width: 820px) and (max-width: 1182px) and (orientation: landscape) {
  .svg-home {
    height: 32.5svh;
    width: 32vw;
  }
}
@media only screen and (min-width: 1183px) {
  .svg-more-button {
    height: 40px;
    width: 40px;
    background-color: red;
  }

  .svg-more {
    scale: 0.6;
    transform-origin: center;
    z-index: 10000;
  }

  .hidden {
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
  }

  .text {
    transform: scaleX(0.95);
    transition: all 250ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  .svg-w {
    position: absolute;
    top: 0;
    height: 99.5svh;
    width: 100vw;
    transform: none;
  }

  .svg-home {
    position: absolute;
    bottom: 0;
    transform: inherit;
    display: inherit;
    justify-self: inherit;
  }

  .intro {
    width: 100vw;
    margin-left: inherit;
    align-content: center;
  }

  #project-link {
    display: inline-block;
    transition: transform 250ms cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
  }

  .svg-intro {
    width: inherit;
    margin-left: inherit;
    height: 70vh;
  }

  #project-link:hover {
    transform: scaleY(0.95);
    cursor: pointer;
  }

  .arrow-right:hover,
.arrow-left:hover {
    cursor: pointer;
  }

  .slider-nav--prev:hover, .slider-nav--prev img:hover,
.slider-nav--after:hover, .slider-nav--after img:hover {
    cursor: pointer;
  }

  .text:hover {
    cursor: pointer;
    transform: scaleY(0.95);
  }

  .title {
    font-size: 56px;
  }

  .ground,
.close {
    height: 30px;
    width: 30px;
  }

  .slider-item {
    display: none;
  }
  .slider-item.show {
    display: block;
  }

  .image-slider {
    margin-top: 160px;
    z-index: 2000;
    position: relative;
  }

  .img-slider {
    z-index: 2000;
  }
  .img-slider .slider-content .slider-item .abeille {
    height: 400px;
    width: 250px;
  }

  .square {
    height: 400px;
    width: 400px;
    border: 6.5px solid #4a9459;
  }

  .img-slider .slider-item img:not(.abeille):not(.square) {
    height: 260px;
    width: 400px;
    border: 5px solid #4a9459;
  }

  .nav_button {
    z-index: 10003;
  }

  .home-laptop {
    width: 100vw;
    height: 99.5vh;
  }

  .test:hover {
    fill: #d9d9d9;
    filter: drop-shadow(0px 0px 9px rgba(217, 217, 217, 0.8));
  }

  .btn-contact {
    font-size: 26px;
    margin-top: 14px;
    color: #d9d9d9;
    text-transform: inherit;
  }

  .contact-list {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    border: inherit;
    width: 50%;
    height: -webkit-fill-available;
  }
  .contact-list li {
    margin-bottom: 0;
    align-content: center;
    height: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .contact-list li a {
    color: #252c2a;
    text-transform: inherit;
  }
  .contact-list li:nth-of-type(3) {
    margin-bottom: 60px;
  }
  .contact-list li:last-of-type:hover {
    transform: scale(1.1);
    border: 1px solid;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
    outline-color: rgba(255, 255, 255, 0);
    outline-offset: 15px;
  }
}

/*# sourceMappingURL=app.css.map*/