/* =========================================================
   Bloc "Marchés en direct" – Brent & EUR/USD façon bourse
   ========================================================= */

.ml-card {
    --ml-up: #16a34a;
    --ml-up-bg: rgba(22, 163, 74, .16);
    --ml-down: #dc2626;
    --ml-down-bg: rgba(220, 38, 38, .16);
    --ml-ink: #0f172a;
    --ml-muted: #64748b;
    --ml-line: #e2e8f0;
    --ml-soft: #f8fafc;

    background: #fff;
    border-radius: 16px;
    padding: 22px 24px 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
    color: var(--ml-ink);
    font-variant-numeric: tabular-nums;
    margin: 24px 0;
}

/* ---------- En-tête ---------- */
.ml-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ml-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ml-sub {
    margin: 4px 0 0;
    font-size: .8rem;
    color: var(--ml-muted);
}

.ml-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: var(--ml-muted);
    background: var(--ml-soft);
    border: 1px solid var(--ml-line);
    border-radius: 999px;
    padding: 6px 12px;
}

.ml-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    flex: none;
}

.ml-status.is-open .ml-dot {
    background: var(--ml-up);
    animation: ml-pulse 1.8s infinite;
}

.ml-status.is-open .ml-status-txt {
    color: var(--ml-up);
    font-weight: 600;
}

@keyframes ml-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ---------- Tickers ---------- */
.ml-tickers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.ml-ticker {
    position: relative;
    text-align: left;
    background: var(--ml-soft);
    border: 1px solid var(--ml-line);
    border-radius: 12px;
    padding: 14px 16px 12px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    font: inherit;
    color: inherit;
    width: 100%;
}

.ml-ticker:hover {
    border-color: #cbd5e1;
}

.ml-ticker.is-active {
    background: #fff;
    border-color: var(--ml-ink);
    box-shadow: 0 0 0 1px var(--ml-ink);
}

.ml-t-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .78rem;
    color: var(--ml-muted);
}

.ml-t-name {
    font-weight: 700;
    color: var(--ml-ink);
    font-size: .88rem;
}

.ml-t-price {
    display: inline-block;
    margin: 6px -6px 2px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.ml-t-price .ml-unit {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ml-muted);
    margin-left: 3px;
}

/* Clignotement à chaque nouvelle cotation */
.ml-t-price.flash-up   { animation: ml-flash-up 1.4s ease-out; }
.ml-t-price.flash-down { animation: ml-flash-down 1.4s ease-out; }

@keyframes ml-flash-up {
    0%, 25% { background: var(--ml-up-bg); color: var(--ml-up); }
    100%    { background: transparent; }
}

@keyframes ml-flash-down {
    0%, 25% { background: var(--ml-down-bg); color: var(--ml-down); }
    100%    { background: transparent; }
}

/* Chiffres qui viennent de changer */
.ml-t-price .ml-d-up   { color: var(--ml-up); }
.ml-t-price .ml-d-down { color: var(--ml-down); }
.ml-t-price .ml-d-up,
.ml-t-price .ml-d-down { transition: color 1.5s ease-out; }

.ml-t-chg {
    font-size: .85rem;
    font-weight: 600;
    display: flex;
    gap: 6px;
    align-items: center;
}

.ml-up   { color: var(--ml-up); }
.ml-down { color: var(--ml-down); }
.ml-flat { color: var(--ml-muted); }

.ml-pill {
    font-size: .72rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
}

.ml-pill.ml-up   { background: var(--ml-up-bg); }
.ml-pill.ml-down { background: var(--ml-down-bg); }
.ml-pill.ml-flat { background: var(--ml-line); }

/* Barre plus bas / plus haut */
.ml-range {
    margin-top: 10px;
}

.ml-range-bar {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ml-down-bg), var(--ml-line), var(--ml-up-bg));
}

.ml-range-mark {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ml-ink);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--ml-ink);
    transform: translate(-50%, -50%);
    transition: left .6s ease;
}

.ml-range-lbl {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: var(--ml-muted);
    margin-top: 5px;
}

/* ---------- Graphique ---------- */
.ml-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.ml-chart-title {
    font-size: .9rem;
    font-weight: 600;
}

.ml-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--ml-muted);
}

.ml-stats b {
    color: var(--ml-ink);
    font-weight: 600;
    margin-left: 4px;
}

.ml-chart {
    position: relative;
    height: 260px;
}

.ml-foot {
    margin-top: 10px;
    font-size: .72rem;
    color: var(--ml-muted);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---------- Comparaison (2e courbe) ---------- */
.ml-compare {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 10px;
}

.ml-compare-lbl {
    font-size: .75rem;
    color: var(--ml-muted);
    margin-right: 2px;
}

.ml-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ml-muted);
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all .15s;
}

.ml-chip::before {
    content: "+";
    font-weight: 700;
}

.ml-chip-dot {
    display: none;
    width: 14px;
    height: 0;
    border-top: 2px dashed #2563eb;
}

.ml-chip:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.ml-chip.is-on {
    border-style: solid;
    border-color: #2563eb;
    color: #2563eb;
    background: rgba(37, 99, 235, .08);
}

.ml-chip.is-on::before { content: "✕"; font-size: .7rem; }
.ml-chip.is-on .ml-chip-dot { display: inline-block; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
    .ml-card { padding: 18px 14px 14px; }
    .ml-tickers { grid-template-columns: 1fr; gap: 8px; }
    .ml-t-price { font-size: 1.5rem; }
    .ml-chart { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .ml-t-price.flash-up, .ml-t-price.flash-down, .ml-status.is-open .ml-dot { animation: none; }
}