/* ================================================================
   pages-public.css — espace public des pages publiées (lecture seule)
   Chargé uniquement par pages/templates/pages/public/*.html, jamais
   globalement. Tokens partagés (--text-*, --accent, --border, --bg-*,
   --shell-radius, --shadow-sm/md) déjà valides dans les deux coquilles.
   ================================================================ */

.pub-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* ── Fil d'Ariane collection ── */
.pub-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.pub-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.pub-breadcrumb a:hover { color: var(--accent); }

/* ── En-tête de page ── */
.pub-page-header { margin-bottom: 2rem; }
.pub-page-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 0.5rem; display: block; }
.pub-page-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}
.pub-page-meta { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; }

/* ── Grille de collections / pages (collections_home, collection_detail) ── */
.pub-collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.pub-collection-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--shell-radius, 8px);
    padding: 1.2rem;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-white);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pub-collection-card:hover {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    transform: translateY(-2px);
}
.pub-collection-card-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--shell-radius, 8px);
    font-size: 1.2rem;
}
.pub-collection-card-name { font-weight: 700; font-size: 1.05rem; }
.pub-collection-card-desc { color: var(--text-secondary); font-size: 0.85rem; }
.pub-collection-card-count { color: var(--text-muted); font-size: 0.8rem; margin-top: auto; }

/* ── Contenu — typographie de lecture ── */
.pub-content { font-size: 1rem; line-height: 1.75; color: var(--text-primary); }

/* .pub-block réinitialise la marge navigateur par défaut des éléments
   typographiques (p/blockquote/hN) — DOIT rester déclaré AVANT la règle
   d'espacement ci-dessous : même spécificité (une classe), donc l'ordre
   du fichier tranche. Si inversé, "margin: 0" écrase silencieusement
   "margin-top: 1rem" sur tout bloc portant uniquement .pub-block (bug
   constaté : callout collé au bloc suivant, aucune marge visible). */
.pub-block { margin: 0; }

.pub-content > * + * { margin-top: 1rem; }

h1.pub-block { font-size: 1.7rem; font-weight: 800; margin-top: 2rem; }
h2.pub-block { font-size: 1.4rem; font-weight: 700; margin-top: 1.75rem; }
h3.pub-block { font-size: 1.2rem; font-weight: 700; margin-top: 1.5rem; }
h4.pub-block, h5.pub-block, h6.pub-block { font-size: 1.05rem; font-weight: 700; margin-top: 1.25rem; }

blockquote.pub-block {
    border-left: 3px solid var(--accent);
    padding: 0.25rem 0 0.25rem 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.pub-block-divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

.pub-block-list { padding-left: 1.5rem; }
.pub-block-list li { margin-bottom: 0.35rem; }

.pub-block-todo-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.pub-block-todo-row input[type="checkbox"] { margin-top: 0.3rem; accent-color: var(--accent); }
.pub-block-todo-text.is-checked { text-decoration: line-through; color: var(--text-muted); }

.pub-block-code-wrap { position: relative; }
.pub-block-code-lang {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); margin-bottom: 0.3rem;
}
.pub-block-code, .pub-block-mermaid {
    background: var(--bg-lighter); border: 1px solid var(--border);
    border-radius: var(--shell-radius, 8px); padding: 1rem;
    font-family: var(--shell-font-mono, ui-monospace, monospace);
    font-size: 0.85rem; overflow-x: auto; white-space: pre;
}
.pub-block-mermaid.is-rendered { background: none; border: none; padding: 0; white-space: normal; text-align: center; }
.pub-block-mermaid.is-rendered svg { max-width: 100%; height: auto; }

.pub-block-equation { text-align: center; padding: 0.5rem 0; overflow-x: auto; }

.pub-block-callout {
    display: flex; gap: 0.6rem; align-items: flex-start;
    background: var(--accent-soft, rgba(79,107,220,0.1)); border-left: 3px solid var(--accent);
    border-radius: var(--shell-radius, 8px); padding: 0.9rem 1.1rem;
}
.pub-block-callout-icon { flex-shrink: 0; font-size: 1.05rem; line-height: 1.5; }
.pub-block-callout-body { flex: 1; min-width: 0; }

/* Variantes — mêmes tokens sémantiques que le picker privé (themes.css). */
.pub-block-callout.variant-info    { background: color-mix(in srgb, var(--color-info) 12%, transparent);    border-left-color: var(--color-info); }
.pub-block-callout.variant-warning { background: var(--color-warning-bg, color-mix(in srgb, var(--color-warning) 14%, transparent)); border-left-color: var(--color-warning); }
.pub-block-callout.variant-danger  { background: color-mix(in srgb, var(--color-danger) 12%, transparent);  border-left-color: var(--color-danger); }
.pub-block-callout.variant-success { background: color-mix(in srgb, var(--color-success) 12%, transparent); border-left-color: var(--color-success); }
.pub-block-callout.variant-note    { background: var(--bg-lighter); border-left-color: var(--text-muted); }

.pub-block-image-wrap img { max-width: 100%; border-radius: var(--shell-radius, 8px); display: block; }

.pub-block-table-wrap { overflow-x: auto; }
.pub-block-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pub-block-table td { border: 1px solid var(--border); padding: 0.5rem 0.7rem; min-height: 1.6em; line-height: 1.6; }
.pub-block-table td:empty::before { content: "\00a0"; }

.pub-block-toggle { border: 1px solid var(--border); border-radius: var(--shell-radius, 8px); padding: 0.6rem 0.9rem; }
.pub-block-toggle summary { cursor: pointer; font-weight: 600; }
.pub-block-toggle[open] summary { margin-bottom: 0.5rem; }

.pub-block-placeholder {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--bg-lighter); border: 1px dashed var(--border);
    border-radius: var(--shell-radius, 8px); padding: 0.9rem 1.1rem;
    color: var(--text-muted); font-size: 0.88rem;
}

.pub-block-sub-page {
    display: flex; align-items: center; gap: 0.6rem;
    border: 1px solid var(--border); border-radius: var(--shell-radius, 8px);
    padding: 0.7rem 1rem; text-decoration: none; color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}
a.pub-block-sub-page:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.pub-block-sub-page.is-private { color: var(--text-muted); cursor: default; }
.pub-block-sub-page-icon { font-size: 1.1rem; }
.pub-block-sub-page-title { font-weight: 600; }

.pub-block-columns { display: grid; gap: 1.5rem; }
.pub-block-column > * + * { margin-top: 1rem; }

.pub-block-embed-empty { display: none; } /* jamais atteint côté public (embed déjà rempli avant publication) */
.block-embed-card, .block-embed-youtube, .block-embed-loading { }

/* ── Mentions inline (liens [[Page]] réécrits par pages/public.py) ── */
.page-mention { color: var(--accent); font-weight: 500; text-decoration: none; }
.page-mention:hover { text-decoration: underline; }
span.page-mention { color: var(--text-muted); cursor: default; }