/* ─────────────────────────────────────────────────────────────────────────────
   FULLWIDTH BREAKOUT — s'échappe du container du thème (ProRadio / Elementor)
   ───────────────────────────────────────────────────────────────────────────── */

.carbu-wp-fullwidth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 clamp(16px, 3vw, 48px);
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARBU-WP — Design system calqué sur radio-bouton.org
   Hero : fond noir + jaune  |  Corps : fond blanc propre
   ───────────────────────────────────────────────────────────────────────────── */

.carbu-wp {
    /* Tokens */
    --cb-black:        #1a1a1a;
    --cb-black-deep:   #111111;
    --cb-yellow:       #ffd708;
    --cb-yellow-dim:   #fff3c4;
    --cb-white:        #ffffff;
    --cb-grey-100:     #f5f5f5;
    --cb-grey-200:     #e8e8e8;
    --cb-grey-400:     #9ca3af;
    --cb-grey-600:     #4b5563;
    --cb-grey-800:     #1f2937;

    /* Fuel colours */
    --cb-gazole:  #1d4ed8;
    --cb-sp95:    #16a34a;
    --cb-sp98:    #9333ea;
    --cb-e85:     #ea580c;
    --cb-gplc:    #0891b2;

    /* Radii */
    --cb-r-sm:   8px;
    --cb-r-md:   14px;
    --cb-r-lg:   20px;
    --cb-r-pill: 9999px;

    /* Shadows */
    --cb-shadow-sm:  0 2px 8px rgba(0,0,0,.06);
    --cb-shadow-md:  0 6px 24px rgba(0,0,0,.09);
    --cb-shadow-lg:  0 14px 48px rgba(0,0,0,.12);

    font-family: "Inter", system-ui, -apple-system, sans-serif;
    color: var(--cb-black);
    display: grid;
    gap: 20px;
}

.carbu-wp * { box-sizing: border-box; }
.carbu-wp a { color: inherit; }
.carbu-wp svg { flex-shrink: 0; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */

.carbu-wp__hero {
    background:
        linear-gradient(135deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.38) 100%),
        url('https://images.unsplash.com/photo-1504215680853-026ed2a45def?w=1400&q=80&fit=crop') center/cover no-repeat;
    border-radius: var(--cb-r-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--cb-shadow-lg);
}

.carbu-wp__hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
    gap: 32px;
    padding: 40px 36px;
    align-items: center;
}

.carbu-wp__hero-copy {
    display: grid;
    gap: 14px;
}

.carbu-wp__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cb-yellow);
    color: var(--cb-black-deep);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--cb-r-pill);
    width: fit-content;
}

.carbu-wp__hero h2 {
    margin: 0;
    color: var(--cb-white);
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
}

.carbu-wp__hero p {
    margin: 0;
    color: var(--cb-grey-400);
    font-size: 0.95rem;
    line-height: 1.6;
}

.carbu-wp__hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.carbu-wp__hero-stat {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--cb-r-md);
    padding: 16px 18px;
    text-align: center;
    transition: background .2s;
}

.carbu-wp__hero-stat:hover {
    background: rgba(255,215,8,.08);
    border-color: rgba(255,215,8,.25);
}

.carbu-wp__hero-stat--wide {
    grid-column: span 2;
}

.carbu-wp__hero-stat span {
    display: block;
    color: var(--cb-yellow);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.carbu-wp__hero-stat strong {
    display: block;
    color: var(--cb-grey-400);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── PRICE CARDS ─────────────────────────────────────────────────────────── */

.carbu-wp__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.carbu-wp__price-card {
    background: var(--cb-white);
    border: 1px solid var(--cb-grey-200);
    border-radius: var(--cb-r-lg);
    border-top: 4px solid var(--cb-black);
    padding: 20px 18px;
    display: grid;
    gap: 8px;
    box-shadow: var(--cb-shadow-sm);
    transition: transform .2s, box-shadow .2s;
}

.carbu-wp__price-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cb-shadow-md);
}

.carbu-wp__price-card--gazole { border-top-color: var(--cb-gazole); }
.carbu-wp__price-card--sp95   { border-top-color: var(--cb-sp95); }
.carbu-wp__price-card--sp98   { border-top-color: var(--cb-sp98); }
.carbu-wp__price-card--e85    { border-top-color: var(--cb-e85); }
.carbu-wp__price-card--gplc   { border-top-color: var(--cb-gplc); }

