* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url(https://dinopixel.com/quicksand.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url(https://dinopixel.com/quicksand.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url(https://dinopixel.com/quicksand.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
    body {
      font-family: 'Quicksand', Arial, sans-serif;
      background-color: #efefef;
      color: #333;
      
    }
    
    .header{margin:0;padding:.2em 0 .2em 0;background-color:#f8f8f8}
a.nav_0:link,a.nav_0:visited,a.nav_0:active,a.nav_0:hover{text-shadow:0 1px 0 rgba(255,255,255,1);font-size:1.4em;text-decoration:none;color:#4caf50;
font-family:'Quicksand',sans-serif}
a.nav_0:hover{color:#f00}

.title_p_s{
text-shadow:0 1px 0 rgba(255,255,255,1);font-size:1.4em;text-decoration:none;color:#4caf50;
font-family:'Quicksand',sans-serif
}



.header_l{margin:0 1em 0 1em;float:left}


    .user-list {
     /* max-height: 600px;
      overflow-y: auto;*/
      padding: 1em 1.5em 20em 1.5em;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 0.8em;
      margin-bottom: 1.5em;
    }
    .user-item {
      display: flex;
      align-items: center;
      padding: 0.6em 0.8em;
      background: #fff;
      text-decoration: none;
      font-size: 0.85em;
      color: #333;
      font-weight: 500;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      transition: all 0.2s ease;
      border-radius: 4px;
        border: 1px solid #ffffff;
    }
    .user-item:hover {
    /*  background: #4caf50;
      color: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
      transform: translateY(-1px);*/
      
       border: 1px solid #4caf50;
      
    }
    .pp_u {
      width: 40px;
      height: 40px;
     /* border-radius: 10%;*/
      margin-right: 8px;
      object-fit: cover;
      border: 1px solid #ddd;
      flex-shrink: 0;
    }
    .user-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Pagination */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5em;
      margin: 1.5em 0;
      flex-wrap: wrap;
    }
    .pagination a, .pagination span {
      padding: 0.5em 0.8em;
      text-decoration: none;
      border: 1px solid #ddd;
      background: #fff;
      color: #333;
      border-radius: 4px;
      font-size: 0.9em;
      transition: all 0.2s ease;
    }
    .pagination a:hover {
      background: #4caf50;
      color: #fff;
      border-color: #4caf50;
    }
    .pagination .current {
      background: #4caf50;
      color: #fff;
      border-color: #4caf50;
    }
    .pagination .disabled {
      color: #999;
      background: #f5f5f5;
      cursor: not-allowed;
    }
    
    
    .menu_page_new {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5em;
      margin: 1.5em 0 0.5em 0;
      flex-wrap: wrap;
       color: #333;
    }
    .menu_page_new a{
      padding: 0.5em 0.8em;
      text-decoration: none;
      border: 1px solid #ddd;
      background: #fff;
      color: #333;
      border-radius: 4px;
      font-size: 0.9em;
      transition: all 0.2s ease;
    }
    .menu_page_new a:hover {
      background: #4caf50;
      color: #fff;
      border-color: #4caf50;
    }
    
    .unfollow-btn{
      padding: 0.5em 0.8em;
      text-decoration: none;
      border: 1px solid #ddd;
      background: #fff;
      color: #333;
      border-radius: 4px;
      font-size: 0.9em;
      transition: all 0.2s ease;
      cursor:pointer;
       background: #4caf50;
      color: #fff;
      border-color: #4caf50;cursor:pointer;
    }
      .unfollow-btn:hover{
      
      color: yellow;
      
    }
 
  .user-list::-webkit-scrollbar {
      width: 6px;
    }
    .user-list::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;
    }
    .clr{
    clear:both;
    }
    .page-info {
      text-align: center;
      margin-bottom: 1em;
      color: #666;
      font-size: 0.9em;
    } 
 
    
    .space_ad_h{
width:100%;
height:120px;
text-align:center;margin:2em auto 4em auto;padding:1em 0 1em 0;
}


.user-item {
  display: flex;
  flex-direction: column; /* colonne */
  align-items: center;    /* centrer horizontalement */
  padding: 0.6em 0.8em;
  background: #fff;
  text-decoration: none;
  font-size: 0.85em;
  color: #333;
  font-weight: 500;
  text-align: center; /* centrer le texte */
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #ffffff;
  transition: all 0.2s ease;
}

.user-item a {
  display: flex;
  flex-direction: column; /* image au-dessus du nom */
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.unfollow-btn {
  margin-top: 0.5em; /* espace au-dessus du bouton */
}


@media screen and (max-width:620px)
{

	.space_ad_h{
	height:70px;
	}
}
@media screen and (min-width: 1024px) and (min-height: 700px) 
{
	.space_ad_h{
	height:200px;
	}
}