/* « Entre pros pres de vous » — le bloc de l'accueil reserve aux pros approuves.
 *
 * Il emprunte au bandeau du moment son titre (.moment-topline :
 * contract-moment.css) et a la coque son cadre (.panel : contract-shell.css) ;
 * cette feuille ne declare que ce qui n'existe nulle part ailleurs — la ligne
 * de contexte, le nombre et le lien. Mobile d'abord : le socle est le pouce,
 * la requete ELARGIT, jamais l'inverse.
 */

.home-page .entre-pros {
    display: grid;
    gap: var(--hp-space-2);
    padding: 7px 7px 10px;
}

.home-page .entre-pros__contexte {
    margin: 0;
    padding-inline: 5px;
    color: var(--hp-muted);
    font-size: var(--hp-font-sm);
    line-height: 1.35;
}

.home-page .entre-pros__pied {
    display: flex;
    flex-direction: column;
    gap: var(--hp-space-2);
    padding-inline: 5px;
}

.home-page .entre-pros__compte {
    display: flex;
    align-items: baseline;
    gap: var(--hp-space-2);
    margin: 0;
    color: var(--hp-ink);
    font-size: var(--hp-font-md);
}

.home-page .entre-pros__compte--vide {
    color: var(--hp-muted);
}

.home-page .entre-pros__nombre {
    color: var(--home-green-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--hp-font-hero);
    line-height: 1;
}

/* Le lien reste une cible de 44 points au doigt, meme sur une seule ligne. */
.home-page .entre-pros__lien {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap-size, 44px);
    color: var(--home-green);
    font-weight: 600;
    text-decoration: none;
}

/* En largeur, le nombre et le lien se partagent une rangee : la hauteur du
   bloc ne vaut plus que celle d'un titre et d'une ligne. */
@media (min-width: 900px) {
    .home-page .entre-pros {
        padding: 10px 14px 12px;
    }

    .home-page .entre-pros__pied {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .home-page .entre-pros__lien {
        align-self: center;
    }
}