/*
    ---------------------------------------
    Légendaires v2 — design system
    ---------------------------------------
*/

:root{
    --bg:      #100d09;
    --bg2:     #15120d;
    --bg3:     #1a1610;
    --bg4:     #211b12;

    --border:        rgba(212,175,110,.15);
    --border-strong: rgba(212,175,110,.32);

    --text:       #f2ece0;
    --text-muted: #a99b82;
    --text-faint: #6f6551;

    --gold:        #d4af6e;
    --gold-strong: #eecd93;
    --teal:  #5fb8a4;
    --red:   #c9584a;

    --parchment:  #efe6d2;
    --parchment2: #e7dcc2;
    --ptext:  #2c2314;
    --pmuted: #6d5f45;

    --font-display: 'Fredericka the Great', Georgia, serif;
    --font-serif:   'IM Fell DW Pica', Georgia, 'Times New Roman', serif;
    --font-ui:      'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
    background:var(--bg2);
    color:var(--text);
    font-family:var(--font-ui);
    font-size:14px;
}
a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--gold-strong); }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }
code{ font-family:'Consolas', 'Courier New', monospace; }

/* ---------- structure app (sidebar + contenu) ---------- */

.app-shell{ display:flex; height:100vh; overflow:hidden; }

.app-sidebar{
    width:308px; flex-shrink:0; position:relative;
    border-right:1px solid var(--border);
    background:var(--bg3);
    display:flex; flex-direction:column;
    min-width:220px; max-width:560px;
}
.app-sidebar-resize{
    position:absolute; top:0; right:-4px; width:7px; height:100%;
    cursor:col-resize; z-index:3; background:transparent;
}
.app-sidebar-resize:hover, .app-sidebar-resize.is-active{ background:rgba(212,175,110,.25); }
.app-sidebar-head{ padding:22px 22px 16px; border-bottom:1px solid var(--border); }
.app-sidebar-back{
    display:flex; align-items:center; gap:9px; margin-bottom:14px;
    font-size:12px; color:var(--text-muted); letter-spacing:.05em;
}
.app-sidebar-back svg{ flex-shrink:0; }
.app-brand{ font-family:var(--font-display); font-size:26px; color:var(--gold-strong); }
.app-sidebar-body{ flex:1; overflow:auto; padding:16px 12px; }
.app-sidebar-foot{ padding:18px 22px; border-top:1px solid var(--border); }

