/* -- ANIMATIONS -- --------------------------------------------------------------------------------- -- ANIMATIONS -- */



  .bouton-effet-deplacement-haut:hover {
      transform: translateY(-5px); 
      transition: transform 0.3s ease-in-out; 
      background-color: #171717;
  }




/* -- ANIMATIONS TEXTE souslignage catégorie texte header -- -------------- -- ANIMATIONS TEXTE souslignage catégorie texte header -- */


.effet-texte-souslignage {
  position: relative;
  &::after {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: transform 200ms;
    transform: scaleX(0);
  }
  &:hover {
    &::after {
      transform: scaleX(0.8);
    }
  }
}



/* -- ANIMATIONS TEXTE mask p -- --------------------------------------------------------- -- ANIMATIONS TEXTE mask p -- */

  /* Parent observé : c'est lui qui déclenche toutes les lignes */

  /* Fenêtre / masque pour chaque ligne */
  .mask {
    overflow: hidden;
  }

  /* Texte placé au-dessus du masque dès le départ (invisible) */
  .slide {
    display: block;
    transform: translateY(-60px);     /* caché AU-DESSUS */
    will-change: transform;
    /* on définit --order depuis JS : utilisé pour le delay */
    transition: transform var(--anim-duration) var(--easing) calc(var(--order) * var(--stagger-step));
    text-align: center;
  }

  /* Quand le parent a la classe in-view, on laisse les slides descendre */
  .reveal-parent.in-view .slide {
    transform: translateY(0px);
  }

  /* Optionnel : style pour visualiser */
  .slide {
    /* background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02)); */
    padding: 0.1em 0.2em;
    border-radius: 4px;
    max-width: fit-content;
  }


  .reveal-parent .slide {
    transform: translateY(60px);
    opacity: 0;
    transition: transform 0.45s ease, opacity 0.45s ease;
    transition-delay: calc(
      var(--block-order) * 0.3s +
      var(--line-order) * 0.1s
    );
  }
  
  .reveal-section.in-view .reveal-parent .slide {
    transform: translateY(0);
    opacity: 1;
  }
  




  /* ANIMATION SYSTEME SOLAIRE -------------------- ANIMATION SYSTEME SOLAIRE */

  .scene {
    perspective: 800px; /* profondeur 3D */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2vw;
    /* a voir si c'est suffisant pour pas que l'ecran soit redimensionné si un element part du bord */
    overflow: hidden;
}

.orbit {
    width: 22vw;
    height: 22vw;
    /* position: relative; */
    transform-style: preserve-3d;
    transform: rotateY(70deg);
    animation: spin 9s linear infinite; 
    /* background-color: rgba(255, 0, 21, 0.226); */

    /* plus besooin de la reference pour l'instant 
    border-radius: 50%;
    border: #dddddd 1px dotted; */
}

.cercle {
    width: 90px;
    height: 90px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-in-out; 

    & svg {
       shape-rendering: geometricPrecision;
    }
}



.cercle:nth-child(1)  { transform: translate(-50%, -50%) translate(11vw, 0vw) rotateX(90deg); }
.cercle:nth-child(2)  { transform: translate(-50%, -50%) translate(10.15vw, 4.21vw) rotateX(90deg); }
.cercle:nth-child(3)  { transform: translate(-50%, -50%) translate(7.78vw, 7.78vw) rotateX(90deg); }
.cercle:nth-child(4)  { transform: translate(-50%, -50%) translate(4.21vw, 10.15vw) rotateX(90deg); }

.cercle:nth-child(5)  { transform: translate(-50%, -50%) translate(0vw, 11vw) rotateX(90deg); }
.cercle:nth-child(6)  { transform: translate(-50%, -50%) translate(-4.21vw, 10.15vw) rotateX(90deg); }
.cercle:nth-child(7)  { transform: translate(-50%, -50%) translate(-7.78vw, 7.78vw) rotateX(90deg); }
.cercle:nth-child(8)  { transform: translate(-50%, -50%) translate(-10.15vw, 4.21vw) rotateX(90deg); }

