/* Vues Récit, Encyclopédie et Archives : styles propres (jetons de css/jetons.css seulement ; voir DESIGN.md).
   Pièces communes (retour, sur-titres, texte cité, preuves), puis Récit, Encyclopédie, Archives. */

/* ================================================================== pièces communes */

/* Retour en tête de page : chevron et nom du parent, aligné optiquement sur le texte. */
.ra-retour {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e-1);
  height: 36px; margin-left: calc(-1 * var(--e-2)); padding: 0 var(--e-3) 0 var(--e-1);
  border-radius: var(--r-rond);
  color: var(--texte-2);
  font-size: var(--t-2); font-weight: var(--g-semi); letter-spacing: -0.005em;
  transition: background-color var(--d-rapide) var(--c-standard), color var(--d-rapide);
}
@media (hover: hover) { .ra-retour:hover { background: var(--survol); color: var(--texte); } }
.ra-retour:active { background: var(--appui); }

/* Sur-titre : nature, numéro et dates, au-dessus des titres. */
.recit-sur { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); letter-spacing: var(--l-legende); }

.recit-squelette { padding: var(--e-2) 0 var(--e-4); max-width: var(--l-lecture); }

/* Sections du bas de page (Scènes, Chapitres, Sources, Mentions) */
.recit-section { margin-top: var(--e-9); }
.recit-section__titre {
  display: flex; align-items: baseline; gap: var(--e-2);
  margin-bottom: var(--e-4);
  font-size: var(--t-4); font-weight: var(--g-gras); line-height: var(--i-titre); letter-spacing: var(--l-titre);
}
.recit-section__compte { font-size: var(--t-2); font-weight: var(--g-semi); color: var(--texte-3); letter-spacing: 0; }
.recit-lignes { display: flex; flex-direction: column; gap: var(--e-2); }

/* Présents : avatars, puis prénoms colorés */
.presents { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; font-size: var(--t-2); }
.presents .pile { --bord-pile: var(--fond); }
.presents__noms { color: var(--texte-2); }

/* ------------------------------------------------------------------ texte cité (récit, encyclopédie) */

.texte-cite p { margin-bottom: 1.1em; }
/* Mesure : 30em d'Inter laisse passer 66 ou 67 signes sur une ligne de lettres étroites (« L’offre écrite
   est arrivée le 16 novembre : arrivée le 11 janvier, ») ; le cahier en veut 65 au plus (Design). Le texte
   cité, comme le texte à la lettre des archives, se lit sur 28em : 58 à 64 signes. */
.texte-cite:not(.prose--large) { max-width: calc(var(--l-lecture) - 2em); }
.texte-cite .phrase {
  border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color var(--d-rapide) var(--c-standard), box-shadow var(--d-rapide) var(--c-standard);
}
.texte-cite .phrase--active {
  background: color-mix(in srgb, var(--accent-1) 16%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-1) 16%, transparent);
}
.texte-cite .phrase__fin { white-space: nowrap; }
.texte-cite .phrase--active .citation { background: var(--accent-1); color: var(--encre); }
.texte-cite__titre { scroll-margin-top: var(--e-9); }
.prose h2.texte-cite__titre { margin-top: 1.9em; }
.texte-cite__scene {
  color: inherit;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: text-decoration-color var(--d-rapide) var(--c-standard);
}
@media (hover: hover) { .texte-cite__scene:hover { text-decoration-color: var(--trait-3); } }
.texte-cite[data-brut] .puce { vertical-align: 0.1em; }

/* ------------------------------------------------------------------ panneau des preuves */

