/* ── src/refonte/journal.css ── */
/* ───── Le Journal de la refonte (v403, 17 octobre 2026) : la liste et les articles ; la galerie de Sofia (v407) s'en sert aussi ─────
   Composants du système, tels quels : les puces (.chip, 99-systeme.css), la mosaïque (.rf-articles), les cartes d'article (.rf-article),
   la tuile (.rf-tuile), les pages éditoriales des études (.rf-ed-*), les visuels au trait du Journal du site (.jr-cover). Ici, la place. */
.rf-jr-filtres { display: flex; flex-wrap: wrap; gap: var(--rf-e1); }
.rf-jr-compte { margin: var(--rf-e2) 0 0; color: var(--ink-2); }
.rf-jr-liste { margin-top: 0; }
.rf-jr-liste .rf-article[hidden] { display: none; }
/* v616 (Raphaël, 22 octobre, 10 h 41 : « le plus récent en haut ») : la liste du Journal se lit en lignes, de gauche à droite.
   Les colonnes CSS de la mosaïque (.rf-articles) remplissent une colonne avant la suivante (le 22, le 21, le 20 l'un sous l'autre) ;
   ici, une grille aux mêmes colonnes et à la même gouttière. Les visuels ont tous le même format : seule la place change. */
:is(.rf-jr-liste, .rf-jr-memes .rf-articles) { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--rf-goutt); align-items: start; }
@media (max-width: 1023px) { :is(.rf-jr-liste, .rf-jr-memes .rf-articles) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { :is(.rf-jr-liste, .rf-jr-memes .rf-articles) { grid-template-columns: minmax(0, 1fr); } }
.rf-jr-exemple { margin: var(--rf-e2) 0 0; color: var(--ink-2); }
.rf-ed-hero .jr-cover { aspect-ratio: 600 / 252; }
.rf-ed-texte :is(ul, ol) { margin: var(--rf-e2) 0 0; padding-left: var(--rf-e2); }
.rf-ed-texte li + li { margin-top: var(--rf-e1); }
/* v664 (tâche QG t-20261022-list) · un paragraphe en texte riche (tools/texte-riche.mjs) : une liste, un tableau ou une citation, à la place
   d'un paragraphe ; il garde l'espacement des paragraphes */
.rf-jr-riche { margin: 0 0 var(--rf-e2); }
.rf-jr-riche > :last-child { margin-bottom: 0; }
.rf-jr-riche p { margin: 0 0 var(--rf-e1); }
.rf-ed-texte .rf-jr-riche :is(ul, ol) { margin: 0 0 var(--rf-e2); }
.rf-jr-riche li::marker { color: var(--ink-3); }
.rf-jr-riche blockquote { margin: 0 0 var(--rf-e2); padding-left: var(--rf-e2); border-left: 2px solid var(--line); color: var(--ink); }
.rf-jr-tableau { margin: 0 0 var(--rf-e2); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rf-jr-tableau:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rf-jr-tableau table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.rf-jr-tableau :is(th, td) { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rf-jr-tableau th { color: var(--ink); font-weight: 600; }
/* v407 · la galerie : la miniature du schéma dans une tuile carrée, au-dessus de ses phrases */
.rf-gal-fig { margin: 0; max-width: 480px; display: grid; gap: 6px; padding: var(--rf-e2); }   /* v683 : la carte d'un schéma de Sofia (.rf-schema, comme dans la conversation) : le dessin, ses étapes, « Revoir » */
.rf-gal-chapo { margin: var(--rf-e3) 0 0; max-width: 46ch; }
.rf-ed-texte .rf-appels { margin-top: var(--rf-e2); }
.rf-jr-memes { margin-top: var(--rf-e5); }
.rf-jr-memes h2 { margin: 0; }

/* ───── v558 · la page article : le texte en une colonne de lecture, le sommaire à côté, la barre de lecture, l'auteur ─────
   Raphaël, 21 octobre, 13 h 26 : « un indicateur de scroll et une table des matières avec liens ; j'aimais bien la mise en page des articles
   avant la refonte, notamment la table des matières et la partie auteur ». Trois ÉLÉMENTS NOUVEAUX, repris de l'ancien Journal
   (45-journal.css : .jr-progress, .jr-toc, .jr-author), refaits avec les jetons du système, à proposer au design system :
   .rf-lecture (la barre), .rf-sommaire (le sommaire), .rf-auteur (le bloc auteur). Le reste est de la mise en place. */
.rf-jr-corps { margin-top: var(--rf-e4); }
.rf-jr-texte { min-width: 0; }
/* la partie atteinte par le sommaire reçoit le focus (clavier, lecteurs d'écran) sans cadre autour du bloc : la règle du système
   ([tabindex="-1"]:focus, 99-systeme.css), que les pages de la refonte ne chargent pas */
.rf-jr-texte > section[tabindex="-1"]:focus { outline: none; }
/* une partie visée arrive 24 px sous l'en-tête (le site réserve déjà sa hauteur : scroll-padding-top ; ses sections plein écran, elles, passent dessous) */
.rf-page section.rf-jr-partie[id], .rf-page section.rf-auteur[id] { scroll-margin-top: var(--rf-e2); }
.rf-jr-partie + .rf-jr-partie { margin-top: var(--rf-e4); }
.rf-jr-partie > .rf-ed-sur { margin-bottom: 6px; }
.rf-jr-partie > h2 { margin: 0 0 var(--rf-e2); }

/* la barre de lecture : 2 px à l'encre, tout en haut ; elle se remplit du début à la fin du texte (.rf-jr-corps) */
.rf-lecture { position: fixed; z-index: 31; inset: 0 0 auto; height: 2px; pointer-events: none; }
.rf-lecture i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
@keyframes rf-lecture { to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  :root { timeline-scope: --rf-lecture; }
  .rf-jr-corps { view-timeline: --rf-lecture block; }
  .rf-lecture i { animation: rf-lecture linear both; animation-timeline: --rf-lecture; animation-range: contain 0% contain 100%; }
}

/* le sommaire : une liste sous un filet, la partie en cours marquée d'un trait d'encre (aria-current) */
.rf-sommaire details { border-block: 1px solid var(--line); }
.rf-sommaire summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; color: var(--ink-2); list-style: none; cursor: pointer; }
.rf-sommaire summary::-webkit-details-marker { display: none; }
.rf-sommaire summary svg { transition: transform var(--dur-respond) var(--ease-out); }
.rf-sommaire details[open] summary svg { transform: rotate(180deg); }
.rf-sommaire summary:focus-visible, .rf-sommaire a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rf-sommaire ol { margin: 0 0 var(--rf-e2); padding: 0; list-style: none; border-left: 1px solid var(--line); }
.rf-sommaire a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 6px 0 6px 18px; font: 400 15px/24px var(--font-sans); color: var(--ink-3); text-decoration: none; cursor: pointer; transition: color var(--dur-respond) ease; }
.rf-sommaire a::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; background: var(--ink); transform: scaleY(0); transition: transform var(--dur-respond) var(--ease-out); }
.rf-sommaire a:hover, .rf-sommaire a[aria-current] { color: var(--ink); }
.rf-sommaire a[aria-current]::before { transform: scaleY(1); }
@media (min-width: 1024px) {
  .rf-jr-corps { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: var(--rf-e4); align-items: start; }
  .rf-sommaire { position: sticky; top: calc(var(--rf-entete) + var(--rf-e2)); }
  .rf-sommaire details { border-bottom: 0; }
  .rf-sommaire summary { pointer-events: none; cursor: default; }
  .rf-sommaire summary svg { display: none; }
}
@media (max-width: 1023px) { .rf-jr-texte { margin-top: var(--rf-e3); } }

