/* ═══════════════════════════════════════════════════════════════════
   SCRIPTORIUM EDITOR — éditeur vanilla JS (scriptorium-editor.js)
   Adapté de Scholar Editor v2. Variables Scriptorium uniquement.

   Table de correspondance Scholar → Scriptorium :
     --c-pine        → --gold          (couleur d'accent principale)
     --c-pine-mid    → --gold-mid      (accent intermédiaire)
     --c-pine-light  → --gold-mid      (accent clair / focus)
     --c-pine-pale   → --gold-pale     (fond pâle accent)
     --c-bg          → --bg            (fond général)
     --c-bg2         → --bg-alt        (fond secondaire)
     --c-surface     → --bg-card       (fond surface blanche)
     --c-border      → --border        (bordure standard)
     --c-border-soft → rgba(--border à 60 %)
     --c-text        → --ink           (texte principal)
     --c-text-mid    → --ink-mid       (texte secondaire)
     --c-muted       → --ink-soft      (texte atténué)
     --c-muted-light → rgba(--ink-soft à 70 %)
     --font-ui       → --sans
     --font-serif    → --serif
     --r-sm/md/lg    → --radius-sm/md/lg

   ATTENTION : ne pas mettre display:flex sur un conteneur .se-editor.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Conteneur générique ─────────────────────────────────────────────
   Utilisé pour les instances multi-champ (editor-summary, editor-ft…)
   Le sélecteur #editor reste valide pour la rétrocompat mono-instance.
   ─────────────────────────────────────────────────────────────────── */
.se-editor,
#editor {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    overflow: visible; /* requis : sticky toolbar */
    position: relative;
}
.se-editor:focus-within,
#editor:focus-within {
    border-color: var(--gold-mid);
    box-shadow: 0 0 0 3px var(--gold-border);
}

/* ── Toolbar ─────────────────────────────────────────────────────────
   Injectée dynamiquement par scriptorium-editor.js.
   ─────────────────────────────────────────────────────────────────── */
.se-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 12px;
    background: var(--bg);
    user-select: none;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1.5px solid var(--border);
    border-bottom: 1px solid rgba(28, 26, 22, 0.08);
    margin: -1.5px -1.5px 0 -1.5px; /* compense la bordure du conteneur */
}
.se-editor:focus-within .se-toolbar,
#editor:focus-within .se-toolbar {
    border-color: var(--gold-mid);
    border-bottom-color: rgba(28, 26, 22, 0.08);
}

/* ── Groupes et séparateurs de toolbar ───────────────────────────────*/
.se-group { display: inline-flex; gap: 2px; align-items: center; }
.se-sep   {
    display: inline-block;
    width: 1px; height: 20px;
    background: var(--border);
    margin: 0 5px;
    flex-shrink: 0;
}

/* ── Boutons de toolbar ───────────────────────────────────────────────*/
.se-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 30px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: .82rem;
    font-family: var(--sans);
    color: var(--ink-mid);
    white-space: nowrap;
    line-height: 1;
    transition: background .12s, color .12s;
}
.se-btn:hover  { background: var(--gold-pale); color: var(--gold); }
.se-btn.active { background: var(--gold-pale); color: var(--gold); font-weight: 600; }

/* Bouton "Insérer" du panel lien */
.se-btn-apply             { background: var(--gold) !important; color: #fff !important; }
.se-btn-apply:hover       { background: var(--gold-mid) !important; }

/* ── Select (styles de bloc : Paragraphe / Titre 1…4) ────────────────*/
.se-select {
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-family: var(--sans);
    background: var(--bg-card);
    cursor: pointer;
    color: var(--ink-mid);
}
.se-select:focus {
    outline: none;
    border-color: var(--gold-mid);
}

/* ── Panel lien (inséré dans la toolbar) ────────────────────────────*/
.se-link-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 12px;
    right: 12px;
    background: var(--bg-card);
    border: 1.5px solid var(--gold-mid);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: 0 8px 32px rgba(28, 26, 22, 0.12);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.se-link-panel input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--sans);
    font-size: .875rem;
    color: var(--ink);
    background: var(--bg);
    outline: none;
    box-sizing: border-box;
}
.se-link-panel input:focus { border-color: var(--gold-mid); }

/* ── Bubble menu (apparaît à la sélection de texte) ─────────────────*/
.se-bubble {
    position: absolute;
    display: none;
    align-items: center;
    gap: 2px;
    background: var(--gold);
    border-radius: var(--radius-md);
    padding: 4px 6px;
    box-shadow: 0 8px 32px rgba(28, 26, 22, 0.18);
    z-index: 999;
    pointer-events: all;
}
.se-bubble button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, .85);
    border-radius: var(--radius-sm);
    transition: background .12s, color .12s;
}
.se-bubble button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.se-bubble-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .25);
    margin: 0 3px;
}

