@charset "UTF-8";
/* line 4, ../scss/main.scss */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
  transition: .3s;
}

/* line 27, ../scss/main.scss */
html {
  background-color: #29282D;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
      -webkit-font-smoothing: none;
      -webkit-font-smoothing: antialiased;
      -webkit-font-smoothing: subpixel-antialiased;
  */
  /*
      text-rendering: optimizeLegibility;
      text-rendering: geometricPrecision;
  */
}

/* line 48, ../scss/main.scss */
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

/* line 63, ../scss/main.scss */
img {
  max-width: 100%;
}

/* line 67, ../scss/main.scss */
a {
  text-decoration: none;
  font-family: "opensans";
}

/* -------------------------------------------------------- Typo */
@font-face {
  font-family: 'krona';
  src: url("fonts/KronaOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'opensans';
  src: url("fonts/OpenSans-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* -------------------------------------------------------- ANIMATION */
/* line 93, ../scss/main.scss */
main {
  opacity: 0;
  -moz-transition: opacity 250ms linear;
  -o-transition: opacity 250ms linear;
  -webkit-transition: opacity 250ms linear;
  transition: opacity 250ms linear;
}

/* line 97, ../scss/main.scss */
main.layoutComplete {
  opacity: 1;
}

/* -------------------------------------------------------- Common */
/* line 102, ../scss/main.scss */
#navDesktop {
  display: block;
}

/* line 102, ../scss/main.scss */
#navPhone {
  display: none;
}

/* line 103, ../scss/main.scss */
body {
  margin: 0;
  font-size: 100%;
  line-height: 1.5;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-x: hidden;
}

/* line 116, ../scss/main.scss */
h1 {
  color: #F5F4EB;
  font-family: "krona";
  font-size: 36px;
  font-weight: 400;
  line-height: 45px;
  letter-spacing: 0em;
  text-align: left;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* line 141, ../scss/main.scss */
h2 {
  color: #F5F4EB;
  font-family: "krona";
  text-transform: uppercase;
  font-size: 1.3em;
  margin-bottom: 4vh;
  line-height: 1.2;
  padding-bottom: .4em;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* line 156, ../scss/main.scss */
span {
  font-family: "krona";
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* line 166, ../scss/main.scss */
a {
  font-family: "krona";
  text-decoration: none;
}

/* line 175, ../scss/main.scss */
p {
  font-size: .9em;
  font-weight: 300;
  font-family: "opensans";
  color: #F5F4EB;
}

/* -------------------------------------------------------- SCROLL */
/* Style pour les navigateurs WebKit (Chrome, Safari) */
/* line 186, ../scss/main.scss */
::-webkit-scrollbar {
  width: 8px;
  /* Largeur de la barre de défilement */
  height: 8px;
  /* Hauteur de la barre de défilement */
}

/* line 191, ../scss/main.scss */
::-webkit-scrollbar-track {
  background: transparent;
  /* Fond de la piste de défilement */
}

/* line 195, ../scss/main.scss */
::-webkit-scrollbar-thumb {
  background-color: #685fe4;
  /* Couleur du curseur de défilement */
  border-radius: 10px;
  /* Arrondi du curseur de défilement */
  border: 2px solid transparent;
  /* Pour éviter que le fond apparaisse autour du curseur */
  background-clip: content-box;
  /* Pour éviter que le fond apparaisse autour du curseur */
}

/* Style pour Firefox */
/* line 203, ../scss/main.scss */
html {
  scrollbar-width: thin;
  /* Largeur de la barre de défilement */
  scrollbar-color: #685fe4 transparent;
  /* Couleur du curseur et fond transparent */
}

/* Style pour Internet Explorer et Edge */
@supports (-ms-overflow-style: none) {
  /* line 210, ../scss/main.scss */
  body {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* Barres de défilement auto-cachées pour IE/Edge */
  }
}
/* -------------------------------------------------------- Nav */
/* line 217, ../scss/main.scss */
.sticky-header__header {
  /* Stick to the top */
  background-color: #29282D;
  position: sticky;
  top: 0;
  margin-right: 0;
  margin-left: 0;
}

/* line 227, ../scss/main.scss */
.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
/* line 232, ../scss/main.scss */
.logo #logo {
  display: block;
  margin-left: 50px;
  width: 300px;
  height: 20vh;
  background-image: url("img/logo3.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
  background-color: transparent;
}
/* line 241, ../scss/main.scss */
.logo #logo:hover {
  cursor: pointer;
}

/* line 250, ../scss/main.scss */
.isActive a {
  text-decoration: underline;
  font-weight: 600;
}

/* -------------------------------------------------------- Content */
/* line 259, ../scss/main.scss */
.simple-grid {
  display: flex;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

/* line 265, ../scss/main.scss */
.simple-grid__cell--fill {
  flex: 1;
}

/* Cell with given width */
/* line 270, ../scss/main.scss */
.simple-grid__cell--1\/2 {
  flex: 0 0 50%;
}

/* line 273, ../scss/main.scss */
.simple-grid__cell--1\/3 {
  flex: 0 0 33.3333333%;
}

/* line 276, ../scss/main.scss */
.simple-grid__cell--1\/4 {
  flex: 0 0 25%;
}

/* line 279, ../scss/main.scss */
.simple-grid__cell--1\/5 {
  flex: 0 0 20%;
}

/* line 282, ../scss/main.scss */
.simple-grid__cell--1\/6 {
  flex: 0 0 16.66666666%;
}

/* line 285, ../scss/main.scss */
.simple-grid__cell--1\/8 {
  flex: 0 0 10%;
}

/* line 288, ../scss/main.scss */
.simple-grid__cell--1\/10 {
  flex: 0 0 10%;
}

/* line 291, ../scss/main.scss */
.simple-grid__cell--4\/6 {
  flex: 0 0 66.66666%;
}

/* line 295, ../scss/main.scss */
.simple-grid__cell--3\/4 {
  flex: 0 0 75%;
}

/* line 298, ../scss/main.scss */
.simple-grid__cell--4\/5 {
  flex: 0 0 80%;
}

/* line 301, ../scss/main.scss */
.simple-grid__cell--4\/4 {
  flex: 0 0 100%;
}

/* line 304, ../scss/main.scss */
.simple-grid__cell--2\/3 {
  flex: 0 0 66.66%;
}

/* line 307, ../scss/main.scss */
.simple-grid__cell--3\/8 {
  flex: 0 0 37.5%;
}

/* line 310, ../scss/main.scss */
.simple-grid__cell--gutter {
  flex: 0 0 5%;
}

/* -------------------------------------------------------- FOOTER */
/* line 314, ../scss/main.scss */
#sveg {
  position: fixed;
  width: 100px;
  height: 100px;
  top: 50px;
  left: auto;
  right: 50px;
}
/* line 321, ../scss/main.scss */
#sveg img {
  width: 100%;
  height: 100%;
}

/* line 326, ../scss/main.scss */
#sveg.article {
  top: 30px;
}

/* line 329, ../scss/main.scss */
#sveg.button-fixed {
  width: 50px;
  height: 50px;
  top: 50px;
  left: auto;
  right: 25px;
  transition: .5s;
}

