/* ============================================
   NIGHTANGELS.FR - THEME.CSS
   Composants universels
============================================ */
/* ============================================
   UNIVERS COLORS
============================================ */
:root{
    --lilith-color:#5a0000;
    --premiere-color:#5a0000;
    --abigail-color:#d7aa72;
    --celeste-color:#d7aa72;
    --mammon-color:#d4a017;
    --cupidite-color:#d4a017;
    --naamah-color:#c04a78;
    --luxure-color:#c04a78;
    --mausoleum-color:#9aa4b0;
    --lilitu-color:#9aa4b0;
    --oracle-color:#d4b0ff;
        
    --vassago-color:#d34821;
    --lucifer-color:#c6a46a;
    --nightangels-color:#b30000;
}
/* ============================================
   PAGE BACKGROUND
============================================ */
body[data-page="univers"] .univers-background,
body[data-page="royaume"] .royaume-background{
    position:fixed;
    inset:0;
    z-index:-15;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transform:scale(1.05);
}
/* ============================================
   ROYAUME
============================================ */
body[data-page="royaume"]{
    --portal-color:var(--accent-color);
    --theme-primary:var(--accent-color,#c6a46a);
    --theme-secondary:var(--gold-light,#f2dfb8);
    --univers-gold:var(--accent-color);
    --theme-bg:#040404;
    --theme-bg-secondary:#0b0b0d;
    --theme-card:#111114;
    --theme-border:rgba(255,255,255,.08);
    --theme-text:#f3f0ea;
    --theme-text-secondary:#b4aea4;
    background:#040404;
    color:var(--theme-text);
    overflow-x:hidden;
}
/* ============================================
      LILITH
=========================================== */
body[data-universe="lilith"]{
        --accent-color:#5a0000;
        --theme-bg:#050505;
        --theme-bg-secondary:#120000;
        --theme-primary:#7a0000;
        --theme-primary-light:#ff3c3c;
        --theme-text:#ffffff;
        --theme-text-secondary:rgba(255, 255, 255, .72);
        --theme-title:#ffffff;
        --theme-gold:#b30000;
        --theme-gold-light:#ffb3b3;
        --theme-border:rgba(255, 0, 0, .14);
        --theme-glow:rgba(255, 0, 0, .22);
        --hero-overlay:rgba(15, 0, 0, .92);
        --hero-overlay-strong:rgba(10, 0, 0, .58);
        --parchment-title:#24120d;
        --parchment-text:#322018;
        --choice-leave-bg1:#5d4c32;
        --choice-leave-bg2:#403221;
        --choice-leave-hover1:#78613e;
        --choice-leave-hover2:#56442b;
        --choice-leave-border:#b69452;
        --choice-continue-bg1:#420707;
        --choice-continue-bg2:#220202;
        --choice-continue-hover1:#650909;
        --choice-continue-hover2:#330202;
        --header-bg:
        linear-gradient(
        to bottom,
        rgba(15, 0, 0, .92),
        rgba(10, 0, 0, .58)    );
        --header-border:rgba(255, 0, 0, .14);
}
/* ===========================================
   NIGHTANGELS
=========================================== */
body[data-universe="nightangels"]{
    --accent-color:#b30000;
    --header-border:rgba(255,0,0,.22);
    --theme-bg:#050505;
    --theme-primary:#7a0000;
    --theme-primary-light:#d10000;
    --theme-text:#f5f5f5;
    --theme-text-secondary:rgba(255,255,255,.72);
    --theme-title:#ffffff;
    --theme-gold:#d4c3a3;
    --theme-border:rgba(255,0,0,.14);
    --theme-glow:rgba(180,0,0,.18);
}
/* ===========================================  
     UNIVERS
============================================ */
body[data-page="univers"]{  
	--accent-color:#c6a46a; 
    --header-border:rgba(255,255,255,0.08);  
    --theme-bg:#040404;  
    --theme-bg-secondary:#0b0b0d;  
    --theme-card:#111114;  
    --theme-border:  
    rgba(255,255,255,0.08);  
    --theme-gold:#c6a46a;  
    --theme-gold-light:#f2dfb8;  
    --theme-text:#f3f0ea;  
    --theme-text-secondary:#b4aea4;  
    --theme-glow:  
    rgba(198,164,106,0.16);  
    background:#040404;  
    color:var(--theme-text);  
    overflow-x:hidden;  
}  
/* =========================================== 
    UNIVERS BACKGROUND  
============================================ */
body[data-page="univers"] .univers-background{  
    background-image:  
    linear-gradient(
    to bottom,
    rgba(0,0,0,.45),
    rgba(0,0,0,.70)
),  
    url('/images/univers-bg.webp');  
}   
/* ============================================
   GENERIC SECTION
============================================ */
.theme-section{
    position:relative;
    padding:120px 20px;
}
/* ============================================
   SECTION TITLES
============================================ */
.section-title{
    margin-bottom:25px;
    font-size:clamp(2.5rem,6vw,5rem);
    color:var(--theme-title);
    text-transform:uppercase;
    letter-spacing:4px;
    text-align:center;
    text-shadow:
    0 0 25px var(--theme-glow);
}
.section-subtitle{
    margin-bottom:70px;
    text-align:center;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--theme-gold);
    font-size:.9rem;
}
/* ============================================
   GLASS PANEL
============================================ */
.glass-panel{
    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.04),
        rgba(0,0,0,.30)
    );
    border:1px solid var(--theme-border);
    backdrop-filter:blur(12px);
    border-radius:28px;
}
/* ============================================
   BUTTON SYSTEM
============================================ */
.theme-btn{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    padding:18px 34px;
    border-radius:18px;
    border:1px solid var(--theme-border);
    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.06),
        rgba(0,0,0,.28)
    );
    color:var(--theme-text);
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.82rem;
    font-weight:600;
    cursor:pointer;
    transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .4s ease,
    background .4s ease;
}
.theme-btn:active{
    transform:scale(.98);
}
.theme-btn:hover{
    transform:translateY(-4px);
    border-color:var(--theme-border);
    box-shadow:
    0 0 35px var(--theme-glow);
}
.theme-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );
    transform:skewX(-25deg);
    transition:.9s ease;
}
.theme-btn:hover::before{
    left:150%;
}
/* ============================================
   SEPARATOR
============================================ */
.theme-separator{
    width:220px;
    height:2px;
    margin:0 auto 28px;
    background:
    linear-gradient(
        to right,
        transparent,
        var(--theme-primary-light),
        transparent
    );
    opacity:.7;
}
/* ============================================
   CONTAINER
============================================ */
.theme-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    position:relative;
    z-index:5;
}