.preuves { display: flex; flex-direction: column; gap: var(--e-6); }
.preuves__tete { display: flex; flex-direction: column; gap: var(--e-3); padding-right: var(--e-9); }
.preuves__origine { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.preuves__phrase {
  margin: 0; padding: 0;
  font-size: var(--t-4); font-weight: var(--g-semi); line-height: 1.32; letter-spacing: -0.016em;
  text-wrap: pretty;
}
.preuves__liste { display: flex; flex-direction: column; gap: var(--e-3); }
.preuves__compte { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }

.preuve {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--r-4);
  background: var(--survol);
  border: 1px solid var(--trait);
}
.preuve--ligne { padding: 0; background: none; border: 0; }
/* Sur le fond d'une preuve (verre du panneau, puis la carte), le gris --texte-3 tombe sous 4,5:1. */
.preuve:not(.preuve--ligne) .ligne-cible__sous { color: var(--texte-2); }
.preuve__tete { display: flex; align-items: flex-start; gap: var(--e-3); min-width: 0; color: inherit; }
.preuve__icone {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--c, var(--texte-2)) 18%, transparent);
  color: var(--c, var(--texte-2));
}
.preuve__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.preuve__sur { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.preuve__titre {
  font-size: var(--t-2); font-weight: var(--g-semi); line-height: 1.4; color: var(--texte);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color var(--d-rapide);
}
@media (hover: hover) { .preuve__tete:hover .preuve__titre { text-decoration-color: var(--trait-3); } }
.preuve__tete .niveau { margin-top: 9px; }
.preuve__verbatim { max-width: none; }
.preuve__verbatim .groupe { margin-top: 0; }
.preuve__verbatim .bulle { max-width: 100%; }
.preuve__verbatim .scene__action, .preuve__verbatim .scene__externe { align-self: stretch; max-width: none; margin: 0; }
.preuve__verbatim .scene__action { justify-content: flex-start; text-align: left; padding: 0; }
.preuve__scene {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: 40px; margin: 0 calc(-1 * var(--e-4)) calc(-1 * var(--e-4)); padding: var(--e-2) var(--e-4);
  border-top: 1px solid var(--trait);
  border-radius: 0 0 var(--r-4) var(--r-4);
  font-size: var(--t-2); font-weight: var(--g-moyen); color: var(--texte-2);
  transition: background-color var(--d-rapide), color var(--d-rapide);
}
.preuve__scene > span { flex: 1; min-width: 0; }
.preuve__chevron { color: var(--texte-3); }
@media (hover: hover) { .preuve__scene:hover { background: var(--survol); color: var(--texte); } .preuve__scene:hover .preuve__chevron { color: var(--texte-2); } }

/* Aperçu d'une pastille à plusieurs sources (même coque que l'aperçu du socle) */
.preuves-apercu { display: flex; flex-direction: column; gap: var(--e-3); }
.preuves-apercu__tete { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.preuves-apercu__liste { display: flex; flex-direction: column; gap: var(--e-3); }
.preuves-apercu__ligne { display: flex; align-items: flex-start; gap: var(--e-3); min-width: 0; }
.preuves-apercu__icone {
  display: grid; place-items: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: var(--r-1);
  background: color-mix(in srgb, var(--c, var(--texte-2)) 18%, transparent);
  color: var(--c, var(--texte-2));
}
.preuves-apercu__textes { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.preuves-apercu__sur { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.preuves-apercu__titre {
  font-size: var(--t-2); line-height: 1.35; color: var(--texte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ================================================================== Récit */

/* Titre d'une page d'index → contenu : 32 px (24 sur iPhone), comme Personnes, Créations et Recherche. */
.recit__titre { margin-bottom: var(--e-6); }
@media (max-width: 899.98px) { .recit__titre { margin-bottom: var(--e-5); } }
.recit-ere + .recit-ere { margin-top: var(--e-10); padding-top: var(--e-8); border-top: 1px solid var(--trait); }
.recit-ere__tete, .recit-arc__tete { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-4); }
.recit-ere__titre { font-size: var(--t-5); font-weight: var(--g-noir); line-height: 1.12; letter-spacing: -0.028em; text-wrap: balance; }
.recit-arc { margin-top: var(--e-8); }
.recit-arc__titre { font-size: var(--t-4); font-weight: var(--g-gras); line-height: var(--i-titre); letter-spacing: var(--l-titre); text-wrap: balance; }
.recit-titre-lien {
  color: inherit;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: text-decoration-color var(--d-rapide) var(--c-standard);
}
@media (hover: hover) { .recit-titre-lien:hover { text-decoration-color: var(--trait-3); } }
.recit-ere > .texte-cite, .recit-arc > .texte-cite { color: var(--texte-2); }
.recit-ere > .texte-cite p:last-child, .recit-arc > .texte-cite p:last-child { margin-bottom: 0; }
.recit-chapitres { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-5); }
.recit-chapitres--seuls { margin-top: var(--e-8); }

/* Une page de récit : chapitre, arc ou ère */
.recit-page { padding-bottom: var(--e-6); }
.recit-page__tete { display: flex; flex-direction: column; gap: var(--e-3); margin: var(--e-5) 0 var(--e-7); }
.recit-page__titre {
  font-size: var(--t-5); font-weight: var(--g-noir); line-height: 1.1; letter-spacing: -0.028em;
  text-wrap: balance;
}
.recit-page__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin-top: var(--e-1); }
.recit-puce-lien {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 var(--e-3) 0 var(--e-2);
  border-radius: var(--r-rond);
  background: var(--surface-1); border: 1px solid var(--trait-2);
  font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2);
  transition: background-color var(--d-rapide), color var(--d-rapide);
}
@media (hover: hover) { .recit-puce-lien:hover { background: var(--surface-2); color: var(--texte); } }

/* Chapitres voisins */
.recit-nav { display: grid; grid-template-columns: 1fr; gap: var(--e-3); margin-top: var(--e-9); }
.recit-nav__carte {
  display: flex; flex-direction: column; gap: var(--e-1); min-width: 0;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-3);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  transition: background-color var(--d-rapide), transform var(--d-normale) var(--c-sortie);
}
@media (hover: hover) { .recit-nav__carte:hover { background: var(--surface-2); } }
.recit-nav__carte:active { transform: scale(0.98); }
.recit-nav__carte--suiv { align-items: flex-end; text-align: right; }
.recit-nav__sur { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.recit-nav__titre {
  font-size: var(--t-3); font-weight: var(--g-semi); line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.recit-nav__vide { display: none; }

@media (min-width: 900px) {
  .recit-page__titre { font-size: var(--t-6); line-height: 1.05; letter-spacing: var(--l-grand); }
  .recit-nav { grid-template-columns: 1fr 1fr; }
  .recit-nav__vide { display: block; }
}

/* ================================================================== Encyclopédie */

.ency__tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-5); margin-bottom: var(--e-6); }
.ency__tete .onglets { max-width: 100%; }

.ency-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--e-3); }
.ency-carte {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--e-3);
  height: 100%; min-height: 188px;
  padding: var(--e-5);
  border-radius: var(--r-4);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  transition: background-color var(--d-rapide), transform var(--d-normale) var(--c-sortie);
}
@media (hover: hover) { .ency-carte:hover { background: var(--surface-2); } }
.ency-carte:active { transform: scale(0.985); }
.ency-carte__lien { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.ency-carte > :not(.ency-carte__lien) { position: relative; z-index: 1; pointer-events: none; }
.ency-carte a:not(.ency-carte__lien) { pointer-events: auto; }
.ency-carte__haut { display: flex; align-items: center; gap: var(--e-3); }
.ency-carte__cat { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.ency-carte__titre { font-size: var(--t-4); font-weight: var(--g-gras); line-height: var(--i-titre); letter-spacing: var(--l-titre); text-wrap: balance; }
.ency-carte__extrait {
  font-size: var(--t-2); line-height: 1.5; color: var(--texte-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ency-carte--squelette { justify-content: flex-end; }

/* Tuile de catégorie : verre neutre, l'icône au trait du socle */
.ency-tuile {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--r-2);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--trait-2);
  box-shadow: inset 0 1px 0 var(--trait);
  color: var(--texte);
}
.ency-tuile--grande { width: 64px; height: 64px; border-radius: var(--r-4); }

.ency-page { padding-bottom: var(--e-6); }
.ency-page__tete { display: flex; align-items: center; gap: var(--e-4); margin-bottom: var(--e-5); }
.ency-page__tete--grande { flex-direction: column; align-items: flex-start; gap: var(--e-4); margin: var(--e-5) 0 var(--e-7); }
.ency-page__titres { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.ency-page__titre { font-size: var(--t-5); font-weight: var(--g-noir); line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; }
.ency-page__titre--panneau { font-size: var(--t-4); font-weight: var(--g-gras); line-height: var(--i-titre); letter-spacing: var(--l-titre); }
.ency-panneau .ency-page__tete { margin-bottom: 0; padding-right: var(--e-9); }
.ency-panneau .texte-cite { font-size: var(--t-3); }

.ency-sources { display: flex; flex-direction: column; gap: var(--e-2); }

.ency-mentions__liste { display: flex; flex-direction: column; gap: var(--e-2); }
.ency-mention {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-3);
  background: var(--survol);
  border: 1px solid var(--trait);
  transition: background-color var(--d-rapide), transform var(--d-normale) var(--c-sortie);
}
@media (hover: hover) { .ency-mention:hover { background: var(--appui); } }
.ency-mention:active { transform: scale(0.985); }
.ency-mention__icone {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--texte-2) 16%, transparent); color: var(--texte-2);
}
.ency-mention__textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ency-mention__sur { font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }
.ency-mention__extrait {
  font-size: var(--t-2); line-height: 1.5; color: var(--texte-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ency-mention mark {
  padding: 0 1px; border-radius: 3px;
  background: color-mix(in srgb, var(--accent-1) 14%, transparent);
  color: var(--texte); font-weight: var(--g-moyen);
}
.ency-mentions__plus { margin-top: var(--e-3); }

@media (min-width: 900px) {
  .ency-page__titre { font-size: var(--t-6); line-height: 1.05; letter-spacing: var(--l-grand); }
  .ency-page__titre--panneau { font-size: var(--t-5); line-height: 1.12; letter-spacing: -0.028em; }
}

/* ================================================================== Archives */

.arch { padding-bottom: var(--e-6); }
.arch__tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-7); }
.arch__stats { font-size: var(--t-2); color: var(--texte-2); margin-bottom: var(--e-3); }

