/* ================================================================
   LORE_PAGE.CSS
   Le grimoire du royaume (pages/lore.php) + fragment réutilisé par la
   modale "Aperçu" de l'onglet admin Lore (admin/admin_dashboard.php).

   Palette "grimoire" identique à celle de styles/news_feed.css (voir
   docs/CODEX_REDESIGN.md) : mêmes valeurs, dupliquées ici en local pour
   ne pas charger tout news_feed.css (carrousel, composer, etc.) sur une
   simple page de lecture.

   Les classes .lore-chapter* sont le fragment partagé : elles ne
   dépendent d'aucune mise en page de page et peuvent s'afficher seules
   (modale d'aperçu). Les classes .lore-page-* sont le chrome propre à
   la page publique (masthead, sommaire, CTA).
   ================================================================ */

:root {
    --lore-ink: #0b0e1a;
    --lore-ink-card: #141a30;
    --lore-hairline: rgba(143, 163, 214, .14);
    --lore-hairline-strong: rgba(231, 223, 190, .22);
    --lore-parchment: #efe6cd;
    --lore-parchment-dim: #c9bd9a;
    --lore-text: #e7e6ef;
    --lore-text-dim: #9aa0c0;
    --lore-text-faint: #6b7096;
    --lore-rune: #6fe3ff;
    --lore-sigil: #9a7cf5;
    --lore-shadow: 0 22px 60px -24px rgba(0, 0, 0, .7);
    --lore-font-title: 'Cinzel', Georgia, serif;
    --lore-font-body: 'EB Garamond', Georgia, serif;
    --lore-font-ui: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* === Fragment partagé : un chapitre ===
   Chaque chapitre est traité comme une page enluminée à part entière :
   cadre ouvragé (coins tracés en background, sans markup ni pseudo-
   élément supplémentaire), lettrine dorée, image "matée" comme une
   estampe encadrée. */
.lore-chapter {
    position: relative;
    padding: 40px 34px 36px;
    margin-bottom: 56px;
    border: 1px solid var(--lore-hairline);
    border-radius: 16px;
    box-shadow: var(--lore-shadow);
    background-repeat: no-repeat;
    background-image:
        linear-gradient(var(--lore-hairline-strong), var(--lore-hairline-strong)),
        linear-gradient(var(--lore-hairline-strong), var(--lore-hairline-strong)),
        linear-gradient(var(--lore-hairline-strong), var(--lore-hairline-strong)),
        linear-gradient(var(--lore-hairline-strong), var(--lore-hairline-strong)),
        linear-gradient(var(--lore-hairline-strong), var(--lore-hairline-strong)),
        linear-gradient(var(--lore-hairline-strong), var(--lore-hairline-strong)),
        linear-gradient(var(--lore-hairline-strong), var(--lore-hairline-strong)),
        linear-gradient(var(--lore-hairline-strong), var(--lore-hairline-strong)),
        radial-gradient(900px 260px at 50% -10%, rgba(111, 227, 255, .05), transparent 65%),
        linear-gradient(180deg, rgba(24, 30, 54, .6), rgba(15, 19, 36, .82));
    background-position:
        18px 18px, 18px 18px,
        calc(100% - 18px) 18px, calc(100% - 18px) 18px,
        18px calc(100% - 18px), 18px calc(100% - 18px),
        calc(100% - 18px) calc(100% - 18px), calc(100% - 18px) calc(100% - 18px),
        0 0, 0 0;
    background-size:
        22px 1px, 1px 22px,
        22px 1px, 1px 22px,
        22px 1px, 1px 22px,
        22px 1px, 1px 22px,
        100% 100%, 100% 100%;
}
.lore-chapter:last-child { margin-bottom: 0; }

/* Losange ornemental entre deux chapitres, posé dans l'espacement - inspiré
   des fleurons de fin de section des manuscrits, discret rappel de la forme
   hexagonale du sceau/menu ruche sans en reprendre la couleur néon. */
.lore-chapter:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -32px;
    width: 9px;
    height: 9px;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(135deg, var(--lore-rune), var(--lore-sigil));
    box-shadow: 0 0 10px rgba(111, 227, 255, .45);
    border-radius: 2px;
}

