/* ════════════════════════════════
   VULTA — Thèmes d'ebook
   Ce fichier est chargé À L'IDENTIQUE par l'éditeur et par le moteur d'export.
   C'est la seule façon d'avoir un aperçu fidèle : une seule source de vérité.

   Un thème = un jeu de variables + les règles de titre.
   Un gabarit de couverture = un fond + une disposition.
   Les deux se combinent librement, avec la couleur d'accent choisie.
════════════════════════════════ */

.vk-doc {
    --page-bg: #FFFFFF;
    --page-text: #16131A;
    --page-muted: #5C5563;
    --page-rule: rgba(0, 0, 0, 0.10);
    --page-accent: #FF1F7A;

    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-size: 11.5pt;
    --doc-leading: 1.62;

    background: var(--page-bg);
    color: var(--page-text);
    font-family: var(--doc-body);
    font-size: var(--doc-size);
    line-height: var(--doc-leading);
    text-rendering: optimizeLegibility;
}

/* ── Corps de texte ── */
.vk-doc p {
    margin: 0 0 0.85em;
    text-align: justify;
    hyphens: auto;
}
.vk-doc p:first-of-type { text-indent: 0; }
.vk-doc > p + p { text-indent: 1.2em; }

/* Le premier bloc démarre exactement sur la marge haute de la page, à
   l'écran comme à l'impression. Sa marge propre, sinon, s'échappe du conteneur
   et déplace l'origine de tout le découpage : les feuilles ne tomberaient plus
   au même endroit que dans le fichier exporté. */
.vk-doc > *:first-child,
.vk-doc .ProseMirror > *:first-child { margin-top: 0; }

/* ── Ouverture de chapitre ──
   Un chapitre commence toujours en haut d'une page ; c'est donc la page la
   plus regardée du livre, et celle qui filme le mieux. Le numéro vient d'un
   compteur CSS plutôt que du texte : il se renumérote tout seul si un chapitre
   est ajouté ou supprimé dans l'éditeur, et il ne pollue pas le contenu qu'on
   exporte. La descente de titre — l'espace au-dessus — est ce qui distingue
   une page de livre d'une page de traitement de texte. */
.vk-doc { counter-reset: vk-chapter; }

.vk-doc :is(h1, .vk-title) {
    font-family: var(--doc-display);
    color: var(--page-text);
    margin: 0 0 1.1em;
    padding-top: 1.2em;
    line-height: 1.1;
}

.vk-doc :is(h1, .vk-title)::before {
    counter-increment: vk-chapter;
    content: counter(vk-chapter, decimal-leading-zero);
    display: block;
    margin-bottom: 0.5em;
    font-size: 0.62em;
    letter-spacing: .16em;
    line-height: 1;
    color: var(--page-accent);
    font-variant-numeric: tabular-nums;
}
.vk-doc h2 {
    font-family: var(--doc-display);
    font-size: 1.16em;
    font-weight: 700;
    margin: 1.9em 0 0.6em;
    line-height: 1.25;
    /* Le document a sa propre couleur de texte : il ne doit jamais dépendre de
       celle de l'interface qui l'entoure. */
    color: var(--page-text);
}
.vk-doc h1 + p { text-indent: 0; }
.vk-doc h2 + p { text-indent: 0; }

.vk-doc blockquote {
    margin: 1.6em 0;
    padding-left: 1.1em;
    border-left: 3px solid var(--page-accent);
    color: var(--page-muted);
    font-style: italic;
}
.vk-doc .callout {
    margin: 1.6em 0;
    padding: 1em 1.2em;
    background: color-mix(in srgb, var(--page-accent) 8%, transparent);
    border-radius: 6px;
    font-size: 0.95em;
}
.vk-doc hr { border: none; border-top: 1px solid var(--page-rule); margin: 2em 0; }
.vk-doc ul, .vk-doc ol { margin: 0 0 0.9em 1.3em; }
.vk-doc li { margin-bottom: 0.35em; }
.vk-doc strong { font-weight: 700; }

/* Chaque chapitre commence en haut d'une page à l'impression. */
@media print {
    .vk-doc h1 { break-before: page; page-break-before: always; }
    .vk-doc h1:first-child { break-before: avoid; page-break-before: avoid; }
    .vk-doc h2, .vk-doc h1 { break-after: avoid; page-break-after: avoid; }
    .vk-doc p { orphans: 3; widows: 3; }
}

/* ════════════════════════════════
   THÈMES — la mise en page intérieure

   Un thème fixe le papier, l'encre, les deux familles de caractères et le
   traitement des titres. Ce qui distingue un livre d'un document, c'est moins
   la couleur que le rythme : la descente de titre, l'interlignage, la façon
   dont un chapitre s'ouvre. Chaque thème a donc un parti pris là-dessus, pas
   seulement une palette.
════════════════════════════════ */

/* ═══ BASALTE ═══
   Titres larges et affirmés, corps sérif, page minérale. Le thème par défaut :
   contemporain sans être daté. */
.vk-doc[data-theme="basalte"],
[data-theme="basalte"] {
    --page-bg: #FBFAFA;
    --page-text: #14121A;
    --page-muted: #57515E;
    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
}
.vk-doc[data-theme="basalte"] :is(h1, .vk-title) {
    font-size: 2.35em;
    font-weight: 800;
    font-stretch: 118%;
    letter-spacing: -0.025em;
}
.vk-doc[data-theme="basalte"] :is(h1, .vk-title)::after {
    content: '';
    display: block;
    width: 58px;
    height: 4px;
    margin-top: 0.42em;
    background: var(--page-accent);
    border-radius: 2px;
}
.vk-doc[data-theme="basalte"] h2 { font-stretch: 108%; letter-spacing: -0.01em; }

/* ═══ PIERRE PONCE ═══
   Éditorial, page crème, display sérif à contraste, titres centrés. */
.vk-doc[data-theme="ponce"],
[data-theme="ponce"] {
    --page-bg: #FAF6F0;
    --page-text: #23201C;
    --page-muted: #6B6459;
    --page-rule: rgba(35, 32, 28, 0.12);
    --doc-display: 'Fraunces', Georgia, serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
}
.vk-doc[data-theme="ponce"] :is(h1, .vk-title) {
    font-size: 2.5em;
    font-weight: 600;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    letter-spacing: -0.015em;
    text-align: center;
}
.vk-doc[data-theme="ponce"] :is(h1, .vk-title)::after {
    content: '❦';
    display: block;
    margin-top: 0.3em;
    font-size: 0.38em;
    color: var(--page-accent);
    font-family: Georgia, serif;
}
.vk-doc[data-theme="ponce"] h2 { font-weight: 600; font-style: italic; }

/* ═══ BRAISE ═══
   Magazine : titres en capitales serrées, filet d'accent, sous-titres colorés. */
