@font-face {
    font-family: "Inter";
    src: url("fonts/inter/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/inter/InterVariable-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --bg: #f6f7f9;
    --panel: #ffffff;
    --panel-alt: #f9fafb;
    --border: #dde1e6;
    --border-strong: #c0c7d0;
    --text: #1a1d21;
    --text-soft: #40474f;
    --muted: #6b7280;
    --muted-strong: #4b5563;
    --accent: #0d6efd;
    --accent-soft: #cfe2ff;
    --accent-strong: #0a58ca;
    --success: #198754;
    --success-soft: #d1e7dd;
    --error: #dc2626;
    --error-soft: #fee2e2;
    /* L'attente d'une relecture : ni une erreur, ni un succes. L'orange se
       distingue du rouge `--signalement`, qui appelle une correction. */
    --attente: #d97706;
    --attente-soft: #fef3c7;
    --attente-strong: #b45309;

    --signalement: #cc4125;
    --signalement-strong: #a61c00;
    --info: #2563eb;

    --primary: var(--accent);
    --primary-soft: var(--accent-soft);
    --primary-strong: var(--accent-strong);

    --font-mono: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-code: ui-monospace, "Cascadia Code", "Cascadia Mono", "SF Mono", Consolas, Monaco, monospace;
}

* { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }
html, body { height: 100%; margin: 0; }

* {
    scrollbar-width: thin;
    scrollbar-color: #c7cdd6 transparent;
}
*::-webkit-scrollbar { width: 3px; height: 3px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    min-height: 32px;
    background: #c7cdd6;
    background-clip: padding-box;
    border: 0;
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: #9ca5b2; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
}

a { color: var(--info); text-decoration: underline; }
a:hover { color: #1d4ed8; }

code, kbd, samp { font-family: var(--font-code); }

.muted { color: var(--muted); }
.small { font-size: .78rem; }

.spinner {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin-right: .4rem;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Colonne 1 : le rail ============ */
#app-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    padding: 1.2rem .9rem;
    background: var(--bg);
    overflow-y: auto;
}
#app-header .brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: inherit;
    text-decoration: none;
}
#app-header .brand:hover { color: inherit; text-decoration: none; }
#app-header .brand-logo { width: 64px; height: auto; display: block; }

.rail-presentation,
.rail-guide li {
    text-align: justify;
    hyphens: auto;
}
.rail-presentation {
    margin: .9rem 0 0;
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.5;
}
.rail-presentation strong { color: var(--text); }
.rail-presentation code { font-size: .95em; }

.rail-guide {
    width: 100%;
    margin: 1.1rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--border);
}
.rail-guide-titre {
    margin: 0 0 .4rem;
    font-size: .68rem;
    letter-spacing: .06em;
}
.rail-guide ul {
    margin: 0;
    padding-left: .9rem;
    color: var(--muted-strong);
    font-size: .72rem;
    line-height: 1.45;
}
.rail-guide li { margin: 0 0 .4rem; }
.rail-guide li:last-child { margin-bottom: 0; }
.rail-guide strong { color: var(--text); }
.rail-guide code { font-size: .95em; }
.rail-guide a { color: var(--accent); text-decoration: none; }
.rail-guide a:hover { text-decoration: underline; }

.mot-logo {
    height: 12px;
    width: auto;
    vertical-align: -1px;
    image-rendering: pixelated;
}

.rail-tchap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 1.1rem 0 0;
}
.rail-tchap img {
    display: block;
    width: 28px;
    height: auto;
}
.rail-tchap a { line-height: 0; }
.rail-tchap a:hover img { opacity: .75; }

.rail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;

    width: 100%;
    margin: .9rem 0 0;
}

.rail-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--panel);
    color: var(--muted);
    font-size: .8rem;
    text-decoration: none;
    cursor: pointer;
}

.rail-icone:hover {
    background: #111827;
    border-color: #111827;
    color: #fff;
    text-decoration: none;
}

/* ============ Boutons (noirs, comme Meta-MD) ============ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #111827;
    color: #fff;
    font-family: var(--font-mono);
    font-size: .8rem;

    line-height: 1.2;
    min-height: 2rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: #1f2937; color: #fff; text-decoration: none; }
.btn.ghost {
    background: var(--panel);
    border-color: var(--border);
    color: var(--text);
}
.btn.ghost:hover { background: var(--panel-alt); border-color: var(--muted); color: var(--text); }
.btn.primary { background: var(--accent); }
.btn.primary:hover { background: var(--accent-strong); }

.btn.danger { background: var(--signalement); }
.btn.danger:hover { background: var(--signalement-strong); }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }

.btn .ext { font-family: var(--font-code); font-size: .78rem; }

.btn.icone-seule {
    width: 1.9rem;
    height: 1.9rem;

    min-height: 1.9rem;
    padding: 0;
    justify-content: center;
    flex: 0 0 auto;
}

/* ============ Lecteur : trois colonnes ============ */
body.edumd-layout {
    display: grid;
    grid-template-columns: calc(15rem + 10px) minmax(0, 1fr) 20rem;
    height: 100%;
    overflow: hidden;
}
#app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.edumd-layout.en-lecture { grid-template-columns: calc(15rem + 10px) minmax(0, 1fr); }
body.en-lecture .filters-panel { display: none; }

@media (max-width: 1400px) {
    body.edumd-layout { grid-template-columns: calc(13rem + 10px) minmax(0, 1fr) 18rem; }
    body.edumd-layout.en-lecture { grid-template-columns: calc(13rem + 10px) minmax(0, 1fr); }
}