.cercle:nth-child(9)  { transform: translate(-50%, -50%) translate(-11vw, 0vw) rotateX(90deg); }
.cercle:nth-child(10) { transform: translate(-50%, -50%) translate(-10.15vw, -4.21vw) rotateX(90deg); }
.cercle:nth-child(11) { transform: translate(-50%, -50%) translate(-7.78vw, -7.78vw) rotateX(90deg); }
.cercle:nth-child(12) { transform: translate(-50%, -50%) translate(-4.21vw, -10.15vw) rotateX(90deg); }

.cercle:nth-child(13) { transform: translate(-50%, -50%) translate(0vw, -11vw) rotateX(90deg); }
.cercle:nth-child(14) { transform: translate(-50%, -50%) translate(4.21vw, -10.15vw) rotateX(90deg); }
.cercle:nth-child(15) { transform: translate(-50%, -50%) translate(7.78vw, -7.78vw) rotateX(90deg); }
.cercle:nth-child(16) { transform: translate(-50%, -50%) translate(10.15vw, -4.21vw) rotateX(90deg); }


@keyframes spin {
    0% {
        transform:  rotateY(70deg)  rotateZ(0deg);
        position: relative;
        z-index: 10;
    }
    100% {
        transform:  rotateY(70deg) rotateZ(360deg);
        position: relative;
        z-index: 10;
    }
}


  /* ------ ANIMATION BACKGROUND FORMES FLOUES QUI BOUGENT --------------------------- BACKGROUND FORMES FLOUES ---*/ 
  
  @keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #3E1E68;
  overflow: hidden;
  z-index: -1;
  max-width: 100%;
}

