/* Améliorations générales du design */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    color: #333;
    position: relative; /* Nécessaire pour le positionnement du pseudo-élément */
    overflow-x: hidden; /* Pour éviter tout scroll horizontal potentiel */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Utilisation de vw pour couvrir toute la largeur de la fenêtre */
    height: 100vh; /* Utilisation de vh pour couvrir toute la hauteur de la fenêtre */
    background-image: url('/img/logo_volley_couleur.png'); /* Chemin vers votre logo */
    background-repeat: repeat; /* Répète l'image pour couvrir tout l'écran */
    background-size: cover; /* Couvre l'intégralité de l'écran */
    background-position: center; /* Centre l'image */
    opacity: 0.1; /* Ajuste la transparence à 10% */
    z-index: -1; /* Assure que le fond reste derrière tout le contenu */
    pointer-events: none; /* Empêche toute interaction avec l'élément de fond */
}

/* Header et Navigation */
#header {
    position: sticky;
    top: 0; /* Le menu reste en haut de la page lors du défilement */
    z-index: 1000; /* Assure que le menu reste au-dessus des autres contenus */
    background-color: #002b5c;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 60px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

nav a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    transition: background-color 0.3s, color 0.3s;
}

nav a:hover {
    background-color: #00509e;
    border-radius: 5px;
}

nav a.active:hover {
    color: white;
}

nav a.active {
    border-bottom: 2px solid #00509e; /* Liseré sous le lien actif */
    color: #00509e; /* Change la couleur du lien actif pour plus de visibilité */
    font-weight: bold; /* Optionnel : met en gras le lien actif */
}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Assure que le wrapper couvre toute la hauteur de la vue */
}

#content {
    flex: 1; /* Permet à la section de contenu de prendre tout l'espace disponible */
}

/* Style des sections pour le repli */
section {
    display: none; /* Cache toutes les sections par défaut */
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    background-color: rgba(0, 80, 158, 0.2);
    backdrop-filter: blur(5px); /* Effet de flou pour une meilleure lisibilité */
    font-weight: bold; /* Texte plus épais */
    color: #002b5c; /* Couleur de texte adaptée pour le contraste */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre pour le contraste */
    text-align: center;
}

section.active {
    display: block; /* Affiche la section active */
    transition: all 0.3s ease-in-out; /* Animation douce pour l'ouverture/fermeture */
}

section a {
    color: #00509e; /* Couleur des liens */
    text-decoration: none;
    font-weight: bold; /* Liens également en gras pour uniformité */
}

section a:hover {
    text-decoration: underline; /* Effet au survol pour les liens */
}

/* Pied de page */
footer {
    background-color: #002b5c;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: sticky;
    width: 100%;
    bottom: 0;
    z-index: 10; /* Assure que le footer reste au-dessus du contenu */
}

/* Styles des blocs de contenu */
.content-block {
    margin-bottom: 20px; /* Espacement entre les blocs de contenu */
}

/* Flexbox pour les sections avec images */
.content-flex {
    display: flex;
    align-items: center; /* Centre verticalement les éléments */
    gap: 20px; /* Espace entre l'image et le texte */
}

.content-image {
    max-width: 200px; /* Limite la largeur de l'image */
    height: auto; /* Conserve le ratio d'aspect */
    border-radius: 8px; /* Arrondi pour l'esthétique */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre pour le contraste */
}

/* Cartes et Maps */
.map {
    height: 256px;
    width: 100%; /* Ajuste à la largeur disponible */
    max-width: 600px; /* Limite la taille maximale de la carte */
    margin: 10px auto; /* Centre horizontalement en utilisant auto */
    display: block; /* Nécessaire pour le centrage avec margin */
    border: 1px solid #ddd; /* Optionnel : ajoute une bordure légère pour séparer visuellement */
    border-radius: 8px; /* Optionnel : coins arrondis pour un effet esthétique */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionnel : légère ombre pour un effet de profondeur */
}

/* Style des liens dans les sections */
section ul {
    list-style: none;
    padding: 0;
}

section ul li {
    margin: 5px 0;
}

section ul li a {
    color: #00509e;
    text-decoration: none;
}

section ul li a:hover {
    text-decoration: underline;
}

/* Icônes et Liens des Réseaux Sociaux */
.social-list {
    list-style: none; /* Retire les puces */
    padding: 0;
    margin: 0;
    display: flex; /* Utilise Flexbox pour le conteneur */
    flex-direction: column; /* Aligne les éléments en colonne */
    align-items: center; /* Centre horizontalement les éléments dans la colonne */
}

.social-item {
    display: flex; /* Utilise Flexbox pour aligner les icônes et les liens */
    align-items: center; /* Centre les éléments verticalement */
    margin-bottom: 10px; /* Espace entre chaque réseau */
    min-width: 150px;
}

