@font-face {
  font-family: "Audiowide";
  src: url("../fonts/Audiowide-Regular.woff2?v=1") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Thin.woff2?v=1") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-ExtraLight.woff2?v=1") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Light.woff2?v=1") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Regular.woff2?v=1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Medium.woff2?v=1") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-SemiBold.woff2?v=1") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Bold.woff2?v=1") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-ExtraBold.woff2?v=1") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
h1, h2, p, p a, p strong {
  color: white;
  font-family: "Sora", sans-serif;
  height: fit-content;
}

h1, h2 {
  font-weight: 600;
}

h2 {
  font-size: calc(1rem + 1dvw);
}

p {
  text-align: justify;
}

p, p a, p strong {
  font-size: calc(0.5rem + 0.6dvw);
}

p a, p strong {
  font-weight: 600;
}

p a {
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.25, 1);
}
p a:hover {
  color: #87B2CC !important;
}

.texts {
  height: fit-content;
  gap: 1rem;
  display: flex;
  flex-flow: column;
  width: 100%;
}
.texts h2 {
  margin-bottom: 0.75rem;
}
.texts.texts-mobile {
  display: none;
}

#startStage {
  width: 100dvw;
  height: fit-content;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 75px;
  padding: 150px;
}
#startStage h1 {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
#startStage h1 .main {
  font-size: calc(1.5rem + 5dvw);
}
#startStage h1 .sub {
  font-size: calc(0.25rem + 2dvw);
  font-weight: 500;
}
#startStage div.startContent {
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  column-gap: 1.5rem;
  row-gap: 1rem;
}
#startStage div.startContent .texts {
  grid-column: 1/2;
  grid-row: 1/5;
}
#startStage div.startContent .imgStartStage {
  max-width: 100%;
  max-height: 100%;
  grid-column: 2/3;
  grid-row: 1/5;
  aspect-ratio: 1342/1125;
  mask-image: url("../../img/mask-stage-rea-start.svg?v=1");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../../img/mask-stage-rea-start.svg?v=1");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  position: relative;
  z-index: 0;
}
#startStage div.startContent .imgStartStage svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}
#startStage div.startContent .imgStartStage img {
  width: 100%;
  height: 100%;
}

#resto2M, #domitys {
  width: 100dvw;
  height: fit-content;
  display: grid;
  grid-template-rows: auto 1fr;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#resto2M h2, #domitys h2 {
  text-align: center;
  justify-self: center;
}
#resto2M .sectionDesc, #domitys .sectionDesc {
  width: 100%;
  height: fit-content;
}

#resto2M {
  padding: 100px 250px 100px 250px;
}

#domitys {
  background-image: url("../../img/round-bg-start-pc.svg?v=1");
  row-gap: 25px;
  padding: 0 150px 100px 150px;
}

#gallery {
  background-color: #232A60;
  display: flex;
  flex-flow: column;
  gap: 2.5rem;
}
#gallery h2, #gallery .sectionDesc {
  width: 100%;
  padding: 0 150px;
}
#gallery .carrousel {
  /* au lieu de: height: 100%; min-height: clamp(...); */
  height: clamp(150px, 20vw, 300px);
  width: 100dvw;
  gap: 5dvw;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  scroll-behavior: auto;
  scrollbar-width: none;
  overflow-x: auto;
  overflow-y: visible;
  padding: 5px 0;
  user-select: none;
  cursor: grab;
  white-space: nowrap;
  overscroll-behavior: contain;
  -ms-overflow-style: none;
  touch-action: pan-y;
  pointer-events: all;
}
#gallery .carrousel * {
  user-select: none;
}
#gallery .carrousel.is-grabbing {
  cursor: grabbing;
  touch-action: none;
}
#gallery .carrousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
#gallery .carrousel img {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  pointer-events: none;
}
#gallery .carrousel .plat {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  pointer-events: none;
}
#gallery .carrousel .plat.plat-1, #gallery .carrousel .plat.plat-3, #gallery .carrousel .plat.plat-5 {
  aspect-ratio: 1491/1118;
  mask-image: url("../../img/plat-1-3-5-mask.svg?v=1");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../../img/plat-1-3-5-mask.svg?v=1");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
#gallery .carrousel .plat.plat-2, #gallery .carrousel .plat.plat-4 {
  aspect-ratio: 839/1118;
  mask-image: url("../../img/plat-2-4-mask.svg?v=1");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../../img/plat-2-4-mask.svg?v=1");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