/* ── Zone de saisie ──────────────────────────────────────────────────*/
.se-area {
    min-height: 440px;
    padding: 24px 32px;
    outline: none;
    font-size: var(--font-size-summary, 13px);
    line-height: 1.7;
    color: var(--ink);
    font-family: var(--sans);
}

/* Placeholder via data-attribute */
.se-area:empty::before {
    content: attr(data-placeholder);
    color: var(--ink-soft);
    opacity: .7;
    pointer-events: none;
    white-space: pre-line;
    font-style: italic;
}

/* ── Contenu de la zone — typographie ───────────────────────────────*/
/* ── Titres : mirroir de .bkv-summary — utilisent les variables "Typographie" ── */
.se-area h1,
.se-area h2,
.se-area h3,
.se-area h4 {
    font-family: var(--serif);
    color: var(--gold);
    font-weight: 400;
    line-height: 1.25;
    margin: 1em 0 .3em;
}
.se-area h1 { font-size: calc(var(--font-size-h1, 20px) * 0.78); }
.se-area h2 { font-size: calc(var(--font-size-h2, 15px) * 0.87); }
.se-area h3,
.se-area h4 { font-size: var(--font-size-summary, 13px); }
.se-area p  { margin: 0 0 12px; }
.se-area ul,
.se-area ol { padding-left: 26px; margin-bottom: 12px; }
.se-area li { margin-bottom: 4px; }

.se-area blockquote {
    border-left: 3px solid var(--gold-border, rgba(180,140,60,.35));
    padding: .3rem .75rem;
    margin: .5rem 0;
    color: var(--ink-mid);
    font-style: italic;
    background: none;
}

/* Bloc code — couleurs adaptées au thème Scriptorium (fond sombre encre) */
.se-area pre {
    background: var(--topbar-bg);       /* #1C1A16 — même fond sombre que la topbar */
    color: var(--gold-pale);            /* texte pâle doré */
    padding: 18px 20px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 14px 0;
    font-family: var(--mono);
    font-size: .875rem;
    line-height: 1.6;
}
.se-area pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.se-area code {
    background: var(--gold-pale);
    color: var(--gold);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .875em;
    font-family: var(--mono);
}

/* Médias */
.se-area img       { max-width: 100%; border-radius: var(--radius-md); margin: 8px 0; display: block; }
.se-area figure    { margin: 16px 0; }
.se-area figcaption {
    text-align: center;
    font-size: .85rem;
    color: var(--ink-soft);
    margin-top: 6px;
    font-style: italic;
    outline: none;
}

/* Tableaux */
.se-area table          { width: 100%; border-collapse: collapse; margin: 14px 0; }
.se-area th,
.se-area td             { border: 1px solid var(--border); padding: 8px 14px; }
.se-area th             { background: var(--bg-alt); font-weight: 600; }
.se-area tr:hover td    { background: var(--bg); }

/* Liens */
.se-area a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Règle horizontale */
.se-area hr {
    border: none;
    border-top: 2px solid var(--border);
    margin: 20px 0;
}

/* Alignements (préservés depuis les commandes execCommand) */
.se-area [style*="text-align: center"],
.se-area [style*="text-align:center"]  { text-align: center; }
.se-area [style*="text-align: right"],
.se-area [style*="text-align:right"]   { text-align: right; }
.se-area [style*="text-align: justify"],
.se-area [style*="text-align:justify"] { text-align: justify; }

/* ── Hauteur réduite pour les champs courts (ex: résumé) ─────────────
   Ajouter la classe .se-editor--compact sur le div conteneur.
   ─────────────────────────────────────────────────────────────────── */
.se-editor--compact .se-area { min-height: 160px; }

/* ── Rendu lecture seule ─────────────────────────────────────────────
   .se-readonly : classe à poser sur n'importe quel div pour afficher
   du HTML produit par l'éditeur (rendu typographique identique à
   la zone d'édition, sans toolbar ni comportement éditable).

   #bkv-reader-body : panneau texte intégral du BookViewer — reçoit
   le même traitement pour que blockquote, code, img, etc. soient
   stylés correctement dans la vue /books/{id}/view.
   ─────────────────────────────────────────────────────────────────── */
.se-readonly,
#bkv-reader-body { min-height: 0; }

