/*css pour page de connexion*/
#divLogin {
    width: 350px;
    background-color: #777;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px blue;
    margin: 50px auto;
    text-align: center;
}

#divLogin h1 {
    font-size: 20px;
    margin-bottom: 20px;
}

#divLoginForm input[type="text"],
#divLoginForm input[type="password"] {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
}

#btnLogin,
#btnRegister {
    width: 85%;
    padding: 10px;
    margin-top: 10px;
    border: none;
    border-radius: 5px;
    background-color: #337aff;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

#btnRegister {
    background-color: #4c82ff;
}

#divLoginForm input[type="button"]:hover {
    opacity: 0.8;
}

/*css pour page utiliseur*/




/* Conteneur principal : tout aligner en ligne */
#conteneur {
    display: flex;
    justify-content: space-between; /* Maintient les éléments espacés entre eux */
    align-items: center;            /* Centre verticalement les éléments */
    gap: 20px;                      /* Espacement constant entre les éléments */
    margin-top: 20px;
    width: 100%;                    /* Le conteneur prend toute la largeur de la fenêtre */
}

#conteneur > div {
    flex-grow: 1;                   /* Permet aux divs de s'élargir en fonction de l'espace restant */
    flex-basis: 0;                  /* La taille initiale est 0, ce qui permet à flex-grow de fonctionner */
    min-width: 0;                   /* Empêche les éléments de déborder si le contenu est trop large */
}

#conteneur > div:nth-child(2) {
    flex-grow: 0;                   /* Le div central ne s'étend pas */
    flex-shrink: 0;                 /* Le div central ne se rétrécit pas */
    width: auto;                    /* Laisse le div central à la taille de son contenu */
    min-width: 250px;               /* Définit une largeur minimale pour le div central */
}



/* Sections gauche*/
.titreSection {
  text-align: center;
}

#divManageEquipe {
    display: flex;
    flex: 1;
    padding: 15px;
    border: 2px solid #AAAAAA;
    border-radius: 10px;
    align-items: center; /* Centre les éléments verticalement */
    flex-direction: column; /* Optionnel : empile les éléments verticalement */
    margin-left: 10%
}


#divManageEquipe input{
  margin-top: 10px;
  width :100%;
}

/* Partie centrale (Liste joueurs + bouton sauvegarde) */
#divCentre {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Bouton stylisé */
input[type="button"] {
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

input[type="button"]:hover {
    background-color: #0056b3;
}




/* Liste déroulante des joueurs */
#lstJoueurs {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    padding: 5px;
}

/* Mise en forme du terrain */
#divSectionComposition {
  background-image: url("https://us.123rf.com/450wm/acyotto/acyotto2002/acyotto200200163/140931140-illustration-simple-du-demi-terrain-de-football.jpg?ver=6");
  background-size: cover; /* L'image couvre toute la zone sans être répétée */
  background-position: center; /* L'image est centrée */
  background-repeat: no-repeat; /* Empêche la répétition de l'image */
  display: flex;
  flex: 1;
  padding: 15px;
  border: 2px solid #AAAAAA;
  border-radius: 10px;
  flex-direction: column; /* Empile les éléments verticalement */
  margin-right: 10%;
}


#divSectionComposition input[type="text"] {
    text-align: center;
    margin-bottom: 5px;
    width: 50%; 
    max-width: 150px; /* Optionnel : limite la largeur maximale */
    box-sizing: border-box; /* Inclut les bordures et le padding dans la largeur */
}

#txtAC {
    align-self: center;
}

#divA {
    display: flex;
    justify-content: space-between; /* Espacement entre les éléments */
    margin-top: -10px;
    gap: 10px;
}

#txtMC {
    align-self: center;
}

#divM {
    display: flex;
    justify-content: space-between; /* Espacement entre les éléments */
    margin-top: 50px;
    margin-bottom: -10px;
    margin-left: 10px;
    margin-right: 10px;
    gap: 10px;
}

#divD {
    display: flex;
    justify-content: space-between; /* Espacement entre les éléments */
    margin-top: 50px;
    gap: 10px;
    
}

#divDC {
    display: flex;
    justify-content: center; /* Centrage des éléments */
    gap: 10px;
}

#txtG {
    align-self: center;
    margin-top: 25px;
}

hr {
    width: 100%;       /* L'horizontal rule prend toute la largeur */
    border: 1px solid #AAA; /* Ajoute une bordure pour la rendre visible */
}