/* ═══════════════════════════════════════════════════════════════
   AppEssence — Styles de la page Baromètre
   ═══════════════════════════════════════════════════════════════ */


/* ── Titre de section ──────────────────────────────────────────── */
.card{background:white;border-radius:14px;padding:22px 24px;box-shadow:0 2px 10px rgba(0,0,0,0.07);margin-bottom:20px}
.card-title{font-size:0.8rem;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:16px}

/* ── Grille des moyennes nationales ────────────────────────────── */
.moy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:4px}
.moy-card{background:#f8f9ff;border-radius:12px;padding:14px 16px;text-align:center;border:2px solid #e8eaf6}
.moy-card .type{font-size:0.78rem;font-weight:700;color:#777;margin-bottom:6px}
.moy-card .prix{font-size:1.6rem;font-weight:900;color:#1565c0}
.moy-card .range{font-size:0.7rem;color:#aaa;margin-top:4px}

/* ── Onglets du graphique ──────────────────────────────────────── */
.chart-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.chart-tab{
    padding:6px 16px;border-radius:20px;
    border:2px solid #ddd;background:white;
    font-size:0.82rem;font-weight:600;
    cursor:pointer;color:#666;transition:all 0.15s
}
.chart-tab:hover{border-color:#1565c0;color:#1565c0}
.chart-tab.active{background:#1565c0;color:white;border-color:#1565c0}

/* ── Zone graphique ────────────────────────────────────────────── */
.chart-container{position:relative;height:300px}

/* ── Classement Top/Flop départements ──────────────────────────── */
.topflop-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.topflop-list{list-style:none}
.topflop-list li{
    display:flex;align-items:center;gap:10px;
    padding:7px 0;border-bottom:1px solid #f5f5f5;font-size:0.86rem
}
.topflop-list li:last-child{border-bottom:none}
.rank{font-weight:900;color:#bbb;width:20px;text-align:right;flex-shrink:0;font-size:0.82rem}
.rank.r1{color:#f9a825}.rank.r2{color:#90a4ae}.rank.r3{color:#a1887f}
.dept-info{flex:1;min-width:0}
.dept-nom{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dept-code{font-size:0.72rem;color:#aaa}
.prix-badge-small{font-size:0.88rem;font-weight:800;white-space:nowrap}
.green{color:#2e7d32}.red{color:#c62828}

/* Onglets Gazole / SP95 */
.tf-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tf-tab,.ts-tab{
    padding:5px 14px;border-radius:16px;
    border:2px solid #ddd;background:white;
    font-size:0.8rem;font-weight:600;
    cursor:pointer;color:#666;transition:all 0.15s
}
.tf-tab:hover,.ts-tab:hover{border-color:#1565c0;color:#1565c0}
.tf-tab.active,.ts-tab.active{background:#1565c0;color:white;border-color:#1565c0}

/* Message d'attente si données insuffisantes */
.no-data{text-align:center;padding:32px;color:#bbb;font-size:0.88rem}

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:640px){
    .topflop-grid{grid-template-columns:1fr}
    .chart-container{height:220px}
    .moy-card .prix{font-size:1.3rem}
}