.arch-cycles { display: flex; flex-direction: column; gap: var(--e-8); }
.arch-cycle__tete { display: flex; flex-direction: column; gap: var(--e-1); margin-bottom: var(--e-3); }
.arch-cycle__titre { font-size: var(--t-4); font-weight: var(--g-gras); line-height: var(--i-titre); letter-spacing: var(--l-titre); }
.arch-cycle__sous { font-size: var(--t-2); color: var(--texte-2); }

.arch-section { margin: var(--e-7) 0 var(--e-3); font-size: var(--t-2); font-weight: var(--g-semi); color: var(--texte-2); }

/* Liste groupée (à la façon des réglages d'iOS) : une carte, des rangées, des filets qui partent du texte */
.arch-groupe {
  border-radius: var(--r-4);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  overflow: hidden;
}
.arch-groupe > li { position: relative; }
.arch-groupe > li + li::before {
  content: ""; position: absolute; top: 0; left: calc(var(--e-4) + 32px + var(--e-3)); right: 0;
  height: 1px; background: var(--trait);
}
.arch-groupe--squelette { padding: var(--e-5); margin-top: var(--e-6); }
.arch-ligne {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 60px; padding: var(--e-2) var(--e-4);
  transition: background-color var(--d-rapide);
}
@media (hover: hover) {
  .arch-ligne:hover { background: var(--survol); }
  .arch-ligne:hover .arch-ligne__sous, .arch-ligne:hover .arch-ligne__meta, .arch-ligne:hover .arch-ligne__chevron { color: var(--texte-2); }
}
.arch-ligne:active { background: var(--appui); }
.arch-ligne .avatar { flex-shrink: 0; }
.arch-tuile {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--c, var(--texte-2)) 16%, transparent);
  color: var(--c, var(--texte-2));
}
.arch-ligne__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.arch-ligne__titre {
  font-size: var(--t-2); font-weight: var(--g-semi); line-height: 1.35; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.arch-ligne__sous { font-size: var(--t-1); color: var(--texte-3); overflow-wrap: anywhere; }
.arch-ligne__meta { flex-shrink: 0; font-size: var(--t-1); color: var(--texte-3); }
.arch-ligne__chevron { flex-shrink: 0; color: var(--texte-3); }

/* En-tête d'une page de dossier ou de fichier */
.arch-page__tete { display: flex; flex-direction: column; gap: var(--e-2); margin: var(--e-5) 0 var(--e-6); }
.arch-page__titre { font-size: var(--t-5); font-weight: var(--g-noir); line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; overflow-wrap: anywhere; }
.arch-ariane { font-size: var(--t-1); color: var(--texte-3); overflow-wrap: anywhere; line-height: 1.6; }
.arch-ariane__lien { color: var(--texte-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
@media (hover: hover) { .arch-ariane__lien:hover { color: var(--texte); text-decoration-color: var(--trait-3); } }
.arch-ariane__sep { margin: 0 0.3em; color: var(--texte-3); }
.arch-ariane__ici { color: var(--texte-2); font-weight: var(--g-semi); }

.arch-fichier__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-4); margin-top: var(--e-3); }
.arch-fichier__meta { font-size: var(--t-2); color: var(--texte-2); }
.arch-fichier__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.arch-fichier__ouvrir .icone { margin-right: calc(-1 * var(--e-1)); }
.arch-fichier__corps { min-width: 0; }

.arch-avis {
  margin-bottom: var(--e-3); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-3);
  background: color-mix(in srgb, var(--attention) 12%, var(--surface-1));
  color: var(--texte);
  font-size: var(--t-2);
}