/* line 338, ../scss/main.scss */
footer {
  background-color: #29282D;
  transform: translate(0, 50px);
  margin-bottom: 0;
  padding: 20px 50px 20px 50px;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* line 348, ../scss/main.scss */
footer h1 {
  color: #F5F4EB;
  display: block;
  margin-bottom: 5vh;
  border-bottom: solid 2px #685fe4;
  width: auto;
  font-size: 16pt;
  font-family: "krona";
}
/* line 357, ../scss/main.scss */
footer img {
  display: block;
  height: 20vh;
  background-color: #ffffff00 !important;
  margin-top: -10vh;
  background-color: #F5F4EB;
}
/* line 361, ../scss/main.scss */
footer img:hover {
  cursor: pointer;
}
/* line 368, ../scss/main.scss */
footer ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 90%;
}
/* line 373, ../scss/main.scss */
footer ul a {
  display: flex;
  flex-direction: row;
  width: 50%;
}
/* line 378, ../scss/main.scss */
footer ul a img {
  display: block;
  width: 50px;
  height: 50px;
  margin-top: 0;
}
/* line 388, ../scss/main.scss */
footer li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
}
/* line 393, ../scss/main.scss */
footer li a {
  display: block;
  width: 48%;
  padding: 5px;
  text-align: center;
  border: 2px solid #685fe4;
  color: #F5F4EB;
}
/* line 400, ../scss/main.scss */
footer li a:hover {
  border: 2px solid #F5F4EB;
}
/* line 406, ../scss/main.scss */
footer .footerImg {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* line 410, ../scss/main.scss */
footer .footerImg:hover {
  cursor: pointer;
}

/* line 415, ../scss/main.scss */
.footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-items: center;
  justify-content: center;
}
/* line 421, ../scss/main.scss */
.footer .titreFooter {
  padding-right: 5px;
}
/* line 422, ../scss/main.scss */
.footer .titreFooter h1 {
  font-size: 14pt;
}
/* line 427, ../scss/main.scss */
.footer .liensFooter {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 30%;
}

