/* Newsh4ck — thème sombre, pensé pour un écran d'ordinateur (pas de mobile). */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --fond:#0a0b0f; --carte:#111420; --trait:#1c2029; --trait-vif:#2b3346;
  --texte:#e8eaf0; --doux:#98a1b3; --faible:#6a7280;
}
body{
  background:var(--fond); color:var(--texte); min-height:100vh;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── en-tête ─────────────────────────────────────────────────────────── */
.entete{
  display:flex; align-items:center; gap:22px; padding:14px 32px;
  border-bottom:1px solid var(--trait); position:sticky; top:0; z-index:9;
  background:rgba(10,11,15,.93); backdrop-filter:blur(12px);
}
.marque{display:flex; align-items:center; gap:9px; font-size:17px; font-weight:700; letter-spacing:-.02em}
.marque b{font-weight:700}
.logo{color:#4f8cff; font-size:20px}
nav{display:flex; gap:7px; margin-left:6px}
.pill{
  padding:6px 13px; border-radius:999px; font-size:13px; color:#aeb6c6;
  background:#141721; border:1px solid #1e2230; cursor:pointer; user-select:none;
  transition:.15s;
}
.pill:hover{background:#1b1f2c; color:#fff}
.pill.actif{background:color-mix(in srgb,var(--c,#8b95a8) 22%,#141721);
            border-color:color-mix(in srgb,var(--c,#8b95a8) 55%,#1e2230); color:#fff}
.zone-recherche{margin-left:auto}
#recherche{
  width:330px; padding:8px 14px; border-radius:10px; background:#12151e;
  border:1px solid #1e2230; color:var(--texte); font-size:13.5px; font-family:inherit;
}
#recherche::placeholder{color:var(--faible)}
#recherche:focus{outline:none; border-color:#31415e; background:#151926}

/* ── bandeau « à la une » ────────────────────────────────────────────── */
.bandeau{padding:18px 32px 4px; display:flex; gap:12px}
.une{
  flex:1; display:flex; gap:12px; align-items:center; text-decoration:none;
  background:var(--carte); border:1px solid #222839; border-left:3px solid;
  border-radius:12px; padding:11px 14px; transition:.16s;
}
.une:hover{border-color:var(--trait-vif); transform:translateY(-2px)}
.mini{width:46px; height:46px; border-radius:9px; overflow:hidden; flex:none; background:#1a1f2e}
.mini img{width:100%; height:100%; object-fit:cover; display:block}
.mini.sans{
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,#12151e);
}
.une h4{
  font-size:13.5px; font-weight:650; line-height:1.35; color:var(--texte); margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.une span{font-size:11.5px; color:var(--faible)}

/* ── barre d'outils ──────────────────────────────────────────────────── */
.outils{
  padding:14px 32px 4px; display:flex; gap:9px; align-items:center;
  font-size:12.5px; color:var(--faible);
}
.etiq{margin-right:2px}
.tri{padding:5px 11px; border-radius:8px; background:#12151e; border:1px solid #1e2230; cursor:pointer}
.tri:hover{background:#1b1f2c; color:#cfd6e4}
.tri.actif{background:#1b2130; border-color:#31415e; color:#fff}
.compteur{margin-left:16px}
.fraicheur{margin-left:auto}

/* ── grille principale ───────────────────────────────────────────────── */
.contenu{padding:14px 32px 40px}
.grille{display:grid; grid-template-columns:repeat(5,1fr); gap:11px}
.carte{
  display:flex; gap:11px; padding:11px; align-items:flex-start;
  background:var(--carte); border:1px solid var(--trait); border-radius:12px;
  text-decoration:none; transition:.16s; overflow:hidden;
}
.carte:hover{border-color:var(--trait-vif); transform:translateY(-2px); background:#131725}
/* Vignette en rectangle vertical. Elle s'étire sur toute la hauteur de la bulle
   (align-self:stretch) : la taille des bulles reste donc déterminée par le
   texte, exactement comme avant, et l'image s'y adapte au lieu de l'agrandir.
   object-fit:cover recadre l'image d'origine, qui est en paysage. */
.vignette{
  width:70px; min-height:88px; align-self:stretch; border-radius:9px;
  overflow:hidden; flex:none; background:#1a1f2e;
}
.vignette img{width:100%; height:100%; object-fit:cover; display:block}
.vignette.sans{
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,#12151e);
}
.corps{min-width:0; display:block}
/* Logo du site source, au tout début de la ligne de source — donc juste à côté
   de la miniature. Servi depuis ce serveur, jamais depuis celui de la source. */
.src .lg, .ligne-src .lg{
  width:18px; height:18px; border-radius:5px; object-fit:cover;
  vertical-align:-4px; margin-right:6px; display:inline-block;
}
.ligne-src{display:inline-flex; align-items:center; gap:6px}
.ligne-src .lg{margin-right:0}
/* nowrap : sans ça, le nom de la source et l'heure se coupent sur deux lignes
   dans une colonne étroite, et la bulle gagne 19 px de hauteur pour rien.
   En rangée flexible, le logo ne rétrécit jamais (flex:none) : même dans une
   bulle étroite il reste entier, et c'est le nom qui se raccourcit en « … ».
   Le logo est ainsi toujours visible, quel que soit l'écran. */
.src{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  display:flex; align-items:center; gap:6px; min-width:0;
}
.src .lg{flex:none; margin-right:0; width:16px; height:16px; vertical-align:middle}
.src .nom{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.carte h3{
  font-size:12.8px; font-weight:620; line-height:1.34; color:var(--texte); margin:4px 0 6px;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.carte .quand{font-size:11px; color:var(--faible); white-space:nowrap}
.vide{text-align:center; color:var(--faible); padding:60px 0; font-size:14px}

footer{
  display:flex; justify-content:space-between; padding:20px 32px 34px;
  border-top:1px solid var(--trait); color:var(--faible); font-size:12.5px;
}
footer a{color:#7f8db0}