.background span {
    width: 70vmin;
    height: 70vmin;
    border-radius: 50vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 21;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #3c2064;
    top: 51%;
    left: 11%;
    animation-duration: 83s;
    animation-delay: -111s;
    transform-origin: -22vw 7vh;
    box-shadow: -100vmin 0 13.147003299774099vmin currentColor;
}
.background span:nth-child(1) {
    color: #583c80;
    top: 51%;
    left: 19%;
    animation-duration: 27s;
    animation-delay: -6s;
    transform-origin: 24vw -4vh;
    box-shadow: -100vmin 0 12.810470678460664vmin currentColor;
}
.background span:nth-child(2) {
    color: #583C87;
    top: 27%;
    left: 13%;
    animation-duration: 169s;
    animation-delay: -109s;
    transform-origin: 5vw -15vh;
    box-shadow: 100vmin 0 12.943589779909242vmin currentColor;
}
.background span:nth-child(3) {
    color: #664e83;
    top: 99%;
    left: 71%;
    animation-duration: 295s;
    animation-delay: -149s;
    transform-origin: 24vw -4vh;
    box-shadow: 100vmin 0 13.219057221035936vmin currentColor;
}
.background span:nth-child(4) {
    color: #664e83;
    top: 53%;
    left: 60%;
    animation-duration: 280s;
    animation-delay: -84s;
    transform-origin: -17vw -10vh;
    box-shadow: 100vmin 0 13.361286604837874vmin currentColor;
}
.background span:nth-child(5) {
    color: #422377;
    top: 7%;
    left: 43%;
    animation-duration: 28s;
    animation-delay: -285s;
    transform-origin: -4vw 15vh;
    box-shadow: 100vmin 0 12.613401620633372vmin currentColor;
}
.background span:nth-child(6) {
    color: #583c80;
    top: 85%;
    left: 35%;
    animation-duration: 67s;
    animation-delay: -110s;
    transform-origin: 9vw -13vh;
    box-shadow: -100vmin 0 13.376243763480545vmin currentColor;
}
.background span:nth-child(7) {
    color: #664e83;
    top: 8%;
    left: 45%;
    animation-duration: 36s;
    animation-delay: -61s;
    transform-origin: 0vw -6vh;
    box-shadow: -100vmin 0 13.24299259440482vmin currentColor;
}
.background span:nth-child(8) {
    color: #583C87;
    top: 19%;
    left: 90%;
    animation-duration: 180s;
    animation-delay: -210s;
    transform-origin: 2vw -22vh;
    box-shadow: -100vmin 0 12.865151386938678vmin currentColor;
}
.background span:nth-child(9) {
    color: #583c80;
    top: 37%;
    left: 27%;
    animation-duration: 198s;
    animation-delay: -270s;
    transform-origin: 13vw 1vh;
    box-shadow: -100vmin 0 13.291485135886257vmin currentColor;
}
.background span:nth-child(10) {
    color: #664e83;
    top: 76%;
    left: 72%;
    animation-duration: 175s;
    animation-delay: -232s;
    transform-origin: -18vw 3vh;
    box-shadow: 100vmin 0 13.316097795469531vmin currentColor;
}
.background span:nth-child(11) {
    color: #583C87;
    top: 98%;
    left: 25%;
    animation-duration: 37s;
    animation-delay: -210s;
    transform-origin: 5vw -4vh;
    box-shadow: -100vmin 0 12.504216903404vmin currentColor;
}
.background span:nth-child(12) {
    color: #664e83;
    top: 44%;
    left: 70%;
    animation-duration: 35s;
    animation-delay: -284s;
    transform-origin: 24vw -12vh;
    box-shadow: -100vmin 0 12.618868904869931vmin currentColor;
}
.background span:nth-child(13) {
    color: #664e83;
    top: 50%;
    left: 50%;
    animation-duration: 104s;
    animation-delay: -196s;
    transform-origin: 16vw -8vh;
    box-shadow: 100vmin 0 13.244773882843294vmin currentColor;
}
.background span:nth-child(14) {
    color: #583c80;
    top: 7%;
    left: 85%;
    animation-duration: 182s;
    animation-delay: -132s;
    transform-origin: -15vw 22vh;
    box-shadow: -100vmin 0 13.006985814869005vmin currentColor;
}
.background span:nth-child(15) {
    color: #583C87;
    top: 27%;
    left: 61%;
    animation-duration: 250s;
    animation-delay: -226s;
    transform-origin: -9vw 25vh;
    box-shadow: -100vmin 0 12.561498132635093vmin currentColor;
}
.background span:nth-child(16) {
    color: #583c80;
    top: 18%;
    left: 27%;
    animation-duration: 37s;
    animation-delay: -208s;
    transform-origin: 15vw -14vh;
    box-shadow: 100vmin 0 13.421749840495625vmin currentColor;
}
.background span:nth-child(17) {
    color: #583c80;
    top: 65%;
    left: 70%;
    animation-duration: 184s;
    animation-delay: -187s;
    transform-origin: -13vw 8vh;
    box-shadow: 100vmin 0 13.453838638422539vmin currentColor;
}
.background span:nth-child(18) {
    color: #583c80;
    top: 5%;
    left: 5%;
    animation-duration: 81s;
    animation-delay: -33s;
    transform-origin: 15vw -19vh;
    box-shadow: -100vmin 0 13.278041251837948vmin currentColor;
}
.background span:nth-child(19) {
    color: #311855;
    top: 63%;
    left: 75%;
    animation-duration: 57s;
    animation-delay: -219s;
    transform-origin: 18vw 16vh;
    box-shadow: -100vmin 0 13.156654804374412vmin currentColor;
}





/* Animation fomulaire succès A CHANGER */
.success-animation {
  background: #d1fae5;
  border: 1px solid #10b981;
  color: #065f46;
  padding: 20px;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  animation: pop 0.4s ease;
}

@keyframes pop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}