/* line 434, ../scss/main.scss */
.mentionsFooter {
  transform: translate(800px, -100px);
}
/* line 435, ../scss/main.scss */
.mentionsFooter li a {
  min-width: 200px;
  font-size: 10pt;
}

/* -------------------------------------------------------- HOME */
/* line 443, ../scss/main.scss */
.navHome {
  padding-left: 70px;
}
/* line 445, ../scss/main.scss */
.navHome:first-child {
  margin-top: 2vh;
}
/* line 448, ../scss/main.scss */
.navHome:last-child {
  margin-bottom: 10vh;
}
/* line 451, ../scss/main.scss */
.navHome .show {
  transition: .3s;
  display: block;
}
/* line 455, ../scss/main.scss */
.navHome .main {
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
  border: 1px solid #685fe4;
  width: 200px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-transform: uppercase;
  background-color: #29282D;
  color: #F5F4EB;
  font-size: 12pt;
  font-family: "krona";
  font-weight: 200;
  margin-bottom: 1vh;
  letter-spacing: .1em;
}
/* line 471, ../scss/main.scss */
.navHome .main:last-child {
  margin-bottom: 0;
}
/* line 474, ../scss/main.scss */
.navHome .main:hover {
  cursor: pointer;
}
/* line 478, ../scss/main.scss */
.navHome .second {
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
  border: 1px solid #685fe4;
  border-radius: 10px;
  min-width: 100px;
  max-width: auto;
  height: 25px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #29282D;
  color: #F5F4EB;
  text-transform: uppercase;
  font-size: 8pt;
  font-family: "krona";
  font-weight: 200;
  letter-spacing: .1em;
  white-space: nowrap;
  display: none;
  opacity: 0;
}
/* line 497, ../scss/main.scss */
.navHome .second:last-child {
  margin-bottom: 3vh;
}
/* line 500, ../scss/main.scss */
.navHome .second:hover {
  cursor: pointer;
}
/* line 505, ../scss/main.scss */
.navHome .active {
  background-color: #F5F4EB;
  color: #29282D;
}
/* line 510, ../scss/main.scss */
.navHome .second.show {
  display: block;
  opacity: 1;
  transition: .5s ease;
}

/* line 516, ../scss/main.scss */
.navHome li {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 5px;
}