.social-item img.logo {
    width: 24px; /* Taille des icônes */
    height: 24px; /* Taille des icônes */
    margin-right: 10px; /* Espace entre l'icône et le lien */
}

.social-item a {
    text-decoration: none; /* Retire le soulignement des liens */
    color: #00509e; /* Couleur du texte */
    font-weight: bold; /* Texte en gras pour une meilleure lisibilité */
}

.social-item a:hover {
    text-decoration: underline; /* Soulignement au survol */
}

.salle_nom {
    margin-right: 10px;
}

/* Style pour le bouton hamburger */
#menu-toggle {
    display: none; /* Masqué par défaut */
    background: none;
    border: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
}

.text-container{
    width: 100%;
}

.AnnonceSource{
    font-size: xx-small;
}

/* Classe pour masquer des éléments de menu */
.menu-cache {
    display: none !important;
}

/* Conteneur pour le label et le bouton */
#menu-container {
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    align-items: center; /* Centre les éléments verticalement */
    justify-content: flex-end;
    gap: 10px; /* Espace entre le label et le bouton */
    position: absolute; /* Permet un positionnement flexible dans le header */
    right: 10px; /* Positionné à droite du header */
}

/* Styles pour le label du menu */
#menu-label {
    display: none;
    color: white;
    font-size: 16px;
    cursor: pointer; /* Ajoute un pointeur pour indiquer la cliquabilité */
}

/* Style pour les blocs de texte avec cadre */
.text-block {
    border: 2px solid #00509e; /* Bordure bleue autour du cadre */
    border-radius: 8px; /* Coins arrondis pour le cadre */
    padding: 15px; /* Espacement intérieur pour le contenu */
    margin: 10px 0; /* Espacement entre les blocs */
    background-color: rgba(0, 80, 158, 0.1); /* Légère coloration de fond pour le cadre */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre pour donner de la profondeur */
}

.text-block h3 {
    margin-top: 0; /* Supprime le margin-top par défaut du h3 */
    font-size: 1.5em; /* Taille du titre */
    color: #002b5c; /* Couleur du titre */
    text-align: left; /* Alignement du titre à gauche */
    border-bottom: 1px solid #00509e; /* Ligne de séparation sous le titre */
    padding-bottom: 5px; /* Espacement sous le titre */
    margin-bottom: 10px; /* Espacement entre le titre et le texte */
}

/* Style pour le texte "REJOIGNEZ NOUS !" avec une ligne animée */
.join-link {
    display: inline-block; /* Permet d'ajuster les marges et le padding */
    font-size: 2em; /* Augmente la taille du texte */
    font-weight: bold; /* Met le texte en gras */
    color: #002b5c; /* Couleur du texte */
    text-decoration: none; /* Retire le soulignement du lien */
    padding: 10px 20px; /* Ajoute du padding autour du texte */
    border: 2px solid #00509e; /* Ajoute une bordure autour du texte */
    border-radius: 5px; /* Arrondit les coins de la bordure */
    background-color: rgba(0, 80, 158, 0.1); /* Ajoute un fond léger pour le contraste */
    transition: background-color 0.3s, color 0.3s; /* Animation pour l'effet de survol */
    transition: color 0.3s, color 0.3s; /* Animation pour l'effet de survol */
    text-align: center; /* Centre le texte */
    margin-top: 20px; /* Ajoute de l'espace au-dessus */
    position: relative; /* Nécessaire pour le positionnement du pseudo-élément */
}

.join-link:hover {
    background-color: #00509e; /* Change la couleur de fond au survol */
    color: white; /* Change la couleur du texte au survol */
    border-color: #002b5c; /* Change la couleur de la bordure au survol */
}

/* Style du tableau */
table {
    width: 100%; /* Prend toute la largeur du conteneur */
    border-collapse: collapse; /* Supprime l'espace entre les bordures des cellules */
    margin: 20px 0; /* Ajoute un espacement autour du tableau */
    font-size: 1em; /* Taille de police adaptée */
    text-align: left; /* Alignement du texte dans les cellules */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre pour effet de profondeur */
    background-color: #ffffff; /* Fond blanc pour contraste avec le texte */
    border-radius: 8px; /* Coins légèrement arrondis pour uniformité */
    overflow: hidden; /* Pour les bordures arrondies */
}

th, td {
    padding: 12px 15px; /* Espacement interne pour les cellules */
    border-bottom: 1px solid #ddd; /* Bordure légère sous les cellules */
}

th {
    background-color: #00509e; /* Fond bleu pour les en-têtes */
    color: white; /* Texte blanc pour le contraste */
    font-weight: bold;
    text-transform: uppercase; /* Texte en majuscule pour les en-têtes */
}

tr:nth-child(even) {
    background-color: rgba(0, 80, 158, 0.05); /* Lignes paires avec un léger fond bleu pour l'alternance */
}

tr:hover {
    background-color: rgba(0, 80, 158, 0.1); /* Change le fond au survol */
}

