/* ==========================================================================
   Dies Nox — thème sobre (chargé après style.css)
   Même langage que le site du Studio : noir, ivoire, gris, Montserrat et Bodoni Moda.
   Aucun texte ni aucune fonction de la page n'est modifié.
   ========================================================================== */

/* Couleurs et polices */
:root {
    --bg: #0a0a0b;
    --bg-2: #111113;
    --ink: #e9e6df;
    --ink-2: #cfccc5;
    --ink-3: #8f8c86;
    --line: rgba(233, 230, 223, .12);
    --line-2: rgba(233, 230, 223, .22);
    --f-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
    --f-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-ui: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-book: 'Cormorant Garamond', Georgia, serif;
}
/* Une seule teinte pour les trois tomes : l'ivoire */
body, body.theme-naastica, body.theme-ildoria, body.theme-novandria { --accent: #e9e6df; --gold: #e9e6df; }
html { background: var(--bg); }
body { font-weight: 300; color: var(--ink-2); }
::selection { background: var(--ink); color: var(--bg); }

/* Pas de lueurs ni d'apparitions floutées */
.js [data-reveal] { filter: none !important; }
.ch { filter: none !important; }
.nav, .nav *, .scroll-cue, .brand-mark, .brand-world, .nav-links a { text-shadow: none !important; }
.card-glare, .flow-glare, .b-sheen, .book-halo, .card-corner { display: none !important; }
.marquee { display: none !important; }

/* Titres et textes */
.eyebrow { font-family: var(--f-ui); font-size: .7rem; font-weight: 400; letter-spacing: .32em; color: var(--ink-3); }
.h-display { font-family: var(--f-display); font-weight: 400; letter-spacing: 0; color: var(--ink); }
.lead { font-family: var(--f-ui); font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.8; color: var(--ink-2); }
p { font-weight: 300; }
.lore-highlight, .lore-scroll p.lore-highlight { font-family: var(--f-ui) !important; font-weight: 400; letter-spacing: .3em; color: var(--ink-3) !important; }
.author-quote { border-left-color: var(--line-2); }

/* Boutons : un contour fin, comme sur le site du Studio */
.btn {
    border-radius: 0; border: 1px solid rgba(233, 230, 223, .4); background: transparent !important;
    color: var(--ink) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    font-family: var(--f-ui); font-weight: 400; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
    transition: background-color .3s, color .3s, border-color .3s;
}
.btn:hover { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink); }
.btn-primary { border-color: var(--ink); }
.btn-primary::before, .btn-primary::after, .btn-ghost::before, .btn-ghost::after { display: none !important; }

/* Barre de navigation */
.nav.scrolled .nav-inner { background: rgba(10, 10, 11, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand-mark { font-family: 'Cinzel', Georgia, serif; font-weight: 400; letter-spacing: .3em; color: var(--ink); }
.brand-mark b { font-weight: 900; }
.brand-world { font-family: var(--f-ui); font-weight: 400; letter-spacing: .42em; color: var(--ink-3); }
.nav-links a { font-family: var(--f-ui); font-weight: 400; font-size: .68rem; letter-spacing: .24em; color: var(--ink-3); }
.nav-links a:hover, .nav-links a.active, .nav-links a[aria-current] { color: var(--ink); }
.nav-links a::after { background: var(--ink) !important; box-shadow: none !important; }
.ts-thumb { background: var(--ink); box-shadow: none; }
.ts-btn { font-family: var(--f-ui); font-weight: 500; }
.ts-btn.active { color: var(--bg); }
.mobile-menu { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Accueil : le titre en Cinzel, « DIES » en gras */
.hero-title { font-family: 'Cinzel', Georgia, serif; color: var(--ink); text-shadow: 0 4px 30px rgba(0, 0, 0, .45); }
.hero-title .ht-dies { font-weight: 900; }
.hero-title .ht-nox { font-weight: 400; }
.hero-tome { font-family: var(--f-ui); font-weight: 400; font-size: .72rem; letter-spacing: .34em; color: var(--ink-2); }
.hero-tome .ht-line { background: var(--line-2) !important; }
.hero-tagline { font-family: var(--f-display); font-weight: 400; color: var(--ink); text-shadow: 0 2px 16px rgba(0, 0, 0, .55); }
.scroll-cue { font-family: var(--f-ui); font-weight: 400; color: var(--ink-3); }

/* Cartes, livres et listes */
.card, .flow-card, .dl-card { border-radius: 2px; border-color: var(--line); box-shadow: none !important; }
.card:hover, .dl-card:hover { border-color: var(--line-2); }
.syn-block p { color: var(--ink-2); line-height: 1.85; }

/* Fenêtres, lecteur et pied de page */
.layer { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-close { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.reader p, .reader .reader-content, .immersive-reader-custom p { font-family: var(--f-book); }
.footer-motto { font-family: var(--f-display); font-style: italic; font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--ink); }
.footer-sub { font-family: var(--f-ui); color: var(--ink-3); }
.back-to-top { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.loader-mark { font-family: 'Cinzel', Georgia, serif; }

/* Derniers restes de couleur : tout passe en ivoire ou en gris */
.tag, .format-line { color: var(--ink-3) !important; }
.creator-copy .intro em { color: var(--ink) !important; }
.footer-nav a:hover { color: var(--ink) !important; }
.doc-header, .doc-alert, .codex-warning h3 { color: var(--ink) !important; border-color: var(--line-2) !important; }
.author-quote.doc-quote { border-left-color: var(--line-2) !important; }

/* Lisibilité de l'accueil : le paysage reste, le texte passe devant */
.nav::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 170px; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(10, 10, 11, .9), rgba(10, 10, 11, .62) 45%, rgba(10, 10, 11, 0));
}
.nav-links a { color: var(--ink-2); }
.hero::before {
    content: ""; position: absolute; left: 50%; top: 0; width: min(1400px, 140vw); height: min(92vh, 900px); transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(ellipse 46% 42% at 50% 46%, rgba(10, 10, 11, .62), rgba(10, 10, 11, .34) 55%, rgba(10, 10, 11, 0) 78%);
}
.hero-tome { color: var(--ink); }