@media (min-width: 950px) {
    .sortStyle{
        color: #FFFFFF;
        background-position: right;
    }
    
}
@media (max-width: 949.99px) {
    .sortStyle{
        color: rgba(51, 51, 51, 0);
        background-position: center;
    }
}



.couvertureNav{
    z-index: 2;
    background-color: rgba(217, 217, 217, 0.75);
    position: absolute;
    max-height: 82px;
    height: 6.5%;
    width: 100%;
    display: flex;
}
.fenetreUser > #liensAdmin {
    height: auto;
    max-height: 100%;
}
#liensAdmin { /* le conteneur  de toutes les entrées */
    padding-right: 0.75%; /* pour ne pas avoir de collision avec scrollbar */
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    justify-content: center;

    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: repeat(auto-fit, minmax(50px, 50px));

}
 /* effet graphique sur les entrées pour différencier */
#liensAdmin > ul:nth-child(odd){
    background-color: #f6f6f6 ;
}
#liensAdmin > ul:nth-child(even){
    background-color: #ffffff ;
}

ul {
    margin-block: 0;
    margin-inline: 0;
    padding-inline: 0;
}



#liensAdmin > ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr) repeat(5, 2fr) 1.75fr ;


    li{
        min-height: 50px;
        max-height: 50px;
    }
}



#liensAdmin:has(.userGestion) > ul {
    grid-template-columns: repeat(2, 1fr) repeat(6, 2fr) 1.75fr ;
}

.ligneResultatAdmin > li{
    overflow-x: hidden;
}

#liensAdmin > ul > .sublien {
    width: inherit;
    height: inherit;
    max-height: 50px;
    font-family: Jost;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;

}

#liensAdmin > ul:first-child{
    z-index: 1;
    position: sticky;
    top: 0px;

    font-size: 16px;
    background-color: #333333;
    color: #FFFFFF;
    .info2{
        font-size: inherit; /* forcer la taille a 16 pour uniformiser avec le reste */
    }
}
#liensAdmin > ul:first-child:hover{
    border: unset;
}
#liensAdmin > ul:hover{
    border-color: #007838;
    border-width: 1px;
    border-style: solid;
}

.selecteurPage {
    border : rgba(176, 176, 176, 0.5) solid 1px;
    border-radius: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    height: 45px;
    min-width: 200px;
    width: 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    color: #007838;
    background-color: #FFFFFF;
}
#numPage {
    background-color: #f3f3f3;
    padding-left: 5px;
    padding-right: 5px;
    border : #333333 solid 1px;
    border-radius: 5px;
}
.plus , .moins {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.plus > p:first-child {
    margin-right: 5px;
}
.moins > p:first-child {
    margin-right: 5px;
}

.desactive {
    color: #525252;
}

#selectNombreAffiches {
    color: black;
    margin-left: 15px;
    min-width: 200px;
}
#selectNombreAffiches > label {
    padding: 0;
}
#nombreAffiches {
    width: 25%;
}

.flex100row {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    justify-content: space-between;
    align-items: center;
}

/* liste sub */
.sousChoix{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    li{
        align-items: center;
        justify-content: center;
        border-color: rgba(82, 82, 82, 0.5);
        border-style: solid;
        border-width: 1px;
        z-index: 3;
        background-color: white;
    }
}

.libSubLien{
    width: 100%;
    height: inherit;
    min-height: 50px;
    color: #FFFFFF;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    p{
        font-size: inherit;
    }

    img{
        margin-left: 5px;
        height: 33%;
    }
}



.sousChoixAffiche{
    background-color: #007838;
    .elementSousChoix{
        color: black;
        display: flex;
    }

}
.sousChoixAffiche > .elementSousChoix:hover{
    cursor: pointer;
    font-family: JostSemiBold;
    border-color: #d4aa2e;
}


.sousChoixCache > .elementSousChoix {
    display: none;
}

/* style template liste liens */
.imgLigneAdmin{
    cursor: pointer;
    object-fit: contain;
    height: 90%;
}
.imgLigneAdminPays{
    cursor: unset;
    object-fit: contain;
    height: 60%;
}
.info2{
    font-size: 10px;
    overflow-x: hidden;
}


.info5, .info6{
    display: flex;
    align-items: center;
    justify-content: center;
}
.info6:has(.statutInactif){
    overflow-y: revert;
    overflow-x: revert;
}
.action:has(.hauteur45){
    overflow-y: revert;
    overflow-x: revert;
}

.statutActif, .statutInactif, .typeAdmin, .typeUtilisateur{
    height: 50%;
    min-width: 60%;
    max-width: 95%;
    border-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    p{
        text-align: center;
        color: #FFFFFF;
        font-family: JostSemiBold;

        font-size: 15px;
    }
}

.actionsEditerSupprimer > .hauteur45 {
    position: relative;
    height: 45%;

    img {
        height: 100%;
    }
}


.statutActif{
    background-color: #007838;
}
.statutInactif{
    background-color: #BE1622;
}
.typeAdmin{
    background-color: #d4aa2e;
}
.typeUtilisateur {
    background-color: #0b4697;
}
.sublien > .statutInactif {
    position: relative;
}
.sublien > .picto-item {
    z-index: unset;
}
.sublien > .actionsEditerSupprimer > .picto-item {
    z-index: unset;
}


.actionsEditerSupprimer{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    img{
        object-fit: contain;
        height: 45%;
        cursor: pointer;
    }
}

