/* 
    PICTOGRAMME SUR TASKEY
    Created on : 19 oct. 2023, 09:19:24
    Author     : Pixad - Jean Christophe Viard
    
*/

ul.ulPicto {list-style: none; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin: 30px 0; gap: 15px;}
ul.ulPicto li { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin: 0 15px; gap:10px; padding: 5px; width:auto;}
ul.ulPicto li .visuel img {width:40px; transition: all 0.4s ease-in-out;}
ul.ulPicto li:hover .visuel img {transform:scale(1.2);}
ul.ulPicto li:hover .visuel {background-color: rgb(223 223 223 / 50%); border-radius: 50%;}
ul.ulPicto li .titre { font-size: 1.5rem;}


ul.ulPicto li.more-picto-btn { cursor: pointer; display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 1.5rem;  }
ul.ulPicto li.more-picto-btn i { color:#9393932}
ul.ulPicto li.more-picto-btn .visuel { color: #222; padding: 0px 25px; border:1px solid #939393; border-radius: 25px; }
ul.ulPicto li.more-picto-btn:hover .visuel { background-color: #efefef; }
ul.ulPicto li.picto-to-hide {display: none;}
ul.ulPicto li.picto-to-hide.show {display: flex!important;}

@media(max-width:500px){
    ul.ulPicto {flex-direction: column;}
    ul.ulPicto li { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%;}
    ul.ulPicto li .titre {font-weight: normal;}
}