/* ==========================================================================
   THÈME SOMBRE ARCANE — surcouche V6
   --------------------------------------------------------------------------
   À charger APRÈS style.css / header.css / footer.css.
   Tout est scopé sous [data-theme="dark"] : les thèmes light et fleur ne
   sont jamais touchés. Aucune classe existante n'est renommée.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — encre violette profonde
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
    --ac-bg:      #0a0614;
    --ac-bg2:     #120b20;
    --ac-card:    #171029;
    --ac-text:    #e8e4f2;
    --ac-muted:   #a99ec6;
    --ac-border:  #2b2040;
    --ac-line:    #3a2c55;

    --ac-accent1: #d4af37;  /* Or */
    --ac-accent2: #8a2be2;  /* Violet */

    /* Nouvelles nuances de la DA (utilisables partout) */
    --ac-gold-lt:   #f0d98a;
    --ac-gold-hi:   #fff8e4;
    --ac-gold-dk:   #b8891f;
    --ac-violet-lt: #c9a3ff;
    --ac-violet-hi: #a86bff;

    --ac-on-accent: #170e04;

    --ac-shadow-sm: 0 2px 14px rgba(0, 0, 0, .45);
    --ac-shadow:    0 26px 60px -40px rgba(0, 0, 0, .95);
    --ac-glow-gold:   0 0 34px -10px rgba(212, 175, 55, .55);
    --ac-glow-violet: 0 0 38px -12px rgba(138, 43, 226, .6);
}

/* --------------------------------------------------------------------------
   2. FOND — nébuleuse + grain
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body {
    background:
        radial-gradient(1200px 700px at 50% -12%, rgba(138, 43, 226, .20), transparent 62%),
        radial-gradient(900px 600px at 92% 18%,  rgba(212, 175, 55, .07), transparent 60%),
        radial-gradient(1000px 800px at 4% 62%,  rgba(96, 40, 180, .14), transparent 62%),
        linear-gradient(180deg, #0c0718 0%, #0a0614 45%, #080410 100%);
    background-attachment: fixed;
    color: var(--ac-text);
}

/* Grain léger, au-dessus du fond, sous le contenu */
html[data-theme="dark"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: .3;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
}

html[data-theme="dark"] .ac-main,
html[data-theme="dark"] .ac-footer { position: relative; z-index: 1; }
html[data-theme="dark"] .ac-header { position: sticky; z-index: 200; }
html[data-theme="dark"] .ac-header__inner,
html[data-theme="dark"] .ac-footer__inner { position: relative; z-index: 1; }

/* Le contenu réel passe au-dessus des pseudo-éléments décoratifs
   (trame, lune, halo…) qui n'ont pas de z-index explicite et se
   retrouveraient sinon peints par-dessus (::after est posé en dernier). */
html[data-theme="dark"] .hero-section > *,
html[data-theme="dark"] .ac-card > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   3. HEADER — verre dépoli + filet or → violet
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .ac-header {
    background: linear-gradient(180deg, rgba(18, 11, 32, .92), rgba(13, 8, 24, .78));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(212, 175, 55, .16), 0 18px 40px -28px rgba(0, 0, 0, .9);
}

html[data-theme="dark"] .ac-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .55) 22%, rgba(168, 107, 255, .70) 50%, rgba(212, 175, 55, .55) 78%, transparent);
}