/* ------------------------------------------------------------------ brut : le fichier ligne à ligne */

.ra-brut {
  --chiffres-ligne: 3ch;
  padding: var(--e-3) 0;
  border-radius: var(--r-3);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  font-family: var(--police-code); font-size: var(--t-1); line-height: 1.65;
  -webkit-hyphens: none; hyphens: none;
}
.ra-brut__ligne {
  display: grid; grid-template-columns: var(--chiffres-ligne) minmax(0, 1fr); column-gap: var(--e-4);
  min-height: 1.65em; padding: 0 var(--e-4);
}
.ra-brut__ligne::before { content: attr(data-n); color: var(--texte-3); text-align: right; -webkit-user-select: none; user-select: none; }
.ra-brut__t { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texte); }
.ra-brut__ligne--visee {
  background: color-mix(in srgb, var(--accent-1) 13%, transparent);
  box-shadow: inset 3px 0 0 var(--accent-1);
}
.ra-brut__ligne--visee::before { color: var(--texte-2); }

/* ------------------------------------------------------------------ arbre : un JSON lisible */

.ajson {
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-3);
  background: var(--surface-1);
  border: 1px solid var(--trait);
  font-size: var(--t-2); line-height: 1.5;
  overflow-wrap: anywhere;
}
.ajson__objet { display: grid; grid-template-columns: fit-content(44%) minmax(0, 1fr); gap: var(--e-2) var(--e-4); margin: 0; }
.ajson__paire { display: contents; }
.ajson__cle { font-family: var(--police-code); font-size: var(--t-1); line-height: 1.75; color: var(--texte-2); overflow-wrap: break-word; }
.ajson__valeur { margin: 0; min-width: 0; }
.ajson__paire--bloc > .ajson__cle { grid-column: 1 / -1; }
.ajson__paire--bloc > .ajson__valeur { grid-column: 1 / -1; margin: calc(-1 * var(--e-1)) 0 var(--e-1); padding-left: var(--e-4); border-left: 1px solid var(--trait-2); }
.ajson__texte { color: var(--texte); }
.ajson__texte--multi { display: block; white-space: pre-wrap; }
.ajson__nombre { color: var(--texte); font-variant-numeric: tabular-nums; }
.ajson__bool, .ajson__nul, .ajson__vide { font-family: var(--police-code); font-size: var(--t-1); color: var(--texte-2); }
.ajson__id { font-family: var(--police-code); font-size: var(--t-1); }
.ajson__ligne-liste { display: inline-flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); }
.ajson__puce { display: inline-block; padding: 0 var(--e-2); border-radius: var(--r-1); background: var(--surface-2); line-height: 1.6; }
.ajson__liste { display: flex; flex-direction: column; }
.ajson__element { display: grid; grid-template-columns: 2.5ch minmax(0, 1fr); gap: var(--e-3); padding: var(--e-2) 0; }
.ajson__element + .ajson__element { border-top: 1px solid var(--trait); }
.ajson__index { font-family: var(--police-code); font-size: var(--t-1); line-height: 1.75; color: var(--texte-3); text-align: right; }
.ajson__plus { margin-top: var(--e-2); }

