/* ==========================================================================
   THÈME CLAIR « GRIMOIRE » — Surcharges des pages internes
   MagicTalk, Sang-Satō (manuscrits, personnages, bestiaire, lieux, calendrier),
   Valshaari (calendrier, outils, lexique), Atelier, Boutique.

   Même rôle que theme-fleur-pages.css : magictalk.css / sangsato.css /
   valshaari.css codent leurs couleurs en dur (#1e1632, #0e0b16, #9b59b6,
   #e8dff8, --mt-glass…), donc le thème clair ne les atteint pas. On les
   remappe ici sur les tons de parchemin tanné.

   À charger APRÈS magictalk.css / sangsato.css / valshaari.css / atelier.css.
   ========================================================================== */

html[data-theme="light"] {
    /* Palette de correspondance sombre → grimoire */
    --gr-deep:     #c08d58;  /* remplace #0e0b16 / #0a0a0a (creux, barres) */
    --gr-surface:  #d9b183;  /* remplace #1e1632 (cartes) */
    --gr-surface2: #cfa473;  /* remplace #1a1428 (bulles, champs) */
    --gr-surface3: #c69a68;  /* remplace #241b38 */
    --gr-border:   #8a5c33;  /* remplace #3d2f5e */
    --gr-purple:   #5b2a6e;  /* remplace #9b59b6 / #bf5fff */
    --gr-purple-l: #6d3382;  /* remplace #b57cd9 */
    --gr-ember:    #8c3f12;  /* remplace l'or #ffd700 (illisible sur tan) */
    --gr-herb:     #4a5f24;  /* remplace le cyan #00e5ff */
    --gr-ink:      #2a1608;  /* remplace #e8dff8 */
    --gr-muted:    #5c3a1d;  /* remplace #9a87c0 */
    --gr-dim:      #6d4a28;  /* remplace #6b5d8a */
}

/* ==========================================================================
   1. MAGICTALK
   ========================================================================== */

html[data-theme="light"] {
    --mt-neon-cyan:    #4a5f24;
    --mt-neon-violet:  #5b2a6e;
    --mt-neon-gold:    #8c3f12;
    --mt-neon-rose:    #8f2418;
    --mt-glass:        rgba(217, 177, 131, 0.92);
    --mt-glass-border: rgba(138, 92, 51, 0.55);
    --mt-glow-violet:  0 0 18px rgba(91, 42, 110, 0.30);
    --mt-glow-cyan:    0 0 18px rgba(74, 95, 36, 0.28);
    --mt-glow-gold:    0 0 12px rgba(140, 63, 18, 0.32);
}

/* Filet de sécurité : fonds réappliqués en dur, plus spécifiques que
   magictalk.css, donc insensibles à l'ordre de chargement. */
