/* =====================================================================
   EVRange × AK66 — habillage du range builder aux couleurs du site
   (chargé après style.css : barre du haut, hauteurs, polices, boutons)
   ===================================================================== */

body {
    padding-top: var(--evr-top);
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 85% 0%, rgba(255, 107, 53, 0.10), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(214, 40, 57, 0.10), transparent 50%);
}

/* ---- Barre AK66 ---- */
.evr-top {
    position: fixed; top: 0; left: 0; right: 0; height: var(--evr-top); z-index: 70;
    display: flex; align-items: center; gap: 18px; padding: 0 18px;
    background: #220f0f; border-bottom: 1px solid rgba(247, 241, 230, 0.14);
}
.evr-mark { display: flex; align-items: center; gap: 2px; text-decoration: none; font-family: 'Bebas Neue', sans-serif; font-size: 26px; line-height: 1; }
.evr-mark img { width: 30px; height: 30px; margin-right: 8px; object-fit: contain; }
.evr-ak { color: var(--text); letter-spacing: 1.5px; }
.evr-num { color: var(--accent-light); }
.evr-crumb { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.evr-crumb a { color: var(--text-dim); text-decoration: none; }
.evr-crumb a:hover { color: var(--accent-light); }
.evr-crumb strong { color: var(--gold); font-weight: 700; }
.evr-back { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none; padding: 8px 14px; border: 1.5px solid rgba(247, 241, 230, 0.35); border-radius: 8px; transition: border-color .2s, background .2s; }
.evr-back:hover { border-color: rgba(247, 241, 230, 0.7); background: rgba(247, 241, 230, 0.08); }

/* ---- Hauteurs : l'appli occupe l'écran sous la barre AK66 ---- */
.sidebar, .main-content, .saves-panel { height: calc(100vh - var(--evr-top)); }
.saves-toggle { top: calc(50% + var(--evr-top) / 2); }
.detailed-stats.vertical { max-height: calc(100vh - var(--evr-top) - 150px); }

/* ---- Typo du site : Bebas (titres), Manrope (texte), JetBrains Mono (chiffres) ---- */
.brand { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 30px; letter-spacing: 1.5px; line-height: 1; margin-bottom: 4px; }
.brand small { display: block; margin-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--text-dim); }
.brand-icon { width: 42px; height: 42px; font-family: 'Bebas Neue', sans-serif; font-size: 22px; font-weight: 400; letter-spacing: 1px; background: linear-gradient(135deg, var(--accent), var(--accent-light)); box-shadow: 0 4px 15px rgba(255, 107, 53, 0.35); }
.widget h3, .ds-box .ds-label, .stat-label { font-family: 'JetBrains Mono', monospace; }
.widget h3 { color: var(--gold); }
.stat-value, .ds-box .ds-val, .slider-val, .t-badge { font-family: 'JetBrains Mono', monospace; }
.modal h3 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 28px; letter-spacing: 1px; }
.view-btn { font-family: 'Manrope', sans-serif; font-weight: 700; }
.cell { font-family: 'Manrope', sans-serif; font-weight: 800; }

/* ---- Boutons et accents ---- */
.btn { font-family: 'Manrope', sans-serif; font-weight: 700; }
.btn-green { background: var(--accent-light); color: #fff; }
.btn-green:hover { background: #ff7f4f; box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); }
.view-btn.active, .chip.active { background: var(--accent); }
.range-grid { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 107, 53, 0.12); }
#toast { background: var(--accent); }
.card-slot.has-card { background: #fff; }
#storage-badge.server { background: rgba(244, 183, 64, 0.18); color: var(--gold); }

/* ---- Mobile : la barre AK66 reste visible, les tiroirs passent dessous ---- */
@media (max-width: 1100px) {
    body { padding-top: var(--evr-top); }
    .sidebar, .main-content, .saves-panel { height: auto; }
    .sidebar, .saves-panel { top: var(--evr-top); }
    .drawer-backdrop { top: var(--evr-top); }
}
@media (max-width: 640px) {
    .evr-crumb { display: none; }
    .evr-back { font-size: 12px; padding: 7px 10px; }
}

/* ---- Écrans moyens : la grille rétrécit au lieu d'être coupée quand les deux panneaux sont ouverts ---- */
.main-content { align-items: safe center; }
@media (min-width: 1101px) and (max-width: 1680px) {
    body:not(.saves-collapsed) .range-grid:not(.small) .cell { width: 44px; height: 40px; font-size: 12px; }
}
@media (min-width: 1101px) and (max-width: 1380px) {
    body.saves-collapsed .range-grid:not(.small) .cell { width: 48px; height: 42px; font-size: 13px; }
}