@charset "UTF-8";
/* line 1, app_site/static/scss/app_site/page_realisations/style.scss */
h1 {
  text-align: center;
  margin: 3rem auto 6rem;
  max-width: 90%; }

/* line 7, app_site/static/scss/app_site/page_realisations/style.scss */
#main {
  background-color: #e5e5e5 !important;
  position: relative;
  overflow: hidden; }

/* Div "en savoir +" au survol */
/* line 17, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation .details-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(241, 241, 241, 0.5);
  opacity: 0;
  transition: 0.25s opacity ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-index-realisation-overlay); }

/* line 32, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation .details-hover:hover {
  opacity: 1;
  cursor: pointer; }

/* line 37, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation .details-hover > .plus-overlay {
  background-color: white;
  border-radius: 15rem;
  height: 13rem;
  width: 13rem;
  display: flex;
  justify-content: center;
  align-items: center;
  scale: 0;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.5);
  transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s, background-color 0.3s ease-in 0.2s; }

@keyframes pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }

/* line 62, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation .details-hover:hover > .plus-overlay {
  scale: 100%;
  background-color: var(--red-400);
  animation: pulse 1s infinite ease-in-out; }

/* line 68, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation .details-hover > .plus-overlay > p {
  color: black;
  transition: color 0.3s ease-in 0.2s; }

/* line 73, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation .details-hover:hover > .plus-overlay > p {
  color: white; }

/* line 77, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation > img {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  height: 4rem;
  width: 4rem;
  border-radius: 5rem;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 -2px 4px 0 rgba(0, 0, 0, 0.25);
  animation: pulse 1s infinite ease-in-out; }

/* DRAWER */
/* line 90, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer {
  --drawer-bg: #F0F4FB;
  --padding-top-content: 2rem;
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  right: -100vw;
  transition: right 0.5s ease-out;
  display: flex;
  z-index: var(--z-index-drawer); }
  /* line 103, app_site/static/scss/app_site/page_realisations/style.scss */
  #drawer.open {
    right: 0; }
    /* line 106, app_site/static/scss/app_site/page_realisations/style.scss */
    #drawer.open #drawer-container {
      box-shadow: -20px 0 10px 0 rgba(0, 0, 0, 0.25); }
  /* line 111, app_site/static/scss/app_site/page_realisations/style.scss */
  #drawer #drawer-container {
    position: fixed;
    width: 100%;
    max-width: 100%;
    background-color: var(--drawer-bg);
    padding-top: var(--padding-top-content);
    height: 100%;
    margin-left: auto;
    display: flex;
    flex-direction: column; }
  /* line 123, app_site/static/scss/app_site/page_realisations/style.scss */
  #drawer #drawer-close {
    height: 100%;
    flex: 1;
    cursor: e-resize; }

/* DRAWER - HEADER */
/* line 132, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .header {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
  height: 8rem; }
  /* line 140, app_site/static/scss/app_site/page_realisations/style.scss */
  #drawer .header > img {
    height: 3rem;
    position: absolute;
    top: -1rem;
    left: 2rem;
    cursor: pointer; }
  /* line 148, app_site/static/scss/app_site/page_realisations/style.scss */
  #drawer .header > .title {
    display: flex; }
    /* line 151, app_site/static/scss/app_site/page_realisations/style.scss */
    #drawer .header > .title h2 {
      max-width: 48rem;
      text-align: center;
      font-size: var(--size-h3); }
  /* line 158, app_site/static/scss/app_site/page_realisations/style.scss */
  #drawer .header > .next-project {
    cursor: pointer;
    display: flex;
    align-items: center;
    position: absolute;
    right: 1rem;
    top: 0; }
    /* line 166, app_site/static/scss/app_site/page_realisations/style.scss */
    #drawer .header > .next-project > img {
      height: 3rem;
      padding-left: 1rem; }
    /* line 171, app_site/static/scss/app_site/page_realisations/style.scss */
    #drawer .header > .next-project > p {
      transition: color 0.25s ease-in; }
    /* line 175, app_site/static/scss/app_site/page_realisations/style.scss */
    #drawer .header > .next-project:hover > p {
      color: var(--red-400); }
  /* line 180, app_site/static/scss/app_site/page_realisations/style.scss */
  #drawer .header > .url {
    font-family: var(--font-3);
    margin-top: 1rem;
    background-color: var(--red-400);
    color: white;
    padding: 0.5rem 4rem;
    border-radius: 5rem;
    font-size: var(--size-p3);
    transition: background-color 0.25s ease-in, color 0.25s ease-in; }
    /* line 190, app_site/static/scss/app_site/page_realisations/style.scss */
    #drawer .header > .url:hover {
      background-color: var(--red-300);
      color: white; }