/* line 522, ../scss/main.scss */
.mainHomeContent {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-top: 2vh;
  margin-bottom: 2vh;
}
/* line 528, ../scss/main.scss */
.mainHomeContent .item {
  position: relative;
  display: block;
  width: 400px;
  max-height: 400px;
  margin-left: 20px;
  margin-bottom: 20px;
  background-color: #29282D;
}
/* line 536, ../scss/main.scss */
.mainHomeContent .item img {
  width: 100%;
  height: 100%;
  opacity: 1;
}
/* line 541, ../scss/main.scss */
.mainHomeContent .item h1 {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  /* Réinitialisation de la marge par défaut du titre */
  color: #F5F4EB;
  opacity: 0;
  font-size: 14pt;
  line-height: 1.3em;
  font-family: "krona";
  text-align: center;
  z-index: 99;
}
/* line 557, ../scss/main.scss */
.mainHomeContent .item h2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 70%;
  left: 0;
  width: 100%;
  margin: 0;
  /* Réinitialisation de la marge par défaut du titre */
  color: #F5F4EB;
  opacity: 0;
  z-index: 99;
}
/* line 570, ../scss/main.scss */
.mainHomeContent .item h2 span {
  border: 1px solid #685fe4;
  border-radius: 10px;
  font-size: 8pt;
  font-family: "krona";
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  letter-spacing: .1em;
}
/* line 586, ../scss/main.scss */
.mainHomeContent .item:hover img {
  filter: grayscale(100%) blur(5px) brightness(60%);
  transition: .3s ease;
}
/* line 590, ../scss/main.scss */
.mainHomeContent .item:hover h1 {
  z-index: 99;
  opacity: 1;
  transition: .3s ease;
}
/* line 595, ../scss/main.scss */
.mainHomeContent .item:hover h2 {
  z-index: 99;
  opacity: 1;
  transition: .3s ease;
}

/* line 605, ../scss/main.scss */
.item.filterActive {
  display: none;
  transition: .3s;
}

/* line 609, ../scss/main.scss */
.item.filterActive.filtered {
  display: block;
  transition: .3s;
}

/* -------------------------------------------------------- ARTICLE */
/* line 615, ../scss/main.scss */
.headerPage {
  padding-bottom: 10px;
  background-color: #29282D;
}
/* line 618, ../scss/main.scss */
.headerPage .title {
  padding-top: 2vh;
  margin-right: 10vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
/* line 626, ../scss/main.scss */
.headerPage div:last-child {
  padding-right: 5vw;
}
/* line 629, ../scss/main.scss */
.headerPage p {
  color: #F5F4EB;
  font-size: 10pt;
  display: block;
  width: 90%;
  padding-right: 5vw;
  letter-spacing: .05em;
}
/* line 637, ../scss/main.scss */
.headerPage h1 {
  font-size: 20pt;
  color: #F5F4EB;
}
/* line 641, ../scss/main.scss */
.headerPage h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #685fe4;
  font-size: 12pt;
}

/* -------------------------------------------------------- ART */
/* line 650, ../scss/main.scss */
.artTexte p {
  padding-top: 15px;
}

/* -------------------------------------------------------- DESIGN */
/* line 656, ../scss/main.scss */
.pageDesign.headerPage {
  padding-bottom: 10px;
}

/* line 661, ../scss/main.scss */
.logo {
  padding: 0;
  margin: 0;
}