.vk-doc[data-theme="braise"],
[data-theme="braise"] {
    --page-bg: #FFFFFF;
    --page-text: #100E12;
    --page-muted: #5A5460;
    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
}
.vk-doc[data-theme="braise"] :is(h1, .vk-title) {
    font-size: 1.95em;
    font-weight: 900;
    font-stretch: 95%;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    padding-bottom: 0.42em;
    border-bottom: 3px solid var(--page-accent);
}
.vk-doc[data-theme="braise"] h2 {
    text-transform: uppercase;
    font-size: 0.94em;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--page-accent);
}

/* ═══ MANUSCRIT ═══
   Le livre classique : tout en sérif, interlignage généreux, et une lettrine
   qui ouvre chaque chapitre. La lettrine est le geste le plus reconnaissable de
   la typographie de labeur — elle dit « livre » avant qu'on ait lu un mot. */
.vk-doc[data-theme="manuscrit"],
[data-theme="manuscrit"] {
    --page-bg: #FCFAF6;
    --page-text: #1E1B16;
    --page-muted: #6A6154;
    --page-rule: rgba(30, 27, 22, 0.14);
    --doc-display: 'Fraunces', Georgia, serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-leading: 1.72;
}
.vk-doc[data-theme="manuscrit"] :is(h1, .vk-title) {
    font-size: 1.9em;
    font-weight: 500;
    font-variation-settings: 'SOFT' 20;
    letter-spacing: 0.01em;
    text-align: center;
}
.vk-doc[data-theme="manuscrit"] :is(h1, .vk-title)::after {
    content: '';
    display: block;
    width: 34%;
    height: 1px;
    margin: 0.7em auto 0;
    background: var(--page-rule);
}
.vk-doc[data-theme="manuscrit"] h2 {
    font-weight: 500;
    font-size: 1.05em;
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--page-muted);
}
.vk-doc[data-theme="manuscrit"] :is(h1, .vk-title) + p::first-letter {
    float: left;
    font-family: var(--doc-display);
    font-size: 3.1em;
    line-height: 0.84;
    padding: 0.04em 0.09em 0 0;
    color: var(--page-accent);
}

/* ═══ REVUE ═══
   L'essai imprimé : corps un peu plus petit, colonne serrée, sous-titres en
   petites capitales. Fait pour être lu longtemps. */
.vk-doc[data-theme="revue"],
[data-theme="revue"] {
    --page-bg: #F7F6F3;
    --page-text: #1A1A1C;
    --page-muted: #63636A;
    --page-rule: rgba(26, 26, 28, 0.13);
    --doc-display: 'Instrument Sans', 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-size: 11pt;
    --doc-leading: 1.68;
}
.vk-doc[data-theme="revue"] :is(h1, .vk-title) {
    font-size: 1.55em;
    font-weight: 700;
    letter-spacing: -0.008em;
    max-width: 88%;
}
.vk-doc[data-theme="revue"] :is(h1, .vk-title)::before {
    letter-spacing: .28em;
    font-size: 0.52em;
    opacity: .75;
}
.vk-doc[data-theme="revue"] h2 {
    font-family: var(--doc-body);
    font-weight: 600;
    font-size: 0.98em;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
}

/* ═══ SIGNAL ═══
   Beaucoup d'air : titres énormes, interlignage large, peu de texte par page.
   Le thème des guides qu'on parcourt plus qu'on ne lit. */
.vk-doc[data-theme="signal"],
[data-theme="signal"] {
    --page-bg: #FFFFFF;
    --page-text: #0F0E13;
    --page-muted: #5E5A66;
    --page-rule: rgba(15, 14, 19, 0.10);
    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Instrument Sans', 'Archivo', sans-serif;
    --doc-size: 11pt;
    --doc-leading: 1.78;
}
.vk-doc[data-theme="signal"] p { text-align: left; hyphens: none; }
.vk-doc[data-theme="signal"] > p + p { text-indent: 0; }
.vk-doc[data-theme="signal"] :is(h1, .vk-title) {
    font-size: 2.9em;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -0.035em;
    line-height: 1.02;
}
.vk-doc[data-theme="signal"] :is(h1, .vk-title)::before {
    font-size: 0.34em;
    letter-spacing: .3em;
    margin-bottom: 1.1em;
}
.vk-doc[data-theme="signal"] h2 {
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: -0.005em;
    margin-top: 2.2em;
}

/* ═══ BLOC ═══
   L'ouverture de chapitre est un pavé d'encre pleine largeur, numéro et titre
   réservés en blanc dedans. C'est le contraste d'un thème sombre sans papier
   sombre — impossible ici, le moteur d'impression ne peignant pas les marges
   de la feuille. Et c'est la page qui filme le mieux. */
.vk-doc[data-theme="bloc"],
[data-theme="bloc"] {
    --page-bg: #FFFFFF;
    --page-text: #121016;
    --page-muted: #5C5866;
    --page-rule: rgba(18, 16, 22, 0.13);
    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-leading: 1.64;
}
.vk-doc[data-theme="bloc"] :is(h1, .vk-title) {
    font-size: 1.85em;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -0.026em;
    color: #FFFFFF;
    background: #121016;
    padding: 0.62em 0.66em 0.7em;
    margin-left: -0.66em;
    margin-right: -0.66em;
}
.vk-doc[data-theme="bloc"] :is(h1, .vk-title)::before {
    color: var(--page-accent);
    font-size: 0.5em;
    letter-spacing: .22em;
    margin-bottom: 0.7em;
}
.vk-doc[data-theme="bloc"] h2 {
    font-weight: 800;
    font-size: 1.02em;
    letter-spacing: -0.005em;
    padding-bottom: 0.32em;
    border-bottom: 2px solid var(--page-accent);
    display: inline-block;
}

/* ═══ CARNET ═══
   Un cahier de travail : filets fins entre les sections, sous-titres numérotés
   en couleur, corps compact. Pour les guides pratiques et les méthodes. */
.vk-doc[data-theme="carnet"],
[data-theme="carnet"] {
    --page-bg: #FAFAF8;
    --page-text: #1C1C1A;
    --page-muted: #666660;
    --page-rule: rgba(28, 28, 26, 0.15);
    --doc-display: 'Instrument Sans', 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-leading: 1.6;
}
.vk-doc[data-theme="carnet"] :is(h1, .vk-title) {
    font-size: 1.75em;
    font-weight: 700;
    letter-spacing: -0.012em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--page-rule);
}
.vk-doc[data-theme="carnet"] :is(h1, .vk-title)::before {
    display: inline-block;
    margin: 0 0.7em 0 0;
    padding: 0.28em 0.5em;
    font-size: 0.44em;
    letter-spacing: .12em;
    color: #FFF;
    background: var(--page-accent);
    border-radius: 3px;
    vertical-align: 0.35em;
}
.vk-doc[data-theme="carnet"] h2 {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding-left: 0.7em;
    border-left: 3px solid var(--page-accent);
}