.lore-chapter-num {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--lore-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--lore-text-faint); margin: 0 0 10px;
}
.lore-chapter-num::before {
    content: '';
    width: 5px; height: 5px; border-radius: 1px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--lore-rune), var(--lore-sigil));
}
.lore-chapter-title {
    position: relative;
    font-family: var(--lore-font-title); font-weight: 600; font-size: 25px; letter-spacing: .5px;
    color: var(--lore-parchment); margin: 0 0 22px; padding-bottom: 16px;
}
.lore-chapter-title::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 64px; height: 2px;
    background: linear-gradient(90deg, var(--lore-rune), var(--lore-sigil), transparent);
    border-radius: 2px;
}
.lore-chapter-image {
    display: block; max-width: 100%; border-radius: 8px; margin: 0 0 22px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .4),
        0 0 0 6px rgba(15, 19, 36, .9),
        0 0 0 7px var(--lore-hairline-strong),
        var(--lore-shadow);
}
.lore-chapter-body { font-family: var(--lore-font-body); font-size: 17px; line-height: 1.75; color: var(--lore-text); }
.lore-chapter-body p { margin: 0 0 14px; }
.lore-chapter-body p:last-child { margin-bottom: 0; }
.lore-chapter-body a { color: var(--lore-rune); text-decoration: underline dotted; }
.lore-chapter-body a:hover { color: var(--lore-sigil); }

/* Lettrine - grande capitale en calligraphie (Cinzel), dorée par un dégradé
   texte plutôt qu'un aplat, avec une lueur douce pour l'effet "enluminure".
   Posée par lore_apply_lettrine() côté serveur (includes/lore_helpers.php),
   une seule fois par chapitre quelle que soit la structure du contenu -
   plus fiable qu'un ::first-letter CSS. */
.lore-lettrine {
    float: left;
    font-family: var(--lore-font-title);
    font-weight: 700;
    font-size: 4.1rem;
    line-height: .78;
    margin: 6px 12px 0 0;
    background: linear-gradient(160deg, var(--lore-parchment) 35%, var(--lore-rune) 130%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 12px rgba(111, 227, 255, .3));
}

/* === Chrome de la page publique === */
body.lore-page {
    margin: 0;
    font-family: var(--lore-font-body);
    color: var(--lore-text);
    background-color: var(--lore-ink);
    background-repeat: no-repeat;
    background-image:
        /* vignette : assombrit les bords, comme une page éclairée à la bougie */
        radial-gradient(ellipse 1100px 900px at 50% 0%, transparent 45%, rgba(0, 0, 0, .55) 100%),
        /* grain de parchemin très discret */
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .015) 0px, rgba(255, 255, 255, .015) 1px, transparent 1px, transparent 3px),
        radial-gradient(1px 1px at 8% 6%, rgba(255,255,255,.35) 0, transparent 100%),
        radial-gradient(1px 1px at 22% 18%, rgba(255,255,255,.3) 0, transparent 100%),
        radial-gradient(1px 1px at 40% 4%, rgba(255,255,255,.3) 0, transparent 100%),
        radial-gradient(1px 1px at 63% 12%, rgba(255,255,255,.28) 0, transparent 100%),
        radial-gradient(1px 1px at 82% 8%, rgba(255,255,255,.3) 0, transparent 100%),
        radial-gradient(1px 1px at 95% 20%, rgba(255,255,255,.25) 0, transparent 100%);
}

.lore-page-topstrip {
    height: 56px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; border-bottom: 1px solid var(--lore-hairline); font-family: var(--lore-font-ui); font-size: 13px;
}
@media (min-width: 700px) { .lore-page-topstrip { padding: 0 40px; } }
.lore-page-back { color: rgba(154, 160, 192, .75); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.lore-page-back:hover { color: var(--lore-rune); }
.lore-page-brand { color: rgba(154, 160, 192, .45); font-weight: 600; letter-spacing: .5px; }

.lore-page-masthead { text-align: center; padding: 64px 24px 50px; background: radial-gradient(700px 320px at 50% 0%, rgba(111,227,255,.07), transparent 70%); }
.lore-page-seal {
    margin: 0 auto 22px; width: 58px; height: 58px;
    filter: drop-shadow(0 0 10px rgba(111, 227, 255, .35));
    animation: lore-page--lore-seal-glow 5s ease-in-out infinite;
}
@keyframes lore-page--lore-seal-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(111, 227, 255, .28)); }
    50% { filter: drop-shadow(0 0 16px rgba(154, 124, 245, .4)); }
}
.lore-page-masthead h1 {
    margin: 0 0 16px; font-family: var(--lore-font-title); font-weight: 700; font-size: 38px; letter-spacing: 4px;
    background: linear-gradient(135deg, var(--lore-parchment), var(--lore-parchment-dim));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 700px) { .lore-page-masthead h1 { font-size: 46px; } }
