@charset "UTF-8";
@font-face {
  font-family: "Andika";
  src: url(../fonts/Andika-Regular.ttf);
}
@font-face {
  font-family: "Andika";
  src: url(../fonts/Andika-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: "Karla";
  src: url(../fonts/Karla-Regular.ttf);
}
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
  text-align: justify;
  -webkit-tap-highlight-color: transparent;
}
*::-moz-selection {
  color: #ffffff;
  background: #f8cacc;
}
*::selection {
  color: #ffffff;
  background: #f8cacc;
}

body {
  min-height: 100vh;
  padding-top: 10vh;
  overflow-x: hidden;
}
@media screen and (max-width: 640px) {
  body {
    padding-top: 0;
  }
}

h1 {
  color: #3262ac;
  margin: 50px 0 0;
  font-size: 5rem;
  font-family: Karla, serif;
  font-weight: 100;
  text-transform: uppercase;
  text-align: left;
  min-width: 70%;
}
h1 span {
  color: #f8cacc;
}
@media screen and (max-width: 980px) {
  h1 {
    font-size: 3rem;
    text-align: center;
  }
}
@media screen and (max-width: 570px) {
  h1 {
    font-size: 2rem;
  }
}

p {
  font-family: Andika, serif;
  font-size: 1.1rem;
}
@media screen and (max-width: 1400px) {
  p {
    font-size: 1rem;
  }
}

a {
  text-decoration: none;
  font-family: Andika, serif;
  color: black;
  cursor: pointer;
}

body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background: rgb(255, 255, 255);
}

body::-webkit-scrollbar-thumb {
  background-color: #f8cacc;
  border-radius: 20px;
}

.img-flèche-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}
.img-flèche-container #flècheRose1 {
  height: 150px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 980px) {
  .img-flèche-container #flècheRose1 {
    height: 100px;
  }
}
.img-flèche-container #flècheRose2 {
  height: 150px;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
@media screen and (max-width: 980px) {
  .img-flèche-container #flècheRose2 {
    height: 100px;
  }
}