@media (max-width: 1100px) {
    body.edumd-layout {
        display: block;
        height: auto;
        overflow: auto;
    }

    #app-header {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: .8rem 1.5rem;
        padding: .9rem 1.5rem;
    }

    #app-header .brand { order: 1; }

    .rail-actions { order: 2; width: auto; margin: 0 0 0 auto; }

    .rail-guide { order: 4; margin-top: .2rem; }
    .rail-presentation {
        order: 3;
        margin: 0;

        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }
    #app-main, .filters-panel, .viewer-panel { overflow: visible; }
    .filters-panel { border-left: 0; border-top: 1px solid var(--border); }
    #filters-content, .documents-list { overflow: visible; }
}

.filters-panel,
.viewer-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 1rem 1.2rem;
    background: var(--bg);
    overflow: hidden;
}
.filters-panel {
    border-left: 1px solid var(--border);
    overflow-y: auto;
}
.viewer-panel { flex: 1 1 auto; }

.viewer-panel.empty .viewer-head { display: none; }
.viewer-panel.empty .viewer-content { display: none; }
.viewer-panel:not(.empty) .documents-list { display: none; }
.viewer-panel:not(.empty) .programmes-progress { display: none; }
.viewer-panel.empty .viewer-meta { display: none; }

h2 {
    margin: 0 0 .5rem;
    font-size: .82rem;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ============ Selecteurs corpus / document ============ */
.corpus-picker,
.documents-picker {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .9rem;
}
.corpus-picker label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}
.corpus-picker select,
.documents-picker select {
    width: 100%;
    padding: .4rem .55rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--panel);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: .8rem;
}
.corpus-picker select:disabled,
.documents-picker select:disabled { color: var(--muted); }
.results-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}
.results-head h2 { margin: 0; }

/* ============ Filtres ============ */
.filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
}
.filters-head h2 { margin: 0; }
.filters-head .btn:not(.icone-seule) { padding: .25rem .5rem; font-size: .72rem; }
.filters-head .btn.icone-seule { font-size: .75rem; }
#filters-content {
    flex: 0 0 auto;
    overflow: visible;
    padding-right: .2rem;
}
.filter-group {
    padding: .6rem 0;
    border-bottom: 1px solid var(--border);
}
.filter-group:last-child { border-bottom: 0; }
.filter-label {
    display: block;
    margin-bottom: .3rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted-strong);
}
.filter-desc {
    display: block;
    margin-bottom: .3rem;
    font-size: .72rem;
    color: var(--muted);
}
.filter-enum {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.filter-enum label {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: .2rem .3rem;
    border-radius: 3px;
    font-size: .78rem;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.filter-enum label:hover { background: var(--panel-alt); }
.filter-enum label > span:first-of-type { min-width: 0; }
.filter-enum input { margin: .25rem 0 0; flex: 0 0 auto; }
.filter-enum .count {
    margin-left: auto;
    color: var(--muted);
    font-size: .7rem;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    padding: .1rem 0;
}
.filter-tag {
    padding: .05rem .4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted-strong);
    font-family: inherit;
    font-size: .66rem;
    line-height: 1.5;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.filter-tag:hover { border-color: var(--muted); color: var(--text); }
.filter-tag.actif {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.filter-tag.actif:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.filter-text {
    width: 100%;
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--panel);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: .78rem;
}
.filters-summary {
    padding-top: .5rem;
    color: var(--muted);
    font-size: .72rem;
}

/* ============ Avancement des programmes ============ */
.programmes-progress {
    flex: 0 0 auto;
    margin-bottom: 3rem;
}
.programmes-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .7rem;
}
.programmes-progress-head h1 {
    margin: 0;
    color: var(--accent);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.programmes-progress-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem 1rem;
}
.programme-progress-item {
    display: flex;
    flex-direction: column;
}
.programme-progress-label {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    margin-bottom: .25rem;
    color: var(--text-soft);
    font-size: .72rem;
}
.programme-progress-label span:first-child {
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.programme-progress-label span:last-child {
    flex: 0 0 auto;
    color: var(--muted-strong);
    font-size: .66rem;
}
.programme-progress-track {
    height: .45rem;
    margin-top: auto;
    overflow: hidden;
    border-radius: 999px;
    background: var(--accent-soft);
}
.programme-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

@media (max-width: 900px) {
    .programmes-progress-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .programmes-progress-head { align-items: flex-start; flex-direction: column; gap: .2rem; }
    .programmes-progress-list { grid-template-columns: 1fr; }
}

/* ============ Liste des documents (accueil) ============ */
.documents-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    align-content: start;
    gap: .8rem;
    padding-right: .2rem;
}
.doc-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .8rem .9rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--panel);
}
.doc-card:hover { border-color: var(--border-strong); }

.doc-card-tete {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.doc-card-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.4;
}

