@font-face {
    font-family: 'font';
    src: url('fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
    /* Ajoutez d'autres formats de police si nécessaire */
}

.menu-icon {
    display: none;
    color:white;
}

nav {
    background-color: #333; /* Couleur de fond */
    padding: 10px 0; /* Espacement intérieur en haut et en bas */
    display: flex; /* Utilisation de flexbox pour positionner les éléments */
    align-items: center; /* Alignement vertical */
}

.logo {
    margin-right: 20px; /* Marge à droite pour séparer le logo des onglets */
    margin-left: 10px;
}

.logo img {
    height: 40px; /* Taille du logo */
    width: auto;
    vertical-align: middle; /* Alignement vertical */
}

ul {
    list-style-type: none; /* Supprimer les puces */
    margin: 0;
    padding: 0;
}

li {
    display: inline-block; /* Afficher les éléments de la liste sur la même ligne */
    margin-right: 10px; /* Marge à droite entre les éléments */
}

/* Styles des liens dans la barre de navigation */
li a {
    display: block;
    color: white; /* Couleur du texte */
    padding: 10px 20px; /* Espacement intérieur des liens */
    text-decoration: none; /* Supprimer la soulignement des liens */
}

/* Effet de survol */
li a:hover {
    background-color: #555; /* Couleur de fond au survol */
}

.active {
    background-color: #555; /* Couleur de fond au survol */
}


body {
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f9f9f9 !important;
    font-family: 'font', sans-serif;
    font-size: 16px;
}

.container {
    max-width: 90%;
    margin: 0 auto; /* Ajout de la marge automatique pour centrer le contenu */
}

.content-container {
    font-size: 14px;
    display: flex;
    flex-direction: column; /* Empêche les éléments de s'étendre horizontalement */
    align-items: center; /* Centre les éléments horizontalement dans le conteneur */
    justify-content: space-between;
    border-bottom: 1px solid #948473;
    border-top: 1px solid #948473;
}

.content-container-sim {
    display: flex;
    flex-direction: column; /* Empêche les éléments de s'étendre horizontalement */
    align-items: flex-start; /* Centre les éléments horizontalement dans le conteneur */
    justify-content: space-between;
    border-bottom: 1px solid #948473;
    border-top: 1px solid #948473;
}

h1 {
    color: #948473;
    margin-top: 30px;
    font-size: 40px;
    text-align: center;
    -webkit-text-stroke: 0.5px black; /* Contour du texte pour les navigateurs basés sur WebKit (Chrome, Safari) */
}

h2 {
    color: black;
    font-size: 16px;
    text-align: left;
    margin-bottom: 0;
}

label {
    color: black;
}

.filter-label {
    margin-right: 8px;
}

.filterOption{
    cursor: pointer;
	outline:0;
	color: #000000;
	font-size: 13px;
	padding: 5px 9px;
	min-width: 0px;
	border-radius: 9px;
	border: 1px solid #948473;
	background-color: #ffffff;
}

.filterOption:hover, .filterOption:focus {
	border: 1px solid #080706FF;
    border-radius: 9px;
}

#lblFiltre {
    margin-left: 10px;
    margin-right: 10px;
}

.filter-sort {
    margin-bottom: 5px;
    margin-top: 10px;
    margin-right: 5px;
}

#filterSort {
    cursor: pointer;
	outline:0;
	color: #000000;
	font-size: 14px;
	padding: 5px 9px;
	min-width: 0px;
	border-radius: 9px;
	border: 1px solid #948473;
	background-color: #ffffff;
    text-align: center;
}

#filterSort:hover, .filterOption:focus {
	border: 1px solid #080706FF;
    border-radius: 9px;
}

.filter-sort {
    display: flex;
    align-items: center; /* Alignement vertical au centre */
}

.filter-sort p,
.filter-sort label,
.filter-sort select {
    margin: 0; /* Supprimer les marges par défaut */
}

#sortIndicator {
    cursor: pointer;
    margin-left: 5px; /* Ajouter une marge à gauche pour l'indicateur de tri */
    font-size: 20px;
}

#userFilter {
    border-radius: 5px;
	border: 1px solid #948473;
    padding: 4px 6px;
}

#userFilter:hover, #userFilter:focus {
	border: 1px solid black;
    outline: 1px solid black;
}

#serieFilter {
    border-radius: 5px;
	border: 1px solid #948473;
    padding: 4px 6px;
}

