/* ══════════════════════════════════════════════
   Ambervale Grimoire — Styles publics
   Thème sombre / or — compatible Blocksy
   ══════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────── */
:root {
    --av-gold:        #c8a951;
    --av-gold-light:  #e0c070;
    --av-bg:          #1a1a1f;
    --av-bg-card:     #22222a;
    --av-bg-hover:    #2a2a35;
    --av-bg-open:     #1e1e28;
    --av-border:      #3a3a4a;
    --av-text:        #d4d0c8;
    --av-text-muted:  #888;
    --av-radius:      4px;
}

/* ── Conteneur principal ────────────────────── */
.ambervale-grimoire {
    margin: 40px 0 20px;
    font-family: inherit;
}

.ambervale-grimoire-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--av-gold);
}

.ambervale-grimoire-title {
    margin: 0 !important;
    font-size: 1.3em !important;
    color: var(--av-gold) !important;
    border: none !important;
    padding: 0 !important;
}

.ambervale-grimoire-count {
    font-size: .85em;
    color: var(--av-text-muted);
    background: var(--av-bg-card);
    border: 1px solid var(--av-border);
    border-radius: 10px;
    padding: 2px 10px;
}

/* ── Groupes (sous-éléments) ────────────────── */
.ambervale-spell-group {
    margin-bottom: 24px;
}

.ambervale-group-title {
    font-size: 1em !important;
    color: var(--av-gold) !important;
    margin: 0 0 8px !important;
    padding: 6px 12px !important;
    background: var(--av-bg-card) !important;
    border-left: 3px solid var(--av-gold) !important;
    border-radius: 0 var(--av-radius) var(--av-radius) 0 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .85em !important;
}

.ambervale-sub-title {
    font-size: .9em !important;
}

/* ── Carte sort ─────────────────────────────── */
.ambervale-spell-card {
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    margin-bottom: 4px;
    overflow: hidden;
    background: var(--av-bg-card);
    transition: border-color .15s;
}

.ambervale-spell-card:hover {
    border-color: var(--av-gold);
}

.ambervale-spell-card.is-open {
    border-color: var(--av-gold);
    background: var(--av-bg-open);
}

/* ── Bouton toggle ──────────────────────────── */
.ambervale-spell-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--av-text);
    font-family: inherit;
    font-size: .95em;
    transition: background .15s;
    flex-wrap: wrap;
}

.ambervale-spell-toggle:hover {
    background: var(--av-bg-hover);
}

.ambervale-spell-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--av-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85em;
    color: var(--av-gold);
    transition: transform .2s;
    line-height: 1;
}

.is-open .ambervale-spell-icon {
    transform: rotate(45deg);
}

.ambervale-spell-name {
    flex: 1;
    font-weight: 600;
    color: #e8e4d8;
    min-width: 120px;
}

.ambervale-spell-meta {
    font-size: .8em;
    color: var(--av-text-muted);
    white-space: nowrap;
}

