/* =====================================================================
   CAS BUTTON — Bouton premium pour Elementor
   5 styles : gradient, glass, outline, ghost, solid
   Effets : shine, glow, lift, icon-slide, pulse
   ===================================================================== */

.cas-btn-wrap {
    line-height: 0; /* élimine espace inline-block parasite */
}

.cas-btn,
a.cas-btn {
    --cas-btn-bg-1: #d91415;
    --cas-btn-bg-2: #a30c0d;
    --cas-btn-border: #d91415;
    --cas-btn-border-width: 2px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s, border-color 0.3s;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    box-sizing: border-box;
    vertical-align: middle;
    white-space: nowrap;
}

.cas-btn,
.cas-btn *,
.cas-btn *::before,
.cas-btn *::after { box-sizing: border-box; }

/* Le wrapper interne pour z-index correct au-dessus du fond */
.cas-btn__inner {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: inherit;
    line-height: 1;
}

.cas-btn__text {
    line-height: 1.2;
}

.cas-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cas-btn__icon svg {
    width: 16px;
    height: 16px;
    display: block;
    color: inherit;
    fill: currentColor;
}
.cas-btn__icon i {
    font-size: 16px;
    color: inherit;
}

/* Le fond (calque séparé pour pouvoir animer indépendamment) */
.cas-btn__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    transition: opacity 0.3s, background 0.3s;
}

/* Effet shine (lumière qui traverse) */
.cas-btn__shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

/* ============================================================
   TAILLES
   ============================================================ */
.cas-btn-size-sm .cas-btn { padding: 8px 18px; font-size: 12px; }
.cas-btn-size-md .cas-btn { padding: 12px 28px; font-size: 14px; }
.cas-btn-size-lg .cas-btn { padding: 16px 36px; font-size: 15px; }

/* ============================================================
   STYLE 1 : GRADIENT (par défaut)
   ============================================================ */
.cas-btn-style-gradient .cas-btn {
    color: #ffffff;
    background: transparent;
    box-shadow: 0 6px 20px rgba(217, 20, 21, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.cas-btn-style-gradient .cas-btn__bg {
    background: linear-gradient(135deg, var(--cas-btn-bg-1), var(--cas-btn-bg-2));
}

/* ============================================================
   STYLE 2 : GLASS (verre dépoli)
   ============================================================ */
.cas-btn-style-glass .cas-btn {
    color: #ffffff;
    background: transparent;
    border: var(--cas-btn-border-width) solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.cas-btn-style-glass .cas-btn__bg {
    background: rgba(20, 8, 8, 0.55);
}
.cas-btn-style-glass .cas-btn:hover {
    border-color: var(--cas-btn-border);
}
.cas-btn-style-glass .cas-btn:hover .cas-btn__bg {
    background: rgba(217, 20, 21, 0.25);
}

/* ============================================================
   STYLE 3 : OUTLINE (contour, remplit au hover)
   ============================================================ */
.cas-btn-style-outline .cas-btn {
    color: var(--cas-btn-border);
    background: transparent;
    border: var(--cas-btn-border-width) solid var(--cas-btn-border);
    box-shadow: 0 0 0 0 rgba(217, 20, 21, 0);
}
.cas-btn-style-outline .cas-btn__bg {
    background: linear-gradient(135deg, var(--cas-btn-bg-1), var(--cas-btn-bg-2));
    opacity: 0;
}
.cas-btn-style-outline .cas-btn:hover {
    color: #ffffff !important;
}
.cas-btn-style-outline .cas-btn:hover .cas-btn__bg {
    opacity: 1;
}

/* ============================================================
   STYLE 4 : GHOST (transparent, hover subtil)
   ============================================================ */
.cas-btn-style-ghost .cas-btn {
    color: #ffffff;
    background: transparent;
    box-shadow: none;
}
.cas-btn-style-ghost .cas-btn__bg {
    background: transparent;
    transition: background 0.3s;
}
.cas-btn-style-ghost .cas-btn:hover .cas-btn__bg {
    background: rgba(217, 20, 21, 0.15);
}

/* ============================================================
   STYLE 5 : SOLID (rouge plein simple)
   ============================================================ */
.cas-btn-style-solid .cas-btn {
    color: #ffffff;
    background: transparent;
    box-shadow: 0 4px 14px rgba(217, 20, 21, 0.25);
}
.cas-btn-style-solid .cas-btn__bg {
    background: var(--cas-btn-bg-1);
}

/* ============================================================
   EFFET HOVER : SHINE (lumière qui traverse)
   ============================================================ */
.cas-btn-hover-shine-yes .cas-btn:hover .cas-btn__shine {
    left: 100%;
    opacity: 1;
}

/* ============================================================
   EFFET HOVER : GLOW (halo lumineux)
   ============================================================ */
.cas-btn-hover-glow-yes .cas-btn:hover {
    box-shadow: 0 12px 30px rgba(217, 20, 21, 0.5),
                0 0 40px rgba(217, 20, 21, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cas-btn-hover-glow-yes.cas-btn-style-glass .cas-btn:hover {
    box-shadow: 0 12px 30px rgba(217, 20, 21, 0.4),
                0 0 30px rgba(217, 20, 21, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cas-btn-hover-glow-yes.cas-btn-style-outline .cas-btn:hover,
.cas-btn-hover-glow-yes.cas-btn-style-ghost .cas-btn:hover {
    box-shadow: 0 8px 24px rgba(217, 20, 21, 0.4),
                0 0 24px rgba(217, 20, 21, 0.2);
}

/* ============================================================
   EFFET HOVER : LIFT (élévation)
   ============================================================ */
.cas-btn-hover-lift-yes .cas-btn:hover {
    transform: translateY(-3px);
}
.cas-btn-hover-lift-yes .cas-btn:active {
    transform: translateY(-1px);
}

/* ============================================================
   EFFET HOVER : ICON SLIDE (icône qui glisse)
   ============================================================ */
.cas-btn-hover-slide-yes .cas-btn:hover .cas-btn__icon--after {
    transform: translateX(4px);
}
.cas-btn-hover-slide-yes .cas-btn:hover .cas-btn__icon--before {
    transform: translateX(-4px);
}

/* ============================================================
   PULSE (animation permanente pour attirer l'œil)
   ============================================================ */
.cas-btn-pulse-yes .cas-btn {
    animation: casBtnPulse 2s ease-in-out infinite;
}
@keyframes casBtnPulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(217, 20, 21, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 6px 20px rgba(217, 20, 21, 0.3),
                    0 0 0 8px rgba(217, 20, 21, 0.15),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* ============================================================
   FOCUS (accessibilité)
   ============================================================ */
.cas-btn:focus-visible {
    outline: 3px solid rgba(217, 20, 21, 0.5);
    outline-offset: 3px;
}

/* ============================================================
   ACTIVE
   ============================================================ */
.cas-btn:active {
    filter: brightness(0.95);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
    .cas-btn--full {
        width: 100% !important;
    }
    .cas-btn-size-lg .cas-btn { padding: 14px 26px; font-size: 13px; }
}