/* Delvigne Lab — habillage des articles News (typographie + blocs :::).
   Extrait de news.php le 2026-08-13 pour être réutilisable ailleurs SANS
   dupliquer : l'aperçu en direct de admin/news.php (id="news-preview",
   class="article-body") le charge aussi, pour montrer le VRAI rendu
   (fonds de couleur, bandeau image+texte…) plutôt qu'un HTML nu. Rester
   synchronisé n'est plus une règle à tenir à la main : il n'y a qu'une copie.
   Dépend des tokens de assets/tokens.css (--rule, --cyan, --grey, --mut,
   --serif), chargé avant ce fichier des deux côtés.
   ⚠️ Les media queries de ces blocs vivent dans assets/responsive.css, pas ici. */

/* Blocs de mise en page des articles (syntaxe :::nom dans les .md).
   Spec : docs/superpowers/specs/2026-07-31-news-blocks-design.md
   --bg et --fg sont posés par le rendu ; --fg est CALCULÉ depuis la
   luminance de --bg, ne pas le figer ici. */
.news-callout{background:var(--bg,#0a7a86);color:var(--fg,#fff);
  padding:30px 34px;border-radius:6px;margin:0 0 34px}
.news-callout > *:first-child{margin-top:0}
.news-callout > *:last-child{margin-bottom:0}

.news-band{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;
  background:var(--bg,#0a7a86);color:var(--fg,#fff);padding:44px;border-radius:6px;
  margin:0 0 40px}
.news-band--left{grid-template-columns:1fr 1.25fr}
.news-band--left .news-band-media{order:-1}
.news-band-text > *:first-child{margin-top:0}
.news-band-text > *:last-child{margin-bottom:0}
/* ⚠️ Préfixés par `.article-body` pour battre `.article-body img`/`p`
   déclarés plus bas : à spécificité égale ceux-là gagnent et repeignent
   bordure, marges et rayons des images de blocs. Même piège que les liens
   ci-dessous. Constaté à la revue du 2026-07-31. */
.article-body .news-band-text p{margin:0 0 16px;font-size:17px;line-height:1.72}
.article-body .news-band-media img{width:100%;height:100%;max-height:460px;
  object-fit:cover;border-radius:4px;display:block;border:0;margin:0}

/* ⚠️ Ces sélecteurs DOIVENT rester plus spécifiques que `.article-body a`,
   déclaré plus bas avec `color:var(--cyan)`. À spécificité égale c'est lui
   qui gagne, et le texte des liens se peint alors en cyan — soit exactement
   la couleur de fond par défaut d'un bandeau : liens invisibles, seul le
   soulignement reste. Constaté le 2026-07-31 sur l'article migré. */
/* Le soulignement suit --fg (via currentColor), sinon sur un fond CLAIR le
   texte passe en encre mais le trait reste blanc → lien invisible. `rgba`
   figé en blanc ne marchait que sur les fonds sombres. Constaté 2026-07-31. */
.article-body .news-band a,
.article-body .news-callout a{color:inherit;
  border-bottom:1px solid color-mix(in srgb, currentColor 55%, transparent)}
.article-body .news-band a:hover,
.article-body .news-callout a:hover{border-bottom-color:currentColor}

.news-gallery{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);
  gap:18px;margin:30px 0 34px}
.news-gallery figure{margin:0}
.article-body .news-gallery img{display:block;width:100%;height:190px;object-fit:cover;
  border:1px solid var(--rule);border-radius:3px;margin:0}
.news-gallery figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--mut);margin-top:9px;line-height:1.5}

/* Déborde de la colonne de 64 px de chaque côté sur la page publiée. La paire
   marge négative / padding compensé est vraie PAR CONSTRUCTION à toute
   largeur : ne pas la remplacer par un max-width recalé et centré à part
   (règle du CLAUDE.md). Sans effet visible dans une colonne d'aperçu plus
   étroite (marge négative écrêtée par la boîte), ce n'est pas un bug ici. */
.news-photo{margin:34px -64px;padding:0}
.article-body .news-photo img{display:block;width:100%;height:auto;border:1px solid var(--rule);
  border-radius:3px;margin:0}
.news-photo figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--mut);margin-top:10px;line-height:1.5;padding:0 64px}

.news-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  margin:30px 0 6px;border-radius:4px;background:var(--grey)}
.news-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.news-video-caption{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--mut);margin:0 0 34px;line-height:1.5}

.news-cta{display:inline-block;margin:8px 0 34px;padding:12px 22px;
  background:var(--cyan);color:#fff;border-radius:4px;font-family:var(--body);
  font-weight:600;text-decoration:none}
.news-cta:hover{filter:brightness(.92)}

.article-body{font-size:17.5px;line-height:1.75}
.article-body h2{font-size:28px;margin:40px 0 14px}
.article-body h3{font-size:22px;margin:32px 0 10px}
.article-body p{margin:0 0 20px}
.article-body img{border:1px solid var(--rule);margin:28px 0;border-radius:2px}
.article-body a{color:var(--cyan);border-bottom:1px solid var(--rule)}
.article-body a:hover{border-color:var(--cyan)}
.article-body table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.article-body th,.article-body td{border:1px solid var(--rule);padding:10px 14px;text-align:left}
.article-body th{background:var(--grey);font-family:var(--body);font-weight:600}
.article-body blockquote{border-left:2px solid var(--cyan);margin:24px 0;padding:4px 0 4px 22px;color:var(--mut);font-family:var(--serif);font-style:italic;font-size:20px}
.article-body ul,.article-body ol{padding-left:22px;margin:0 0 20px}
.article-body li{margin:6px 0}