/**
 * Bloc « Mes rabais » injecté dans /mon-compte/ — même famille visuelle que l'encadré
 * « Mon abonnement » (pige-abonnements). Aucune variable CSS du thème : elles ne sont pas
 * garanties sur toutes les routes SPA.
 */

.pige-rabais {
    margin: 16px 0 0;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    border-left: 3px solid #0083D6;
}

.pige-rabais__title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #004979;
}

.pige-rabais__text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #3c4858;
}

.pige-rabais__button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: #0083D6;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.pige-rabais__button:hover { background: #006bb0; }
.pige-rabais__button:disabled { opacity: 0.7; cursor: wait; }

.pige-rabais__message {
    margin: 12px 0 0;
    font-size: 13px;
    color: #b42318;
}

/* ── Avantages Entreprise : encart de « Mon compte » ───────────────────────── */

.pige-ent {
    margin: 16px 0 0;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    border-left: 3px solid #0083D6;
}

.pige-ent__title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #004979;
}

.pige-ent__text, .pige-ent__price, .pige-ent__confirm, .pige-ent__note {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #3c4858;
}

.pige-ent__price { font-weight: 600; }
.pige-ent__note { font-size: 13px; color: #6b7785; }

.pige-ent__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 4px;
}

.pige-ent__actions .pige-ent__confirm { flex-basis: 100%; margin: 0; }

.pige-ent__button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: #0083D6;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.pige-ent__button:hover { background: #006bb0; color: #ffffff; }
.pige-ent__button:disabled { opacity: 0.7; cursor: wait; }

.pige-ent__link {
    padding: 0;
    font-size: 14px;
    color: #0083D6;
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.pige-ent__message { margin: 12px 0 0; font-size: 13px; color: #b42318; }

/* ── Avantages Entreprise : quatrième carte de /tarifs/ ────────────────────── */
/* La carte reprend les classes du thème (`.item`, `.pricing`, `.btn`, `.points`). Ici :
   seulement ce qu'exigent quatre colonnes au lieu de trois, sur grand écran. Sous 880 px,
   le thème empile déjà les cartes. */

@media screen and (min-width: 881px) {
    /* « Avantages Entreprise » tient sur deux lignes : on réserve deux lignes au titre de
       chaque carte, calé en bas, pour que prix, boutons et points restent alignés. */
    #prices__intro .container .list.pige-ent-liste .item > span {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end;
        column-gap: 0.28em;
        min-height: 2.3em;
        line-height: 1.15;
    }

    #prices__intro .container .list.pige-ent-quatre .item { width: calc(25% - 9px); }
    #prices__intro .container .list.pige-ent-quatre .item > span { font-size: clamp(17px, 1.9vw, 30px); }
    #prices__intro .container .list.pige-ent-quatre .item .pricing > span:nth-child(1) { font-size: clamp(40px, 3.6vw, 70px); }
}

/* Colonnes étroites : la ligne sous le prix passe sur deux lignes dans certaines cartes
   seulement. On lui réserve deux lignes partout pour garder les boutons alignés. */
@media screen and (min-width: 881px) and (max-width: 1140px) {
    #prices__intro .container .list.pige-ent-quatre .item .pricing > span:nth-child(2) { min-height: 32px; }
}

#prices__intro .container .list .pige-ent-carte__note {
    margin: 40px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #777;
}