.doc-card-dl {
    flex: 0 0 auto;
    gap: .25rem;
    padding: .16rem .36rem;
    font-size: .62rem;
}
.doc-card-dl .ext { font-size: .62rem; }
.doc-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.doc-card-badge {
    padding: .05rem .4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel-alt);
    color: var(--muted-strong);
    font-size: .66rem;
    line-height: 1.5;
}
.doc-card-badge.sans-pdf {
    border-color: var(--warning, #eab308);
    background: var(--warning-soft, #fef9c3);
    color: #a16207;
}

.doc-card-badge.abroge {
    border-color: var(--error);
    background: var(--error-soft);
    color: #b91c1c;
    font-weight: 600;
}
.doc-card-resume {
    margin: 0;
    color: var(--text-soft);
    font-family: var(--font-sans);
    font-size: .8rem;
    line-height: 1.45;

    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.doc-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: auto;
    padding-top: .2rem;
}
.doc-card-links .btn {
    gap: .35rem;
    min-height: 1.65rem;
    padding: .18rem .5rem;
    font-size: .74rem;
}
.doc-card-licence {
    display: inline-flex;
    align-self: center;
    height: calc(1.65rem - 1px);
    line-height: 0;
}
.doc-card-licence img {
    display: block;
    width: auto;
    height: 100%;
}
.doc-card-licence:hover img { opacity: .75; }

/* ============ Panneau de lecture ============ */
.viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .6rem;
}
.viewer-title-line {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.viewer-title-line .btn { padding: .25rem .5rem; font-size: .72rem; flex: 0 0 auto; }
.viewer-title-line .btn.icone-seule { padding: 0; font-size: .75rem; }
.viewer-head h2 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.viewer-head-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
}
.viewer-info {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: .95rem;
    cursor: pointer;
    padding: 0;
}
.viewer-info:hover { color: var(--muted-strong); }

.viewer-content {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 15rem;
    gap: 1rem;
    min-height: 0;
}
@media (max-width: 1100px) {
    .viewer-content { grid-template-columns: 1fr; }
    .viewer-side { display: none; }
}

.viewer-body {
    min-height: 0;
    overflow-y: auto;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--panel);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
}

/* ============ Sommaire ============ */

.viewer-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-left: .35rem;
    font-family: var(--font-sans);
}

.toc-option {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem 0 .5rem .4rem;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.35;
    cursor: pointer;
}
.toc-option:hover { color: var(--text); }
.toc-option input { margin: 0; flex: 0 0 auto; }

.toc-option span { position: relative; top: 2px; }

.viewer-toc {
    min-height: 0;
    overflow-y: auto;
    padding: .2rem 0 .7rem;
    font-family: var(--font-sans);
}
.viewer-toc-title {
    margin-bottom: .55rem;
    padding-left: .4rem;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.viewer-toc-list {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.viewer-toc a {
    display: block;
    padding: .22rem .4rem;
    border-radius: 3px;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.35;
    text-decoration: none;
    transition: color .12s, background .12s;
}
.viewer-toc a:hover { color: var(--text); background: var(--panel-alt); }
.viewer-toc a.active {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 600;
}
.viewer-toc .toc-level-2 { padding-left: 1rem; }
.viewer-toc .toc-level-3 { padding-left: 1.6rem; }

/* ============ Metadonnees ============ */
.metadata-dialog {
    width: min(46rem, 92vw);
    max-height: 82vh;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    overflow: hidden;
}
.metadata-dialog::backdrop { background: rgb(17 24 39 / 35%); }
.metadata-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--border);
}
.metadata-dialog-head h2 { margin: 0; }
.metadata-dialog-close {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
}
.metadata-dialog-close:hover { color: var(--accent-strong); }
.metadata-dialog .viewer-meta {
    max-height: calc(82vh - 3.2rem);
    overflow-y: auto;
    padding: .9rem 1rem;
}
.viewer-meta dl {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: .3rem .9rem;
    margin: 0;
    font-size: .8rem;
}
.viewer-meta dt {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted-strong);

    overflow-wrap: anywhere;
}
.viewer-meta dd { margin: 0; overflow-wrap: anywhere; }
.viewer-meta a { color: var(--accent); text-decoration: none; }
.viewer-meta a:hover { text-decoration: underline; }
.metadata-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}
.metadata-tag {
    padding: .05rem .4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel-alt);
    color: var(--muted-strong);
    font-size: .7rem;
}

/* ============ Rendu Markdown ============ */

/* ============ Visualiseur PDF / Markdown ============ */
body.viewer-page { overflow: hidden; }

.viewer-topbar {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    font-size: .8rem;
    flex-shrink: 0;
}
.viewer-topbar .viewer-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--panel);
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: .78rem;
    text-decoration: none;
    cursor: pointer;
}
.viewer-topbar .viewer-back:hover { background: var(--panel-alt); color: var(--text); }
.viewer-topbar .sep { color: var(--border-strong); }
.viewer-topbar .file {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.viewer-topbar .topbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.viewer-topbar .topbar-actions #btn-signaler { margin-left: 1.4rem; }

.viewer-split {
    flex: 1;
    display: grid;
    grid-template-columns: 40% 1fr 22rem;
    min-height: 0;
}
@media (max-width: 1100px) {
    .viewer-split {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(300px, auto);
        overflow: auto;
    }
}
.viewer-pane {
    overflow: auto;
    min-width: 0;
    background: var(--panel);
}
.viewer-pane.pdf {
    border-right: 1px solid var(--border);
    background: #525659;
}
.viewer-pane.pdf iframe { width: 100%; height: 100%; border: 0; display: block; }
.viewer-pane.pdf .viewer-no-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Sans cela, les marges par defaut du `<p>` s'ajoutent aux 100 % de
       hauteur et font defiler le panneau d'un demi-pouce dans le vide. */
    margin: 0;
    padding: 2rem;
    color: #e5e7eb;
    font-size: .8rem;
    text-align: center;
}

/* Le panneau ne defile pas : c'est `#md-content` qui porte l'ascenseur.
   Sans `hidden`, l'`auto` herite de `.viewer-pane` ouvre un second ascenseur
   des qu'un enfant deborde d'un pixel - la bulle de signalement posee en
   absolu, par exemple - et le lecteur voit deux barres cote a cote. */
.viewer-pane.md {
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 1.2rem;
    background: var(--panel);
    overflow: hidden;

    position: relative;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
}

