/* === Actus ====================================================================================
   La liste : une ligne par actu (image, puis le texte), avec filtre, tri et pages. L'article : l'image en grand avec
   le titre dessus, la fiche de la source qui reste visible, le texte sur un fond uni. */

/* --- La barre au-dessus du panneau : filtres et tri --- */
.news-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  scroll-margin-top: calc(var(--head) + var(--banner, 0px) + 16px);
}
.news-filters {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  background: rgba(var(--shadow-rgb), 0.25);
}
.news-filter {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 700 0.9rem Roboto, sans-serif;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.news-filter + .news-filter {
  border-left: 1px solid rgba(var(--gold-rgb), 0.2);
}
.news-filter:hover {
  color: var(--parchment);
}
.news-filter[aria-pressed="true"] {
  background: #3a2f22;
  box-shadow: inset 0 0 0 1px var(--cream);
  color: var(--parchment);
}
.news-pages button {
  padding: 7px 14px;
  border: 1px solid var(--line-gold);
  background: #15110c;
  color: var(--text-soft);
  font: 900 0.8rem Roboto, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.news-pages button[aria-current="page"] {
  background: #3a2f22;
  box-shadow: inset 0 0 0 1px var(--cream);
  color: var(--parchment);
}
.news-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  font: 700 0.8rem Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.news-sort select {
  padding: 7px 10px;
  border: 1px solid var(--line-gold);
  background: #15110c;
  color: var(--parchment);
  font: 700 13px Roboto, sans-serif;
}

/* --- La liste : une ligne par actu --- */
.news-list {
  display: grid;
  gap: 14px;
}
.news-row {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  border: 1px solid var(--line-gold);
  background: var(--panel-gradient);
  color: inherit;
  animation: card-rise 0.4s ease both;
  animation-delay: calc(min(var(--i, 0), 8) * 50ms);
  transition: border-color 0.2s, transform 0.2s;
}
.news-row:hover,
.news-row:focus-visible {
  border-color: rgba(var(--gold-rgb), 0.6);
  transform: translateY(-2px);
}
/* Une actu sans image (les hotfix de Rust n'en ont jamais) : la ligne se resserre au lieu de réserver un grand cadre
   vide, et un liseré de la couleur de sa sorte la tient (22 oct. 2026, demandé par TF Crazy). */
.news-row.is-slim {
  grid-template-columns: minmax(0, 1fr);
  border-left: 3px solid var(--kind, var(--gold));
}
.news-row.is-slim strong {
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
}
.news-row__img {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0f0d0a;
  color: var(--gold);
  font-size: 2.4rem;
}
.news-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.news-row:hover .news-row__img img {
  transform: scale(1.03);
}
.news-row__txt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 26px;
}
.news-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--text-soft);
  font-size: 0.9rem;
}
.news-row strong {
  color: var(--parchment);
  font: 900 clamp(1.4rem, 2.2vw, 2rem)/1.05 "Roboto Condensed", sans-serif;
  text-transform: uppercase;
}
.news-row__summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.news-row__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-top: auto;
}
.news-row__foot small {
  color: var(--text-soft);
  font-size: 0.85rem;
}
.news-row__foot .text-link {
  margin-top: 0;
}
.news-none {
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line-gold);
  background: var(--panel-gradient);
  color: var(--text-soft);
}
@media (max-width: 760px) {
  .news-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .news-row__txt {
    padding: 16px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .news-row {
    animation: none;
  }
}

/* Une annonce officielle de Rust (Facepunch) : le badge à la place de la sorte d'actu, un liseré bleuté */
.news-official {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9ec7e8;
  font: 900 0.8rem Roboto, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.news-official svg,
.news-rail__official svg {
  width: 14px;
  height: 14px;
}

/* --- Les pages --- */
.news-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
}
.news-pages button:disabled {
  opacity: 0.4;
  cursor: default;
}

.news-tag {
  padding: 3px 9px;
  border: 1px solid var(--line-gold);
  color: var(--gold);
  font: 900 0.8rem Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.news-tag--update { border-color: rgba(120, 180, 230, 0.45); color: #8fc3ea; }
.news-tag--event { border-color: rgba(200, 60, 60, 0.55); color: var(--red-bright); }
.news-tag--wipe { border-color: rgba(140, 190, 110, 0.5); color: var(--state-ok); }
/* La couleur réglée dans BzzBot (Communication → Réglages) : elle passe devant celles de départ ci-dessus */
.news-tag[style*="--kind"] { border-color: color-mix(in srgb, var(--kind) 55%, transparent); color: var(--kind); }
.news-official[style*="--kind"] { color: var(--kind); }
/* Le petit hexagone d'un filtre : la couleur de sa sorte, la légende des étiquettes */
.news-filter__dot {
  flex: none;
  width: 9px;
  height: 10px;
  margin-right: 8px;
  background: var(--kind, var(--gold));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* --- L'article : l'en-tête en image --- */
.news-story {
  padding-top: 0;
}
.news-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(62vh, 560px);
  background: #0b0a08 url("/theme/images/site-background-rouille.webp") center / cover no-repeat;
}
/* Sans image (les hotfix de Rust n'en ont jamais), le bandeau **est** l'en-tête commun des pages intérieures : la
   page lui pose `page-hero` et `page-hero__inner`, et tout vient de `components/page-hero.css` — hauteur, cadrage du
   terrain, fondu avec la suite, place au-dessus du grain. Rien n'est recopié ici : la première version l'avait fait,
   et le bandeau ne ressemblait pas aux autres (22 oct. 2026, TF Crazy). `layout/sky.js` monte le paysage dessus. */
.news-cover:not(.has-image) {
  min-height: 0;
  background-image: none;
}
/* Le voile sombre sert à lire le titre sur une image ; sur le paysage, l'ombre portée suffit, comme partout
   ailleurs, et le ciel reste visible. */
.news-cover:not(.has-image):after {
  content: none;
}
.news-cover:not(.has-image) :is(h1, .news-cover__summary) {
  text-shadow: 0 2px 14px rgba(var(--shadow-rgb), 0.85), 0 1px 3px rgba(var(--shadow-rgb), 0.9);
}
/* L'écart de l'en-tête à image lui reste : sans image, c'est `page-hero__inner` qui décide. */
.news-cover.has-image .news-cover__inner {
  padding: calc(var(--head) + 40px) 0 34px;
}
/* Avec une image, c'est elle qu'on voit : le paysage monté dessous est retiré de l'affichage. */
.news-cover.has-image > .day-scenery {
  display: none;
}
.news-cover:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#0b0a0866 0, #0b0a0810 35%, #0b0a08 97%);
}
.news-cover__inner {
  position: relative;
  z-index: 1;
}
/* Le retour à la liste, sur l'image au-dessus du titre */
.news-cover__back {
  /* `page-hero__inner` est une grille : sans ça, le retour s'étire sur toute la colonne et fait une barre sombre
     au-dessus du titre (22 oct. 2026). */
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(11, 10, 8, 0.75);
  color: var(--parchment);
  font: 900 0.8rem Roboto, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.2s;
}
.news-cover__back:hover {
  background: #3a2f22;
}
.news-cover h1 {
  /* `page-hero h1` est en `max-content`, taillé pour les titres courts des pages. Un titre de Facepunch déborde sur
     téléphone (720 px dans 362, vu par `pages:check` le 22 oct. 2026) : ici il se replie. */
  width: auto;
  max-width: 1000px;
  margin: 12px 0 10px;
  color: var(--parchment);
  font: 900 clamp(38px, 6vw, 78px)/0.95 "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  text-shadow: 0 3px 18px #000;
}
.news-cover__summary {
  max-width: 760px;
  margin: 0;
  color: var(--text);
  font-size: 1.12rem;
  text-shadow: 0 2px 10px #000;
  /* Les paragraphes du résumé sont gardés ici, et seulement ici : l'auteur en écrit deux ou trois, et le chapeau de
     l'article a la place de les montrer. La ligne de la liste et l'encart Discord, eux, les aplatissent
     (choix de TF Crazy, 22 oct. 2026). */
  white-space: pre-line;
}

/* --- La colonne de côté et le texte --- */
.news-layout {
  display: grid;
  /* Toute la largeur du site : la colonne de côté, puis le texte (images en grand, lignes tenues par la police) */
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 56px;
  padding-top: 34px;
}
.news-rail {
  position: sticky;
  top: calc(var(--head) + var(--banner, 0px) + 20px);
  align-self: start;
  display: grid;
  gap: 14px;
}
/* La fiche de la source, dans son cadre */
.news-source {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line-gold);
  background: var(--panel-gradient);
}
.news-source h2 {
  margin: 0;
  color: var(--parchment);
  font: 900 1rem "Roboto Condensed", sans-serif;
  text-transform: uppercase;
}
.news-rail__discord,
.news-rail__translate,
.news-rail__official {
  justify-content: center;
}
/* === Les sections d'une annonce officielle, façon Facepunch mais dans la colonne de texte ===================
   Une carte sombre par section : son image en fond, atténuée et fondue vers le bas, le titre en rouge Rust et
   l'auteur dessous, puis le texte ; les images du texte portent une ombre. */
.news-article__body .md-section {
  position: relative;
  overflow: hidden;
  margin: 28px 0;
  padding: clamp(22px, 3vw, 34px) clamp(16px, 3vw, 32px) clamp(10px, 2vw, 20px);
  border: 1px solid var(--line-gold);
  background: #0f0d0b;
}
.news-article__body .md-section__bg {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: min(480px, 70%);
  margin: 0;
  border: 0;
  object-fit: cover;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(#000 50%, transparent);
  mask-image: linear-gradient(#000 50%, transparent);
}
.news-article__body .md-section__inner {
  position: relative;
  z-index: 1;
}
/* Sur une image, le texte dans une carte noire transparente, sans liseré (27 oct., TF Crazy : « plus visible ») : l'image reste
   autour, le texte ne se lit plus jamais sur ses zones claires */
.news-article__body .md-section.has-image > .md-section__inner {
  padding: 16px;
  background: rgba(11, 10, 8, 0.32);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.news-article__body .md-section__inner > h2:first-child {
  margin: 0 0 4px;
  color: var(--red-text);
  font: 900 clamp(1.55rem, 2.4vw, 2.1rem)/1.05 "Roboto Condensed", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px #000;
}
/* L'auteur d'une section (« :::by ») : un nom, jamais traduit ; une petite étiquette dans le coin haut droit de la
   carte (sous le titre sur un téléphone) */
.news-article__body .md-byline {
  justify-self: start;
  width: fit-content;
  margin: 0 0 16px;
  padding: 3px 10px;
  border: 1px solid var(--line-gold);
  background: #0b0a08cc;
  color: var(--gold);
  font: 700 0.8rem/1.5 "Roboto Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.news-article__body .md-byline:before {
  content: "✎ ";
  color: var(--text-soft);
}
@media (min-width: 700px) {
  .news-article__body .md-section .md-byline {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
  }
  .news-article__body .md-section__inner > h2:first-child:has(+ .md-byline) {
    padding-right: 180px;
  }
}
.news-article__body .md-section > .md-section__inner > :last-child {
  margin-bottom: 12px;
}
.news-article__body .md-section .md-image,
.news-article__body .md-section .md-video {
  box-shadow: 0 12px 30px #000b;
}
/* Les vidéos : un clip de Facepunch lu dans la page ; YouTube, un bouton puis le lecteur (au clic seulement) */
.news-article__body .md-video,
.news-article__body .md-youtube,
.news-article__body .md-youtube-frame {
  display: block;
  width: 100%;
  margin: 22px 0;
  border: 1px solid var(--line-gold);
  background: #000;
}
.news-article__body .md-youtube,
.news-article__body .md-youtube-frame {
  aspect-ratio: 16 / 9;
}
.news-article__body .md-youtube {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: radial-gradient(circle, #2a1c10, #0b0a08 70%);
  color: var(--parchment);
  font: 900 1.1rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.news-article__body .md-youtube span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 44px;
  background: var(--red-bright);
  color: #fff;
  font-size: 1.2rem;
  transition: transform 0.15s;
}
.news-article__body .md-youtube:hover span,
.news-article__body .md-youtube:focus-visible span {
  transform: scale(1.08);
}

/* Les images placées dans le texte (annonces officielles) */
/* Un volet de changements (annonces de Facepunch) : l'en-tête coloré selon la sorte, son nombre, puis la liste
   dans son propre ascenseur (des dizaines de lignes) */
.news-article__body .md-changes {
  --kind: var(--text-soft);
  margin: 18px 0;
  border: 1px solid var(--line-gold);
  background: #0e0d0bcc;
}
.news-article__body .md-changes.is-features {
  --kind: #8fcf6a;
}
.news-article__body .md-changes.is-improvements {
  --kind: #6fb6e8;
}
.news-article__body .md-changes.is-fixed {
  --kind: #e8b04e;
}
.news-article__body .md-changes.is-removed {
  --kind: #e0675c;
}
.news-article__body .md-changes h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border-left: 4px solid var(--kind);
  background: linear-gradient(90deg, color-mix(in srgb, var(--kind) 22%, transparent), transparent 70%);
  color: var(--kind);
  font: 900 1.05rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.news-article__body .md-changes h3 span {
  padding: 1px 8px;
  background: color-mix(in srgb, var(--kind) 25%, #0e0d0b);
  color: var(--parchment);
  font-size: 0.8rem;
}
.news-article__body .md-changes ul {
  max-height: 340px;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-color: var(--kind) #15110c;
  scrollbar-width: thin;
}
.news-article__body .md-changes li {
  margin: 0;
  padding: 7px 16px 7px 30px;
  position: relative;
  font-size: 0.97rem;
}
.news-article__body .md-changes li:nth-child(even) {
  background: #ffffff06;
}
.news-article__body .md-changes li:before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0.95em;
  width: 5px;
  height: 5px;
  background: var(--kind);
}
.news-article__body .md-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 22px 0;
  border: 1px solid var(--line-gold);
}
.news-article {
  min-width: 0; /* toute la colonne : la navigation dessous s'arrête au même bord */
}
/* « Pas encore traduit » : la note commune (.lpa-note, packages/ui), avec sa marge ici — comme l'essai PayPal de
   Soutenir. Avant le 20 oct. 2026, cette page avait sa propre note, d'une autre taille et d'un autre fond. */
.news-article__notice {
  margin-top: 16px;
}
.news-article__body {
  margin-top: 22px;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.75;
}
.news-article__body h2,
.news-article__body h3 {
  margin: 28px 0 10px;
  color: var(--parchment);
  font-family: "Roboto Condensed", sans-serif;
}
.news-article__body a {
  color: var(--gold);
}
.news-article__body ul {
  padding-left: 1.2em;
}
.news-article__body li::marker {
  color: var(--gold);
}
/* Le Markdown étendu des actus (core/markdown.js) : listes numérotées, citations, code, tableaux, séparations. */
.news-article__body ol {
  padding-left: 1.4em;
}
.news-article__body ol li::marker {
  color: var(--gold);
  font-weight: 700;
}
.news-article__body li + li {
  margin-top: 4px;
}
.news-article__body del {
  color: var(--muted);
}
.news-article__body blockquote {
  margin: 18px 0;
  padding: 12px 18px;
  border-left: 4px solid var(--gold);
  background: rgba(var(--gold-rgb), 0.08);
  color: var(--parchment);
  font-style: italic;
}
.news-article__body blockquote p {
  margin: 0;
}
.news-article__body code {
  padding: 1px 6px;
  background: rgba(var(--shadow-rgb), 0.45);
  border: 1px solid var(--line-gold);
  font-family: "Roboto Mono", Consolas, monospace;
  font-size: 0.92em;
}
.news-article__body pre {
  margin: 18px 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: rgba(var(--shadow-rgb), 0.55);
  border: 1px solid var(--line-gold);
  line-height: 1.5;
}
.news-article__body pre code {
  padding: 0;
  border: 0;
  background: none;
}
.news-article__body hr {
  margin: 28px 0;
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.news-article__body table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  font-size: 0.97rem;
}
.news-article__body th,
.news-article__body td {
  padding: 9px 12px;
  border: 1px solid var(--line-gold);
  text-align: left;
}
.news-article__body th {
  background: rgba(var(--gold-rgb), 0.14);
  color: var(--parchment);
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.news-article__body tbody tr:nth-child(even) td {
  background: rgba(var(--sheen-rgb), 0.03);
}
@media (max-width: 760px) {
  .news-article__body table {
    display: block;
    overflow-x: auto;
  }
}

/* --- Sous l'article : l'actu précédente et la suivante --- */
.news-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 26px auto 0;
  padding-left: 356px; /* sous le texte, pas sous la colonne de côté */
}
.news-nav__link {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--line-gold);
  background: var(--panel-gradient);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s;
}
.news-nav__link:hover {
  border-color: var(--gold);
}
.news-nav__link.is-newer {
  grid-column: 2;
  text-align: right;
}
.news-nav__link small {
  color: var(--gold);
  font: 900 0.8rem Roboto, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.news-nav__link strong {
  color: var(--parchment);
  font: 900 1rem "Roboto Condensed", sans-serif;
}

@media (max-width: 1000px) {
  .news-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .news-rail {
    position: static;
  }
  .news-nav {
    padding-left: 0;
  }
}
@media (max-width: 620px) {
  .news-nav {
    grid-template-columns: 1fr;
  }
  .news-nav__link.is-newer {
    grid-column: auto;
  }
}

/* --- L'article : la fiche de la source, puis le texte ; les sections d'une annonce de Facepunch restent des cartes
   (leur image en fond), l'article autour n'a pas de cadre (pas de cadres imbriqués) --- */
.news-rail__author {
  display: grid;
  gap: 2px;
  margin: 0;
}
.news-rail__author strong {
  color: var(--parchment);
  font: 900 1.05rem "Roboto Condensed", sans-serif;
}
.news-rail__site {
  color: var(--gold);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-rail__note {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.14);
  color: var(--text-soft);
  font-size: 0.88rem;
}
.news-article {
  min-width: 0;
}
.news-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.14);
  color: var(--text);
  font-size: 0.92rem;
}
.news-article__meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.news-article__meta i {
  color: var(--gold);
}
/* Les vidéos en 16:9, sans cadre ; les images à la largeur du texte */
.news-article__body .md-video,
.news-article__body .md-youtube,
.news-article__body .md-youtube-frame {
  aspect-ratio: 16 / 9;
  border: 0;
}
.news-article__body .md-section .md-image,
.news-article__body .md-section .md-video {
  box-shadow: none;
}
.news-article__body .md-image {
  display: block;
  width: 100%;
  height: auto;
}
/* Une section qui ne contient qu'une vidéo : la vidéo seule, sans la carte autour */
.news-article__body .md-section:has(> .md-section__inner > :is(.md-youtube, .md-youtube-frame, .md-video):only-child) {
  padding: 0;
  border: 0;
  background: none;
}
.news-article__body .md-section:has(> .md-section__inner > :is(.md-youtube, .md-youtube-frame, .md-video):only-child) :is(.md-youtube, .md-youtube-frame, .md-video) {
  margin: 0;
}

/* Un carrousel : plusieurs images à la suite, une à la fois, flèches et compteur dessus */
.news-article__body .md-carousel {
  position: relative;
  margin: 22px 0;
}
.news-article__body .md-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.news-article__body .md-carousel__track::-webkit-scrollbar {
  display: none;
}
.news-article__body .md-carousel__track .md-image {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}
.news-article__body :is(.md-carousel__prev, .md-carousel__next) {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  background: rgba(11, 10, 8, 0.8);
  color: var(--parchment);
  font: 900 1.6rem/1 Roboto, sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.2s, opacity 0.2s;
}
.news-article__body .md-carousel__prev {
  left: 12px;
}
.news-article__body .md-carousel__next {
  right: 12px;
}
.news-article__body :is(.md-carousel__prev, .md-carousel__next):hover:not(:disabled) {
  background: #3a2f22;
}
.news-article__body :is(.md-carousel__prev, .md-carousel__next):disabled {
  opacity: 0.3;
  cursor: default;
}
.news-article__body .md-carousel__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 10px;
  background: rgba(11, 10, 8, 0.8);
  color: var(--parchment);
  font: 700 0.85rem Roboto, sans-serif;
}

/* Une longue actu se dessine au fur et à mesure : une section hors de l'écran n'est rendue qu'à son approche */
.news-article__body > :is(.md-section, .md-changes) {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* Les parties de l'actu, sous la fiche de la source (le menu de côté commun) ; la colonne reste à l'écran */
.news-rail {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--head) - var(--banner, 0px) - 40px);
}
.news-source {
  flex: none;
}
/* Seules les parties défilent : la fiche de la source reste entière au-dessus */
.news-toc {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
/* Des lignes plus serrées que les autres menus : une actu de Facepunch a souvent plus de vingt parties */
.news-toc {
  gap: 1px;
}
.news-toc a {
  display: block;
  padding: 5px 12px;
  font-size: 0.88rem;
  line-height: 1.3;
}
.news-article__body :is(h2, h3)[id] {
  scroll-margin-top: calc(var(--head) + var(--banner, 0px) + 20px);
}
/* Sur un écran étroit, la colonne passe au-dessus du texte : pas de hauteur limitée, et les parties s'y replient */
@media (max-width: 1000px) {
  .news-rail {
    max-height: none;
  }
  .news-toc {
    max-height: 260px;
  }
}
/* Les parties pas encore lues, en gris */
.news-toc a.is-ahead {
  color: var(--text-soft);
  opacity: 0.7;
}
.news-toc {
  position: relative;
}
/* Les parties lues : le liseré vert d'une étape faite de Bien débuter */
.news-toc a.is-read {
  position: relative;
}
.news-toc a.is-read::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--live);
  box-shadow: 0 0 12px var(--live);
}