.lore-page-sub { font-style: italic; font-size: 16px; color: var(--lore-text-dim); margin: 0 0 26px; }
.lore-page-rule { position: relative; width: 160px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--lore-rune), var(--lore-sigil), transparent); }
.lore-page-rule::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 7px; height: 7px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--lore-ink);
    border: 1px solid var(--lore-sigil);
}

.lore-page-empty {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    text-align: center; font-style: italic; color: var(--lore-text-dim); padding: 30px 24px 90px;
}
.lore-page-empty-seal { opacity: .6; }

.lore-page-main { max-width: 1200px; margin: 0 auto; padding: 40px 24px 0; display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap; }
@media (min-width: 900px) { .lore-page-main { padding: 60px 80px 0; flex-wrap: nowrap; } }

.lore-page-toc { flex: 0 0 auto; width: 100%; }
@media (min-width: 900px) { .lore-page-toc { flex: 0 0 220px; position: sticky; top: 40px; width: auto; } }
.lore-page-toc-label { font-family: var(--lore-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--lore-text-faint); margin: 0 0 16px; }
.lore-page-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--lore-hairline); }
.lore-page-toc a {
    display: flex; align-items: baseline; gap: 10px;
    padding: 8px 0 8px 16px; font-family: var(--lore-font-ui); font-size: 13px; color: var(--lore-text-dim);
    text-decoration: none; border-left: 2px solid transparent; margin-left: -1px;
    transition: color .15s ease, border-color .15s ease;
}
.lore-page-toc-num {
    font-family: var(--lore-font-title); font-size: 12px; font-weight: 600; letter-spacing: .5px;
    color: var(--lore-parchment-dim); flex: 0 0 auto;
}
.lore-page-toc-title { flex: 1; }
.lore-page-toc a:hover { color: var(--lore-text); border-left-color: var(--lore-rune); }
.lore-page-toc a:hover .lore-page-toc-num { color: var(--lore-rune); }

.lore-page-chapters { flex: 1; min-width: 0; max-width: 660px; }

.lore-page-cta {
    max-width: 620px; margin: 24px auto 0; padding: 48px 32px 40px; text-align: center;
    background: var(--lore-ink-card); border: 1px solid var(--lore-hairline); border-radius: 18px;
    box-shadow: var(--lore-shadow);
}
.lore-page-cta-frame {
    display: block; width: 88px; height: 88px; margin: 0 auto 18px; padding: 3px;
    background: linear-gradient(135deg, var(--lore-rune), var(--lore-sigil));
    clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
    filter: drop-shadow(0 0 12px rgba(111, 227, 255, .3));
}
.lore-page-cta-frame img {
    width: 100%; height: 100%; display: block; object-fit: cover;
    clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
}
.lore-page-cta-quote { font-family: var(--lore-font-body); font-style: italic; font-size: 18px; color: var(--lore-parchment); margin: 0 0 26px; line-height: 1.5; }
.lore-page-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lore-page-btn { font-family: var(--lore-font-ui); font-weight: 700; font-size: 13.5px; padding: 11px 22px; border-radius: 9px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.lore-page-btn-rune { background: linear-gradient(135deg, var(--lore-rune), var(--lore-sigil)); color: var(--lore-ink); }
.lore-page-btn-rune:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(111, 227, 255, .5); }
.lore-page-btn-ghost { background: transparent; border: 1px solid rgba(154, 160, 192, .3); color: var(--lore-text); }
.lore-page-btn-ghost:hover { border-color: var(--lore-rune); color: var(--lore-rune); }

.lore-page-foot { text-align: center; padding: 44px 24px 70px; font-style: italic; font-size: 13px; color: var(--lore-text-faint); }

@media (prefers-reduced-motion: reduce) {
    body.lore-page * { transition-duration: .01ms !important; animation: none !important; }
}