.viewer-pane.md #md-content { flex: 1 1 auto; overflow: auto; padding: 0 .5rem 0 0; }
.viewer-pane.meta {
    padding: 1rem 1rem 1.2rem;
    border-left: 1px solid var(--border);
    background: var(--panel);
    font-family: var(--font-sans);
}

.viewer-pane.meta .viewer-meta dl {
    grid-template-columns: minmax(5rem, 7rem) 1fr;
    gap: .45rem .7rem;
    font-size: .78rem;
}
.viewer-pane.meta .viewer-meta dl + dl {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--border);
}
.viewer-pane.meta .viewer-meta dl.fm-technical dt,
.viewer-pane.meta .viewer-meta dl.fm-technical dd {
    color: var(--muted);
    font-size: .7rem;
}
.viewer-pane .pane-title {
    margin: 0 0 .5rem;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.viewer-pane .pane-title i { color: inherit; }
.viewer-error { color: var(--error); font-size: .85rem; }

.viewer-md-fm {
    margin-bottom: .8rem;
    padding: .5rem .7rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--panel);
    font-family: var(--font-sans);
    font-size: .8rem;
}
.viewer-md-fm dl {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: .15rem .8rem;
    margin: 0;
}
.viewer-md-fm dl + dl {
    margin-top: .4rem;
    padding-top: .4rem;
    border-top: 1px dashed var(--border);
}
.viewer-md-fm dt {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted-strong);
}
.viewer-md-fm dd { margin: 0; word-break: break-word; }
.viewer-md-fm dl.fm-technical dt,
.viewer-md-fm dl.fm-technical dd { color: var(--muted); font-size: .68rem; }
.viewer-md-fm a { color: var(--accent); text-decoration: none; }
.viewer-md-fm a:hover { text-decoration: underline; }

/* ============ Relecture page par page ============ */

/* Le cadre d'une page et son bouton disent l'etat d'une relecture, pas ce
   qui est ecrit : `md-rendu.css` garde donc tout le rendu du document, et
   ces regles ne touchent qu'a ce que le site ajoute autour. Elles sont
   portees par `.viewer-pane.md` : la lecture de la banque n'a pas de PDF a
   cote, on n'y valide rien. */

.viewer-pane.md .page-relue {
    margin: 1.4rem 0;
    padding: .1rem 1rem .8rem;
    border: 1px solid var(--attente);
    border-radius: 6px;
}
.viewer-pane.md .page-relue.validee { border-color: var(--success); }

/* Devenu l'en-tete d'un bloc, le repere n'a plus a s'ecarter comme un
   separateur : sa marge haute le decollerait du cadre. */
.viewer-pane.md .page-relue > .md-page-mark:first-child { margin-top: .7rem; }

.page-relue-barre {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: .9rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--border);
}

/* Le signalement d'une page porte `btn danger`, comme celui de la barre du
   haut : c'est le meme geste, a une portee pres, et deux apparences pour un
   meme geste feraient croire a deux fonctions. */

/* Valider est un geste vert, du bord au fond : le contour invite, le plein
   dit que ma voix est deja comptee. Le cadre de la page, lui, garde son
   propre langage : orange tant que les deux relecteurs manquent. */
.page-relue-bouton {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--success);
    border-radius: 4px;
    background: var(--panel);
    color: var(--success);
    font-family: var(--font-sans);
    line-height: 1.2;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

/* Un cran sous les boutons de la barre du haut : ils se repetent a chaque
   page et accompagnent la lecture, ils n'ont pas a peser autant que les
   actions du document. */
.page-relue-signalement,
.page-relue-bouton {
    min-height: 1.6rem;
    padding: .22rem .55rem;
    font-size: .68rem;
}
.page-relue-signalement i { font-size: .9em; }
.page-relue-bouton:hover { background: var(--success-soft); }
.page-relue-bouton.par-moi {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.page-relue-bouton.par-moi:hover { background: #146c43; border-color: #146c43; }

/* L'avancement, dans la barre du haut : c'est la seule chose qui se lit
   sans faire defiler tout le document. */
.viewer-relecture {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: 1.2rem;
    font-family: var(--font-sans);
    font-size: .74rem;
}
.viewer-relecture-compte {
    padding: .18rem .6rem;
    border: 1px solid var(--attente);
    border-radius: 999px;
    color: var(--attente-strong);
    white-space: nowrap;
}
.viewer-relecture.complete .viewer-relecture-compte {
    border-color: var(--success);
    color: var(--success);
}
.viewer-relecture-note { color: var(--muted); }

/* L'avancement d'une relecture, a la place du logo du bouton Reviser.

   Un anneau et non une barre : il tient dans la place d'une icone, et la
   liste en aligne dix-sept sans que la colonne bouge. Orange sur tout le
   tour au depart, la part verte grandissant avec les pages validees, comme
   le cadre des pages dans le visualiseur. */
.jauge-relecture {
    flex: 0 0 auto;
    overflow: visible;
}
.jauge-fond,
.jauge-part {
    fill: none;
    stroke-width: 4;
}
.jauge-fond { stroke: var(--attente); }
.jauge-part {
    stroke: var(--success);
    /* Le trait s'arrete net : un bout arrondi ferait paraitre validee une
       page qui ne l'est pas encore. */
    stroke-linecap: butt;
    transition: stroke-dasharray .2s;
}
/* Tout est relu : le fond orange n'a plus de raison de se voir sous l'arc. */
.jauge-relecture.complete .jauge-fond { stroke: var(--success); }

/* L'attente : ni orange ni vert, puisqu'on ne sait pas encore. Le gris de
   bordure est assez pale pour ne rien affirmer, assez visible pour que la
   place de l'anneau se voie. */
.jauge-relecture.attente .jauge-fond { stroke: var(--border-strong); }

/* ============ Signalement d'un passage ============ */
.signalement-bulle {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    border: 1px solid transparent;
    border-radius: 4px;

    background: var(--signalement);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(17, 24, 39, .25);
}
.signalement-bulle:hover { background: var(--signalement-strong); }
.signalement-bulle:focus-visible { outline: 2px solid var(--signalement); outline-offset: 2px; }

.signalement-modal {
    width: min(34rem, 92vw);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font-family: var(--font-sans);
}
.signalement-modal::backdrop { background: rgb(17 24 39 / 35%); }
.signalement-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--border);
}
.signalement-modal-head h2 {
    margin: 0;
    color: var(--signalement);
}
.signalement-modal-close {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
}
.signalement-modal-close:hover { color: var(--signalement); }
.signalement-modal-corps {
    padding: .9rem 1rem 1.1rem;
    font-size: .82rem;
    line-height: 1.5;
}
.signalement-modal-corps p { margin: 0 0 .7rem; }
.signalement-modal-corps p:last-child { margin-bottom: 0; }