.carbu-wp__price-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.carbu-wp__price-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cb-grey-600);
}

.carbu-wp__price-value {
    display: block;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--cb-black);
    line-height: 1;
}

.carbu-wp__price-station {
    font-size: 0.88rem;
    color: var(--cb-grey-600);
    line-height: 1.4;
}

.carbu-wp__price-updated {
    font-size: 0.76rem;
    color: var(--cb-grey-400);
}

/* ── PANELS ─────────────────────────────────────────────────────────────── */

.carbu-wp__panel {
    background: var(--cb-white);
    border: 1px solid var(--cb-grey-200);
    border-radius: var(--cb-r-lg);
    padding: 28px;
    box-shadow: var(--cb-shadow-sm);
}

.carbu-wp__panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.carbu-wp__panel-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.carbu-wp__panel-icon {
    width: 22px;
    height: 22px;
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--cb-grey-400);
}

.carbu-wp__panel h3 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cb-black);
}

.carbu-wp__panel p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--cb-grey-400);
}

/* ── BADGES ─────────────────────────────────────────────────────────────── */

.carbu-wp__badge-group {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.carbu-wp__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--cb-r-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.carbu-wp__badge--fresh  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.carbu-wp__badge--recent { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.carbu-wp__badge--stale  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* ── MAP ─────────────────────────────────────────────────────────────────── */

.carbu-wp__map {
    height: 460px;
    border-radius: var(--cb-r-md);
    border: 1px solid var(--cb-grey-200);
    overflow: hidden;
}

/* ── FILTERS ────────────────────────────────────────────────────────────── */

.carbu-wp__filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.carbu-wp__filter-label {
    display: grid;
    gap: 6px;
}

.carbu-wp__filter-label > span {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cb-grey-600);
}

.carbu-wp__filter-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.carbu-wp__filter-wrap svg {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: var(--cb-grey-400);
    pointer-events: none;
}

.carbu-wp__filter-wrap select,
.carbu-wp__filter-wrap input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    border: 1.5px solid var(--cb-grey-200);
    border-radius: var(--cb-r-md);
    background: var(--cb-grey-100);
    color: var(--cb-black);
    font: inherit;
    font-size: 0.9rem;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .2s, background .2s;
    cursor: pointer;
}

.carbu-wp__filter-wrap select:focus,
.carbu-wp__filter-wrap input:focus {
    outline: none;
    border-color: var(--cb-black);
    background: var(--cb-white);
}

/* ── TABLE ───────────────────────────────────────────────────────────────── */

.carbu-wp__table-wrap {
    overflow-x: auto;
    border-radius: var(--cb-r-md);
    border: 1px solid var(--cb-grey-200);
}

.carbu-wp__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
    font-size: 0.88rem;
}

.carbu-wp__table thead th {
    padding: 13px 14px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: #253367;
    color: var(--cb-yellow);
    border-bottom: 2px solid #253367;
    white-space: nowrap;
}

.carbu-wp__table thead th:first-child { border-radius: var(--cb-r-sm) 0 0 0; }
.carbu-wp__table thead th:last-child  { border-radius: 0 var(--cb-r-sm) 0 0; }

.carbu-wp__table tbody tr {
    border-bottom: 1px solid var(--cb-grey-200);
    transition: background .15s;
}

.carbu-wp__table tbody tr:last-child { border-bottom: none; }

.carbu-wp__table tbody tr:hover { background: var(--cb-grey-100); }

.carbu-wp__table tbody td {
    padding: 14px 14px;
    vertical-align: middle;
    color: var(--cb-grey-800);
}

.carbu-wp__table tbody td strong {
    display: block;
    font-weight: 700;
    color: var(--cb-black);
}

.carbu-wp__subline {
    display: block;
    font-size: 0.78rem;
    color: var(--cb-grey-400);
    margin-top: 2px;
}

.carbu-wp__price-cell {
    font-weight: 700;
    white-space: nowrap;
    color: var(--cb-black);
}

.carbu-wp__price-cell--sp95   { color: var(--cb-sp95);   }
.carbu-wp__price-cell--sp98   { color: var(--cb-sp98);   }
.carbu-wp__price-cell--gazole { color: var(--cb-gazole); }
.carbu-wp__price-cell--e85    { color: var(--cb-e85);    }
.carbu-wp__price-cell--gplc   { color: var(--cb-gplc);   }

