/* ═══════════════════════════════════════════════════════════════
   AppEssence — Styles communs à toutes les pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset & base ──────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:#f0f2f5;
    color:#222;
    min-height:100vh;
    display:flex;
    flex-direction:column
}

/* ── Conteneur principal ───────────────────────────────────────── */
.container{max-width:960px;margin:0 auto;padding:20px 16px;flex:1;width:100%}

/* ── Header / Navigation ───────────────────────────────────────── */
header{color:white;padding:24px;text-align:center}
header h1{font-size:1.5rem;font-weight:800}
header p{font-size:0.88rem;opacity:0.8;margin-top:6px}

/* Barre de navigation inter-pages */
.header-nav{margin-top:12px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.header-nav a{
    display:inline-block;
    background:rgba(255,255,255,0.15);
    color:white;
    text-decoration:none;
    padding:6px 16px;
    border-radius:20px;
    font-size:0.82rem;
    font-weight:600;
    border:1px solid rgba(255,255,255,0.3);
    transition:background 0.15s
}
.header-nav a:hover{background:rgba(255,255,255,0.25)}
/* Lien actif : couleur définie par --header-active-color dans chaque page */
.header-nav a.active{
    background:rgba(255,255,255,0.9);
    color:var(--header-active-color, #1565c0)
}

/* ── Badges communs ────────────────────────────────────────────── */
.badge-24h{
    display:inline-block;
    background:#e3f2fd;color:#1565c0;
    font-size:0.68rem;font-weight:700;
    padding:2px 6px;border-radius:4px;
    margin-left:5px;vertical-align:middle
}
.badge-dist{
    display:inline-block;
    background:#f3e5f5;color:#6a1b9a;
    font-size:0.75rem;font-weight:700;
    padding:3px 8px;border-radius:12px
}
.badge-rupture{
    display:inline-flex;align-items:center;gap:3px;
    background:#ffebee;color:#c62828;
    font-size:0.68rem;font-weight:700;
    padding:2px 8px;border-radius:10px
}
.badge-rupture-temp{background:#fff3e0;color:#e65100}
.badge-autoroute{
    display:inline-block;
    background:#fff8e1;color:#f57f17;
    font-size:0.68rem;font-weight:700;
    padding:2px 7px;border-radius:4px;
    border:1px solid #ffe082
}
.dept-badge{
    display:inline-block;
    background:#f0f0f0;color:#666;
    font-size:0.75rem;font-weight:700;
    padding:2px 7px;border-radius:4px
}
.prix-badge{
    display:inline-block;
    padding:4px 12px;border-radius:20px;
    font-size:0.97rem;font-weight:800;white-space:nowrap
}

/* ── Tableau commun ────────────────────────────────────────────── */
.table-wrap{background:white;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,0.07);overflow:hidden}
table{width:100%;border-collapse:collapse}
th{
    background:#f8f9ff;padding:10px 16px;text-align:left;
    font-size:0.74rem;font-weight:700;color:#666;
    text-transform:uppercase;letter-spacing:0.5px;
    border-bottom:2px solid #e8eaf6
}
td{padding:10px 16px;border-bottom:1px solid #f4f4f4;font-size:0.87rem;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbff}
.station-nom{font-weight:600;color:#1a1a1a;line-height:1.3}
.station-adr{font-size:0.78rem;color:#999;margin-top:2px}
.maj{font-size:0.74rem;color:#bbb;white-space:nowrap}
.autres-prix{font-size:0.72rem;color:#aaa;margin-top:3px}

/* ── Cartes mobile (structure de base, stations) ───────────────── */
.card-list{display:none;flex-direction:column;gap:10px}
.station-card{background:white;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,0.07);padding:14px 16px;position:relative;overflow:hidden}

/* ── Icônes navigation GPS (Waze, Google Maps, Apple Plans) ─────── */
.nav-btns{display:flex;gap:10px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid #f0f0f0}
.nav-icon{display:inline-flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;transition:transform 0.15s}
.nav-icon:hover{transform:scale(1.08)}
.nav-icon img{width:48px;height:48px;border-radius:11px;box-shadow:0 2px 8px rgba(0,0,0,0.18);display:block}
.nav-icon span{font-size:0.62rem;color:#999;font-weight:600;text-align:center}
/* Version réduite pour le tableau desktop */
.nav-icon-sm img{width:30px;height:30px;border-radius:7px;box-shadow:0 1px 4px rgba(0,0,0,0.15)}
.nav-icon-sm span{display:none}
.nav-btns-sm{display:flex;gap:8px;align-items:center}

/* ── Bouton signaler ───────────────────────────────────────────── */
/* Version pilule (cartes mobile) */
.btn-signaler{
    display:inline-flex;align-items:center;gap:5px;
    padding:5px 11px;border-radius:16px;
    font-size:0.74rem;font-weight:600;color:#888;
    background:#f5f5f5;border:none;cursor:pointer;
    transition:all 0.15s;margin-top:6px
}
.btn-signaler:hover{background:#ffebee;color:#c62828}
/* Version icône carrée grande (cartes mobile — même taille que nav-icon 48px) */
.btn-signaler-sq{
    display:inline-flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;cursor:pointer;padding:0;transition:transform 0.15s
}
.btn-signaler-sq:hover{transform:scale(1.08)}
.btn-signaler-sq .sq-icon{
    width:48px;height:48px;border-radius:11px;
    box-shadow:0 2px 8px rgba(0,0,0,0.18);
    background:#f5f5f5;font-size:1.3rem;
    display:flex;align-items:center;justify-content:center;
    transition:background 0.15s
}
.btn-signaler-sq:hover .sq-icon{background:#ffebee}
.btn-signaler-sq .sq-label{font-size:0.62rem;color:#999;font-weight:600;text-align:center}
/* Version icône carrée petite (tableau desktop — même taille que nav-icon-sm 30px) */
.btn-signaler-sq-sm{
    width:30px;height:30px;border-radius:7px;
    box-shadow:0 1px 4px rgba(0,0,0,0.15);
    background:#f5f5f5;border:none;cursor:pointer;
    font-size:1rem;display:inline-flex;
    align-items:center;justify-content:center;
    transition:all 0.15s;padding:0;margin-top:5px
}
.btn-signaler-sq-sm:hover{background:#ffebee;box-shadow:0 2px 6px rgba(198,40,40,0.25)}

/* ── États vide / chargement ───────────────────────────────────── */
.empty-state{
    text-align:center;padding:48px 24px;color:#aaa;
    background:white;border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,0.07);display:none
}
.empty-state .icon{font-size:48px;margin-bottom:12px}
.loading-state{
    text-align:center;padding:40px 24px;
    background:white;border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,0.07);display:none
}
.loading-dots{display:flex;justify-content:center;gap:6px;margin-bottom:12px}
.loading-dots span{
    width:10px;height:10px;border-radius:50%;
    background:#1565c0;animation:bounce 1.2s infinite
}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.loading-state p{font-size:0.88rem;color:#888}

/* ── Animations ────────────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
/* Marqueur utilisateur sur la carte Leaflet */
@keyframes pulse-ring{
    0%  {box-shadow:0 0 0 0 rgba(21,101,192,0.55)}
    70% {box-shadow:0 0 0 14px rgba(21,101,192,0)}
    100%{box-shadow:0 0 0 0 rgba(21,101,192,0)}
}
.user-dot{
    width:16px;height:16px;border-radius:50%;
    background:#1565c0;border:3px solid white;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
    animation:pulse-ring 2s ease-out infinite
}

/* ── Footer ────────────────────────────────────────────────────── */
footer{
    background:#1a237e;color:rgba(255,255,255,0.7);
    text-align:center;padding:24px 16px 20px;
    font-size:0.82rem;margin-top:auto
}
footer a{color:rgba(255,255,255,0.9);text-decoration:none;font-weight:600}
footer a:hover{text-decoration:underline}
footer .footer-main a{color:white;text-decoration:none;font-weight:700}
footer .footer-main a:hover{text-decoration:underline}
footer .footer-links{margin-top:10px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;align-items:center}
footer .footer-links a{
    color:rgba(255,255,255,0.85);text-decoration:none;
    font-size:0.8rem;padding:3px 8px;
    border-radius:12px;border:1px solid rgba(255,255,255,0.2);
    transition:all 0.15s;font-weight:400
}
footer .footer-links a:hover{background:rgba(255,255,255,0.1);color:white}
footer .footer-source{margin-top:10px;font-size:0.72rem;color:rgba(255,255,255,0.35)}

/* ── Responsive commun ─────────────────────────────────────────── */
@media(max-width:640px){
    header{padding:10px 12px}
    header>a>div:first-child{display:none}
    header h1{font-size:1.1rem}
    header p{font-size:0.8rem;margin-top:2px}
    .header-nav{margin-top:8px;gap:5px}
    .header-nav a{padding:4px 11px;font-size:0.75rem}
    .container{padding:14px 12px}
}