header {
    background-color: #AD9C92 ;
}
.items .item a .caption {
    background: #D4C2A1;
}

.items .item a .caption .middle {
    background:  #805050;
}

.fa-solid, .fa-phoenix-squadron {
    color: #eaedd5;
    font-size: 2em;
}

.items .item a .caption .title{
    color: darkolivegreen;
}

.items .item a .caption .subtitle{

    color: #5D726F;
}

h2{

    color:darkolivegreen;
}


.debug {
    display: block;
    background-color: #FCA12D;
    color: black;
    font-size: 1.1em;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    border: 1px solid #F18A04;
    border-radius: 5px;
    margin: 15px 0;
}


/*  Code CSS pour les bouttons joueurs emprunté a ChatGPT :https://chatgpt.com/c/679819ae-91f4-8004-97e8-94236db3e2b8 */
button {
    background-color: #a6825c; /* Marron clair */
    color: #fff; /* Blanc pour le texte */
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 10px; /* Bords arrondis */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre */
}

button:hover {
    background-color: #8b6d4f; /* Marron plus foncé */
    transform: scale(1.05); /* Légère mise en avant */
}

button:active {
    background-color: #6b503d; /* Encore plus foncé */
    transform: scale(0.98); /* Effet d'appui */
}

button:focus {
    outline: 2px solid #8b6d4f; /* Contour pour l'accessibilité */
    outline-offset: 4px;
}





/*  Code CSS pour les Tableaux des équipes emprunté a ChatGPT :https://chatgpt.com/c/679819ae-91f4-8004-97e8-94236db3e2b8 */
.teams-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* Centre les éléments horizontalement */
}

.team-section {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    width: 200px; /* Largeur fixe pour chaque section */
    box-sizing: border-box;
    text-align: center; /* Centre le contenu dans chaque section */
}

.team-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.team-table {
    width: 100%;
    border-collapse: collapse;
}

.team-table th,
.team-table td {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
}

.team-table th {
    background-color: #e9e9e9;
    font-weight: bold;
}


/*CSS pour le formulaire de contact*/

body {
    font-family: "Arial", sans-serif;
    background-color: #f9f7e6; /* Couleur de fond du site */
    color: #3d3d3d; /* Couleur du texte */
    margin: 0;
    padding: 0;
}

form {
    display: flex;
    flex-direction: column; /* Disposition verticale */
    align-items: flex-start;
    justify-content: center;
    margin: 20px auto;
    width: 400px; /* Largeur maximale du formulaire */
    padding: 20px;
    background-color: #ffffff; /* Fond blanc pour le formulaire */
    border: 1px solid #c7b199; /* Bordure assortie */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

form label {
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
}

form input,
form textarea {
    border: 1px solid #c7b199; /* Couleur des bordures */
    border-radius: 5px; /* Coins arrondis */
    padding: 8px;
    font-size: 14px;
    width: 100%;
    margin-bottom: 15px;
}

form textarea {
    height: 100px;
    resize: none;
}

button {
    background-color: #b08c5d; /* Couleur du bouton */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    align-self: flex-end; /* Bouton aligné à droite */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #8a7045; /* Couleur lors du survol */
}


/*CSS pour le boutton Voir la messagerie*/
.messagerie-btn {
    display: inline-block;
    padding: 10px 20px; /* Ajuste les valeurs pour correspondre au bouton */
    background-color: #a67c52; /* Couleur marron (valeur à ajuster selon votre design) */
    color: white; /* Couleur du texte */
    border: none; /* Supprime les bordures */
    border-radius: 5px; /* Bords arrondis */
    font-size: 14px; /* Taille de la police */
    text-align: center; /* Centre le texte */
    text-decoration: none; /* Supprime le soulignement */
    cursor: pointer; /* Change le curseur en "main" */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ajoute une ombre */
}

.messagerie-btn:hover {
    background-color: #8b5f39; /* Couleur plus foncée au survol */
}

/*Css pour les messages issus du formulaire de contact*/

.message-item {
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    padding: 25px; /* Augmente le padding pour plus d'espace à l'intérieur */
    margin: 15px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 700px; /* Augmente légèrement la largeur */
    font-family: 'Arial', sans-serif;
    color: #333;
}

.message-item h2 {
    font-size: 1.4em; /* Légèrement plus grand */
    color: #4CAF50;
    margin-bottom: 10px;
}

.message-item .details {
    font-size: 1em; /* Augmente légèrement la taille de la police */
    color: #666;
    margin-bottom: 20px; /* Plus d'espace entre les détails et le message */
    line-height: 1.6; /* Améliore la lisibilité */
}

.message-item p {
    font-size: 1.1em; /* Agrandit légèrement la taille du message */
    line-height: 1.8; /* Améliore l'espacement entre les lignes */
    color: #444;
}


/*styles exercices 12*/

/* Mettre le texte en rouge */
.message-erreur-formulaire {
    color: red;
}

/* Ajouter une bordure rouge */
.controle-erreur {
    border: 2px solid red;
}


.alert {
    display: block;
    color: white;
    font-size: 1.1em;
    margin-top: 5px;
    margin-bottom: 7px;
    padding: 15px 20px;
    border: 1px solid #bebdbd;
    border-radius: 5px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}


.alert-success {
    background-color: #55b559;
}


.alert-danger {
    background-color: #f55145;
}

/*CSS bouton pour ajouter une équipe*/
#bouton-equipe{
    display: flex;
    justify-content: center;
}



/*  Code CSS pour les Tableaux des équipes emprunté a ChatGPT :https://chatgpt.com/c/679819ae-91f4-8004-97e8-94236db3e2b8 */

/* Style pour la liste de sélection */
select {
    width: 100%;
    padding: 10px;
    border: 2px solid #c2a679; /* Bordure assortie */
    border-radius: 5px;
    background-color: #f5f1e3; /* Fond assorti au formulaire */
    color: #5a5a3f; /* Texte assorti */
    font-size: 16px;
    appearance: none; /* Supprime l'apparence par défaut */
    cursor: pointer;
    outline: none;
}

/* Style au survol */
select:hover {
    border-color: #a88a56; /* Changement de couleur au survol */
}

/* Style lorsqu'on sélectionne */
select:focus {
    border-color: #8c693c; /* Bordure plus foncée */
    box-shadow: 0 0 5px rgba(140, 105, 60, 0.5);
}

/* Style des options */
select option {
    background-color: #f5f1e3; /* Même couleur de fond */
    color: #5a5a3f;
    padding: 10px;
}