body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

/* PAGE 404 */

.error-page-body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
.error-page-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.error-page-heading {
    color: #333;
}
.error-page-text {
    color: #666;
}
.error-page-button {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/* PAGE CONNEXION */

.custom-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15%;
}

.custom-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 50px;
}

.custom-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 4000px;
}

.custom-input {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    box-sizing: border-box;
}

.custom-button {
    background-color: #E80028;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* PAGE ACCUEIL */

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* S'assure que la hauteur de la page est de 100% */
    width: 100%; /* S'assure que la largeur de la page est de 100% */
}

.container-accueil {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    box-sizing: border-box;
    height: 100%; /* Hauteur de la page */
    width: 100%; /* Largeur de la page */
    background-color: #eaeaea; /* Arrière-plan pour contraste */
}

.choix-theme-header {
    text-align: center;
    margin-bottom: 30px;
}

.choix-theme-header p {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}


.Choix-theme-container {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
    justify-content: space-between; /* Espace égal entre les éléments */
    align-items: stretch; /* Tous les carrés ont la même hauteur */
    height: 78%; /* Ajuste automatiquement la hauteur en fonction du contenu */
    width: 100%; /* Prend toute la largeur de la page */
}

.Choix-theme-item {
    flex: 1; /* Chaque carré prend une portion égale de la largeur */
    margin: 10px; /* Espacement entre les carrés */
    background-color: #f0f0f0; /* Couleur de fond des carrés */
    color: #333; /* Couleur du texte */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px; /* Taille du texte */
    font-weight: bold;
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s, color 0.3s; /* Animation fluide */
}

.Choix-theme-item:hover {
    background-color: #333;
    color: #fff;
    transform: scale(1.02);
}

@media screen and (max-width: 900px) {
    .Choix-theme-item {
        flex: 1 1 calc(50% - 20px); 
    }
}

@media screen and (max-height: 700px) {
    .container-accueil {
        margin-top : 10%;
    }
}


.Choix-theme-item:nth-child(1) { /* Le carré COMPOSITION */
    position: relative; /* Nécessaire pour positionner l'overlay */
    background-size: cover; /* Ajuste l'image pour couvrir tout le carré */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition */
    color: #fff; /* Texte blanc */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Ombre pour le texte */
    overflow: hidden; /* Empêche tout débordement */
}

.Choix-theme-item:nth-child(1)::before {
    content: ''; /* Crée une pseudo-élément pour l'overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Couleur noire semi-transparente (50% d'opacité) */
    z-index: 1; /* Place l'overlay en arrière du texte */
}

.Choix-theme-item:nth-child(1) p {
    position: relative; /* Place le texte au-dessus de l'overlay */
    z-index: 2; /* Assure que le texte est au-dessus de l'overlay */
}

.Choix-theme-item:nth-child(1):hover::before {
    background-color: rgba(0, 0, 0, 0.3); /* Réduit l'opacité au survol */
    transition: background-color 0.3s ease; /* Transition douce */
}

.Choix-theme-item:nth-child(1):hover {
    transform: scale(1.01); /* Augmente légèrement la taille au survol */
    transition: transform 0.3s ease; /* Transition fluide */
}


.Choix-theme-item:nth-child(2) { /* Le carré LIVE MATCH */
    position: relative; /* Nécessaire pour positionner l'overlay */
    background-size: cover; /* Ajuste l'image pour couvrir tout le carré */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition */
    color: #fff; /* Texte blanc */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Ombre pour le texte */
    overflow: hidden; /* Empêche tout débordement */
}

.Choix-theme-item:nth-child(2)::before {
    content: ''; /* Crée une pseudo-élément pour l'overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Couleur noire semi-transparente (50% d'opacité) */
    z-index: 1; /* Place l'overlay en arrière du texte */
}

.Choix-theme-item:nth-child(2) p {
    position: relative; /* Place le texte au-dessus de l'overlay */
    z-index: 2; /* Assure que le texte est au-dessus de l'overlay */
}

.Choix-theme-item:nth-child(2):hover::before {
    background-color: rgba(0, 0, 0, 0.3); /* Réduit l'opacité au survol */
    transition: background-color 0.3s ease; /* Transition douce */
}

.Choix-theme-item:nth-child(2):hover {
    transform: scale(1.01); /* Augmente légèrement la taille au survol */
    transition: transform 0.3s ease; /* Transition fluide */
}

