/* =========================================================
   AdminToolz : pages de listing
   Utilisé par category.php, tag.php, author.php, search.php
   (CategoryController, TagController et AuthorController chargent
   déjà 'blog.css' ; SearchController le charge depuis la v2.)

   Sommaire :
   1. Bandeau de tête
   2. Sous-catégories / filtres
   3. Grille de résultats
   4. Barre de recherche interne
   5. Fiche auteur
   6. Pagination
   7. État vide
   8. Responsive
   ========================================================= */

/* ---------- 1. BANDEAU DE TÊTE ---------- */
.listing-head{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:32px 26px 30px;
}
.listing-head-inner{max-width:var(--container);margin:0 auto;}
.listing-eyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);
}
.listing-title{
  font-family:var(--heavy);
  font-size:42px;line-height:1.08;letter-spacing:-.5px;
  margin-top:10px;
}
.listing-intro{
  margin-top:14px;font-size:17.5px;line-height:1.55;color:#4A4A4A;max-width:72ch;
}
.listing-count{
  margin-top:18px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------- 2. SOUS-CATÉGORIES / FILTRES ---------- */
.listing-filters{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;
}
.filter-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #E0E0E0;border-radius:4px;background:var(--bg-soft);
  padding:8px 14px;font-size:15px;color:#3F3F3F;
}
.filter-chip svg{width:17px;height:17px;color:#6E6E6E;stroke-width:1.6;}
.filter-chip:hover{border-color:var(--red);color:var(--red);}
.filter-chip:hover svg{color:var(--red);}
.filter-chip.is-active{background:var(--red);border-color:var(--red);color:#fff;}
.filter-chip.is-active svg{color:#fff;}

/* ---------- 3. GRILLE DE RÉSULTATS ---------- */
.listing{max-width:var(--container);margin:0 auto;padding:34px 26px 56px;}
.listing-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
}

/* ---------- 4. RECHERCHE INTERNE ---------- */
.search-bar{
  background:#fff;border:1px solid #E0E0E0;border-radius:8px;
  padding:16px 20px;margin-top:22px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.search-bar svg{width:22px;height:22px;color:#4A4A4A;stroke-width:2;flex:none;}
.search-bar input{
  flex:1;min-width:0;border:0;background:none;font-size:18px;color:#333;padding:4px 0;
}
.search-bar input:focus{outline:none;}
.search-bar button{
  flex:none;font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  background:var(--blue-btn);color:#fff;padding:11px 20px;border-radius:4px;
}
.search-bar button:hover{background:#0F64D6;}
.search-query{color:var(--red);}

/* ---------- 5. FICHE AUTEUR ---------- */
.author-head{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:26px;align-items:start;
}
.author-head-photo{
  width:120px;height:120px;border-radius:50%;object-fit:cover;border:1px solid #E0E0E0;
}
.author-head .listing-title{margin-top:6px;}
.author-head-links{margin-top:16px;display:flex;gap:16px;flex-wrap:wrap;}
.author-head-links a{font-family:var(--mono);font-size:13px;color:var(--blue);}
.author-head-links a:hover{text-decoration:underline;}
.author-head-expertise{
  margin-top:12px;font-size:15.5px;color:#5C5C5C;
}

/* ---------- 6. PAGINATION ---------- */
.pagination{
  margin-top:38px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.page-link{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #DCDCDC;border-radius:4px;background:#fff;
  padding:11px 18px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:#3F3F3F;
}
.page-link:hover{border-color:var(--red);color:var(--red);}
.page-link svg{width:16px;height:16px;stroke-width:2.2;}
.page-status{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.page-link-placeholder{width:1px;}

/* ---------- 7. ÉTAT VIDE ---------- */
.listing-empty{
  background:#fff;border:1px dashed #DCDCDC;border-radius:8px;
  padding:44px 30px;text-align:center;
}
.listing-empty h2{font-family:var(--heavy);font-size:24px;line-height:1.2;}
.listing-empty p{margin-top:12px;font-size:16.5px;color:#5C5C5C;}
.listing-empty .btn-blue{margin-top:22px;}
.listing-empty-suggestions{
  margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}

/* ---------- 8. RESPONSIVE ---------- */
@media (max-width:1000px){
  .listing-title{font-size:32px;}
  .listing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
}

@media (max-width:640px){
  .listing-head{padding:22px 18px 22px;}
  .listing-title{font-size:26px;}
  .listing-intro{font-size:16px;}
  .listing{padding:24px 18px 44px;}
  .listing-grid{grid-template-columns:1fr;}
  .search-bar{padding:12px 14px;}
  .search-bar button{display:none;}
  .author-head{grid-template-columns:1fr;gap:16px;}
  .author-head-photo{width:84px;height:84px;}
  .pagination{justify-content:center;}
  .page-status{order:-1;width:100%;text-align:center;}
}