.nav-group-title{
    font-size:10.5px; letter-spacing:.14em; color:var(--text-faint);
    text-transform:uppercase; padding:6px 10px 8px;
}
.nav-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.nav-item{
    padding:9px 12px; border-radius:6px; font-size:13.5px; color:var(--text-muted);
    display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-item:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.nav-item.is-active{
    background:rgba(212,175,110,.1); border:1px solid var(--border-strong);
    color:var(--gold-strong); font-weight:600;
}
.nav-item.is-empty{ color:var(--text-faint); font-style:italic; }
.nav-item.is-title{ color:var(--text); font-weight:700; font-size:15px; }

.progress-bar{ height:4px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.progress-bar.is-thin{ height:3px; }
.progress-bar-fill{ height:100%; background:var(--gold); }
.progress-row{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-faint); margin-bottom:7px; }

.progress-line{ display:flex; align-items:center; gap:10px; }
.progress-line + .progress-line{ margin-top:8px; }
.progress-line .progress-bar{ flex:1; }
.progress-line-pct{ flex-shrink:0; min-width:28px; text-align:right; font-size:11px; color:var(--gold); font-variant-numeric:tabular-nums; }

/* infobulle personnalisée (titre en gras + stat en dessous), affichée immédiatement au survol de la barre */
.progress-line{ position:relative; }
.progress-tip{
    position:absolute; left:0; bottom:100%; margin-bottom:8px;
    display:flex; flex-direction:column; gap:2px;
    background:var(--bg4); border:1px solid var(--border-strong); border-radius:6px;
    padding:7px 10px; font-size:11px; color:var(--text-muted); white-space:nowrap;
    box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
    opacity:0; visibility:hidden; transform:translateY(3px);
    transition:opacity .12s ease, transform .12s ease;
    pointer-events:none; z-index:30;
}
.progress-tip b{ color:var(--gold-strong); font-weight:600; font-size:11.5px; }
.progress-line:hover .progress-tip{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- pages de lecture / parchemin ---------- */

.app-reading{
    flex:1; overflow:auto; display:flex; justify-content:center;
    padding:56px 40px 80px;
    background:radial-gradient(900px 500px at 50% -10%, rgba(212,175,110,.06), transparent 60%), var(--bg2);
}
.app-reading-inner{ width:90%; }
.chapter-eyebrow{ text-align:center; font-family:var(--font-serif); font-style:italic; font-size:13px; color:var(--text-faint); letter-spacing:.1em; margin-bottom:6px; }
.chapter-title{ text-align:center; font-family:var(--font-display); font-weight:400; font-size:38px; color:var(--gold-strong); margin:6px 0 34px; text-wrap:balance; }

.page-parchment{
    background:linear-gradient(180deg,var(--parchment),var(--parchment2));
    border-radius:3px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.25);
    padding:56px 64px; color:var(--ptext);
}
.page-parchment p{ font-family:var(--reading-font, var(--font-serif)); font-size:var(--reading-font-size, 19px); line-height:1.85; margin:0 0 20px; }
.page-parchment p:last-child{ margin-bottom:0; }
.page-parchment a{ color:var(--ptext); border-bottom:1px dashed #8a6a2e; }
.page-parchment h1,.page-parchment h2,.page-parchment h3{ font-family:var(--font-display); font-weight:400; color:#5a4620; }
.page-parchment blockquote{
    margin:0 0 20px; padding:4px 20px; border-left:3px solid #8a6a2e88;
    font-style:italic; color:var(--pmuted);
}
/* dialogues (convention moderne — ...) : même traitement que l'ancien blockquote,
   appliqué au paragraphe entier puisque le dialogue vit maintenant dans un paragraphe normal. */
.page-parchment .dialogue-line{ font-style:italic; color:var(--pmuted); }
.dropcap{
    float:left; font-family:var(--font-display); font-size:56px; line-height:.8;
    padding:6px 8px 0 0; color:#8a6a2e;
}
/* placeholder `[…]` : contenu pas encore rédigé */
.page-parchment code{
    position:relative; display:block; margin:1.4em 0; padding:0;
    line-height:.8; font-weight:700; font-size:2em; letter-spacing:.2em;
    color:#2b2013; background:transparent;
}
.page-parchment code::after{
    content:'Ici, l\'histoire n\'est pas complète ...';
    position:absolute; padding-left:.5em; font-size:.8em; letter-spacing:0;
    font-family:var(--font-serif); font-style:italic; opacity:.35;
}
.page-parchment.md-annexe code::after{ content:'Ici, le contenu n\'est pas complet ...'; }

/* accordéon parties/chapitres (documents condensés, ex: X.md) */
.xmd-part{ margin-bottom:14px; }
.xmd-part:last-child{ margin-bottom:0; }
.xmd-part-head{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.15); border-radius:6px;
    padding:12px 16px; font-family:var(--font-display); font-weight:400; font-size:20px; color:#5a4620;
}
.xmd-part-head:hover{ background:rgba(0,0,0,.08); }
.xmd-part-head svg{ flex-shrink:0; transition:transform .15s ease; }
.xmd-part-head.is-open svg{ transform:rotate(180deg); }
.xmd-part-body{ padding:16px 6px 2px; }
.xmd-chap{ margin-bottom:10px; }
.xmd-chap:last-child{ margin-bottom:0; }
.xmd-chap-head{
    display:flex; align-items:center; gap:9px; width:100%; text-align:left;
    background:transparent; border:1px solid rgba(0,0,0,.12); border-radius:5px;
    padding:9px 14px; font-family:var(--font-ui); font-weight:600; font-size:15px; color:var(--ptext);
}
.xmd-chap-head:hover{ background:rgba(0,0,0,.03); }
.xmd-chap-head svg{ flex-shrink:0; transition:transform .15s ease; }
.xmd-chap-head.is-open svg{ transform:rotate(180deg); }
.xmd-chap-body{ padding:14px 14px 2px; }
.xmd-chap-body p{ font-size:16px; }
.chapter-stats{
    text-align:center; font-size:12px; color:var(--text-faint); margin:0 0 24px;
}
.chapter-stats b{ color:var(--text-muted); font-weight:600; }

.note-box{
    margin:34px 0; border:1px dashed #8a6a2e88; border-radius:4px;
    padding:16px 20px; background:rgba(138,106,46,.06);
}
.note-box-label{
    font-family:var(--font-ui); font-weight:600; font-size:10.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--pmuted); margin-bottom:6px;
}
.note-box-text{ font-family:var(--font-serif); font-style:italic; font-size:15.5px; line-height:1.6; color:var(--pmuted); }

/* ---------- boutons ---------- */

.btn{
    display:inline-flex; align-items:center; gap:7px;
    font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:7px;
    border:1px solid transparent; background:transparent; color:var(--text-muted);
}
.btn-gold{ background:var(--gold); border-color:var(--gold); color:#1a1610; font-weight:700; }
.btn-gold:hover{ background:var(--gold-strong); border-color:var(--gold-strong); }
.btn-outline-red{ border-color:var(--red); color:var(--red); }
.btn-outline-red:hover{ background:rgba(201,88,74,.12); }
.btn-outline-teal{ border-color:var(--teal); color:var(--teal); }
.btn-ghost{ border-color:var(--border); color:var(--text-muted); }
.btn-ghost:hover{ border-color:var(--border-strong); color:var(--text); }

.field{
    background:var(--bg4); border:1px solid var(--border); color:var(--text);
    font-size:12.5px; padding:8px 10px; border-radius:6px;
}
.field::placeholder{ color:var(--text-faint); }

/* ---------- outils : grille d'accueil ---------- */

.home-hero{ position:relative; text-align:center; padding:28px 0 20px; z-index:1; }
.home-hero-eyebrow{ font-family:var(--font-serif); font-style:italic; font-size:14px; letter-spacing:.28em; color:var(--text-faint); text-transform:uppercase; margin-bottom:6px; }
.home-hero-title{ font-family:var(--font-display); font-weight:400; font-size:64px; margin:0; color:var(--gold-strong); text-shadow:0 0 40px rgba(212,175,110,.25); }

.tool-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; max-width:1160px; margin:0 auto; }
.tool-card{
    width:275px; min-height:190px; flex-shrink:0;
    border:1px solid var(--border); border-radius:10px;
    background:linear-gradient(180deg,var(--bg4),var(--bg3));
    padding:22px; display:flex; flex-direction:column; gap:14px; position:relative;
    color:var(--text); text-decoration:none; transition:border-color .15s ease;
}
.tool-card:hover{ border-color:var(--border-strong); color:var(--text); }
.tool-card.is-featured:hover{ border-color:var(--gold); }
.tool-card.is-featured{
    border-color:var(--gold);
    background:linear-gradient(180deg,#241d13,#1c170f);
    box-shadow:0 0 0 1px rgba(212,175,110,.12), 0 18px 40px -18px rgba(212,175,110,.35);
}
.tool-card-icon{ width:38px; height:38px; border-radius:8px; background:rgba(212,175,110,.1); display:flex; align-items:center; justify-content:center; }
.tool-card-title{ font-weight:600; font-size:16.5px; }
.tool-card-desc{ font-size:12.5px; color:var(--text-muted); margin-top:5px; line-height:1.5; }
.tool-card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--text-faint); }
.tool-card-badge{ position:absolute; top:14px; right:14px; font-size:9.5px; letter-spacing:.1em; color:#1a1610; background:var(--gold); padding:3px 8px; border-radius:999px; font-weight:700; }

.btn-close-x{ background:transparent; border:0; color:var(--text-faint); font-size:22px; line-height:1; }
.btn-close-x:hover{ color:var(--text); }

.tbtn-sm{
    width:26px; height:26px; border-radius:5px; border:1px solid var(--border); background:transparent;
    color:var(--text-muted); font-size:12px; display:inline-flex; align-items:center; justify-content:center; margin-left:4px;
}
.tbtn-sm:hover{ border-color:var(--border-strong); color:var(--gold-strong); }
.db-count{ font-size:11px; color:var(--text-faint); }

/* ---------- bandeau d'usurpation d'identité ---------- */

.impersonate-bar{
    position:fixed; top:0; left:0; right:0; z-index:5000;
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:8px 16px; background:var(--gold); color:#1a1610;
    font-size:12.5px; font-weight:600;
}
.impersonate-bar a{ color:#1a1610; text-decoration:underline; font-weight:700; }
.impersonate-bar a:hover{ color:#000; }
@media print{ .impersonate-bar{ display:none; } }
body:has(> .impersonate-bar):not(.page-carte){ padding-top:34px; }

/* ---------- panneau latéral (ajout/édition) — réutilisé par DB, Utilisateurs... ---------- */

.db-panel-backdrop{
    position:fixed; inset:0; background:rgba(10,8,5,.55); backdrop-filter:blur(2px); z-index:40;
    display:flex; justify-content:flex-end;
}
.db-panel{
    width:560px; max-width:100%; height:100%; background:var(--bg3); border-left:1px solid var(--border-strong);
    display:flex; flex-direction:column; box-shadow:-30px 0 60px -20px rgba(0,0,0,.6);
}
.db-panel-head{
    padding:20px 26px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.db-panel-head h2{ font-family:var(--font-serif); font-weight:400; font-size:21px; color:var(--gold-strong); margin:0; }
.db-panel-body{ flex:1; overflow:auto; padding:22px 26px; display:flex; flex-direction:column; gap:16px; }
.db-panel-foot{ padding:16px 26px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-shrink:0; }

.db-field{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-muted); }
.db-field em{ color:var(--text-faint); font-style:normal; font-size:11px; }
.db-field input:not([type="checkbox"]), .db-field select{
    background:var(--bg4); border:1px solid var(--border); color:var(--text);
    font-size:13.5px; padding:9px 11px; border-radius:6px;
}
.db-field input:not([type="checkbox"]):focus, .db-field select:focus{ outline:0; border-color:var(--border-strong); }
.db-field input[type="checkbox"]{ accent-color:var(--gold); width:16px; height:16px; }
.db-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.db-ref-copy{ display:flex; gap:8px; }
.db-ref-copy input{ flex:1; background:var(--bg4); border:1px solid var(--border); color:var(--text-faint); padding:9px 11px; border-radius:6px; font-size:12.5px; }

/* ---------- mini graphique de progression (mots/jour) — Écriture, Accueil ---------- */

.progress-chart{ display:flex; align-items:flex-end; gap:2px; height:34px; margin-top:8px; }
.progress-chart-bar{ flex:1; background:var(--gold); opacity:.55; border-radius:1px 1px 0 0; min-height:2px; }
.progress-chart-bar:hover{ opacity:1; }

/* ---------- résultats de recherche (plein texte dans le livre) ---------- */

.search-result{
    display:block; padding:12px 14px; border-radius:8px; border:1px solid var(--border);
    margin-bottom:8px; color:var(--text-muted); text-decoration:none;
}
.search-result:hover{ border-color:var(--border-strong); background:rgba(212,175,110,.05); color:var(--text-muted); }
.search-result-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.search-result-title{ color:var(--gold-strong); font-weight:600; font-size:13px; }
.search-snippet{ font-size:12px; line-height:1.6; color:var(--text-faint); margin-top:4px; }
.search-snippet mark{ background:rgba(212,175,110,.25); color:var(--gold-strong); border-radius:2px; padding:0 2px; }

/* ---------- verre (panneaux flottants carte) ---------- */

.glass{ background:rgba(23,19,13,.86); backdrop-filter:blur(6px); border:1px solid var(--border-strong); }

/* ---------- utilitaires ---------- */

.u-scroll{ overflow:auto; }
.u-flex{ display:flex; }
.u-hidden{ display:none !important; }