.Choix-theme-item:nth-child(3) { /* Le carré CLASSEMENT */
    position: relative; /* Nécessaire pour positionner l'overlay */
    background-size: cover; /* Ajuste l'image pour couvrir tout le carré */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition */
    color: #fff; /* Texte blanc */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Ombre pour le texte */
    overflow: hidden; /* Empêche tout débordement */
}

.Choix-theme-item:nth-child(3)::before {
    content: ''; /* Crée une pseudo-élément pour l'overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Couleur noire semi-transparente (50% d'opacité) */
    z-index: 1; /* Place l'overlay en arrière du texte */
}

.Choix-theme-item:nth-child(3) p {
    position: relative; /* Place le texte au-dessus de l'overlay */
    z-index: 2; /* Assure que le texte est au-dessus de l'overlay */
}

.Choix-theme-item:nth-child(3):hover::before {
    background-color: rgba(0, 0, 0, 0.3); /* Réduit l'opacité au survol */
    transition: background-color 0.3s ease; /* Transition douce */
}

.Choix-theme-item:nth-child(3):hover {
    transform: scale(1.01); /* Augmente légèrement la taille au survol */
    transition: transform 0.3s ease; /* Transition fluide */
}

/* Cas spécifique : 1 seul élément */
.single-item {
    flex: 1 1 60%; /* Largeur de 60% pour un seul élément */
    max-width: 60%; /* Limite la largeur maximale à 60% */
    margin: 0 auto; /* Centre l'élément horizontalement */
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Style pour les éléments désactivés */
.Choix-theme-item.disabled {
    pointer-events: none; /* Désactive les clics */
    opacity: 0.5; /* Rend l'élément visuellement grisé */
    cursor: not-allowed; /* Change le curseur pour indiquer l'indisponibilité */
}

/* Ajouter le cadenas en arrière-plan avec un pseudo-élément */
.Choix-theme-item.disabled::after {
    content: '\1F512'; /* Unicode du cadenas */
    position: absolute;
    font-size: 50px; /* Taille du cadenas */
    color: rgba(255, 255, 255, 0.8); /* Couleur blanche semi-transparente */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -140%); /* Ajuste pour un vrai centrage */
    z-index: 1; /* Place le cadenas derrière le texte */
}

.Choix-theme-item.disabled:hover {
    transform: none; /* Désactive l'effet de survol */
}

/* PAGE MATCH */

.container-creatmatch .form-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container-creatmatch .error-message-container {
    background: #ffdddd;
    color: #d8000c;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.container-creatmatch .user-creationmatch-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    margin-top: 40px;
}

.container-creatmatch .user-creationmatch-form-container form {
    display: flex;
    flex-direction: column;
}

.container-creatmatch .theme-selection,
.container-creatmatch .visuel-selection,
.container-creatmatch .team-selection {
    margin-bottom: 20px;
}

.container-creatmatch .visuel-selection {
    text-align: center;
}

.container-creatmatch .radio-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.container-creatmatch .team-selection {
    display: flex;
    justify-content: space-between;
}

.container-creatmatch .home-team,
.container-creatmatch .away-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-right: 10px;
}

.container-creatmatch .away-team {
    margin-right: 0;
}

.container-creatmatch label {
    margin-bottom: 5px;
    color: #555;
}

.container-creatmatch input[type="radio"] {
    margin-right: 5px;
}

.container-creatmatch select,
.container-creatmatch input[type="text"],
.container-creatmatch input[type="submit"] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 16px;
    width: 100%;
}

.container-creatmatch input[type="submit"] {
    background: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.container-creatmatch input[type="submit"]:hover {
    background: #45a049;
}

.container-creatmatch p {
    margin-bottom: 5px;
    color: #333;
}


/* MESSAGE SUCCES */
.success-message-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -50px;
    margin-top: 50px;
}

.success-message {
    background-color: #81C36C;
    color: white;
    padding: 10px 200px;
    border-radius: 5px;
}

/* MESSAGE ERREUR */
.error-message-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}

.error-message {
    background-color: #E74C3C;
    color: white;
    padding: 10px 200px;
    border-radius: 5px;
}

/* VUE ERREUR */
.alert-danger-custom {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin-bottom: 20px;
}

.alert-danger-custom p {
    margin: 0;
}



