.btn-wrapper {
    display: block;
    margin: 0;
    padding: 0;
}

/* Bouton signature (nom de classe historique conservé).
   Sobre : surface dorée discrète, léger lift au survol, sans effet liquide. */
.liquid-glass-btn {
    position: relative;
    padding: 0.55rem 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--gold-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--gold-strong);
    font-size: 0.85rem;
    font-weight: 600;
    width: fit-content;
    height: fit-content;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.15s ease;
}

.liquid-glass-btn:hover {
    background: rgba(230, 201, 138, 0.22);
    border-color: var(--gold);
    color: var(--gold-strong);
    transform: translateY(-1px);
    text-decoration: none;
}

.liquid-glass-btn:active {
    transform: translateY(0);
}

.button-groups {
    display: flex;
}

.button-groups .liquid-glass-btn {
    border-radius: 0;
}

.button-groups .btn-wrapper:first-child .liquid-glass-btn {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.button-groups .btn-wrapper:last-child .liquid-glass-btn {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

/* Action principale : doré plein (hiérarchie face au bouton "soft" par défaut). */
.liquid-glass-btn.primary {
    background: var(--gold-fill);
    border-color: var(--gold-fill);
    color: var(--gold-ink);
}

.liquid-glass-btn.primary:hover {
    background: var(--gold-fill-hover);
    border-color: var(--gold-fill-hover);
    color: var(--gold-ink);
}

.liquid-glass-btn.danger {
    background: rgba(226, 98, 91, 0.18);
    border-color: rgba(226, 98, 91, 0.4);
    color: #f1a39e;
}

.liquid-glass-btn.danger:hover {
    background: rgba(226, 98, 91, 0.3);
    border-color: var(--danger);
    color: #f7c4c0;
}

.liquid-glass-btn.success {
    background: rgba(79, 174, 139, 0.18);
    border-color: rgba(79, 174, 139, 0.4);
    color: #87d4b6;
}

.liquid-glass-btn.success:hover {
    background: rgba(79, 174, 139, 0.3);
    border-color: var(--success);
    color: #aee5cf;
}

.buttons-row .col-4 .btn-wrapper:not(:first-child) {
    margin-left: 0.5rem;
}

.svg-button {
    width: 25px;
}

/* ============================================================
   Système de boutons unifié — <twig:Button> / <twig:Icon>
   POC : design-poc/boutons.html
   (.liquid-glass-btn ci-dessus = legacy, à retirer une fois la migration terminée)
   ============================================================ */
.ui-btn {
    --pad-y: .45rem;
    --pad-x: .9rem;
    --fs: .84rem;
    --gap: .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    padding: var(--pad-y) var(--pad-x);
    font-family: inherit;
    font-size: var(--fs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background-color .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
}

.ui-btn:hover { transform: translateY(-1px); text-decoration: none; }
.ui-btn:active { transform: translateY(0); }
.ui-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ui-ic { width: 1em; height: 1em; flex: 0 0 auto; }

/* Variantes */
.ui-btn--primary { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--gold-ink); }
.ui-btn--primary:hover { background: var(--gold-fill-hover); border-color: var(--gold-fill-hover); color: var(--gold-ink); box-shadow: 0 4px 14px rgba(230, 201, 138, .18); }
.ui-btn--secondary { background: var(--gold-soft); border-color: var(--border-strong); color: var(--gold-strong); }
.ui-btn--secondary:hover { background: rgba(230, 201, 138, .22); border-color: var(--gold); }
.ui-btn--neutral { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.ui-btn--neutral:hover { background: var(--surface-2-hov); }
.ui-btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.ui-btn--ghost:hover { background: var(--hover); color: var(--text); }
.ui-btn--danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-strong); }
.ui-btn--danger:hover { background: rgba(226, 98, 91, .3); border-color: var(--danger); color: var(--danger-strong); }
.ui-btn--success { background: var(--success-soft); border-color: rgba(79, 174, 139, .4); color: var(--success); }
.ui-btn--success:hover { background: rgba(79, 174, 139, .3); border-color: var(--success); color: var(--success); }

/* Tailles */
.ui-btn--sm { --pad-y: .32rem; --pad-x: .7rem; --fs: .8rem; --gap: .3rem; }
.ui-btn--lg { --pad-y: .58rem; --pad-x: 1.25rem; --fs: .92rem; }

/* Modificateurs */
.ui-btn--block { width: 100%; }
.ui-btn--icon { --pad-x: var(--pad-y); aspect-ratio: 1; }
.ui-btn[disabled], .ui-btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }
.ui-btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.ui-btn.is-loading::after { content: ""; position: absolute; width: .9em; height: .9em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ui-btn-spin .6s linear infinite; color: var(--gold-ink); }
.ui-btn--secondary.is-loading::after, .ui-btn--ghost.is-loading::after, .ui-btn--danger.is-loading::after, .ui-btn--neutral.is-loading::after, .ui-btn--success.is-loading::after { color: var(--gold-strong); }
@keyframes ui-btn-spin { to { transform: rotate(360deg); } }

/* Groupe segmenté */
.ui-btn-group { display: inline-flex; }
.ui-btn-group .ui-btn { border-radius: 0; border-right-width: 0; }
.ui-btn-group .ui-btn:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.ui-btn-group .ui-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-right-width: 1px; }

/* Barre d'outils */
.ui-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ui-toolbar .spacer { flex: 1; }

/* Pied de formulaire : actions alignées à droite (remplace l'ancien ButtonsRow 3 colonnes). */
.ui-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.ui-form-actions--split { justify-content: space-between; }
.ui-actions-group { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }