/* ═══════════════════════════════════════════════════════════════
   AppEssence — Styles de la page "Par département"
   ═══════════════════════════════════════════════════════════════ */

/* ── Formulaire de recherche ───────────────────────────────────── */
.search-card{background:white;border-radius:14px;padding:18px 20px;box-shadow:0 2px 10px rgba(0,0,0,0.07);margin-bottom:20px}
.search-card form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px}
.field label{font-size:0.75rem;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:0.5px}
select{padding:9px 12px;border:1px solid #ddd;border-radius:8px;font-size:0.9rem;background:white;outline:none;transition:border-color 0.2s;color:#222}
select:focus{border-color:#1565c0}
.btn-search{padding:9px 22px;background:#1565c0;color:white;border:none;border-radius:8px;font-size:0.9rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background 0.2s;height:40px}
.btn-search:hover{background:#0d47a1}
.btn-geolocate{padding:0 10px;height:38px;background:#f0f4ff;border:1px solid #c5cae9;border-radius:8px;cursor:pointer;font-size:1rem;transition:background 0.15s;flex-shrink:0}
.btn-geolocate:hover{background:#e3e8ff}

/* ── Onglets sélection carburant ───────────────────────────────── */
.carb-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.carb-tabs a{padding:6px 14px;border-radius:20px;text-decoration:none;font-size:0.82rem;font-weight:600;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}

/* ── Barre d'outils (vue + tri) ────────────────────────────────── */
.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.vue-toggle{display:flex;gap:6px}
.vue-toggle button{padding:6px 16px;border:2px solid #1565c0;border-radius:8px;font-size:0.83rem;font-weight:700;cursor:pointer;background:white;color:#1565c0;transition:all 0.15s}
.vue-toggle button.active{background:#1565c0;color:white}
.tri-links{display:flex;gap:6px;align-items:center}
.tri-links span{font-size:0.78rem;color:#aaa}
.tri-links a{font-size:0.8rem;padding:4px 10px;border-radius:6px;text-decoration:none;background:white;color:#555;box-shadow:0 1px 3px rgba(0,0,0,0.07);font-weight:600;transition:all 0.15s}
.tri-links a.active{background:#1565c0;color:white}

/* ── Résumé des prix (min/max) ─────────────────────────────────── */
.prix-summary{display:flex;gap:16px;flex-wrap:wrap;align-items:center;background:white;border-radius:10px;padding:10px 16px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:14px}
.prix-summary .total{font-size:0.85rem;color:#666;flex:1}
.prix-summary .total strong{color:#222}
.prix-min-max{display:flex;gap:14px;font-size:0.82rem}

/* ── Carte Leaflet ─────────────────────────────────────────────── */
#map{height:480px;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.07);margin-bottom:16px;display:none}

/* ── Cartes station (mobile) ───────────────────────────────────── */
.station-card{display:flex;align-items:center;gap:12px;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,0.07);padding:12px 14px}
.station-card-info{flex:1;min-width:0}
.station-card-nom{font-weight:700;font-size:0.92rem;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station-card-adr{font-size:0.76rem;color:#999;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station-card-loc{font-size:0.76rem;color:#888;margin-top:1px;display:flex;align-items:center;gap:5px}
.station-card-prix{text-align:right;flex-shrink:0}
.station-card-prix .prix-badge{font-size:1.05rem;padding:5px 13px}
.station-card-prix .maj{display:block;margin-top:4px;font-size:0.68rem}

/* ── État vide ─────────────────────────────────────────────────── */
.empty{text-align:center;padding:48px 24px;color:#aaa;background:white;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,0.07)}
.empty .icon{font-size:48px;margin-bottom:12px}

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:640px){
    .search-card{padding:14px}
    .search-card form{gap:8px}
    .table-wrap{display:none}
    .card-list{display:flex}
    .prix-min-max{display:none}
}
@media(min-width:641px){
    .card-list{display:none !important}
}