/*
 * Bouton du design system — Figma "Button" (node 2088:18492).
 *
 * Mécanique du survol reprise de l'état "Hover" de la maquette : le chevron est
 * positionné hors du bouton (masqué par overflow:hidden) et glisse à l'intérieur,
 * pendant que le label se décale. Les paddings gauche/droite sont échangés de sorte
 * que leur somme reste constante — le bouton ne change donc jamais de largeur au
 * survol, seul son contenu bouge.
 */

.button {
    /* Réglés par les modificateurs de taille */
    --button-padding-block: var(--space-compact);
    --button-padding-inline: var(--space-m);
    --button-padding-inline-start-hover: var(--space-l);
    --button-padding-inline-end-hover: var(--space-s);
    --button-font-size: var(--font-size-p);
    --button-icon-box: 16px;
    --button-chevron-width: 5px;
    --button-chevron-height: 9px;
    --button-icon-offset-hover: 4px;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-micro);
    overflow: hidden;
    padding: var(--button-padding-block) var(--button-padding-inline);
    border: 0;
    border-radius: var(--radius-xxxs);
    font-family: var(--font-family-body);
    font-size: var(--button-font-size);
    font-weight: 400;
    line-height: var(--line-height-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: padding 200ms ease, background-color 200ms ease, color 200ms ease;
}

/* Le chevron vit dans une boîte de taille fixe (16px, 12px en sm) et n'affecte pas
   le flux : il est en absolu, hors du bouton par défaut. */
.button__icon {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--button-icon-box) - var(--space-micro));
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button-icon-box);
    height: var(--button-icon-box);
    transform: translateY(-50%);
    transition: left 200ms ease;
}

/* Dimensions explicites : le tracé exporté fait 5x9 (4x7 en sm), jamais étiré. */
.button__chevron {
    display: block;
    width: var(--button-chevron-width);
    height: var(--button-chevron-height);
}

/*
 * « button--active » tient exactement l'état de survol, sans souris : c'est l'état Active de la
 * maquette. Il sert aux entrées du menu — un panneau ouvert ou la page courante doit se lire
 * comme un bouton survolé. Posé sur les MÊMES règles que :hover, pour que les deux ne puissent
 * pas diverger.
 */
/*
 * TROISIÈME DÉCLENCHEUR : LE SURVOL D'UN ANCÊTRE.
 *
 * Une carte entièrement cliquable ne porte qu'UN lien — sur son titre, étendu à la carte par
 * un pseudo-élément. Son « bouton » est alors un simple libellé (le partial en `as => 'span'`)
 * qui n'est jamais survolé lui-même : le curseur est sur la carte, pas sur lui. Sans ce
 * déclencheur, la carte réagissait et son bouton restait mort.
 *
 * L'hôte se déclare par data-button-hover. Le contrat est ici, dans l'atome, et pas recopié
 * dans le CSS de chaque carte : trois sélecteurs de plus valent mieux que trois copies des
 * mêmes déclarations, qui finiraient par différer.
 *
 * :focus-within en plus de :hover, pour que la prise de focus clavier sur le lien de la carte
 * produise exactement le même retour qu'un survol.
 */
.button:hover,
.button:focus-visible,
.button--active,
[data-button-hover]:hover .button,
[data-button-hover]:focus-within .button {
    padding-inline: var(--button-padding-inline-start-hover) var(--button-padding-inline-end-hover);
}

.button:hover .button__icon,
.button:focus-visible .button__icon,
.button--active .button__icon,
[data-button-hover]:hover .button__icon,
[data-button-hover]:focus-within .button__icon {
    left: var(--button-icon-offset-hover);
}

/* ---- Tailles ---- */

.button--sm {
    --button-padding-block: var(--space-micro);
    --button-padding-inline: var(--space-m);
    --button-padding-inline-start-hover: var(--space-l);
    --button-padding-inline-end-hover: var(--space-s);
    --button-font-size: var(--font-size-small);
    --button-icon-box: 12px;
    --button-chevron-width: 4px;
    --button-chevron-height: 7px;
    --button-icon-offset-hover: 7px;
}

.button--md {
    --button-padding-block: var(--space-compact);
    --button-padding-inline: var(--space-m);
    --button-padding-inline-start-hover: var(--space-l);
    --button-padding-inline-end-hover: var(--space-s);
    --button-font-size: var(--font-size-p);
    --button-icon-box: 16px;
    --button-chevron-width: 5px;
    --button-chevron-height: 9px;
    --button-icon-offset-hover: 4px;
}

.button--lg {
    --button-padding-block: var(--space-compact);
    --button-padding-inline: var(--space-l);
    --button-padding-inline-start-hover: var(--space-list);
    --button-padding-inline-end-hover: var(--space-m);
    --button-font-size: var(--font-size-h6);
    --button-icon-box: 16px;
    --button-chevron-width: 5px;
    --button-chevron-height: 9px;
    --button-icon-offset-hover: 7px;
}

/* ---- Couleurs x variantes ---- */

.button--primary.button--plain {
    background-color: var(--color-primary);
    color: var(--color-primary-50);
}

.button--primary.button--invert {
    background-color: var(--color-primary-50);
    color: var(--color-primary);
}

.button--primary.button--ghost {
    background-color: transparent;
    color: var(--color-primary-900);
}

.button--primary.button--ghost:hover,
.button--primary.button--ghost:focus-visible,
.button--primary.button--ghost.button--active {
    background-color: var(--color-primary-100);
}

.button--secondary.button--plain {
    background-color: var(--color-secondary);
    color: var(--color-secondary-900);
}

.button--secondary.button--invert {
    background-color: var(--color-secondary-900);
    color: var(--color-secondary);
}

.button--secondary.button--ghost {
    background-color: transparent;
    color: var(--color-secondary-900);
}

.button--secondary.button--ghost:hover,
.button--secondary.button--ghost:focus-visible,
.button--secondary.button--ghost.button--active {
    background-color: var(--color-secondary-300);
}

@media (prefers-reduced-motion: reduce) {
    .button,
    .button__icon {
        transition: none;
    }
}