.signalement-mode {
    margin: .9rem 0;
    padding-top: .8rem;
    border-top: 1px solid var(--border);
}
.signalement-mode h3 {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .4rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.signalement-mode h3 i { color: var(--signalement); }
.signalement-modal-actions { margin: 0; }

/* ============ Accueil ============ */
.accueil-layout {
    display: flex;
    min-height: 100vh;
    margin: 0;
    position: relative;
}

/* Sur l'accueil, le lien Tchap sort du flux centre et se pose dans le coin
   haut droit de la page. La classe `.rail-tchap` elle-meme n'est pas touchee :
   elle sert aussi dans le rail de `banque.html`, ou le lien reste centre sous
   la presentation. */
.accueil-layout .rail-tchap {
    position: absolute;
    top: 1.7rem;
    right: 2rem;
    width: auto;
    margin: 0;
}
/* Plus grand qu'au rail, ou il accompagne un texte : ici il est seul dans son
   coin, et 28 px s'y perdaient. La hauteur reste `auto`, heritee de la regle
   de base, pour garder les proportions du logo. */
.accueil-layout .rail-tchap img {
    width: 35px;
}
.accueil {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;

    padding: 1.2rem 1.5rem 2.5rem;
    text-align: center;
}
.accueil-logo {
    display: block;

    width: 160px;
    height: 160px;
    justify-self: end;
}
.accueil-hero { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); align-items:center; gap:1.5rem; width:100%; }
.accueil-presentation { display:flex; flex-direction:column; align-items:center; gap:.85rem; width:100%; }
.accueil-slogan {

    width: 100%;
    max-width: none;
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--muted);
    text-align: justify;
    hyphens: auto;

    text-wrap: pretty;
}
.accueil-slogan p { margin: 0 0 .85rem; }
.accueil-slogan p:last-child { margin-bottom: 0; }
.accueil-slogan ul { margin: 0 0 .85rem; padding-left: 1.4rem; }
.accueil-slogan-intro { width:100%; max-width:38rem; justify-self:start; color:var(--text); font-size:1rem; line-height:1.6; text-align:left; text-wrap:pretty; }
.accueil-slogan-intro p { margin:0; }
@media (max-width: 900px) and (min-width: 651px) {
    .accueil-hero { grid-template-columns:10rem minmax(0,1fr); gap:.9rem; }
    .accueil-slogan-intro { max-width:none; }
}
@media (max-width: 650px) {
    .accueil-hero { grid-template-columns:1fr; gap:.7rem; }
    .accueil-logo,.accueil-slogan-intro { justify-self:center; }
    .accueil-slogan-intro { max-width:none; text-align:center; }
}
.accueil-action { margin: 0 0 1.5rem; }

/* `gap` plus large que le `.4rem` des boutons ordinaires : a cette taille,
   l'icone et le mot se touchaient presque. */
.accueil-action .btn { font-size: 1rem; padding: 0.7rem 1.4rem; gap: 0.65rem; }

.accueil-chantier {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.85rem;
}

.accueil-outils {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.8rem;
    width: 100%;

    margin-top: 0.2rem;
    text-align: left;
}

.accueil-outil {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.accueil-outil-carte {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
}

.accueil-outil-contenu {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.accueil-outil-carte img {
    float: left;
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 1rem -0.3rem 0;
}
.accueil-outil h2 {
    min-height: 4.3rem;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    text-align: center;
    color: var(--accent-strong);
}
.accueil-outil p:not([class]) {
    text-align: justify;
    hyphens: auto;
}
.accueil-outil p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--muted);
}

@media (max-width: 900px) {
    .accueil-outils { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .accueil-outils { grid-template-columns: 1fr; }
    .accueil-outil h2 { min-height: 0; }
}

.accueil-outil p.accueil-outil-liens,
.accueil-outil p.accueil-outil-etat {
    clear: both;
    margin: auto 0 0;
    padding-top: 0.9rem;
}
.accueil-outil-liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}
.accueil-outil-liens .btn {
    padding: 0.32rem 0.7rem;
    font-size: 0.78rem;
}

.accueil-outil p.accueil-outil-etat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;

    color: #b0b8c2;
    font-family: var(--font-code);
    font-size: 0.7rem;

    font-weight: 400;
}

