/* =========================================================
   Pages « Prix par département » — complète article.css
   ========================================================= */

.dp-page { max-width: 1040px; }

.dp-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 26px;
    margin-top: 22px;
    box-sizing: border-box;
    min-width: 0;
}

.dp-card h2 { margin: 0 0 16px; font-size: 1.2rem; letter-spacing: -.01em; }
.dp-card h3 { margin: 20px 0 6px; font-size: 1rem; }
.dp-card h3:first-of-type { margin-top: 0; }
.dp-card p { line-height: 1.6; }

.dp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.dp-grid > .dp-card { margin-top: 22px; }
@media (max-width: 860px) { .dp-grid { grid-template-columns: 1fr; gap: 0; } }

/* Tableaux */
.dp-table-wrap { overflow-x: auto; }
.dp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.dp-table th, .dp-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line, #e2e8f0); white-space: nowrap; }
.dp-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #64748b); font-weight: 600; }
.dp-table tbody th { font-weight: 600; }
.dp-table tbody tr:hover { background: #f8fafc; }
.dp-table a { color: inherit; text-decoration: none; }
.dp-table a:hover { color: #2563eb; text-decoration: underline; }
.dp-table-small th, .dp-table-small td { padding: 8px 8px; font-size: .86rem; white-space: normal; }
.dp-table-small td { white-space: nowrap; }
.dp-code { color: var(--muted, #64748b); font-weight: 400; font-size: .82rem; }

.dp-up   { color: #b91c1c; }
.dp-down { color: #15803d; }

.dp-note { margin: 12px 0 0; font-size: .8rem; color: var(--muted, #64748b); }

/* Onglets carburants */
.dp-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px;
    margin-bottom: 16px;
    background: #e9edf3;
    border: 1px solid #d5dce6;
    border-radius: 11px;
}
.dp-tabs button {
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: #334155;
    background: #fff;
    border: 1px solid #d5dce6;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
}
.dp-tabs button:hover { color: #2563eb; border-color: #93b4f5; }
.dp-tabs button.is-on { background: #2563eb; border-color: #2563eb; color: #fff; }
.dp-tabs button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Liste des stations */
.dp-list { list-style: none; margin: 0; padding: 0; }
.dp-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--line, #e2e8f0);
}
.dp-list li:first-child { border-top: 0; }
.dp-rank {
    flex: none;
    width: 28px; height: 28px;
    border-radius: 14px;
    background: #f1f5f9;
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.dp-list li:first-child .dp-rank { background: #dcfce7; color: #15803d; }
.dp-addr { flex: 1; min-width: 0; font-size: .92rem; color: inherit; text-decoration: none; }
a.dp-addr:hover { color: #2563eb; text-decoration: underline; }
.dp-addr small { display: block; color: var(--muted, #64748b); font-size: .8rem; margin-top: 2px; }
.dp-list b { white-space: nowrap; font-size: 1rem; }
.dp-list-small li { padding: 8px 0; align-items: center; }

.dp-cher {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #7f1d1d;
    font-size: .88rem;
}

/* Graphiques */
.dp-svg { width: 100%; height: auto; display: block; }
.dp-svg-title { margin: 6px 0 2px; font-size: .82rem; font-weight: 700; color: #334155; }
.dp-legend { display: flex; gap: 16px; font-size: .8rem; color: var(--muted, #64748b); margin: 8px 0 0; }
.dp-legend i { display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 6px; }
.dp-l-dep { border-top: 3px solid #2563eb; }
.dp-l-fr  { border-top: 2px dashed #94a3b8; }

/* Liste des départements */
.dp-head-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.dp-head-row h2 { margin: 0; }
.dp-search input {
    font: inherit;
    font-size: .9rem;
    padding: 9px 12px;
    min-width: 240px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    background: #f8fafc;
}
.dp-search input:focus { outline: 2px solid #2563eb; outline-offset: 1px; background: #fff; }
tr[hidden] { display: none; }

.dp-faq p { margin: 0 0 8px; color: #334155; }
.dp-back { margin: 22px 0 0; }
.dp-back a { color: #2563eb; font-weight: 600; text-decoration: none; }
.dp-page .ar-nl { margin-top: 22px; }

.ar-meta .dp-live { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; font-weight: 600; }
.ar-meta .dp-live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; margin-right: 6px; vertical-align: 1px; }