/* le bloc auteur : le portrait au trait de Sofia (celui de sa boîte), son nom, qui elle est, un lien */
.rf-auteur { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--rf-e2); align-items: start; margin-top: var(--rf-e4); padding-top: var(--rf-e3); border-top: 1px solid var(--line); }
.rf-auteur .rf-bandeau-face { margin-top: 6px; }
/* v560 : l'avatar est le cœur en fusion de Sofia, en mouvement (sofia-avatar.js) ; à cette taille, ses anneaux se lisent. Le visage
   dessiné tient la place tant que le cœur n'est pas prêt (et pour de bon sans carte graphique). */
.rf-auteur .rf-bandeau-face { position: relative; width: 96px; height: 96px; }   /* pas de jeton de taille : 96 et 72 px, sur la grille de 6 px */
.rf-auteur .rf-bandeau-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--dur-fade) ease; }
.rf-auteur .rf-bandeau-face.rf-coeur-vivant canvas { opacity: 1; }
.rf-auteur .rf-bandeau-face.rf-coeur-vivant svg { visibility: hidden; }
@media (max-width: 767px) { .rf-auteur .rf-bandeau-face { width: 72px; height: 72px; } }
@media (prefers-reduced-motion: reduce) { .rf-auteur .rf-bandeau-face canvas { transition: none; } }
.rf-auteur-texte { display: grid; gap: var(--rf-e1); justify-items: start; max-width: 66ch; }
.rf-auteur-texte > * { margin: 0; }
.rf-auteur-texte .t-texte { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .rf-sommaire a, .rf-sommaire a::before, .rf-sommaire summary svg { transition: none; } }

/* ── v562 · les médias des sources ──
   La vidéo d'une source (.rf-jr-video) : la tuile du site (.rf-tuile) à la proportion de la vidéo, le bouton du site au centre ; au clic,
   le lecteur de l'hébergeur prend la place. « À voir chez … » (.rf-jr-avoir) : un renvoi vers une démo de la source, sous un filet,
   comme le bloc auteur. Deux éléments nouveaux, à proposer au design system. */
.rf-jr-video .rf-tuile { display: grid; place-items: center; padding: var(--rf-e2); }
.rf-jr-video-face { display: grid; gap: var(--rf-e1); justify-items: center; text-align: center; max-width: 36ch; }
.rf-jr-video-face > p { margin: 0; } .rf-jr-video-face .t-petit { color: var(--ink-2); } .rf-jr-video-face .btn-pill { margin-top: var(--rf-e1); }
.rf-jr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rf-jr-avoir { display: grid; gap: var(--rf-e1); justify-items: start; margin-top: var(--rf-e2); padding-top: var(--rf-e2); border-top: 1px solid var(--line); }
.rf-ed-texte .rf-jr-avoir > * { margin: 0; }
.rf-jr-avoir .t-petit { color: var(--ink-2); }