/* ============ Outil : inserer une image ============ */
.outil {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}
.outil h1 {
    margin: 0 0 .6rem;
    font-size: 1.5rem;
}
.outil-intro {
    margin: 0 0 1.6rem;
    color: var(--muted-strong);
    font-size: .9rem;
    line-height: 1.6;
}
.depot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: 2.6rem 1.5rem;
    border: 2px dashed var(--border-strong);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
}
.depot:hover,
.depot:focus-visible { border-color: var(--accent); }
.depot-actif {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.depot i { font-size: 1.6rem; color: var(--muted); }
.depot-titre { font-size: 1rem; }
.depot-detail { color: var(--muted); font-size: .82rem; }

.apercu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 1.6rem 0 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
}
.apercu img {
    max-width: 220px;
    max-height: 160px;
    object-fit: contain;
}
.apercu-infos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem .9rem;
    margin: 0;
    font-size: .82rem;
}
.apercu-infos dt { color: var(--muted); }
.apercu-infos dd { margin: 0; overflow-wrap: anywhere; }

.outil-label {
    display: block;
    margin: 1.4rem 0 .4rem;
    color: var(--muted);
    font-size: .78rem;
}
.outil-sortie {
    width: 100%;
    padding: .7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font-family: var(--font-code);
    font-size: .76rem;
    line-height: 1.5;
    resize: vertical;
    overflow-wrap: anywhere;
}
.outil-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .9rem 0 0;
}
.outil-erreur,
.outil-avertissement {
    margin: 1rem 0 0;
    padding: .6rem .8rem;
    border-radius: 6px;
    font-size: .82rem;
    line-height: 1.5;
}
.outil-erreur { background: var(--error-soft); color: var(--error); }
.outil-avertissement { background: var(--warning-soft, #fff4e5); color: #8a5300; }

/* ============ Guide : passer de Word a MarkText ============ */
/* Trois colonnes, comme le lecteur : la marque a gauche, le guide au milieu,
   le plan a droite. Chacune defile pour son compte. */
/* Trois colonnes, comme la banque : la marque du site a gauche, le guide au
   milieu, le plan a droite.
   Les deux laterales ont la meme largeur : c'est la condition pour que le
   guide soit centre dans la fenetre. La gauche n'a qu'un logo a loger, elle
   est donc plus vide que le plan - mais l'egaler est le prix du centrage.
   Le guide, lui, ne retrecit pas pour autant : son `max-width` de 62rem le
   bornait deja bien avant. */
.guide-layout {
    display: grid;
    grid-template-columns: 24rem minmax(0, 1fr) 24rem;
    height: 100%;
    overflow: hidden;
}
.guide-main {
    grid-column: 2;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    /* Presque effacee au repos, elle reparait quand la souris entre dans la
       colonne. Sur une page qui se lit d'une traite, la barre n'apporte rien
       tant qu'on ne s'en sert pas - et le plan, a droite, dit deja ou l'on en
       est. Le `thin` du reste du site est conserve : seule la couleur change,
       ce qui suffit a l'effacer sans la supprimer. */
    scrollbar-color: #e6eaee transparent;
    transition: scrollbar-color .15s;
}
.guide-main:hover,
.guide-main:focus-within { scrollbar-color: #c7cdd6 transparent; }
.guide-side {
    grid-column: 3;
    min-height: 0;
    padding-right: .9rem;
    overflow: hidden;
}
.guide-side .viewer-toc { padding-top: 1.6rem; }
.guide-back {
    width: 2rem;
    min-height: 2rem;
    margin-top: 0;
    margin-left: 1.5rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.guide-back i {
    display: block;
    width: 1em;
    margin: 0;
    line-height: 1;
    text-align: center;
    transform: translateY(1px);
}

/* Deux colonnes : marque et plan à gauche, guide à droite. */
.guide-layout.marktext-two-column-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}
.marktext-two-column-layout #app-header {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: .3rem;
}
.marktext-two-column-layout .guide-back {
    min-height: 1.6rem;
    margin-top: .6rem;
    margin-left: 0;
    padding-top: .15rem;
    padding-bottom: .15rem;
}
.marktext-two-column-layout .guide-main {
    grid-column: 2;
    grid-row: 1 / -1;
    scrollbar-color: #e6eaee transparent;
    transition: none;
}
.marktext-two-column-layout .outil.guide {
    max-width: 66rem;
    padding-left: .75rem;
    padding-right: .75rem;
}
.marktext-two-column-layout .guide-main:hover,
.marktext-two-column-layout .guide-main:focus-within {
    scrollbar-color: #e6eaee transparent;
}
.marktext-two-column-layout .guide-side {
    grid-column: 1;
    grid-row: 2;
    padding: 0 .9rem .9rem calc(.4rem + 2px);
}
.marktext-two-column-layout .guide-side .viewer-toc { padding-top: .15rem; }

@media (max-width: 1100px) {
    /* Le plan disparait avant le guide : c'est un raccourci, pas le contenu.
       Meme regle que le sommaire d'un document. */
    .guide-layout {
        display: block;
        height: auto;
        overflow: auto;
    }
    .guide-side { display: none; }
    #app-header { flex-direction: row; padding: .9rem 1.5rem; }
    .marktext-two-column-layout #app-header {
        flex-direction: row;
        align-items: flex-start;
    }
    .marktext-two-column-layout .guide-back {
        margin-top: 1rem;
        margin-left: 0;
    }
}

/* Le logo se pose a gauche du titre, qui l'habille. `float` plutot qu'une
   colonne : le texte reprend toute la largeur des la fin du chapeau, sans
   laisser une gouttiere vide sur toute la hauteur de la page. */
.guide-logo {
    display: block;
    float: left;
    margin: 0 1rem .2rem 0;
    /* Le fichier fait 1025 px de cote : reduit, jamais agrandi. */
    width: 120px;
    height: auto;
}
/* Le premier titre ne doit pas etre pousse sous le logo. */
.guide h1 { overflow: hidden; }

.outil.guide {
    max-width: 62rem;
    /* Du vide sous la derniere section, pour qu'elle puisse monter jusqu'en
       haut de la colonne : sans lui, le defilement bute avant, et la derniere
       entree du plan ne s'allume jamais. */
    padding-bottom: 1000px;
}
.guide h2 {
    margin: 2.4rem 0 .7rem;
    font-size: 1.05rem;
    color: var(--accent-strong);
}
/* Un systeme d'exploitation sous une etape d'installation : plus discret
   qu'un titre de section, mais assez marque pour qu'on saute au sien. */
.guide h3 {
    margin: 1.5rem 0 .5rem;
    font-size: .95rem;
    color: var(--text);
}
/* Page d'un outil : le logo au-dessus du titre, puis les boutons de
   telechargement, qui passent a la ligne sur un ecran etroit. */
.outil-logo { margin: 0 0 .7rem; }
/* La marque d'un systeme, devant son etape : reperable avant la lecture. */
.guide h3 i { margin-right: .45rem; color: var(--muted); }
.outil-telechargement {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.4rem 0 1.9rem;
}
.guide p {
    margin: 0 0 .9rem;
    line-height: 1.65;
    text-align: justify;
    hyphens: auto;
}
/* Le fond seul ne suffit pas a detacher un fragment de code : `--panel-alt`
   ne differe du fond de page que de trois points par canal, soit un contraste
   de 1,03:1 - invisible. C'est le filet qui fait le travail, le fond ne fait
   que l'appuyer. La couleur d'accent acheve de dire « ceci se tape ». */
.guide code {
    padding: .05rem .35rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #eef1f4;
    /* Ni bleu : c'est la couleur des liens et des titres, et le code avait
       l'air cliquable. Le prune ne sert a rien d'autre dans la page. */
    color: #a3246e;
    font-size: .84em;
    /* Un fragment long se coupe plutot que de deborder de sa colonne, mais
       seulement quand il ne tient pas : `anywhere` n'agit qu'a ce moment-la. */
    overflow-wrap: anywhere;
}
.guide kbd {
    padding: .05rem .35rem;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--panel);
    font-size: .8em;
}
.guide-code {
    margin: 0 0 1.1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    font-family: var(--font-code);
    font-size: .8rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* Un conseil, et non une section : fond jaune et ampoule, sans filet. Le
   jaune le distingue du bleu de l'interface, qui sert deja aux titres et aux
   liens ; l'absence de bordure le pose comme une respiration dans la lecture
   plutot que comme un bloc a part. */
.guide-encadre {
    display: flex;
    gap: .7rem;
    margin: 0 0 1.1rem;
    padding: .9rem 1.1rem;
    border: 0;
    border-radius: 6px;
    background: #faeea0;
    text-align: left;
}
.guide-encadre i {
    flex: 0 0 auto;
    margin-top: .2rem;
    color: #EECB49;
}
/* Tout le conseil vit dans la boite : le titre, et la liste qui le detaille.
   Ils s'y serrent plus qu'au fil du texte. */
.guide-encadre > div { min-width: 0; }
.guide-encadre p { margin: 0; }
.guide-encadre .guide-points {
    margin: .5rem 0 0;
    padding-left: 1.1rem;
}
.guide-encadre .guide-points li:last-child { margin-bottom: 0; }
.guide-table {
    width: 100%;
    margin: 0 0 1rem;
    border-collapse: collapse;
    font-size: .85rem;
}
.guide-table th,
.guide-table td {
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.guide-table th {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.guide-table tbody tr:last-child td { border-bottom: 0; }
.guide-liste { margin: 0 0 1rem; }
.guide-liste dt {
    margin: 1rem 0 .25rem;
    font-weight: 600;
}
.guide-liste dd {
    margin: 0;
    color: var(--muted-strong);
    line-height: 1.6;
}
.guide-liens { margin: 0; padding-left: 1.1rem; line-height: 1.7; }
.guide-liens-note {
    color: var(--muted);
    font-size: .8rem;
}
.guide-liens-note::before { content: " - "; }
.guide-points {
    margin: 0 0 1.1rem;
    padding-left: 1.1rem;
    line-height: 1.65;
}
.guide-points li { margin-bottom: .5rem; }
/* La source et son rendu, cote a cote : c'est la comparaison qui enseigne,
   pas l'un puis l'autre. Sous 900 px ils s'empilent, la source d'abord. */
.guide-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0 0 1.1rem;
}
.guide-duo-label {
    display: block;
    margin-bottom: .35rem;
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.guide-duo .guide-code { margin: 0; height: calc(100% - 1.4rem); }
.guide-rendu {
    height: calc(100% - 1.4rem);
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    font-size: .82rem;
}
/* Les couleurs de titre du rendu Markdown, recopiees de `md-rendu.css` : ce
   fichier n'est pas charge ici, les jetons `--md-h1` n'y existent donc pas.
   Si la palette du rendu change la-bas, ces deux valeurs sont a suivre. */
.guide-rendu .rendu-h1 {
    margin-bottom: .45rem;
    color: #001C4B;
    font-size: 1.15rem;
    font-weight: 700;
}
.guide-rendu .rendu-h2 {
    margin: .7rem 0 .35rem;
    color: #00317D;
    font-size: 1rem;
    font-weight: 700;
}
.guide-rendu p { margin: 0 0 .5rem; text-align: left; }
.guide-rendu ul { margin: 0; padding-left: 1.1rem; }
.guide-rendu li { margin-bottom: .15rem; }

@media (max-width: 900px) {
    .guide-duo { grid-template-columns: 1fr; }
    .guide-duo .guide-code,
    .guide-rendu { height: auto; }
}

/* ============ Guide d'export : Markdown, thème et PDF côte à côte ============ */
.outil.export-guide { padding-bottom: 8rem; }
.document-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(18rem, 1fr));
    gap: .8rem;
    margin: 1rem 0 2rem;
}
.document-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
}
.document-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    min-height: 6.3rem;
    padding: .75rem .8rem;
    border-bottom: 1px solid var(--border);
    background: var(--panel-alt);
}
.pdf-comparison .document-panel-header { min-height: 4.8rem; }
.source-comparison .document-panel-header { min-height: 4.8rem; }
.document-panel-header > div { min-width: 0; }
.document-panel-header h3 {
    display: inline;
    margin: 0;
    font-size: .9rem;
}
.document-panel-header p {
    margin: .35rem 0 0;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.4;
    text-align: left;
}
.document-panel-header a {
    flex: 0 0 auto;
    font-size: .7rem;
}
.document-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: .3rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}
.source-preview,
.document-preview-shell {
    display: block;
    width: 100%;
    height: 49.5vh;
    min-height: 25.5rem;
    margin: 0;
    border: 0;
    background: #fff;
}
.document-preview-shell { overflow: hidden; }
.pdf-comparison .document-preview-shell {
    height: 49.5vh;
    min-height: 25.5rem;
}
.document-preview {
    display: block;
    width: 100%;
    height: calc(100% + 18px);
    margin: 0;
    border: 0;
}