/* ═══ ARDOISE ═══
   Papier gris minéral, titre en réserve claire sur une barre d'encre étroite.
   Le contraste vient du fond, pas de la couleur. */
.vk-doc[data-theme="ardoise"],
[data-theme="ardoise"] {
    --page-bg: #EDECE9;
    --page-text: #1A1A1D;
    --page-muted: #63636A;
    --page-rule: rgba(26, 26, 29, 0.16);
    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
}
.vk-doc[data-theme="ardoise"] :is(h1, .vk-title) {
    font-size: 1.7em;
    font-weight: 800;
    font-stretch: 106%;
    letter-spacing: -0.02em;
    border-left: 6px solid var(--page-accent);
    padding-left: 0.5em;
}
.vk-doc[data-theme="ardoise"] h2 { font-weight: 700; color: var(--page-muted); }

/* ═══ AURORE ═══
   Papier très clair et titre en dégradé de l'accent vers l'encre. Le seul thème
   où le titre lui-même porte la couleur. */
.vk-doc[data-theme="aurore"],
[data-theme="aurore"] {
    --page-bg: #FFFDFC;
    --page-text: #1B1620;
    --page-muted: #6B6472;
    --page-rule: rgba(27, 22, 32, 0.11);
    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-leading: 1.66;
}
.vk-doc[data-theme="aurore"] :is(h1, .vk-title) {
    font-size: 2.2em;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(96deg, var(--page-accent), var(--page-text) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vk-doc[data-theme="aurore"] h2 { color: var(--page-accent); font-weight: 700; }

/* ═══ COLONNE ═══
   Le titre à gauche, en petit, et le texte qui commence tout de suite : la mise
   en page des rapports et des notes de travail. */
.vk-doc[data-theme="colonne"],
[data-theme="colonne"] {
    --page-bg: #FCFCFB;
    --page-text: #17171A;
    --page-muted: #666670;
    --page-rule: rgba(23, 23, 26, 0.13);
    --doc-display: 'Instrument Sans', 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-size: 11pt;
}
.vk-doc[data-theme="colonne"] :is(h1, .vk-title) {
    font-size: 1.32em;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    padding-bottom: 0.7em;
    border-bottom: 1px solid var(--page-rule);
}
.vk-doc[data-theme="colonne"] :is(h1, .vk-title)::before {
    color: var(--page-text);
    opacity: .45;
}
.vk-doc[data-theme="colonne"] h2 {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--page-accent);
}

/* ═══ FLORAL ═══
   Sérif à contraste, titres centrés, filets doubles. Le thème des textes
   personnels — mémoires, récits, correspondances. */
.vk-doc[data-theme="floral"],
[data-theme="floral"] {
    --page-bg: #FDFBF7;
    --page-text: #24201B;
    --page-muted: #736A5D;
    --page-rule: rgba(36, 32, 27, 0.16);
    --doc-display: 'Fraunces', Georgia, serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-leading: 1.74;
}
.vk-doc[data-theme="floral"] :is(h1, .vk-title) {
    font-size: 1.8em;
    font-weight: 400;
    font-variation-settings: 'SOFT' 60, 'WONK' 1;
    font-style: italic;
    text-align: center;
    border-top: 3px double var(--page-rule);
    border-bottom: 3px double var(--page-rule);
    padding: 0.5em 0 0.55em;
}
.vk-doc[data-theme="floral"] h2 {
    text-align: center;
    font-style: italic;
    font-weight: 400;
    color: var(--page-accent);
}

/* ═══ MINUIT ═══
   Encre profonde sur papier très clair, titres en capitales espacées. Sobre au
   point d'être formel — pour les guides sérieux. */
.vk-doc[data-theme="minuit"],
[data-theme="minuit"] {
    --page-bg: #F9F9FA;
    --page-text: #0C0C10;
    --page-muted: #5A5A63;
    --page-rule: rgba(12, 12, 16, 0.14);
    --doc-display: 'Instrument Sans', 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
}
.vk-doc[data-theme="minuit"] :is(h1, .vk-title) {
    font-size: 1.28em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-align: center;
}
.vk-doc[data-theme="minuit"] :is(h1, .vk-title)::after {
    content: '';
    display: block;
    width: 26px; height: 2px;
    margin: 0.9em auto 0;
    background: var(--page-accent);
}
.vk-doc[data-theme="minuit"] h2 {
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.86em;
}

/* ═══ RELIEF ═══
   Le numéro de chapitre en très grand, en filigrane derrière le titre. Le
   chiffre devient l'ornement. */
.vk-doc[data-theme="relief"],
[data-theme="relief"] {
    --page-bg: #FFFFFF;
    --page-text: #131118;
    --page-muted: #625E6B;
    --page-rule: rgba(19, 17, 24, 0.11);
    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
}
.vk-doc[data-theme="relief"] :is(h1, .vk-title) {
    font-size: 1.9em;
    font-weight: 800;
    font-stretch: 108%;
    letter-spacing: -0.028em;
}
.vk-doc[data-theme="relief"] :is(h1, .vk-title)::before {
    font-size: 2.3em;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.8;
    margin-bottom: 0.1em;
    color: color-mix(in srgb, var(--page-accent) 26%, transparent);
}
.vk-doc[data-theme="relief"] h2 {
    font-weight: 800;
    color: var(--page-accent);
    font-size: 1em;
}

/* ═══ TERRE ═══
   Papier chaud, encre brune, titre en bas de casse serré. Le thème le plus
   doux, pour les sujets qui n'ont pas besoin d'autorité. */
.vk-doc[data-theme="terre"],
[data-theme="terre"] {
    --page-bg: #F7F1E8;
    --page-text: #2A2118;
    --page-muted: #7A6B58;
    --page-rule: rgba(42, 33, 24, 0.17);
    --doc-display: 'Fraunces', Georgia, serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-leading: 1.7;
}
.vk-doc[data-theme="terre"] :is(h1, .vk-title) {
    font-size: 2em;
    font-weight: 600;
    font-variation-settings: 'SOFT' 80;
    letter-spacing: -0.018em;
}
.vk-doc[data-theme="terre"] :is(h1, .vk-title)::after {
    content: '';
    display: block;
    width: 26%; height: 6px;
    margin-top: 0.5em;
    border-radius: 3px;
    background: var(--page-accent);
    opacity: .55;
}
.vk-doc[data-theme="terre"] h2 { font-weight: 600; font-style: italic; }

/* ═══ TRAIT ═══
   Tout est réglé par des filets : au-dessus du titre, sous les sous-titres,
   entre les sections. Le thème le plus structuré. */
.vk-doc[data-theme="trait"],
[data-theme="trait"] {
    --page-bg: #FBFBFA;
    --page-text: #16161A;
    --page-muted: #5F5F68;
    --page-rule: rgba(22, 22, 26, 0.2);
    --doc-display: 'Instrument Sans', 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-leading: 1.62;
}
.vk-doc[data-theme="trait"] :is(h1, .vk-title) {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-top: 4px solid var(--page-text);
    padding-top: 0.5em;
}
.vk-doc[data-theme="trait"] :is(h1, .vk-title)::before {
    color: var(--page-accent);
    font-size: 0.5em;
    letter-spacing: .2em;
}
.vk-doc[data-theme="trait"] h2 {
    font-weight: 700;
    font-size: 0.96em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--page-rule);
}

