/* ==========================================================================
   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; }

#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) {
    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; }
}