/* NAVBAR */

.custom-header {
    position: relative;
    width: 100%;
}

.custom-nav {
    list-style: none;
    background-color: #333;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.custom-nav-item {
    float: left;
}

.custom-nav-link {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.custom-nav-link:hover {
    background-color: #555;
}

.custom-nav-item.active .custom-nav-link {
    background-color: #111;
}


/* CHOIX DISPOSITIF */

.container-choix-dispositif {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    padding-top: 60px;
    box-sizing: border-box;
    position: absolute;
    top: 40px;
}

.choix-dispositif-header {
    text-align: center;
    margin-bottom: 30px;
}

.choix-dispositif-header p {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.choix-dispositif-group {
    width: 100%;
    max-width: 800px;
    margin-bottom: 30px;
}

.choix-dispositif-group h3 {
    font-size: 18px;
    font-weight: bold;
    color: #555555;
    margin-bottom: 15px;
    text-align: left;
    border-bottom: 2px solid #555555;
    padding-bottom: 5px;
}

.choix-dispositif-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.choix-dispositif-item {
    flex: 1 1 calc(33.33% - 20px);
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #27ae60;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.choix-dispositif-item:hover {
    background-color: #2ecc71;
    transform: scale(1.01);
}

/* Responsive pour écrans moyens */
@media screen and (max-width: 900px) {
    .choix-dispositif-item {
        flex: 1 1 calc(50% - 20px); /* Deux items par ligne */
        height: 80px;
    }
}

/* Responsive pour petits écrans */
@media screen and (max-width: 600px) {
    .choix-dispositif-item {
        flex: 1 1 100%; /* Un item par ligne */
        height: 70px;
    }

    .choix-dispositif-group h3 {
        font-size: 20px;
        text-align: center;
    }
}



/* Changer mot de passe */

.container-changemdp {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    padding-top: 60px;
    box-sizing: border-box;
    position: absolute;
    top: 40px;
}

.password-change-label {
    display: block;
    margin-bottom: 8px;
    color: #555;
}

.password-change-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.password-change-form {
    max-width: 600px;
    width: 100%;
    padding: 45px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.password-change-label {
    display: block;
    margin-bottom: 8px;
    color: #555;
}

.password-change-input {
    width: 100%;
    padding: 15px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.password-change-submit  {
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 13px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width : 100%;
    margin: 0 auto;
}

.password-change-submit:hover {
    background-color: #45a049;
}




/* CREATION UTILISATEUR */


.container-creatutilisateur {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    padding-top: 60px;
    box-sizing: border-box;
    position: absolute;
    top: 40px;
}

.user-creation-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.user-creation-form-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.user-creation-form-container form {
    max-width: 600px;
    width: 100%;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-creation-form-container label {
    display: block;
    margin-bottom: 8px;
    color: #555;
}

.user-creation-form-container input {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.user-creation-form-container input[type="submit"] {
    background-color: #4caf50;
    color: white;
    cursor: pointer;
}

.user-creation-form-container input[type="submit"]:hover {
    background-color: #45a049;
}

.user-creation-form-container select {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #ccc 50%),
        linear-gradient(135deg, #ccc 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.user-creation-form-container select:focus {
    outline: none;
    border-color: #4caf50;
}

.user-creation-form-container select option {
    padding: 10px;
}


/* CREATION COMPTE */

.container-creatcompte .error-message-container{
    margin-bottom: 20px;
}

.container-creatcompte {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    padding-top: 60px;
    box-sizing: border-box;
    position: absolute;
    top: 20px;
}

.user-creation-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.user-creation-form-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.user-creation-form-container form {
    max-width: 600px;
    width: 100%;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-creation-form-container label {
    display: block;
    margin-bottom: 8px;
    color: #555;
}

.user-creation-form-container input[type="text"],
.user-creation-form-container input[type="radio"],
.user-creation-form-container select {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.user-creation-form-container input[type="radio"] {
    width: auto;
    padding: 0;
    margin-right: 10px;
}

.user-creation-form-container label[for="capitaineOui"],
.user-creation-form-container label[for="capitaineNon"],
.user-creation-form-container label[for="actifOui"],
.user-creation-form-container label[for="actifNon"] {
    display: inline;
    margin-right: 20px;
    font-weight: normal;
    color: #555;
}

.user-creation-form-container input[type="submit"] {
    background-color: #4caf50;
    color: white;
    cursor: pointer;
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.user-creation-form-container input[type="submit"]:hover {
    background-color: #45a049;
}

.user-creation-form-container select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #ccc 50%),
        linear-gradient(135deg, #ccc 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    outline: none;
}

.user-creation-form-container select:focus {
    border-color: #4caf50;
}

.user-creation-form-container select option {
    padding: 10px;
}


/* MODIFIER COMPTE */

.modifCompte {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    padding-top: 60px;
    box-sizing: border-box;
    position: absolute;
    top: 20px;
}

.container-modifcompte {
    width: 100%;
    padding: 20px;
    padding-top: 10px;
    box-sizing: border-box;
    top: 20px;
}

.error-message-container {
    margin-bottom: 20px;
}

.user-modification-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.user-modification-form-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.user-modification-form-container form {
    max-width: 600px;
    width: 100%;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-modification-form-container label {
    display: block;
    margin-bottom: 8px;
    color: #555;
}

.user-modification-form-container input[type="text"],
.user-modification-form-container input[type="radio"],
.user-modification-form-container input[type="number"],
.user-modification-form-container select {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.user-modification-form-container input[type="radio"] {
    width: auto;
    padding: 0;
    margin-right: 10px;
}

.user-modification-form-container label[for="actifOui"],
.user-modification-form-container label[for="actifNon"],
.user-modification-form-container label[for="capitaineOui"],
.user-modification-form-container label[for="capitaineNon"],
.user-modification-form-container label[for="standard"],
.user-modification-form-container label[for="instagram"] {
    display: inline;
    margin-right: 20px;
    font-weight: normal;
    color: #555;
}

.user-modification-form-container input[type="submit"] {
    background-color: #4caf50;
    color: white;
    cursor: pointer;
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.user-modification-form-container input[type="submit"]:hover {
    background-color: #45a049;
}

.user-modification-form-container select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #ccc 50%),
        linear-gradient(135deg, #ccc 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    outline: none;
}

.user-modification-form-container select:focus {
    border-color: #4caf50;
}

.user-modification-form-container select option {
    padding: 10px;
}

/* MODIFIER POSITIONS */

.modif-positions-div{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    padding-top: 60px;
    box-sizing: border-box;
    position: absolute;
    top: 20px;
}

.modif-positions-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
}

.modif-positions-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.modif-positions-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.modif-positions-table th,
.modif-positions-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.modif-positions-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.modif-positions-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.modif-positions-input:focus {
    border-color: #4caf50;
}

.modif-positions-submit {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.modif-positions-submit:hover {
    background-color: #45a049;
}


/* DISPOSITIFS */


/* 3-4-1-2 */

#page-3412 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-3412 #formation-3412 {
    max-width: 900px;
    margin: 20px auto;
    border-radius: 10px;
    position: relative;
    height: calc(100vh - 200px);
    background-color: #2ecc71;
    font-family: Arial, sans-serif;
}

#page-3412 #container-joueurs {
    position: relative;
    height: 100%;
}

#page-3412 .joueur {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}

#page-3412 .joueur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-3412 .gardien {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-3412 .milGauche {
    top: 40%;
    left: 10%;
    transform: translate(-50%, -50%);
}

#page-3412 .defCentral1 {
    top: 70%;
    left: 25%;
    transform: translate(-50%, -50%);
}

#page-3412 .defCentral2 {
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-3412 .defCentral3 {
    top: 70%;
    left: 75%;
    transform: translate(-50%, -50%);
}

#page-3412 .milDroit {
    top: 40%;
    left: 90%;
    transform: translate(-50%, -50%);
}

#page-3412 .milieuCentral1 {
    top: 45%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-3412 .milieuCentral2 {
    top: 45%;
    left: 65%;
    transform: translate(-50%, -50%);
}


#page-3412 .milieuOffensif {
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-3412 .buteur1 {
    top: 15%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-3412 .buteur2 {
    top: 15%;
    left: 65%;
    transform: translate(-50%, -50%);
}


#page-3412 .selecteurs-et-bouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

#page-3412 .selecteurs-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}


#page-3412 .selecteur-container {
    margin : 1px;
}

#page-3412 select {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #fff;
    font-size: 14px;
}

#page-3412 button {
    display: block;
    width: 100%;
    max-width: 200px;
    padding: 10px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 5px;
}

#page-3412 button:hover {
    background: #2ecc71;
}

#page-3412 .logoClubs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}

#page-3412 .clubDomicile, .clubExterieur {
    width: 100px;
    height: 100px;
}

#page-3412 .clubDomicile img, .clubExterieur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-3412 .select-clubs {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;

}

#page-3412 .select-domicile, .select-exterieur {
    display: flex;
    align-items: center;

}

#page-3412 .select-domicile select, .select-exterieur select {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #fff;
    font-size: 14px;
    border: 1px solid #000;
}

#page-3412 .select-domicile p, .select-exterieur p {
    margin-right: 10px;
    margin-left: 5px;
}

