/* ============================================================
   LISTE DES EXERCICES
   ============================================================ */

.editable-list {
    max-width: 900px;
    margin: auto;
}


/* ============================================================
   CARTE EXERCICE
   ============================================================ */

.editable-card {
    position: relative;
    margin: 0px 0;
    padding: 10px 20px;

    /* Pas de `background` ici : theme.css impose var(--surface) et gagne
       (chargé après). La valeur #2a2a2a qui s'y trouvait était sans effet. */
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.editable-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editable-title {
    font-weight: 600;
    margin: 0;
}

/* Numérotation automatique des exercices (CSS counter) :
   robuste à l'ajout / édition / suppression, sans dépendre du serveur. */
main {
    counter-reset: exo;
}

.exercise-card {
    counter-increment: exo;
    border-left: 3px solid var(--content-exercise-doc);
}

.exercise-card .editable-number::before {
    content: counter(exo);
}

.editable-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 0.3em;
    padding: 0 6px;

    background-color: var(--surface-3);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--surface-3);
}



.sheet-open-btn {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.sheet-open-btn:hover {
    background: var(--accent);
    color: var(--on-accent);
}

/* ============================================================
   BLOCS : ÉNONCÉ / INDICES / SOLUTION
   ============================================================ */

.editable-block {
    margin: 0.6em 0;border-radius: var(--radius-sm);border: 1px solid var(--border-soft);
    background: var(--surface-2);
    border-left: 3px solid var(--border);
    margin-left: 12px;
    margin-right: 12px;
}

.editable-block summary {
    cursor: pointer;padding: 6px 10px;font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.editable-block .content {
    padding: 4px 10px 10px;
    color: var(--text);
    font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
    font-size: 15px;
}

/* Les couleurs de .statement / .hints / .solution ne sont PAS ici : elles
   vivent dans theme.css (fond --surface-2 + bordure gauche colorée), qui est
   chargé après et gagnait déjà. Les valeurs codées en dur qui se trouvaient
   ici (#33465a, #6f5f33, #3a5544) n'avaient aucun effet — mesuré, puis
   supprimées. Ne pas les réintroduire : un seul endroit par bloc. */

.editable-block.notes-block {
    border-color: transparent;
    border-left-color: var(--hint);
    background: var(--surface-2);
}

.notes-block-title {
    font-weight: 500;
    padding: 0.4em 0.6em;
}


/* ============================================================
   TAGS / CATÉGORIES
   ============================================================ */

.tag,
.editable-category {
    display: inline-block;
    padding: 4px 10px;
    margin: 4px 6px 4px 0;

    border: 1px solid #ffffff;
    border-radius: 5px;
    font-size: 0.85em;
}


/* ============================================================
   ÉTOILES (MODE LECTURE)
   ============================================================ */

.star {
    font-size: 1.1rem;
    color: #cbd5e0;
}

.star.filled {
    color: var(--star);
}


/* ============================================================
   BADGES DE MODE (Mode TD, Sans preuves, etc.)
   ============================================================ */

.sheet-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.flag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;background: #20392a;
    border: 1px solid #3e6b3e;color: #84c79c;
    border-color: #2f6b48;
}

/* ============================================================
   FORMULAIRE IMPORT .tex
   ============================================================ */

.import-tex-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    padding: 8px 12px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    font-size: 0.88rem;
}

.import-tex-form input[type="file"] {
    font-size: 0.85rem;
    color: #ccc;
}

/* ============================================================
   OPTIONS LaTeX dans le formulaire de feuille
   ============================================================ */

.latex-options {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

/* ============================================================
   VARIANTE DE BOUTON — supprimée
   ============================================================
   .button-secondary était redéfinie ici en gris hors palette
   (#3a3a3a) avec !important. C'est ce !important qui obligeait
   theme.css à répondre par un !important pour imposer sa version
   tokenisée : les deux se neutralisaient, theme.css ne gagnant
   que parce qu'il est chargé après. Les deux ont sauté ensemble.
   La définition unique de .button-secondary vit dans theme.css.
   ============================================================ */

/* ============================================================
   BANDEAU "AJOUTER À LA FEUILLE"
   ============================================================ */

.add-to-sheet-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 10px 16px;
    margin-bottom: 1rem;

    background: #1e3a50;
    border: 1px solid #3982b8;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* ============================================================
   BANDEAU DE CONTEXTE (chapitre/feuille), sticky en haut de page —
   top:0 car le scroll de la page vit dans #app-body (déjà décalé sous la
   navbar fixe), même ancrage que .doc-compact-bar-wrap.
   ============================================================ */
