@charset "utf-8";
/* CSS Document */

.audioevent::after {
        display: inline-block;
        padding: 7px 7px 7px 7px;
        color: #000000;
        background: #ffffff;
        font: normal normal normal 28px/1 FontAwesome;
        content: "\f025";
        text-indent: 0%;
        position: relative;
        right: -250px;
		top: -20px;
        }

.audioeventsmall::after {
        display: inline-block;
        padding: 0px 0px 0px 0px;
        color: #000000;
        font: normal normal normal 14px/1 FontAwesome;
        content: "\f025";
        text-indent: 0%;
        position: relative;
        right: 0px;
		top: 0px;
        }




        /* ----- Zone Titre + Recherche ----- */
        .search-header {
            background: #827878;
            padding-top: 5px;
			padding-left: 30px;
			padding-right: 10px;
			padding-bottom: 5px;
            border-radius: 10px 10px 0 0;
            text-align: left;
            color: white;
        }

           

        /* ----- Onglets ----- */
        .cadreresultats {
			border-left: 1px solid #ddd; 
    		border-right: 1px solid #ddd; 
		}	
			
		.tab-container {
            display: flex;
            border-bottom: 2px solid #ddd;
			background: white;
            margin-bottom: 10px;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
        }

        .tab-container::-webkit-scrollbar {
            display: none;
        }

        .tab-button {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 12px 14px;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            color: #666;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease-in-out;
            flex-shrink: 0;
        }

        .tab-button i {
            color: #666;
        }

        .tab-button.active {
            color: black;
            border-bottom: 3px solid black;
        }

        .tab-button.active i {
            color: black;
        }

        /* ----- Conteneur principal ----- */
        .containercat {
            display: flex;
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: auto;
        }

        /* ----- Colonne Filtres (Gauche) ----- */
        .filters-container {
            width: 25%;
            display: none; /* Par défaut, caché */
        }

        .filters {
            background: #f5f5f5;
            padding: 15px;
            border-radius: 10px;
        }

        .filters h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }
		
		 /* Forcer une case par ligne dans la zone des filtres revue */
  #revueFilters label {
    display: block;
    margin-bottom: 5px;
  }

		/* Style pour les boutons radio */
    .filter-options {
      margin-bottom: 20px;
    }
   .filter-options label {
  margin-right: 15px;
  font-weight: normal; /* Enlève le gras */
  font-size: 14px; /* Taille de texte plus agréable */
  cursor: pointer;
}
		
        /* ----- Colonne Résultats (Droite) ----- */
		
		
        .results-container {
            flex: 1;
            background: white;
            padding: 15px;
            border-radius: 5px;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

		/* Cacher la 4ème colonne */
    .hidden-column {
      display: none;
    }
		  /* Message lorsque tous les onglets sont vides */
    #resultsMessage {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: #333;
      margin-left: 20px;
    }
	


        /* ----- Responsive ----- */
        @media screen and (max-width: 768px) {

            .containercat {
                flex-direction: column;
            }

            .filters-container {
                width: 100%;
            }

        }


@media (min-width: 768px) {
 	.audioevent::after {
        display: inline-block;
        padding: 0 7px 7px 7px;
        color: #000000;
        background: #ffffff;
        font: normal normal normal 28px/1 FontAwesome;
        content: "\f025";
        text-indent: 0%;
        position: relative;
        right: -280px;
		top: -10px;
        }