html[data-theme="dark"] .ac-brand__name {
    background: linear-gradient(100deg, #f3e2ad, #d4af37 42%, #fff3cd 58%, #c08f2a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[data-theme="dark"] .ac-nav__link {
    letter-spacing: .04em;
    transition: color .22s ease, background .22s ease, text-shadow .22s ease;
}

html[data-theme="dark"] .ac-nav__link:hover {
    color: var(--ac-gold-lt);
    background: rgba(212, 175, 55, .08);
    text-shadow: 0 0 14px rgba(212, 175, 55, .5);
}

/* --------------------------------------------------------------------------
   4. BOUTONS
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .ac-btn {
    background: rgba(30, 20, 52, .55);
    border-color: rgba(120, 95, 170, .32);
    color: #b6a9d4;
    transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

html[data-theme="dark"] .ac-btn:hover {
    border-color: rgba(212, 175, 55, .6);
    color: var(--ac-gold-lt);
    background: rgba(212, 175, 55, .10);
    box-shadow: 0 0 16px rgba(212, 175, 55, .22);
}

html[data-theme="dark"] .ac-btn--primary {
    color: var(--ac-on-accent);
    background: linear-gradient(150deg, #f8ecc4 0%, #dfbc4c 40%, #b8891f 100%);
    border-color: rgba(255, 240, 196, .55);
    box-shadow: 0 12px 34px -14px rgba(212, 175, 55, .85), inset 0 1px 0 rgba(255, 255, 255, .5);
}

html[data-theme="dark"] .ac-btn--primary:hover {
    color: var(--ac-on-accent);
    background: linear-gradient(150deg, #fff4d6 0%, #ecca5e 40%, #c9992a 100%);
    transform: translateY(-2px);
    box-shadow: 0 20px 50px -14px rgba(212, 175, 55, 1), inset 0 1px 0 rgba(255, 255, 255, .65);
}

html[data-theme="dark"] .ac-btn--ghost {
    background: linear-gradient(180deg, rgba(138, 43, 226, .14), rgba(138, 43, 226, .04));
    border-color: rgba(168, 107, 255, .40);
    color: #d3c8ee;
}

html[data-theme="dark"] .ac-btn--ghost:hover {
    border-color: rgba(200, 160, 255, .9);
    color: #fff;
    background: rgba(138, 43, 226, .16);
    box-shadow: var(--ac-glow-violet);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   5. CARTES — profondeur et lueur au survol
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .ac-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(32, 21, 56, .85), rgba(14, 9, 26, .92));
    border-color: rgba(120, 95, 170, .24);
    box-shadow: var(--ac-shadow), inset 0 1px 0 rgba(255, 255, 255, .045);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

html[data-theme="dark"] .ac-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, .55);
    box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 1), var(--ac-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Halo d'angle sur les cartes de l'accueil */
html[data-theme="dark"] .home-card::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 190px; height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, .16), transparent 68%);
    pointer-events: none;
}

html[data-theme="dark"] .card-valshaari {
    border-color: rgba(168, 107, 255, .36);
    background: linear-gradient(165deg, rgba(40, 20, 72, .88), rgba(15, 9, 28, .92));
    box-shadow: var(--ac-shadow), var(--ac-glow-violet), inset 0 1px 0 rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .card-valshaari::before {
    background: radial-gradient(circle, rgba(138, 43, 226, .26), transparent 68%);
    animation: acBreathe 9s ease-in-out infinite;
}

html[data-theme="dark"] .card-valshaari:hover {
    border-color: rgba(200, 160, 255, .75);
    box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 1), 0 0 48px -12px rgba(138, 43, 226, .6), inset 0 1px 0 rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .card-sato .card-title      { color: var(--ac-gold-lt); }
html[data-theme="dark"] .card-valshaari .card-title { color: var(--ac-violet-lt); }
html[data-theme="dark"] .card-shop .card-title      { color: #f4d66b; }

/* Icônes de carte : pastille sertie plutôt qu'un glyphe nu */
html[data-theme="dark"] .home-card .card-icon {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 14px;
    font-size: 1.5rem;
    color: var(--ac-gold-lt);
    background: linear-gradient(160deg, rgba(212, 175, 55, .20), rgba(212, 175, 55, .04));
    border: 1px solid rgba(212, 175, 55, .32);
    box-shadow: inset 0 0 20px rgba(212, 175, 55, .12);
}

html[data-theme="dark"] .card-valshaari .card-icon {
    color: var(--ac-violet-lt);
    background: linear-gradient(160deg, rgba(138, 43, 226, .32), rgba(138, 43, 226, .06));
    border-color: rgba(168, 107, 255, .42);
    box-shadow: inset 0 0 20px rgba(138, 43, 226, .2);
}

/* --------------------------------------------------------------------------
   6. HERO — cadre enluminé, lune, titre en or
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .hero-section {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(120, 95, 170, .26);
    padding: clamp(52px, 7vw, 84px) clamp(20px, 4vw, 40px) clamp(48px, 6.5vw, 76px);
    background:
        radial-gradient(760px 340px at 50% 0%,   rgba(138, 43, 226, .30), transparent 70%),
        radial-gradient(420px 260px at 50% 108%, rgba(212, 175, 55, .10), transparent 70%),
        linear-gradient(180deg, rgba(28, 18, 50, .86), rgba(15, 9, 28, .90));
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Trame arcanique en losanges, effacée au centre */
html[data-theme="dark"] .hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    background-image:
        repeating-linear-gradient(45deg,  rgba(212, 175, 55, .35) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, rgba(168, 107, 255, .28) 0 1px, transparent 1px 22px);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, transparent 30%, #000 78%);
            mask-image: radial-gradient(circle at 50% 40%, transparent 30%, #000 78%);
}

/* Lune flottante */
html[data-theme="dark"] .hero-section::after {
    content: "";
    position: absolute;
    top: 46px;
    right: clamp(16px, 6vw, 76px);
    width: clamp(58px, 9vw, 96px);
    height: clamp(58px, 9vw, 96px);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #efe4c4, #cbb98e 46%, #7a6a48 78%);
    box-shadow: 0 0 60px rgba(240, 217, 138, .35), inset -22px -8px 0 -4px rgba(12, 7, 24, .92);
    opacity: .5;
    animation: acMoon 11s ease-in-out infinite;
    pointer-events: none;
}

html[data-theme="dark"] .hero-title {
    font-size: clamp(2.1rem, 6vw, 3.6rem);
    line-height: 1.12;
    background: linear-gradient(180deg, var(--ac-gold-hi) 0%, var(--ac-gold-lt) 40%, #c99b2c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 34px rgba(212, 175, 55, .28));
}

/* Séparateur losange sous le titre — ajouter la classe .ac-divider sur un <div> */
html[data-theme="dark"] .ac-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 320px;
    margin: 0 auto 24px;
}

html[data-theme="dark"] .ac-divider::before,
html[data-theme="dark"] .ac-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .6));
}