#page-3412 .download-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 10px;
}

#page-3412 .radio-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

#page-3412 .radio-buttons div {
    margin-bottom: 5px;
}


/* 3-5-2 */

#page-352 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-352 #formation-352 {
    max-width: 900px;
    margin: 20px auto;
    border-radius: 10px;
    position: relative;
    height: calc(100vh - 200px);
    background-color: #2ecc71;
    font-family: Arial, sans-serif;
}

#page-352 #container-joueurs {
    position: relative;
    height: 100%;
}

#page-352 .joueur {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}

#page-352 .joueur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-352 .gardien {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-352 .milGauche {
    top: 40%;
    left: 10%;
    transform: translate(-50%, -50%);
}

#page-352 .defCentral1 {
    top: 70%;
    left: 25%;
    transform: translate(-50%, -50%);
}

#page-352 .defCentral2 {
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-352 .defCentral3 {
    top: 70%;
    left: 75%;
    transform: translate(-50%, -50%);
}

#page-352 .milDroit {
    top: 40%;
    left: 90%;
    transform: translate(-50%, -50%);
}

#page-352 .milieuCentral1 {
    top: 45%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-352 .milieuCentral2 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-352 .milieuCentral3 {
    top: 45%;
    left: 65%;
    transform: translate(-50%, -50%);
}

