/* || Rappel du crédit d'heures

   Affiché sur les formulaires d'intervention et sur l'accueil de l'espace
   partenaire. Feuille à part : les deux mises en page chargent leur propre
   style, et le bandeau n'appartient ni à l'une ni à l'autre. */

.credit-heures {
    margin: 0 0 var(--gap-m);
    padding: var(--pad-xs);
    border: 2px solid var(--quinary-color);
    border-radius: clamp(5px, 0.5vw, 20px);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
}

.credit-heures__chiffres {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-xxs) var(--gap-s);
}

.credit-heures__restant {
    width: auto;
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 10px;
}

/* Le chiffre est ce que le partenaire vient chercher : il porte la
   typographie des titres, comme les durées sur les cartes. */
.credit-heures .credit-heures__valeur {
    font-family: 'Teko-Medium';
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1;
    color: var(--secondary-color);
    text-transform: uppercase;
}

.credit-heures .credit-heures__legende {
    font-family: 'Ubuntu-Medium';
    font-size: var(--text-size-s);
    color: var(--tertiary-color);
}

.credit-heures .credit-heures__detail {
    width: auto;
    margin: 0;
    font-size: 13px;
    color: var(--tertiary-color);
    opacity: .75;
}

.credit-heures__jauge {
    height: 8px;
    border-radius: 4px;
    background-color: var(--quinary-color);
    overflow: hidden;
}

.credit-heures__jauge>span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--secondary-color);
    transition: width .3s ease;
}

/* Crédit dépassé : la même carte, dans le rose du thème. */
.credit-heures--depasse {
    border-color: var(--quaternary-color);
}

.credit-heures--depasse .credit-heures__valeur {
    color: var(--primary-color);
}

.credit-heures--depasse .credit-heures__jauge {
    background-color: var(--quaternary-color);
}

.credit-heures--depasse .credit-heures__jauge>span {
    background-color: var(--primary-color);
}

/* || Carte de crédit dans la liste des interventions

   Même gabarit que les cartes voisines, couleurs distinctes : c'est un
   repère, pas une intervention. L'ordre CSS la maintient en tête même si
   une carte est déposée avant elle. */

.credit-carte {
    order: -1;
    height: 100%;
    padding: var(--pad-xs);
    border: 2px solid var(--quinary-color);
    border-radius: 6px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Le chiffre domine, la légende l'explique, le détail complète. Le Teko est
   étroit : à taille égale il paraissait plus petit que la légende, et la
   hiérarchie se lisait à l'envers.

   La classe est répétée pour passer devant « .partner_list p », qui impose
   sinon la même taille aux trois lignes. */
.credit-carte .credit-carte__valeur {
    width: auto;
    margin: 0;
    font-family: 'Teko-Medium';
    font-size: clamp(44px, 4.4vw, 64px);
    line-height: .9;
    color: var(--secondary-color);
    text-transform: uppercase;
}

.credit-carte .credit-carte__legende {
    width: auto;
    margin: 2px 0 0;
    font-family: 'Ubuntu-Light';
    /* En pixels : la base rem du thème vaut 14 px, les valeurs relatives y
       descendaient sous le seuil de lisibilité. */
    font-size: 15px;
    line-height: 1.3;
    color: var(--tertiary-color);
}

.credit-carte .credit-carte__detail {
    width: auto;
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: var(--tertiary-color);
    opacity: .75;
}

.credit-carte .credit-heures__jauge {
    margin: 14px 0 6px;
}

.credit-carte--depasse {
    border-color: var(--quaternary-color);
}

.credit-carte--depasse .credit-carte__valeur {
    color: var(--primary-color);
}

.credit-carte--depasse .credit-heures__jauge {
    background-color: var(--quaternary-color);
}

.credit-carte--depasse .credit-heures__jauge>span {
    background-color: var(--primary-color);
}