/**
 * Boutons d'action — apparence unique du site.
 *
 * Préfixe : .leb-cta (classe partagée avec le thème parent, que les blocs
 * `acf/site-*` produisent déjà : header, footer, options « Mon site »).
 *
 * Anatomie : pilule + pastille ronde portant une flèche.
 *   ::before = la pastille  ·  ::after = la flèche (masque SVG recoloré)
 * Les variantes ne changent que quatre variables, jamais la structure.
 */

.leb-cta {
    /* Réglages de la variante par défaut. */
    --lp-cta-bg: var(--wp--preset--color--rose);
    --lp-cta-bg-hover: var(--wp--preset--color--rose-dark);
    --lp-cta-text: var(--wp--preset--color--white);
    --lp-cta-text-hover: var(--wp--preset--color--white);
    --lp-cta-dot: var(--wp--preset--color--white);
    --lp-cta-arrow: var(--wp--preset--color--rose);
    --lp-cta-border: transparent;
    --lp-cta-border-hover: transparent;
    --lp-cta-dot-size: 42px;
    --lp-cta-inset: 6px;
    --lp-cta-arrow-size: 16px;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: var(--lp-cta-inset) 28px var(--lp-cta-inset) var(--lp-cta-inset);
    border: 1px solid var(--lp-cta-border);
    border-radius: var(--lp-radius-pill);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    /*
     * Serré sur une ligne, lisible sur deux — même réglage que le bouton
     * d'envoi des formulaires (forms.css, `.wpcf7-submit`). Sur un petit écran
     * un libellé un peu long passe à la ligne, et à interligne 1 les deux
     * lignes se touchaient. La hauteur du bouton n'en bouge pas : c'est la
     * pastille, plus haute que le texte, qui la fixe.
     */
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/*
 * Les trois propriétés de couleur sont écrites avec le sélecteur du thème
 * parent, et non avec la simple classe.
 *
 * Le parent habille `.leb-cta` pour son propre bloc CTA en `.leb-cta:not([class*="is-style-"])`,
 * de spécificité (0,2,0). Sur le front sa feuille n'est jamais chargée — ce
 * bloc n'est pas utilisé — mais le canevas de l'éditeur charge les styles de
 * tous les blocs enregistrés : nos boutons y viraient au bleu. On reprend donc
 * sa forme de sélecteur ; à spécificité égale, notre feuille passe après et
 * l'emporte, sans recourir à `!important`.
 */
.leb-cta.is-style-primary,
.leb-cta:not([class*="is-style-"]) {
    background: var(--lp-cta-bg);
    border-color: var(--lp-cta-border);
    color: var(--lp-cta-text);
}

/* La pastille. */
.leb-cta::before {
    content: "";
    flex: 0 0 auto;
    width: var(--lp-cta-dot-size);
    height: var(--lp-cta-dot-size);
    border-radius: 50%;
    background: var(--lp-cta-dot);
}

/* La flèche, centrée sur la pastille. */
.leb-cta::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--lp-cta-inset) + (var(--lp-cta-dot-size) - var(--lp-cta-arrow-size)) / 2);
    width: var(--lp-cta-arrow-size);
    height: var(--lp-cta-arrow-size);
    transform: translateY(-50%);
    background-color: var(--lp-cta-arrow);
    -webkit-mask: url("../img/arrow-right.svg") center / contain no-repeat;
    mask: url("../img/arrow-right.svg") center / contain no-repeat;
    transition: transform 0.25s ease;
}

.leb-cta.is-style-primary:hover,
.leb-cta.is-style-primary:focus-visible,
.leb-cta:not([class*="is-style-"]):hover,
.leb-cta:not([class*="is-style-"]):focus-visible {
    background: var(--lp-cta-bg-hover);
    border-color: var(--lp-cta-border-hover);
    color: var(--lp-cta-text-hover);
}

/* ---------------------------------------------------------------- Variantes */

/* Fond clair sur image ou sur fond coloré : pastille rose, flèche blanche. */
.leb-cta--light {
    --lp-cta-bg: var(--wp--preset--color--white);
    --lp-cta-bg-hover: var(--wp--preset--color--border-soft);
    --lp-cta-text: var(--wp--preset--color--anthracite);
    --lp-cta-text-hover: var(--wp--preset--color--anthracite);
    --lp-cta-dot: var(--wp--preset--color--rose);
    --lp-cta-arrow: var(--wp--preset--color--white);
}

/* Sur fond sombre : contour discret, remplissage léger au survol. */
.leb-cta--ghost {
    --lp-cta-bg: transparent;
    --lp-cta-bg-hover: rgb(255 255 255 / 0.1);
    --lp-cta-text: var(--wp--preset--color--white);
    --lp-cta-text-hover: var(--wp--preset--color--white);
    --lp-cta-dot: transparent;
    --lp-cta-arrow: var(--wp--preset--color--white);
    --lp-cta-border: rgb(255 255 255 / 0.5);
    --lp-cta-border-hover: rgb(255 255 255 / 0.5);
}

/* Sur fond clair : contour, remplissage rose au survol. */
.leb-cta--outline {
    --lp-cta-bg: transparent;
    --lp-cta-bg-hover: var(--wp--preset--color--rose);
    --lp-cta-text: var(--wp--preset--color--anthracite);
    --lp-cta-text-hover: var(--wp--preset--color--white);
    --lp-cta-dot: transparent;
    --lp-cta-arrow: currentColor;
    --lp-cta-border: var(--wp--preset--color--border-soft);
    --lp-cta-border-hover: var(--wp--preset--color--rose);
}

/* Format compact (barre de navigation). */
.leb-cta--sm {
    --lp-cta-dot-size: 34px;
    --lp-cta-inset: 5px;
    --lp-cta-arrow-size: 14px;

    gap: 10px;
    padding-right: 22px;
    font-size: var(--wp--preset--font-size--xs);
}

/* Lien fléché sans pilule (« Voir toutes nos réalisations »). */
.leb-cta--plain {
    --lp-cta-bg: transparent;
    --lp-cta-bg-hover: transparent;
    --lp-cta-text: var(--wp--preset--color--anthracite);
    --lp-cta-text-hover: var(--wp--preset--color--rose);
    --lp-cta-dot: transparent;
    --lp-cta-arrow: currentColor;
    --lp-cta-dot-size: var(--lp-cta-arrow-size);
    --lp-cta-inset: 0px;

    gap: 10px;
    padding: 0;
    border: 0;
}

/* Sur le lien fléché seul, la flèche pivote au survol (maquette). */
.leb-cta--plain:hover::after,
.leb-cta--plain:focus-visible::after {
    transform: translateY(-50%) rotate(-45deg);
}