.imglogotexte
{

}

.lienSecret
{
    color:#fff;
    text-decoration: none; /* Supprime le soulignement */
    cursor: auto; /* Définit le curseur comme normal */
}


.oooh-baby-regular {
  font-family: "Oooh Baby", cursive;
  font-weight: 400;
  font-style: normal;
}

h1
{
	font-size:3em;
}
 
body, html{
  height: 100%;
  margin: 0;
  /*background-color:#212339;*/
  /*background-color:#222439;*/
  /*background-color:#0C152B;*/
            background-color: #080710;
  
    
    /*background-color: rgba(34, 36, 57, 0.7);  Couleur de fond avec opacité */
    /*opacity: 0.1;  Opacité de l'image */
  z-index: 0;
  color:#fff;
}

/* Optionnel : pour ajuster l'opacité de l'image seulement */
.container::after {
    content: ""; /* Ajoute un pseudo-élément pour contrôler l'opacité de l'image */
    background-image: url('LaniaHUB/etoiles3.jpg'); /* Ajout de l'image de fond */
  background-size: cover; /* Ajout de cette ligne */
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.1; /* Opacité de l'image (très faible) */
}

body{

  display: flex;
  align-items: center;
  justify-content: center;
}


.container{
  display: flex;
  /*grid-template-columns: 100%;*/
  height: auto;
  align-items: center;
  justify-content: center;
  margin: 0 50px;
}

.imgSite{
  width:500px;
}











/*
.menu-toggler:hover + label,
.menu-toggler:hover + label:before,
.menu-toggler:hover + label:after,{
  background: white;
}
.menu-toggler:checked + label {
  background: transparent;
}
.menu-toggler:checked + label:before,
.menu-toggler:checked + label:after,{
  top:0;
  width:40px;
  transform-origin: 50% 50%;
}
.menu-toggler:checked + label:before {
  transform: rotate(45deg) translateY(-15px) translateX(-15px);
}
.menu-toggler:checked + label:after {
  transform: rotate(-45deg);
}*/


.menu-toggler {
  position: absolute;
  display: block;
  top:0;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
  z-index:4;
  opacity:0;
  cursor:pointer;
  
}

.menu-toggler:checked + label{ 
  animation: tourner 0.3s linear forwards;
}
.menu-toggler + label{ 
  /*animation: retourner 0.5s linear ;*/
  animation: retourner 300s linear  infinite ;
}

.menu-toggler:checked ~ ul .menu-item { 
  opacity: 1;
}

.imglogotexte
{
    width:100%;
}