html[data-theme="dark"] .ac-divider::after {
    background: linear-gradient(90deg, rgba(212, 175, 55, .6), transparent);
}

/* --------------------------------------------------------------------------
   7. CTA
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .cta-section {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(168, 107, 255, .34);
    padding: clamp(40px, 6vw, 56px) clamp(20px, 4vw, 40px);
    background:
        radial-gradient(600px 260px at 50% 0%, rgba(138, 43, 226, .26), transparent 72%),
        linear-gradient(180deg, rgba(30, 17, 58, .80), rgba(13, 8, 24, .90));
}

html[data-theme="dark"] .cta-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .05) 50%, transparent 60%);
    background-size: 220% 100%;
    animation: acSweep 7s linear infinite;
}

html[data-theme="dark"] .cta-section > * { position: relative; z-index: 1; }

html[data-theme="dark"] .cta-title {
    background: linear-gradient(180deg, var(--ac-gold-hi), var(--ac-accent1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .ac-footer {
    position: relative;
    border-top: none;
    background: linear-gradient(180deg, rgba(16, 10, 30, .90), rgba(9, 5, 18, .96));
}

html[data-theme="dark"] .ac-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .40) 25%, rgba(168, 107, 255, .55) 50%, rgba(212, 175, 55, .40) 75%, transparent);
}

/* --------------------------------------------------------------------------
   9. FORMULAIRES & PANNEAUX
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .ac-auth-card {
    background: linear-gradient(165deg, rgba(32, 21, 56, .88), rgba(14, 9, 26, .94));
    border-color: rgba(120, 95, 170, .26);
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .ac-auth-title {
    background: linear-gradient(180deg, var(--ac-gold-hi), var(--ac-accent1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[data-theme="dark"] .ac-form-input {
    background: rgba(10, 6, 20, .7);
    border-color: rgba(120, 95, 170, .3);
}

html[data-theme="dark"] .ac-form-input:focus {
    border-color: rgba(200, 160, 255, .8);
    box-shadow: 0 0 0 3px rgba(138, 43, 226, .18), 0 0 24px -6px rgba(138, 43, 226, .55);
}

html[data-theme="dark"] .notif-dropdown,
html[data-theme="dark"] .lang-dropdown,
html[data-theme="dark"] .theme-dropdown {
    background: linear-gradient(180deg, rgba(26, 17, 46, .98), rgba(14, 9, 26, .98));
    border-color: rgba(120, 95, 170, .3);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 1), 0 0 0 1px rgba(212, 175, 55, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-theme="dark"] blockquote {
    border-left-color: var(--ac-violet-hi);
    background: linear-gradient(90deg, rgba(138, 43, 226, .10), transparent);
    border-radius: 0 8px 8px 0;
}

/* --------------------------------------------------------------------------
   10. CURSEUR ARCANE (piloté par arcane-fx.js)
   -------------------------------------------------------------------------- */