#page-352 .buteur1 {
    top: 15%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-352 .buteur2 {
    top: 15%;
    left: 65%;
    transform: translate(-50%, -50%);
}


#page-352 .selecteurs-et-bouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

#page-352 .selecteurs-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}


#page-352 .selecteur-container {
    margin : 1px;
}

#page-352 select {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #fff;
    font-size: 14px;
}

#page-352 button {
    display: block;
    width: 100%;
    max-width: 200px;
    padding: 10px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 5px;
}

#page-352 button:hover {
    background: #2ecc71;
}

#page-352 .logoClubs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}

#page-352 .clubDomicile, .clubExterieur {
    width: 100px;
    height: 100px;
}

#page-352 .clubDomicile img, .clubExterieur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-352 .select-clubs {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;

}

#page-352 .select-domicile, .select-exterieur {
    display: flex;
    align-items: center;

}

#page-352 .select-domicile select, .select-exterieur select {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #fff;
    font-size: 14px;
    border: 1px solid #000;
}

#page-352 .select-domicile p, .select-exterieur p {
    margin-right: 10px;
    margin-left: 5px;
}

#page-352 .download-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 10px;
}

#page-352 .radio-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

#page-352 .radio-buttons div {
    margin-bottom: 5px;
}

/* 4-2-3-1 */

#page-4231 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-4231 #formation-4231 {
    max-width: 900px;
    margin: 20px auto;
    border-radius: 10px;
    position: relative;
    height: calc(100vh - 200px);
    background-color: #2ecc71;
    font-family: Arial, sans-serif;
}

#page-4231 #container-joueurs {
    position: relative;
    height: 100%;
}

#page-4231 .joueur {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}

#page-4231 .joueur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-4231 .gardien {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-4231 .defGauche {
    top: 70%;
    left: 15%;
    transform: translate(-50%, -50%);
}

#page-4231 .defCentral1 {
    top: 70%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-4231 .defCentral2 {
    top: 70%;
    left: 65%;
    transform: translate(-50%, -50%);
}

#page-4231 .defDroit {
    top: 70%;
    left: 85%;
    transform: translate(-50%, -50%);
}

#page-4231 .milieuCentral1 {
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-4231 .milieuCentral2 {
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
}

