/* Espace crédits (front). S'appuie sur la charte de _bh-variables.css. */

/* ------------------------------------------- Bandeau d'accueil : solde et offres */

/* Le solde et ce qu'on peut en faire tiennent sur une seule ligne. Séparés, chacun perd la
   moitié de son sens : un solde ne dit rien sans ce qu'il permet, et un tarif ne dit rien
   sans le solde en face. */
/* Pas de découpe sur le bandeau : les explications des badges en sortent par le haut. Les
   coins de la colonne du solde sont arrondis directement, ce qui évite d'en avoir besoin. */
.credit-hero {
    border-left: 4px solid var(--bh-blue-dark);
}

.credit-hero-inner {
    display: flex;
    align-items: stretch;
}

.credit-hero-balance {
    flex: 0 0 210px;
    padding: 22px 20px;
    text-align: center;
    background: var(--bh-blue-soft-bg);
    border-radius: 4px 0 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.credit-hero-balance .credit-balance-icon {
    width: 46px;
    height: 46px;
    font-size: 19px;
    background: #fff;
    margin-bottom: 10px;
}

.credit-hero-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 12px;
    font-size: 12.5px;
    color: #55657A;
}

.credit-hero-stat strong {
    color: #1F7A52;
    font-weight: 700;
}

.credit-hero-stat strong.negative {
    color: #C0392B;
}

.credit-hero-offers {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 20px;
}

.credit-hero-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--bh-accent-dark);
    margin-bottom: 12px;
}

/* ------------------------------------------------------- Cartes des offres */

/* Pas de découpe sur grand écran : les cinq cartes tiennent en largeur, et rien ne doit
   rogner ni le soulèvement au survol ni l'infobulle qui sort de la carte. Le défilement
   n'est rétabli que sur téléphone, où il devient nécessaire. */
.credit-offer-scroller {
    display: flex;
    gap: 12px;
    padding-bottom: 4px;
}


.credit-offer {
    flex: 1 1 0;
    min-width: 148px;
    display: flex;
    flex-direction: column;
    padding: 14px 13px;
    border: 1px solid var(--bh-border);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.credit-offer:hover {
    border-color: var(--bh-blue-dark);
    box-shadow: 0 6px 16px rgba(34, 61, 95, 0.09);
    transform: translateY(-2px);
}

.credit-offer-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bh-blue-soft-bg);
    color: var(--bh-blue-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
}

.credit-offer-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bh-accent-dark);
    line-height: 1.3;
}

.credit-offer-desc {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #6B7280;
}

/* Le pied reste collé en bas quelle que soit la longueur du texte au-dessus : les montants
   des cartes s'alignent, et se comparent d'un regard. */
.credit-offer-foot {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.credit-offer-amount {
    font-size: 19px;
    font-weight: 700;
    color: var(--bh-accent-dark);
    line-height: 1;
}

.credit-offer-amount small {
    font-size: 11px;
    font-weight: 600;
}

/* Répond à la seule question qui compte devant une offre : je l'obtiens tout de suite,
   ou je dois écrire à quelqu'un ? */
.credit-offer-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

/* L'explication, écrite par l'administration, apparaît sans délai. */
.credit-offer-badge::after {
    content: attr(data-hint);
    position: absolute;
    bottom: calc(100% + 9px);
    right: 0;
    z-index: 20;
    width: 232px;
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--bh-accent-dark);
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
    box-shadow: 0 6px 18px rgba(34, 61, 95, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

/* La pointe qui rattache l'explication à son badge. */
.credit-offer-badge::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    right: 14px;
    z-index: 21;
    border: 6px solid transparent;
    border-top-color: var(--bh-accent-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s;
}

.credit-offer-badge:hover::after,
.credit-offer-badge:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.credit-offer-badge:hover::before,
.credit-offer-badge:focus::before {
    opacity: 1;
    visibility: visible;
}

/* La première carte n'a pas la place à sa droite : son explication s'aligne à gauche. */
.credit-offer:first-child .credit-offer-badge::after {
    right: auto;
    left: 0;
}

.credit-offer:first-child .credit-offer-badge::before {
    right: auto;
    left: 14px;
}

.credit-offer-badge i {
    font-size: 9px;
}

.credit-offer-badge.is-immediate {
    background: #E3F5EC;
    color: #1F7A52;
}

.credit-offer-badge.is-on-request {
    background: #FDEDE2;
    color: #A85A28;
}

.credit-offer-badge:focus {
    outline: 2px solid var(--bh-blue-dark);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- Solde */

.credit-balance-card {
    border-left: 4px solid var(--bh-blue-dark);
}

.credit-balance-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bh-blue-soft-bg);
    color: var(--bh-blue-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.credit-balance-amount {
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: var(--bh-accent-dark);
}

.credit-balance-label {
    font-size: 15px;
    color: var(--bh-blue-dark);
    font-weight: 600;
}

.credit-balance-baseline {
    font-size: 14px;
    color: #6B7280;
}

/* Trois repères chiffrés, pour que la moitié droite de l'encart ne soit pas vide. */
.credit-balance-stats {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    text-align: center;
}

.credit-balance-stat {
    flex: 1 1 0;
    padding: 10px 4px;
    background: var(--bh-gray-section);
    border-radius: 8px;
}

.credit-balance-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1F7A52;
    line-height: 1.2;
}

.credit-balance-stat-value.negative {
    color: #C0392B;
}

.credit-balance-stat:last-child .credit-balance-stat-value {
    color: var(--bh-accent-dark);
}

.credit-balance-stat-label {
    display: block;
    font-size: 12px;
    color: #6B7280;
    margin-top: 2px;
}

/* Titres de section plus affirmés. */
.credit-page .card-title {
    font-weight: 700;
    color: var(--bh-accent-dark);
}

.credit-page .card-title small.grey {
    font-weight: 400;
}

/* ---------------------------------------------------------------- Actions */

.credit-action-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bh-border);
}

