/*
 * Boutons. Deux variantes seulement : plein (l'action principale de la page) et
 * fantôme (tout le reste). Un troisième niveau existe, c'est le lien souligné.
 */

.bouton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 1.6rem;
    border-radius: var(--rayon-plein);
    font-family: var(--police-texte);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    isolation: isolate;
    overflow: hidden;
    transition: color 0.35s var(--ease-sortie), border-color 0.35s var(--ease-sortie);
}

.bouton--compact {
    padding: 0.7rem 1.2rem;
}

.bouton--large {
    padding: 1.15rem 2.2rem;
    font-size: var(--t-base);
}

/* — Plein — */
/*
 * Aplat électrique avec un reflet en haut, comme une touche rétroéclairée ;
 * au survol, une lueur cyan. Plus de dégradé violet en mouvement.
 */
.bouton--plein {
    color: #fff;
    background: var(--electrique);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.25),
        0 8px 24px -10px rgb(55 50 255 / 0.7);
    transition: background-color 0.35s var(--ease-sortie), box-shadow 0.35s var(--ease-sortie), transform 0.4s var(--ease-sortie);
}

.bouton--plein:hover {
    background: #4a46ff;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.3),
        0 0 0 4px rgb(46 163 242 / 0.22),
        0 10px 32px -8px rgb(46 163 242 / 0.75);
}

/* — Fantôme — */
.bouton--fantome {
    color: var(--texte);
    border: 1px solid var(--trait-fort);
}

/*
 * Le remplissage monte depuis le bas au survol. C'est une pseudo-élément
 * transformée, donc composée par le GPU : aucun repaint du texte.
 */
.bouton--fantome::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--texte);
    transform: translateY(101%);
    transition: transform 0.5s var(--ease-sortie);
}

.bouton--fantome:hover {
    color: var(--fond);
    border-color: var(--texte);
}

.bouton--fantome:hover::before {
    transform: translateY(0);
}

.inverse .bouton--fantome {
    color: var(--encre);
    border-color: rgb(15 8 65 / 0.24);
}

.inverse .bouton--fantome::before {
    background: var(--encre);
}

.inverse .bouton--fantome:hover {
    color: var(--craie);
    border-color: var(--encre);
}

/* La flèche avance d'un cheveu au survol : le mouvement dit « ça continue ». */
.bouton__fleche {
    transition: transform 0.45s var(--ease-sortie);
}

.bouton:hover .bouton__fleche {
    transform: translateX(0.28em);
}

/* — Lien souligné, la troisième force — */
.lien-trait {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--police-texte);
    font-weight: 500;
    text-decoration: none;
    color: var(--texte);
    padding-block-end: 0.25em;
}

.lien-trait::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    background: currentColor;
    transform-origin: right center;
    transform: scaleX(1);
    transition: transform 0.45s var(--ease-sortie);
}

/* Au survol le trait se rétracte à droite puis repart de la gauche. */
.lien-trait:hover::after {
    animation: trait-repart 0.6s var(--ease-sortie);
}

@keyframes trait-repart {
    0% { transform: scaleX(1); transform-origin: right center; }
    49% { transform: scaleX(0); transform-origin: right center; }
    50% { transform: scaleX(0); transform-origin: left center; }
    100% { transform: scaleX(1); transform-origin: left center; }
}

/* — Groupe d'actions — */
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.aimante {
    will-change: transform;
}