.bodystylelockReg {
    display: grid;
    grid-template-columns: 58vw 25vw;
    gap: 3rem;
    background: linear-gradient(147deg, #171818 58%, rgb(4, 43, 43) 100%);
    min-width: 100%;
  }
     
   
  #bandeaugauche {
     
    z-index: 10;
    padding: 10px;
    vertical-align: auto; 
    background: black;
    top: 0; 
    left: 0; 
    display: flex;
    flex-direction: column; /* Permet d'organiser les éléments verticalement */
    justify-content: flex-start; /* Aligner les éléments en haut */
    max-height: 17vh;
  }


.eltFixe  {
    position: sticky;
    top: 0;
    color: whitesmoke;
    background: rgb(1, 3, 3);
    box-shadow: 0px 4px 6px rgba(0, 255, 225, 0.159); 
    z-index: 110;
    padding-bottom: 25px;
}

/* Style pour le conteneur principal */
#tabconnect {
    justify-content: center;
    /* justify-content: center; */
    /* -- */
    display: grid;
    grid-template-columns:   57vw 26vw ; /* 2 colonnes */
    /* grid-template-rows: 100% auto ; 2 lignes */
    gap: 20px;
    align-items: start; /* Ajuste les items au début de la cellule */
    height: auto;
    width: auto;
    background-color: #f0f0f000; /* Couleur de fond pour le conteneur principal */
    left: 6vw;
}

/* Style pour les blocs dans la grille */
#tabconnect > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
    border-radius: 12px;
    background-color: #ffffff00; /* Couleur de fond pour les blocs */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre pour les blocs */
}

/* Spécifique pour la case 6 (2ème ligne, 3ème colonne) qui contient les cartes */
#tabconnect > .card-container {
    display: grid;
    grid-template-columns: 1fr; /* Une seule colonne */
    grid-template-rows: 1fr;
    gap: 10px;
    width: 100%;
}

/* Style pour les cartes dans la case 6 */
.card-style {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
    border-radius: 12px;
    background-color: #ffffff00 !important ;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: white;
}

/* Style pour centrer le conteneur principal */
body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
     
    box-sizing: border-box;
    min-height: 100vh;
    
    font-size: 0.8rem;
        background: linear-gradient(147deg, #171818 58%, rgb(4, 43, 43) 100%);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        color: var(--colorchoisie);
        box-sizing: border-box;
        min-height: 100vh;
        
    }
  






/* Style pour le formulaire */
form {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
}

form p {
    margin: 0;
    padding: 10px 0;
}

form .buttonrr {
    margin-top: 20px;
    padding: 10px 20px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form .buttonrr:hover {
    background-color: #0056b3;
}

 .card-title {
    color: #22f8eaca !important;
    font-weight: bold;
    font-size: 1.5rem;
 }


#deuze .buttonrr {
    margin-top: 20px;
    padding: 10px 20px;
    color: rgb(17, 18, 6);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#deuze .buttonrr:hover {
    background-color: #0056b3;
}


#svg_graphs > .card-body{
    display: flex-box;
        flex-direction: rows;
        align-items: center;
        height: auto;
        background-size: cover;
        left: 6vw;
        justify-content: flex-start;
        width: 70vw;
        background-color: #171818;
}




#svg_graphs {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 3rem;
    padding: 2rem;
    display: block;
    box-sizing: border-box;
  }
  
  
  #svg_graphs svg {
    width: 70vw;
    height: auto;
    justify-content: flex-start;
    max-width: 100%;
  }
  
  .tableau2-container {
    grid-column: 1 / -1; /* occupe toute la largeur du grid parent */
    width: 100%;
    max-width: 50vw;
    padding: 2rem;
    margin: auto;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.03);
    border-top: 1px solid var(--neonfx);
  }
  
  .tableau2-title {
    text-align: center;
    color: var(--neonfx);
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  
  .tableau2-subtext {
    text-align: center;
    color: white;
    margin-bottom: 1rem;
  }
  
  .tableau2-svg-wrapper {
    width: 50vw;
    overflow-x: auto;
}
  
  .tableau2-svg-wrapper2 svg {
      position:absolute;
   
    height: 10vh;
     
    display: block;
  }
 

#pentaseris {
    position: absolute;
    width:100vw;
    left:1vw;
    height: 10vh;
    /* left: 33vw; */
    z-index: 3333;
}

/* ---------------------- */




@media screen and (max-width: 765px) {
    .bodystylelockReg {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        background-size: cover;
    }


    #pentaseris {
        position: absolute;
        width:100vw;
        left:25vw;
        height: 10vh;
        /* left: 33vw; */
    }
    

#deuze .buttonrr {
    margin-top: 20px;
    padding: 10px 20px;
    color: rgb(17, 18, 6);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 60vw;
}


    /* Ajustement de la grille principale */
    #tabconnect {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        gap: 10px;
    }

    /* Ajustement des blocs */
    #tabconnect > div {
        width: 80%;
        padding: 7px;
    }

    /* Gestion du bandeau gauche */
    #bandeaugauche {
        position: relative;
        width: 100%;
        padding: 10px;
        text-align: center;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        height: 20vh;
       
    }

    /* Ajustement des cartes */
    #tabconnect > .card-container {
        grid-template-columns: 1fr;
        width: 90%;
        left:10%;
    }

    .card-style {
        width: 100%;
        text-align: center;
    }

    /* Ajustement des boutons */
    .buttonrr {
        width: 100%;
        text-align: center;
    }

    /* Ajustement du formulaire */


    /* Ajustement du titre */
    .card-title {
        font-size: 1.2rem;
        text-align: center;
    }

/* custom login */
form {
    width: 100%;
    align-items: center;
}

    .buttonrr {
        width: 100%; /* Boutons pleine largeur */
        font-size: 16px;
        padding: 12px;
    }

    .buttonrr svg {
        width: 25px;
        height: 25px;
    }

    .messages {
        width: 90%;
        font-size: 14px;
    }

    /* Boutons en colonne */
    .button-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bodystylelock {

        background: linear-gradient(147deg,  #171818 58%, rgb(4, 43, 43) 100%);
        /* background-attachment: fixed; */
       box-sizing: border-box; 
       touch-action: pan-y;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       
       
       background-attachment: fixed;
       background-size: cover;
       background-repeat: no-repeat;
       color: var(--colorchoisie);
   

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
    }


    /* Ajuste la hauteur des SVG et leur positionnement */
#svg_graphs {
    padding: 1rem;
    margin-top: 1rem;
}

#svg_graphs svg {
    width: 90vw;
}

.tableau2-container,
.tableau2-svg-wrapper {
    max-width: 90vw;
    width: 90vw;
    padding: 1rem;
}

.tableau2-title {
    font-size: 1.2rem;
}

.tableau2-subtext {
    font-size: 0.9rem;
}

/* Bandeau flottant en bas (flottants animés) */
.bande-flottante {
    top: 88vh;
    height: 12vh;
}

.flottant {
    height: 18px;
}

/* Obstacles SVG réduits */
.obstacle-svg {
    width: 22px;
    height: 22px;
}

/* Texte + padding + centrage */
.card-style,
#tabconnect > div {
    font-size: 0.9rem;
    padding: 10px;
}



.tableau2-svg-wrapper {
    width: 90vw;
    overflow-x: auto;
}
  
  .tableau2-svg-wrapper2 svg {
      position:absolute;
   
    width: 100vw;
     
    display: block;
  }




}