.carbu-wp__freshness-cell {
    white-space: nowrap;
}

/* ── VISITS ─────────────────────────────────────────────────────────────── */

.carbu-wp__visits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.carbu-wp__visit-card {
    background: var(--cb-white);
    border: 1px solid var(--cb-grey-200);
    border-top: 4px solid var(--cb-yellow);
    border-radius: var(--cb-r-lg);
    padding: 24px 20px;
    text-align: center;
    box-shadow: var(--cb-shadow-sm);
    display: grid;
    gap: 6px;
    transition: transform .2s, box-shadow .2s;
}

.carbu-wp__visit-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cb-shadow-md);
}

.carbu-wp__visit-value {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--cb-black);
    line-height: 1;
}

.carbu-wp__visit-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cb-grey-400);
}

/* ── POPUP MAP ───────────────────────────────────────────────────────────── */

.carbu-wp__popup h4 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--cb-black);
}

.carbu-wp__popup p,
.carbu-wp__popup small {
    margin: 0;
    font-size: 0.82rem;
    color: var(--cb-grey-600);
}

.carbu-wp__popup ul {
    list-style: none;
    margin: 10px 0 8px;
    padding: 0;
}

.carbu-wp__popup li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--cb-grey-200);
    font-size: 0.85rem;
}

.carbu-wp__popup li strong { font-weight: 700; color: var(--cb-black); }

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */

.carbu-wp__empty {
    margin: 0;
    padding: 18px 20px;
    border-radius: var(--cb-r-md);
    background: var(--cb-grey-100);
    border: 1px dashed var(--cb-grey-200);
    color: var(--cb-grey-600);
    font-size: 0.9rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Tablette portrait (< 900px) */
@media (max-width: 900px) {
    .carbu-wp__hero-inner {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 24px;
    }

    .carbu-wp__hero-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .carbu-wp__hero-stat--wide {
        grid-column: span 1;
    }

    .carbu-wp__filters {
        grid-template-columns: 1fr 1fr;
    }

    .carbu-wp__panel-head {
        flex-direction: column;
    }

    .carbu-wp__visits-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Mobile (< 640px) */
@media (max-width: 640px) {
    .carbu-wp {
        gap: 14px;
    }

    .carbu-wp__hero-inner {
        padding: 22px 18px;
    }

    .carbu-wp__hero h2 {
        font-size: 1.4rem;
    }

    .carbu-wp__hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .carbu-wp__hero-stat--wide {
        grid-column: span 2;
    }

    .carbu-wp__panel {
        padding: 18px 16px;
    }

    .carbu-wp__filters {
        grid-template-columns: 1fr;
    }

    .carbu-wp__map {
        height: 320px;
    }

    .carbu-wp__visits-grid {
        grid-template-columns: 1fr;
    }

    .carbu-wp__panel-title {
        gap: 10px;
    }

    /*
     * Tableau responsive : chaque cellule devient un bloc label + valeur
     * plutôt qu'un scroll horizontal (qui reste en fallback via min-width)
     */
    .carbu-wp__table-wrap {
        overflow-x: auto;
    }

    .carbu-wp__table thead {
        display: none;
    }

    .carbu-wp__table,
    .carbu-wp__table tbody,
    .carbu-wp__table tr,
    .carbu-wp__table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .carbu-wp__table tr {
        border: 1px solid var(--cb-grey-200);
        border-radius: var(--cb-r-md);
        margin-bottom: 10px;
        padding: 4px 0;
        box-shadow: var(--cb-shadow-sm);
        background: var(--cb-white);
    }

    .carbu-wp__table td {
        padding: 8px 14px;
        display: flex;
        align-items: baseline;
        gap: 8px;
        border-bottom: 1px solid var(--cb-grey-100);
        font-size: 0.88rem;
    }

    .carbu-wp__table td:last-child {
        border-bottom: none;
    }

    .carbu-wp__table td::before {
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cb-grey-400);
        flex-shrink: 0;
        min-width: 70px;
    }

    .carbu-wp__table tbody tr:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
}

/* ── Très petit mobile (< 400px) */
@media (max-width: 400px) {
    .carbu-wp__hero-stats {
        grid-template-columns: 1fr;
    }

    .carbu-wp__hero-stat--wide {
        grid-column: span 1;
    }
}