@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

html, body, main { padding: 0; margin: 0; position: relative; overflow: hidden; height: 100vh; height: 100dvh; width: 100vw; background-color: #000; }

div.background::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1; }
div.background {position: absolute; height: 100vh; height: 100dvh; width: 100%; background-position: center; background-size: cover; background-image: url('/background-low.jpg'); filter: blur(12px); transition: filter 0.8s ease-out; opacity: 0; animation: bgFadeIn 0.5s ease-out forwards;}

/* Quand le background HD est chargé */
div.background.is-loaded {filter: blur(0); }
@keyframes bgFadeIn {from { opacity: 0; } to { opacity: 1; } }

/* Groupe logo + bouton Discover centré */
.hero {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; }
div.logo {opacity: 0; transition: opacity 0.8s ease-out; }
div.logo.visible {opacity: 1; }
div.logo a {display: block;}


.discover {margin-top: 20px; text-align: center; opacity: 0; transition: opacity 0.8s ease-out; }

div.logo.visible + .discover {opacity: 1; }

.footer {position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 3; min-width: 400px; padding: 25px 25px 0px 25px; }
.footer p {font-family: Outfit; font-weight: 400; font-size: 16px; color: white; margin: 0 0 8px 0; opacity: 0; transition: opacity 0.8s ease-out; }
.footer img {width: 150px; filter: invert(1); opacity: 0; transition: opacity 0.8s ease-out; }
.footer a {text-decoration: none !important;}

div.error404 {position: absolute; z-index: 2; }
div.error404 {width: 20%; position: absolute; top: 40%; left: 50%; transform: translateX(-50%) translateY(-50%); }

.animated-arrow {display: inline-block; position: relative; color: #fff; font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-style: normal; text-decoration: none; transition: all 0.2s; white-space: nowrap; padding: 8px 16px; -webkit-tap-highlight-color: transparent; }
.animated-arrow, .animated-arrow * {user-select: none; -webkit-user-select: none; }
.animated-arrow > .main {display: flex; align-items: center; transition: all 0.2s; }
.animated-arrow > .main > .text {margin: 0 16px 0 0; line-height: 1; white-space: nowrap; }

.the-arrow {width: 64px; transition: all 0.2s; }
.the-arrow > .shaft {display: block; position: relative; height: 2px; background-color: currentColor; transition: all 0.2s; transition-delay: 0s; will-change: transform; }
.the-arrow > .shaft::before, .the-arrow > .shaft::after {content: ""; position: absolute; top: 0; right: 0; display: block; width: 8px; height: 2px; background-color: currentColor; transition: all 0.2s; transition-delay: 0s; }
.the-arrow > .shaft::before {transform-origin: top right; }
.the-arrow > .shaft::after {transform-origin: bottom right; }

.the-arrow.-left {position: absolute; top: 50%; left: 16px; transform: translateY(-50%); }
.the-arrow.-left > .shaft {width: 0; }
.the-arrow.-left > .shaft::before, .the-arrow.-left > .shaft::after {width: 0; transform: rotate(0deg); }

.the-arrow.-right {position: relative; top: 0px; }
.the-arrow.-right > .shaft {width: 64px; transition-delay: 0.2s; }
.the-arrow.-right > .shaft::before, .the-arrow.-right > .shaft::after {width: 8px; transition: all 0.5s; transition-delay: 0.3s; transform: rotate(40deg);}
.the-arrow.-right > .shaft::after {transform: rotate(-40deg);}


.animated-arrow:hover, .animated-arrow.is-clicked {color: #fff; }
.animated-arrow:hover > .the-arrow.-left > .shaft, .animated-arrow.is-clicked > .the-arrow.-left > .shaft {width: 64px; background-color: currentColor; transition-delay: 0.1s; }
.animated-arrow:hover > .the-arrow.-left > .shaft::before, .animated-arrow:hover > .the-arrow.-left > .shaft::after, .animated-arrow.is-clicked > .the-arrow.-left > .shaft::before, .animated-arrow.is-clicked > .the-arrow.-left > .shaft::after {width: 8px; background-color: currentColor; transition-delay: 0.1s; }
.animated-arrow:hover > .the-arrow.-left > .shaft::before, .animated-arrow.is-clicked > .the-arrow.-left > .shaft::before {transform: rotate(40deg); }
.animated-arrow:hover > .the-arrow.-left > .shaft::after, .animated-arrow.is-clicked > .the-arrow.-left > .shaft::after {transform: rotate(-40deg); }
.animated-arrow:hover > .main, .animated-arrow.is-clicked > .main {transform: translateX(80px); }
.animated-arrow:hover > .main > .the-arrow.-right > .shaft, .animated-arrow.is-clicked > .main > .the-arrow.-right > .shaft {width: 0; transform: translateX(200%); transition-delay: 0s; }
.animated-arrow:hover > .main > .the-arrow.-right > .shaft::before, .animated-arrow:hover > .main > .the-arrow.-right > .shaft::after, .animated-arrow.is-clicked > .main > .the-arrow.-right > .shaft::before, .animated-arrow.is-clicked > .main > .the-arrow.-right > .shaft::after {width: 0; transition-delay: 0s; transition: all 0.1s; transform: rotate(0deg); }


@media (max-width: 600px) {
  .footer {position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); min-width: 0; padding: 15px 16px 0 16px; text-align: center; box-sizing: border-box; }
  .footer p {font-size: 13px; white-space: nowrap; }
  .footer img {width: 120px; }
}


/* Logo MyFORMS™ : 100px de haut par défaut (desktop) */
img[src$="myform.svg"] {
  height: 100px !important;
  width: auto !important;
  max-width: none !important;
}

/* Sous 800px : logo responsive, 80% largeur écran */
@media (max-width: 800px) {
  img[src$="myform.svg"] {
    height: auto !important;
    width: 80vw !important;
    max-width: 80vw !important;
  }
    img[src$="error404.svg"] {
    height: auto !important;
    width: 80vw !important;
    max-width: 80vw !important;
  }
  .discover {
    margin-top: 1.5vh;  /* plus proche du logo sur mobile */
  }
  .animated-arrow {
    padding: 16px 32px;   /* x2 par rapport à 8px 16px */
  }
    .the-arrow.-left {
    left: 32px;    /* même valeur que le padding gauche mobile */
  }
}