Header {
  min-height: 90vh;
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 0;
}
Header .left-header {
  display: grid;
  grid-template-rows: 80% 20%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
}
Header .left-header h1 {
  margin: 0;
  padding: 0;
  font-size: 7.7rem;
  max-width: 65%;
}
@media screen and (max-width: 2000px) {
  Header .left-header h1 {
    font-size: 6rem;
  }
}
@media screen and (max-width: 1400px) {
  Header .left-header h1 {
    font-size: 4.5rem;
  }
}
@media screen and (max-width: 1150px) {
  Header .left-header h1 {
    text-align: center;
  }
}
@media screen and (max-width: 900px) {
  Header .left-header h1 {
    max-width: 70%;
    font-size: 4rem;
  }
}
@media screen and (max-width: 800px) {
  Header .left-header h1 {
    text-align: center;
    max-width: none;
  }
}
@media screen and (max-width: 600px) {
  Header .left-header h1 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 450px) {
  Header .left-header h1 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 360px) {
  Header .left-header h1 {
    font-size: 2.2rem;
  }
}
Header .left-header h2 {
  color: #3262ac;
  text-transform: uppercase;
  font-family: Andika, serif;
  font-weight: 100;
  min-width: 70%;
}
@media screen and (max-width: 1150px) {
  Header .left-header h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 900px) {
  Header .left-header h2 {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 1150px) {
  Header .left-header {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    grid-template-rows: 70% 30%;
  }
}
Header .right-header {
  background: url(../img/Accueil/photo-accueil.webp) no-repeat;
  background-position: right;
}
@media screen and (max-width: 1500px) {
  Header .right-header {
    background-size: cover;
  }
}
@media screen and (max-width: 1150px) {
  Header {
    grid-template-rows: 40% 60%;
    grid-template-columns: 1fr;
    min-height: 80vh;
  }
}

main .à-propos,
main .savoir-faire {
  min-height: 200px;
  display: grid;
  justify-items: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  grid-template-columns: 35% 65%;
  padding-top: 10vh;
  margin: 100px auto;
  width: 85%;
}
main .à-propos .left-container,
main .savoir-faire .left-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}
main .à-propos .left-container h3,
main .savoir-faire .left-container h3 {
  text-transform: uppercase;
  font-weight: 100;
  font-family: Andika, serif;
  padding: 15px 15px 0 5px;
}
@media screen and (max-width: 820px) {
  main .à-propos .left-container h3,
  main .savoir-faire .left-container h3 {
    padding: 0;
    text-align: center;
    font-weight: bold;
    font-size: 1.6rem;
  }
}
main .à-propos .left-container svg,
main .savoir-faire .left-container svg {
  height: 80px;
  -webkit-transform: rotate(348deg);
          transform: rotate(348deg);
}
@media screen and (max-width: 820px) {
  main .à-propos .left-container svg path,
  main .savoir-faire .left-container svg path {
    fill: #f8cacc;
  }
}
@media screen and (max-width: 820px) {
  main .à-propos .left-container svg,
  main .savoir-faire .left-container svg {
    height: 120px;
  }
}
@media screen and (max-width: 820px) {
  main .à-propos .left-container,
  main .savoir-faire .left-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
@media screen and (max-width: 820px) {
  main .à-propos p,
  main .savoir-faire p {
    padding: 0;
    margin-top: 30px;
  }
}
@media screen and (max-width: 820px) {
  main .à-propos,
  main .savoir-faire {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0;
    padding-top: 30px;
  }
}
@media screen and (max-width: 1500px) {
  main .à-propos,
  main .savoir-faire {
    width: 92%;
    margin: 0 auto;
  }
}
main .img-main-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  max-width: 70%;
  margin: 0 auto;
}
main .img-main-container img {
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.329);
          box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.329);
  max-width: 95%;
  width: 900px;
  margin: 60px 0;
  border-radius: 80px;
}
@media screen and (max-width: 1000px) {
  main .img-main-container img {
    border-radius: 50px;
    max-width: 100%;
  }
}
main .img-main-container #imgstitch {
  -ms-flex-item-align: start;
      align-self: flex-start;
}
@media screen and (max-width: 1000px) {
  main .img-main-container #imgstitch {
    -ms-flex-item-align: center;
        align-self: center;
  }
}
@media screen and (max-width: 1000px) {
  main .img-main-container {
    max-width: 90%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
main .sectionProjets {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 10vh;
}
main .sectionProjets .section-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #fdf7f7;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 50px 0;
  min-height: 800px;
}
main .sectionProjets .section-container ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  height: 100%;
}
main .sectionProjets .section-container ul li {
  font-family: Andika, serif;
  font-size: 2.5rem;
  cursor: pointer;
}
main .sectionProjets .section-container ul li a {
  color: rgba(48, 102, 173, 0.5607843137);
}
@media screen and (max-width: 1000px) {
  main .sectionProjets .section-container ul li {
    text-align: center;
  }
}
@media screen and (max-width: 600px) {
  main .sectionProjets .section-container ul li {
    font-size: 1.5rem;
  }
}
main .sectionProjets .section-container ul #web-design {
  color: #3262ac;
}
@media screen and (max-width: 1000px) {
  main .sectionProjets .section-container ul {
    margin: 0 auto 90px;
  }
}
main .sectionProjets .section-container .img-section-container {
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
main .sectionProjets .section-container .img-section-container .img-section {
  background-image: url("../img/Accueil/web-design.webp");
  background-position: top;
  background-size: cover;
  height: 500px;
  width: 500px;
  border-radius: 80px;
}
@media screen and (max-width: 1400px) {
  main .sectionProjets .section-container .img-section-container .img-section {
    height: 400px;
    width: 400px;
  }
}
@media screen and (max-width: 1000px) {
  main .sectionProjets .section-container .img-section-container .img-section {
    margin: 0 auto 70px;
  }
}
@media screen and (max-width: 600px) {
  main .sectionProjets .section-container .img-section-container .img-section {
    height: 300px;
    width: 300px;
  }
}
@media screen and (max-width: 400px) {
  main .sectionProjets .section-container .img-section-container .img-section {
    height: 270px;
    width: 270px;
  }
}
@media screen and (max-width: 1000px) {
  main .sectionProjets .section-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.sectionRéalisations {
  width: 85%;
  margin: 50px auto;
}
.sectionRéalisations .sectionRéalisations1 {
  margin: 50px 0;
}
.sectionRéalisations .sectionRéalisations1 .réalisations-container {
  display: grid;
  grid-template-columns: 40% 60%;
  margin: 50px 0;
}
.sectionRéalisations .sectionRéalisations1 .réalisations-container .image-realisations-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}
.sectionRéalisations .sectionRéalisations1 .réalisations-container .image-realisations-content img {
  max-width: 100%;
  max-height: 340px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1400px) {
  .sectionRéalisations .sectionRéalisations1 .réalisations-container .image-realisations-content img {
    max-height: 300px;
  }
}
@media screen and (max-width: 1080px) {
  .sectionRéalisations .sectionRéalisations1 .réalisations-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.sectionRéalisations .sectionRéalisations1 .image-réalisations-container {
  margin: 70px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 5px;
}
.sectionRéalisations .sectionRéalisations1 .image-réalisations-container img {
  margin: 5px 8px;
  max-height: 400px;
  max-width: 100%;
}
@media screen and (max-width: 600px) {
  .sectionRéalisations .sectionRéalisations1 .image-réalisations-container img {
    margin: 5px 0;
  }
}
.sectionRéalisations .sectionRéalisations2 p {
  margin: 40px auto;
}
.sectionRéalisations .sectionRéalisations2 .emote-réalisations-container {
  margin: 30px auto;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  width: 100%;
  height: 300px;
}
.sectionRéalisations .sectionRéalisations2 .emote-réalisations-container .carousel-emote-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  white-space: nowrap;
}
.sectionRéalisations .sectionRéalisations2 .emote-réalisations-container .emote-slide {
  max-height: 200px;
}
.sectionRéalisations .sectionRéalisations2 .emote-réalisations-container .emote-slide img {
  max-height: 200px;
  margin: 0 10px;
}
@media screen and (max-width: 600px) {
  .sectionRéalisations .sectionRéalisations2 .emote-réalisations-container .emote-slide img {
    max-height: 120px;
  }
}
@media screen and (max-width: 600px) {
  .sectionRéalisations .sectionRéalisations2 .emote-réalisations-container {
    height: 150px;
  }
}
@media screen and (max-width: 1400px) {
  .sectionRéalisations {
    width: 92%;
  }
}

.sectionWebDesign {
  padding: 0;
  width: 85%;
  margin: 0 auto;
}
.sectionWebDesign .section-container-webdesign-1,
.sectionWebDesign .section-container-webdesign-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.sectionWebDesign .section-container-webdesign-1 .webdesign-1-content,
.sectionWebDesign .section-container-webdesign-1 .webdesign-2-content,
.sectionWebDesign .section-container-webdesign-2 .webdesign-1-content,
.sectionWebDesign .section-container-webdesign-2 .webdesign-2-content {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: grid;
  margin: 0 auto;
  justify-items: center;
}
.sectionWebDesign .section-container-webdesign-1 .webdesign-1-content img,
.sectionWebDesign .section-container-webdesign-1 .webdesign-2-content img,
.sectionWebDesign .section-container-webdesign-2 .webdesign-1-content img,
.sectionWebDesign .section-container-webdesign-2 .webdesign-2-content img {
  max-width: 100%;
  border-radius: 50px;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.329);
          box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.329);
}
@media screen and (max-width: 1200px) {
  .sectionWebDesign .section-container-webdesign-1 .webdesign-1-content img,
  .sectionWebDesign .section-container-webdesign-1 .webdesign-2-content img,
  .sectionWebDesign .section-container-webdesign-2 .webdesign-1-content img,
  .sectionWebDesign .section-container-webdesign-2 .webdesign-2-content img {
    margin: 50px auto;
  }
}
@media screen and (max-width: 60px) {
  .sectionWebDesign .section-container-webdesign-1 .webdesign-1-content img,
  .sectionWebDesign .section-container-webdesign-1 .webdesign-2-content img,
  .sectionWebDesign .section-container-webdesign-2 .webdesign-1-content img,
  .sectionWebDesign .section-container-webdesign-2 .webdesign-2-content img {
    border-radius: 30px;
  }
}
.sectionWebDesign .section-container-webdesign-1 .webdesign-1-content #paragraphe-indent,
.sectionWebDesign .section-container-webdesign-1 .webdesign-2-content #paragraphe-indent,
.sectionWebDesign .section-container-webdesign-2 .webdesign-1-content #paragraphe-indent,
.sectionWebDesign .section-container-webdesign-2 .webdesign-2-content #paragraphe-indent {
  padding-left: 30px;
}
.sectionWebDesign .section-container-webdesign-1 .webdesign-1-content,
.sectionWebDesign .section-container-webdesign-2 .webdesign-1-content {
  grid-template-columns: 50% 50%;
  margin: 100px 0 50px;
}
.sectionWebDesign .section-container-webdesign-1 .webdesign-1-content p,
.sectionWebDesign .section-container-webdesign-2 .webdesign-1-content p {
  text-justify: auto;
  padding-right: 40px;
}
@media screen and (max-width: 1200px) {
  .sectionWebDesign .section-container-webdesign-1 .webdesign-1-content p,
  .sectionWebDesign .section-container-webdesign-2 .webdesign-1-content p {
    padding-right: 0;
  }
}
@media screen and (max-width: 1200px) {
  .sectionWebDesign .section-container-webdesign-1 .webdesign-1-content,
  .sectionWebDesign .section-container-webdesign-2 .webdesign-1-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 980px) {
  .sectionWebDesign .section-container-webdesign-1 .webdesign-1-content,
  .sectionWebDesign .section-container-webdesign-2 .webdesign-1-content {
    margin: 0 auto 50px;
  }
}
.sectionWebDesign .section-container-webdesign-1 .webdesign-2-content,
.sectionWebDesign .section-container-webdesign-2 .webdesign-2-content {
  grid-template-columns: 50% 50%;
  margin: 50px 0 80px;
}
.sectionWebDesign .section-container-webdesign-1 .webdesign-2-content p,
.sectionWebDesign .section-container-webdesign-2 .webdesign-2-content p {
  text-justify: auto;
  padding-left: 40px;
}
@media screen and (max-width: 1200px) {
  .sectionWebDesign .section-container-webdesign-1 .webdesign-2-content p,
  .sectionWebDesign .section-container-webdesign-2 .webdesign-2-content p {
    padding-left: 0;
  }
}
@media screen and (max-width: 1200px) {
  .sectionWebDesign .section-container-webdesign-1 .webdesign-2-content,
  .sectionWebDesign .section-container-webdesign-2 .webdesign-2-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 980px) {
  .sectionWebDesign .section-container-webdesign-1 .webdesign-2-content,
  .sectionWebDesign .section-container-webdesign-2 .webdesign-2-content {
    margin: 0 auto 50px;
  }
}
.sectionWebDesign .section-container-webdesign-1 a,
.sectionWebDesign .section-container-webdesign-2 a {
  text-decoration: underline;
}
.sectionWebDesign .section-container-webdesign-1 a:hover,
.sectionWebDesign .section-container-webdesign-2 a:hover {
  color: #f8cacc;
}
@media screen and (max-width: 1500px) {
  .sectionWebDesign {
    width: 92%;
  }
}

