body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Hauteur de la page complète */
}

h2 {
  font-family: 'Luckiest Guy', sans-serif;
  font-size: 2em;
  color: blue;
  text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
}
form {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}
label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}
select, 
input[type="text"], 
input[type="radio"], 
input[type="email"], 
input[type="tel"], 
input[type="date"] {
    margin-bottom: 15px;
    padding: 8px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Assure une largeur uniforme */
}
.radio-group {
    display: flex;
    justify-content: space-between;
}

.stade-group {
    display: flex;
    justify-content: space-between;
}
button {
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}

/* Header styles */
.header {
    background-color: #333; /* Gris foncé */
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Header links */
.header-link {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 12px;
    border: 2px solid white;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.header-link:hover {
    background-color: white;
    color: #333;
}

/* Right section */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-name {
    font-size: 16px;
    color: white;
}

.hidden {
    display: none;
}
.visible {
    display: block;
}
.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.radio-group input[type="radio"] {
    order: 2; /* Place le bouton radio après le texte */
}



.stade-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.stade-group input[type="radio"] {
    order: 2; /* Place le bouton radio après le texte */
}

.adversaire-group {
    margin-top: 15px;
    display: block; /* Par défaut, le champ texte est affiché */
}
.indent-1 { margin-left: 20px; }
.indent-2 { margin-left: 40px; }

.inline-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    gap: 10px; /* Espacement entre les éléments */
}

.inline-group label {
    margin: 0; /* Supprime les marges inutiles */
    white-space: nowrap; /* Empêche le retour à la ligne */
}

.inline-group input[type="radio"] {
    width: auto; /* Assure une bonne disposition */
    margin: 0 5px 0 0; /* Espacement correct entre les éléments */
}


input[type="submit"] {
    font-family: 'Arial', sans-serif; /* Utiliser la même police que 'legend' */
    font-size: 1.2em; /* Taille de police similaire à 'legend' */
    text-align: center; /* Centrer le texte à l'intérieur du bouton */
    display: block; /* Permet de centrer avec margin auto */
    margin: 20px auto; /* Centre horizontalement et ajoute un peu d'espace autour */
    padding: 10px 20px; /* Espaces à l'intérieur du bouton */
    background-color: #4CAF50; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte */
    border: none; /* Enlève le bord par défaut */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Change le curseur quand on passe sur le bouton */
}

input[type="submit"]:hover {
    background-color: #45a049; /* Changer la couleur au survol */
}

/* Appliquer un contour rouge et des coins arrondis aux fieldsets */
fieldset {
    border: 3px solid red !important; /* Bordure plus épaisse et forçage */
    border-radius: 15px !important; /* Coins bien arrondis */
    padding: 20px; /* Ajout d’espace intérieur */
    margin-bottom: 20px; /* Espacement entre les fieldsets */
}

/* Améliorer l'affichage des légendes */
legend {
    font-weight: bold;
    color: white;
    background-color: red; /* Fond rouge */
    padding: 5px 10px;
    border-radius: 8px; /* Coins arrondis */
    font-size: 1.1em; /* Agrandir un peu */
}

h1 {
    font-weight: bold;
    color: red; /* Texte en rouge */
    padding: 10px 15px; /* Un peu plus de padding pour l'effet */
    font-size: 1.8em; 
    text-align: center; /* Centré */
}

h2 {
    font-weight: bold;
    color: blue; /* Texte en rouge */
    padding: 8px 8px; /* Un peu plus de padding pour l'effet */
    font-size: 1.3em; 
    text-align: center; /* Centré */
}

img {
    display: block;  /* Permet de centrer avec margin auto */
    margin: 0 auto;  /* Centre horizontalement */
    max-width: 100%;  /* Empêche le dépassement */
    height: auto;  /* Garde les proportions */
}

.bouton-vert {
    background-color: #28a745; /* Vert Bootstrap */
    color: #ffffff;
    font-family: "Bodoni MT", serif;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    width: 250px;
}

.bouton-vert:hover {
    background-color: #218838; /* Vert plus foncé au survol */
}