#page-4231 .milieuGauche {
    top: 35%;
    left: 15%;
    transform: translate(-50%, -50%);
}

#page-4231 .milieuOffensif {
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-4231 .milieuDroit {
    top: 35%;
    left: 85%;
    transform: translate(-50%, -50%);
}

#page-4231 .buteur {
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-4231 .selecteurs-et-bouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

#page-4231 .selecteurs-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}


#page-4231 .selecteur-container {
    margin : 1px;
}

#page-4231 select {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #fff;
    font-size: 14px;
}

#page-4231 button {
    display: block;
    width: 100%;
    max-width: 200px;
    padding: 10px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 5px;
}

#page-4231 button:hover {
    background: #2ecc71;
}

#page-4231 .logoClubs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}

#page-4231 .clubDomicile, .clubExterieur {
    width: 100px;
    height: 100px;
}

#page-4231 .clubDomicile img, .clubExterieur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-4231 .select-clubs {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;

}

#page-4231 .select-domicile, .select-exterieur {
    display: flex;
    align-items: center;

}

#page-4231 .select-domicile select, .select-exterieur select {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #fff;
    font-size: 14px;
    border: 1px solid #000;
}

#page-4231 .select-domicile p, .select-exterieur p {
    margin-right: 10px;
    margin-left: 5px;
}

#page-4231 .download-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 10px;
}

#page-4231 .radio-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

#page-4231 .radio-buttons div {
    margin-bottom: 5px;
}

/* 4-3-3 */

#page-433 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-433 #formation-433 {
    max-width: 900px;
    margin: 20px auto;
    border-radius: 10px;
    position: relative;
    height: calc(100vh - 200px);
    background-color: #2ecc71;
    font-family: Arial, sans-serif;
}

#page-433 #container-joueurs {
    position: relative;
    height: 100%;
}

#page-433 .joueur {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}

#page-433 .joueur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-433 .gardien {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-433 .defGauche {
    top: 70%;
    left: 15%;
    transform: translate(-50%, -50%);
}

#page-433 .defCentral1 {
    top: 70%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-433 .defCentral2 {
    top: 70%;
    left: 65%;
    transform: translate(-50%, -50%);
}

#page-433 .defDroit {
    top: 70%;
    left: 85%;
    transform: translate(-50%, -50%);
}

#page-433 .milieuCentral1 {
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
}

#page-433 .milieuCentral2 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-433 .milieuCentral3 {
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
}

#page-433 .attGauche {
    top: 25%;
    left: 15%;
    transform: translate(-50%, -50%);
}

#page-433 .attDroite {
    top: 25%;
    left: 85%;
    transform: translate(-50%, -50%);
}

#page-433 .buteur {
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#page-433 .selecteurs-et-bouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

#page-433 .selecteurs-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}


#page-433 .selecteur-container {
    margin : 1px;
}

#page-433 select {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #fff;
    font-size: 14px;
}

#page-433 button {
    display: block;
    width: 100%;
    max-width: 200px;
    padding: 10px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 5px;
}

#page-433 button:hover {
    background: #2ecc71;
}

#page-433 .logoClubs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}

#page-433 .clubDomicile, .clubExterieur {
    width: 100px;
    height: 100px;
}

#page-433 .clubDomicile img, .clubExterieur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-433 .select-clubs {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;

}

#page-433 .select-domicile, .select-exterieur {
    display: flex;
    align-items: center;

}

#page-433 .select-domicile select, .select-exterieur select {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #fff;
    font-size: 14px;
    border: 1px solid #000;
}

#page-433 .select-domicile p, .select-exterieur p {
    margin-right: 10px;
    margin-left: 5px;
}

#page-433 .download-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 10px;
}

#page-433 .radio-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

#page-433 .radio-buttons div {
    margin-bottom: 5px;
}


/* 4-4-2 */

#page-442 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-442 #formation-442 {
    max-width: 900px;
    margin: 20px auto;
    border-radius: 10px;
    position: relative;
    height: calc(100vh - 200px);
    background-color: #2ecc71;
    font-family: Arial, sans-serif;
}

#page-442 #container-joueurs {
    position: relative;
    height: 100%;
}

#page-442 .joueur {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}

#page-442 .joueur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-442 .gardien {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-442 .defGauche {
    top: 70%;
    left: 15%;
    transform: translate(-50%, -50%);
}