/* Un PDF dans un cadre ne s'affiche pas sur telephone : les navigateurs
   mobiles n'embarquent pas de visionneuse PDF et refusent le cadre - Chrome
   y rend « This content is blocked ». Le lien est donc toujours la, y compris
   sur grand ecran ou il ne coute rien et sert de porte de sortie si un
   navigateur bloque le cadre a son tour. Voir aussi la bascule sous 700 px. */
/* Selecteur en deux classes, et ce n'est pas de la coquetterie : la page vit
   dans un `<article class="guide">`, ou `.guide p` justifie tous les
   paragraphes. A specificite egale il l'emportait, et un bouton seul dans un
   paragraphe justifie se colle a gauche. */
.document-panel .document-preview-lien {
    margin: .7rem 0 0;
    padding: 0 .8rem .8rem;
    text-align: center;
}
.document-panel .document-preview-lien .btn { font-size: .8rem; }
.export-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
    counter-reset: export-step;
}
.export-steps li {
    display: flex;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    counter-increment: export-step;
}
.export-step-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
}
.export-steps h3 {
    margin: 0 0 .25rem;
    font-size: .82rem;
}
.export-steps h3::before {
    content: counter(export-step) ". ";
    color: var(--accent-strong);
}
.export-steps p {
    margin: 0;
    color: var(--muted-strong);
    font-size: .75rem;
    line-height: 1.5;
    text-align: left;
}

