/* ============================================================
   DN Exposer LLC — blog.css v2
   Chargee par private/views/public/blog.php uniquement, apres
   main.css et pages.css.

   La carte d'article, la grille, la recherche, la pagination et
   l'etat vide sont dans main.css : ils servent aussi sur
   l'accueil, la page auteur et la page 404, qui ne chargent pas
   cette feuille. Ici se trouve ce qui n'existe que sur le
   listing : les onglets de categorie, le selecteur mobile et le
   bloc a la une.
   ============================================================ */


/* ── En-tete du listing ────────────────────────────────────── */
.blog-listing{padding:48px 0 88px}
.blog-listing .section-header{max-width:720px;margin-bottom:36px}
.blog-listing .section-title{font-size:clamp(2rem,4.2vw,3rem)}


/* ── Filtres par categorie ─────────────────────────────────
   Deux commandes pour un seul filtre : des onglets sur ecran
   large, une liste deroulante en dessous. Une rangee d'onglets
   qui defile horizontalement sur telephone se manipule mal, et
   un select sur grand ecran cache l'arborescence du blog.     */
.filter-container{margin-bottom:40px}

.category-tabs{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding-bottom:16px;border-bottom:1px solid var(--border);
}
.category-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px;
  font-size:.86rem;font-weight:600;color:var(--muted);
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-pill);
  transition:color var(--tr),background var(--tr),border-color var(--tr);
}
.category-tab:hover{color:var(--slate);border-color:var(--light)}
.category-tab.active{
  color:#fff;background:var(--rose);border-color:var(--rose);
  pointer-events:none;
}

.category-tab__count{
  min-width:22px;padding:1px 8px;
  font-size:.68rem;font-weight:700;text-align:center;
  color:var(--light);background:var(--cream);
  border-radius:var(--r-pill);
}
.category-tab.active .category-tab__count{color:#fff;background:rgba(255,255,255,.22)}

/* Le selecteur double les onglets : il n'apparait que la ou
   ils disparaissent. */
.filter-select{
  display:none;width:100%;
  padding:13px 40px 13px 18px;
  background-color:var(--white);
  border:1.5px solid var(--border);border-radius:var(--r-pill);
  font-size:.9rem;color:var(--text);
  cursor:pointer;outline:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%239B9BA8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
  transition:border-color var(--tr-md),box-shadow var(--tr-md);
}
.filter-select:focus{border-color:var(--rose);box-shadow:0 0 0 4px var(--rose-glow)}


/* ── Bloc a la une ─────────────────────────────────────────
   Une seule carte, en pleine largeur et en deux colonnes. Le
   detail du rendu est dans main.css, sur .article-card--featured :
   ici on ne pose que l'espacement du bloc.                     */
.featured-block{margin-bottom:48px}


/* ── Grille du listing ─────────────────────────────────────
   .blog-page-grid est le modificateur pose par le fragment
   article-list. Sur le listing, les cartes sont un peu plus
   espacees que sur l'accueil, ou elles vivent dans une section
   parmi d'autres.                                             */
.blog-listing .blog-page-grid{gap:32px}


/* ── Chargement AJAX ───────────────────────────────────────
   Le conteneur garde sa hauteur pendant le remplacement, pour
   que la page ne saute pas sous le curseur au changement de
   categorie.                                                   */
#ajax-container{min-height:200px;transition:opacity var(--tr-md)}
#ajax-container.is-loading{opacity:.45;pointer-events:none}


/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:900px){
  .category-tabs{display:none}
  .filter-select{display:block}
  .filter-container{margin-bottom:32px}
}

@media(max-width:768px){
  .blog-listing{padding:32px 0 64px}
  .blog-listing .section-header{margin-bottom:28px}
  .blog-listing .blog-page-grid{gap:24px}
  .featured-block{margin-bottom:32px}
}