/* ============================================================
   Portail Legifrance — CSS des modules complémentaires
   Référence (split-view : recherche + viewer) · Navigation codes
   ============================================================ */

/* ============================================================
   Communs (états / pills / toolbar)
   ============================================================ */

.viewer-state,
.tree-loading,
.expert-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: 2.5rem 1rem;
    color: var(--text2);
    text-align: center;
}
.viewer-empty-title {
    font-size: 1rem;
    color: var(--text);
    font-weight: 500;
}
.viewer-empty-sub,
.tree-loading p,
.expert-loading p { color: var(--text2); margin: 0; }

.expert-empty,
.tree-empty {
    padding: 2rem 1rem;
    color: var(--text2);
    text-align: center;
}
.tree-empty h2 {
    color: var(--text);
    font-size: 1.2rem;
    margin-bottom: .5rem;
}
.tree-empty p,
.expert-empty p { margin: .4rem 0; line-height: 1.6; }
.tree-empty a,
.expert-empty a { color: var(--accent); }
.expert-hint,
.tree-hint {
    color: var(--muted);
    font-size: .85rem;
    margin-top: .8rem;
}

/* Pills (badges méta sur articles, résultats, breadcrumb) */
.meta-pill {
    font-size: .68rem;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--border);
    color: var(--text2);
    background: var(--surface2);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}
.meta-pill.ok {
    color: var(--success);
    border-color: rgba(39, 174, 96, .3);
    background: rgba(39, 174, 96, .08);
}
.meta-pill.id {
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    color: var(--accent);
    font-size: .65rem;
    letter-spacing: .02em;
}
/* Plage de validité (📅 Du JJ/MM/AAAA au JJ/MM/AAAA). Visuellement
   distinct du badge "✓ En vigueur" (statut) : ici c'est la PÉRIODE.
   Couleur turquoise discrète pour signaler une donnée temporelle. */
.meta-pill.validity {
    color: var(--accent);
    border-color: rgba(65, 168, 144, .3);
    background: rgba(65, 168, 144, .08);
    font-variant-numeric: tabular-nums;
}

/* Breadcrumb réutilisé dans le viewer */
.breadcrumb {
    flex: 1;
    min-width: 0;
    font-size: .82rem;
    color: var(--text2);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.breadcrumb b { color: var(--text); font-weight: 500; }
.breadcrumb-sep { color: var(--muted); }

/* Toolbar boutons (réutilisée par viewer) */
.tb-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text2);
    padding: 5px 12px;
    border-radius: 5px;
    font-size: .78rem;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: inherit;
}
.tb-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-d);
}
.tb-spacer { flex: 1; }

/* Bouton primaire (réutilisé : Référence + autres) */
.btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: .55rem 1.2rem;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    font-size: .85rem;
    transition: background .15s;
    font-family: inherit;
    white-space: nowrap;
}
.btn-primary:hover { background: var(--accent-h); }
.btn-primary:disabled { background: var(--muted); cursor: not-allowed; }

/* ============================================================
   Module : Référence (split-view)
   ============================================================ */