@media (max-width: 1100px) {
    .document-comparison { grid-template-columns: 1fr; }
    .export-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .source-preview,
    .document-preview-shell { height: 31.5rem; min-height: 0; }
    .pdf-comparison .document-preview-shell { height: 31.5rem; min-height: 0; }
}

@media (max-width: 700px) {
    /* Sous cette largeur, le cadre PDF cede la place au lien plutot que de le
       doubler : sur telephone il ne s'affiche pas, et quand bien meme il
       s'afficherait, une visionneuse de 31 rem de haut n'y serait pas
       lisible. Le bouton, lui, ouvre le PDF dans l'application du telephone. */
    .pdf-comparison .document-preview-shell { display: none; }
    .document-panel .document-preview-lien { margin: 0; padding: .8rem; }
}

@media (max-width: 650px) {
    .export-steps { grid-template-columns: 1fr; }
}

/* Les quatre liens du projet qui ferment l'accueil. Ils reprennent le rail de
   `banque.html` - meme balisage, meme apparence - mais ils y suivaient un
   texte, alors qu'ici ils suivent les cartes d'outils : sans respiration, ils
   se lisaient comme une action de la derniere carte plutot que comme le pied
   de la page. La marge du rail (.9rem) est donc portee a 3rem. */
.home-project-links { display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem; width:100%; margin:.45rem 0 1.5rem; }
.project-icon { display:inline-flex; align-items:center; justify-content:center; padding:.2rem; color:#b5bac3; font-size:.9rem; line-height:1; text-decoration:none; cursor:pointer; }
.project-icon:hover,.project-icon:focus-visible { color:#f17361; text-decoration:none; outline:0; }
.home-project-block { width:100%; margin-top:1.4rem; }
.home-forge-label { margin:0; color:#b5bac3; font-family:var(--font-code); font-size:.57rem; letter-spacing:.05em; }

.rail-project-block { width:100%; margin-top:1.6rem; text-align:center; }
.rail-forge-label { margin:0; color:#b5bac3; font-family:var(--font-code); font-size:.57rem; letter-spacing:.05em; }
.rail-project-links { margin:.45rem 0 0; }
.rail-project-icon { display:inline-flex; align-items:center; justify-content:center; padding:.2rem; color:#b5bac3; font-size:.9rem; line-height:1; text-decoration:none; cursor:pointer; }
.rail-project-icon:first-child { font-size:.78rem; }
.rail-project-icon:hover,.rail-project-icon:focus-visible { color:#f17361; text-decoration:none; outline:0; }