html[data-theme="light"] .mt-post,
html[data-theme="light"] .mt-composer,
html[data-theme="light"] .mt-side-card,
html[data-theme="light"] .mt-suggest-card,
html[data-theme="light"] .mt-nav,
html[data-theme="light"] .mt-nav-card,
html[data-theme="light"] .mt-modal__content,
html[data-theme="light"] .mt-search-form__input {
    background: linear-gradient(175deg, #dcb689, #c99a6a);
    border-color: var(--gr-border);
    color: var(--gr-ink);
    box-shadow: 0 4px 18px rgba(50, 26, 8, 0.18);
}

html[data-theme="light"] .mt-post__divider,
html[data-theme="light"] .mt-post__actions,
html[data-theme="light"] .mt-composer__divider,
html[data-theme="light"] .mt-post__comments,
html[data-theme="light"] .mt-comments-section {
    border-color: rgba(138, 92, 51, 0.5);
}

html[data-theme="light"] .mt-post__content,
html[data-theme="light"] .mt-composer__textarea,
html[data-theme="light"] .mt-side-user__name,
html[data-theme="light"] .mt-comment__text,
html[data-theme="light"] .mt-search-form__input {
    color: var(--gr-ink);
}

html[data-theme="light"] .mt-post__time,
html[data-theme="light"] .mt-post__handle,
html[data-theme="light"] .mt-side-user__followers,
html[data-theme="light"] .mt-composer__counter,
html[data-theme="light"] .mt-live-dot {
    color: var(--gr-muted);
}

/* Placeholder du composer : il était quasi invisible sur le parchemin */
html[data-theme="light"] .mt-composer__textarea::placeholder,
html[data-theme="light"] .mt-composer__input::placeholder,
html[data-theme="light"] .mt-comment-form input::placeholder,
html[data-theme="light"] .mt-search-form__input::placeholder {
    color: #6d4a28;
    opacity: 1;
}

/* Navigation latérale (Flux / Panthéon / Mon Profil) */
html[data-theme="light"] .mt-nav__link { color: var(--gr-ink); }
html[data-theme="light"] .mt-nav__link:hover,
html[data-theme="light"] .mt-nav__link.active,
html[data-theme="light"] .mt-nav-link.is-active,
html[data-theme="light"] .mt-nav-link:hover {
    background: rgba(91, 42, 110, 0.16);
    color: var(--gr-purple);
}

/* Titres des cartes latérales (étaient dorés → illisibles) */
html[data-theme="light"] .mt-side-card__title { color: var(--gr-ember); }

/* Champs de saisie et bulles de commentaire */
html[data-theme="light"] .mt-composer__input,
html[data-theme="light"] .mt-comment-form input,
html[data-theme="light"] .mt-comment__bubble,
html[data-theme="light"] .mt-comment {
    background: var(--gr-surface2);
    border-color: var(--gr-border);
    color: var(--gr-ink);
}

/* Boutons d'action */
html[data-theme="light"] .mt-composer__submit,
html[data-theme="light"] .mt-comment-form button,
html[data-theme="light"] .mt-btn--violet {
    background: linear-gradient(135deg, #6d3382, #4a2159);
    border-color: #3d1a4a;
    color: #f6e6c8;
}
html[data-theme="light"] .mt-composer__submit:hover:not(:disabled),
html[data-theme="light"] .mt-comment-form button:hover {
    box-shadow: 0 4px 16px rgba(61, 26, 74, 0.45);
}

html[data-theme="light"] .mt-action-btn { color: var(--gr-muted); }
html[data-theme="light"] .mt-action-btn:hover {
    background: rgba(91, 42, 110, 0.12);
    color: var(--gr-purple);
}
html[data-theme="light"] .mt-action-btn.liked { color: #8f2418; }
html[data-theme="light"] .mt-action-btn.liked:hover { background: rgba(143, 36, 24, 0.10); }

html[data-theme="light"] .mt-follow-btn {
    border-color: var(--gr-purple);
    color: var(--gr-purple);
    background: transparent;
}
html[data-theme="light"] .mt-follow-btn:hover,
html[data-theme="light"] .mt-follow-btn.following {
    background: var(--gr-purple);
    color: #f6e6c8;
    box-shadow: 0 3px 12px rgba(91, 42, 110, 0.4);
}

/* @mentions et #hashtags : le cyan néon devient vert d'herbier */
html[data-theme="light"] .mt-mention { color: var(--gr-herb); }
html[data-theme="light"] .mt-hashtag { color: var(--gr-purple); }

/* Overlays (stories, modale image) : restent sombres pour les photos,
   mais teintés brun plutôt que noir bleuté */
html[data-theme="light"] .mt-story-viewer,
html[data-theme="light"] .mt-modal {
    background: rgba(42, 22, 8, 0.90);
}
html[data-theme="light"] .mt-modal__nav { background: rgba(91, 42, 110, 0.45); }
html[data-theme="light"] .mt-modal__nav:hover { background: rgba(91, 42, 110, 0.7); }

html[data-theme="light"] .mt-skeleton {
    background: linear-gradient(90deg, var(--gr-surface2) 25%, var(--gr-surface) 50%, var(--gr-surface2) 75%);
    background-size: 200% 100%;
}

html[data-theme="light"] .mt-posts-grid__item { background: var(--gr-surface2); }
html[data-theme="light"] .mt-story-item__label { color: var(--gr-muted); }

/* ==========================================================================
   2. SANG-SATŌ + VALSHAARI — bandeau de tête commun
   (.ss-hero et .ss-back-link servent aux deux sections)
   ========================================================================== */

html[data-theme="light"] .ss-hero {
    background: linear-gradient(to bottom, rgba(91, 42, 110, .12), transparent);
    border-bottom-color: rgba(138, 92, 51, .45);
}
/* Le sous-titre était #9a87c0 : lavande sur tan = illisible */
html[data-theme="light"] .ss-hero p { color: var(--gr-muted); }

html[data-theme="light"] .ss-back-link {
    background: linear-gradient(180deg, #dcb98d, #c79b6c);
    border-color: var(--gr-border);
    color: var(--gr-ink);
}
html[data-theme="light"] .ss-back-link:hover {
    background: rgba(91, 42, 110, 0.12);
    border-color: var(--gr-purple);
    color: var(--gr-purple);
}

/* ==========================================================================
   3. SANG-SATŌ — fiches (personnages, bestiaire, lieux, factions)
   ========================================================================== */

html[data-theme="light"] .ss-p-card {
    background: linear-gradient(175deg, #dcb689, #c99a6a);
    border-color: var(--gr-border);
}
html[data-theme="light"] .ss-p-card:hover {
    border-color: var(--gr-purple);
    box-shadow: 0 4px 28px rgba(50, 26, 8, .28);
}
html[data-theme="light"] .ss-p-card__img {
    background: var(--gr-deep);
    background-image: radial-gradient(circle at 30% 20%, rgba(91, 42, 110, .14), transparent 60%);
}
html[data-theme="light"] .ss-p-card__img::after { color: #4a2f14; }
html[data-theme="light"] .ss-p-card__body {
    background: linear-gradient(to top, rgba(201, 154, 106, .97), rgba(201, 154, 106, .85) 70%, transparent);
}
html[data-theme="light"] .ss-p-card__cat { color: var(--gr-purple-l); }
html[data-theme="light"] .ss-p-card__nom { color: var(--gr-ink); }
html[data-theme="light"] .ss-p-card__sub { color: var(--gr-muted); }

/* Filtres de catégorie */
html[data-theme="light"] .ss-cat-btn {
    background: linear-gradient(180deg, #dcb98d, #c79b6c);
    border-color: var(--gr-border);
    color: var(--gr-ink);
}
html[data-theme="light"] .ss-cat-btn:hover { border-color: var(--gr-herb); color: #33421a; }
html[data-theme="light"] .ss-cat-btn.is-active {
    background: linear-gradient(160deg, #9c4715, #68280b);
    border-color: #4d1d07;
    color: #f6e6c8;
}

/* Cartes de navigation de l'univers */
html[data-theme="light"] .ss-nav-card:hover { border-color: var(--gr-purple); }
html[data-theme="light"] .ss-nav-card__full-badge {
    color: var(--gr-purple);
    background: rgba(91, 42, 110, .12);
    border-color: rgba(91, 42, 110, .35);
}

/* Fiches détaillées (modale) */
html[data-theme="light"] .ss-dialog {
    background: linear-gradient(175deg, #dcb689, #c99a6a);
    border-color: var(--gr-border);
}
html[data-theme="light"] .ss-dialog::backdrop { background: rgba(42, 22, 8, .6); }
html[data-theme="light"] .ss-dialog-header {
    background: linear-gradient(135deg, var(--ac-card), rgba(91, 42, 110, .12));
}
html[data-theme="light"] .ss-dialog-body h3,
html[data-theme="light"] .ss-dialog-body blockquote { color: var(--gr-purple); }
html[data-theme="light"] .ss-dialog-body { scrollbar-color: var(--gr-purple) transparent; }
html[data-theme="light"] .ss-dialog-body::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--gr-purple), var(--gr-purple-l));
    background-clip: padding-box;
}

/* ==========================================================================
   4. CALENDRIERS (Sang-Satō ET Valshaari — mêmes classes .ss-*)
   ========================================================================== */

html[data-theme="light"] .ss-month-card,
html[data-theme="light"] .ss-season-card,
html[data-theme="light"] .ss-fete-card,
html[data-theme="light"] .ss-converter {
    background: linear-gradient(175deg, #dcb689, #c99a6a);
    border-color: var(--gr-border);
}
/* La boîte de résultat était #0e0b16 (bleu nuit) au milieu du parchemin */
html[data-theme="light"] .ss-converter-result {
    background: linear-gradient(180deg, #c69a68, #b98a58);
    border-color: var(--gr-border);
    color: var(--gr-ink);
}
html[data-theme="light"] .ss-converter-result strong { color: var(--gr-ember); }
html[data-theme="light"] .ss-converter label,
html[data-theme="light"] .ss-conv-souffle { color: var(--gr-muted); }
html[data-theme="light"] .ss-converter input[type="date"] {
    background: #e0bd92;
    border-color: var(--gr-border);
    color: var(--gr-ink);
}
html[data-theme="light"] .ss-conv-zodiac { border-top-color: var(--gr-border); }
html[data-theme="light"] .ss-month-card__pron,
html[data-theme="light"] .ss-fete-pos { color: var(--gr-muted); }
html[data-theme="light"] .ss-fete-header:hover { background: rgba(91, 42, 110, .08); }
html[data-theme="light"] .ss-fete-body blockquote {
    border-left-color: var(--gr-purple);
    color: var(--gr-purple);
}

/* ==========================================================================
   5. SANG-SATŌ — Manuscrits (.ms-*)
   ========================================================================== */

html[data-theme="light"] .ms-card {
    background: linear-gradient(175deg, #dcb689, #c99a6a);
    border-color: var(--gr-border);
}
html[data-theme="light"] .ms-card:hover {
    border-color: var(--gr-purple);
    box-shadow: 0 6px 24px rgba(50, 26, 8, .28);
}
html[data-theme="light"] .ms-cover {
    background: var(--gr-deep);
    background-image: radial-gradient(circle at 30% 20%, rgba(91, 42, 110, .20), transparent 60%);
}
html[data-theme="light"] .ms-serie    { color: var(--gr-purple-l); }
html[data-theme="light"] .ms-titre    { color: var(--gr-ink); }
html[data-theme="light"] .ms-sous-titre,
html[data-theme="light"] .ms-synopsis { color: var(--gr-muted); }
/* Petit texte (11 px) : --gr-dim tombait à 3.6:1 sur le feuillet.
   Encre plus soutenue pour repasser au-dessus de 4.5:1. */
html[data-theme="light"] .ms-progress-label,
html[data-theme="light"] .ms-meta,
html[data-theme="light"] .ms-live-dot { color: #4a2f14; }
html[data-theme="light"] .ms-progress-bar {
    background: #a97a4e;
    border-color: var(--gr-border);
}
html[data-theme="light"] .ms-progress-fill {
    background: linear-gradient(90deg, #5b2a6e, #8c3f12);
}
html[data-theme="light"] .ms-live-dot::before { background: #4a5f24; }
/* Badge « en cours d'écriture » : la bordure teintée reste, le texte passe
   en encre pour rester lisible sur le feuillet */
html[data-theme="light"] .ms-statut { color: var(--gr-purple); }

/* ==========================================================================
   6. VALSHAARI — lexique, outils, leçons
   ========================================================================== */

html[data-theme="light"] .val-card,
html[data-theme="light"] .val-tool-card,
html[data-theme="light"] .vl-entry,
html[data-theme="light"] .vl-card,
html[data-theme="light"] .val-lecon-card {
    background: linear-gradient(175deg, #dcb689, #c99a6a);
    border-color: var(--gr-border);
    color: var(--gr-ink);
}
html[data-theme="light"] .val-trad-box,
html[data-theme="light"] .val-result,
html[data-theme="light"] .vl-result {
    background: linear-gradient(180deg, #c69a68, #b98a58);
    border-color: var(--gr-border);
    color: var(--gr-ink);
}
html[data-theme="light"] .val-trad-box textarea,
html[data-theme="light"] .val-input,
html[data-theme="light"] .vl-search {
    background: #e0bd92;
    border-color: var(--gr-border);
    color: var(--gr-ink);
}
html[data-theme="light"] .val-input::placeholder,
html[data-theme="light"] .vl-search::placeholder { color: #6d4a28; opacity: 1; }

/* ==========================================================================
   7. ATELIER (privé, mais autant qu'il suive)
   ========================================================================== */

html[data-theme="light"] {
    --at-bg:         #c69a68;
    --at-bg2:        #b98a58;
    --at-bg3:        #ad7c50;
    --at-card:       #d9b183;
    --at-border:     #8a5c33;
    --at-purple:     #5b2a6e;
    --at-purple-lt:  #6d3382;
    --at-gold:       #8c3f12;
    --at-gold-lt:    #a04b14;
    --at-text:       #2a1608;
    --at-text-muted: #5c3a1d;
    --at-text-dim:   #6d4a28;
    --at-shadow:     0 4px 24px rgba(50, 26, 8, .22);
    --at-glow:       0 0 20px rgba(91, 42, 110, .22);
}

/* ==========================================================================
   8. Boutique & divers — texte sur fond accent
   ========================================================================== */

html[data-theme="light"] .shop-price-tag,
html[data-theme="light"] .adm-btn-gold,
html[data-theme="light"] .adm-filter-btn.active,
html[data-theme="light"] .adm-page-link.active {
    color: var(--ac-on-accent);
}

/* Le Marché Noir garde son ambiance rouge/noire : zone « interdite ». */

@media (prefers-reduced-motion: reduce) {
    html[data-theme="light"] .ms-live-dot::before { animation: none; }
}