#screen-expert {
    background: var(--bg);
    overflow: hidden;
}
.expert-split {
    display: grid;
    grid-template-columns: minmax(360px, 40%) 1fr;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ─── Colonne gauche : recherche + résultats ─── */

.expert-pane {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.expert-header {
    padding: 1.2rem 1.4rem .8rem;
    border-bottom: 1px solid var(--border);
}
.expert-title {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: .25rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.expert-sub {
    color: var(--text2);
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}

/* Formulaire de recherche : un seul champ + bouton */
.expert-search-form {
    display: flex;
    gap: .5rem;
    padding: .9rem 1.4rem;
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.expert-search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.expert-search-icon {
    position: absolute;
    left: .65rem;
    color: var(--muted);
    font-size: .9rem;
    pointer-events: none;
}
.expert-search-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .55rem .75rem .55rem 2rem;
    border-radius: 6px;
    font-family: inherit;
    font-size: .92rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.expert-search-input::placeholder { color: var(--muted); }
.expert-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-d);
}

/* Barre de "hint" sous la recherche (feedback parser) */
.expert-hint-bar {
    padding: .55rem 1.4rem;
    color: var(--text2);
    font-size: .8rem;
    line-height: 1.5;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    min-height: 1.6rem;
}
.expert-hint-bar:empty { display: none; }
.expert-hint-bar code {
    background: var(--surface2);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: .85em;
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
}
.expert-hint-bar strong { color: var(--text); font-weight: 600; }
.expert-hint-bar em { font-style: italic; color: var(--muted); }
.expert-hint-icon { margin-right: .25rem; }

/* Pane des résultats (scrollable) */
.expert-results-pane {
    flex: 1;
    overflow-y: auto;
    padding: .8rem 1rem 1.5rem;
    min-height: 0;
}
.expert-results-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Card de résultat (cliquable) */
.expert-result-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title arrow"
        "meta  meta";
    gap: .35rem .8rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    padding: .7rem .9rem;
    cursor: pointer;
    transition: all .12s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    color: var(--text);
}
.expert-result-card:hover {
    background: var(--surface3);
    border-left-color: var(--accent-h);
}
.expert-result-card.is-selected {
    background: var(--accent-d);
    border-left-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(65, 168, 144, .25);
}
.expert-result-card.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}
.expert-result-title {
    grid-area: title;
    color: var(--text);
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.35;
}
.expert-result-meta {
    grid-area: meta;
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}
.expert-result-arrow {
    grid-area: arrow;
    color: var(--accent);
    font-weight: 700;
    align-self: center;
    font-size: 1rem;
}

/* Barre de progression pour la recherche par préfixe (fan-out) */
.expert-progress {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--info);
    border-radius: 0 6px 6px 0;
    padding: .5rem .8rem;
    margin-bottom: .6rem;
    color: var(--text2);
    font-size: .82rem;
    line-height: 1.4;
    transition: background .15s, border-color .15s;
}
.expert-progress.done {
    border-left-color: var(--success);
    background: rgba(39, 174, 96, .06);
    color: var(--text);
}
.expert-progress-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.expert-progress-text strong { color: var(--text); font-weight: 600; }

/* ─── Colonne droite : viewer (lecture serif) ─── */

.expert-viewer-pane {
    background: var(--paper);
    overflow: hidden;
    min-height: 0;
}

/* Le composant LegifranceReader injecte la classe ".viewer" */
.viewer {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    overflow: hidden;
    min-height: 0;
}
.viewer-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .55rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    min-height: 38px;
}
.viewer-meta {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}
.viewer-scroll {
    overflow-y: auto;
    background: var(--paper);
    padding: 1.5rem .5rem 3rem;
    min-height: 0;
}
.viewer-toolbar {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: .55rem 1rem;
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    align-items: center;
}

/* État vide du viewer */
.viewer-state {
    background: var(--paper);
    color: var(--ink-2);
    margin: 1rem;
    border: 1px dashed var(--rule);
    border-radius: 6px;
}

/* Article (lecture serif claire) */
.reader {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.75;
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1.2rem;
}
.reader h1 {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .3rem;
    letter-spacing: -.01em;
    border-left: none;
    padding-left: 0;
}
.reader-subtitle {
    font-size: .92rem;
    color: var(--ink-2);
    margin-bottom: .4rem;
    font-style: italic;
}
/* Plage de validité affichée sous le H1 du viewer serif. Visuellement
   distincte du sous-titre (italique gris) — ici on veut que l'œil soit
   immédiatement attiré par la période d'application. La même info est
   aussi présente en pill dans la barre du haut, mais le H1 est ce que
   le juriste fixe d'abord, donc on duplique volontairement. */
.reader-validity {
    display: inline-block;
    margin-bottom: 1.3rem;
    padding: .25rem .6rem;
    background: rgba(65, 168, 144, .1);
    border-left: 3px solid var(--quote-bar);
    border-radius: 0 4px 4px 0;
    color: #1a6e5d;
    font-size: .88rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.reader p {
    margin: .8rem 0;
    text-align: justify;
    hyphens: auto;
}
.reader strong { color: var(--ink); font-weight: 600; }
.reader em { font-style: italic; color: var(--ink); }
.reader ul,
.reader ol { margin: 1rem 0 1rem 1.6rem; }
.reader li { margin: .35rem 0; }
.reader blockquote {
    border-left: 3px solid var(--quote-bar);
    background: var(--quote-bg);
    padding: .8rem 1.1rem;
    margin: 1rem 0;
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: var(--ink);
}
.reader hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 1.3rem 0;
}
.reader code {
    background: rgba(0, 0, 0, .06);
    color: var(--ink);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: .85em;
}
.reader pre {
    background: rgba(0, 0, 0, .04);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: .7rem 1rem;
    overflow-x: auto;
    margin: 1rem 0;
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: .9em;
}
.reader table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%;
    font-size: .9rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.reader th,
