/* Journal — liste (admin/journal) et fiche (admin/journal/edit/{id}).
   Gabarit (en-tête, KPI, cartes, filtres, tableau, pastilles, boutons) :
   socle admin.css. Restent ici : graphe des publications, nuage de tags,
   barres de répartition, vignettes, mise en page de la fiche, barre
   d'actions collante et thème d'EasyMDE — en jetons uniquement.
   CSP : le seul style="…" toléré dans les vues porte une variable CSS
   (--h de la vignette-initiale, --w des barres, --i des délais).
   La dernière section (`.journal-article`) sert au rendu PUBLIC. */

.jn-note { font-size: 11.5px; color: var(--kd-mu); margin: -4px 0 12px; line-height: 1.45; }
.jn-empty { color: var(--kd-mu); font-size: 12.5px; padding: 6px 0; }
.jn-muted { color: var(--kd-mu); }
.jn-muted.xs { font-size: 11px; }
.jn-nowrap { white-space: nowrap; }
.jn-center { text-align: center; margin: -18px 0 18px; }
.jn-sub { display: block; font-size: 10.5px; color: var(--kd-mu); margin-top: 3px; }
.jn-sub.warn { color: var(--kd-warn); }

/* ── KPI cliquables (chacun pose un filtre) ─────────────────────────── */
.jn-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
a.jn-kpi { color: var(--kd-tx); text-decoration: none; transition: border-color .15s, transform .15s; }
a.jn-kpi:hover { border-color: var(--kd-line-2); transform: translateY(-1px); text-decoration: none; }
.jn-kpi.on { border-color: var(--kd-cy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kd-cy) 14%, transparent); }
.jn-kpi .kd-v small { font-size: 11.5px; }

/* ── Graphes ─────────────────────────────────────────────────────────── */
.jn-span2 { grid-column: span 2; }
.jn-spark { width: 100%; height: 150px; display: block; }
.jn-spark .bar { fill: var(--kd-vio); opacity: .85; transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: jn-grow .7s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 45ms); }
.jn-spark .bar:hover { opacity: 1; }
@keyframes jn-grow { to { transform: scaleY(1); } }
.jn-spark .line { fill: none; stroke: var(--kd-ok); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: jn-line 1.4s ease-out .3s forwards; }
@keyframes jn-line { to { stroke-dashoffset: 0; } }
.jn-spark .dot { fill: var(--kd-ok); }
.jn-spark text { fill: var(--kd-di); font-size: 10px; }
.jn-spark .tip { fill: var(--kd-tx); font-size: 11px; font-weight: 700; }

/* Nuage de tags (chips cliquables = filtre) */
.jn-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.jn-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; text-decoration: none;
  border: 1px solid var(--kd-line-2); background: var(--kd-panel-2); color: var(--kd-tx); transition: border-color .15s, color .15s; }
.admin-body a.jn-tag { color: var(--kd-tx); }
.jn-tag .n { font: 500 10.5px var(--kd-mono); color: var(--kd-di); }
.admin-body a.jn-tag:hover { border-color: var(--kd-cy); color: var(--kd-cy); text-decoration: none; }
.admin-body .jn-tag.on { border-color: var(--kd-cy); background: color-mix(in srgb, var(--kd-cy) 12%, transparent); color: var(--kd-cy); }
.jn-tag.s1 { font-size: 13px; }
.jn-tag.s2 { font-size: 14px; font-weight: 700; }
.jn-tagline { display: flex; gap: 4px; flex-wrap: wrap; max-width: 220px; }
.jn-tagline .jn-tag, .jn-tags-preview .jn-tag { padding: 1px 7px; font-size: 10.5px; }