#page-442 .defCentral1 {
    top: 70%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-442 .defCentral2 {
    top: 70%;
    left: 65%;
    transform: translate(-50%, -50%);
}

#page-442 .defDroit {
    top: 70%;
    left: 85%;
    transform: translate(-50%, -50%);
}

#page-442 .milieuCentral1 {
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-442 .milieuCentral2 {
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
}

#page-442 .milieuGauche {
    top: 32.5%;
    left: 15%;
    transform: translate(-50%, -50%);
}

#page-442 .milieuDroit {
    top: 32.5%;
    left: 85%;
    transform: translate(-50%, -50%);
}

#page-442 .buteur1 {
    top: 15%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-442 .buteur2 {
    top: 15%;
    left: 65%;
    transform: translate(-50%, -50%);
}


#page-442 .selecteurs-et-bouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

#page-442 .selecteurs-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}


#page-442 .selecteur-container {
    margin : 1px;
}

#page-442 select {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #fff;
    font-size: 14px;
}

#page-442 button {
    display: block;
    width: 100%;
    max-width: 200px;
    padding: 10px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 5px;
}

#page-442 button:hover {
    background: #2ecc71;
}

#page-442 .logoClubs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}

#page-442 .clubDomicile, .clubExterieur {
    width: 100px;
    height: 100px;
}

#page-442 .clubDomicile img, .clubExterieur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-442 .select-clubs {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;

}

#page-442 .select-domicile, .select-exterieur {
    display: flex;
    align-items: center;

}

#page-442 .select-domicile select, .select-exterieur select {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #fff;
    font-size: 14px;
    border: 1px solid #000;
}

#page-442 .select-domicile p, .select-exterieur p {
    margin-right: 10px;
    margin-left: 5px;
}

#page-442 .download-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 10px;
}

#page-442 .radio-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

#page-442 .radio-buttons div {
    margin-bottom: 5px;
}

/* 5-2-1-2 */

#page-5212 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-5212 #formation-5212 {
    max-width: 900px;
    margin: 20px auto;
    border-radius: 10px;
    position: relative;
    height: calc(100vh - 200px);
    background-color: #2ecc71;
    font-family: Arial, sans-serif;
}

#page-5212 #container-joueurs {
    position: relative;
    height: 100%;
}

#page-5212 .joueur {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}

#page-5212 .joueur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-5212 .gardien {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-5212 .defGauche {
    top: 55%;
    left: 10%;
    transform: translate(-50%, -50%);
}

#page-5212 .defCentral1 {
    top: 70%;
    left: 25%;
    transform: translate(-50%, -50%);
}

#page-5212 .defCentral2 {
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-5212 .defCentral3 {
    top: 70%;
    left: 75%;
    transform: translate(-50%, -50%);
}

#page-5212 .defDroit {
    top: 55%;
    left: 90%;
    transform: translate(-50%, -50%);
}

#page-5212 .milieuCentral1 {
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-5212 .milieuCentral2 {
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
}

#page-5212 .milieuOff {
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-5212 .buteur1 {
    top: 15%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-5212 .buteur2 {
    top: 15%;
    left: 65%;
    transform: translate(-50%, -50%);
}


#page-5212 .selecteurs-et-bouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

#page-5212 .selecteurs-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}


#page-5212 .selecteur-container {
    margin : 1px;
}

#page-5212 select {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #fff;
    font-size: 14px;
}

#page-5212 button {
    display: block;
    width: 100%;
    max-width: 200px;
    padding: 10px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 5px;
}

#page-5212 button:hover {
    background: #2ecc71;
}

#page-5212 .logoClubs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}

#page-5212 .clubDomicile, .clubExterieur {
    width: 100px;
    height: 100px;
}

#page-5212 .clubDomicile img, .clubExterieur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-5212 .select-clubs {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;

}

#page-5212 .select-domicile, .select-exterieur {
    display: flex;
    align-items: center;

}

#page-5212 .select-domicile select, .select-exterieur select {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #fff;
    font-size: 14px;
    border: 1px solid #000;
}

#page-5212 .select-domicile p, .select-exterieur p {
    margin-right: 10px;
    margin-left: 5px;
}

#page-5212 .download-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 10px;
}

#page-5212 .radio-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

#page-5212 .radio-buttons div {
    margin-bottom: 5px;
}

/* 5-2-3 */