#serieFilter:hover, #userFilter:focus {
	border: 1px solid black;
    outline: 1px solid black;
}

.user {
    text-align: left;
    padding-bottom: 40px;
    padding: 10px;
}

.userizar {
    text-align: left;
    margin-top: 10px;
}

.periodFilter {
    padding: 10px;
    flex-wrap: wrap;
}

.radioText {
    margin-right: 5px;
}

.radioButton {
    position: relative;
    cursor: pointer; /* Ajoute un curseur pointer pour indiquer qu'il s'agit d'un élément cliquable */
}

.titreReleve {
    margin-bottom: 10px;
}

input[type=radio] {
    -ms-transform: scale(1.2); /* IE 9 */
    -webkit-transform: scale(1.2); /* Chrome, Safari, Opera */
    transform: scale(1.2);
    accent-color: #948473; 
}

.dateFilter {
    display: none;
    color: white;
    border-bottom: 2px solid #948473;
    padding: 10px;
    flex-direction: row;
    align-items: baseline;
}

.dateType {
    border: 1px solid #948473;
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 13px;
}

.startDate {
    margin-right: 10px; 
}

.dateType:hover, .dateType:focus {
	border: 1px solid #080706FF;
    border-radius: 5px;
    outline: 1px solid black;
}

.pagination {
    font-size: 12px;
    text-align: right;
    flex: 1;
}