/* Répartition : barres (les lignes d'app sont des liens-filtres) */
.jn-bars { display: flex; flex-direction: column; gap: 8px; }
.jn-bar { --c: var(--kd-cy); display: grid; grid-template-columns: minmax(90px, 40%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; text-decoration: none; }
.admin-body .jn-bar { color: var(--kd-tx); }
.admin-body a.jn-bar:hover { text-decoration: none; }
a.jn-bar:hover .k { color: var(--kd-cy); }
.jn-bar .k { color: var(--kd-mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-bar .t { height: 8px; border-radius: 4px; background: var(--kd-panel-3); overflow: hidden; }
.jn-bar .t i { display: block; height: 100%; width: var(--w, 0%); border-radius: 4px; background: var(--c); }
.jn-bar.kd { --c: var(--kd-fire); } .jn-bar.ke { --c: var(--kd-echo); } .jn-bar.violet { --c: var(--kd-vio); } .jn-bar.warn { --c: var(--kd-warn); }
.jn-bar .n { font: 600 11px var(--kd-mono); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.jn-bar .p { color: var(--kd-di); margin-left: 6px; }

/* ── Filtres ─────────────────────────────────────────────────────────── */
.jn-filters .kd-field select { min-width: 140px; }
.jn-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 11.5px; }
.admin-body .jn-chip { text-decoration: none; }
.admin-body .jn-chip:hover { --c: var(--kd-err); text-decoration: none; }
.jn-chip b { font-weight: 700; }

/* ── Tableau ─────────────────────────────────────────────────────────── */
.jn-table .act form { display: inline-block; margin: 0 0 0 4px; }
.jn-table tr.draft .jn-title { color: var(--kd-mu); }
.jn-empty-row:hover { background: none; }

/* Article : vignette + titre + slug + chapeau. La teinte de la
   vignette-initiale est dérivée de l'id (donnée), mêlée au fond du thème. */
.jn-art { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jn-thumb { --h: 200; flex: none; width: 56px; height: 40px; border-radius: 8px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: var(--kd-tx); letter-spacing: .02em;
  background: linear-gradient(135deg, color-mix(in srgb, hsl(var(--h) 60% 50%) 45%, var(--kd-panel-2)), color-mix(in srgb, hsl(calc(var(--h) + 40) 60% 45%) 25%, var(--kd-panel-2)));
  box-shadow: inset 0 0 0 1px var(--kd-line-2); }
.jn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jn-art .body { min-width: 0; }
.jn-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.jn-slug { font: 11px var(--kd-mono); color: var(--kd-di); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.jn-excerpt { font-size: 11.5px; color: var(--kd-mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; margin-top: 2px; }

/* ── Fiche : en-tête ─────────────────────────────────────────────────── */
.jn-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; text-decoration: none; align-self: flex-start; }
.admin-body .jn-back { color: var(--kd-mu); }
.admin-body .jn-back:hover { color: var(--kd-cy); text-decoration: none; }
.jn-back .kd-i { transform: rotate(90deg); width: 14px; height: 14px; }
.jn-id { --c: var(--kd-vio); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 12%, transparent), transparent 50%), var(--kd-panel); }
.jn-id.live { --c: var(--kd-ok); }
.jn-id.sched { --c: var(--kd-warn); }
.jn-id .jn-thumb { width: 96px; height: 64px; font-size: 24px; border-radius: 12px; }
.jn-id .who { flex: 1 1 260px; min-width: 0; }
.jn-id .who h1 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.jn-id .who .slug { font: 12px var(--kd-mono); color: var(--kd-di); margin-top: 3px; overflow-wrap: anywhere; }
.jn-id .badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.jn-id .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px 16px; }
.jn-id .meta div { font: 600 10px var(--kd-mono); color: var(--kd-di); text-transform: uppercase; letter-spacing: .1em; }
.jn-id .meta b { display: block; font: 600 14px 'Inter', sans-serif; color: var(--kd-tx); text-transform: none; letter-spacing: 0; margin-top: 3px; font-variant-numeric: tabular-nums; }
.jn-id .meta b small { font-size: 11px; color: var(--kd-mu); font-weight: 500; }

/* Colonnes de la fiche (≠ .journal-article .jn-cols, rendu public) */
.jn-form { display: flex; flex-direction: column; gap: 14px; }
.jn-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 14px; align-items: flex-start; }
.jn-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Cartes de la fiche : titre de section façon kd-card-h + aide à droite */
.jn-card h2 { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.jn-card h2 .hint { font-size: 11px; color: var(--kd-di); font-weight: 500; }
.jn-card .note { font-size: 11.5px; color: var(--kd-mu); margin: 0 0 12px; line-height: 1.45; }
.jn-card .admin-form-row:last-child { margin-bottom: 0; }
.jn-card.danger { border-color: color-mix(in srgb, var(--kd-err) 40%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--kd-err) 6%, transparent), transparent 60%), var(--kd-panel); }
.jn-card.danger h2 { color: var(--kd-err); }
.jn-intro { margin: 0 0 10px; }
.jn-addbar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.jn-summary { cursor: pointer; list-style: none; }
.jn-summary::-webkit-details-marker { display: none; }
.jn-summary h2 { margin: 0; justify-content: flex-start; }
.jn-summary h2 .hint { margin-left: auto; }
.jn-summary h2::before { content: "▸"; color: var(--kd-di); margin-right: 6px; }
details[open] > .jn-summary h2::before { content: "▾"; }
details[open] > .jn-summary { margin-bottom: 10px; }

.jn-req { color: var(--kd-fire); }
.jn-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; font-size: 13px; padding: 5px 0; }
.jn-check .jn-muted { font-weight: 400; }
.jn-checks { display: flex; gap: 16px; flex-wrap: wrap; }
.jn-url { font: 11.5px var(--kd-mono); color: var(--kd-di); margin-top: 6px; word-break: break-all; }
.jn-url b { color: var(--kd-cy); font-weight: 600; }
.jn-tags-preview { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; min-height: 4px; }

