/* ==========================================================================
   jp-poisson — Cartographies de fracture
   Base blanche, encre graphite, une seule couleur-signal.
   Les objets du site sont les schémas et les textes, pas des blocs décoratifs.
   Aucune ressource distante : polices auto-hébergées, aucun script.
   ========================================================================== */

/* Les @font-face vivent dans fonts.css, chargée en parallèle par default.hbs.
   Surtout pas d'@import ici : il forcerait un second aller-retour en série
   après le téléchargement de cette feuille, et retarderait d'autant la
   première peinture du texte. */

:root {
    /* PAYSAGES DE DÉCISION — le système visuel de la maison d'auteur.
       Un papier chaud, des encres désaturées, et une seule signature
       numérique. Les couleurs de champ (ocre, brume) ne portent JAMAIS de
       texte sur papier : leur contraste ne le permet pas. Chaque valeur
       ci-dessous a été mesurée avant d'être retenue. */

    /* Surfaces — papier imprimé, pas écran blanc */
    --paper: #f4efe5;
    --paper-note: #ebe4d6;
    --paper-deep: #e3dbc9;

    /* Encres. Contrastes mesurés sur --paper :
       ink 15,30:1 · ink-2 5,71:1 · pine 10,97:1 — tous AA texte. */
    --ink: #171a18;
    --ink-2: #55605a;
    --pine: #26372f;

    /* Couleurs de champ. Réservées aux aplats et aux illustrations.
       ochre 2,46:1 et mist 1,56:1 sur papier : jamais de texte dessus. */
    --ochre: #c88f3d;
    --mist: #b7c5c2;
    --terracotta: #b75d4b;
    /* Variantes lisibles des mêmes teintes, quand un mot doit être coloré. */
    --ochre-ink: #9a6a24;
    --terracotta-ink: #9e4938;

    /* Signature numérique unique : outremer. Liens, états, marques système.
       6,70:1 sur papier. Elle ne donne pas l'humeur, elle la ponctue. */
    --signal: #3347b8;
    --signal-wash: rgba(51, 71, 184, 0.07);

    /* Filets */
    --rule: rgba(23, 26, 24, 0.16);
    --rule-strong: rgba(23, 26, 24, 0.32);

    /* Typographie : un serif de presse pour lire, un grotesque de précision
       pour l'interface. Le texte long n'appartient jamais au grotesque. */
    --serif: var(--gh-font-heading, Newsreader, "Iowan Old Style", Georgia, serif);
    --sans: var(--gh-font-body, Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);

    /* Grille éditoriale : 12 colonnes, gouttière constante */
    --edge: clamp(20px, 5vw, 96px);
    --col-gap: clamp(16px, 2.2vw, 34px);
    --measure: 34rem;
    --section: clamp(48px, 6vw, 96px);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, fieldset {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

ul, ol {
    margin: 0;
    padding: 0;
}

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

fieldset {
    border: 0;
    padding: 0;
}

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    background: var(--ink);
    color: var(--paper);
    font-size: 14px;
    font-weight: 600;
    left: 12px;
    padding: 10px 16px;
    position: absolute;
    top: -200px;
    z-index: 100;
}

.skip-link:focus {
    top: 12px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --------------------------------------------------------------------------
   Grille
   -------------------------------------------------------------------------- */

.grid {
    display: grid;
    column-gap: var(--col-gap);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-left: var(--edge);
    padding-right: var(--edge);
}

/* --------------------------------------------------------------------------
   Éléments éditoriaux : folios, légendes, sources, métadonnées
   -------------------------------------------------------------------------- */

.folio {
    color: var(--signal);
    font-family: var(--sans);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.meta {
    color: var(--ink-2);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-family: var(--sans);
    font-size: 13px;
}

.caption {
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    max-width: 44em;
}

.caption strong {
    color: var(--ink);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Figure de schéma — l'objet central du site
   -------------------------------------------------------------------------- */

.figure {
    display: grid;
    gap: 12px;
    margin: 0;
}

.figure-frame {
    /* Ratio réservé : la place de l'image est prise avant son chargement,
       donc aucun décalage de mise en page. Les schémas de formats différents
       sont posés comme des planches, en `contain`, sur le fond de note. */
    align-items: center;
    aspect-ratio: 16 / 10;
    background: var(--paper-note);
    border: 1px solid var(--rule);
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: clamp(10px, 1.6vw, 20px);
}

.figure-frame img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

a.figure-frame:hover,
a.figure-frame:focus-visible {
    border-color: var(--signal);
}

.figure-head {
    align-items: baseline;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.figure-label {
    color: var(--signal);
    font-size: 13px;
    font-weight: 600;
}

.figure-note {
    color: var(--ink-2);
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.site-header {
    align-items: baseline;
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 10px clamp(20px, 5vw, 60px);
    justify-content: space-between;
    padding: clamp(16px, 2.2vw, 26px) var(--edge);
}

.wordmark {
    font-family: var(--serif);
    font-size: clamp(17px, 1.5vw, 19px);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.wordmark-logo {
    max-height: 30px;
    width: auto;
}

.nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 2.4vw, 34px);
    list-style: none;
}

.nav-list a {
    border-bottom: 1px solid transparent;
    display: inline-block;
    font-size: 15px;
    padding-bottom: 2px;
    text-decoration: none;
}

.nav-list a:hover,
.nav-list a:focus-visible {
    border-bottom-color: var(--signal);
    color: var(--signal);
}

.nav-current > a {
    border-bottom-color: var(--ink);
}

/* --------------------------------------------------------------------------
   Hero — thèse en tension avec un schéma réel
   -------------------------------------------------------------------------- */

.hero {
    padding-top: clamp(40px, 6vw, 88px);
    padding-bottom: clamp(40px, 6vw, 88px);
    row-gap: clamp(32px, 4vw, 52px);
}

.hero-text,
.hero-figure {
    grid-column: 1 / -1;
}

.hero h1 {
    font-family: var(--serif);
    font-size: clamp(30px, 3.9vw, 50px);
    font-weight: 400;
    letter-spacing: -0.021em;
    line-height: 1.13;
    max-width: 17em;
}

.hero-context {
    color: var(--ink-2);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.6;
    margin-top: clamp(20px, 2.6vw, 30px);
    max-width: 34em;
}

.hero-actions {
    margin-top: clamp(24px, 3vw, 34px);
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.action {
    align-items: center;
    border-bottom: 2px solid var(--signal);
    color: var(--ink);
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    gap: 10px;
    padding-bottom: 4px;
    text-decoration: none;
}

.action::after {
    color: var(--signal);
    content: "→";
    transition: transform 0.18s ease-out;
}

.action:hover::after,
.action:focus-visible::after {
    transform: translateX(3px);
}

.action-quiet {
    border-bottom: 1px solid var(--rule);
    font-size: 15px;
    font-weight: 500;
}

.action-quiet::after {
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Dernière édition
   -------------------------------------------------------------------------- */

.latest {
    border-top: 1px solid var(--ink);
    padding-top: clamp(20px, 2.4vw, 28px);
    padding-bottom: var(--section);
    row-gap: clamp(24px, 3vw, 40px);
}

.latest-marker,
.latest-body,
.latest-figure {
    grid-column: 1 / -1;
}

.latest h2 {
    font-family: var(--serif);
    font-size: clamp(25px, 3vw, 38px);
    /* Sans schéma, le titre prend plus de largeur : le bloc garde sa présence
       au lieu de laisser une colonne vide. */
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.16;
    margin-top: 14px;
    max-width: 17em;
}

.latest h2 a {
    text-decoration: none;
}

.latest h2 a:hover,
.latest h2 a:focus-visible {
    color: var(--signal);
}

.latest-lede {
    color: var(--ink-2);
    line-height: 1.65;
    margin-top: 16px;
    max-width: 36em;
}

.latest-actions {
    margin-top: clamp(20px, 2.6vw, 28px);
}

/* --------------------------------------------------------------------------
   Protocole éditorial — la « fracture » comme relation, pas comme décor
   -------------------------------------------------------------------------- */

.protocol {
    padding-top: var(--section);
    padding-bottom: var(--section);
    row-gap: clamp(28px, 3.5vw, 44px);
}

.protocol-intro,
.protocol-entries {
    grid-column: 1 / -1;
}

.protocol-action {
    margin-top: clamp(20px, 2.6vw, 28px);
}

/* Utilitaire : occuper toute la grille sans style en ligne. */
.span-all {
    grid-column: 1 / -1;
}

.protocol h2 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.22;
    max-width: 15em;
}

.protocol p {
    color: var(--ink-2);
    line-height: 1.65;
    margin-top: 16px;
    max-width: 34em;
}

/* --------------------------------------------------------------------------
   Index des éditions — collection de cartes intellectuelles,
   pas grille de cartes Ghost
   -------------------------------------------------------------------------- */

.index-head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    padding-bottom: 14px;
}

.index-head h2 {
    font-family: var(--serif);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 400;
    letter-spacing: -0.012em;
}

.index {
    border-top: 1px solid var(--ink);
    list-style: none;
}

.index-row {
    border-bottom: 1px solid var(--rule);
}

.index-link {
    display: grid;
    gap: 6px clamp(16px, 2.4vw, 40px);
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(18px, 2.2vw, 26px) 0;
    text-decoration: none;
}

.index-link:hover,
.index-link:focus-visible {
    background: var(--signal-wash);
}

.index-link:hover .index-title,
.index-link:focus-visible .index-title {
    color: var(--signal);
}

.index-side {
    align-items: baseline;
    display: flex;
    gap: 14px;
}

.index-title {
    display: block;
    font-family: var(--serif);
    font-size: clamp(18px, 1.75vw, 23px);
    font-weight: 400;
    line-height: 1.24;
    max-width: 26em;
}

.index-thesis {
    color: var(--ink-2);
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.55;
    max-width: 40em;
}

.index-empty {
    color: var(--ink-2);
    padding: 28px 0;
}

.section {
    padding-top: var(--section);
    padding-bottom: var(--section);
}

.section-tight {
    padding-top: clamp(24px, 3vw, 40px);
}

/* --------------------------------------------------------------------------
   Livre — précis, jamais monumental
   -------------------------------------------------------------------------- */

.book {
    padding-top: var(--section);
    padding-bottom: var(--section);
    row-gap: clamp(24px, 3vw, 36px);
}

.book-body,
.book-state {
    grid-column: 1 / -1;
}

.book h2 {
    font-family: var(--serif);
    font-size: clamp(23px, 2.5vw, 33px);
    font-weight: 400;
    letter-spacing: -0.017em;
    line-height: 1.18;
    max-width: 18em;
}

.book p {
    color: var(--ink-2);
    line-height: 1.65;
    margin-top: 16px;
    max-width: 36em;
}

.state-list {
    border-top: 1px solid var(--rule);
    list-style: none;
}

.state-list li {
    border-bottom: 1px solid var(--rule);
    display: grid;
    gap: 2px;
    padding: 12px 0;
}

.state-key {
    color: var(--ink-2);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.state-value {
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   V3 — signature, preuves, portes d'entrée, objet intellectuel, cycle, scène
   -------------------------------------------------------------------------- */

/* La signature est une marque, pas un titre : petite, en capitales douces,
   posée au-dessus de l'idée qu'elle résume. */
.signature {
    color: var(--signal);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: clamp(14px, 1.8vw, 22px);
    text-transform: uppercase;
}

/* Ligne de preuves : des faits alignés, séparés par des points médians.
   Une seule occurrence sur le site — le CSS ne peut pas l'imposer, le
   contrôle checks.mjs si. */
.hero-proofs {
    border-top: 1px solid var(--rule);
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 14px;
    grid-column: 1 / -1;
    line-height: 1.7;
    margin-top: clamp(26px, 3.4vw, 44px);
    padding-top: clamp(14px, 1.8vw, 20px);
}

/* --------------------------------------------------------------------------
   Schémas dans le corps d'un texte — le seul objet visuel du site
   -------------------------------------------------------------------------- */

/* Un schéma sort de la colonne de lecture : réduit à la mesure du texte, il
   devient illisible sur un téléphone. Il prend la largeur disponible, garde
   son ratio réel, et reste cliquable vers sa pleine résolution. */
.schema-card {
    margin: clamp(28px, 3.6vw, 48px) 0;
}

.schema-zoom {
    background: var(--paper-note);
    border: 1px solid var(--rule);
    display: block;
    padding: clamp(8px, 1.2vw, 16px);
}

.schema-zoom:hover,
.schema-zoom:focus-visible {
    border-color: var(--signal);
}

.schema-card img {
    height: auto;
    width: 100%;
}

.schema-card figcaption {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.schema-titre {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
}

.schema-legende,
.schema-source {
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.55;
}

.schema-plein {
    /* 24 px de haut au minimum : c'est une cible tactile, pas une légende.
       WCAG 2.2 AA, critère 2.5.8. */
    align-items: center;
    color: var(--signal);
    display: inline-flex;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    justify-self: start;
    min-height: 26px;
    text-decoration: none;
}

.schema-plein:hover,
.schema-plein:focus-visible {
    text-decoration: underline;
}

/* Le résumé textuel : replié par défaut, il ne casse pas la lecture ; déplié,
   il rend le schéma utilisable sans jamais voir l'image. */
.schema-resume {
    border-top: 1px solid var(--rule);
    margin-top: 6px;
    padding-top: 8px;
}

.schema-resume > summary {
    color: var(--signal);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    list-style: none;
    padding: 4px 0;
}

.schema-resume > summary::-webkit-details-marker {
    display: none;
}

.schema-resume > summary::before {
    content: '+ ';
    font-variant-numeric: tabular-nums;
}

.schema-resume[open] > summary::before {
    content: '– ';
}

.schema-resume p {
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.65;
    max-width: 44em;
    padding-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Rail d'annotation d'une édition — variante « marge annotée » retenue
   -------------------------------------------------------------------------- */

/* La marge droite d'un article long restait vide sur 19 000 px. Elle porte
   désormais l'appareil éditorial : rubrique, date, durée, cycle, sujet.
   L'axe de lecture, lui, ne bouge pas. */
.page-head-rail {
    border-top: 1px solid var(--rule);
    grid-column: 1 / -1;
    margin-top: clamp(14px, 1.8vw, 22px);
    padding-top: 12px;
}

.rail-meta {
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.7;
}

.rail-meta a {
    color: inherit;
}

.rail-meta a:hover,
.rail-meta a:focus-visible {
    color: var(--signal);
}

/* Un filet dans la marge marque chaque section : le lecteur suit la structure
   du raisonnement sans qu'on lui affiche une grille de labels. */
.prose > h2 {
    /* « pretty » évite qu'un point d'interrogation ou un mot court se
       retrouve seul sur la dernière ligne d'un intertitre. */
    text-wrap: pretty;
    border-left: 1px solid var(--rule);
    margin-left: calc(-1 * var(--col-gap));
    padding-left: var(--col-gap);
}

/* La couleur-signal n'encode qu'une chose : le déplacement. Elle marque donc
   le schéma, et rien d'autre dans le corps du texte. */
.prose > .schema-card {
    border-left: 2px solid var(--signal);
    padding-left: clamp(14px, 1.8vw, 26px);
}

/* La grammaire du regard : une seule ligne éditable, à mesure étroite.
   Les points médians deviennent le rythme de la colonne. Serif de lecture :
   ce sont des questions, pas une légende d'interface. */
.hero-grammar {
    grid-column: 1 / -1;
    margin-top: clamp(20px, 2.4vw, 30px);
}

.hero-grammar-line {
    border-left: 2px solid var(--signal);
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(17px, 1.7vw, 21px);
    line-height: 1.5;
    margin-top: 12px;
    /* Pas de largeur imposée sous 52rem : à 320 px, « 10em » réduisait la
       ligne à vingt signes et cassait les cinq questions n'importe où. */
    padding-left: clamp(14px, 1.6vw, 20px);
    text-wrap: pretty;
}

@media (min-width: 52rem) {
    .hero-grammar-line {
        max-width: 16em;
    }
}

.book-precursors {
    border-top: 1px solid var(--rule);
    padding-top: var(--section);
    padding-bottom: var(--section);
    row-gap: clamp(22px, 2.8vw, 34px);
}

.start-here {
    padding-top: var(--section);
    padding-bottom: clamp(20px, 2.6vw, 32px);
    row-gap: clamp(22px, 2.8vw, 34px);
}

.book-precursors-intro,
.book-precursors-list,
.start-here-intro,
.start-here-list,
.artifact-intro,
.artifact-figure,
.cycle-intro,
.cycle-list,
.talks-intro,
.talks-list {
    grid-column: 1 / -1;
}

.book-precursors h2,
.start-here h2,
.artifact h2,
.cycle h2,
.talks h2 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 400;
    letter-spacing: -0.016em;
    line-height: 1.2;
}

.book-precursors-intro p,
.start-here-intro p,
.artifact-intro p,
.cycle-intro p,
.talks-intro p {
    color: var(--ink-2);
    line-height: 1.68;
    margin-top: 14px;
    max-width: 34em;
}

/* L'objet intellectuel occupe la largeur : c'est une pièce à conviction,
   pas une vignette. Le cadre respecte le ratio réel du schéma. */
.artifact {
    padding-top: clamp(40px, 5.5vw, 88px);
    padding-bottom: clamp(40px, 5.5vw, 88px);
    row-gap: clamp(24px, 3vw, 38px);
}

.artifact .figure-frame {
    aspect-ratio: auto;
    padding: 0;
}

.artifact .figure-frame img {
    height: auto;
    object-fit: contain;
    width: 100%;
}

.cycle {
    border-top: 1px solid var(--rule);
    padding-top: clamp(40px, 5.5vw, 88px);
    padding-bottom: clamp(40px, 5.5vw, 88px);
    row-gap: clamp(22px, 2.8vw, 34px);
}

.talks {
    padding-top: clamp(40px, 5.5vw, 88px);
    padding-bottom: clamp(40px, 5.5vw, 88px);
    row-gap: clamp(22px, 2.8vw, 34px);
}

.talks-list {
    border-top: 1px solid var(--rule);
}

.talks-list p {
    border-bottom: 1px solid var(--rule);
    font-family: var(--serif);
    font-size: 16px;
    margin: 0;
    padding: 14px 0;
}

/* Note d'origine d'une édition : distincte du texte historique, jamais fondue
   dedans. Elle dit où et quand le texte a paru d'abord. */
.origin-note {
    border-top: 1px solid var(--rule);
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.6;
    margin-top: clamp(32px, 4vw, 52px);
    padding-top: 14px;
}

.origin-note a {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Auteur
   -------------------------------------------------------------------------- */

.author-block {
    padding-top: var(--section);
    padding-bottom: var(--section);
    row-gap: clamp(24px, 3vw, 36px);
}

.author-portrait,
.author-body {
    grid-column: 1 / -1;
}

.author-block h2 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 400;
    letter-spacing: -0.016em;
    line-height: 1.2;
}

.author-block p {
    line-height: 1.68;
    margin-top: 16px;
    max-width: 38em;
}

.author-portrait img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
}

.author-proofs {
    border-top: 1px solid var(--rule);
    list-style: none;
    margin-top: clamp(20px, 2.6vw, 28px);
}

.author-proofs li {
    border-bottom: 1px solid var(--rule);
    display: grid;
    gap: 2px;
    padding: 12px 0;
}

.author-proofs a {
    font-family: var(--serif);
    font-size: 16px;
    text-decoration: none;
}

.author-proofs a:hover,
.author-proofs a:focus-visible {
    color: var(--signal);
}

/* --------------------------------------------------------------------------
   Pages et articles
   -------------------------------------------------------------------------- */

.page-head {
    padding-top: clamp(36px, 5vw, 76px);
    padding-bottom: clamp(24px, 3vw, 40px);
    row-gap: clamp(18px, 2.4vw, 30px);
}

.page-head-main,
.page-head-portrait {
    grid-column: 1 / -1;
}

.post-meta {
    margin-top: clamp(16px, 2vw, 22px);
}

.page-head-portrait {
    max-width: 220px;
}

.page-head h1 {
    font-family: var(--serif);
    font-size: clamp(27px, 3.4vw, 44px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.14;
    max-width: 18em;
}

.page-lede {
    color: var(--ink-2);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.58;
    margin-top: clamp(16px, 2vw, 24px);
    max-width: 34em;
}

.article-figure {
    padding-bottom: clamp(24px, 3vw, 44px);
}

.article-figure > .figure {
    grid-column: 1 / -1;
}

.prose {
    font-family: var(--serif);
    font-size: clamp(17px, 1.15vw, 19px);
    line-height: 1.7;
    padding-bottom: clamp(40px, 6vw, 80px);
}

.prose > * {
    grid-column: 1 / -1;
    max-width: var(--measure);
}

.prose > * + * {
    margin-top: 1.45em;
}

.prose h2 {
    font-family: var(--serif);
    font-size: clamp(21px, 2.1vw, 27px);
    font-weight: 500;
    letter-spacing: -0.014em;
    line-height: 1.24;
    margin-top: 2.3em;
}

.prose h3 {
    font-family: var(--serif);
    font-size: clamp(18px, 1.7vw, 22px);
    font-weight: 500;
    line-height: 1.3;
    margin-top: 1.9em;
}

.prose h4 {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-top: 1.7em;
    text-transform: uppercase;
}

.prose a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.prose a:hover,
.prose a:focus-visible {
    color: var(--signal);
}

.prose ul,
.prose ol {
    padding-left: 1.3em;
}

.prose li + li {
    margin-top: 0.45em;
}

.prose blockquote {
    border-left: 2px solid var(--signal);
    font-size: 1.06em;
    line-height: 1.5;
    padding-left: 1.1em;
}

.prose blockquote p + p {
    margin-top: 0.8em;
}

.prose hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.4em 0;
}

.prose code {
    background: var(--paper-note);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    padding: 2px 5px;
}

.prose pre {
    background: var(--paper-note);
    border: 1px solid var(--rule);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
    line-height: 1.55;
    overflow-x: auto;
    padding: 16px 18px;
}

.prose pre code {
    background: none;
    padding: 0;
}

.prose figure {
    margin-top: 2em;
}

.prose figcaption {
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 10px;
}

.prose table {
    border-collapse: collapse;
    display: block;
    font-family: var(--sans);
    font-size: 15px;
    overflow-x: auto;
    width: 100%;
}

.prose th,
.prose td {
    border-bottom: 1px solid var(--rule);
    padding: 10px 14px 10px 0;
    text-align: left;
    vertical-align: top;
}

.prose thead th {
    border-bottom-color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Cartes Koenig
   -------------------------------------------------------------------------- */

.prose .kg-card {
    margin-top: 2em;
}

.prose .kg-image-card img,
.prose .kg-gallery-image img {
    width: 100%;
}

.prose .kg-width-wide {
    max-width: min(56rem, calc(100vw - 2 * var(--edge)));
}

.prose .kg-width-full {
    max-width: min(72rem, calc(100vw - 2 * var(--edge)));
}

.prose .kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prose .kg-gallery-row {
    display: flex;
    gap: 10px;
}

.prose .kg-gallery-image {
    flex: 1 1 0;
}

.prose .kg-callout-card {
    background: var(--paper-note);
    border-left: 2px solid var(--signal);
    display: flex;
    font-family: var(--sans);
    font-size: 0.94em;
    gap: 12px;
    line-height: 1.55;
    padding: 16px 18px;
}

.prose .kg-callout-emoji {
    flex: none;
}

.prose .kg-button-card {
    display: flex;
}

.prose .kg-button-card.kg-align-center {
    justify-content: center;
}

.prose .kg-btn {
    align-items: center;
    border: 1px solid var(--ink);
    color: var(--ink);
    display: inline-flex;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    min-height: 46px;
    padding: 0 22px;
    text-decoration: none;
}

.prose .kg-btn:hover,
.prose .kg-btn:focus-visible {
    background: var(--ink);
    color: var(--paper);
}

.prose .kg-btn-accent {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
}

.prose .kg-btn-accent:hover,
.prose .kg-btn-accent:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
}

.prose .kg-embed-card {
    display: grid;
}

.prose .kg-embed-card iframe,
.prose .kg-embed-card video {
    aspect-ratio: 16 / 9;
    border: 0;
    height: auto;
    width: 100%;
}

.prose .kg-audio-card {
    border: 1px solid var(--rule);
    padding: 14px 16px;
}

.prose .kg-audio-card audio {
    width: 100%;
}

.prose .kg-bookmark-card a {
    border: 1px solid var(--rule);
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    text-decoration: none;
}

.prose .kg-bookmark-title {
    font-family: var(--serif);
    font-weight: 500;
}

.prose .kg-bookmark-description,
.prose .kg-bookmark-metadata {
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
}

.prose .kg-blockquote-alt {
    border-left: 0;
    font-family: var(--serif);
    font-size: 1.2em;
    line-height: 1.4;
    padding-left: 0;
}

.prose .kg-toggle-card {
    border-bottom: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
    padding: 12px 0;
}

.prose .kg-toggle-heading-text {
    font-family: var(--serif);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination {
    align-items: baseline;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 15px;
    gap: 10px 28px;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 18px;
}

.pagination a {
    /* Cible tactile : 26 px de haut, au-dessus du minimum WCAG 2.2 AA. */
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    font-weight: 600;
    min-height: 26px;
    text-decoration: none;
}

.pagination a:hover,
.pagination a:focus-visible {
    color: var(--signal);
}

.page-number {
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Abonnement — absent par défaut, états complets une fois activé
   -------------------------------------------------------------------------- */

.signup {
    border-top: 1px solid var(--ink);
    padding-bottom: var(--section);
    padding-top: clamp(24px, 3vw, 36px);
    row-gap: clamp(20px, 2.6vw, 32px);
}

.signup-copy,
.signup-form {
    grid-column: 1 / -1;
}

.signup h2 {
    font-family: var(--serif);
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.signup-copy p {
    color: var(--ink-2);
    line-height: 1.62;
    margin-top: 14px;
    max-width: 34em;
}

.signup-form form {
    display: grid;
    gap: 10px;
}

.signup-form label {
    font-size: 13px;
    font-weight: 600;
}

.signup-form input[type="email"] {
    border: 1px solid var(--rule-strong);
    min-height: 48px;
    padding: 0 14px;
}

.signup-form input[type="email"]:focus-visible {
    border-color: var(--signal);
}

.signup-form button {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--paper);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    min-height: 48px;
    padding: 0 22px;
}

.signup-form button:hover,
.signup-form button:focus-visible {
    background: var(--signal);
    border-color: var(--signal);
}

.signup-state {
    font-size: 14px;
    line-height: 1.5;
    min-height: 1.5em;
}

.signup-error {
    color: #b3261e;
}

.signup-success {
    color: var(--signal);
}

/* Ghost pose `loading`, `success` ou `error` sur le formulaire : les trois
   messages sont dans le DOM et un seul est visible à la fois. */
.signup-busy,
.signup-done,
.signup-error {
    display: none;
}

form.loading .signup-busy,
form.success .signup-done,
form.error .signup-error {
    display: block;
}

form.loading .signup-idle,
form.success .signup-idle,
form.error .signup-idle {
    display: none;
}

form.loading button {
    cursor: progress;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--rule);
    padding-bottom: clamp(28px, 3.4vw, 42px);
    padding-top: clamp(28px, 3.4vw, 42px);
    row-gap: 22px;
}

.footer-mark,
.footer-nav,
.footer-legal {
    grid-column: 1 / -1;
}

.footer-legal {
    color: var(--ink-2);
    font-size: 13px;
}

.footer-nav .nav-list {
    gap: 10px 26px;
}

.footer-nav .nav-list a {
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Composition asymétrique — au-delà de 52rem
   -------------------------------------------------------------------------- */

@media (min-width: 52rem) {
    .hero-text {
        grid-column: 1 / span 6;
    }

    /* La grammaire occupe la moitié droite du premier écran. Sans elle, cette
       moitié restait vide : un titre seul face à du blanc se lit comme une
       maquette inachevée, pas comme une composition. */
    .hero-grammar {
        align-self: center;
        grid-column: 8 / span 5;
        margin-top: 0;
    }

    .hero-figure {
        grid-column: 8 / span 5;
        padding-top: clamp(8px, 2vw, 34px);
    }

    .latest-marker {
        grid-column: 1 / span 2;
    }

    /* Sans schéma, le texte occupe la largeur : aucune colonne vide. */
    .latest-body {
        grid-column: 3 / span 8;
    }

    .latest-has-figure .latest-body {
        grid-column: 3 / span 5;
    }

    .latest:not(.latest-has-figure) h2 {
        font-size: clamp(28px, 3.4vw, 44px);
        max-width: 20em;
    }

    .latest:not(.latest-has-figure) .latest-lede {
        max-width: 44em;
    }

    /* Deux sections empilées ne cumulent pas leurs respirations. */
    .latest + .protocol,
    .protocol + .book,
    .book + .author-block {
        padding-top: clamp(40px, 5.5vw, 88px);
    }

    .latest-figure {
        grid-column: 9 / span 4;
    }

    .book-precursors-intro,
    .start-here-intro,
    .cycle-intro,
    .talks-intro {
        grid-column: 1 / span 4;
    }

    .book-precursors-list,
    .start-here-list,
    .cycle-list,
    .talks-list {
        grid-column: 6 / span 7;
    }

    /* L'objet intellectuel : le texte tient la marge, le schéma prend le reste
       et va jusqu'au bord droit. Rien ne flotte. */
    .artifact-intro {
        grid-column: 1 / span 4;
    }

    .artifact-figure {
        grid-column: 6 / span 7;
    }

    .index-link {
        grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    }

    .index-side {
        display: grid;
        gap: 4px;
    }

    .book-body {
        grid-column: 1 / span 7;
    }

    .book-state {
        grid-column: 9 / span 4;
    }

    .author-portrait {
        grid-column: 1 / span 3;
    }

    /* Avec portrait : le texte va jusqu'au bord droit. Le laisser s'arrêter
       colonne 11 rouvrirait la colonne vide que la règle suivante supprime
       dans le cas sans portrait. */
    .author-body {
        grid-column: 5 / span 8;
    }

    /* Sans portrait, rien n'occupe les premières colonnes : le bloc revient
       sur l'axe de lecture commun plutôt que de flotter au centre. Même
       gabarit que .book-body, la section qui le précède. */
    .author-block:not(.has-portrait) .author-body {
        grid-column: 1 / span 7;
    }

    .page-head-main {
        grid-column: 1 / span 7;
    }

    .page-head-rail {
        border-top: 0;
        grid-column: 9 / span 4;
        margin-top: 0;
        padding-top: 0.6em;
    }

    .page-head-portrait {
        grid-column: 10 / span 3;
        max-width: none;
    }

    .article-figure > .figure {
        grid-column: 1 / span 9;
    }

    /* Le corps partage l'axe de lecture du titre et du chapô : un seul bord
       gauche par page. L'asymétrie est portée par les blocs, pas par un
       décalage du texte courant. */
    .prose > * {
        grid-column: 1 / span 7;
    }

    .prose > .kg-width-wide {
        grid-column: 1 / span 9;
    }

    .prose > .kg-width-full {
        grid-column: 1 / span 12;
    }

    .signup-copy {
        grid-column: 1 / span 5;
    }

    .signup-form {
        grid-column: 7 / span 5;
    }

    .footer-mark {
        grid-column: 1 / span 3;
    }

    /* Sept colonnes : les six liens tiennent sur une ligne au lieu de
       renvoyer « Confidentialité » seule à la ligne suivante. */
    .footer-nav {
        grid-column: 4 / span 7;
    }

    .footer-legal {
        grid-column: 11 / span 2;
        justify-self: end;
        text-align: right;
    }
}

@media (min-width: 90rem) {
    .prose > * {
        grid-column: 2 / span 7;
    }

    .prose > .kg-width-wide {
        grid-column: 1 / span 8;
    }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 52rem) {
    body {
        font-size: 16px;
    }

    .hero h1,
    .page-head h1,
    .latest h2,
    .book h2,
    .protocol h2,
    .author-block h2 {
        text-wrap: pretty;
    }

    .index-link {
        gap: 8px;
    }
}

@media print {
    .site-header,
    .site-footer,
    .signup,
    .skip-link {
        display: none;
    }
}

/* ==========================================================================
   V4 — la dernière édition, le suivi, la scène
   Trois blocs ajoutés par la refonte d'autorité. Ils réutilisent la grille
   éditoriale existante ; aucune nouvelle famille de composants.
   ========================================================================== */

/* --- Dernière édition : rail de métadonnées à gauche, texte à droite.
       Le rail reprend la logique de la marge annotée retenue en V3. */
.latest-side,
.latest-body {
    grid-column: 1 / -1;
}

.latest-side .meta + .meta {
    margin-top: 2px;
}

.latest-thesis {
    color: var(--ink-2);
    line-height: 1.65;
    margin-top: 14px;
    max-width: 36em;
}

.latest h2 a {
    color: inherit;
}

@media (min-width: 52rem) {
    .latest-side {
        grid-column: 1 / span 3;
        border-top: 2px solid var(--ink);
        padding-top: 12px;
    }

    .latest-body {
        grid-column: 4 / -1;
    }

    .latest h2 {
        margin-top: 0;
    }
}

/* --- Suivre : une action, et la vérité sur ce qu'elle fait. */
.follow {
    border-top: 1px solid var(--rule-strong);
    padding-top: var(--section);
    padding-bottom: var(--section);
    row-gap: clamp(20px, 2.6vw, 32px);
}

.follow-copy,
.follow-action {
    grid-column: 1 / -1;
}

.follow h2 {
    font-family: var(--serif);
    font-size: clamp(23px, 2.4vw, 31px);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-top: 10px;
}

.follow-copy p {
    color: var(--ink-2);
    line-height: 1.65;
    margin-top: 14px;
    max-width: 34em;
}

.follow-note {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.6;
    margin-top: 16px;
    max-width: 32em;
}

@media (min-width: 52rem) {
    .follow-copy {
        grid-column: 1 / span 6;
    }

    .follow-action {
        grid-column: 8 / -1;
    }
}

/* --- Interventions : la photographie porte la preuve, le texte reste sobre. */
.talks-figure {
    grid-column: 1 / -1;
    margin: 0;
}

.talks-figure img {
    display: block;
    height: auto;
    width: 100%;
}

.talks-figure figcaption {
    color: var(--ink-2);
    font-size: 14px;
    letter-spacing: 0.01em;
    margin-top: 10px;
}

@media (min-width: 52rem) {
    .talks-intro {
        grid-column: 1 / span 4;
    }

    .talks-figure {
        grid-column: 6 / -1;
    }
}

/* --- La couverture : une image pleine largeur, traitée comme un objet
       imprimé. Elle a une légende et un cadre de papier, pas un « hero ». */
.cover {
    margin: 0 0 var(--section);
    padding-left: var(--edge);
    padding-right: var(--edge);
}

.cover img {
    background: var(--paper-note);
    display: block;
    height: auto;
    width: 100%;
}

.cover figcaption {
    align-items: baseline;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
    padding-top: 8px;
}

/* --- Newsreader a une taille optique variable : on la laisse travailler.
       Sans cela, les grands titres gardent le dessin d'un corps de texte. */
h1, h2, h3, .prose, .page-head h1, .latest h2, .hero h1 {
    font-optical-sizing: auto;
}

.hero h1,
.page-head h1,
.latest h2,
.book h2,
.follow h2 {
    font-weight: 500;
}

/* --- URL nues dans le corps.
       JP colle parfois l'adresse complète d'une source comme libellé de lien.
       Une chaîne de 80 caractères sans espace ne peut pas se replier : sur un
       téléphone de 320 px, elle poussait toute la page vers la droite.
       On autorise la coupure À L'INTÉRIEUR de ces chaînes, et seulement là. */
.prose {
    overflow-wrap: break-word;
}

.prose a {
    overflow-wrap: anywhere;
}

/* --- Suite de lecture : trois portes à la fin d'un texte, jamais un cul-de-sac. */
.suite {
    border-top: 1px solid var(--rule-strong);
    padding-bottom: var(--section);
    padding-top: clamp(20px, 2.4vw, 28px);
    row-gap: clamp(18px, 2vw, 26px);
}

.suite-item {
    color: inherit;
    display: block;
    grid-column: 1 / -1;
    text-decoration: none;
}

.suite-titre {
    display: block;
    font-family: var(--serif);
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.24;
    margin-top: 6px;
    max-width: 22em;
}

.suite-item:hover .suite-titre,
.suite-item:focus-visible .suite-titre {
    color: var(--signal);
}

.suite-item .meta {
    display: block;
    margin-top: 4px;
}

@media (min-width: 52rem) {
    .suite-prec { grid-column: 1 / span 4; }
    .suite-suiv { grid-column: 5 / span 4; }
    .suite-tout { grid-column: 9 / -1; }
}

/* --- Le lien du flux, discret mais présent dans le pied de page. */
.footer-feed {
    color: inherit;
}

/* --- Les schémas d'auteur sont exportés sur fond blanc par la plateforme
       d'origine. Posés tels quels sur le papier chaud du site, ils y
       découpent un rectangle blanc. La multiplication fait disparaître le
       blanc dans le papier sans toucher aux traits ni aux couleurs. */
.figure-frame img,
.schema-card img {
    mix-blend-mode: multiply;
}

/* --- Légendes de figure : trois informations, trois lignes distinctes.
       Collées, elles se lisaient comme un seul mot. */
.figure-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.schema-card figcaption {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.schema-card figcaption > * {
    display: block;
}

/* --- Sujets d'intervention : une liste éditoriale, pas un catalogue d'offres. */
.talks-sujets {
    list-style: none;
    margin-top: clamp(18px, 2vw, 26px);
}

.talks-sujets li + li {
    margin-top: 14px;
}

.talks-sujets a {
    display: block;
    font-family: var(--serif);
    font-size: clamp(16px, 1.4vw, 19px);
    font-weight: 500;
    line-height: 1.28;
    text-decoration: none;
}

.talks-sujets a:hover,
.talks-sujets a:focus-visible {
    color: var(--signal);
}

.talks-sujets .meta {
    display: block;
    margin-top: 3px;
}

.talks-contact {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.6;
    margin-top: clamp(20px, 2.4vw, 28px);
    max-width: 34em;
}

/* ==========================================================================
   Corrections de composition — round 1 des juges
   ========================================================================== */

/* --- Le contrôle des orphelines était enfermé dans une requête `max-width`.
       Il s'appliquait donc sur téléphone, où les lignes sont courtes, et pas
       sur grand écran, où les titres cassent réellement mal. On l'applique
       partout, sans condition de largeur. */
.hero h1,
.page-head h1,
.latest h2,
.latest-thesis,
.book h2,
.follow h2,
.author-block h2,
.index-title,
.index-thesis,
.suite-titre,
.prose h2,
.prose h3 {
    text-wrap: pretty;
}

/* --- Les colonnes de droite ne sont plus du vide : le rail d'un article y
       tient les repères de lecture, et l'archive y respire au lieu de laisser
       courir des filets jusqu'au bord sur une colonne étranglée. */
@media (min-width: 90rem) {
    .prose > .kg-width-wide,
    .prose > .schema-card {
        grid-column: 2 / span 9;
    }

    .index-row .index-link {
        max-width: 74rem;
    }
}

/* --- Un texte de vingt mille pixels a besoin d'un retour au début. */
.suite-haut {
    grid-column: 1 / -1;
    margin-top: 6px;
}

.suite-haut a {
    color: var(--ink-2);
    font-size: 14px;
}

/* --- Note de source de l'auteur. Le texte est celui d'origine ; seul son
       traitement dit « ceci est la note », pour que l'appel de note cesse
       de paraître orphelin. Le filet qui la précède est posé par le
       constructeur : Ghost conserve les filets, pas les classes. */
.prose > hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.4em 0 0;
    width: 8rem;
}

.prose > hr + p {
    color: var(--ink-2);
    font-size: 0.87em;
    line-height: 1.55;
    margin-top: 0.9em;
}

/* ==========================================================================
   Figures de schéma — telles que GHOST les rend réellement

   Constat mesuré en production : à l'import en `source=html`, Ghost convertit
   le HTML en Lexical puis le regénère, et **perd la classe du `<figure>`**.
   Les règles écrites sur `.schema-card` ne s'appliquaient donc jamais, et la
   légende, la source et le lien pleine résolution se suivaient en ligne :
   « …surface exposée à l'IASource : modèle auteur… ».

   Les classes des ENFANTS, elles, survivent. On s'appuie donc sur elles.
   ========================================================================== */

.prose figcaption .schema-titre,
.prose figcaption .schema-legende,
.prose figcaption .schema-source,
.prose figcaption .schema-plein,
.prose figcaption .schema-resume {
    display: block;
}

.prose figcaption .schema-titre {
    margin-top: 12px;
}

.prose figcaption .schema-legende,
.prose figcaption .schema-source {
    margin-top: 4px;
}

.prose figcaption .schema-plein {
    display: inline-flex;
    margin-top: 10px;
}

.prose figcaption .schema-resume {
    margin-top: 14px;
}

/* Un schéma dense — un tableau exporté en image — devient un pâté gris quand
   on l'écrase à 335 px. Sur petit écran, la figure devient donc défilable
   horizontalement et l'image garde une largeur lisible, au lieu d'être
   réduite au point d'être inutilisable. Le lien pleine résolution reste. */
@media (max-width: 40rem) {
    /* Le conteneur de défilement doit être la FIGURE elle-même : Ghost
       supprime les classes du <figure> et du lien à l'import, donc les cibler
       ne fonctionnait pas — l'image débordait la page au lieu de défiler. */
    .prose figure:has(.schema-source) {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .prose figure:has(.schema-source) img {
        max-width: none;
        min-width: 32rem;
        width: 32rem;
    }

    .prose figcaption .schema-source::after {
        color: var(--ink-2);
        content: " — faites glisser le schéma, ou ouvrez-le en pleine résolution.";
        font-style: italic;
    }
}

/* --- Les figures venues des publications d'origine sont des pièces d'archive,
       pas des planches du système visuel du site. Le libellé le dit, et le
       fond de papier absorbe leur blanc de plateforme. */
.prose figcaption .schema-origine {
    color: var(--ink-2);
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.08em;
    margin-top: 12px;
    text-transform: uppercase;
}

.prose figcaption .schema-origine + .schema-titre {
    margin-top: 6px;
}

/* Le blanc de plateforme se fond dans le papier : les traits et les couleurs
   de la figure restent intacts, seul le fond cesse de découper un rectangle. */
.prose figure img,
.figure-frame img {
    mix-blend-mode: multiply;
}

/* --- Le flux et LinkedIn à parité : deux voies, deux colonnes, même poids. */
.follow-voie {
    grid-column: 1 / -1;
}

.follow-voie .folio {
    margin-bottom: 8px;
}

.follow-url {
    display: block;
    font-family: var(--sans);
    font-size: 13px;
    margin: 6px 0;
    overflow-wrap: anywhere;
    word-break: break-all;
}

@media (min-width: 52rem) {
    .follow-copy { grid-column: 1 / span 4; }
    .follow-voie:nth-of-type(2) { grid-column: 6 / span 3; }
    .follow-voie:nth-of-type(3) { grid-column: 10 / span 3; }
}

/* --- Le marqueur du cycle d'origine, dans les listes. */
.index-cycle {
    color: var(--ink-2);
    display: block;
    margin-top: 3px;
}

/* --- Les filets de l'index couraient jusqu'au bord alors que le texte
       s'arrêtait 550 px plus tôt : ce n'était pas de la tension, c'était une
       colonne manquante. Le filet s'arrête où le contenu s'arrête. */
@media (min-width: 80rem) {
    .index-row {
        max-width: 76rem;
    }
}