/* ════════════════════════════════
   VULTA — Thèmes d'ebook
   Ce fichier est chargé À L'IDENTIQUE par l'éditeur et par le moteur d'export.
   C'est la seule façon d'avoir un aperçu fidèle : une seule source de vérité.

   Un thème = un jeu de variables + les règles de titre.
   Un gabarit de couverture = un fond + une disposition.
   Les deux se combinent librement, avec la couleur d'accent choisie.
════════════════════════════════ */

.vk-doc {
    --page-bg: #FFFFFF;
    --page-text: #16131A;
    --page-muted: #5C5563;
    --page-rule: rgba(0, 0, 0, 0.10);
    --page-accent: #FF1F7A;

    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
    --doc-size: 11.5pt;
    --doc-leading: 1.62;

    background: var(--page-bg);
    color: var(--page-text);
    font-family: var(--doc-body);
    font-size: var(--doc-size);
    line-height: var(--doc-leading);
    text-rendering: optimizeLegibility;
}

/* ── Corps de texte ── */
.vk-doc p {
    margin: 0 0 0.85em;
    text-align: justify;
    hyphens: auto;
}
.vk-doc p:first-of-type { text-indent: 0; }
.vk-doc > p + p { text-indent: 1.2em; }

/* Le premier bloc démarre exactement sur la marge haute de la page, à
   l'écran comme à l'impression. Sa marge propre, sinon, s'échappe du conteneur
   et déplace l'origine de tout le découpage : les feuilles ne tomberaient plus
   au même endroit que dans le fichier exporté. */
.vk-doc > *:first-child,
.vk-doc .ProseMirror > *:first-child { margin-top: 0; }

/* ── Ouverture de chapitre ──
   Un chapitre commence toujours en haut d'une page ; c'est donc la page la
   plus regardée du livre, et celle qui filme le mieux. Le numéro vient d'un
   compteur CSS plutôt que du texte : il se renumérote tout seul si un chapitre
   est ajouté ou supprimé dans l'éditeur, et il ne pollue pas le contenu qu'on
   exporte. La descente de titre — l'espace au-dessus — est ce qui distingue
   une page de livre d'une page de traitement de texte. */
.vk-doc { counter-reset: vk-chapter; }

.vk-doc h1 {
    font-family: var(--doc-display);
    color: var(--page-text);
    margin: 0 0 1.1em;
    padding-top: 1.2em;
    line-height: 1.1;
}

.vk-doc h1::before {
    counter-increment: vk-chapter;
    content: counter(vk-chapter, decimal-leading-zero);
    display: block;
    margin-bottom: 0.5em;
    font-size: 0.62em;
    letter-spacing: .16em;
    line-height: 1;
    color: var(--page-accent);
    font-variant-numeric: tabular-nums;
}
.vk-doc h2 {
    font-family: var(--doc-display);
    font-size: 1.16em;
    font-weight: 700;
    margin: 1.9em 0 0.6em;
    line-height: 1.25;
    /* Le document a sa propre couleur de texte : il ne doit jamais dépendre de
       celle de l'interface qui l'entoure. */
    color: var(--page-text);
}
.vk-doc h1 + p { text-indent: 0; }
.vk-doc h2 + p { text-indent: 0; }

.vk-doc blockquote {
    margin: 1.6em 0;
    padding-left: 1.1em;
    border-left: 3px solid var(--page-accent);
    color: var(--page-muted);
    font-style: italic;
}
.vk-doc .callout {
    margin: 1.6em 0;
    padding: 1em 1.2em;
    background: color-mix(in srgb, var(--page-accent) 8%, transparent);
    border-radius: 6px;
    font-size: 0.95em;
}
.vk-doc hr { border: none; border-top: 1px solid var(--page-rule); margin: 2em 0; }
.vk-doc ul, .vk-doc ol { margin: 0 0 0.9em 1.3em; }
.vk-doc li { margin-bottom: 0.35em; }
.vk-doc strong { font-weight: 700; }

/* Chaque chapitre commence en haut d'une page à l'impression. */
@media print {
    .vk-doc h1 { break-before: page; page-break-before: always; }
    .vk-doc h1:first-child { break-before: avoid; page-break-before: avoid; }
    .vk-doc h2, .vk-doc h1 { break-after: avoid; page-break-after: avoid; }
    .vk-doc p { orphans: 3; widows: 3; }
}

/* ═══ THÈME : BASALTE ═══
   Titres larges et affirmés, corps sérif, page légèrement minérale. */
.vk-doc[data-theme="basalte"] {
    --page-bg: #FBFAFA;
    --page-text: #14121A;
    --page-muted: #57515E;
    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
}
.vk-doc[data-theme="basalte"] :is(h1, .vk-title) {
    font-size: 2.35em;
    font-weight: 800;
    font-stretch: 118%;
    letter-spacing: -0.025em;
}
.vk-doc[data-theme="basalte"] :is(h1, .vk-title)::after {
    content: '';
    display: block;
    width: 58px;
    height: 4px;
    margin-top: 0.42em;
    background: var(--page-accent);
    border-radius: 2px;
}
.vk-doc[data-theme="basalte"] h2 { font-stretch: 108%; letter-spacing: -0.01em; }

/* ═══ THÈME : PIERRE PONCE ═══
   Éditorial, page crème, display sérif à contraste. */
.vk-doc[data-theme="ponce"] {
    --page-bg: #FAF6F0;
    --page-text: #23201C;
    --page-muted: #6B6459;
    --page-rule: rgba(35, 32, 28, 0.12);
    --doc-display: 'Fraunces', Georgia, serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
}
.vk-doc[data-theme="ponce"] :is(h1, .vk-title) {
    font-size: 2.5em;
    font-weight: 600;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    letter-spacing: -0.015em;
    text-align: center;
}
.vk-doc[data-theme="ponce"] :is(h1, .vk-title)::after {
    content: '❦';
    display: block;
    margin-top: 0.3em;
    font-size: 0.38em;
    color: var(--page-accent);
    font-family: Georgia, serif;
}
.vk-doc[data-theme="ponce"] h2 { font-weight: 600; font-style: italic; }

/* ═══ THÈME : BRAISE ═══
   Magazine, titres en capitales serrées, filet d'accent. */