/* line 197, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .header > .url:hover {
  background-color: var(--red-300);
  color: white; }

/* Contenu du drawer */
/* line 204, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container {
  /*overflow: scroll;*/
  height: calc(100vh - var(--padding-top-content) - 8rem);
  display: flex;
  gap: 1rem;
  margin-top: 1rem; }

/* Contenu gauche */
/* line 214, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left {
  flex: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

/* line 222, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left > .img-container {
  position: relative;
  /*display: flex;*/
  display: none; }

/* line 228, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer.website .content-container > .content.left > .img-container.desktop {
  display: flex; }

/* line 232, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer.mobile_app .content-container > .content.left > .img-container.mobile {
  display: flex; }

/* line 236, app_site/static/scss/app_site/page_realisations/style.scss */
#img-container-mobile {
  align-items: center;
  height: 70vh; }

/* line 241, app_site/static/scss/app_site/page_realisations/style.scss */
#img-container-mobile img {
  height: 100%;
  border-radius: 2rem; }

/* line 246, app_site/static/scss/app_site/page_realisations/style.scss */
#img-container-mobile .screen {
  background-color: transparent !important;
  top: 4% !important;
  bottom: 8% !important;
  left: 11% !important;
  right: 11% !important; }

/* line 254, app_site/static/scss/app_site/page_realisations/style.scss */
#img-container-mobile .screen > .arrow > .img {
  height: 10% !important; }

/* line 258, app_site/static/scss/app_site/page_realisations/style.scss */
#img-container-mobile .screen > .left-arrow {
  left: -11rem !important; }

/* line 262, app_site/static/scss/app_site/page_realisations/style.scss */
#img-container-mobile .screen > .right-arrow {
  right: -11rem !important; }

/* line 266, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left > .img-container > .screen-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

/* line 274, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left .screen-container > .screen {
  position: absolute;
  top: 7.8%;
  bottom: 22.5%;
  left: 13%;
  right: 13.5%;
  background-color: #d3d3d3;
  display: flex;
  flex-direction: column; }

/* line 285, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left .screen-container > .screen .screen-img {
  width: 100%; }

/* line 289, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left .screen-container > .screen .images-carousel {
  display: flex; }

/* line 293, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left .screen > .arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  display: flex;
  align-items: center;
  cursor: pointer; }

/* line 303, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left .screen > .left-arrow {
  left: 0;
  padding-left: 1rem; }

/* line 308, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left .screen > .left-arrow:hover img,
#drawer .content-container > .content.left .screen > .right-arrow:hover img {
  opacity: 95%;
  background-color: var(--gray-300); }

/* line 314, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left .screen > .right-arrow {
  right: 0;
  flex-direction: row-reverse;
  padding-right: 1rem; }

/* line 320, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left .screen > .arrow > .img {
  height: 20%; }

/* line 324, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left .screen > .arrow img {
  background-color: var(--gray-200);
  padding: 2rem;
  border-radius: 50rem;
  opacity: 67.5%;
  height: 100%;
  min-height: 7rem; }

/* line 333, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.left .screen > .left-arrow img {
  rotate: 180deg; }

/* Contenu droit */
/* line 339, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.right {
  flex: 5;
  position: relative;
  padding-bottom: 10rem; }

/* line 345, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.right > .bg {
  position: absolute;
  inset: 0; }

/* line 350, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.right > .bg img {
  height: 100%;
  width: 100%; }

/* line 355, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.right > .bg .texts {
  position: absolute;
  top: 21%;
  left: 11%;
  padding-right: 1rem;
  display: flex;
  flex-direction: column;
  /*gap: 2rem;*/
  overflow: scroll;
  height: 76%; }