.arch-entete { margin-bottom: var(--e-6); }
.arch-entete .ajson { padding: var(--e-3) var(--e-4); font-size: var(--t-1); background: transparent; border-style: dashed; border-color: var(--trait-2); }
.arch-entete .ajson__cle { line-height: 1.5; }

.arch-jsonl { display: flex; flex-direction: column; gap: var(--e-4); }
.arch-jsonl__n { margin: 0 0 var(--e-2) var(--e-1); font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); }

/* ------------------------------------------------------------------ le log */

.arch-log__filtre { margin-bottom: var(--e-4); }
.ra-log { border-radius: var(--r-4); background: var(--surface-1); border: 1px solid var(--trait); overflow: hidden; }
.ra-log-ligne {
  position: relative;
  display: grid; align-items: center; column-gap: var(--e-3); row-gap: var(--e-1);
  grid-template-columns: 32px auto auto minmax(0, 1fr) auto;
  grid-template-areas: "type id date resume niveau";
  min-height: 56px; padding: var(--e-2) var(--e-4);
  border-top: 1px solid var(--trait);
  transition: background-color var(--d-rapide);
}
.ra-log > .ra-log-ligne:first-child { border-top: 0; }
@media (hover: hover) {
  .ra-log-ligne:hover { background: var(--survol); }
  .ra-log-ligne:hover .ra-log-ligne__id, .ra-log-ligne:hover .ra-log-ligne__date { color: var(--texte-2); }
}
.ra-log-ligne:active { background: var(--appui); }
.ra-log-ligne__lien { position: absolute; inset: 0; z-index: 0; }
.ra-log-ligne > :not(.ra-log-ligne__lien) { position: relative; z-index: 1; pointer-events: none; }
.ra-log-ligne__type {
  grid-area: type; align-self: start;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c);
}
.ra-log-ligne__id { grid-area: id; font-family: var(--police-code); font-size: var(--t-1); color: var(--texte-3); }
.ra-log-ligne__date { grid-area: date; font-size: var(--t-1); color: var(--texte-3); white-space: nowrap; }
.ra-log-ligne__resume {
  grid-area: resume; font-size: var(--t-2); line-height: 1.4; color: var(--texte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ra-log-ligne__niveau { grid-area: niveau; }

/* ------------------------------------------------------------------ transcription d'une scène */

.ra-tr-tete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-4);
  padding-bottom: var(--e-4); margin-bottom: var(--e-3);
  border-bottom: 1px solid var(--trait);
}
.ra-tr-tete__presents { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.ra-tr-tete__perso {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: 32px; padding: 0 var(--e-3) 0 var(--e-1);
  border-radius: var(--r-rond);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c); font-size: var(--t-2); font-weight: var(--g-semi);
  transition: background-color var(--d-rapide);
}
@media (hover: hover) { .ra-tr-tete__perso:hover { background: color-mix(in srgb, var(--c) 22%, transparent); } }
.ra-tr-tete__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); font-size: var(--t-1); color: var(--texte-2); }

