/* ═══════════════════════════════════════════════════════════════
   AppEssence — Styles partagés des pages de classement
   (moins-cher.php, serieux.php, losers.php)
   ═══════════════════════════════════════════════════════════════ */

/* ── Onglets sélection carburant ───────────────────────────────── */
.carb-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.carb-tabs a{
    padding:7px 18px;border-radius:20px;text-decoration:none;
    font-size:0.85rem;font-weight:700;
    background:white;color:#555;
    box-shadow:0 1px 4px rgba(0,0,0,0.08);
    transition:all 0.15s;border:2px solid transparent
}
.carb-tabs a:hover{border-color:#1565c0;color:#1565c0}
.carb-tabs a.active{background:#1565c0;color:white;border-color:#1565c0}

/* ── Options (filtres récents / tous) ──────────────────────────── */
.options{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.options span{font-size:0.82rem;color:#888}
.options a{font-size:0.82rem;padding:4px 12px;border-radius:6px;text-decoration:none;background:white;color:#555;box-shadow:0 1px 3px rgba(0,0,0,0.07);font-weight:600}
.options a.active{background:#1565c0;color:white}

/* ── Encart résumé statistiques ────────────────────────────────── */
.summary{
    background:white;border-radius:14px;
    padding:16px 20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.07);
    margin-bottom:20px;
    display:flex;gap:24px;flex-wrap:wrap;align-items:center
}
.summary-item{text-align:center}
.summary-val{font-size:1.6rem;font-weight:800;line-height:1}
.summary-lbl{font-size:0.75rem;color:#888;margin-top:4px}

/* ── Podium (top 3) ────────────────────────────────────────────── */
.podium-section{margin-bottom:32px}
.podium-title{text-align:center;font-size:0.78rem;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin-bottom:8px}
.podium-place{display:flex;flex-direction:column;align-items:center;width:240px}
.podium-card{
    background:white;border-radius:14px;
    padding:16px;text-align:center;
    box-shadow:0 4px 16px rgba(0,0,0,0.1);
    width:100%;border-top:4px solid
}
/* Couleurs des médailles */
.podium-place:nth-child(1) .podium-card{border-color:#c0ca33}
.podium-place:nth-child(2) .podium-card{border-color:#ffd700;box-shadow:0 6px 24px rgba(255,215,0,0.25)}
.podium-place:nth-child(3) .podium-card{border-color:#cd7f32}
.podium-medal{font-size:2rem;margin-bottom:6px}
.podium-nom{font-weight:700;font-size:0.88rem;line-height:1.3;margin-bottom:4px}
.podium-ville{font-size:0.78rem;color:#888;margin-bottom:8px}
.podium-bar{height:8px;border-radius:4px 4px 0 0}
.podium-place:nth-child(1) .podium-bar{background:#c0ca33;height:60px}
.podium-place:nth-child(2) .podium-bar{background:#ffd700;height:90px}
.podium-place:nth-child(3) .podium-bar{background:#cd7f32;height:45px}
.podium-nb{font-size:0.72rem;color:#aaa;margin-top:4px}

/* ── Rang dans le tableau ──────────────────────────────────────── */
.rang{font-size:0.9rem;font-weight:800;color:#bbb;text-align:center}
.rang-top{color:#f57f17}

/* ── Cartes mobile ─────────────────────────────────────────────── */
.sc-rank{font-size:0.88rem;font-weight:800;color:#ccc;text-align:center;width:26px;flex-shrink:0;line-height:1.3}
.sc-rank-top{color:#f57f17}
.sc-info{flex:1;min-width:0}
.sc-nom{font-weight:700;font-size:0.9rem;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-sub{font-size:0.74rem;color:#999;margin-top:2px;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}
.sc-right{text-align:right;flex-shrink:0}
.sc-maj{font-size:0.68rem;color:#bbb;margin-top:3px}
/* Carte station dans les pages classement */
.station-card{display:flex;align-items:center;gap:10px;border-radius:12px;box-shadow:0 1px 5px rgba(0,0,0,0.07);padding:11px 14px}

/* ── Titre de section ──────────────────────────────────────────── */
.section-title{font-size:0.78rem;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}

/* ── Bandeau info (losers.php) ─────────────────────────────────── */
.info-banner{background:#fff8e1;border-left:4px solid #f57f17;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:0.85rem;color:#555}

/* ── Badge dernière mise à jour ────────────────────────────────── */
.maj-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:0.78rem;font-weight:700}
/* serieux.php */
.maj-ok{background:#e8f5e9;color:#2e7d32}
.maj-warn{background:#fff8e1;color:#f57f17}
/* losers.php */
.maj-old{background:#ffebee;color:#c62828}
.maj-very-old{background:#c62828;color:white}

/* Mention date sur les cartes podium */
.podium-maj{font-size:0.8rem;font-weight:700}

/* ── Bouton signaler mobile (losers.php) ───────────────────────── */
.btn-signaler-mobile{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:9px;
    background:#ffebee;color:#c62828;text-decoration:none;
    font-size:1.1rem;box-shadow:0 1px 4px rgba(0,0,0,0.12);
    transition:all 0.15s;flex-shrink:0
}
.btn-signaler-mobile:hover{background:#ffcdd2;box-shadow:0 2px 6px rgba(198,40,40,0.25)}
.btn-signaler-mobile span:not(.gyro){display:none}

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:640px){
    .table-wrap{display:none}
    .card-list{display:flex}
    .summary{gap:12px}
    .summary-item .summary-val{font-size:1.3rem}
    .podium{flex-direction:column;align-items:center}
    .podium-place{width:100%;max-width:300px}
    .podium-bar{display:none}
}
@media(min-width:641px){.card-list{display:none !important}}