/* ===== Bloc principal ===== */
.ratio-box {
    margin-top: 20px;
    padding: 15px;
    background: rgba(40, 30, 70, 0.75);
    border-radius: 14px;
    box-shadow: 0 0 18px rgba(120, 90, 255, 0.35);
}

/* ===== Titre ===== */
.ratio-title {
    text-align: center;
    font-size: 1.2rem;
    color: #cfd5ff;
    margin-bottom: 10px;
}

/* ===== Note ===== */
.ratio-note {
    text-align: center;
    font-size: 0.85rem;
    color: #bfc8ff;
    margin-bottom: 12px;
}

/* ===== Tableau ===== */
.ratio-table {
    width: 100%;
    border-collapse: collapse;
}

.ratio-table th {
    color: #cdd3ff;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(140,130,255,0.3);
}

.ratio-table td {
    padding: 8px 5px;
    color: #f0f2ff;
}

tr.ess td { background: rgba(0, 255, 170, 0.08); }
tr.imp td { background: rgba(255, 230, 120, 0.08); }
tr.pla td { background: rgba(210, 150, 255, 0.08); }

/* ===== Messages d’écart ===== */
.alert  { color: #ff6a6a; font-weight: 600; }
.warn   { color: #ffcf6c; }
.ok     { color: #4affb6; font-weight: 600; }
.low    { color: #d0a1ff; }
.light  { color: #8fb1ff; }

/* ===== Total ===== */
.ratio-total {
    text-align: center;
    margin-top: 12px;
    color: #dce2ff;
}