/* ==========================================================
 * DBC · Bouton CTA
 * Variantes : solid / outline / ghost
 * Couleurs : orange / blue
 * Tailles : sm / md / lg
 * Effets : lift / shine / arrow / none
 * ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');

.dbc-btn-wrap {
    display: flex;
    --dbc-btn-orange-1: #f49826;
    --dbc-btn-orange-2: #e25312;
    --dbc-btn-blue-1: #0d4899;
    --dbc-btn-blue-2: #2f7cc0;
}
.dbc-btn-wrap--full { display: block; }

.dbc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
.dbc-btn--full { display: flex; width: 100%; }

/* ============ TAILLES ============ */
.dbc-btn--sm { padding: 8px 16px; font-size: 13px; border-radius: 10px; }
.dbc-btn--md { padding: 11px 24px; font-size: 14.5px; }
.dbc-btn--lg { padding: 14px 32px; font-size: 16px; border-radius: 14px; }

/* ============ ICÔNE ============ */
.dbc-btn__icon {
    display: inline-flex;
    align-items: center;
    font-size: 0.95em;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbc-btn__icon svg { width: 1em; height: 1em; fill: currentColor; }

/* ============ VARIANTE : SOLID (dégradé) ============ */
.dbc-btn--solid.dbc-btn--orange {
    background: linear-gradient(135deg, var(--dbc-btn-orange-1) 0%, var(--dbc-btn-orange-2) 100%);
    color: #fff;
    box-shadow: 0 14px 30px -10px var(--dbc-btn-orange-2);
}
.dbc-btn--solid.dbc-btn--blue {
    background: linear-gradient(135deg, var(--dbc-btn-blue-1) 0%, var(--dbc-btn-blue-2) 100%);
    color: #fff;
    box-shadow: 0 14px 30px -10px rgba(13, 72, 153, 0.55);
}
.dbc-btn--solid.dbc-btn--blueorange {
    background: linear-gradient(135deg, var(--dbc-btn-blue-1) 0%, var(--dbc-btn-blue-2) 45%, var(--dbc-btn-orange-1) 80%, var(--dbc-btn-orange-2) 100%);
    color: #fff;
    box-shadow: 0 14px 30px -10px rgba(13, 72, 153, 0.5);
}

/* ============ VARIANTE : OUTLINE (contour) ============ */
.dbc-btn--outline {
    background: transparent;
}
.dbc-btn--outline.dbc-btn--orange {
    color: var(--dbc-btn-orange-2);
    border-color: var(--dbc-btn-orange-1);
}
.dbc-btn--outline.dbc-btn--orange:hover {
    background: linear-gradient(135deg, var(--dbc-btn-orange-1) 0%, var(--dbc-btn-orange-2) 100%);
    color: #fff;
    border-color: transparent;
}
.dbc-btn--outline.dbc-btn--blue {
    color: var(--dbc-btn-blue-1);
    border-color: var(--dbc-btn-blue-1);
}
.dbc-btn--outline.dbc-btn--blue:hover {
    background: linear-gradient(135deg, var(--dbc-btn-blue-1) 0%, var(--dbc-btn-blue-2) 100%);
    color: #fff;
    border-color: transparent;
}

/* Outline bleu-orange : bordure dégradée */
.dbc-btn--outline.dbc-btn--blueorange {
    color: var(--dbc-btn-blue-1);
    border-color: transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--dbc-btn-blue-1) 0%, var(--dbc-btn-orange-2) 100%) border-box;
}
.dbc-btn--outline.dbc-btn--blueorange:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--dbc-btn-blue-1) 0%, var(--dbc-btn-blue-2) 45%, var(--dbc-btn-orange-1) 80%, var(--dbc-btn-orange-2) 100%);
    border-color: transparent;
}

/* ============ VARIANTE : GHOST (fantôme) ============ */
.dbc-btn--ghost {
    background: transparent;
    border-color: transparent;
}
.dbc-btn--ghost.dbc-btn--orange { color: var(--dbc-btn-orange-2); }
.dbc-btn--ghost.dbc-btn--orange:hover { background: rgba(244, 152, 38, 0.12); }
.dbc-btn--ghost.dbc-btn--blue { color: var(--dbc-btn-blue-1); }
.dbc-btn--ghost.dbc-btn--blue:hover { background: rgba(13, 72, 153, 0.10); }
.dbc-btn--ghost.dbc-btn--blueorange {
    color: var(--dbc-btn-blue-1);
    background:
        linear-gradient(135deg, var(--dbc-btn-blue-1), var(--dbc-btn-orange-2)) text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.dbc-btn--ghost.dbc-btn--blueorange:hover {
    background: rgba(13, 72, 153, 0.08);
    -webkit-text-fill-color: initial;
    background-clip: border-box;
    color: var(--dbc-btn-blue-1);
}

/* ============ EFFET : LIFT (soulèvement) ============ */
.dbc-btn--fx-lift:hover { transform: translateY(-3px); }
.dbc-btn--solid.dbc-btn--orange.dbc-btn--fx-lift:hover { box-shadow: 0 22px 42px -12px var(--dbc-btn-orange-2); }
.dbc-btn--solid.dbc-btn--blue.dbc-btn--fx-lift:hover { box-shadow: 0 22px 42px -12px rgba(13, 72, 153, 0.6); }
.dbc-btn--solid.dbc-btn--blueorange.dbc-btn--fx-lift:hover { box-shadow: 0 22px 42px -12px rgba(226, 83, 18, 0.5); }

/* ============ EFFET : ARROW (flèche glissante) ============ */
.dbc-btn--fx-arrow:hover .dbc-btn__icon--after { transform: translateX(5px); }
.dbc-btn--fx-arrow:hover .dbc-btn__icon--before { transform: translateX(-5px); }

/* ============ EFFET : SHINE (brillance) ============ */
.dbc-btn__shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}
.dbc-btn--fx-shine:hover .dbc-btn__shine {
    animation: dbcBtnShine 0.85s ease;
}
@keyframes dbcBtnShine {
    0% { left: -120%; }
    100% { left: 130%; }
}

/* ============ ACCESSIBILITÉ ============ */
.dbc-btn:focus-visible {
    outline: 3px solid rgba(47, 124, 192, 0.5);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .dbc-btn, .dbc-btn__icon { transition: none !important; }
    .dbc-btn--fx-lift:hover { transform: none; }
    .dbc-btn__shine { display: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 520px) {
    .dbc-btn--lg { padding: 16px 32px; font-size: 16px; }
    .dbc-btn--md { padding: 14px 26px; font-size: 15px; }
}