@charset "UTF-8";
/* mixins */
/* functions */
/* fonts */
/* couleurs */
/* global style */
body {
  overflow-x: hidden;
  height: 100%;
  width: 100%;
}

.centrer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Home {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: #fff;
  background-image: linear-gradient(to top, #000 6%, #932B2D 12%, #2D4582 26%, #A1A1A1 44%, #9F4F2D 58%, #000 67%), url("../assets/image_webp/texture_etoile.webp");
  background-repeat: repeat;
  background-position: center center;
  background-attachment: scroll;
  background-blend-mode: lighten;
}
@media (max-width: 768px) {
  .Home {
    background-attachment: scroll;
  }
}

.Mars {
  margin: 0;
  padding: 0;
  min-height: 60vh;
  color: #fff;
  background-image: linear-gradient(to right, #9F4F2D 0%, #000 100%), url("../assets/image_webp/texture_etoile.webp");
  background-repeat: repeat;
  background-position: center center;
  background-attachment: scroll;
  background-blend-mode: lighten;
  image-rendering: auto;
}
@media (max-width: 768px) {
  .Mars {
    background-attachment: scroll;
  }
}

.Mars .header {
  margin: 0;
  padding: 0;
  color: #fff;
  background-image: linear-gradient(to bottom, #9F4F2D 0%, #000 100%), url("../assets/image_webp/texture_etoile.webp");
  background-repeat: repeat;
  background-position: center center;
  background-attachment: scroll;
  background-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, #9F4F2D 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #9F4F2D 80%, transparent 100%);
}
@media (max-width: 768px) {
  .Mars .header {
    background-attachment: scroll;
  }
}

.Lune {
  margin: 0;
  padding: 0;
  min-height: 60vh;
  color: #fff;
  background-image: linear-gradient(to right, #A1A1A1 0%, #000 100%), url("../assets/image_webp/texture_etoile.webp");
  background-repeat: repeat;
  background-position: center center;
  background-attachment: scroll;
  background-blend-mode: lighten;
  image-rendering: auto;
}
@media (max-width: 768px) {
  .Lune {
    background-attachment: scroll;
  }
}

.Lune .header {
  margin: 0;
  padding: 0;
  color: #fff;
  background-image: linear-gradient(to bottom, #A1A1A1 0%, #000 100%), url("../assets/image_webp/texture_etoile.webp");
  background-repeat: repeat;
  background-position: center center;
  background-attachment: scroll;
  background-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, #A1A1A1 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #A1A1A1 80%, transparent 100%);
}
@media (max-width: 768px) {
  .Lune .header {
    background-attachment: scroll;
  }
}

.Orbite {
  margin: 0;
  padding: 0;
  min-height: 60vh;
  color: #fff;
  background-image: linear-gradient(to right, #2D4582 0%, #000 100%), url("../assets/image_webp/texture_etoile.webp");
  background-repeat: repeat;
  background-position: center center;
  background-attachment: scroll;
  background-blend-mode: lighten;
  image-rendering: auto;
}
@media (max-width: 768px) {
  .Orbite {
    background-attachment: scroll;
  }
}

.Orbite .header {
  margin: 0;
  padding: 0;
  color: #fff;
  background-image: linear-gradient(to bottom, #2D4582 0%, #000 100%), url("../assets/image_webp/texture_etoile.webp");
  background-repeat: repeat;
  background-position: center center;
  background-attachment: scroll;
  background-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, #A1A1A1 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #A1A1A1 80%, transparent 100%);
}
@media (max-width: 768px) {
  .Orbite .header {
    background-attachment: scroll;
  }
}

.Immersion {
  margin: 0;
  padding: 0;
  min-height: 60vh;
  color: #fff;
  background-image: linear-gradient(to right, #932B2D 0%, #000 100%), url("../assets/image_webp/texture_etoile.webp");
  background-repeat: repeat;
  background-position: center center;
  background-attachment: scroll;
  background-blend-mode: lighten;
  image-rendering: auto;
}
@media (max-width: 768px) {
  .Immersion {
    background-attachment: scroll;
  }
}

.Immersion .header {
  margin: 0;
  padding: 0;
  color: #fff;
  background-image: linear-gradient(to bottom, #932B2D 0%, #000 100%), url("../assets/image_webp/texture_etoile.webp");
  background-repeat: repeat;
  background-position: center center;
  background-attachment: scroll;
  background-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, #A1A1A1 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #A1A1A1 80%, transparent 100%);
}
@media (max-width: 768px) {
  .Immersion .header {
    background-attachment: scroll;
  }
}

header {
  width: 100%;
  height: auto;
}

.header_home {
  display: flex;
  gap: 0px;
  justify-content: center;
  flex-direction: row;
  height: auto;
  margin-bottom: 125px;
  justify-content: center;
  margin-left: 30px;
  margin-right: 30px;
}
@media (min-width: 768px) {
  .header_home {
    margin-bottom: 160px;
    margin-left: 60px;
    margin-right: 60px;
  }
}
@media (min-width: 1440px) {
  .header_home {
    margin-bottom: 240px;
    margin-left: 60px;
    margin-right: 60px;
  }
}

.header_img {
  max-width: 250px;
}
@media (min-width: 768px) {
  .header_img {
    max-width: 350px;
  }
}
@media (min-width: 1440px) {
  .header_img {
    max-width: 500px;
  }
}

.presentation {
  display: flex;
  gap: 0px;
  justify-content: center;
  flex-direction: row;
  margin-bottom: 125px;
  margin-left: 60px;
  margin-right: 60px;
}
@media (min-width: 768px) {
  .presentation {
    margin-bottom: 160px;
    gap: 40px;
  }
}
@media (min-width: 1440px) {
  .presentation {
    margin-bottom: 240px;
    gap: 225px;
  }
}

.Mars__presentation,
.Lune__presentation,
.Orbite__presentation,
.Immersion__presentation {
  margin-bottom: 125px;
  display: grid;
  place-items: center;
}
@media (min-width: 768px) {
  .Mars__presentation,
.Lune__presentation,
.Orbite__presentation,
.Immersion__presentation {
    margin-bottom: 160px;
  }
}
@media (min-width: 1440px) {
  .Mars__presentation,
.Lune__presentation,
.Orbite__presentation,
.Immersion__presentation {
    margin-bottom: 240px;
  }
}

.section_description_voyage {
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  .section_description_voyage {
    margin-bottom: 64px;
  }
}
@media (min-width: 1440px) {
  .section_description_voyage {
    margin-bottom: 96px;
  }
}

.Programme,
.section_tableaux {
  margin-bottom: 75px;
}
@media (min-width: 768px) {
  .Programme,
.section_tableaux {
    margin-bottom: 96px;
  }
}
@media (min-width: 1440px) {
  .Programme,
.section_tableaux {
    margin-bottom: 144px;
  }
}

.section-activites {
  display: flex;
  flex-direction: row;
  gap: 0px;
  justify-content: center;
  flex-direction: column;
}
@media (min-width: 768px) {
  .section-activites {
    gap: 60px;
    flex-direction: row;
  }
}
@media (min-width: 1440px) {
  .section-activites {
    gap: 225px;
    flex-direction: row;
  }
}

.cursor {
  background-image: url("../assets/image_webp/navette.webp");
  position: absolute;
  width: 200px;
  height: 200px;
  background-size: cover;
  border-radius: 50%;
  pointer-events: none;
  visibility: hidden;
  z-index: 1;
}

.cursor-img {
  cursor: none;
}

.programme {
  margin-left: 30px;
  margin-right: 30px;
}
@media (min-width: 768px) {
  .programme {
    margin-left: 60px;
    margin-right: 60px;
  }
}
@media (min-width: 1440px) {
  .programme {
    margin-left: 60px;
    margin-right: 60px;
  }
}

.texte_presentation {
  justify-content: center;
  align-self: center;
}

/* navigation */
.Nav__liste {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: row;
  padding: 0;
  margin-bottom: 25px;
}

.element__Nav,
.element__Nav1,
.element__Nav2,
.element__Nav3,
.element__Nav4,
.element__Nav5 {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  margin-right: 2%;
}
@media (min-width: 768px) {
  .element__Nav,
.element__Nav1,
.element__Nav2,
.element__Nav3,
.element__Nav4,
.element__Nav5 {
    margin-right: 2%;
  }
}
@media (min-width: 1440px) {
  .element__Nav,
.element__Nav1,
.element__Nav2,
.element__Nav3,
.element__Nav4,
.element__Nav5 {
    margin-right: 6%;
  }
}

.element__Nav a,
.element__Nav1 a,
.element__Nav2 a,
.element__Nav3 a,
.element__Nav4 a,
.element__Nav5 a {
  font-family: "Marine", sans-serif;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  list-style: none;
}

.element__Nav1 a:hover {
  border: white 1px solid;
  border-radius: 10%;
  padding: 5px 5px;
}

.texte_nav.active a {
  border-bottom: solid 2px #fff;
}

.texte_nav.active a:hover {
  color: #fff;
}

.element_footer.active a:hover {
  color: #fff;
}

.element_footer.active {
  border-bottom: solid 2px #fff;
}

.element__Nav2 a:hover {
  color: #9F4F2D;
}

.element__Nav3 a:hover {
  color: #A1A1A1;
}

.element__Nav4 a:hover {
  color: #2D4582;
}

.element__Nav5 a:hover {
  color: #932B2D;
}

.info {
  border-collapse: collapse;
  border-left: 1px solid #fff;
}

.tableau__info {
  padding-right: 20px;
  padding-left: 20px;
  border-right: 1px solid #fff;
  vertical-align: top;
}
.tableau__info:last-child {
  border-right: none;
}

.element_footer {
  font-size: 11px;
}
@media (min-width: 768px) {
  .element_footer {
    font-size: 20px;
  }
}
@media (min-width: 1440px) {
  .element_footer {
    font-size: 30px;
  }
}

.element__Info {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  margin-left: 0%;
  margin-bottom: 5%;
}
@media (min-width: 768px) {
  .element__Info {
    margin-right: 2%;
    margin-left: 5%;
  }
}
@media (min-width: 1440px) {
  .element__Info {
    margin-right: 6%;
    margin-left: 5%;
  }
}

.element__Info a {
  font-family: "Marine", sans-serif;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  list-style: none;
  font-size: 11px;
}
@media (min-width: 768px) {
  .element__Info a {
    font-size: 20px;
  }
}
@media (min-width: 1440px) {
  .element__Info a {
    font-size: 30px;
  }
}

.Footer {
  padding-right: 40px;
  padding-left: 40px;
  margin-bottom: 48px;
}

.invisible-tel {
  display: none;
}
@media (min-width: 768px) {
  .invisible-tel {
    display: flex;
  }
}
@media (min-width: 1440px) {
  .invisible-tel {
    display: flex;
  }
}

.grid {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  display: grid;
}

/* grid Home */
.Home .grid {
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
  padding-left: 30px;
  padding-right: 30px;
}
.Home .grid > * {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .Home .grid {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (min-width: 1440px) {
  .Home .grid {
    grid-template-columns: 500px 80px 340px 60px 340px;
    padding-left: 60px;
    padding-right: 60px;
  }
  .Home .grid > * {
    grid-column: auto;
  }
  .Home .grid .col-1-4 {
    grid-column: 1/4;
  }
  .Home .grid .col-3-6 {
    grid-column: 3/6;
  }
  .Home .grid .col-1-2 {
    grid-column: 1/2;
  }
}

.Mars .grid,
.Lune .grid,
.Orbite .grid,
.Immersion .grid {
  display: grid;
  grid-template-columns: 1fr;
  padding-left: 30px;
  padding-right: 30px;
}
@media (min-width: 768px) {
  .Mars .grid,
.Lune .grid,
.Orbite .grid,
.Immersion .grid {
    grid-template-columns: 1fr;
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (min-width: 1440px) {
  .Mars .grid,
.Lune .grid,
.Orbite .grid,
.Immersion .grid {
    grid-template-columns: 233px 60px 233px 60px 233px 237px 102px 60px 102px;
    padding-left: 60px;
    padding-right: 60px;
  }
  .Mars .grid .col-1-6,
.Lune .grid .col-1-6,
.Orbite .grid .col-1-6,
.Immersion .grid .col-1-6 {
    grid-column: 1/6;
  }
  .Mars .grid .col-1-8,
.Lune .grid .col-1-8,
.Orbite .grid .col-1-8,
.Immersion .grid .col-1-8 {
    grid-column: 1/8;
  }
  .Mars .grid .col-1-4,
.Lune .grid .col-1-4,
.Orbite .grid .col-1-4,
.Immersion .grid .col-1-4 {
    grid-column: 1/4;
  }
  .Mars .grid .col-5-10,
.Lune .grid .col-5-10,
.Orbite .grid .col-5-10,
.Immersion .grid .col-5-10 {
    grid-column: 5/10;
  }
}

.logo {
  width: 5vw;
  height: auto;
  border-radius: 100%;
}

.header__image {
  grid-row: 1;
  width: 100%;
  height: auto;
  overflow-x: hidden;
  align-self: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.image_clee {
  width: 25vw;
  height: auto;
  display: none;
  align-self: center;
}
@media (min-width: 768px) {
  .image_clee {
    display: block;
  }
}
@media (min-width: 1440px) {
  .image_clee {
    display: block;
  }
}

.shema {
  width: 80%;
  margin-bottom: 75px;
}
@media (min-width: 768px) {
  .shema {
    margin-bottom: 96px;
  }
}
@media (min-width: 1440px) {
  .shema {
    grid-column: 1/8 !important;
    margin-bottom: 48px;
  }
}

.image_home {
  width: 25vw;
  height: auto;
  border-radius: 100%;
  border-color: #A1A1A1;
  border-width: 10px;
  border-style: solid;
  display: block;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .image_home {
    border-width: 15px;
    display: block;
    margin: 0 auto;
  }
}
@media (min-width: 1440px) {
  .image_home {
    border-width: 20px;
    margin: 0;
    grid-column: 1/2 !important;
  }
}

.header__image_mars {
  width: 140%;
  position: absolute;
  top: 10%;
  rotate: 120deg;
  z-index: 0;
  -webkit-animation: animPlanet1 30s linear infinite;
          animation: animPlanet1 30s linear infinite;
}

.header__image_lune {
  width: 140%;
  position: absolute;
  top: 7%;
  rotate: -20deg;
  z-index: 0;
  -webkit-animation: animPlanet1 30s linear infinite;
          animation: animPlanet1 30s linear infinite;
}

.header__image_orbite {
  width: 140%;
  position: absolute;
  top: 10%;
  rotate: -20deg;
  z-index: 0;
  -webkit-animation: animPlanet1 30s linear infinite;
          animation: animPlanet1 30s linear infinite;
}

.header__image_immersion {
  width: 60%;
  position: absolute;
  top: 10%;
  rotate: 160deg;
  z-index: 0;
  -webkit-animation: animPlanet1 30s linear infinite;
          animation: animPlanet1 30s linear infinite;
}
@media (min-width: 768px) {
  .header__image_immersion {
    width: 60%;
    top: 10%;
  }
}
@media (min-width: 1440px) {
  .header__image_immersion {
    width: 70%;
    top: 15%;
  }
}

.header__container {
  height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 30px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .header__container {
    height: 50vh;
  }
}
@media (min-width: 1440px) {
  .header__container {
    height: 90vh;
  }
}

.image_activite {
  width: 100%;
  height: auto;
  border-radius: 20%;
}
@media (min-width: 768px) {
  .image_activite {
    width: 50%;
  }
}
@media (min-width: 1440px) {
  .image_activite {
    width: 40%;
  }
}

.image_mars,
.image_lune {
  width: 40vw;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #fff;
  text-align: center;
}
.tableau .titre_tableaux {
  padding-right: 0;
  padding-left: 0;
  border-right: 1px solid #fff;
  vertical-align: top;
}
.tableau .titre_tableaux:last-child {
  border-right: none;
}

.cursor {
  cursor: url("../assets/image_webp/navette.webp"), auto;
}

.map {
  position: relative;
  width: 80vw;
  height: auto;
}

.button_M {
  width: 8vw;
  height: 8vw;
  border-radius: 100%;
  background-color: #9F4F2D;
  position: absolute;
}
@media (min-width: 768px) {
  .button_M {
    width: 5vw;
    height: 5vw;
  }
}
@media (min-width: 1440px) {
  .button_M {
    width: 5vw;
    height: 5vw;
  }
}

.button_M:hover,
.button_L:hover,
.button_O:hover,
.button_I:hover {
  background-color: #fff;
}

.button_L {
  width: 8vw;
  height: 8vw;
  border-radius: 100%;
  background-color: #A1A1A1;
  position: absolute;
}
@media (min-width: 768px) {
  .button_L {
    width: 5vw;
    height: 5vw;
  }
}
@media (min-width: 1440px) {
  .button_L {
    width: 5vw;
    height: 5vw;
  }
}

.button_O {
  width: 8vw;
  height: 8vw;
  border-radius: 100%;
  background-color: #2D4582;
  position: absolute;
}
@media (min-width: 768px) {
  .button_O {
    width: 5vw;
    height: 5vw;
  }
}
@media (min-width: 1440px) {
  .button_O {
    width: 5vw;
    height: 5vw;
  }
}

.button_I {
  width: 8vw;
  height: 8vw;
  border-radius: 100%;
  background-color: #932B2D;
  position: absolute;
}
@media (min-width: 768px) {
  .button_I {
    width: 5vw;
    height: 5vw;
  }
}
@media (min-width: 1440px) {
  .button_I {
    width: 5vw;
    height: 5vw;
  }
}

.btn_acti1 {
  transform: translate3d(29vw, 1vw, 0);
}
@media (min-width: 768px) {
  .btn_acti1 {
    transform: translate3d(30vw, 2vw, 0);
  }
}
@media (min-width: 1440px) {
  .btn_acti1 {
    transform: translate3d(30vw, 2vw, 0);
  }
}

.btn_acti2 {
  transform: translate3d(-3vw, 11vw, 0);
}
@media (min-width: 768px) {
  .btn_acti2 {
    transform: translate3d(-2vw, 11vw, 0);
  }
}
@media (min-width: 1440px) {
  .btn_acti2 {
    transform: translate3d(-2vw, 11vw, 0);
  }
}

.btn_acti3 {
  transform: translate3d(60vw, 12vw, 0);
}
@media (min-width: 768px) {
  .btn_acti3 {
    transform: translate3d(61vw, 12vw, 0);
  }
}
@media (min-width: 1440px) {
  .btn_acti3 {
    transform: translate3d(61vw, 12vw, 0);
  }
}

.btn_acti4 {
  transform: translate3d(29vw, 20vw, 0);
}
@media (min-width: 768px) {
  .btn_acti4 {
    transform: translate3d(30vw, 21vw, 0);
  }
}
@media (min-width: 1440px) {
  .btn_acti4 {
    transform: translate3d(30vw, 21vw, 0);
  }
}

.btn_acti5 {
  transform: translate3d(12vw, 11vw, 0);
}
@media (min-width: 768px) {
  .btn_acti5 {
    transform: translate3d(12vw, 12vw, 0);
  }
}
@media (min-width: 1440px) {
  .btn_acti5 {
    transform: translate3d(12vw, 12vw, 0);
  }
}

.btn_acti6 {
  transform: translate3d(46vw, 11vw, 0);
}
@media (min-width: 768px) {
  .btn_acti6 {
    transform: translate3d(47vw, 12vw, 0);
  }
}
@media (min-width: 1440px) {
  .btn_acti6 {
    transform: translate3d(47vw, 12vw, 0);
  }
}

.transition-slide {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0%);
}

@-webkit-keyframes slideOut {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 1;
  }
}

@keyframes slideOut {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 1;
  }
}
@-webkit-keyframes slideIn {
  0% {
    transform: translateX(100%);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(0%);
    opacity: 0;
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(100%);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(0%);
    opacity: 0;
  }
}
body.pageAnim .transition-slide {
  -webkit-animation: slideOut 1s forwards;
          animation: slideOut 1s forwards;
}

body.loaded .transition-slide {
  -webkit-animation: slideIn 1s ease-out forwards;
          animation: slideIn 1s ease-out forwards;
}

@-webkit-keyframes titleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

@keyframes titleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}
@-webkit-keyframes titleGlow {
  0%, 100% {
    text-shadow: 0 0 8px #FFF, 0 0 10px #FFF;
  }
  50% {
    text-shadow: 0 0 12px #fff, 0 0 20px #FFF;
  }
}
@keyframes titleGlow {
  0%, 100% {
    text-shadow: 0 0 8px #FFF, 0 0 10px #FFF;
  }
  50% {
    text-shadow: 0 0 12px #fff, 0 0 20px #FFF;
  }
}
@-webkit-keyframes titleAppear {
  from {
    opacity: 0;
    transform: scale(0) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes titleAppear {
  from {
    opacity: 0;
    transform: scale(0) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.anim-titre {
  -webkit-animation: titleAppear 4s ease-out forwards, titleGlow 4s infinite ease-in-out, titleFloat 6s infinite ease-in-out;
          animation: titleAppear 4s ease-out forwards, titleGlow 4s infinite ease-in-out, titleFloat 6s infinite ease-in-out;
}

.anim-titre-voyage {
  -webkit-animation: titleAppear 2s ease-out forwards;
          animation: titleAppear 2s ease-out forwards;
}

.titre-voyage {
  opacity: 0;
}

@-webkit-keyframes titlezoom {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    /* Zoom léger */
  }
  100% {
    opacity: 1;
    transform: scale(1);
    /* Retour à la taille normale */
  }
}

@keyframes titlezoom {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    /* Zoom léger */
  }
  100% {
    opacity: 1;
    transform: scale(1);
    /* Retour à la taille normale */
  }
}
.anim-titre-description {
  -webkit-animation: titlezoom 1s ease-out forwards;
          animation: titlezoom 1s ease-out forwards;
}

@-webkit-keyframes animPlanet1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animPlanet1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.act1,
.act2,
.act3,
.act4,
.act5,
.act6 {
  display: none;
}

.activity {
  -webkit-animation: titleAppear 1s ease-out forwards;
          animation: titleAppear 1s ease-out forwards;
}

/* typographies */
.texte,
.texte_nav {
  font-size: 16px;
}
@media (min-width: 768px) {
  .texte,
.texte_nav {
    font-size: 20px;
  }
}
@media (min-width: 1440px) {
  .texte,
.texte_nav {
    font-size: 30px;
  }
}

.sous-titre {
  font-size: 19px;
}
@media (min-width: 768px) {
  .sous-titre {
    font-size: 24px;
  }
}
@media (min-width: 1440px) {
  .sous-titre {
    font-size: 43px;
  }
}

.titre {
  font-size: 23px;
}
@media (min-width: 768px) {
  .titre {
    font-size: 29px;
  }
}
@media (min-width: 1440px) {
  .titre {
    font-size: 62px;
  }
}

.grand-titre {
  font-size: 33px;
}
@media (min-width: 768px) {
  .grand-titre {
    font-size: 41px;
  }
}
@media (min-width: 1440px) {
  .grand-titre {
    font-size: 129px;
  }
}

.mega-titre {
  font-size: 33px;
}
@media (min-width: 768px) {
  .mega-titre {
    font-size: 50px;
  }
}
@media (min-width: 1440px) {
  .mega-titre {
    font-size: 155px;
  }
}

.sous-titre, .grand-titre {
  font-family: "Good Times", sans-serif;
  line-height: 1.2;
  color: #fff;
  font-weight: 700;
  margin: 0;
  z-index: 1;
}

.sous-titre {
  margin-top: 25px;
  margin-bottom: 25px;
}
@media (min-width: 768px) {
  .sous-titre {
    margin-top: 32px;
    margin-bottom: 32px;
  }
}
@media (min-width: 1440px) {
  .sous-titre {
    margin-top: 48px;
    margin-bottom: 48px;
  }
}

.titre {
  font-family: "Good Times", sans-serif;
  line-height: 1.2;
  color: #fff;
  font-weight: 700;
  text-align: center;
  z-index: 1;
  display: block;
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 25px;
}
@media (min-width: 768px) {
  .titre {
    display: block;
    margin: 0 auto;
    margin-top: 32px;
    margin-bottom: 32px;
  }
}
@media (min-width: 1440px) {
  .titre {
    margin: 0;
    text-align: left;
    margin-top: 48px;
    margin-bottom: 48px;
  }
}

.grand-titre {
  margin: 10%;
}

.texte {
  font-family: "Marine", sans-serif;
  line-height: 1.2;
  color: #fff;
  font-weight: 700;
  margin-bottom: 25px;
  margin-top: 0;
}
@media (min-width: 768px) {
  .texte {
    margin-bottom: 32px;
  }
}
@media (min-width: 1440px) {
  .texte {
    margin-bottom: 48px;
  }
}

.mega-titre {
  color: #fff;
  font-family: "good-times-bad-times", sans-serif;
  font-weight: 900;
  grid-column: 1/2 !important;
  margin-top: 50px;
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  .mega-titre {
    grid-column: 1/2 !important;
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
@media (min-width: 1440px) {
  .mega-titre {
    grid-column: 1/4 !important;
    margin-top: 96px;
    margin-bottom: 96px;
  }
}

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