.sectionsCréations {
  width: 85%;
  margin: 70px auto;
}
.sectionsCréations .section-créations-container-1 {
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 80px auto;
  grid-template-columns: 60% 40%;
}
@media screen and (max-width: 900px) {
  .sectionsCréations .section-créations-container-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}
@media screen and (max-width: 640px) {
  .sectionsCréations .section-créations-container-1 {
    margin: 0 auto;
  }
}
.sectionsCréations .section-créations-container-2 {
  grid-template-columns: 40% 60%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: grid;
}
@media screen and (max-width: 900px) {
  .sectionsCréations .section-créations-container-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}
.sectionsCréations .carousel {
  height: 400px;
  position: relative;
}
.sectionsCréations .carousel button {
  position: absolute;
  background: none;
  border: none;
  outline: none;
  font-size: 2.5rem;
  z-index: 2;
  cursor: pointer;
  color: #f8cacc;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
}
.sectionsCréations .carousel #prev1,
.sectionsCréations .carousel #prev2 {
  left: 10%;
}
@media screen and (max-width: 600px) {
  .sectionsCréations .carousel #prev1,
  .sectionsCréations .carousel #prev2 {
    left: 0%;
  }
}
.sectionsCréations .carousel #next1,
.sectionsCréations .carousel #next2 {
  right: 10%;
}
@media screen and (max-width: 600px) {
  .sectionsCréations .carousel #next1,
  .sectionsCréations .carousel #next2 {
    right: 0%;
  }
}
.sectionsCréations .carousel ul .slide1,
.sectionsCréations .carousel ul .slide2 {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%;
  opacity: 0;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
.sectionsCréations .carousel ul .slide1 img,
.sectionsCréations .carousel ul .slide2 img {
  display: block;
  max-height: 100%;
  max-width: 80%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto;
}
.sectionsCréations .carousel ul .slide1.active1,
.sectionsCréations .carousel ul .slide2.active2 {
  opacity: 1;
}
@media screen and (max-width: 1400px) {
  .sectionsCréations .carousel {
    height: 350px;
  }
}
@media screen and (max-width: 900px) {
  .sectionsCréations .carousel {
    margin-top: 50px;
  }
}
.sectionsCréations p {
  margin-top: 30px;
}
@media screen and (max-width: 600px) {
  .sectionsCréations {
    width: 92%;
    margin: 50px auto;
  }
}

footer {
  background: #3262ac;
  color: white;
  padding: 35px 0 25px;
}
footer .footer-container {
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  grid-template-columns: 80% 20%;
}
footer .footer-container h4 {
  color: #f8cacc;
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-family: Andika, serif;
}
@media screen and (max-width: 970px) {
  footer .footer-container h4 {
    margin-top: 25px;
    text-align: center;
  }
}
footer .footer-container .infos {
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 8vw;
}
footer .footer-container .infos .infos-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
footer .footer-container .infos .infos-3 a {
  color: white;
  font-size: 1.1rem;
}
footer .footer-container .infos .infos-3 a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 970px) {
  footer .footer-container .infos .infos-3 a {
    text-align: center;
  }
}
footer .footer-container .infos p {
  padding-right: 20px;
}
@media screen and (max-width: 970px) {
  footer .footer-container .infos p {
    text-align: center;
    padding: 0;
  }
}
@media screen and (max-width: 1150px) {
  footer .footer-container .infos {
    padding-left: 3vh;
  }
}
@media screen and (max-width: 970px) {
  footer .footer-container .infos {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    justify-items: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0;
  }
}
footer .footer-container .back-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}
footer .footer-container .back-top a {
  color: white;
}
footer .footer-container .back-top a img {
  -webkit-transform: rotate(275deg) translateY(-27%);
          transform: rotate(275deg) translateY(-27%);
  width: 240px;
  margin-bottom: 20px;
}
@media screen and (max-width: 1150px) {
  footer .footer-container .back-top a img {
    width: 200px;
  }
}
footer .footer-container .back-top a p:hover {
  text-decoration: underline;
}
@media screen and (max-width: 970px) {
  footer .footer-container .back-top {
    display: none;
  }
}
@media screen and (max-width: 970px) {
  footer .footer-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 0 10px;
  }
}
@media screen and (max-width: 970px) {
  footer {
    padding: 0 0 15px;
  }
}
@media screen and (max-width: 640px) {
  footer {
    padding: 0 0 10vh 0;
  }
}