.credit-action-row:last-of-type {
    border-bottom: none;
}

.credit-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bh-blue-soft-bg);
    color: var(--bh-blue-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.credit-action-text {
    flex: 1 1 auto;
    min-width: 0;
}

.credit-action-name {
    font-weight: 600;
    color: var(--bh-accent-dark);
    font-size: 15px;
}

.credit-action-amount {
    font-weight: 700;
    font-size: 16px;
    color: var(--bh-blue-dark);
    white-space: nowrap;
    flex-shrink: 0;
}

.credit-action-amount.negative {
    color: #C0392B;
}

/* Gain déjà obtenu : la ligne reste lisible mais s'efface visuellement, et la coche verte
   remplace le montant comme le bouton. */
.credit-action-row.is-done .credit-action-name {
    color: #6B7280;
}

.credit-action-icon.is-done {
    background: #E3F5EC;
    color: #1F7A52;
}

.credit-action-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E3F5EC;
    color: #1F7A52;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.credit-action-done i {
    font-size: 13px;
}

/* Montant et bouton empilés à droite de chaque action. */
.credit-action-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.credit-action-cta {
    display: inline-block;
    background-color: #fff;
    border: 1px solid var(--bh-blue-dark);
    color: var(--bh-blue-dark);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.credit-action-cta:hover,
.credit-action-cta:focus,
.credit-action-cta:active {
    background-color: var(--bh-blue-soft-bg);
    border-color: var(--bh-blue-dark-hover);
    color: var(--bh-blue-dark-hover);
    text-decoration: none;
    outline: none;
}

/* ---------------------------------------------------------------- Historique */

.credit-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bh-border);
}

.credit-history-row:last-of-type {
    border-bottom: none;
}

.credit-history-text {
    min-width: 0;
}

.credit-history-label {
    font-size: 14px;
    color: var(--bh-accent-dark);
    font-weight: 500;
}

.credit-history-amount {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    flex-shrink: 0;
}

.credit-history-amount.positive {
    color: #1F7A52;
}

.credit-history-amount.negative {
    color: #C0392B;
}

.credit-history-link {
    color: var(--bh-blue-dark);
    font-weight: 600;
    font-size: 14px;
}

/* Zone défilante une fois l'historique déplié, pour ne pas allonger la page sans fin. */
.credit-history-scroll {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 6px;
}

.credit-history-scroll::-webkit-scrollbar {
    width: 6px;
}

.credit-history-scroll::-webkit-scrollbar-thumb {
    background: var(--bh-border);
    border-radius: 3px;
}

/* Bouton contour : bordure et texte dans le bleu de la charte, fond blanc.
   Volontairement sans la classe .btn du projet, qui impose un fond plein, une ombre
   et un `color: #fff !important` impossibles à neutraliser proprement. */
.credit-history-toggle {
    background-color: #fff;
    border: 1px solid var(--bh-blue-dark);
    color: var(--bh-blue-dark);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
    padding: 7px 22px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Le bouton reste en contour dans tous ses états : jamais de fond plein, y compris
   après un clic, où le focus resterait sinon accroché. */
.credit-history-toggle:hover,
.credit-history-toggle:focus,
.credit-history-toggle:active,
.credit-history-toggle:focus-visible {
    background-color: var(--bh-blue-soft-bg);
    border-color: var(--bh-blue-dark-hover);
    color: var(--bh-blue-dark-hover);
    box-shadow: none;
    outline: none;
}

.credit-gift-badge {
    display: inline-block;
    background: var(--bh-blue-soft-bg);
    color: var(--bh-blue-dark);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: 1px;
}

.credit-soon-banner {
    background: var(--bh-blue-soft-bg);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--bh-accent-dark);
}