.reader td {
    padding: .5rem .75rem;
    border: 1px solid var(--rule);
    text-align: left;
}
.reader th {
    background: rgba(65, 168, 144, .1);
    color: var(--ink);
    font-weight: 600;
}
.reader a {
    color: #1a6e5d;
    text-decoration: underline;
    text-decoration-color: rgba(65, 168, 144, .4);
    text-underline-offset: 3px;
}
.reader a:hover { text-decoration-color: var(--accent); }

.reader-source {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-2);
    font-size: .9rem;
    font-style: italic;
}

/* ─── Sections "Informations" / Nota / Modificateurs / Versions ─── */

/* Bloc <details> repliable contenant des données structurées sur l'article
   (table clé/valeur ou liste). Style sobre — papier serif claire mais en
   sans-serif pour bien distinguer le métier du texte officiel. */
.reader-info {
    margin: 1.2rem 0;
    background: rgba(0, 0, 0, .025);
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.reader-info > summary {
    list-style: none;
    cursor: pointer;
    padding: .55rem .9rem;
    font-size: .85rem;
    color: var(--ink-2);
    font-weight: 600;
    user-select: none;
    display: flex;
    align-items: center;
    gap: .35rem;
    border-radius: 6px;
    transition: background .12s;
}
.reader-info > summary::-webkit-details-marker { display: none; }
.reader-info > summary::before {
    content: "▸";
    font-size: .7em;
    color: var(--quote-bar);
    transition: transform .15s ease;
    flex-shrink: 0;
}
.reader-info[open] > summary::before { transform: rotate(90deg); }
.reader-info > summary:hover {
    background: rgba(65, 168, 144, .08);
    color: var(--ink);
}
.reader-info[open] > summary {
    border-bottom: 1px solid var(--rule);
    border-radius: 6px 6px 0 0;
}

/* Table compacte clé/valeur dans le bloc Informations détaillées. */
.reader-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin: 0;
}
.reader-info-table th,
.reader-info-table td {
    padding: .35rem .9rem;
    border: none;
    border-bottom: 1px dashed var(--rule);
    text-align: left;
    vertical-align: top;
}
.reader-info-table tr:last-child th,
.reader-info-table tr:last-child td {
    border-bottom: none;
}
.reader-info-table th {
    color: var(--ink-2);
    font-weight: 500;
    width: 40%;
    background: transparent;
    font-style: normal;
}
.reader-info-table td {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* Liste utilisée pour les articles modificateurs et les versions. */
.reader-info-list {
    list-style: none;
    margin: 0;
    padding: .35rem 0;
}
.reader-info-list li {
    padding: .35rem .9rem;
    color: var(--ink);
    font-size: .85rem;
    border-bottom: 1px dashed var(--rule);
}
.reader-info-list li:last-child { border-bottom: none; }
.reader-info-id {
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: .78em;
    color: var(--ink-2);
    background: rgba(0, 0, 0, .04);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Nota officiel : note d'application de l'article (souvent crucial pour
   savoir si l'article s'applique à une situation donnée). Bloc distinct
   avec icône info, fond bleu pâle pour le différencier du texte officiel. */
.reader-nota {
    margin: 1.4rem 0;
    background: rgba(52, 152, 219, .07);
    border-left: 3px solid var(--info);
    border-radius: 0 6px 6px 0;
    padding: .8rem 1.1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.reader-nota h3 {
    margin: 0 0 .4rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--info);
    border: none;
    padding: 0;
}
.reader-nota-body {
    color: var(--ink);
    font-size: .9rem;
    line-height: 1.55;
}
.reader-nota-body p { margin: .35rem 0; }
.reader-nota-body p:first-child { margin-top: 0; }
.reader-nota-body p:last-child { margin-bottom: 0; }

/* ============================================================
   Module : Navigation codes (#screen-nav)
   ============================================================ */

#screen-nav {
    background: var(--bg);
    overflow: hidden;
}
.tree-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Colonne gauche : codes principaux */
.tree-side {
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 1rem .8rem;
}
.tree-side h3 {
    font-size: .72rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .8rem;
    font-weight: 700;
    padding: 0 .5rem;
}
.tree-roots {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tree-root-btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text2);
    padding: .55rem .7rem;
    border-radius: 6px;
    font-size: .85rem;
    cursor: pointer;
    text-align: left;
    transition: all .12s;
    font-family: inherit;
}
.tree-root-btn:hover {
    background: var(--surface2);
    color: var(--text);
}
.tree-root-btn.active {
    background: var(--accent-d);
    color: var(--accent);
    font-weight: 600;
}
.tree-icon { font-size: 1rem; opacity: .85; }
.tree-label { flex: 1; }