/* Compteur mots / lecture sous l'éditeur (pastilles basculées par journal.js) */
.jn-counter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 12px; color: var(--kd-mu); }
.jn-counter b { color: var(--kd-tx); font-variant-numeric: tabular-nums; font-weight: 700; }
.jn-counter .pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; background: var(--kd-panel-2); border: 1px solid var(--kd-line-2); }
.jn-counter .pill.ok { border-color: color-mix(in srgb, var(--kd-ok) 45%, transparent); }
.jn-counter .pill.warn { border-color: color-mix(in srgb, var(--kd-warn) 45%, transparent); color: var(--kd-warn); }

/* Méta (clé / valeur) */
.jn-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 12.5px; margin: 0; }
.jn-kv dt { color: var(--kd-mu); white-space: nowrap; }
.jn-kv dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* Statut + actions de publication */
.jn-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.jn-status .state { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.jn-status .state.ok { color: var(--kd-ok); }
.jn-status .state.warn { color: var(--kd-warn); }
.jn-status .state.draft { color: var(--kd-mu); }
.jn-status .txt { font-size: 12px; color: var(--kd-mu); line-height: 1.4; flex: 1; min-width: 140px; }
.jn-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jn-inline.mb { margin-bottom: 12px; }
.jn-inline.mt { margin-top: 12px; }

/* Couverture */
.jn-cover { position: relative; margin-bottom: 10px; }
.jn-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--kd-r-sm); border: 1px solid var(--kd-line); display: block; }
.jn-cover .tag { position: absolute; left: 8px; top: 8px; background: var(--kd-panel); }
.jn-cover img[hidden] { display: none; }
.jn-cover.preview img { outline: 2px dashed var(--kd-cy); outline-offset: 2px; }
.jn-file { display: block; width: 100%; font-size: 12.5px; color: var(--kd-tx); }
.jn-file::file-selector-button { margin-right: 8px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--kd-line-2); background: var(--kd-panel-2); color: var(--kd-tx); font: inherit; font-size: 12px; cursor: pointer; }
.jn-file::file-selector-button:hover { border-color: var(--kd-cy); }

/* Pièces jointes */
.jn-atts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.jn-att { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--kd-r-sm);
  background: var(--kd-panel-2); border: 1px solid var(--kd-line); }
.jn-att .ico { font-size: 18px; width: 26px; text-align: center; }
.jn-att .nm { min-width: 0; }
.jn-att .nm a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; text-decoration: none; }
.admin-body .jn-att .nm a { color: var(--kd-tx); }
.admin-body .jn-att .nm a:hover { color: var(--kd-cy); }
.jn-att .sz { font: 11px var(--kd-mono); color: var(--kd-mu); white-space: nowrap; }
.jn-att .ext { --c: var(--kd-mu); font: 10px var(--kd-mono); text-transform: uppercase; padding: 1px 6px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); }
.jn-att .ext.video { --c: var(--kd-vio); }
.jn-att .ext.img { --c: var(--kd-ok); }
.jn-att .ext.pdf { --c: var(--kd-err); }
.jn-att video { grid-column: 1 / -1; width: 100%; max-height: 260px; border-radius: 8px; background: var(--kd-bg); display: block; }
.jn-att .jn-sub { grid-column: 1 / -1; }

/* Barre d'actions collante (bas) — « is-dirty » posé par journal.js */
.jn-actions { position: sticky; bottom: 0; z-index: 4; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: color-mix(in srgb, var(--kd-panel) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--kd-line-2); border-radius: var(--kd-r); padding: 12px 16px; box-shadow: var(--kd-shadow); }
.jn-actions .grow { flex: 1; }
.jn-actions .dirty { font-size: 11.5px; color: var(--kd-warn); display: none; align-items: center; gap: 6px; }
.jn-actions .dirty i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.jn-actions.is-dirty .dirty { display: inline-flex; }

/* Erreurs de validation (formulaire, pas un flash de session) */
.jn-errors ul { margin: 6px 0 0 18px; padding: 0; }

/* ── EasyMDE aux couleurs du thème ───────────────────────────────────── */
.EasyMDEContainer .CodeMirror { background: var(--kd-input) !important; color: var(--kd-tx) !important; border: 1px solid var(--kd-line-2);
  border-radius: 0 0 9px 9px; font-family: var(--kd-mono); font-size: 13px; min-height: 460px; }
