/* ==========================================================================
   SECTORWEB — compléments de la page « Blog »
   Repris du <style> en ligne de blog.html, plus une correction signalée.
   ========================================================================== */

/* Barre de filtres */
.filters{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--gridline);border-bottom:1px solid var(--gridline);margin-bottom:44px}
.filters .cats{display:flex;gap:2px;flex-wrap:wrap}
.filters .count{font-family:var(--f-mono);font-size:12px;color:var(--ash);white-space:nowrap}
/* Recherche */
.searchbar{display:flex;align-items:center;gap:10px;background:var(--canvas);border:1px solid var(--gridline);border-radius:var(--r-pill);padding:7px 8px 7px 16px;min-width:240px;flex:0 1 300px}
.searchbar input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--f-sans);font-size:14px;color:var(--ink)}
.searchbar input::placeholder{color:var(--stone)}
.searchbar .ic{font-family:var(--f-mono);font-size:13px;color:var(--ash);flex-shrink:0}
/* Liste d'archive compacte */
.archive{border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--canvas)}
.archive .row{display:grid;grid-template-columns:96px 1fr 130px 88px;gap:20px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--gridline);transition:background .15s}
.archive .row:last-child{border-bottom:0}
.archive .row:hover{background:var(--vellum)}
.archive .d{font-family:var(--f-mono);font-size:12px;color:var(--mist)}
.archive .t{font-size:15.5px;font-weight:500;line-height:1.35;letter-spacing:-.005em}
.archive .c{font-family:var(--f-mono);font-size:11.5px;color:var(--slate)}
.archive .m{font-family:var(--f-mono);font-size:11.5px;color:var(--ash);text-align:right;white-space:nowrap}
.archive .row:hover .m{color:var(--ember)}
@media(max-width:820px){
  .archive .row{grid-template-columns:1fr auto;gap:6px 16px;padding:16px 18px}
  .archive .d{grid-column:1;order:1}
  .archive .m{grid-column:2;order:2}
  .archive .t{grid-column:1 / -1;order:3}
  .archive .c{grid-column:1 / -1;order:4}
}
/* Pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:40px}
.pager a,.pager span{min-width:36px;height:36px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:13px;padding:0 12px;color:var(--slate)}
.pager a:hover{background:var(--vellum);color:var(--ink)}
.pager .on{background:var(--ink);color:#fff}
.pager .gap{color:var(--stone)}
/* Newsletter */
.nl{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--vellum);padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.nl h3{font-size:clamp(20px,2.2vw,26px);font-weight:500;letter-spacing:-.015em;line-height:1.2;margin-bottom:10px}
.nl p{font-size:14.5px;color:var(--slate);line-height:1.65;max-width:46ch}
.nl form{display:flex;flex-direction:column;gap:10px}
.nl .field{display:flex;align-items:center;gap:8px;background:var(--canvas);border:1px solid var(--gridline);border-radius:var(--r-pill);padding:7px 7px 7px 18px}
.nl .field input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--f-sans);font-size:14px;color:var(--ink)}
.nl .field input::placeholder{color:var(--stone)}
@media(max-width:760px){.nl{grid-template-columns:minmax(0,1fr);gap:24px}}

/* --------------------------------------------------------------------------
   CORRECTION — pied des cartes d'article
   La maquette utilise .cfoot dans .artc (pour éviter que la règle globale
   .foot du pied de page ne s'applique), mais aucune feuille ne le définit.
   On reprend le style de .artc .foot de sections.css.
   À reporter dans la maquette.
   -------------------------------------------------------------------------- */
.artc .cfoot{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--gridline);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--f-mono);
  font-size:11.5px;
  color:var(--ash);
}
.artc:hover .cfoot .go{ color:var(--ember) }


/* --------------------------------------------------------------------------
   Grille d'articles réels
   La maquette listait des articles écrits en dur ; ils viennent maintenant de
   la base. Deux ajouts : la vignette quand l'article a une image à la une,
   et l'état vide.
   -------------------------------------------------------------------------- */
.artc .cover.has-img{
  background-image:none;
  padding:0;
}
.artc .cover.has-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.swb-articles .vide{
  font-size:15px;
  color:var(--slate);
  padding:40px 0;
  text-align:center;
}