/* Pour les écrans plus larges que 600px (par exemple, bureau et tablette) */
@media only screen and (min-width: 601px) 
{

    .slogan{


      text-align:center;
      z-index: 1;
      position: absolute;
      display: block;
      top:0;
      bottom:0;
      right:0;
      left:0;
      width:420px;
      height:0px;
      margin:auto;
      padding-top:350px;
      font-size:2em;
    }

    .menu-toggler {
      width:300px;
      height:300px;
    }
    .menu-toggler + label {

      /*transition: 0.5s;*/
      width:300px;
      height:300px;
    }

    .menu-toggler:checked ~ ul .menu-item:nth-child(1) {
      transform: rotate(0deg) translate(-300px);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(2) {
      transform: rotate(60deg) translateX(-300px);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(3) {
      transform: rotate(120deg) translateX(-300px);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(4) {
      transform: rotate(180deg) translateX(-300px);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(5) {
      transform: rotate(240deg) translateX(-300px);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(6) {
      transform: rotate(300deg) translateX(-300px);
    }
    .menu-toggler:checked ~ ul .menu-item a {
      pointer-events:auto;
    }

    .menu-item:nth-child(1) a {
      transform: rotate(0deg);
    }
    .menu-item:nth-child(2) a {
      transform: rotate(-60deg);
    }
    .menu-item:nth-child(3) a {
      transform: rotate(-120deg);
    }
    .menu-item:nth-child(4) a {
      transform: rotate(-180deg);
    }
    .menu-item:nth-child(5) a {
      transform: rotate(-240deg);
    }
    .menu-item:nth-child(6) a {
      transform: rotate(-300deg);
    }
    .menu-item > a > img
    {

      height: 100px;
      margin-top:20px;
      transition: 0.5s;
    }
    .menu-item {
      z-index: 2;
      position: absolute;
      display: block;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 140px;
      height: 140px;
      opacity: 0;
      transition: 0.5s;
    }
    .menu-item:hover a img{
      /*height: 110px;*/
      /*margin-top:15px;*/
      /*animation: grossir 1s linear ;*/
    }
    .deconnexion
    {
      width: 100px;
      height: 100px;        
    }
    .deconnexion > a > img
    {

      height: 80px;
      margin-top:21px;
      transition: 0.5s;
    }
}


@media only screen and (max-width: 600px) 
{

    .slogan{


      text-align:center;
      z-index: 1;
      position: absolute;
      display: block;
      /*top:0;*/
      bottom:0;
      /*right:0;*/
      /*left:0;*/
      width:70vw;
      height:250px;
      margin:auto;
      /*padding-top:350px;*/
      font-size:2em;
    }

    .menu-toggler {
      width:30vw;
      height:30vw;
    }
    .menu-toggler + label {

      /*transition: 0.5s;*/
      width:30vw;
      height:30vw;
      /*height:200px;*/
    }
    
/*    .menu-toggler:checked ~ ul .menu-item:nth-child(1) {
      transform: rotate(90deg) translate(-240px);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(2) {
      transform: rotate(50deg) translateX(-180px);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(3) {
      transform: rotate(130deg) translateX(-180px);
    }*/
    .menu-toggler:checked ~ ul .menu-item:nth-child(1) {
      transform: rotate(0deg) translate(-30vw);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(2) {
      transform: rotate(60deg) translateX(-30vw);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(3) {
      transform: rotate(120deg) translateX(-30vw);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(4) {
      transform: rotate(180deg) translateX(-30vw);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(5) {
      transform: rotate(240deg) translateX(-30vw);
    }
    .menu-toggler:checked ~ ul .menu-item:nth-child(6) {
      transform: rotate(300deg) translateX(-30vw);
    }
    .menu-toggler:checked ~ ul .menu-item a {
      pointer-events:auto;
    }
    

    .menu-item:nth-child(1) a {
      transform: rotate(-0deg);
    }
    .menu-item:nth-child(2) a {
      transform: rotate(-60deg);
    }
    .menu-item:nth-child(3) a {
      transform: rotate(-120deg);
    }
    .menu-item:nth-child(4) a {
      transform: rotate(-180deg);
    }
    .menu-item:nth-child(5) a {
      transform: rotate(-240deg);
    }
    .menu-item:nth-child(6) a {
      transform: rotate(-300deg);
    }

    .menu-item > a > img
    {

      height: 16vw;
      margin-top:2vw;
      transition: 0.5s;
    }
    .menu-item {
      z-index: 2;
      position: absolute;
      display: block;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 20vw;
      height: 20vw;
      opacity: 0;
      transition: 0.5s;
    }
    
    .deconnexion
    {
      width: 80px;
      height: 80px;        
    }
    .deconnexion > a > img
    {

      height: 70px;
      margin-top:15px;
      transition: 0.5s;
    }
    
}





.menu-toggler:hover + label
{
    
  /*background-image: url("logolaniaexplose.png");*/
  /*animation-play-state: paused;  Met l'animation en pause au survol */
    
  /*animation: retourner2 50s linear infinite;*/
  /*animation-play-state: running;  Assure que l'animation ne reprend pas de 0 */
    /*transform: scale(1.1);  Augmente légèrement la taille de l'image au survol */
}

.menu-toggler + label {
  
  /*transition: 0.5s;*/
  display: block;
  z-index: 3;
  border-radius: 2.5px;
  /*background: rgba(230, 239, 250, 0.9);*/
  background-position: center;
  background-image: url("LaniaHUB/logolaniake2croptranspSansTexte.png");
  
  background-size: cover; /* Ajout de cette ligne */
  transition: transform 0.5s;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}



.deconnexion a
{
    
  /*background:#FF9B46 !important;*/
/*  background: radial-gradient(circle at 70% 15%, white 1px, rgba(255, 202, 92,0.2) 3%, rgba(200, 53, 43,0.2) 60%, rgba(255, 202, 92,0.2) 100%) !important;  */
  /*background: radial-gradient(circle at 70% 15%, white 1px, rgba(255, 202, 92,0.1) 3%, rgba(200, 53, 43,0.1) 100%) !important;*/  
    /*background: radial-gradient(circle at 10% 10%, #ff9100, #000) !important;*/
/*  background-color:transparent !important;*/
  /*background: radial-gradient(circle at 70% 15%, white 1px, rgba(255, 202, 92,0.2) 3%, rgba(200, 53, 43,1) 100%);*/  
    background:#963241 !important;
}
.deconnexion a:hover
{    
    background:#B4353C !important;
}

.menu-item a {
/*background-color:#77334E;*/
/*background-color:#EC4E2B;*/
/*background: radial-gradient(circle at 10% 10%, #ff9100, #000);*/
  /*background: radial-gradient(circle at 70% 15%, white 1px, #FFCA5C 3%, #C8352B 60%, #FFCA5C 100%);*/  
  /*background: radial-gradient(circle at 70% 15%, white 1px, rgba(255, 202, 92,0.2) 3%, rgba(200, 53, 43,1) 60%, rgba(255, 202, 92,0.2) 100%);*/  
  /*background: radial-gradient(circle at 70% 15%, white 1px, rgba(255, 202, 92,0.2) 3%, rgba(200, 53, 43,1) 100%);*/  
  
  background: radial-gradient(circle at 70% 15%, white 1px, rgba(255, 202, 92,0.2) 3%, rgba(200, 53, 43,1) 100%);  
  /*background-color:#EC4E2B;*/
  background-color:#FF9B46;
/*background-color:#FFC860;*/
  /*background: radial-gradient(circle at 80px 90px, #FDB35B, #EC4E2B);*/
  display: block;
  width: inherit;
  height: inherit;
  line-height: 80px;
  /*color: rgba(255, 255, 255, 0.7);
  background: rgba(230, 230, 250, 0.7);*/
  color: rgba(255, 255, 255, 0.3);
 /* background: rgba(230, 230, 250, 0.3);*/
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  font-size: 40px;
  pointer-events: none;
  /*transition: 0.2s;*/
     /*transition: all 0.5s;*/

  /*animation: changeColor 5s infinite;*/
}
.menu-item a:hover {
    
  /*background: radial-gradient(circle at 70% 15%, white 1px, rgba(255, 202, 92,0.2) 3%, rgba(200, 53, 43,1) 60%, rgba(255, 202, 92,0.2) 100%);*/  
background:#444A94;
  /*background: radial-gradient(circle at 90% 35%, white 1px, #FFCA5C 3%, #C8352B 60%, #FFCA5C 100%);*/  
  /*background-size:150% 150%;  reduce the size to see the gadient effect*/
  /*box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3);*/
  /*box-shadow: 0px 10px 10px  red;*/
  /*box-shadow: -10px -5px 10px #C886EB;*/
  /*box-shadow: inset 5px 5px 5px 5px #EC4E2B;*/
  /*box-shadow: 10px 5px 5px red;*/
  /*background: radial-gradient(circle at center, #EC4E2B, #000);*/
    /*backdrop-filter: blur(10px);*/
    /*filter: blur(10px);*/
  /*background: radial-gradient(circle at 80px 90px, #FDB35B, #EC4E2B);*/
  /*color: white;*/
  /*#D873ED*/
	/*background-color:#FF9B46;*/
	/*background-color:#3F3B88;*/
    /*background-image:url('/Vues/A14n/LaniaHUB/logolaniake2croptranspSansTexte.png');*/
  /*background-size: cover;  Ajout de cette ligne */
  /*background: rgba(255, 255, 255, 0.3);*/
  /*font-size: 44.44px*/
}

@keyframes changeColor {

  0%   { background-color: #FFC860; }
  50%  { background-color: #A95A4A; }
  100% { background-color: #FFC860; }
}




.arvo-regular {
  font-family: "Arvo", serif;
  font-weight: 400;
  font-style: normal;
}

.arvo-bold {
  font-family: "Arvo", serif;
  font-weight: 700;
  font-style: normal;
}

.arvo-regular-italic {
  font-family: "Arvo", serif;
  font-weight: 400;
  font-style: italic;
}

.arvo-bold-italic {
  font-family: "Arvo", serif;
  font-weight: 700;
  font-style: italic;
}


/* Keyframes */
@keyframes tourner {
  0% {
    transform: rotate(0deg); /* Début de l'animation */
  }
  100% {
    transform: rotate(360deg); /* Fin de l'animation */
  }
}
/* Keyframes */
@keyframes retourner {
  0% {
    transform: rotate(0deg); /* Début de l'animation */
  }
  100% {
    transform: rotate(-360deg); /* Fin de l'animation */
  }
}
/* Keyframes */
@keyframes retourner2 {
       /* Définir le point de départ de l'animation accélérée */
            /* L'angle de départ est calculé en fonction du moment où l'animation normale s'arrête */
            0% {
                transform: rotate(calc(var(--degStart) + 360deg)); /* Commencer l'animation accélérée là où l'animation normale s'est arrêtée */
            }
            100% {
                transform: rotate(calc(var(--degStart) + 720deg)); /* Continuer l'animation accélérée à partir du point où l'animation normale s'est arrêtée */
            }
}







/*PARTIE CONNEXION*/


@media only screen and (max-width: 600px) 
{
    .formulaireDeConnexion{
        height: 520px;
        width: 90vw;
    }
    .logoConnexion{
        left: 0px;
        top: -80px;
    }
}
@media only screen and (min-width: 601px) 
{
    .formulaireDeConnexion{
        height: 520px;
        width: 400px;
    }
    .logoConnexion{
        left: -80px;
        top: -80px;
    }
}




.blocDeConnexion *,
.blocDeConnexion *:before,
.blocDeConnexion *:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.backgroundConnexion{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.backgroundConnexion .logoConnexion{
    height: 200px;
    width: 200px;
    position: absolute;
}
.logoConnexion{
    
  animation: retourner 150s linear  infinite ;
    background-image:url('/Vues/A14n/LaniaHUB/logolaniake2croptranspSansTexte.png');
    background-size: cover; /* Ajout de cette ligne */
}
.formulaireDeConnexion{
    background-color: rgba(255,255,255,0.08);
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 40px rgba(8,7,16,0.6);
    padding: 50px 35px;
    z-index:50;
}
.formulaireDeConnexion *{
    font-family: 'Poppins',sans-serif;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}
.formulaireDeConnexion h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
}

.labelDeConnexion{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}
.inputDeConnexion{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    background-color: rgba(255,255,255,0.07);
    /*#E49C5C*/
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 400;
}
::placeholder{
    color: #e5e5e5;
}
.boutonDeConnexion{
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}
.titreImageDeConnexion
{
    text-align:center;
}



/*FIN CONNEXION*/