.EasyMDEContainer .CodeMirror-scroll, .EasyMDEContainer .CodeMirror-gutters { background: transparent !important; border: 0; }
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--kd-cy) !important; }
.EasyMDEContainer .CodeMirror-selected { background: color-mix(in srgb, var(--kd-cy) 20%, transparent) !important; }
.EasyMDEContainer .cm-s-easymde .cm-header, .EasyMDEContainer .cm-header { color: var(--kd-tx); }
.EasyMDEContainer .cm-header-1 { font-size: 1.5em; } .EasyMDEContainer .cm-header-2 { font-size: 1.25em; } .EasyMDEContainer .cm-header-3 { font-size: 1.1em; }
.EasyMDEContainer .cm-strong { color: var(--kd-tx); }
.EasyMDEContainer .cm-em { color: var(--kd-mu); }
.EasyMDEContainer .cm-link, .EasyMDEContainer .cm-url { color: var(--kd-cy); }
.EasyMDEContainer .cm-quote { color: var(--kd-mu); font-style: italic; }
.EasyMDEContainer .cm-comment { color: var(--kd-ok); background: var(--kd-panel-2); }
.EasyMDEContainer .cm-string { color: var(--kd-warn); }
.EasyMDEContainer .editor-toolbar { position: sticky; top: 0; z-index: 3; background: var(--kd-panel-2); border: 1px solid var(--kd-line-2); border-bottom: 0; border-radius: 9px 9px 0 0; opacity: 1; }
.EasyMDEContainer .editor-toolbar button { color: var(--kd-mu) !important; }
.EasyMDEContainer .editor-toolbar button:hover, .EasyMDEContainer .editor-toolbar button.active { background: var(--kd-hover) !important; border-color: transparent !important; color: var(--kd-tx) !important; }
.EasyMDEContainer .editor-toolbar i.separator { border-left: 1px solid var(--kd-line-2); border-right: 0; }
.EasyMDEContainer .editor-statusbar { color: var(--kd-di); font-size: 11px; }
.EasyMDEContainer .editor-preview, .EasyMDEContainer .editor-preview-side { background: var(--kd-panel); color: var(--kd-tx); border-color: var(--kd-line-2); }
.EasyMDEContainer .editor-preview pre, .EasyMDEContainer .editor-preview code { background: var(--kd-panel-2); }
.EasyMDEContainer .CodeMirror.CodeMirror-fullscreen { background: var(--kd-bg); }

/* ── Responsive (admin) ──────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .jn-cols { grid-template-columns: minmax(0, 1fr); }
  .jn-title, .jn-slug, .jn-excerpt { max-width: 260px; }
}
@media (max-width: 767px) {
  .jn-span2 { grid-column: auto; }
  .jn-filters .kd-field { flex: 1 1 45%; }
  .jn-filters .kd-field select { min-width: 0; width: 100%; }
  .jn-table .jn-art { justify-content: flex-end; text-align: left; }
  .jn-title, .jn-slug, .jn-excerpt { max-width: 200px; }
  .jn-id .meta { width: 100%; }
  .jn-actions { margin: 0 calc(-1 * var(--kd-pad)); border-radius: var(--kd-r) var(--kd-r) 0 0; bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* ── Rendu PUBLIC du constructeur par blocs (article, v1.27) ──────────
   Scope OBLIGATOIRE sous .journal-article : le module admin réutilise déjà
   .jn-cols/.jn-col pour la grille 2 colonnes de la FICHE d'édition
   (règle plus haut, § Colonnes) — sans ce scope, ces règles casseraient
   cette mise en page admin. `.journal-article` n'englobe QUE le corps
   rendu d'un article public (`journal/article.php`), jamais la fiche
   d'édition : zéro collision possible.
   Chargement : ce fichier est déjà chargé par l'admin ; côté PUBLIC,
   `journal/article.php` imprime son propre <link kd_asset(...)> dans la
   section `content` (partagée par les deux layouts KiloDelta ET KiloEcho —
   `kiloecho/layout.php` ne définit pas de section `head_extra`). */
.journal-article .jn-cols { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:22px 0; }
.journal-article .jn-cols-3 { grid-template-columns:repeat(3,1fr); }
.journal-article .jn-col { min-width:0; }
.journal-article .jn-col > *:first-child { margin-top:0; }
.journal-article .jn-fig { margin:22px 0; }
.journal-article .jn-fig.jn-fig-center { max-width:640px; margin-left:auto; margin-right:auto; }
.journal-article .jn-fig img { display:block; width:100%; height:auto; border-radius:10px; border:1px solid rgba(255,255,255,.08); }
.journal-article .jn-fig figcaption { margin-top:8px; font-size:12.5px; color:var(--text-muted); text-align:center; }
.journal-article .jn-divider { border:none; border-top:1px solid rgba(255,255,255,.1); margin:28px 0; }
.journal-article .jn-spacer { width:100%; }
.journal-article .jn-html { margin:16px 0; }
@media (max-width:720px) {
  /* Empile les colonnes sous 720px (mobile) — demande explicite du
     constructeur Journal : illisible en grille sur petit écran. */
  .journal-article .jn-cols,
  .journal-article .jn-cols-3 { grid-template-columns:1fr; gap:16px; }
}