.se-readonly h1,
#bkv-reader-body h1 {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 600;
    margin: 20px 0 12px;
    color: var(--gold);
    line-height: 1.3;
}
.se-readonly h2,
#bkv-reader-body h2 {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 16px 0 8px;
    color: var(--ink);
}
.se-readonly h3,
#bkv-reader-body h3 { font-size: 1.05rem; font-weight: 700; margin: 14px 0 6px; color: var(--ink-mid); }
.se-readonly h4,
#bkv-reader-body h4 { font-size: 1rem; font-weight: 600; margin: 10px 0 4px; color: var(--ink-soft); }
.se-readonly p,
#bkv-reader-body p  { margin: 0 0 12px; }
.se-readonly ul,
.se-readonly ol,
#bkv-reader-body ul,
#bkv-reader-body ol { padding-left: 26px; margin-bottom: 12px; }
.se-readonly li,
#bkv-reader-body li { margin-bottom: 4px; line-height: 1.7; }

.se-readonly blockquote,
#bkv-reader-body blockquote {
    border-left: 4px solid var(--gold-mid);
    margin: 16px 0;
    padding: 12px 20px;
    background: var(--gold-pale);
    color: var(--ink-mid);
    font-style: italic;
    text-align: left; /* annule le justify du viewer sur ce contexte */
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.se-readonly pre,
#bkv-reader-body pre {
    background: var(--topbar-bg);
    color: var(--gold-pale);
    padding: 18px 20px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 14px 0;
    line-height: 1.6;
    font-family: var(--mono);
    font-size: .875rem;
}
.se-readonly pre code,
#bkv-reader-body pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.se-readonly code,
#bkv-reader-body code {
    background: var(--gold-pale);
    color: var(--gold);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .875em;
    font-family: var(--mono);
}
.se-readonly img,
#bkv-reader-body img       { max-width: 100%; border-radius: var(--radius-md); margin: 8px 0; display: block; }
.se-readonly figure,
#bkv-reader-body figure    { margin: 16px 0; }
.se-readonly figcaption,
#bkv-reader-body figcaption {
    text-align: center;
    font-size: .85rem;
    color: var(--ink-soft);
    margin-top: 6px;
    font-style: italic;
}
.se-readonly table,
#bkv-reader-body table          { width: 100%; border-collapse: collapse; margin: 14px 0; }
.se-readonly th,
.se-readonly td,
#bkv-reader-body th,
#bkv-reader-body td             { border: 1px solid var(--border); padding: 8px 14px; }
.se-readonly th,
#bkv-reader-body th             { background: var(--bg-alt); font-weight: 600; }
.se-readonly tr:hover td,
#bkv-reader-body tr:hover td    { background: var(--bg); }
.se-readonly a,
#bkv-reader-body a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.se-readonly hr,
#bkv-reader-body hr { border: none; border-top: 2px solid var(--border); margin: 20px 0; }

.se-readonly [style*="text-align: center"],
.se-readonly [style*="text-align:center"],
#bkv-reader-body [style*="text-align: center"],
#bkv-reader-body [style*="text-align:center"]  { text-align: center; }
.se-readonly [style*="text-align: right"],
.se-readonly [style*="text-align:right"],
#bkv-reader-body [style*="text-align: right"],
#bkv-reader-body [style*="text-align:right"]   { text-align: right; }
.se-readonly [style*="text-align: justify"],
.se-readonly [style*="text-align:justify"],
#bkv-reader-body [style*="text-align: justify"],
#bkv-reader-body [style*="text-align:justify"] { text-align: justify; }

/* ── Redimensionnement d'image (via style inline width/height) ───────
   L'éditeur insère des images avec max-width:100% par défaut.
   L'utilisateur peut définir width et/ou height via un panneau dédié.
   Ces règles permettent aux styles inline de s'appliquer correctement
   dans tous les contextes (édition, lecture seule, viewer).
   ─────────────────────────────────────────────────────────────────── */
.se-area img[style*="width"],
.se-readonly img[style*="width"],
#bkv-reader-body img[style*="width"] {
    max-width: 100%; /* sécurité : jamais plus large que le conteneur */
    width: revert;   /* laisse le style inline prendre la main */
}
.se-area img[style*="height"],
.se-readonly img[style*="height"],
#bkv-reader-body img[style*="height"] {
    height: revert;  /* laisse le style inline prendre la main */
}

/* ── Footnotes (mécanique BookEditor) ───────────────────────────────
   Styles pour les notes de bas de page injectées par BookEditor.php
   via la mécanique makeFnBtn / syncFn existante, portée sur l'éditeur.
   ─────────────────────────────────────────────────────────────────── */