td a {
    color: #00509e; /* Liens en bleu */
    text-decoration: none;
    font-weight: bold; /* Gras pour les liens */
}

td a:hover {
    text-decoration: underline; /* Souligné au survol pour indiquer qu'il est cliquable */
}

.resultat-container {
    display: inline-block; /* Réduit la largeur du cadre au contenu */
    padding: 15px;
    margin: 20px 0;
    position: relative; /* Nécessaire pour positionner la date */
    border: 2px solid #00509e;
    border-radius: 8px;
    background-color: rgba(0, 80, 158, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 1.1em;
    color: #002b5c;
}

/* Style pour la date de mise à jour, placée en haut à gauche */
.dateMaJ {
    position: absolute;
    top: -10px; /* Ajuste la position verticale pour placer la date juste au-dessus du contenu */
    left: 10px; /* Ajuste la position horizontale */
    font-size: 0.50em; /* Taille réduite pour discrétion */
    color: #666;
    background-color: white; /* Fond blanc pour lisibilité */
    padding: 2px 5px;
    border-radius: 4px; /* Coin arrondi pour le fond */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Légère ombre */
}

.resultat-content {
    font-weight: bold;
    color: #002b5c;
    line-height: 1.4;
}

/* Calendrier Repliable */
.calendar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.calendar-checkbox {
    display: none;
}

.toggle-calendar {
    cursor: pointer;
    display: inline-block;
    padding: 10px 15px;
    background-color: #00509e;
    color: white;
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.toggle-calendar:hover {
    background-color: #003e7d;
}

.toggle-calendar::after {
    content: "Détails des matchs" !important; 
    display: inline-block;
}

.calendar-checkbox:checked ~ .toggle-calendar::after {
    content: "Masquer le détail";
}

.calendar-checkbox:checked ~ .calendar-container {
    display: block;
}

.calendar-container {
    display: none;
    width: 100%;
    max-width: 800px;
    margin-top: 10px;
    overflow-x: auto; /* Permet le défilement horizontal si nécessaire */
}

.calendar-container table {
    width: 100%;
    min-width: 600px; /* Définit une largeur minimale pour éviter le rétrécissement excessif */
    overflow: hidden;
}

/* Menu en gestion d'ecran un peu petit*/
@media (min-width: 768px) and (max-width: 1024px) {
    nav a {
        font-size: 0.9rem; /* Réduction légère de la taille de la police */
        padding: 10px 0.63vw; /* Padding dynamique basé sur la largeur de la fenêtre */
    }
    nav a.active{
        font-weight: 500;
    }

    #header {
        height: 37px; /* Adapte automatiquement la hauteur en cas de changement de padding */
    }

    nav {
        justify-content: space-around; /* Maintient l'équilibre des liens */
        flex-wrap: nowrap; /* Empêche les liens de passer à la ligne */
    }
}

/* Menu mobile */
@media (max-width: 768px) {
    .content-flex {
        flex-direction: column; /* Passe en colonne sur mobile */
        text-align: center; /* Centre le texte */
    }

    .content-image {
        max-width: 128px; /* L'image prend toute la largeur sur mobile */
        margin: 0 auto; /* Centre l'image */
    }

    nav {
        display: none; /* Cache le menu par défaut sur mobile */
        flex-direction: column; /* Colonne pour les petits écrans */
        position: absolute;
        top: 37px; /* Positionné juste en dessous du header */
        left: 0;
        width: 100%; /* Prend toute la largeur */
        background-color: #002b5c; /* Fond identique au header */
        z-index: 999; /* Au-dessus du contenu */
    }

    nav a {
        padding: 15px 20px; /* Espace accru pour faciliter le clic */
        text-align: center;
        border-bottom: 1px solid #00509e; /* Séparation des liens */
        color: white;
    }

    #menu-label {
        display: inline-block; /* Affiche le label sur les petits écrans */
        position: unset;
    }

    #menu-toggle {
        display: inline-block; /* Assure que le bouton s'affiche correctement */
        position: unset;
    }

    #header {
        display: flex;
        align-items: center; /* Centre les éléments verticalement */
        justify-content: space-between; /* Espace entre le menu et le label */
        height: 37px;
    }

    /* Afficher le menu lorsque le bouton est cliqué */
    nav.afficher {
        display: flex; /* Affiche le menu en mode colonne */
    }

    nav a:hover {
        background-color: #00509e; /* Conserve l'effet de survol sur mobile */
    }

    nav a.active {
        color: #00509e; /* Affiche correctement le style du lien actif */
    }

    .calendar-container {
        max-width: 100%; /* Utilise toute la largeur disponible sur mobile */
        overflow-x: auto; /* Ajoute un scroll horizontal en cas de besoin */
    }

    .calendar-container table {
        width: max-content; /* Empêche le tableau de se compresser trop */
    }
}