.vk-doc[data-theme="braise"] {
    --page-bg: #FFFFFF;
    --page-text: #100E12;
    --page-muted: #5A5460;
    --doc-display: 'Archivo', sans-serif;
    --doc-body: 'Source Serif 4', Georgia, serif;
}
.vk-doc[data-theme="braise"] :is(h1, .vk-title) {
    font-size: 1.95em;
    font-weight: 900;
    font-stretch: 95%;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    padding-bottom: 0.42em;
    border-bottom: 3px solid var(--page-accent);
}
.vk-doc[data-theme="braise"] h2 {
    text-transform: uppercase;
    font-size: 0.94em;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--page-accent);
}

/* ════════════════════════════════
   PAGES LIMINAIRES
   Page de titre et sommaire. Partagées par l'éditeur et l'export :
   ce que le client voit à l'écran est ce qui sort du fichier.
════════════════════════════════ */

/* ── Pages liminaires ──
   Chacune occupe une feuille pleine et se termine par une coupure. */

.vk-front {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.vk-front__top { padding-top: 18%; }
/* La page de titre porte un h1, mais ce n'est pas un chapitre : ni numéro de
   compteur, ni filet d'accent, ni corps de titre de chapitre. Sans ces
   annulations, la page de titre s'affiche avec un « 01 » et vole au premier
   chapitre son propre numéro. Sélecteurs doublés pour l'emporter sur les
   règles de titre propres à chaque thème. */
/* Sélecteurs portés au niveau des règles de thème (.vk-doc[data-theme] h1),
   sans quoi celles-ci l'emportent : la page de titre s'afficherait au corps
   d'un titre de chapitre, avec son numéro et son filet. */
.vk-doc[data-theme] .vk-front__title::before,
.vk-doc[data-theme] .vk-front__title::after { content: none; display: none; }

.vk-doc[data-theme] .vk-front__title {
    font-family: var(--doc-display);
    font-size: 1.75em;
    font-weight: 700;
    font-stretch: normal;
    text-transform: none;
    text-align: left;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    border: 0;
    text-wrap: balance;
    color: var(--page-text);
}

/* Même précaution pour la couverture : son titre est un h2, que la règle de
   couleur des titres rendrait noir sur fond sombre — donc invisible. */
.vk-doc[data-theme] .vk-cover__title,
.vk-doc[data-theme] .vk-cover__meta { color: inherit; }
.vk-doc[data-theme] .vk-cover__title::before,
.vk-doc[data-theme] .vk-cover__title::after { content: none; display: none; }
.vk-front__author {
    margin: 1.4em 0 0;
    font-size: 1em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--page-muted);
}
.vk-front__legal {
    font-size: 0.72em;
    line-height: 1.6;
    color: var(--page-muted);
    border-top: 1px solid var(--page-rule);
    padding-top: 10px;
}
.vk-front__legal p { margin: 0 0 2px; text-align: left; text-indent: 0; }
.vk-front__made { margin-top: 8px !important; }

/* ── Sommaire ──
   La page qui fait « vrai livre » et se reconnaît en une demi-seconde.
   Sans numéros de page : Chromium ne sait pas les calculer pour une
   table des matières, et un numéro faux serait pire que pas de numéro. */