/* line 367, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.right > .bg .texts p {
  margin: 1rem; }

/* line 371, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.right > .bg .texts ul {
  /*list-style-type: none;*/
  position: relative;
  top: -1rem;
  padding-left: 1.5rem; }

/* line 378, app_site/static/scss/app_site/page_realisations/style.scss */
#drawer .content-container > .content.right > .bg .texts li {
  margin-bottom: 0.5rem; }

/* Section titre */
/* line 386, app_site/static/scss/app_site/page_realisations/style.scss */
#title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: var(--padding-top-content); }

/* Section tableau réalisations */
/* line 398, app_site/static/scss/app_site/page_realisations/style.scss */
#realisations {
  display: flex;
  width: 95%;
  max-width: 120rem;
  margin: auto;
  gap: 2.4rem;
  padding-bottom: 8rem; }

/* line 407, app_site/static/scss/app_site/page_realisations/style.scss */
#realisations .realisations-col {
  display: flex;
  flex-direction: column;
  gap: 2.4rem; }

/* line 413, app_site/static/scss/app_site/page_realisations/style.scss */
#col-g {
  flex: 5; }

/* line 417, app_site/static/scss/app_site/page_realisations/style.scss */
#col-d {
  flex: 4; }

/* Une réalisation */
/* line 423, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation {
  position: relative;
  min-height: 20rem;
  background-color: white;
  box-shadow: 0 4px 4px 0 #00000040; }

/* line 430, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation .header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  padding: 1.5rem; }

/* line 438, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation h2 {
  font-size: var(--size-h5);
  text-align: start;
  flex: 1; }

/* line 444, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation hr {
  margin: 0 auto 1.5rem;
  background-color: var(--gray-100);
  width: 95%;
  height: 0.2rem; }

/* line 451, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation .content {
  margin: 1rem;
  position: relative; }

/* line 456, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation .content > p {
  text-align: start; }

/* Étiquette */
/* line 461, app_site/static/scss/app_site/page_realisations/style.scss */
.label {
  border-radius: 2rem;
  text-align: center;
  width: max-content;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25), 0 -1px 1px 0 rgba(0, 0, 0, 0.25); }

/* line 468, app_site/static/scss/app_site/page_realisations/style.scss */
.label.website,
.label.app,
.label.mobile_app {
  font-family: var(--font-1);
  font-size: var(--size-p2);
  padding: 0.2rem 1rem; }

/* line 476, app_site/static/scss/app_site/page_realisations/style.scss */
.label.website {
  background-color: #BE4046;
  color: white; }

/* line 481, app_site/static/scss/app_site/page_realisations/style.scss */
.label.mobile_app {
  background-color: #5456de;
  color: white; }

/* line 486, app_site/static/scss/app_site/page_realisations/style.scss */
.label.app {
  background-color: #bb9f00;
  color: white; }

/* Image */
/* line 492, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation .content > img {
  width: 100%;
  box-shadow: 0 8px 8px 0 #00000040 inset;
  border-radius: 1rem; }

/* line 498, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation.mobile_app .content {
  display: flex;
  justify-content: center; }

/* line 503, app_site/static/scss/app_site/page_realisations/style.scss */
.realisation.mobile_app .content img {
  height: 30rem;
  width: auto; }

/* DRAWER */
/* line 510, app_site/static/scss/app_site/page_realisations/style.scss */
#content {
  position: relative;
  overflow: hidden; }