/**
 * Pro HD — Boutons des blocs produit : « Connectez-vous » et panier (`prohdcta`)
 *
 * CETTE FEUILLE NE CONTIENT AUCUNE COULEUR EN DUR. Tout passe par des
 * variables `--prohdcta-*` que le module pose sur `:root` a partir de sa
 * configuration, avec ici une valeur de repli. Si le module est desactive, le
 * <style> de l'en-tete disparait mais cette feuille ne part plus non plus :
 * les replis ne servent donc qu'en cas de configuration incomplete.
 *
 * LES CLASSES SONT PROPRES AU MODULE. Elles ne reprennent pas
 * `.a-productListing__priceCta` du theme, et c'est delibere : sur ce site le
 * chargeur CSS versionne est un <link> du <body>, donc il passe APRES tout ce
 * qu'un module met dans le <head>. Reutiliser les classes du theme obligerait
 * a gagner une bataille de specificite a chaque reglage. Avec des classes
 * neuves, personne ne nous dispute quoi que ce soit.
 */

.prohdcta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    width: 100%;
}

.prohdcta__btn {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    background-color: var(--prohdcta-fond, #FFFFFF);
    border: var(--prohdcta-epaisseur, 2px) solid var(--prohdcta-bordure, #DF1576);
    border-radius: var(--prohdcta-rayon, 20px);
    color: var(--prohdcta-encre, #DF1576);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    text-transform: var(--prohdcta-casse, uppercase);
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.prohdcta__btn:hover,
.prohdcta__btn:focus-visible {
    background-color: var(--prohdcta-survol-fond, #DF1576);
    border-color: var(--prohdcta-survol-fond, #DF1576);
    color: var(--prohdcta-survol-encre, #FFFFFF);
    text-decoration: none;
}

/* Le contour visible au clavier ne doit pas disparaitre sous le survol :
   `:focus-visible` change le fond, l'anneau reste. */
.prohdcta__btn:focus-visible {
    outline: 2px solid var(--prohdcta-bordure, #DF1576);
    outline-offset: 2px;
}

.prohdcta__note {
    display: block;
    margin: 0;
    color: #5A6E7C;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
}

/* --- La fiche produit, ou la place ne manque pas ------------------------- */
.prohdcta--fiche .prohdcta__btn {
    padding: 12px 22px;
    font-size: 14px;
}

.prohdcta--fiche .prohdcta__note {
    font-size: 13px;
    text-align: left;
}

/* --- Telephone : la carte tombe a environ 135 px de large ---------------- */
@media (max-width: 767px) {
    .prohdcta__btn {
        padding: 7px 8px;
        font-size: 11px;
        letter-spacing: 0;
    }

    .prohdcta__note {
        font-size: 11px;
    }
}