.ambervale-spell-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Badges ─────────────────────────────────── */
.ambervale-badge-magelame {
    font-size: .72em;
    background: #4a3500;
    color: var(--av-gold);
    border: 1px solid var(--av-gold);
    border-radius: 3px;
    padding: 1px 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ambervale-badge-secret {
    font-size: .72em;
    background: #3a0a0a;
    color: #e07070;
    border: 1px solid #804040;
    border-radius: 3px;
    padding: 1px 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ambervale-badge-passive {
    font-size: .72em;
    background: #0a2a3a;
    color: #70b0e0;
    border: 1px solid #305070;
    border-radius: 3px;
    padding: 1px 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Corps du sort ──────────────────────────── */
.ambervale-spell-body {
    border-top: 1px solid var(--av-border);
    padding: 14px 16px 14px 44px;
    animation: av-slide-in .15s ease;
}

@keyframes av-slide-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ambervale-spell-description {
    font-size: .9em;
    line-height: 1.7;
    color: var(--av-text);
    white-space: pre-line;
}

/* ── Styles fiches personnage ───────────────── */
.ambervale-character-spells,
.ambervale-character-techniques {
    margin: 16px 0;
}

.ambervale-empty-notice {
    color: var(--av-text-muted);
    font-style: italic;
    padding: 12px 0;
}

.ambervale-error {
    color: #e07070;
    font-style: italic;
    font-size: .9em;
}

/* ── Responsive ─────────────────────────────── */
@media ( max-width: 600px ) {
    .ambervale-spell-meta { display: none; }
    .ambervale-spell-body { padding-left: 16px; }
}

/* ══════════════════════════════════════════════
   Tableau grimoire wiki — affichage horizontal
   ══════════════════════════════════════════════ */

.ambervale-spell-table {
    margin-bottom: 16px;
}

/* ── Labels de section ── */
.av-section-label {
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--av-gold);
    padding: 10px 0 6px;
    font-weight: 700;
    border-bottom: 1px solid var(--av-border);
    margin-bottom: 4px;
}

.av-section-other {
    margin-top: 12px;
    color: var(--av-text-muted);
}

/* ── Famille de sorts (une ligne) ── */
.av-family-wrap {
    margin-bottom: 3px;
}

.av-spell-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}

/* ── Flèche de progression ── */
.av-arrow {
    display: flex;
    align-items: center;
    padding: 0 4px;
    color: var(--av-gold);
    font-size: .9em;
    opacity: .7;
    flex-shrink: 0;
    align-self: center;
}

/* ── Cellule sort ── */
.av-spell-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: var(--av-bg-card);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--av-text);
    min-width: 120px;
    max-width: 220px;
    transition: border-color .15s, background .15s;
    position: relative;
}

.av-spell-cell:hover {
    border-color: var(--av-gold);
    background: var(--av-bg-hover);
}

.av-spell-cell.is-active {
    border-color: var(--av-gold);
    background: var(--av-bg-open);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.av-cell-level {
    font-size: .7em;
    color: var(--av-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.av-cell-name {
    font-size: .88em;
    font-weight: 600;
    color: #e8e4d8;
    line-height: 1.3;
}

.av-cell-mana {
    font-size: .75em;
    color: var(--av-text-muted);
}

.av-cell-badges {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* ── Panneau description ── */
.av-desc-panel {
    background: var(--av-bg-open);
    border: 1px solid var(--av-gold);
    border-top: none;
    border-radius: 0 0 var(--av-radius) var(--av-radius);
    padding: 14px 16px;
    margin-bottom: 8px;
    animation: av-slide-in .15s ease;
}

.av-desc-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--av-border);
    flex-wrap: wrap;
}

.av-desc-header strong {
    color: var(--av-gold-light);
    font-size: 1em;
}

.av-desc-meta {
    font-size: .82em;
    color: var(--av-text-muted);
}

.av-desc-body {
    font-size: .88em;
    line-height: 1.7;
    color: var(--av-text);
    white-space: pre-line;
}

/* ── Responsive ── */
@media ( max-width: 768px ) {
    .av-spell-row { flex-direction: column; gap: 2px; }
    .av-arrow { display: none; }
    .av-spell-cell { max-width: 100%; }
}

/* ── Filtres par niveau ─────────────────────── */
.av-level-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.av-filter-label {
    font-size: .8em;
    color: var(--av-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-right: 2px;
}

.av-level-btn {
    background: var(--av-bg-card);
    border: 1px solid var(--av-border);
    color: var(--av-text-muted);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: .82em;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}

.av-level-btn:hover,
.av-level-btn.is-active {
    background: var(--av-gold);
    border-color: var(--av-gold);
    color: #1a1a1f;
    font-weight: 700;
}

/* ── Sous-élément comme tag ─────────────────── */
.av-cell-top {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.av-cell-sub {
    font-size: .68em;
    background: rgba(200,169,81,.15);
    color: var(--av-gold);
    border: 1px solid rgba(200,169,81,.3);
    border-radius: 3px;
    padding: 0 5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* ── Famille masquée par filtre ─────────────── */
.av-family-wrap.av-hidden {
    display: none;
}

/* ── Override cellule — top aligné ─────────── */
.av-spell-cell {
    min-width: 110px;
    max-width: 190px;
}