.toggleTableButton {
    background: radial-gradient(circle at center, #d6c1aa 5%, #F0F0F0 100%);
	background-color:#F0F0F0;
	border:1px solid #948473;
	display:inline-block;
	cursor:pointer;
	color:#505739;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
    transition: transform 0.1s, box-shadow 0.1s;
}

.btnExport {
    margin-right: 10px;
    padding:2px 5px;
}

.btnTable {
    margin-right: 50px;
    padding:4px 40px;
}

.toggleTableButton:hover {
	background: radial-gradient(circle at center,  #F0F0F0 100%, #d6c1aa 5%);
	background-color:#ccc2a6;
}

.toggleTableButton:active {
    transform: scale(0.95);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btnpageLeft {
    background:linear-gradient(to left, #d6c1aa 5%, #F0F0F0 100%);
	background-color:#F0F0F0;
	border-radius:15px;
	border:1px solid #948473;
	display:inline-block;
	cursor:pointer;
	color:#505739;
	font-size:10px;
	font-weight:bold;
	padding:3px 8px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
    margin-bottom: 30px;
}
.btnpageLeft:hover {
	background:linear-gradient(to left, #F0F0F0 5%, #d6c1aa 100%);
	background-color:#ccc2a6;
}
.btnpageLeft:active {
	position:relative;
	top:1px;
}

.btnpageRight {
	background:linear-gradient(to right, #d6c1aa 5%, #F0F0F0 100%);
	background-color:#F0F0F0;
	border-radius:15px;
	border:1px solid #948473;
	display:inline-block;
	cursor:pointer;
	color:#505739;
	font-size:10px;
	font-weight:bold;
	padding:3px 8px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
    margin-bottom: 30px;
}
.btnpageRight:hover {	
    background:linear-gradient(to right, #F0F0F0 5%, #d6c1aa 100%);
	background-color:#ccc2a6;
}
.btnpageRight:active {
	position:relative;
	top:1px;
}

.legend {
    text-align: left;
    flex: 2;
}

.legend-text {
    font-size: 12px;
    padding: 4px;
    border-radius: 4px; /* Pour arrondir les coins */
    border: 1px solid #948473;
    display: inline-block;
    width: 90px;
    text-align: center;
}

#legendLow {
    background-color: red; /* Couleur pour "Moins de 2%" */
    color: #f0f0f0;
}

#legendMedium {
    background-color: orange; /* Couleur pour "2% - 5%" */
    color: #f0f0f0;
}

#legendMaximum {
    background-color: #f9f9f9; /* Couleur pour "5% - 10%" */
    color: #000000;
}

.directoryContainer {
    display: flex;
}

.filter-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px; /* Ajustez selon votre mise en page */
}

.filter-option {
    margin-bottom: 0px;
    margin-top: 10px;
}

.detailContainer {
    margin-top: -50px;
}

.title {
    margin-bottom: -8px;
    font-style: bold;
}

.spaceFree {
    font-size: 14px;
    margin-left: 5px;
}

.result {
    text-align: right;
    font-size: 12px;
}

.container-head {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}
.container-head .spacer {
    margin-left: auto; /* Pousse les éléments suivants vers la droite */
}

.btnExport {
    margin-right: 10px;
}

/* tableau style */

  table.tab thead th {
    background: #b6aca1;
    font-size: 17px;
    font-weight: bold;
    color: #f9f9f9;
    text-align: center;
  }
  table.tab thead th:first-child {
    border-left: none;
  }
  
  table.tab {
    background-color: #f9f9f9;
    width: 100%;
    text-align: center;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 10px;
    margin-bottom: 10px;
  }
  table.tab td, table.tab th {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #b6aca1;
  }
  table.tab tbody td {
    font-size: 13px;
  }

  .table-container {
    overflow-x: auto; /* Ajoute une barre de défilement horizontale si nécessaire */
    max-width: 100%; /* Assurez-vous que la div ne dépasse pas la largeur de son conteneur parent */
    margin: 0 auto; /* Centrer la div horizontalement */
}


@media (max-width: 600px) {
    h1 {
        font-size: 32px; /* 40 */
    }
    
    .content-container {
        font-size: 12px; /* 14 */
    }

    .filterOption {
        font-size: 11px; /* 13 */
    }

    input[type=radio] {
        -ms-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

    .dateType {
        font-size: 11px; /* 13 */
        padding: 2px 4px;
    }

    .dateFilter {
        flex-direction: column;
    }

    .startDate {
        margin-right: 0px;
        margin-bottom: 5px;
    }

    .startDate {
        margin-right: 0px;
    }

    h2 {
        font-size: 12px; /* 16 */
        margin-left: 5px;
    }

    .result {
        font-size: 10px; /* 12 */
        margin-right: 5px;
    }

    table.tab thead th {
        font-size: 12px; /* 17 */
      }

    body {
        font-size: 12px; /* 16 */
    }

    .pagination {
        font-size: 7px; /* 12 */
    }

    .btnpageRight {
        font-size: 7px;
        padding: 2px 6px;
        margin-right: 5px;
    }

    .btnpageLeft {
        font-size: 7px;
        padding: 2px 6px;
    }

    .toggleTableButton {
        font-size: 9px;
        padding: 3px 8px;
        margin-right: 5px;
    }

    .legend-text {
        font-size: 7px; /* 12 */
        width: 45px;
        margin-left: 5px;
    }

    .serie {
        font-size: 11px;
    }

    #userFilter {
        width: 100px;
    }

    #serieFilter {
        width: 70px;
    }
}

@media screen and (max-width: 768px) {
    nav {
        padding: 5px 0; /* Réduire l'espacement en haut et en bas */
        flex-direction: row; /* Afficher les éléments horizontalement */
        align-items: center; /* Aligner les éléments verticalement */
        justify-content: space-between; /* Pour que les éléments soient répartis sur la ligne */
    }
    
    .menu-icon {
        margin-left: auto;
        display: inline-block; /* Afficher l'icône du menu hamburger */
        cursor: pointer; /* Curseur de type pointer pour indiquer que c'est cliquable */
        margin-right: 10px; /* Marge à droite pour séparer l'icône du reste du contenu */
    }  

    ul {
        display: none; /* Masquer la liste de navigation par défaut sur les petits écrans */
    }

    /* Styles pour la liste de navigation lorsqu'elle est affichée en mode hamburger */
    ul.show {
        display: block; /* Afficher la liste de navigation */
        position: absolute; /* Position absolue pour la placer correctement */
        top: 60px; /* Décalage vers le bas pour éviter de chevaucher la barre de navigation */
        background-color: #333; /* Couleur de fond */
        width: 100%; /* Largeur pleine de l'écran */
        text-align: center; /* Alignement central des éléments */
        z-index: 999; /* Pour s'assurer que la liste apparaît au-dessus de tout autre contenu */
    }

    /* Styles pour les éléments de la liste de navigation lorsqu'elle est affichée en mode hamburger */
    ul.show li {
        display: block; /* Afficher les éléments de la liste de navigation comme des blocs */
        margin-bottom: 10px; /* Marge inférieure pour séparer les éléments */
    }

    /* Styles pour les liens dans la liste de navigation lorsqu'elle est affichée en mode hamburger */
    ul.show li a {
        color: white; /* Couleur du texte */
        text-decoration: none; /* Supprimer la soulignement des liens */
        padding: 10px; /* Espacement intérieur */
    }
}

.toggleTableButton.clicked {
    animation: clickAnimation 0.2s forwards;
}

@keyframes clickAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}