.context-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 0;
    background: linear-gradient(90deg, var(--accent-strong, #5866e8), var(--accent, #6d7bff));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(88, 102, 232, 0.35);
    font-size: 0.9rem;
    color: var(--on-accent);
}
.context-banner-search {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--on-accent);
    text-decoration: none;
    opacity: 0.9;
    flex-shrink: 0;
}
.context-banner-search svg { width: 16px; height: 16px; display: block; }
.context-banner-search:hover { opacity: 1; }
.context-banner-search-label { font-weight: 500; }
.context-banner-segment {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--on-accent);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.12);
}
.context-banner-segment:hover { background: rgba(255, 255, 255, 0.18); }
.context-banner-segment-label { opacity: 0.75; }
.context-banner-segment strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; }
.context-banner-segment strong .sh-kind-icon { width: 20px; height: 20px; margin-right: 6px; }
.context-banner-chevron { opacity: 0.7; }
.context-banner-hide-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--on-accent);
    opacity: 0.75;
    padding: 5px;
    border-radius: 6px;
}
.context-banner-hide-toggle:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); }
.context-banner-hide-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.context-banner-hide-toggle svg { width: 18px; height: 18px; display: block; }
.context-banner-hide-toggle .eye-slash { opacity: 0; transition: opacity 0.1s; }
.context-banner-hide-toggle input:checked ~ svg .eye-slash { opacity: 1; }
.context-banner-hide-toggle input:checked ~ svg { color: var(--on-accent); }
.context-banner-hide-toggle input:not(:checked) ~ svg { color: rgba(255, 255, 255, 0.6); }
.context-banner-spacer { flex: 1 1 auto; }
.context-banner-return {
    flex-shrink: 0;
    white-space: nowrap;
}
/* La barre compacte de titre (.doc-compact-bar-wrap, cf. doc.css) ET le
   panneau gauche (.doc-page-sidebar, cf. doc.css) sont aussi sticky top:0
   dans le même scroll (#app-body) : avec .context-banner (bandeau resté
   EN FLUX, contrairement à .ctx-bar — cf. context_bar.css), sans décalage
   ils se superposeraient une fois scrollés. On les pousse sous le bandeau,
   dont la hauteur réelle est mesurée en JS (--doc-topbar-h, cf.
   _leftmenu_base.html) plutôt que devinée en CSS.
   Pages .ctx-bar (position:fixed) : PAS ce décalage — #app-body (nav.css)
   exclut déjà --doc-topbar-h de sa propre boîte, donc top:0 (défaut de
   doc.css) suffit ; ce même top:var(--doc-topbar-h) ici doublait le
   décalage et poussait le panneau gauche visiblement trop bas. */
main:has(.context-banner) .doc-compact-bar-wrap { top: var(--doc-topbar-h, 52px); }
main:has(.context-banner) .doc-page-sidebar {
    top: var(--doc-topbar-h, 52px);
    max-height: calc(100vh - var(--nav-height) - var(--doc-topbar-h, 52px));
}
/* ============================================================
   SLOT D'ACTION ADAPTATIF SUR LES CARDS (droite de l'en-tête, même
   emplacement que l'ancien ⋮) : corbeille/supprimer (rouge), retirer
   d'une feuille (jaune, comme "Vider la feuille"), ajouter à une feuille
   (violet). Un seul bouton visible par carte, jamais deux superposés.
   ============================================================ */

.exo-delete-btn,
.add-to-sheet-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
}
.exo-delete-btn svg,
.add-to-sheet-btn svg { width: 18px; height: 18px; }