.ra-tr-blocs { display: flex; flex-direction: column; }
.ra-tr-bloc {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--e-3);
  margin: 0 calc(-1 * var(--e-3)); padding: var(--e-3);
  border-radius: var(--r-3);
  scroll-margin: var(--e-10) 0;
}
.ra-tr-bloc--vise { background: color-mix(in srgb, var(--accent-1) 11%, transparent); box-shadow: inset 3px 0 0 var(--accent-1); }
.ra-tr-bloc__gauche { padding-top: 1px; }
.ra-tr-bloc__heure {
  position: relative; display: inline-flex;
  font-size: var(--t-1); font-weight: var(--g-semi); line-height: 20px; color: var(--texte-2);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color var(--d-rapide), text-decoration-color var(--d-rapide);
}
a.ra-tr-bloc__heure:hover { color: var(--texte); text-decoration-color: var(--trait-3); }
.ra-tr-bloc__heure--seule { color: var(--texte-3); }
.ra-tr-bloc__corps { --mesure-tr: calc(var(--t-3) * 32); display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.ra-tr-bloc__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-height: 20px; font-size: var(--t-1); }
.ra-tr-bloc__nom { font-size: var(--t-2); font-weight: var(--g-semi); line-height: 20px; color: var(--c); }
.ra-tr-bloc__nom--neutre { color: var(--texte-2); }
.ra-tr-bloc__monde {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-3); color: var(--texte-2);
}
.ra-tr-bloc__genre { color: var(--texte-2); font-style: italic; }
.ra-tr-bloc__date { color: var(--texte-2); }
.ra-tr-bloc__lignes { margin-left: auto; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.ra-tr-bloc__texte { max-width: var(--mesure-tr); font-size: var(--t-3); line-height: 1.5; color: var(--texte); }
.ra-tr-bloc--action .ra-tr-bloc__texte { font-style: italic; color: var(--texte-2); }
.ra-tr-bloc--note .ra-tr-bloc__texte { font-size: var(--t-2); color: var(--texte-2); font-style: italic; }
.ra-tr-bloc--externe .ra-tr-bloc__texte, .ra-tr-bloc--commande .ra-tr-bloc__texte {
  margin-top: var(--e-1); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-3);
  background: var(--surface-1); border: 1px solid var(--trait);
  font-size: var(--t-2); line-height: 1.5;
}
.ra-tr-bloc--externe .ra-tr-bloc__texte { color: var(--texte-2); }
.ra-tr-bloc__creation { margin-top: var(--e-2); max-width: var(--mesure-tr); }
.ra-tr-pensee { max-width: min(100% - var(--e-3), var(--mesure-tr) - var(--e-3)); margin: var(--e-1) 0 var(--e-1) var(--e-3); }