#page-523 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-523 #formation-523 {
    max-width: 900px;
    margin: 20px auto;
    border-radius: 10px;
    position: relative;
    height: calc(100vh - 200px);
    background-color: #2ecc71;
    font-family: Arial, sans-serif;
}

#page-523 #container-joueurs {
    position: relative;
    height: 100%;
}

#page-523 .joueur {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}

#page-523 .joueur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-523 .gardien {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-523 .defGauche {
    top: 55%;
    left: 10%;
    transform: translate(-50%, -50%);
}

#page-523 .defCentral1 {
    top: 70%;
    left: 25%;
    transform: translate(-50%, -50%);
}

#page-523 .defCentral2 {
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-523 .defCentral3 {
    top: 70%;
    left: 75%;
    transform: translate(-50%, -50%);
}

#page-523 .defDroit {
    top: 55%;
    left: 90%;
    transform: translate(-50%, -50%);
}

#page-523 .milieuCentral1 {
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
}

#page-523 .milieuCentral2 {
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
}

#page-523 .attGauche {
    top: 25%;
    left: 25%;
    transform: translate(-50%, -50%);
}

#page-523 .attDroite {
    top: 25%;
    left: 75%;
    transform: translate(-50%, -50%);
}

#page-523 .buteur {
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#page-523 .selecteurs-et-bouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

#page-523 .selecteurs-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}


#page-523 .selecteur-container {
    margin : 1px;
}

#page-523 select {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #fff;
    font-size: 14px;
}

#page-523 button {
    display: block;
    width: 100%;
    max-width: 200px;
    padding: 10px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 5px;
}

#page-523 button:hover {
    background: #2ecc71;
}

#page-523 .logoClubs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}

#page-523 .clubDomicile, .clubExterieur {
    width: 100px;
    height: 100px;
}

#page-523 .clubDomicile img, .clubExterieur img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #fff;
}

#page-523 .select-clubs {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;

}

#page-523 .select-domicile, .select-exterieur {
    display: flex;
    align-items: center;

}

#page-523 .select-domicile select, .select-exterieur select {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #fff;
    font-size: 14px;
    border: 1px solid #000;
}

#page-523 .select-domicile p, .select-exterieur p {
    margin-right: 10px;
    margin-left: 5px;
}

#page-523 .download-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 10px;
}

#page-523 .radio-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

#page-523 .radio-buttons div {
    margin-bottom: 5px;
}

/* GESTION */

.tableaux-container .success-message-container{
    margin-bottom: 10px;
}

.tableaux-container .error-message-container{
    margin-bottom: 10px;
}

.tableaux-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
}

.comptes-communautaires-container,
.utilisateurs-communautaires-container {
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow-x: auto;
    flex-grow: 1;
}

.comptes-communautaires-titre,
.utilisateurs-communautaires-titre {
    text-align: center;
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
}

.ajouter-btn {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    color: #fff;
    background-color: #28a745;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.ajouter-btn:hover {
    background-color: #218838;
}

.comptes-communautaires-table,
.utilisateurs-communautaires-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
    color: #333;
}

.comptes-communautaires-table thead,
.utilisateurs-communautaires-table thead {
    background-color: #007bff;
    color: #fff;
}

.comptes-communautaires-table th,
.comptes-communautaires-table td,
.utilisateurs-communautaires-table th,
.utilisateurs-communautaires-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.comptes-communautaires-table th,
.utilisateurs-communautaires-table th {
    background-color: #007bff;
    color: #ffffff;
    text-transform: uppercase;
}

.comptes-communautaires-table tr:nth-child(even),
.utilisateurs-communautaires-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.comptes-communautaires-table tr:hover,
.utilisateurs-communautaires-table tr:hover {
    background-color: #f1f1f1;
}

.modifier-btn {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    background-color: #007bff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.modifier-btn:hover {
    background-color: #0056b3;
}

.supprimer-btn{
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    background-color: #EB3324;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.supprimer-btn:hover{
    background-color: #A12319;
}

.reset-btn{
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    background-color: #F08650;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.reset-btn:hover{
    background-color: #995533;
}


@media (max-width: 768px) {
    .tableaux-container {
        padding-top: 40px;
        top: 40px;
    }
}

@media (max-width: 480px) {
    .tableaux-container {
        padding-top: 40px;
        top: 40px;
    }
}