.actionsAdministration{
    display: flex;
    flex-direction: row;

    justify-content: space-between;
    align-items: center;

    width: 95%;
    height: 100%;
}
#barreRecherche{
    width: 100%;
    min-width: 230px;
    height: 60%;
    background-color: white;

    border-color: #d4aa2e;
    border-width: 1px;
    border-style: solid;
    border-radius: 15px;

    background-image: url("../images/biblio/admin/recherche.png");
    background-size: 20px;
    background-position: 5%;
}
#barreRecherche::-webkit-search-cancel-button {
    position:relative;
    right:20px;
    color: #d4aa2e;
    background-image: url("../images/biblio/clear.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;

    -webkit-appearance: none;
    height: 20px;
    width: 20px;
}

.sortStyle{
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 22px;
}

.sortUnset{
    background-image: unset;
    color: #FFFFFF;

}
.sortAlphabet{
    background-image: url("../images/biblio/admin/alphaetical.png");

}
.sortInverseAlphabet{
    background-image: url("../images/biblio/admin/reverse-alphaetical.png");
}
.sortActifFirst{
    background-image: url("../images/biblio/admin/active-first.png");
}
.sortInactifFirst{
    background-image: url("../images/biblio/admin/inactive-first.png");
}
/* gestion des utilisateurs */
.sortAdminFirst {
    background-image: url("../images/biblio/admin/adminFirst.png");
}
.sortAdminLast {
    background-image: url("../images/biblio/admin/adminLast.png");
}
.sortAsc {
    background-image: url("../images/biblio/admin/sort-asc.png");
}
.sortDesc {
    background-image: url("../images/biblio/admin/sort-desc.png");
}


.navItemButton{
    transition: 400ms;
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-width: 180px;
    height: 100%;
    min-height: 100%;
    background-color: white;
    text-align: center;


    border-color: black;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;

    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 10px;

    cursor: pointer;
}
.navItemButton:hover{
    transition: 400ms;
    color: #FFFFFF;
    background-color: #007838;
    border-color: #d4aa2e;
}

.ajout{
    background-image: url("../images/biblio/admin/plus-icon-noir.png");
}
.ajout:hover{
    background-image: url("../images/biblio/admin/plus-icon-blanc.png");
}

.ajout > p {
    margin-left: 30px;
}
#statsButton {
    background-image:url("../images/biblio/admin/pie-chart-noir.png");
}
#statsButton:hover{
    background-image:url("../images/biblio/admin/pie-chart-blanc.png");
}




.navAdmin{
    min-width: min-content;
    width: 31%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.navAdmin:has(#barreRecherche){
    width: 33%;
}

.navAdmin > .menuDeroulantNavAdmin{
    z-index: auto;
    width: 50%;
    min-width: 180px;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

}

.navAdmin > .menuDeroulantNavAdmin > .adminSousChoix{
    z-index: 1;
    font-family: Jost;
    display: none;
    width: 100%;
    min-width: 180px;
    height: 100%;
    min-height: 100%;
}

.navAdmin > .menuDeroulantNavAdmin:hover > .adminSousChoix{
    font-size: clamp(12px, calc(1.35vw), 18px);
    float: left;
    display: flex;
    border-radius: 3px;
}

.navAdmin > .menuDeroulantNavAdmin > .adminSousChoix:hover{
    font-family: Jost;
    transition: 400ms;
    color: #FFFFFF;
    background-color: #007838;
    border-color: #d4aa2e;
}

#conteneurNavAdmin{
    justify-content: center;
}
#conteneurNavAdmin > .navAdmin:first-child{
    align-items: flex-start;
}
#conteneurNavAdmin > .navAdmin:nth-child(3){
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

/* gestion users admin */
#conteneurGestionUsers{
    height: 70%;
    min-height: 70%;
    width: 40px;
    min-width: 40px;
    margin-right: 5px;
}

#gestionUsers{
    transition: 400ms;
    background-image: url("../images/biblio/admin/gestion-users.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}


/* form gestion users Admin*/
.tabUsers {
    display: grid;
    width: 100%;
    height: 50%;
}
.tabUsers > .ligneUser {
    display: grid;
    grid-template-columns: 2.5fr 2fr 2fr;
    width: 100%;
    height: 40px;
}
.entree > .tabUsers > .ligneUser:first-child {
    background-color:#333333;
    color: #FFFFFF;
}
.tabUsers > .ligneUser:nth-child(odd){
    background-color: rgba(0, 120, 56, 0.25);
}
.tabUsers > .ligneUser:nth-child(even){
    background-color: #f1f1f1;
}

.tabUsers > .ligneUser > .tabColonnesUser {
    height: 40px;
    display: grid;
    text-align: center;
    align-items: center;
}
.tabColonnesUser > .actionsEditerSupprimer {
    height: 40px;
}

/* partie ajout */
.conteneurAjoutUser{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    background-color: #d9d9d9;
}
.conteneurAjoutUser > .ligneAjoutUser {
    width: 100%;
    height: 33%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.conteneurAjoutUser > .ligneAjoutUser > input {
    width: 65%;
}
.conteneurAjoutUser > .ligneAjoutUser > label {
    width: 27%;
}
.addUser {
    cursor: pointer;
    width: 27%;
    height: 30px;
    background-color: #007838;
    border: #d4aa2e solid 1px;
    background-image: url("../images/biblio/admin/plus-icon-blanc.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.fenetreUser > #liensAdmin:has(.sousChoixAffiche) {
    overflow-x: visible;
}