/* =========================================================================
   Artworks Digital — Système CTA (primaire / secondaire)
   Chargé après main.css pour écraser les anciennes règles violet/bleu.
   ========================================================================= */

/* —— Base —— */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
    border-radius: 0;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none !important;
    background-image: none !important;
    transform: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn::before { display: none !important; }
.btn:hover::before { display: none !important; }
.btn-sm { padding: 9px 16px; font-size: .7rem; }
.btn-lg { padding: 15px 28px; font-size: .78rem; }
.btn-block { width: 100%; }

/* —— CTA primaire (fond clair) —— */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
a.btn-primary,
button.btn-primary {
    background-color: var(--museum-black, #000) !important;
    color: var(--museum-white, #fff) !important;
    border-color: var(--museum-black, #000) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
a.btn-primary:hover,
a.btn-primary:focus-visible,
button.btn-primary:hover,
button.btn-primary:focus-visible {
    background-color: var(--museum-gold, #c9a86a) !important;
    color: var(--museum-black, #000) !important;
    border-color: var(--museum-gold, #c9a86a) !important;
}

.btn-primary:active {
    background-color: var(--museum-gold-soft, #b89555) !important;
    color: var(--museum-black, #000) !important;
    border-color: var(--museum-gold-soft, #b89555) !important;
}

.btn-primary:disabled,
.btn-primary[disabled] {
    background-color: var(--gray-300, #d4d4d4) !important;
    color: var(--gray-500, #737373) !important;
    border-color: var(--gray-300, #d4d4d4) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* —— CTA secondaire (= ghost / light unifiés) —— */
.btn-secondary,
.btn-ghost,
.btn-light,
.btn-secondary:link,
.btn-ghost:link,
.btn-light:link,
.btn-secondary:visited,
.btn-ghost:visited,
.btn-light:visited,
a.btn-secondary,
a.btn-ghost,
a.btn-light,
button.btn-secondary,
button.btn-ghost,
button.btn-light {
    background-color: var(--museum-white, #fff) !important;
    color: var(--museum-black, #000) !important;
    border-color: var(--museum-black, #000) !important;
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-ghost:hover,
.btn-ghost:focus-visible,
.btn-light:hover,
.btn-light:focus-visible,
a.btn-secondary:hover,
a.btn-ghost:hover,
a.btn-light:hover,
button.btn-secondary:hover,
button.btn-ghost:hover,
button.btn-light:hover {
    background-color: var(--museum-black, #000) !important;
    color: var(--museum-white, #fff) !important;
    border-color: var(--museum-black, #000) !important;
}

.btn-secondary:active,
.btn-ghost:active,
.btn-light:active {
    background-color: var(--gray-800, #262626) !important;
    color: var(--museum-white, #fff) !important;
    border-color: var(--gray-800, #262626) !important;
}

/* —— Sur fond sombre (hero, bannières) —— */
.hero-inner .btn-primary,
.pf-hero-full .btn-primary,
.pf-hero-full-inner .btn-primary,
.seo-cta-final .btn-primary,
.cta-on-dark .btn-primary {
    background-color: var(--museum-white, #fff) !important;
    color: var(--museum-black, #000) !important;
    border-color: var(--museum-white, #fff) !important;
}

.hero-inner .btn-primary:hover,
.pf-hero-full .btn-primary:hover,
.seo-cta-final .btn-primary:hover,
.cta-on-dark .btn-primary:hover {
    background-color: var(--museum-gold, #c9a86a) !important;
    color: var(--museum-black, #000) !important;
    border-color: var(--museum-gold, #c9a86a) !important;
}

.hero-inner .btn-secondary,
.hero-inner .btn-ghost,
.hero-inner .btn-light,
.pf-hero-full .btn-secondary,
.pf-hero-full .btn-ghost,
.pf-hero-full .btn-light,
.seo-cta-final .btn-secondary,
.seo-cta-final .btn-ghost,
.seo-cta-final .btn-light,
.cta-on-dark .btn-secondary,
.cta-on-dark .btn-ghost,
.cta-on-dark .btn-light {
    background-color: transparent !important;
    color: var(--museum-white, #fff) !important;
    border-color: rgba(255, 255, 255, .55) !important;
}

.hero-inner .btn-secondary:hover,
.hero-inner .btn-ghost:hover,
.hero-inner .btn-light:hover,
.pf-hero-full .btn-ghost:hover,
.seo-cta-final .btn-ghost:hover,
.cta-on-dark .btn-secondary:hover,
.cta-on-dark .btn-ghost:hover {
    background-color: var(--museum-white, #fff) !important;
    color: var(--museum-black, #000) !important;
    border-color: var(--museum-white, #fff) !important;
}

/* —— Nav & admin (même logique) —— */
.nav-cta-compact.btn-primary { /* hérite des règles primaires */ }
.nav-account-summary { /* pas un btn */ }

body.theme-gallery .btn-primary,
body.theme-gallery .btn-primary:hover {
    /* identique — pas de thème orange */
}

/* —— Danger —— */
.btn-danger {
    background-color: transparent !important;
    color: var(--danger-600, #dc2626) !important;
    border-color: var(--danger-600, #dc2626) !important;
}
.btn-danger:hover {
    background-color: var(--danger-600, #dc2626) !important;
    color: var(--museum-white, #fff) !important;
    border-color: var(--danger-600, #dc2626) !important;
}

/* —— Focus accessibilité —— */
.btn:focus-visible {
    outline: 2px solid var(--museum-gold, #c9a86a);
    outline-offset: 2px;
}

/* —— Liens styled as buttons in footer sombre —— */
.site-footer .btn-primary:hover {
    background-color: var(--museum-gold, #c9a86a) !important;
    color: var(--museum-black, #000) !important;
}

.site-footer .btn-secondary,
.site-footer .btn-ghost {
    background-color: transparent !important;
    color: var(--museum-white, #fff) !important;
    border-color: rgba(255, 255, 255, .4) !important;
}
.site-footer .btn-secondary:hover,
.site-footer .btn-ghost:hover {
    background-color: var(--museum-white, #fff) !important;
    color: var(--museum-black, #000) !important;
}

/* —— Zones avec anciennes règles main.css (blog, signup) —— */
.blog-aside-cta .btn-primary,
.blog-article-cta .btn-primary,
.signup-modal-gallery .btn-primary,
.signup-modal .btn-primary {
    background-color: var(--museum-black, #000) !important;
    color: var(--museum-white, #fff) !important;
    border: 1px solid var(--museum-black, #000) !important;
    box-shadow: none !important;
}
.blog-aside-cta .btn-primary:hover,
.blog-article-cta .btn-primary:hover,
.signup-modal-gallery .btn-primary:hover {
    background-color: var(--museum-gold, #c9a86a) !important;
    color: var(--museum-black, #000) !important;
    border-color: var(--museum-gold, #c9a86a) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Nav pill galerie → secondaire */
.nav-cta-gallery-pill {
    background-color: var(--museum-white, #fff) !important;
    color: var(--museum-black, #000) !important;
    border: 1px solid var(--museum-black, #000) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .06em;
}
.nav-cta-gallery-pill:hover {
    background-color: var(--museum-black, #000) !important;
    color: var(--museum-white, #fff) !important;
    transform: none !important;
    filter: none !important;
}