.exo-delete-btn { color: var(--danger); }
.exo-delete-btn:hover { background: var(--danger); color: var(--on-accent); border-color: var(--danger); }

.add-to-sheet-btn { color: var(--violet); }
.add-to-sheet-btn:hover:not(:disabled) { background: var(--violet); color: var(--on-accent); border-color: var(--violet); }
.add-to-sheet-btn .icon-remove { display: none; }
.add-to-sheet-btn.already-added { color: var(--hint); }
.add-to-sheet-btn.already-added:hover { background: var(--hint); color: #1a1a1a; border-color: var(--hint); }
.add-to-sheet-btn.already-added .icon-add { display: none; }
.add-to-sheet-btn.already-added .icon-remove { display: inline-flex; }

/* ============================================================
   TOOLBAR PAGE DÉTAIL FEUILLE
   ============================================================ */

.sheet-detail-toolbar {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 1rem;
}

/* ============================================================
   DRAG-AND-DROP (réordonnancement dans la feuille)
   ============================================================ */

.exercise-card[draggable] {
    cursor: grab;
}

.exercise-card[draggable].dragging {
    opacity: 0.4;
}


/* ============================================================
   EXPLORATEUR (Sup / Spé)
   ============================================================ */

.explorer { max-width: 1000px; margin: auto; }


/* .breadcrumb-trail/.crumb-* supprimées : orphans.html était leur dernier
   utilisateur, elle est passée sur la .ctx-breadcrumb commune. */

.explorer-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}



.explorer-section { margin-bottom: 2rem; }

.theme-group { margin-bottom: 1.2rem; }

.chapter-accordion-list { display: flex; flex-direction: column; gap: 6px; }



.chapter-accordion-title { flex: 1; font-weight: 500; }

.chapter-accordion-chevron {
    color: #666;
    transition: transform 0.2s;
}




.resource-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   CHAPITRES
   ============================================================ */

.chapter-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}



.folder-name-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.folder-name-row input { flex: 1; }

/* .btn-icon a été supprimée : aucun usage, et c'était un 4e système de
   bouton icône hors palette (#333/#555/#ccc). Pour un bouton icône,
   utiliser .doc-header-icon-btn (32x32, avec cadre) ou .btn-icon-sm
   (28x28, sans cadre) — cf. theme.css. */

.chapter-card[draggable] { cursor: grab; }
.chapter-card[draggable].dragging { opacity: 0.4; }
.chapter-card[draggable].drag-over { outline: 2px dashed #3982b8; outline-offset: 3px;     outline-color: var(--accent);
}

/* Page détail chapitre */
.chapter-kind-section { margin-bottom: 2rem; }


.chapter-sheets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}



.chapter-sheet-title { font-weight: 500; }

.chapter-sheet-count {
    font-size: 0.8rem;
    color: #888;
}

/* ============================================================
   MÉTA (MODE LECTURE)
   ============================================================ */

.editable-meta details {
    display: block;
}

.editable-meta details[hidden] {
    display: none;
}

.editable-meta details summary {
    margin-left: 0;
    padding-left: 0;
}

/* ============================================================
   LATEX EXPORT / IMPORT
   ============================================================ */

.latex-btn {
    min-width: 0 !important;
    font-size: 10px;
    padding: 1px 2px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.latex-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.latex-panel {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent-soft);
    border-radius: 4px;
    overflow: hidden;
}

.latex-panel-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.latex-panel-label {
    font-size: 11px;
    color: var(--text-muted);
    flex: 1;
    font-family: monospace;
    font-style: italic;
}