nav {
  position: fixed;
  z-index: 5;
  width: 100%;
  top: 0%;
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 3000px;
  max-width: 100vw;
  height: 10vh;
  margin: 0 auto;
  -webkit-box-shadow: 0 10px 10px -5px rgba(51, 98, 172, 0.2549019608);
          box-shadow: 0 10px 10px -5px rgba(51, 98, 172, 0.2549019608);
}
nav .logo-jb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 75%;
  padding-left: 35px;
}
nav .logo-jb img {
  max-height: 100%;
  cursor: pointer;
}
@media screen and (max-width: 640px) {
  nav .logo-jb {
    display: none;
  }
}
nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 35px;
  height: 100%;
}
nav ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 25px;
  height: 100%;
  text-transform: uppercase;
  font-size: 1.1rem;
  font-family: Andika, serif;
  font-weight: bold;
}
nav ul li .second-navbar {
  position: absolute;
  top: -1000px;
  right: 0;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
  z-index: -2;
  background: white;
  -webkit-box-shadow: 0 10px 10px -5px rgba(51, 98, 172, 0.2549019608);
          box-shadow: 0 10px 10px -5px rgba(51, 98, 172, 0.2549019608);
  opacity: 0.8;
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
  transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
  min-width: 10%;
}
nav ul li .second-navbar ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 0;
}
nav ul li .second-navbar ul li {
  font-size: 0.8rem;
  padding: 8px 0 8px 15px;
  cursor: pointer;
  width: 100%;
}
nav ul li .second-navbar ul li:hover {
  color: white;
  background: #f8cacc;
}
nav ul li .second-navbar ul li:hover a {
  color: white;
  background: none;
}
nav ul li .second-navbar ul li a::after {
  background: white;
}
@media screen and (max-width: 640px) {
  nav ul li .second-navbar ul li {
    font-size: 0.7rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 8px 0;
  }
}
@media screen and (max-width: 640px) {
  nav ul li .second-navbar {
    bottom: -1000px;
    left: 26%;
    right: 24%;
    top: auto;
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
    -webkit-box-shadow: 0px -6px 10px -5px rgba(51, 98, 172, 0.2549019608);
            box-shadow: 0px -6px 10px -5px rgba(51, 98, 172, 0.2549019608);
  }
}
nav ul li a {
  position: relative;
  cursor: pointer;
}
nav ul li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #3262ac;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
nav ul li a:hover {
  color: #3262ac;
}
nav ul li a:hover::after {
  width: 100%;
}
@media screen and (max-width: 1950px) {
  nav ul li {
    font-size: 1rem;
  }
}
@media screen and (max-width: 640px) {
  nav ul li {
    margin: 0;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 380px) {
  nav ul li {
    font-size: 0.8rem;
  }
}
nav ul #liProjets:hover .second-navbar {
  top: 100%;
  z-index: -5;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
@media screen and (max-width: 640px) {
  nav ul #liProjets:hover .second-navbar {
    top: auto;
    bottom: 100%;
  }
}
@media screen and (max-width: 640px) {
  nav ul {
    padding: 0;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  nav {
    height: 8vh;
    bottom: 0%;
    top: auto;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-shadow: -1px 3px 4px 4px rgba(51, 98, 172, 0.2549019608);
            box-shadow: -1px 3px 4px 4px rgba(51, 98, 172, 0.2549019608);
  }
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.863);
  z-index: 10;
  overflow: auto;
  -webkit-animation: lightboxIn 0.5s;
          animation: lightboxIn 0.5s;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.lightbox.small {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.lightbox.fadeOut {
  opacity: 0;
}

.lightbox__next,
.lightbox__prev {
  border: none;
  background: url(../img/icons/arrow.svg) center center/40px 60px no-repeat;
  width: 50px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 11;
}

.lightbox__prev {
  right: auto;
  left: 1%;
}
.lightbox__prev:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.lightbox__next {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  left: auto;
  right: 1%;
}
.lightbox__next:hover {
  -webkit-transform: scale(1.2) rotate(180deg);
          transform: scale(1.2) rotate(180deg);
}

.lightbox__close {
  width: 30px;
  height: 30px;
  border: none;
  background: url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.8624 12.0502L10.3122 7.5L14.8624 2.94983C14.9496 2.86158 14.9985 2.74252 14.9985 2.61846C14.9985 2.4944 14.9496 2.37534 14.8624 2.28709L12.7129 0.137619C12.6695 0.0939993 12.6178 0.0593887 12.5609 0.0357727C12.5041 0.0121567 12.4431 0 12.3815 0C12.32 0 12.259 0.0121567 12.2021 0.0357727C12.1453 0.0593887 12.0936 0.0939993 12.0502 0.137619L7.5 4.68778L2.94983 0.137619C2.86194 0.049751 2.74275 0.000389416 2.61846 0.000389416C2.49418 0.000389416 2.37498 0.049751 2.28709 0.137619L0.137619 2.28709C0.0939993 2.33055 0.0593887 2.38219 0.0357727 2.43906C0.0121567 2.49592 0 2.55689 0 2.61846C0 2.68004 0.0121567 2.741 0.0357727 2.79787C0.0593887 2.85473 0.0939993 2.90638 0.137619 2.94983L4.68778 7.5L0.137619 12.0502C0.049751 12.1381 0.000389416 12.2573 0.000389416 12.3815C0.000389416 12.5058 0.049751 12.625 0.137619 12.7129L2.28709 14.8624C2.33055 14.906 2.38219 14.9406 2.43906 14.9642C2.49592 14.9878 2.55689 15 2.61846 15C2.68004 15 2.741 14.9878 2.79787 14.9642C2.85473 14.9406 2.90638 14.906 2.94983 14.8624L7.5 10.3122L12.0502 14.8624C12.1381 14.9502 12.2573 14.9996 12.3815 14.9996C12.5058 14.9996 12.625 14.9502 12.7129 14.8624L14.8624 12.7129C14.906 12.6695 14.9406 12.6178 14.9642 12.5609C14.9878 12.5041 15 12.4431 15 12.3815C15 12.32 14.9878 12.259 14.9642 12.2021C14.9406 12.1453 14.906 12.0936 14.8624 12.0502Z" fill="white"/></svg>') center center/100% 100% no-repeat transparent;
  position: fixed;
  top: 5vh;
  right: 3%;
  z-index: 12;
}
.lightbox__close:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.lightbox button {
  opacity: 0.5;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  text-indent: -3000px;
}
.lightbox button:hover {
  opacity: 1;
}

.lightbox__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 50px;
  margin-right: 50px;
  min-height: 100vh;
}
.lightbox__container img {
  max-width: 100%;
  max-height: 80vh;
  height: auto;
  -webkit-animation: lightboxIn 0.5s;
          animation: lightboxIn 0.5s;
}

.lightbox__loader {
  width: 38px;
  height: 38px;
  opacity: 0.5;
  background: url(../img/icons/loader.svg) center center no-repeat;
}

@-webkit-keyframes lightboxIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes lightboxIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}/*# sourceMappingURL=index.css.map */