/* ---------------------------------------------------------------- Pastille d'en-tête */

/* Le bloc utilisateur de l'en-tête a une hauteur fixe de 66px avec un line-height
   équivalent : sans passer le conteneur en flex, la pastille se retrouve empilée
   au-dessus du nom et le chevauche. */
header .credit-header-zone {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* Fond orangé très pâle et texte bleu profond : le solde se détache d'un en-tête entièrement
   bleu sans crier, et reste lisible. */
.credit-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FEF1E8;
    color: #176598;
    border-radius: 999px;
    padding: 5px 13px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.credit-header-pill:hover,
.credit-header-pill:focus {
    background: #FCE4D3;
    color: #176598;
    text-decoration: none;
}

.credit-header-pill i {
    font-size: 13px;
    color: #176598;
}

/* ---------------------------------------------------------------- Écrans étroits */

/* Entre 768 et 991 px, la colonne du solde mange trop de place : on la rétrécit plutôt que
   de tout empiler, l'ensemble tient encore sur une ligne. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .credit-hero-balance {
        flex-basis: 165px;
        padding: 18px 12px;
    }

    .credit-offer {
        min-width: 138px;
    }
}

@media (max-width: 767.98px) {
    /* Le solde passe au-dessus, en bandeau ramassé : sur téléphone, l'empilement vertical
       est le seul agencement lisible. */
    .credit-hero-inner {
        flex-direction: column;
    }

    .credit-hero-balance {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 14px 16px;
        text-align: left;
        flex-wrap: wrap;
        border-radius: 4px 4px 0 0;
    }

    .credit-hero-balance .credit-balance-icon {
        margin-bottom: 0;
    }

    .credit-hero-balance .credit-balance-amount {
        font-size: 30px;
    }

    .credit-hero-balance .credit-balance-label {
        font-size: 13px;
        align-self: center;
    }

    .credit-hero-stats {
        flex-direction: row;
        gap: 12px;
        margin-top: 0;
        margin-left: auto;
        align-self: center;
    }

    .credit-hero-offers {
        padding: 16px;
    }

    /* Les cartes gardent leur largeur et défilent : la dernière est coupée au bord, ce qui
       montre qu'il y en a d'autres. */
    .credit-offer {
        flex: 0 0 auto;
        width: 152px;
    }

    .credit-offer:hover {
        transform: none;
    }

    .credit-offer-scroller {
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin-right: -16px;
        padding-right: 16px;
        padding-top: 3px;
    }

    .credit-offer-scroller::-webkit-scrollbar {
        display: none;
    }

    /* Dans une bande défilante, une explication ancrée à son badge serait coupée net : elle
       s'affiche donc en bas de l'écran, où rien ne la rogne. */
    .credit-offer-badge::after {
        position: fixed;
        bottom: 16px;
        left: 12px;
        right: 12px;
        width: auto;
        transform: none;
    }

    .credit-offer-badge::before {
        display: none;
    }

    .credit-offer:first-child .credit-offer-badge::after {
        left: 12px;
    }

    .credit-balance-amount {
        font-size: 34px;
    }

    .credit-action-row {
        flex-wrap: wrap;
    }

    .credit-action-side {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-left: 56px;
    }

    .credit-header-pill {
        padding: 4px 10px;
        font-size: 13px;
    }
}

/* Sous 440 px, la disposition en ligne ne tient plus : le badge « Déjà obtenu » ne se
   comprime pas, et selon la longueur de la description, la ligne se disloquait — l'icône
   se retrouvait seule au-dessus du texte.

   Une grille explicite règle la question une fois pour toutes : l'icône occupe la première
   colonne, le texte la seconde, et le montant passe dessous, aligné sur le texte. Le
   placement ne dépend plus de la longueur des mots. */
@media (max-width: 440px) {
    .credit-action-row {
        display: grid;
        grid-template-columns: 34px 1fr;
        column-gap: 10px;
        row-gap: 6px;
        align-items: center;
    }

    .credit-action-icon {
        grid-column: 1;
        grid-row: 1;
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .credit-action-text {
        grid-column: 2;
        grid-row: 1;
    }

    .credit-action-side {
        grid-column: 2;
        grid-row: 2;
        margin-left: 0;
        justify-content: flex-start;
    }

    .credit-action-name {
        font-size: 14px;
        line-height: 1.3;
    }

    .credit-action-text small {
        font-size: 11.5px;
        line-height: 1.35;
    }

    .credit-action-done,
    .credit-action-cta {
        font-size: 12px;
        padding: 4px 12px;
    }

    /* Les cartes d'offres suivent le même resserrement. */
    .credit-offer {
        width: 142px;
    }

    .credit-hero-balance .credit-balance-amount {
        font-size: 26px;
    }

    .credit-hero-stats {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 6px;
    }
}