/* =========================
   RESET
========================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  overflow-x: hidden;
  background: #fff;
}


/* =========================
   PAGE
========================= */

.page {
  position: relative;
  width: 100%;
  aspect-ratio: 1512 / 3362;
}


/* =========================
   SVG
========================= */

.landing {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.desktop {
  display: block;
}

.mobile {
  display: none;
}


/* =========================
   HERO DESKTOP
========================= */

.hero-text {
  position: absolute;

  margin: 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 2.6455vw;
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;

  text-align: center;
  color: #000;

  z-index: 10;
}

.hero-text strong {
  font-weight: 700;
}

.hero-text-desktop {
  left: 20%;
  top: 40.9%;
  width: 60%;
}


/* =========================
   OBJECTIFS TITLE DESKTOP
========================= */

.objectifs-title {
  position: absolute;

  margin: 0;
  padding: 0;

  left: 50%;
  top: 59.5%;
  width: 32%;

  font-family: "Inter", sans-serif;
  font-size: 3.3069vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
  color: #000;

  z-index: 10;
}


/* =========================
   CRÉER DESKTOP
========================= */

.objectif-creer {
  position: absolute;

  left: 19.31%;
  top: 65.14%;
  width: 21%;

  margin: 0;
  padding: 0;

  color: #000;
  z-index: 10;
}

.objectif-creer h3 {
  margin: 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 2.6455vw;
  font-weight: 500;
  font-style: italic;
  line-height: 1;

  text-align: left;
}

.objectif-creer p {
  margin: 1.8519vw 0 0 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 1.3228vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
}


/* =========================
   SUSCITER DESKTOP
========================= */

.objectif-susciter {
  position: absolute;

  left: 62.43%;
  top: 73.36%;
  width: 21%;

  margin: 0;
  padding: 0;

  color: #000;
  z-index: 10;
}

.objectif-susciter h3 {
  margin: 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 2.6455vw;
  font-weight: 500;
  font-style: italic;
  line-height: 1;

  text-align: left;
}

.objectif-susciter p {
  margin: 1.8519vw 0 0 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 1.3228vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
}


/* =========================
   INNOVER DESKTOP
========================= */

.objectif-innover {
  position: absolute;

  left: 19.31%;
  top: 80.70%;
  width: 21%;

  margin: 0;
  padding: 0;

  color: #000;
  z-index: 10;
}

.objectif-innover h3 {
  margin: 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 2.6455vw;
  font-weight: 500;
  font-style: italic;
  line-height: 1;

  text-align: left;
}

.objectif-innover p {
  margin: 1.8519vw 0 0 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 1.3228vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
}


/* =========================
   HERO MOBILE
========================= */

.hero-text-mobile {
  display: none;

  position: absolute;

  margin: 0;
  padding: 0;

  left: 50%;
  top: 40.85%;
  width: 80%;

  transform: translateX(-50%);

  font-family: "Inter", sans-serif;
  font-size: 6.1538vw;
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;

  text-align: center;
  color: #000;

  z-index: 10;
}

.hero-text-mobile strong {
  font-weight: 700;
}


/* =========================
   OBJECTIFS TITLE MOBILE
========================= */

.objectifs-title-mobile {
  display: none;

  position: absolute;

  margin: 0;
  padding: 0;

  left: 42%;
  top: 59.55%;
  width: 35%;

  font-family: "Inter", sans-serif;
  font-size: 7.1795vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
  color: #000;

  z-index: 10;
}


/* =========================
   CRÉER MOBILE
========================= */

.objectif-creer-mobile {
  display: none;

  position: absolute;

  left: 31.8%;
  top: 71.2%;
  width: 55%;

  margin: 0;
  padding: 0;

  color: #000;

  z-index: 10;
}

.objectif-creer-mobile h3 {
  margin: 0;
  padding: 0;

  transform: translateY(-12px);

  font-family: "Inter", sans-serif;
  font-size: 6.1538vw;
  font-weight: 500;
  font-style: italic;
  line-height: 1;

  text-align: left;
}

.objectif-creer-mobile p {
  margin: 0.8vw 0 0 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 3.0769vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
}


/* =========================
   SUSCITER MOBILE
========================= */

.objectif-susciter-mobile {
  display: none;

  position: absolute;

  left: 44.1%;
  top: 78.53%;
  width: 55%;

  margin: 0;
  padding: 0;

  color: #000;

  z-index: 10;
}

.objectif-susciter-mobile h3 {
  margin: 0;
  padding: 0;

  transform: translateY(-12px);

  font-family: "Inter", sans-serif;
  font-size: 6.1538vw;
  font-weight: 500;
  font-style: italic;
  line-height: 1;

  text-align: left;
}

.objectif-susciter-mobile p {
  margin: 0.8vw 0 0 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 3.0769vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
}


/* =========================
   INNOVER MOBILE
========================= */

.objectif-innover-mobile {
  display: none;

  position: absolute;

  left: 16.9%;
  top: 86.10%;
  width: 55%;

  margin: 0;
  padding: 0;

  color: #000;

  z-index: 10;
}

.objectif-innover-mobile h3 {
  margin: 0;
  padding: 0;

  transform: translateY(-12px);

  font-family: "Inter", sans-serif;
  font-size: 6.1538vw;
  font-weight: 500;
  font-style: italic;
  line-height: 1;

  text-align: left;
}

.objectif-innover-mobile p {
  margin: 0.8vw 0 0 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 3.0769vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
}


/* =========================
   TEXTE INTERREG DESKTOP
========================= */

.interreg-text {
  position: absolute;

  left: 44.4%;
  top: 91.1%;
  width: 30%;

  margin: 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: 1.1905vw;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
  color: #000;

  z-index: 10;
}


/* =========================
   TEXTE INTERREG MOBILE
========================= */

.interreg-text-mobile {
  display: none;

  position: absolute;

  left: 22%;
  top: 92.4%;
  width: 65%;

  margin: 0;
  padding: 0;

  transform: translateY(5vw);

  font-family: "Inter", sans-serif;
  font-size: 2.3077vw;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;

  text-align: left;
  color: #000;

  z-index: 10;
}


/* =========================
   EMAIL
========================= */

.email-link {
  position: absolute;

  z-index: 20;

  color: white;
  text-decoration: none;
  white-space: nowrap;

  font-family: Arial, Helvetica, sans-serif;
}

.email-link:hover {
  text-decoration: underline;
}


/* =========================
   EMAIL DESKTOP
========================= */

.email-desktop {
  display: block;

  left: 32.5%;
  top: 98%;

  transform: translateY(-50%);

  font-size: min(18px, 1.1905vw);
}


/* =========================
   EMAIL MOBILE
========================= */

.email-mobile {
  display: none;

  left: 47.4%;
  top: 97.4%;

  transform: translateY(-50%);

  font-size: 2.0513vw;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

  .page {
    aspect-ratio: 390 / 2920;
  }


  /* SVG */

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }


  /* EMAIL */

  .email-desktop {
    display: none;
  }

  .email-mobile {
    display: block;
  }


  /* TEXTE INTERREG */

  .interreg-text {
    display: none;
  }

  .interreg-text-mobile {
    display: block;
  }


  /* TEXTES DESKTOP */

  .hero-text-desktop {
    display: none;
  }

  .objectifs-title {
    display: none;
  }

  .objectif-creer {
    display: none;
  }

  .objectif-susciter {
    display: none;
  }

  .objectif-innover {
    display: none;
  }


  /* TEXTES MOBILE */

  .hero-text-mobile {
    display: block;
  }

  .objectifs-title-mobile {
    display: block;
  }

  .objectif-creer-mobile {
    display: block;
  }

  .objectif-susciter-mobile {
    display: block;
  }

  .objectif-innover-mobile {
    display: block;
  }
}