#gallery .carrousel .plat svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#gallery .carrousel .plat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#gallery .carrousel .plat svg {
  z-index: 1;
  pointer-events: none;
}

#resto2M {
  background-image: url("../../img/round-bg-end-pc.svg?v=1");
  gap: 2rem;
}

#securitas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  column-gap: 1.5rem;
  row-gap: 1rem;
  padding: 50px 150px;
}
#securitas .texts {
  grid-column: 2/3;
  grid-row: 1/4;
}
#securitas .texts.texts-mobile {
  display: none;
}
#securitas .videoClassic {
  grid-column: 1/2;
  grid-row: 1/4;
}

@media screen and (max-width: 1280px) {
  #startStage {
    padding: 150px 75px 75px 75px;
  }
  #domitys {
    padding: 0 75px;
  }
  #gallery {
    padding-top: 100px;
    gap: 2rem;
  }
  #gallery h2, #gallery .sectionDesc {
    padding: 0 75px;
  }
  #resto2M {
    gap: 1.5rem;
    padding: 75px 125px 75px 125px;
  }
  #securitas {
    padding: 35px 75px;
  }
  #securitas p.third {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  #securitas .videoClassic {
    grid-row: 1/4;
  }
}
@media screen and (max-width: 1024px) {
  #startStage {
    padding: 75px 75px 75px 75px;
    transform: translateY(75px);
  }
  #domitys h2, #domitys .sectionDesc {
    transform: translateY(100px);
  }
  #gallery {
    padding-top: 0;
  }
}
@media screen and (max-width: 1100px) {
  #securitas {
    grid-template-rows: repeat(5, auto);
  }
  #securitas .texts:not(.texts-mobile) .third {
    display: none;
  }
  #securitas .texts.texts-mobile {
    grid-column: 1/3;
    display: flex;
    grid-row: 4/5;
  }
  #securitas .texts.texts-mobile .second {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .texts {
    gap: 0.75rem;
  }
  .texts h2 {
    margin-bottom: 0.5rem;
  }
  #domitys h2, #domitys .sectionDesc {
    transform: translateY(75px);
  }
  #startStage div.startContent .texts {
    grid-column: 1/2;
    grid-row: 1/4;
  }
  #startStage div.startContent .texts:not(.texts-mobile) .third {
    display: none;
  }
  #startStage div.startContent .texts.texts-mobile {
    display: flex;
    grid-row: 4/5;
    grid-column: 1/3;
  }
  #startStage div.startContent .imgStartStage {
    grid-row: 1/4;
  }
  #securitas {
    padding: 50px 75px;
  }
  #securitas .texts:not(.texts-mobile) .third, #securitas .texts:not(.texts-mobile) .second {
    display: none;
  }
  #securitas .texts.texts-mobile .second {
    display: inline;
  }
}
@media screen and (max-width: 768px) {
  .texts {
    gap: 0.5rem;
  }
  .texts h2 {
    margin-bottom: 0.25rem;
  }
  #startStage {
    padding: 25px;
  }
  #startStage div.startContent {
    display: flex;
    flex-flow: column;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 3px solid #7B5FFF;
    row-gap: 1.5rem;
  }
  #startStage div.startContent .texts {
    grid-column: 1/2;
    grid-row: 1/5;
  }
  #startStage div.startContent .texts:not(.texts-mobile) .third {
    display: inline;
  }
  #startStage div.startContent .texts.texts-mobile {
    display: none;
  }
  #startStage div.startContent .imgStartStage {
    display: none;
  }
  #resto2M, #domitys {
    padding: 25px;
    row-gap: 20px;
    width: 100%;
    box-sizing: border-box;
  }
  #gallery {
    gap: 1.5rem;
  }
  #gallery h2, #gallery .sectionDesc {
    padding: 0 25px;
  }
  #gallery h2 {
    text-align: center;
  }
  #resto2M {
    padding: 75px 25px;
  }
  #securitas {
    padding: 25px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
  }
  #securitas .texts {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  #securitas .texts h2 {
    text-align: center;
  }
  #securitas .texts.texts-mobile {
    grid-row: 3/4;
  }
  #securitas .videoClassic {
    grid-column: 1/2;
    grid-row: 2/3;
  }
}
@media screen and (max-width: 500px) {
  #domitys h2, #domitys .sectionDesc {
    transform: translateY(50px);
  }
}
@media screen and (max-width: 350px) {
  #domitys h2, #domitys .sectionDesc {
    transform: translateY(25px);
  }
}

/*# sourceMappingURL=stage-reavisual.css.map */