html[data-arcane-cursor="on"],
html[data-arcane-cursor="on"] * { cursor: none !important; }

/* Une <dialog> ouverte via showModal() passe dans le "top layer" du
   navigateur, au-dessus de tout le reste : le curseur custom (simple div
   positionnée en z-index dans le flux normal) se retrouve alors masqué
   derrière la modale, alors que le curseur natif reste caché (cursor:none
   ci-dessus) → aucun curseur visible du tout. On réactive le curseur natif
   tant qu'une dialog est ouverte. */
html[data-arcane-cursor="on"]:has(dialog[open]),
html[data-arcane-cursor="on"]:has(dialog[open]) * { cursor: auto !important; }
html[data-arcane-cursor="on"]:has(dialog[open]) #arcane-cursor { opacity: 0 !important; }

#arcane-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, filter .2s ease;
}

#arcane-cursor .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, .55);
    box-shadow: 0 0 14px rgba(212, 175, 55, .35), inset 0 0 10px rgba(138, 43, 226, .35);
    animation: acSpin 9s linear infinite;
}

#arcane-cursor .ring i {
    position: absolute;
    width: 3px; height: 3px;
    background: var(--ac-gold-lt, #f0d98a);
    transform: rotate(45deg);
    box-shadow: 0 0 8px currentColor;
}

#arcane-cursor .ring i:nth-child(1) { top: -2px;  left: 50%;  margin-left: -1.5px; }
#arcane-cursor .ring i:nth-child(2) { bottom: -2px; left: 50%; margin-left: -1.5px; background: #c9a3ff; }
#arcane-cursor .ring i:nth-child(3) { left: -2px;  top: 50%;   margin-top: -1.5px;  background: #c9a3ff; }
#arcane-cursor .ring i:nth-child(4) { right: -2px; top: 50%;   margin-top: -1.5px; }

#arcane-cursor .core {
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: #fff6d8;
    box-shadow: 0 0 10px rgba(240, 217, 138, .9);
}

#arcane-fx {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    /* Sous le header (z-index 200) : la traînée d'étincelles ne doit
       jamais passer devant les menus déroulants. */
    z-index: 5;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes acBreathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes acSweep   { from { background-position: -220% 0; } to { background-position: 220% 0; } }
@keyframes acMoon    { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }
@keyframes acSpin    { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    html[data-theme="dark"] .hero-section::after,
    html[data-theme="dark"] .cta-section::after,
    html[data-theme="dark"] .card-valshaari::before,
    #arcane-cursor .ring { animation: none !important; }
    html[data-theme="dark"] .ac-card:hover,
    html[data-theme="dark"] .ac-btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   12. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* backdrop-filter sur .ac-header crée un containing block pour les
       descendants position:fixed : le menu burger (position:fixed;
       top:64px; bottom:0) se retrouvait alors calé dans les 64px du
       header au lieu de la viewport entière, et s'affichait écrasé
       sous le contenu de la page. On retire le filtre du header en
       mobile (le menu ouvert a son propre fond opaque juste en dessous). */
    html[data-theme="dark"] .ac-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    html[data-theme="dark"] .ac-header__menu {
        background: linear-gradient(180deg, rgba(16, 10, 30, .98), rgba(9, 5, 18, .99));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    html[data-theme="dark"] .hero-section::after { display: none; }
    /* Le curseur custom n'a aucun sens au doigt */
    html[data-arcane-cursor="on"],
    html[data-arcane-cursor="on"] * { cursor: auto !important; }
    #arcane-cursor, #arcane-fx { display: none; }
}

html[data-theme="dark"] .ac-footer__brand {
    background: linear-gradient(100deg, #f3e2ad, #d4af37 42%, #fff3cd 58%, #c08f2a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[data-theme="dark"] .ac-footer__top {
    background: linear-gradient(180deg, #1a1130, #100a20);
}

html[data-theme="dark"] .ac-footer__social a {
    background: rgba(30, 20, 52, .55);
    border-color: rgba(120, 95, 170, .32);
    color: #b6a9d4;
}

html[data-theme="dark"] .ac-footer__app {
    background: linear-gradient(150deg, #f8ecc4 0%, #dfbc4c 40%, #b8891f 100%);
    border-color: rgba(255, 240, 196, .55);
    box-shadow: 0 12px 34px -18px rgba(212, 175, 55, .85), inset 0 1px 0 rgba(255, 255, 255, .5);
}