.latex-copy-btn {
    min-width: 0 !important;
    display: flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.latex-copy-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.latex-panel-cm .CodeMirror {
    font-size: 12px;
    font-family: "Fira Code", "Consolas", monospace;
    background: #282a36;
    height: auto;
}

/* Éditeur inline (énoncé / indications / correction) */
.content-edit-cm {
    margin: 4px 0;
}
.content-edit-cm .CodeMirror {
    font-size: 13px;
    font-family: "Fira Code", "Consolas", monospace;
    background: #282a36;
    border-radius: 4px;
    height: auto;
    min-height: 80px;
    padding: 4px 0;
    transition: opacity 0.1s ease;
}
/* Pendant l'aller-retour réseau d'un commit/checkpoint (cf. setSaving dans
   core/inline_edit.js) : retour visuel immédiat (le CM passe aussi en
   readOnly) — sans ça, Ctrl-Entrée semblait ne rien faire pendant l'attente,
   et rien n'empêchait de continuer à taper du texte qui était ensuite
   silencieusement écrasé par le rendu de la sauvegarde en cours. */
.content-edit-cm-saving .CodeMirror {
    opacity: 0.55;
    cursor: progress;
}
/* Éditeur inline mono-ligne coloré LaTeX (titres, cf. core/inline_edit.js
   startLatexLineEdit) — même look que .content-edit-cm, mais une seule
   ligne (pas de wrap, pas de croissance en hauteur). */
.inline-edit-cm-line {
    display: inline-block;
    min-width: 120px;
    vertical-align: middle;
}
.inline-edit-cm-line .CodeMirror {
    font-size: inherit;
    font-family: "Fira Code", "Consolas", monospace;
    background: #282a36;
    border-radius: 4px;
    height: auto;
    padding: 2px 6px;
}
.inline-edit-cm-line .CodeMirror-scroll { overflow: hidden !important; }
.inline-edit-cm-line .CodeMirror-lines { padding: 0; }

/* Paire de crochets/accolades correspondant au curseur (addon matchbrackets)
   — souligné + fond, comme dans la plupart des éditeurs (VSCode, Sublime...). */
.CodeMirror-matchingbracket {
    color: inherit !important;
    background: rgba(255, 184, 108, 0.25);
    border-bottom: 2px solid #ffb86c;
    font-weight: 700;
}
.CodeMirror-nonmatchingbracket {
    color: #ff5555 !important;
    background: rgba(255, 85, 85, 0.2);
    border-bottom: 2px solid #ff5555;
}
.content-edit-error {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    background: rgba(var(--latex-error-rgb), 0.1);
    border: 1px solid rgba(var(--latex-error-rgb), 0.35);
    color: var(--latex-error);
    font-size: 0.8rem;
}

/* Autocomplétion des macros LaTeX (cf. latex/latex_hint.js) — même palette
   dracula que les éditeurs CodeMirror ci-dessus, le thème par défaut de
   l'addon show-hint est clair et détonne sinon. */
.CodeMirror-hints {
    font-family: "Fira Code", "Consolas", monospace;
    font-size: 13px;
    background: #282a36;
    border: 1px solid #44475a;
    color: #f8f8f2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.CodeMirror-hint { padding: 3px 10px; }
li.CodeMirror-hint-active {
    background: #44475a;
    color: #bd93f9;
}

/* Modale import LaTeX */
.vlink-modal.latex-import-modal {
    width: 980px;
    max-width: 95vw;
}

.latex-import-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 260px;
    padding: 12px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.5;
    background: var(--inset);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    resize: vertical;
    outline: none;
    margin-top: 8px;
}
.latex-import-textarea:focus { border-color: var(--accent); }

.latex-import-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}

.latex-import-error {
    color: var(--latex-error);
    font-size: 12px;
    font-family: 'Courier New', monospace;
    background: rgba(var(--latex-error-rgb), 0.08);
    border: 1px solid rgba(var(--latex-error-rgb), 0.3);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 8px;
    max-height: 220px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
}

/* Étape 2 : confirmation chapitre/sous-chapitre */
.latex-confirm-block {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--surface-2, #1e1e1e);
}
.latex-confirm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
.latex-confirm-row + .latex-confirm-row {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 8px;
}
.latex-confirm-label {
    flex: 1;
    font-size: 13px;
    color: var(--text-muted, #aaa);
}
.latex-confirm-label em {
    color: var(--text, #eee);
    font-style: normal;
    font-weight: 500;
}
.latex-confirm-select {
    background: var(--surface, #2a2a2a);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text, #eee);
    padding: 4px 8px;
    font-size: 13px;
    max-width: 220px;
}