/* ============================================================
   PRODUCTS — Effets premium partagés pour pages produit
   Cible: .prod-hero (SoftyPaie, NeuroPaye, NeuroCompta,
   NeuroCaisse, Caravane, FacturationInterim…)
   Se superpose aux styles inline sans les redéfinir.
   ============================================================ */

/* ---------- Hero container polish ---------- */
.prod-hero {
    isolation: isolate;
}

/* Grille éthérée en fond */
.prod-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(34, 197, 177, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 177, .06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- Orbs floutés ---------- */
.p-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.p-orb--1 {
    width: 460px; height: 460px;
    top: -140px; left: -120px;
    background: radial-gradient(circle, #22c5b1 0%, transparent 70%);
    animation: p-orb-a 22s ease-in-out infinite;
}

.p-orb--2 {
    width: 380px; height: 380px;
    bottom: -110px; right: -80px;
    background: radial-gradient(circle, #1a9c8c 0%, transparent 70%);
    animation: p-orb-b 26s ease-in-out infinite;
}

.p-orb--3 {
    width: 300px; height: 300px;
    top: 30%; right: 25%;
    background: radial-gradient(circle, #154570 0%, transparent 70%);
    opacity: .35;
    animation: p-orb-c 30s ease-in-out infinite;
}

@keyframes p-orb-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(60px, 40px) scale(1.12); }
}
@keyframes p-orb-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-70px, -30px) scale(1.08); }
}
@keyframes p-orb-c {
    0%, 100% { transform: translate(0, 0); opacity: .35; }
    50%      { transform: translate(-40px, 30px); opacity: .55; }
}

/* ---------- Canvas particules ---------- */
.p-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.p-particles canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Icônes flottantes discrètes ---------- */
.p-float-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.p-float-icons i {
    position: absolute;
    color: rgba(34, 197, 177, .18);
    font-size: 1.4rem;
    animation: p-float-drift 14s ease-in-out infinite;
}
.p-float-icons i:nth-child(1) { top: 12%; left: 8%;  font-size: 1.2rem; animation-delay: 0s;   }
.p-float-icons i:nth-child(2) { top: 22%; left: 84%; font-size: 1.6rem; animation-delay: 2s;   }
.p-float-icons i:nth-child(3) { top: 65%; left: 12%; font-size: 1.3rem; animation-delay: 4s;   }
.p-float-icons i:nth-child(4) { top: 78%; left: 78%; font-size: 1.5rem; animation-delay: 6s;   }
.p-float-icons i:nth-child(5) { top: 44%; left: 46%; font-size: 1.1rem; animation-delay: 8s;   }
.p-float-icons i:nth-child(6) { top: 88%; left: 42%; font-size: 1.3rem; animation-delay: 10s;  }

@keyframes p-float-drift {
    0%, 100% { transform: translate(0, 0) rotate(0);  opacity: .18; }
    25%      { transform: translate(14px, -18px) rotate(6deg);  opacity: .32; }
    50%      { transform: translate(-8px, -30px) rotate(-4deg); opacity: .42; }
    75%      { transform: translate(-16px, -12px) rotate(3deg); opacity: .26; }
}

/* ---------- Badge shine + live-dot ---------- */
.prod-hero .prod-badge {
    position: relative;
    overflow: hidden;
}
.prod-hero .prod-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: p-badge-shine 4s ease-in-out infinite;
}

@keyframes p-badge-shine {
    0%   { left: -100%; }
    60%  { left: 100%; }
    100% { left: 100%; }
}

.p-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c5b1;
    box-shadow: 0 0 0 0 rgba(34, 197, 177, .65);
    animation: p-live-pulse 1.9s ease-out infinite;
    margin-right: 4px;
    flex-shrink: 0;
}

@keyframes p-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 177, .65); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 177, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 177, 0); }
}

/* ---------- Titre accent brillant + typewriter cursor ---------- */
.prod-hero .prod-title .accent {
    background: linear-gradient(120deg,
        #22c5b1 0%,
        #a7f3e6 30%,
        #22c5b1 55%,
        #ffffff 80%,
        #22c5b1 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: p-title-shine 6s linear infinite;
    display: inline-block;
}

@keyframes p-title-shine {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.prod-hero [data-typewriter]::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    vertical-align: -0.1em;
    margin-left: 3px;
    background: #22c5b1;
    box-shadow: 0 0 10px rgba(34, 197, 177, .6);
    animation: p-cursor-blink 1s steps(2) infinite;
    border-radius: 1px;
}

@keyframes p-cursor-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ---------- Slogan avec rotator ---------- */
.prod-slogan {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(34, 197, 177, .08);
    border: 1px solid rgba(34, 197, 177, .22);
    border-radius: 50px;
    color: rgba(255, 255, 255, .92);
    font-size: .92rem;
    font-weight: 500;
    margin: 0 0 1.4rem;
    max-width: 100%;
}
.prod-slogan i { color: #22c5b1; }
.prod-slogan .rot {
    color: #22c5b1;
    font-weight: 700;
    letter-spacing: .01em;
}

/* ---------- Trust chips sous les CTA ---------- */
.p-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.6rem;
}
.p-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .85);
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 50px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.p-chip i {
    color: #22c5b1;
    font-size: .75rem;
}
.p-chip:hover {
    transform: translateY(-2px);
    background: rgba(34, 197, 177, .12);
    border-color: rgba(34, 197, 177, .35);
    color: #fff;
}

/* ---------- Hero image cadre premium ---------- */
.prod-hero-img {
    position: relative;
    z-index: 1;
}
.prod-hero-img-wrap {
    position: relative;
    z-index: 1;
}
.prod-hero-img-wrap::before {
    content: '';
    position: absolute;
    inset: -12px;
    background: linear-gradient(135deg, rgba(34, 197, 177, .4), rgba(21, 69, 112, .35));
    border-radius: 22px;
    filter: blur(20px);
    opacity: .55;
    z-index: -1;
    animation: p-img-glow 6s ease-in-out infinite alternate;
}
@keyframes p-img-glow {
    0%   { opacity: .45; }
    100% { opacity: .75; }
}

/* ---------- Boutons hero: shine sweep ---------- */
.prod-hero .btn-teal,
.prod-hero .btn-teal-outline {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.prod-hero .btn-teal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
    transition: left .55s ease;
    pointer-events: none;
}
.prod-hero .btn-teal:hover::before { left: 130%; }
.prod-hero .btn-teal i { transition: transform .35s ease; }
.prod-hero .btn-teal:hover i { transform: translateX(3px) scale(1.15); }

/* ---------- CTA section aurora ---------- */
.prod-cta {
    position: relative;
    overflow: hidden;
}
.prod-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(34, 197, 177, .28) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(21, 69, 112, .35) 0%, transparent 55%);
    animation: p-aurora 12s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes p-aurora {
    0%   { transform: translate(0, 0)     scale(1); }
    100% { transform: translate(30px, -20px) scale(1.08); }
}
.prod-cta > .container { position: relative; z-index: 1; }

/* ---------- Feature/price/related: hover shine boost ---------- */
.feat-item {
    position: relative;
    overflow: hidden;
}
.feat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 177, .1), transparent);
    transition: left .6s ease;
    pointer-events: none;
}
.feat-item:hover::before { left: 130%; }

/* ---------- Prefers reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .p-orb,
    .p-float-icons i,
    .prod-hero .prod-badge::before,
    .p-live-dot,
    .prod-hero .prod-title .accent,
    .prod-hero [data-typewriter]::after,
    .prod-hero-img-wrap::before,
    .prod-cta::before {
        animation: none !important;
    }
}