/* Colonne droite : contenu */
.tree-content {
    overflow-y: auto;
    padding: 1.5rem 2rem 3rem;
    min-height: 0;
}
.tree-content-head {
    margin-bottom: 1.2rem;
    padding-bottom: .8rem;
    border-bottom: 1px dashed var(--border);
}
.tree-content-head h2 {
    color: var(--text);
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: .25rem;
}
.tree-content-sub {
    color: var(--text2);
    font-size: .85rem;
    margin: 0;
}

/* Liste des enfants (cards cliquables) */
.tree-children {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .6rem;
}
.tree-child-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: .8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 5px 5px 0;
    padding: .6rem .9rem;
    cursor: pointer;
    transition: all .12s;
    color: var(--text2);
    font-size: .85rem;
    text-align: left;
    font-family: inherit;
    width: 100%;
}
.tree-child-row:hover {
    background: var(--surface2);
    color: var(--text);
}
.tree-child-icon {
    font-size: 1rem;
    color: var(--accent);
    flex-shrink: 0;
}
.tree-child-label {
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree-child-meta {
    color: var(--muted);
    font-size: .76rem;
    font-style: italic;
}
.tree-child-arrow {
    color: var(--accent);
    font-weight: 700;
}

/* Bloc "JSON brut" repliable (utilisé par tree.js) */
.expert-raw {
    margin-top: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}
.expert-raw summary {
    padding: .55rem .8rem;
    cursor: pointer;
    color: var(--text2);
    font-size: .8rem;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.expert-raw summary::-webkit-details-marker { display: none; }
.expert-raw summary::before {
    content: "▸";
    font-size: .7rem;
    transition: transform .12s;
}
.expert-raw[open] summary::before { transform: rotate(90deg); }
.expert-raw summary:hover { background: var(--surface2); color: var(--text); }
.expert-raw-code {
    margin: 0;
    padding: .8rem 1rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
    color: var(--text2);
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: .75rem;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 360px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================================
   Impression (export PDF du viewer via window.print)
   ============================================================ */
@media print {
    body, .app {
        background: white !important;
        color: black !important;
        height: auto;
        overflow: visible;
    }
    .header, .sidebar,
    .composer-wrap, .modal, .popover,
    .viewer-bar, .viewer-toolbar,
    .expert-pane, .tree-side, .tree-content-head {
        display: none !important;
    }
    .layout { grid-template-columns: 1fr; height: auto; overflow: visible; }
    .expert-split { grid-template-columns: 1fr; }
    .content, .screen, .viewer, .viewer-scroll, .expert-viewer-pane {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        padding: 0 !important;
        background: white !important;
    }
    .reader {
        background: white !important;
        color: black !important;
        max-width: none;
        padding: 0;
        font-size: 12pt;
    }
    .reader h1 { font-size: 18pt; color: black; }
    .reader blockquote {
        background: #f0f0f0;
        color: black;
        border-color: #888;
        page-break-inside: avoid;
    }
    .reader-source {
        color: #555;
        border-top: 1px solid #999;
    }
    @page { margin: 2cm; }
}

/* ============================================================
   Responsive (≤900px)
   ============================================================ */
@media (max-width: 900px) {
    .expert-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
    .expert-pane { border-right: none; border-bottom: 1px solid var(--border); }
    .tree-wrap { grid-template-columns: 1fr; }
    .tree-side {
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .reader { padding: 1rem; font-size: 16px; }
    .tree-child-row { grid-template-columns: auto 1fr auto; }
    .tree-child-meta { display: none; }
}