.se-fn-sep {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0 8px;
}
.se-fn-list {
    list-style: decimal;
    padding-left: 20px;
    font-size: .85rem;
    color: var(--ink-mid);
    line-height: 1.6;
}
.se-fn-list li { margin-bottom: 4px; }
.se-fn-list sup a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
}

/* Ancres de référence dans le corps du texte */
.se-area sup.se-fn-ref a,
.se-readonly sup.se-fn-ref a {
    color: var(--gold);
    font-weight: 700;
    text-decoration: none;
    font-size: .75em;
    vertical-align: super;
}

/* ── Panneau de redimensionnement d'image ───────────────────────────
   Apparaît au clic sur une image dans la zone d'édition.
   ─────────────────────────────────────────────────────────────────── */
.se-resize-panel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1.5px solid var(--gold-mid);
    border-radius: var(--radius-md);
    padding: 7px 10px;
    box-shadow: 0 4px 16px rgba(28, 26, 22, .15);
    white-space: nowrap;
    flex-wrap: nowrap;
}
.se-resize-label {
    font-size: .75rem;
    font-family: var(--sans);
    color: var(--ink-soft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.se-resize-input {
    width: 64px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    text-align: center;
}
.se-resize-input:focus {
    outline: none;
    border-color: var(--gold-mid);
}
.se-resize-unit {
    font-size: .72rem;
    color: var(--ink-soft);
    font-family: var(--mono);
}
.se-resize-sep {
    font-size: .85rem;
    color: var(--ink-soft);
    margin: 0 2px;
}

/* ── Notes de bas de page — option C (symbole fixe / numérotation au rendu)
   ─────────────────────────────────────────────────────────────────── */

/* Appel de note dans le corps à l'édition : † en exposant */
.se-area sup.bke-fn-ref {
    color: var(--gold);
    font-weight: 700;
    cursor: default;
    vertical-align: super;
    /* pas de font-size : on laisse la taille native du <sup> */
}

/* Appel de note au rendu (viewer) : numéro cliquable en exposant */
.se-readonly sup.bke-fn-ref a,
#bkv-reader-body sup.bke-fn-ref a,
.se-readonly sup.bke-fn-ref .bke-fn-callref,
#bkv-reader-body sup.bke-fn-ref .bke-fn-callref {
    text-decoration: none;
    color: var(--gold);
    font-weight: 700;
    /* pas de font-size : on laisse la taille native du <sup> */
}
.se-readonly sup.bke-fn-ref a:hover,
#bkv-reader-body sup.bke-fn-ref a:hover {
    text-decoration: underline;
}

/* Lien de retour dans la liste des notes (numéro "N." cliquable) */
.se-readonly .bke-fn-back,
#bkv-reader-body .bke-fn-back {
    text-decoration: none;
    color: var(--gold-mid);
    font-size: .82em;
    font-weight: 600;
    margin-right: 5px;
}
.se-readonly .bke-fn-back:hover,
#bkv-reader-body .bke-fn-back:hover {
    color: var(--gold);
    text-decoration: none;
}

/* Liste des notes — <ol> sans numérotation auto (le JS s'en charge) */
.se-area ol.bke-footnotes,
.se-readonly ol.bke-footnotes,
#bkv-reader-body ol.bke-footnotes {
    list-style: none;
    padding-left: 0;
    font-size: .85rem;
    color: var(--ink-mid);
    line-height: 1.6;
    margin-top: 6px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
}
.se-area ol.bke-footnotes li,
.se-readonly ol.bke-footnotes li,
#bkv-reader-body ol.bke-footnotes li {
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

/* Symbole † dans le panneau d'édition */
.bke-fn-sym {
    color: var(--gold);
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

/* ── Mode source HTML ────────────────────────────────────────────────
   Textarea affiché en lieu et place de la zone d'édition quand
   le mode source est actif (bouton </> dans la toolbar).
   ─────────────────────────────────────────────────────────────────── */
.se-source-area {
    display: block;
    width: 100%;
    min-height: 440px;
    padding: 20px 24px;
    box-sizing: border-box;
    border: none;
    outline: none;
    resize: vertical;
    font-family: var(--mono);
    font-size: .85rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--bg);
    tab-size: 2;
    white-space: pre-wrap;   /* retour à la ligne automatique */
    overflow-wrap: break-word;
    overflow-x: hidden;
}
.se-editor--compact .se-source-area { min-height: 160px; }