/* -------------------------------------------------------- MODAL IMG */
/* line 667, ../scss/main.scss */
.grid-image {
  margin-top: 10vh;
  margin-bottom: 10vh;
  margin-left: 10vw;
  margin-right: 10vw;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
/* line 675, ../scss/main.scss */
.grid-image .item {
  margin-left: 20px;
  margin-bottom: 50px;
  height: 50vh;
}
/* line 679, ../scss/main.scss */
.grid-image .item img {
  height: 100%;
  display: block;
}
/* line 683, ../scss/main.scss */
.grid-image .item p {
  margin-top: 10px;
  font-style: italic;
}

/* line 690, ../scss/main.scss */
.grid-image.pageDesign {
  margin-left: 2vw;
}

/* line 694, ../scss/main.scss */
.designText {
  margin-top: 10vh;
  margin-left: 5vw;
}

/* -------------------------------------------------------- NAVIGATION */
/* line 701, ../scss/main.scss */
.boutonNav .prev {
  position: fixed;
  top: 50%;
  left: 20px;
  background-image: url("img/avantPhone.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 40px;
  width: 40px;
}
/* line 711, ../scss/main.scss */
.boutonNav .prev:hover {
  cursor: pointer;
}
/* line 715, ../scss/main.scss */
.boutonNav .next {
  position: fixed;
  top: 50%;
  right: 20px;
  background-image: url("img/apresPhone.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 40px;
  width: 40px;
}
/* line 725, ../scss/main.scss */
.boutonNav .next:hover {
  cursor: pointer;
}

/* -------------------------------------------------------- MODAL IMG */
/* line 734, ../scss/main.scss */
#myModal {
  transition: .1s;
}

/* line 738, ../scss/main.scss */
.modal {
  z-index: 99;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* line 752, ../scss/main.scss */
.modal-content {
  max-width: 85%;
  max-height: 85%;
}

/* line 756, ../scss/main.scss */
.modal-title {
  color: #F5F4EB;
  transform: translateY(20px);
  font-size: 10pt;
  padding-top: 1%;
  padding-left: 5%;
  margin-top: 10px;
  display: block;
  font-style: italic;
  text-align: left;
  width: 100%;
}

/* line 768, ../scss/main.scss */
.close {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  color: #fff;
  font-size: 40px;
}

/* line 777, ../scss/main.scss */
.image-article {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 2vw;
}
/* line 783, ../scss/main.scss */
.image-article .item {
  height: auto;
  margin-bottom: 0;
}
/* line 786, ../scss/main.scss */
.image-article .item img {
  max-width: 100%;
  height: auto;
}
/* line 789, ../scss/main.scss */
.image-article .item img:hover {
  cursor: pointer;
}

/* line 797, ../scss/main.scss */
.headerSimple {
  margin-top: 5vh;
  margin-left: 5vw;
  margin-bottom: 5vh;
}
/* line 801, ../scss/main.scss */
.headerSimple div h1 {
  white-space: nowrap;
}

/* line 806, ../scss/main.scss */
.img-modal {
  padding-right: 30px;
  padding-left: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
/* line 815, ../scss/main.scss */
.img-modal img {
  max-width: 85%;
  max-height: 85%;
}
/* line 819, ../scss/main.scss */
.img-modal .prev-img {
  background-image: url("img/avantPhone.svg");
  background-position: center;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  height: 40px;
  width: 40px;
}
/* line 827, ../scss/main.scss */
.img-modal .prev-img:hover {
  cursor: pointer;
}
/* line 831, ../scss/main.scss */
.img-modal .next-img {
  background-image: url("img/apresPhone.svg");
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 40px;
  width: 40px;
}
/* line 839, ../scss/main.scss */
.img-modal .next-img:hover {
  cursor: pointer;
}

/* -------------------------------------------------------- BALISE */
/* line 847, ../scss/main.scss */
.big {
  font-size: 18pt;
}

/* line 851, ../scss/main.scss */
.tresbig {
  font-size: 24pt;
}

/* line 855, ../scss/main.scss */
.italic {
  font-family: "opensans";
  font-style: italic;
  letter-spacing: .05em;
}

/* line 861, ../scss/main.scss */
.underline {
  text-decoration: underline #685fe4;
}

/* line 865, ../scss/main.scss */
.bgcolor {
  background-color: #685fe4;
  padding: 2px;
}

/* line 870, ../scss/main.scss */
.colored {
  color: #685fe4;
}

/* line 874, ../scss/main.scss */
#gif {
  max-width: 500px;
}