/**
 * LD Solutions - Buttons (.lds-btn--*)
 *
 * Source unique des variantes de boutons du theme.
 * Depend de tokens.css (variables --lds-*).
 *
 * Variantes :
 *   .lds-btn               base (taille, typographie, transition)
 *   .lds-btn--primary      CTA principal (gradient bleu)
 *   .lds-btn--cta          CTA navy fonce
 *   .lds-btn--inverse      outline blanc pour fond sombre
 *   .lds-btn--outline      outline sombre pour fond clair
 *   .lds-btn--outline-light outline navy clair (variant alternatif)
 *   .lds-btn--sm           compact (header/nav)
 *   .lds-btn--large        large (CTA fin de page)
 *
 * @package ldsolutions
 */

/* ============================================================
   BASE
   ============================================================ */

.lds-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 28px;
    border-radius: var(--lds-radius, 16px);
    font-family: var(--lds-font, Arial, -apple-system, BlinkMacSystemFont, sans-serif);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.3px;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    text-decoration: none;
    transition: box-shadow 0.35s ease, transform 0.2s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
    z-index: 1;
}

/* Empecher l'heritage des styles de liens */
a.lds-btn,
a.lds-btn:hover,
a.lds-btn:focus,
a.lds-btn:visited {
    text-decoration: none;
}

a.lds-btn--primary,
a.lds-btn--primary:hover,
a.lds-btn--primary:focus,
a.lds-btn--primary:visited {
    color: rgba(255, 255, 255, 0.95);
}