/* ------------------------------------------------------------------ Markdown, journal, image, tableau, outil */

/* À la lettre (apostrophes droites, minuscules du journal de Nadia, aucune espace fine), un texte compte
   plus de signes par ligne que le même texte en typographie soignée : la mesure se resserre encore d'un
   cadratin (27em) pour rester sous 66 caractères. */
.arch-fichier__corps .prose { max-width: calc(var(--l-lecture) - 3em); }
.arch-fichier__corps .puce--provenance { margin-left: 0.25em; vertical-align: 0.12em; }
.arch-journal { display: flex; flex-direction: column; gap: var(--e-7); }
.arch-journal__date { margin-bottom: var(--e-3); font-size: var(--t-3); font-weight: var(--g-semi); color: var(--texte-2); }
.arch-journal__date .chiffres { color: var(--texte); }

.arch-image {
  display: grid; place-items: center;
  margin: 0; padding: var(--e-6);
  border-radius: var(--r-4);
  background: var(--surface-1);
  border: 1px solid var(--trait);
}
.arch-image img { width: 100%; max-width: 480px; height: auto; }

.arch-tableau { overflow-x: auto; border-radius: var(--r-3); border: 1px solid var(--trait); background: var(--surface-1); }
.arch-tableau table { width: 100%; border-collapse: collapse; font-size: var(--t-2); font-variant-numeric: tabular-nums; }
.arch-tableau th { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--trait-2); text-align: left; font-size: var(--t-1); font-weight: var(--g-semi); color: var(--texte-2); white-space: nowrap; }
.arch-tableau td { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--trait); vertical-align: top; }
.arch-tableau tr:last-child td { border-bottom: 0; }

.arch-outil { border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--trait); }

/* ------------------------------------------------------------------ iPhone et ordinateur */

@media (min-width: 900px) {
  .ra-log-ligne__type { align-self: center; }
}
@media (max-width: 899.98px) {
  .ra-log-ligne {
    grid-template-columns: 32px auto minmax(0, 1fr) auto;
    grid-template-areas: "type id date niveau" "type resume resume resume";
    padding-block: var(--e-3);
  }
  .ra-log-ligne__date { justify-self: start; }
  .ra-tr-bloc { grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--e-2); }
  .ency-grille { grid-template-columns: 1fr; }
  .ency-carte { min-height: 0; }
  .arch-fichier__actions { width: 100%; justify-content: space-between; }
}

@media (min-width: 900px) {
  .arch-page__titre { font-size: var(--t-6); line-height: 1.05; letter-spacing: var(--l-grand); }
}

@media (pointer: coarse) {
  .ra-retour { height: var(--cible-tactile); }
  .recit-puce-lien::before { content: ""; position: absolute; inset: min(0px, calc((100% - var(--cible-tactile)) / 2)); }
  .ra-tr-tete__perso { height: var(--cible-tactile); }
  .preuve__scene { min-height: var(--cible-tactile); }
  .ra-tr-bloc__heure::before {
    content: ""; position: absolute;
    inset: min(0px, calc((100% - var(--cible-tactile)) / 2));
  }
  /* Transcription : l'heure ouvre l'événement ; le nom au-dessus du texte n'est plus une cible (comme dans une scène). */
  .ra-tr-bloc__nom { pointer-events: none; }
  /* Dans une carte d'entrée, les prénoms s'effacent devant la carte entière : une seule cible au doigt. */
  .ency-carte a:not(.ency-carte__lien) { pointer-events: none; }
}