/**
 * Leadgen — Widget Image Hero Card CSS
 * Image inclinée + badge flottant + décorations cercles flous.
 */

/* ── Wrapper externe ──────────────────────────────── */
.lghc-outer {
    position: relative;
    display: block;
}

/* ── Décorations cercles flous ────────────────────── */
.lghc-deco-1,
.lghc-deco-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

.lghc-deco-1 {
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: rgba(0, 194, 203, 0.15);
}

.lghc-deco-2 {
    bottom: -60px;
    left: -60px;
    width: 200px;
    height: 200px;
    background: rgba(15, 37, 64, 0.08);
}

/* ── Carte principale ─────────────────────────────── */
.lghc-card {
    position: relative;
    z-index: 1;
    background: #ffffff;
    padding: 16px;
    border-radius: 24px;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 10px 20px -5px rgba(0, 0, 0, 0.10);
    transform: rotate(2deg);
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Reset rotation au survol */
.lghc-hover-reset .lghc-card:hover {
    transform: rotate(0deg) !important;
}

/* ── Image ────────────────────────────────────────── */
.lghc-image {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    line-height: 0;
    display: block;
}

.lghc-image img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center top; /* ← centre sur le visage */
    border-radius: 16px;
    max-width: none;              /* override WordPress max-width:100% */
}

/* ── Badge flottant ───────────────────────────────── */
.lghc-badge {
    position: absolute;
    z-index: 10;
    background: #0A5C55;
    color: #ffffff;
    padding: 20px 24px;
    border-radius: 16px;
    max-width: 240px;
    box-shadow:
        0 20px 40px -8px rgba(0, 0, 0, 0.3),
        0 8px 16px -4px rgba(0, 0, 0, 0.15);

    /* Animation d'entrée subtile */
    animation: lghc-badge-in 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Badge en mode overlay : reste dans les coins de l'image */
.lghc-badge--overlay {
    position: absolute;
    z-index: 5;
    /* overflow:hidden sur .lghc-image le rogne si trop proche du bord */
}

@keyframes lghc-badge-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* Sans overflow hidden quand le badge dépasse légèrement */
.lghc-has-overlay .lghc-image {
    overflow: visible;
}
/* Désactiver animation si reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .lghc-badge {
        animation: none;
    }
    .lghc-card {
        transition: none;
    }
}

/* ── Contenu du badge ─────────────────────────────── */
.lghc-badge-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.lghc-badge-text {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
    /* Moins de rotation sur tablette */
    .lghc-card {
        transform: rotate(1deg);
    }
}

@media (max-width: 768px) {
    /* Pas de rotation sur mobile */
    .lghc-card {
        transform: rotate(0deg) !important;
        box-shadow:
            0 10px 30px -8px rgba(0, 0, 0, 0.2),
            0 4px 10px -3px rgba(0, 0, 0, 0.08);
    }

    .lghc-image img {
        height: 320px;
    }

    /* Réduire les décos */
    .lghc-deco-1 { width: 160px; height: 160px; }
    .lghc-deco-2 { width: 120px; height: 120px; }

    .lghc-badge {
        padding: 14px 18px;
        max-width: 200px;
    }

    .lghc-badge-value { font-size: 22px; }
    .lghc-badge-text  { font-size: 12px; }
}