a.lds-btn--inverse,
a.lds-btn--inverse:visited,
a.lds-btn--inverse:hover,
a.lds-btn--inverse:focus {
    color: var(--lds-white, #ffffff);
}

a.lds-btn--cta,
a.lds-btn--cta:hover,
a.lds-btn--cta:focus,
a.lds-btn--cta:visited {
    color: var(--lds-white, #ffffff);
}

/* ============================================================
   PRIMARY - Filled gradient bleu
   ============================================================ */

.lds-btn--primary {
    background: linear-gradient(135deg, var(--lds-btn-primary-1, #0a3fd0) 0%, var(--lds-btn-primary-2, #1a6aff) 100%);
    color: rgba(255, 255, 255, 0.95);
    border: 2.5px solid rgba(100, 170, 255, 0.5);
    box-shadow: var(--lds-shadow-soft, 0 4px 12px rgba(18, 90, 248, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1));
}

.lds-btn--primary::before,
.lds-btn--primary::after,
.lds-btn--primary:hover::before {
    display: none;
}

.lds-btn--primary:hover,
.lds-btn--primary:focus {
    background: linear-gradient(135deg, var(--lds-btn-primary-hover-1, #0d45da) 0%, var(--lds-btn-primary-hover-2, #2575ff) 100%);
    border-color: rgba(130, 190, 255, 0.6);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: var(--lds-shadow-strong, 0 6px 20px rgba(18, 90, 248, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15));
    transform: translateY(-1px);
}

.lds-btn--primary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(18, 90, 248, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   INVERSE - Outline blanc pour fond sombre
   ============================================================ */

.lds-btn--inverse {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.09) 100%);
    color: var(--lds-white, #ffffff);
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.lds-btn--inverse::before,
.lds-btn--inverse:hover::before {
    display: none;
}

.lds-btn--inverse:hover,
.lds-btn--inverse:focus {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.15) 100%);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--lds-white, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.lds-btn--inverse:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   CTA - Navy fonce
   ============================================================ */

.lds-btn--cta {
    background: linear-gradient(135deg, #011540 0%, var(--lds-navy-light, #0A2A6E) 100%);
    color: rgba(255, 255, 255, 0.95);
    border: 2.5px solid rgba(100, 150, 255, 0.5);
    box-shadow: var(--lds-shadow-navy, 0 4px 12px rgba(2, 27, 80, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1));
}

.lds-btn--cta::before,
.lds-btn--cta::after,
.lds-btn--cta:hover::before {
    display: none;
}

.lds-btn--cta:hover,
.lds-btn--cta:focus {
    background: linear-gradient(135deg, var(--lds-navy, #021B50) 0%, #0d3580 100%);
    border-color: rgba(130, 170, 255, 0.6);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: var(--lds-shadow-navy-strong, 0 6px 20px rgba(2, 27, 80, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15));
    transform: translateY(-1px);
}

.lds-btn--cta:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(2, 27, 80, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   OUTLINE - Bordure sombre sur fond clair
   ============================================================ */

.lds-btn--outline {
    background: transparent;
    color: var(--lds-navy, #021B50);
    border: 2.5px solid rgba(2, 27, 80, 0.25);
    box-shadow: none;
}

.lds-btn--outline:hover,
.lds-btn--outline:focus {
    background: rgba(2, 27, 80, 0.04);
    border-color: rgba(2, 27, 80, 0.5);
    color: var(--lds-navy, #021B50);
}

.lds-btn--outline:active {
    transform: translateY(1px);
}

/* ============================================================
   OUTLINE LIGHT - Variation pale
   ============================================================ */

.lds-btn--outline-light {
    background: transparent;
    color: var(--lds-navy, #021B50);
    border: 2.5px solid rgba(2, 27, 80, 0.2);
    box-shadow: none;
}

.lds-btn--outline-light:hover,
.lds-btn--outline-light:focus {
    background: rgba(2, 27, 80, 0.05);
    border-color: rgba(2, 27, 80, 0.4);
    color: var(--lds-navy, #021B50);
}

.lds-btn--outline-light svg {
    stroke: var(--lds-navy, #021B50);
    margin-right: 8px;
}

/* ============================================================
   TAILLES
   ============================================================ */

.lds-btn--sm {
    height: 48px;
    padding: 0 26px;
    font-size: 0.9375rem;
    border-radius: var(--lds-radius-sm, 12px);
}

.lds-btn--sm::before {
    inset: -20px -28px;
    border-radius: 32px;
}

.lds-btn--sm::after {
    border-radius: 14px;
}

.lds-btn--large {
    height: 60px;
    padding: 0 32px;
    font-size: 1.0625rem;
}

/* ============================================================
   WORDPRESS BLOCK BUTTONS - heritent du style primary
   ============================================================ */

.wp-block-button__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 28px;
    border-radius: var(--lds-radius, 16px);
    font-family: var(--lds-font, Arial, -apple-system, BlinkMacSystemFont, sans-serif);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.3px;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    text-decoration: none;
    background: linear-gradient(135deg, var(--lds-btn-primary-1, #0a3fd0) 0%, var(--lds-btn-primary-2, #1a6aff) 100%);
    color: rgba(255, 255, 255, 0.95);
    border: 2.5px solid rgba(100, 170, 255, 0.5);
    box-shadow: var(--lds-shadow-soft, 0 4px 12px rgba(18, 90, 248, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1));
    transition: box-shadow 0.35s ease, transform 0.2s ease, border-color 0.3s ease, background 0.3s ease;
    z-index: 1;
}

.wp-block-button__link:hover {
    background: linear-gradient(135deg, var(--lds-btn-primary-hover-1, #0d45da) 0%, var(--lds-btn-primary-hover-2, #2575ff) 100%);
    border-color: rgba(130, 190, 255, 0.6);
    box-shadow: var(--lds-shadow-strong, 0 6px 20px rgba(18, 90, 248, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15));
    transform: translateY(-1px);
}

.is-style-outline .wp-block-button__link {
    background: linear-gradient(135deg, rgba(235, 235, 235, 0.04) 0%, rgba(235, 235, 235, 0.09) 100%);
    color: var(--lds-platinium, #EBEBEB);
    border: 2.5px solid rgba(235, 235, 235, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.is-style-outline .wp-block-button__link:hover {
    background: linear-gradient(135deg, rgba(235, 235, 235, 0.06) 0%, rgba(235, 235, 235, 0.14) 100%);
    border-color: rgba(235, 235, 235, 0.5);
    color: var(--lds-white, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}