.vk-toc__title {
    font-family: var(--doc-display);
    font-size: 1.5em;
    margin: 0 0 1.6em;
    letter-spacing: .02em;
    color: var(--page-text);
}
.vk-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.vk-toc__item {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--page-rule);
    break-inside: avoid;
}
.vk-toc__item:last-child { border-bottom: 0; }
.vk-toc__num {
    font-family: var(--doc-display);
    font-size: 0.86em;
    color: var(--page-accent);
    /* Chiffres de même chasse : la colonne reste alignée. */
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.vk-toc__label {
    flex: 1 1 auto;
    min-width: 0;
    text-wrap: balance;
}


/* ════════════════════════════════
   GABARITS DE COUVERTURE
   Format A5, combinables avec n'importe quel thème.
════════════════════════════════ */

.vk-cover {
    --page-accent: #FF1F7A;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.414;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Le contenu s'empile depuis le HAUT. Empilé depuis le bas, il venait
       heurter la mention légale ancrée en pied, et aucune maquette ne pouvait
       placer son titre ailleurs qu'au ras du compteur de chapitres. */
    justify-content: flex-start;
    padding: 9% 9% 14%;
    background: #0B0A0D;
    color: #F5F0F2;
    font-family: 'Archivo', sans-serif;
}
.vk-cover__title {
    font-size: clamp(1.1rem, 9.4cqw, 4rem);
    font-weight: 800;
    font-stretch: 118%;
    letter-spacing: -0.032em;
    line-height: 1.0;
    margin: 0;
    position: relative;
    z-index: 3;
    overflow-wrap: break-word;
    writing-mode: horizontal-tb;
    hyphens: none;
    /* La couverture porte sa propre couleur : la couleur de titre de
       l'interface ne doit pas s'y appliquer, sinon le titre disparaît. */
    color: inherit;
    /* Sans cela, un titre long comprime sa propre boîte — c'est le
       comportement par défaut d'un élément flex — et le texte déborde sur la
       mention des chapitres. */
    flex-shrink: 0;
    /* Un élément -webkit-box se dimensionne sur son contenu et non sur son
       conteneur : sans cette largeur imposée, un titre long ne revient pas à
       la ligne et sort de la feuille — visible seulement à l'export, où il n'y
       a pas de fenêtre pour masquer le débordement. */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    /* Surtout pas de display:-webkit-box ici. Cette boîte héritée calcule sa
       largeur sur son contenu et non sur son conteneur : les lignes se
       coupaient alors 45 pt trop loin et le titre sortait de la feuille — un
       débordement invisible à l'écran, où la fenêtre le masque, mais bien
       présent dans le fichier exporté. Le corps adapté à la longueur du titre,
       plus bas, remplace avantageusement le rognage qu'elle apportait. */
    overflow: hidden;
}

/* Quatre paliers plutôt qu'une taille unique : un titre de trente caractères et
   un de quatre-vingts ne peuvent pas s'afficher au même corps sur la même
   feuille. Le palier est choisi dans le gabarit, qui seul connaît le titre.

   Les valeurs passent par des variables pour qu'une maquette puisse les
   amplifier — Massif fait du titre son sujet — sans avoir à redéclarer les
   quatre paliers. */
.vk-cover { --title-scale: 1; }
.vk-cover[data-title-size="l"]  { --title-min: 1.10rem; --title-cq: 10.4cqw; --title-max: 4.20rem; }
.vk-cover[data-title-size="m"]  { --title-min: 1.00rem; --title-cq:  8.2cqw; --title-max: 3.30rem; }
.vk-cover[data-title-size="s"]  { --title-min: 0.90rem; --title-cq:  6.4cqw; --title-max: 2.60rem; }
.vk-cover[data-title-size="xs"] { --title-min: 0.85rem; --title-cq:  5.2cqw; --title-max: 2.10rem; }

.vk-cover__title {
    font-size: clamp(
        var(--title-min, 0.9rem),
        calc(var(--title-cq, 6.4cqw) * var(--title-scale)),
        calc(var(--title-max, 2.6rem) * var(--title-scale)));
}

/* Auteur et mentions, en pied de couverture. Les mentions sont détachées du
   flux : la couverture empile son contenu depuis le haut, et on les veut
   ancrées en bas de la feuille quelle que soit la longueur du titre. */
.vk-cover__author {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    margin: 1.6em 0 0;
    font-size: clamp(0.58rem, 2.1cqw, 0.92rem);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.92;
}
.vk-cover__legal {
    position: absolute;
    left: 9%; right: 9%; bottom: 6%;
    z-index: 3;
    margin: 0;
    font-size: clamp(0.42rem, 1.5cqw, 0.66rem);
    line-height: 1.5;
    letter-spacing: .01em;
    color: inherit;
    opacity: 0.5;
}
.vk-doc[data-theme] .vk-cover__author,
.vk-doc[data-theme] .vk-cover__legal { color: inherit; }

.vk-cover__sub {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    margin: 0.7em 0 0;
    font-size: clamp(0.62rem, 2.5cqw, 1.05rem);
    font-weight: 500;
    line-height: 1.25;
    opacity: 0.78;
    color: inherit;
}
.vk-doc[data-theme] .vk-cover__sub { color: inherit; }

.vk-doc[data-theme] .vk-front__sub {
    margin: 0.5em 0 0;
    font-family: var(--doc-display);
    font-size: 1.05em;
    font-weight: 500;
    line-height: 1.3;
    color: var(--page-muted);
}
.vk-cover__meta {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    margin-top: 5%;
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(0.42rem, 2.6cqw, 0.9rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ── Éruption : le titre en haut, la coulée qui monte du bas ──
   C'est la vitrine du dégradé de marque : rose → rouge → jaune, une seule
   fois, en pleine page. */
/* ── Socle commun aux maquettes ──
   Le décor est un calque posé sous le texte ; le texte reste toujours au-dessus
   grâce à son z-index. Chaque maquette redéfinit le fond, la couleur d'encre et
   la disposition, jamais le balisage. */
.vk-cover__deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.vk-cover__title, .vk-cover__sub,
.vk-cover__author, .vk-cover__meta { position: relative; z-index: 3; }

/* ═══ ÉRUPTION ═══
   Une masse de couleur qui monte du bas comme une coulée, le titre en réserve
   dans le noir du haut. Le grain casse le lissé du dégradé, qui est ce qui
   trahit le plus une image faite à la machine. */
.vk-cover[data-cover="eruption"] {
    background: #0B0A0D;
    color: #F7F4F5;
}
.vk-cover[data-cover="eruption"] .vk-cover__deco {
    background:
        radial-gradient(120% 62% at 50% 118%,
            color-mix(in srgb, var(--page-accent) 92%, #FFF) 0%,
            var(--page-accent) 26%,
            color-mix(in srgb, var(--page-accent) 42%, #0B0A0D) 55%,
            transparent 78%),
        radial-gradient(90% 40% at 78% 104%,
            color-mix(in srgb, var(--page-accent) 70%, #FF8A3D) 0%, transparent 62%);
}
.vk-cover[data-cover="eruption"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .30) .6px, transparent .6px);
    background-size: 3px 3px;
    opacity: .22;
    mix-blend-mode: overlay;
}

/* ═══ FAILLE ═══
   Une cassure franche en diagonale : l'encre d'un côté, la couleur de l'autre.
   Le titre se pose sur la partie sombre, jamais à cheval sur la ligne. */
.vk-cover[data-cover="faille"] {
    background: #F7F4F5;
    color: #F7F4F5;
}
.vk-cover[data-cover="faille"] .vk-cover__deco {
    background: linear-gradient(196deg,
        #14121A 0%, #14121A 58%,
        var(--page-accent) 58.4%, color-mix(in srgb, var(--page-accent) 74%, #14121A) 100%);
}
.vk-cover[data-cover="faille"] .vk-cover__legal { color: #14121A; opacity: .55; }

/* ═══ SOBRE ═══
   Rien que la typographie, un filet fin au-dessus du titre et une barre
   d'accent en pied. La couverture la plus difficile à rater, et celle qui
   vieillit le mieux. */
.vk-cover[data-cover="sobre"] {
    background: #0B0A0D;
    color: #F2EFF0;
    padding-top: 12%;
}
.vk-cover[data-cover="sobre"] .vk-cover__deco::before {
    content: '';
    position: absolute;
    left: 9%; right: 9%; top: 6%;
    height: 1px;
    background: rgba(242, 239, 240, .32);
}
.vk-cover[data-cover="sobre"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    left: 9%; bottom: 15%;
    width: 34%; height: 5px;
    background: var(--page-accent);
}

/* ═══ GRILLE ═══
   Composition suisse : colonnes réglées, tout aligné, un carré d'accent pour
   seul ornement. Référence Müller-Brockmann. */
.vk-cover[data-cover="grille"] {
    background: #EFECE6;
    color: #17161B;
    font-family: 'Instrument Sans', 'Archivo', sans-serif;
}
.vk-cover[data-cover="grille"] .vk-cover__deco {
    background-image: linear-gradient(to right, rgba(23, 22, 27, .13) 1px, transparent 1px);
    background-size: 25% 100%;
    background-position: 9% 0;
}
.vk-cover[data-cover="grille"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    right: 9%; bottom: 9%;
    width: 22%; aspect-ratio: 1;
    background: var(--page-accent);
}
.vk-cover[data-cover="grille"] .vk-cover__title { font-weight: 700; letter-spacing: -0.02em; }
.vk-cover[data-cover="grille"] .vk-cover__legal { color: #17161B; opacity: .5; }

/* ═══ BANDEAU ═══
   Trois bandes horizontales, le titre dans la bande claire du milieu : le
   gabarit du livre de poche depuis Penguin, 1935. */
.vk-cover[data-cover="bandeau"] {
    background: var(--page-accent);
    color: #14121A;
    padding: 9% 11% 14%;
    justify-content: center;
}
.vk-cover[data-cover="bandeau"] .vk-cover__deco {
    top: 24%; bottom: 20%; left: 0; right: 0;
    background: #F6F2EA;
    border-top: 2px solid rgba(20, 18, 26, .82);
    border-bottom: 2px solid rgba(20, 18, 26, .82);
}
.vk-cover[data-cover="bandeau"] .vk-cover__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-stretch: normal;
    letter-spacing: -0.005em;
    text-align: center;
}
.vk-cover[data-cover="bandeau"] .vk-cover__sub,
.vk-cover[data-cover="bandeau"] .vk-cover__author,
.vk-cover[data-cover="bandeau"] .vk-cover__meta { text-align: center; }
.vk-cover[data-cover="bandeau"] .vk-cover__legal { color: #14121A; opacity: .5; }

/* ═══ SURIMPRESSION ═══
   Deux aplats légèrement décalés qui se recouvrent, comme deux passages
   d'encre mal calés sur une risographie. Le défaut est le motif. */
.vk-cover[data-cover="surimpression"] {
    background: #F4F1E9;
    color: #16141A;
}
.vk-cover[data-cover="surimpression"] .vk-cover__deco::before,
.vk-cover[data-cover="surimpression"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    width: 74%; aspect-ratio: 1;
    border-radius: 50%;
    mix-blend-mode: multiply;
}
.vk-cover[data-cover="surimpression"] .vk-cover__deco::before {
    left: 4%; bottom: 9%;
    background: var(--page-accent);
    opacity: .9;
}
.vk-cover[data-cover="surimpression"] .vk-cover__deco::after {
    left: 22%; bottom: 2%;
    background: #16141A;
    opacity: .72;
}
.vk-cover[data-cover="surimpression"] .vk-cover__legal { color: #F4F1E9; opacity: .65; }

/* ═══ ATELIER ═══
   Manuel technique : cadre de repère, filet pointillé, titre en capitales.
   Rien de décoratif — tout a l'air d'avoir une fonction. */
.vk-cover[data-cover="atelier"] {
    background: #E8E6E1;
    color: #1B1A1E;
    font-family: 'Instrument Sans', 'Archivo', sans-serif;
    padding-top: 13%;
}
.vk-cover[data-cover="atelier"] .vk-cover__deco::before {
    content: '';
    position: absolute;
    left: 6%; right: 6%; top: 6%; bottom: 6%;
    border: 1px solid rgba(27, 26, 30, .34);
}
.vk-cover[data-cover="atelier"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    left: 9%; right: 9%; top: 34%;
    border-top: 1px dashed rgba(27, 26, 30, .45);
}
.vk-cover[data-cover="atelier"] .vk-cover__title {
    font-weight: 700;
    font-stretch: normal;
    letter-spacing: -0.012em;
    text-transform: uppercase;
}
.vk-cover[data-cover="atelier"] .vk-cover__meta { color: var(--page-accent); opacity: 1; }
.vk-cover[data-cover="atelier"] .vk-cover__legal { color: #1B1A1E; opacity: .5; }

/* ═══ SOLSTICE ═══
   Un grand disque qui se lève du bord bas sur un fond de nuit. Une seule forme,
   posée juste : c'est ce qui sépare une couverture d'un fond d'écran. */
.vk-cover[data-cover="solstice"] {
    background: #0E0C14;
    color: #F4F1F2;
}
.vk-cover[data-cover="solstice"] .vk-cover__deco::before {
    content: '';
    position: absolute;
    left: 50%; bottom: -34%;
    width: 92%; aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: linear-gradient(180deg,
        var(--page-accent),
        color-mix(in srgb, var(--page-accent) 58%, #0E0C14));
}
.vk-cover[data-cover="solstice"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    left: 9%; right: 9%; bottom: 32%;
    height: 1px;
    background: rgba(244, 241, 242, .22);
}
.vk-cover[data-cover="solstice"] .vk-cover__title { letter-spacing: -0.028em; }

/* ═══ MASSIF ═══
   Le titre occupe la page sur un aplat de couleur, sans ornement. Le corps est
   volontairement plus grand que sur les autres maquettes : c'est le propos. */
.vk-cover[data-cover="massif"] {
    background: var(--page-accent);
    color: #121016;
    padding: 8% 8% 14%;
    --title-scale: 1.38;
}
.vk-cover[data-cover="massif"] .vk-cover__title {
    line-height: 0.92;
    letter-spacing: -0.042em;
    font-weight: 900;
}
.vk-cover[data-cover="massif"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    left: 8%; bottom: 17%;
    width: 26%; height: 3px;
    background: #121016;
    opacity: .55;
}
.vk-cover[data-cover="massif"] .vk-cover__legal { color: #121016; opacity: .48; }

/* ═══ TRAME ═══
   Une trame de points qui s'éteint en montant, et un cartouche d'encre plein
   sur lequel le titre est réservé. Référence sérigraphie. */
.vk-cover[data-cover="trame"] {
    background: #F5F3EE;
    color: #F5F3EE;
    padding: 0;
}
/* Deux calques distincts : le masque qui éteint la trame ne doit pas s'appliquer
   au cartouche, sinon celui-ci disparaît et le titre se retrouve blanc sur
   blanc — invisible. */
.vk-cover[data-cover="trame"] .vk-cover__deco::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 47%;
    background: #16141A;
}
.vk-cover[data-cover="trame"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 47%; bottom: 0;
    background-image: radial-gradient(var(--page-accent) 1.7px, transparent 1.8px);
    background-size: 12px 12px;
    -webkit-mask-image: linear-gradient(0deg, #000 6%, transparent 78%);
    mask-image: linear-gradient(0deg, #000 6%, transparent 78%);
}
.vk-cover[data-cover="trame"] .vk-cover__title,
.vk-cover[data-cover="trame"] .vk-cover__sub,
.vk-cover[data-cover="trame"] .vk-cover__author,
.vk-cover[data-cover="trame"] .vk-cover__meta { padding-left: 9%; padding-right: 9%; }
.vk-cover[data-cover="trame"] .vk-cover__title { padding-top: 11%; }
.vk-cover[data-cover="trame"] .vk-cover__meta { margin-top: 14%; }
.vk-cover[data-cover="trame"] .vk-cover__author { color: var(--page-accent); opacity: 1; }
.vk-cover[data-cover="trame"] .vk-cover__meta { color: #16141A; }
.vk-cover[data-cover="trame"] .vk-cover__legal { color: #16141A; opacity: .5; }

/* ════════════════════════════════
   COUVERTURES À FORMES

   Deuxième famille. Les dix précédentes sont typographiques : la composition et
   la couleur font tout le travail. Celles-ci construisent d'abord une image —
   vague, galet, ruban, arche — et posent le texte dessus.

   Toutes les formes sont dessinées en CSS, jamais importées : elles suivent
   donc la couleur d'accent choisie, restent nettes à n'importe quelle taille et
   n'ajoutent pas un octet à télécharger.
════════════════════════════════ */

/* ═══ VAGUE ═══
   Trois vagues empilées qui montent du bas, du plus clair au plus dense. Le
   décalage entre elles fait la profondeur. */
.vk-cover[data-cover="vague"] {
    background: #FBF9F6;
    color: #16141A;
    padding-bottom: 20%;
}
.vk-cover[data-cover="vague"] .vk-cover__deco::before,
.vk-cover[data-cover="vague"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    left: -18%; right: -18%;
    border-radius: 50% 50% 0 0 / 34% 34% 0 0;
}
.vk-cover[data-cover="vague"] .vk-cover__deco::before {
    bottom: 0; height: 46%;
    background: color-mix(in srgb, var(--page-accent) 32%, #FBF9F6);
}
.vk-cover[data-cover="vague"] .vk-cover__deco::after {
    bottom: 0; height: 34%;
    background: var(--page-accent);
}
.vk-cover[data-cover="vague"]::after {
    content: '';
    position: absolute;
    left: -18%; right: -18%; bottom: 0;
    height: 20%;
    z-index: 2;
    border-radius: 50% 50% 0 0 / 40% 40% 0 0;
    background: color-mix(in srgb, var(--page-accent) 70%, #16141A);
}
.vk-cover[data-cover="vague"] .vk-cover__legal { color: #FBF9F6; opacity: .72; }

/* ═══ GALET ═══
   Deux formes organiques qui se chevauchent. Les rayons de courbure sont
   volontairement inégaux : une forme parfaitement ronde a l'air d'un gabarit,
   une forme irrégulière a l'air dessinée. */
.vk-cover[data-cover="galet"] {
    background: #F6F4EF;
    color: #191720;
}
.vk-cover[data-cover="galet"] .vk-cover__deco::before,
.vk-cover[data-cover="galet"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    mix-blend-mode: multiply;
}
.vk-cover[data-cover="galet"] .vk-cover__deco::before {
    left: -16%; bottom: -10%;
    width: 82%; height: 52%;
    border-radius: 62% 38% 47% 53% / 55% 42% 58% 45%;
    background: var(--page-accent);
    opacity: .9;
}
.vk-cover[data-cover="galet"] .vk-cover__deco::after {
    right: -14%; bottom: 6%;
    width: 66%; height: 40%;
    border-radius: 44% 56% 63% 37% / 48% 61% 39% 52%;
    background: color-mix(in srgb, var(--page-accent) 55%, #191720);
    opacity: .78;
}

/* ═══ RUBAN ═══
   Une bande oblique traverse la page ; le titre se pose au-dessus, dans le
   calme. Un second filet plus fin la double, décalé. */
.vk-cover[data-cover="ruban"] {
    background: #14121A;
    color: #F6F3F4;
}
.vk-cover[data-cover="ruban"] .vk-cover__deco::before,
.vk-cover[data-cover="ruban"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    left: -30%; right: -30%;
    transform: rotate(-14deg);
}
.vk-cover[data-cover="ruban"] .vk-cover__deco::before {
    top: 56%; height: 17%;
    background: var(--page-accent);
}
.vk-cover[data-cover="ruban"] .vk-cover__deco::after {
    top: 78%; height: 4%;
    background: color-mix(in srgb, var(--page-accent) 60%, #14121A);
}

/* ═══ CONFETTI ═══
   Une pluie de petites formes autour d'un titre laissé au calme. Points pleins,
   anneaux et bâtonnets : trois formes valent mieux qu'une seule répétée. */
.vk-cover[data-cover="confetti"] {
    background: #FFFDF9;
    color: #17151C;
}
.vk-cover[data-cover="confetti"] .vk-cover__deco {
    background-image:
        radial-gradient(circle at 12% 8%,  var(--page-accent) 3.5px, transparent 4px),
        radial-gradient(circle at 78% 5%,  var(--page-accent) 5px,   transparent 5.5px),
        radial-gradient(circle at 92% 22%, var(--page-accent) 2.5px, transparent 3px),
        radial-gradient(circle at 6% 34%,  var(--page-accent) 4px,   transparent 4.5px),
        radial-gradient(circle at 88% 62%, var(--page-accent) 6px,   transparent 6.5px),
        radial-gradient(circle at 22% 72%, var(--page-accent) 3px,   transparent 3.5px),
        radial-gradient(circle at 62% 84%, var(--page-accent) 4.5px, transparent 5px),
        radial-gradient(circle at 40% 94%, var(--page-accent) 2.5px, transparent 3px);
}
.vk-cover[data-cover="confetti"] .vk-cover__deco::before,
.vk-cover[data-cover="confetti"] .vk-cover__deco::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 3px solid var(--page-accent);
}
.vk-cover[data-cover="confetti"] .vk-cover__deco::before {
    left: 8%; bottom: 16%;
    width: 17%; aspect-ratio: 1;
}
.vk-cover[data-cover="confetti"] .vk-cover__deco::after {
    right: 11%; top: 38%;
    width: 10%; aspect-ratio: 1;
    border-width: 2px;
}

/* ═══ ARCHE ═══
   Le titre vit à l'intérieur d'une grande arche pleine. Une seule forme, mais
   qui structure toute la page — et qui se reconnaît de loin. */
.vk-cover[data-cover="arche"] {
    background: #F3F0EA;
    color: #FFFFFF;
    /* La descente est calculée pour que le titre tombe SOUS la courbe de
       l'arche : posé plus haut, il chevauche le bord et l'arche cesse de se
       lire comme une forme. */
    padding: 36% 16% 20%;
}
.vk-cover[data-cover="arche"] .vk-cover__deco::before {
    content: '';
    position: absolute;
    left: 8%; right: 8%; bottom: 0; top: 9%;
    border-radius: 50% 50% 0 0 / 32% 32% 0 0;
    background: linear-gradient(170deg,
        var(--page-accent),
        color-mix(in srgb, var(--page-accent) 62%, #17151C));
}
.vk-cover[data-cover="arche"] .vk-cover__meta { opacity: .7; }
.vk-cover[data-cover="arche"] .vk-cover__legal { color: #17151C; opacity: .5; }

/* ═══ PRISME ═══
   Trois panneaux translucides qui se recouvrent en surimpression. La couleur
   naît des recouvrements, pas des aplats — c'est ce qui donne la profondeur. */
.vk-cover[data-cover="prisme"] {
    background: #FAF8F4;
    color: #15131A;
}
.vk-cover[data-cover="prisme"] .vk-cover__deco::before,
.vk-cover[data-cover="prisme"] .vk-cover__deco::after,
.vk-cover[data-cover="prisme"]::after {
    content: '';
    position: absolute;
    mix-blend-mode: multiply;
    background: var(--page-accent);
}
.vk-cover[data-cover="prisme"] .vk-cover__deco::before {
    left: -10%; bottom: -6%;
    width: 78%; height: 46%;
    transform: rotate(-9deg);
    opacity: .82;
}
.vk-cover[data-cover="prisme"] .vk-cover__deco::after {
    right: -14%; bottom: 10%;
    width: 62%; height: 38%;
    transform: rotate(7deg);
    opacity: .55;
}
.vk-cover[data-cover="prisme"]::after {
    left: 16%; bottom: -16%;
    width: 54%; height: 34%;
    z-index: 2;
    transform: rotate(-20deg);
    background: #15131A;
    opacity: .34;
}

.vk-cover--thumb { container-type: inline-size; }
.vk-cover { container-type: inline-size; }