/* =============================================================================
   VALKYRIA — les pages de lecture : actualités et mises à jour.
   Elles partagent leur mise en page, elles partagent donc leur feuille.
   Le décor (barre, pied, modules) vient de valkyria.css.
   ========================================================================== */

main{padding-block:clamp(38px,6vw,66px) 0}

/* --- en-tête de page --- */
.page-tete{margin-bottom:clamp(26px,4vw,42px)}
.page-tete h1{margin-top:12px}
.page-tete .chapeau{margin-top:14px}
.retour{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brume);transition:color .16s;
}
.retour:hover{color:var(--glace-300)}
.retour svg{transition:transform .16s}
.retour:hover svg{transform:translateX(-3px)}

/* --- largeur de lecture --- */
/* Deux gabarits : la liste respire large, l'article se resserre à la longueur
   de ligne confortable. Le pied, lui, garde la largeur du site. */
.lecture{max-width:820px;margin-inline:auto}

/* =========================================================================
   LISTE DES ACTUALITÉS
   ========================================================================= */
.grille-articles{
  display:grid;gap:20px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:860px){.grille-articles{grid-template-columns:1fr}}
/* Le premier article passe sur toute la largeur : une page qui commence par
   deux cartes égales ne dit pas ce qu'il faut lire en premier. */
.grille-articles .article-carte:first-child{grid-column:1 / -1}
.grille-articles .article-carte:first-child .article-image{aspect-ratio:21/8}

/* =========================================================================
   UN ARTICLE
   ========================================================================= */
.article-tete{margin-bottom:clamp(24px,3.5vw,36px)}
.article-tete h1{font-size:clamp(28px,4.6vw,48px)}
.article-couv{
  margin:0 0 clamp(24px,4vw,38px);
  border-radius:var(--rayon);overflow:hidden;
  border:1px solid rgba(38,44,57,.9);
  background:linear-gradient(140deg,var(--acier),var(--abysse));
}
.article-couv img{width:100%;height:auto;object-fit:cover;max-height:460px}

/* La prose. Tout ce qui peut sortir de l'éditeur du panel doit avoir sa règle
   ici, sinon un jour une liste ou une citation tombera sans style. */
.prose{font-size:17px;line-height:1.75;color:var(--givre)}
.prose > * + *{margin-top:1.15em}
.prose h2{
  font-size:clamp(21px,2.6vw,27px);margin-top:1.9em;color:var(--blanc);
  text-transform:uppercase;
}
.prose h3{font-size:19px;margin-top:1.6em;color:var(--blanc)}
.prose a{color:var(--glace-300);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--glace-200)}
.prose strong{color:var(--blanc);font-weight:600}
.prose ul,.prose ol{padding-left:1.4em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--glace-500)}
.prose blockquote{
  border-left:3px solid var(--glace-500);
  padding:2px 0 2px 18px;color:var(--cendre);font-style:italic;
}
.prose img{border-radius:var(--rayon-s);border:1px solid rgba(38,44,57,.9)}
.prose code{
  font-family:var(--f-mono);font-size:.88em;
  background:rgba(6,8,11,.7);border:1px solid var(--fer);
  border-radius:5px;padding:1px 6px;color:var(--glace-300);
}
.prose hr{border:none;border-top:1px solid rgba(38,44,57,.8);margin-block:2em}

/* =========================================================================
   LISTE DES MISES À JOUR
   ========================================================================= */
.versions{display:grid;gap:12px}
.v{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:19px 22px;border-radius:13px;
  background:linear-gradient(180deg,rgba(25,29,38,.72),rgba(18,21,28,.9));
  border:1px solid rgba(38,44,57,.9);
  transition:border-color .18s,transform .18s;
}
.v:hover{border-color:var(--fer-clair);transform:translateY(-2px)}
.v .num{
  font-family:var(--f-mono);font-weight:600;font-size:16px;color:var(--glace-300);
  background:rgba(90,169,220,.1);border:1px solid rgba(90,169,220,.24);
  border-radius:7px;padding:3px 10px;
}
.v .quoi{color:var(--givre);flex:1;min-width:180px}
.v .quand{
  font-family:var(--f-mono);font-size:12.5px;color:var(--brume);
  font-variant-numeric:tabular-nums;
}

/* =========================================================================
   UNE MISE À JOUR
   ========================================================================= */
.cat{margin-top:clamp(34px,5vw,52px)}
.cat h2{
  display:flex;align-items:center;gap:11px;
  font-size:14px;letter-spacing:.12em;
  padding-bottom:12px;border-bottom:1px solid rgba(38,44,57,.9);
}
.cat h2 .pic{
  width:28px;height:28px;flex:0 0 28px;border-radius:8px;
  display:grid;place-items:center;font-size:14px;
}
.cat article{padding:22px 0;border-bottom:1px solid rgba(38,44,57,.45)}
.cat article:last-child{border-bottom:none}
/* Un lien (#347) posté il y a six mois doit tomber PILE sur son entrée, et se
   voir : sans ce fond, on atterrit au bon endroit sans savoir lequel. */
.cat article:target{
  background:rgba(90,169,220,.08);border-radius:11px;
  padding-inline:18px;margin-inline:-18px;
}
.cat article h3{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  font-size:17px;text-transform:none;letter-spacing:0;
}
.cat article h3 .no{
  font-family:var(--f-mono);font-size:12px;color:var(--brume);
  border:1px solid var(--fer);border-radius:5px;padding:1px 7px;
  font-weight:400;
}
.cat article h3 .no:hover{color:var(--glace-300);border-color:var(--glace-500)}
.cat article p{margin-top:10px;color:var(--cendre)}

/* --- pagination --- */
.pages{
  display:flex;justify-content:center;align-items:center;gap:8px;
  margin-top:clamp(30px,4vw,46px);
}
.pages a,.pages span{
  min-width:38px;height:38px;padding-inline:12px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:13px;
  border:1px solid var(--fer);color:var(--cendre);
}
.pages a:hover{border-color:var(--glace-600);color:var(--blanc);background:var(--acier)}
.pages .ici{background:rgba(90,169,220,.14);border-color:rgba(90,169,220,.4);color:var(--glace-200)}