/*
 * Espace client — onglet « Facturation fin de mois ».
 * Charte 2026 : violet foncé #45183C, rose pâle #F1E9EF, accents #B0176D.
 * Les tableaux réutilisent la classe .shop_table, déjà habillée par le
 * widget « Mon compte » d'Elementor : rien à redéfinir ici.
 */

.ip-fdm {
    --ip-dark: #45183C;
    --ip-plum: #742965;
    --ip-pink: #B0176D;
    --ip-pale: #F1E9EF;
    color: var(--ip-dark);
    font-family: "Poppins", "Montserrat", Tahoma, Arial, sans-serif;
}

/* ---------------------------- Encours du mois ------------------------- */

.ip-fdm__resume {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 35px;
}

.ip-fdm__chiffre {
    background: var(--ip-pale);
    border-radius: 15px;
    display: flex;
    flex: 1 1 180px;
    flex-direction: column;
    gap: 6px;
    padding: 18px 22px;
}

.ip-fdm__chiffre--dispo {
    background: var(--ip-dark);
    color: #fff;
}

.ip-fdm__label {
    font-size: 13px;
    font-weight: 400;
    opacity: .8;
}

.ip-fdm__valeur {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.ip-fdm__chiffre--dispo .ip-fdm__valeur { color: #fff; }

/* ------------------------------ Sections ------------------------------ */

.ip-fdm__titre {
    color: var(--ip-dark);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    margin: 35px 0 12px;
}

.ip-fdm__titre:first-of-type { margin-top: 0; }

.ip-fdm__echeance {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 18px;
}

.ip-fdm__vide {
    background: var(--ip-pale);
    border-radius: 15px;
    font-size: 15px;
    margin: 0 0 18px;
    padding: 18px 22px;
}

.ip-fdm__table { margin-bottom: 10px; }

.ip-fdm__table a { color: var(--ip-pink); }
.ip-fdm__table a:hover { color: var(--ip-plum); }

/* --------------------------- État de règlement ------------------------ */

.ip-fdm__etat {
    border-radius: 100px;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    white-space: nowrap;
}

.ip-fdm__etat--regle {
    background: var(--ip-pale);
    color: var(--ip-dark);
}

.ip-fdm__etat--attente {
    background: var(--ip-pink);
    color: #fff;
}

/* ------------------------------ Responsive ---------------------------- */

@media (max-width: 767px) {
    .ip-fdm__chiffre { flex: 1 1 100%; }
    .ip-fdm__valeur { font-size: 21px; }
}