/**
 * Styles pour les sections de la landing page
 * Protège les sections contre les conflits avec les styles WordPress
 */

/* Isolation complète des sections de landing */
.pixelyz-landing-section {
    /* Réinitialisation pour éviter les conflits WordPress */
    box-sizing: border-box !important;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.6 !important;
    color: #E7EEF7 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    isolation: isolate !important; /* Crée un nouveau contexte de stacking */
    /* S'assurer que les styles inline dans les balises <style> sont prioritaires */
    /* Les styles dans les balises <style> à l'intérieur auront la spécificité maximale */
}

/* IMPORTANT: Les styles inline dans les balises <style> ont la priorité naturelle */
/* Mais on doit s'assurer qu'aucun style WordPress ne les surcharge avec !important */
/* Les styles dans #pixelyz-hero, #pixelyz-why, etc. doivent être respectés */

/* Protection des styles inline des sections - force le respect des styles inline */
.pixelyz-landing-section *,
.pixelyz-landing-section *::before,
.pixelyz-landing-section *::after {
    box-sizing: border-box !important;
}

/* S'assurer que les styles inline sont appliqués */
.pixelyz-landing-section style {
    display: block !important;
}

/* Protection maximale - les styles inline doivent être prioritaires */
.pixelyz-landing-section [style] {
    /* Les styles inline ont déjà la priorité maximale en CSS */
}

/* Réinitialisation des styles WordPress qui peuvent interférer */
.entry-content .pixelyz-landing-section,
.page-content .pixelyz-landing-section,
.site-main .pixelyz-landing-section {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Protection contre les styles WordPress sur les éléments enfants */
.pixelyz-landing-section h1,
.pixelyz-landing-section h2,
.pixelyz-landing-section h3,
.pixelyz-landing-section h4,
.pixelyz-landing-section h5,
.pixelyz-landing-section h6 {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    line-height: inherit;
}

.pixelyz-landing-section p {
    margin: 0;
    padding: 0;
}

.pixelyz-landing-section a {
    text-decoration: none;
}

.pixelyz-landing-section ul,
.pixelyz-landing-section ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* S'assurer que les sections prennent toute la largeur */
body .entry-content .pixelyz-landing-section,
body .page-content .pixelyz-landing-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Conteneur WordPress - ne pas limiter la largeur */
body .entry-content,
body .page-content {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Protection contre les styles de blocs WordPress */
.wp-block-group .pixelyz-landing-section,
.wp-block-columns .pixelyz-landing-section,
.wp-block .pixelyz-landing-section,
.wp-block-group__inner-wrapper .pixelyz-landing-section {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* NE PAS forcer transform/filter/opacity - laisser les styles inline gérer */
/* Les styles inline dans les balises <style> peuvent avoir des animations/transforms */
/* On ne force rien ici pour éviter les conflits */

/* Ne pas forcer inherit - laisser les styles inline gérer les tailles */
/* Les styles inline ont déjà la priorité maximale, pas besoin de override */

/* Protection des images et médias */
.pixelyz-landing-section img {
    max-width: none !important;
    height: auto !important;
}

/* Image dans la section Hero - remplacement du blob */
#pixelyz-hero .card-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

/* Correction pour le tag "Le plus populaire" dans la section tarifs */
#pixelyz-pricing .popular.card {
    position: relative !important;
    overflow: visible !important;
}

#pixelyz-pricing .popular .flag {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) translateY(-50%) !important;
    z-index: 30 !important; /* Au-dessus du fond glassmorphism (z-index: 0) et du contour hover (z-index: 1) */
}

/* Protection de la section testimonials */
.testimonials {
    position: relative;
    background: none !important; /* Enlever la couleur de fond */
}

.pixelyz-landing-section.testimonials {
    /* Ne pas créer de section dans une section */
    /* Le HTML contient déjà la balise <section class="testimonials"> */
}

/* Ajustements d'espacement pour la section testimonials */
/* Espacement entre badge, titre et description */
.testimonials-header .badge {
    margin-bottom: 20px !important; /* Espace entre badge et titre */
    line-height: normal !important; /* Identique au badge FAQ */
}

.testimonials-header .title {
    margin-bottom: 16px !important; /* Espace entre titre et description */
}

/* Réduire de moitié l'espace entre le titre et les cartes */
.testimonials-header {
    padding-bottom: 20px !important; /* Réduire de moitié (était 40px) */
    padding-top: 20px !important; /* Maintenir le padding en haut */
}

/* Ajuster le padding de la section pour équilibrer l'espace en haut et en bas */
/* L'espace entre le début de section et le badge doit être égal à l'espace entre les cartes et la fin de section */
/* Espace en haut: section padding-top + container padding-top + header padding-top */
/* Espace en bas: container padding-bottom + section padding-bottom */
/* On équilibre: 3rem (section-top) + 1rem (container-top) + 20px (header-top) = 1rem (container-bottom) + 3rem (section-bottom) */
.testimonials {
    padding-top: 3rem !important; /* Ajuster pour équilibrer */
    padding-bottom: 3rem !important; /* Ajuster pour équilibrer */
}

/* Ajuster le padding du container pour équilibrer visuellement */
/* Total en haut: 3rem (section) + 1rem (container) + 20px (header) ≈ 4rem + 20px */
/* Total en bas: 1rem (container) + 3rem (section) = 4rem */
/* On équilibre en ajustant pour que les deux totaux soient égaux */
.testimonials-container {
    padding-top: 0.375rem !important; /* Réduit de 10px (1rem = 16px, donc 16px - 10px = 6px = 0.375rem) */
    padding-bottom: 1rem !important; /* Équilibrer avec l'espace en haut */
}


/* ==========================================================================
   ESPACEMENT COHÉRENT POUR TOUTES LES SECTIONS (SAUF HERO)
   Pattern: début section → badge → titre → description → contenu → fin section
   ========================================================================== */

/* Padding équilibré pour toutes les sections (sauf hero) */
#pixelyz-why,
#pixelyz-howto,
#pixelyz-styles,
#pixelyz-usecases,
#pixelyz-pricing,
#pixelyz-faq,
#pixelyz-cta {
    padding-top: 3rem !important; /* Égal à padding-bottom */
    padding-bottom: 3rem !important; /* Égal à padding-top */
}

/* === CTA section pixelyz-cta - Style identique au hero affiliation === */
#pixelyz-cta .cta {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 22px !important;
    border-radius: 9999px !important;
    background: linear-gradient(90deg, #68aeff, #1e6cf3) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 18px 60px -20px rgba(56, 189, 248, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transform: none !important;
}

#pixelyz-cta .cta::before {
    content: "" !important;
    position: absolute !important;
    top: -60% !important;
    left: -40% !important;
    width: 60% !important;
    height: 220% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.20), transparent) !important;
    transform: rotate(18deg) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease, transform 0.35s ease !important;
    z-index: 0 !important;
}

#pixelyz-cta .cta > * {
    position: relative !important;
    z-index: 1 !important;
}

#pixelyz-cta .cta:hover {
    background: linear-gradient(90deg, #7ab8ff, #2d7ef5) !important;
    box-shadow: 0 20px 70px -15px rgba(56, 189, 248, 0.95) !important;
    transform: none !important;
}

#pixelyz-cta .cta:hover::before {
    opacity: 1 !important;
    transform: translateX(160%) rotate(18deg) !important;
}

#pixelyz-cta .cta svg {
    transition: transform 0.3s ease !important;
    transform: rotate(-45deg) !important;
    flex-shrink: 0 !important;
}

#pixelyz-cta .cta:hover svg {
    transform: rotate(0deg) translateX(4px) !important;
}

/* Espacement entre badge/kicker et titre */
/* Calqué sur la section FAQ pour uniformiser */
#pixelyz-hero .badge,
#pixelyz-hero .kicker,
#pixelyz-why .kicker,
#pixelyz-why .badge,
#pixelyz-howto .kicker,
#pixelyz-howto .badge,
#pixelyz-howto .pixelyz-kicker,
#pixelyz-styles .kicker,
#pixelyz-styles .badge,
#pixelyz-usecases .kicker,
#pixelyz-usecases .badge,
#pixelyz-cta .kicker,
#pixelyz-cta .badge {
    margin-bottom: 10px !important; /* Identique à la section FAQ */
    line-height: normal !important; /* Identique au badge FAQ */
}

/* Ajuster l'espace autour des CTA dans la section Hero */
#pixelyz-hero .cta-row {
    margin-bottom: 20px !important; /* Espace ajusté à 20px */
    margin-top: 3rem !important; /* Augmenter l'espace au-dessus pour correspondre au margin-bottom de .lead */
}

/* === CTA hero page d'accueil - Style identique au hero affiliation === */
#pixelyz-hero .hero-cta,
#pixelyz-hero .hero-cta.cta-primary,
#pixelyz-hero .cta-primary.hero-cta {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 22px !important;
    border-radius: 9999px !important;
    background: linear-gradient(90deg, #68aeff, #1e6cf3) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 18px 60px -20px rgba(56, 189, 248, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    text-shadow: none !important;
}

#pixelyz-hero .hero-cta::before {
    content: "" !important;
    position: absolute !important;
    top: -60% !important;
    left: -40% !important;
    width: 60% !important;
    height: 220% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.20), transparent) !important;
    transform: rotate(18deg) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease, transform 0.35s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
    will-change: transform, opacity !important;
}

#pixelyz-hero .hero-cta > * {
    position: relative !important;
    z-index: 1 !important;
}

#pixelyz-hero .hero-cta:hover,
#pixelyz-hero .hero-cta.cta-primary:hover,
#pixelyz-hero .cta-primary.hero-cta:hover {
    background: linear-gradient(90deg, #7ab8ff, #2d7ef5) !important;
    box-shadow: 0 20px 70px -15px rgba(56, 189, 248, 0.95) !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
}

#pixelyz-hero .hero-cta:hover::before {
    opacity: 1 !important;
    transform: translateX(160%) rotate(18deg) !important;
}

#pixelyz-hero .hero-cta svg {
    transition: transform 0.3s ease !important;
    transform: rotate(-45deg) !important;
    flex-shrink: 0 !important;
}

#pixelyz-hero .hero-cta:hover svg {
    transform: rotate(0deg) translateX(4px) !important;
}

#pixelyz-hero .lead {
    margin-bottom: 3rem !important; /* Espace entre la description et le CTA */
}

/* Sections avec badge spécifique */
#pixelyz-pricing .badge,
#pixelyz-cta .kicker,
#pixelyz-cta .badge {
    margin-bottom: 20px !important; /* Espace entre badge et titre */
    line-height: normal !important; /* Identique au badge FAQ */
}

/* Section FAQ - badge avec le même espacement que les autres sections */
#pixelyz-faq .badge,
#pixelyz-faq h2.badge {
    margin-bottom: 10px !important; /* Identique aux autres sections (hero, why, howto, styles, usecases, cta) */
}

/* Ajouter de l'espace entre le toggle et les cartes dans la section Plans & Tarifs */
#pixelyz-pricing .toggle {
    margin-bottom: 48px !important; /* Augmenter l'espace (était 40px) */
}

/* Appliquer le même effet de contour au survol que les cartes de témoignages */
/* Utiliser ::after comme pour les cartes de témoignages */
/* Important : le CSS inline désactive ::after avec display:none, on doit le réactiver */
#pixelyz-pricing .card::after {
    content: '' !important;
    display: block !important; /* Réactiver ::after qui est désactivé dans landing-sections-inline.css */
    position: absolute !important;
    inset: -1px !important;
    border-radius: 18px !important;
    padding: 1px !important;
    opacity: 0 !important;
    transition: opacity .35s ease !important;
    background: linear-gradient(135deg, rgba(123,108,255,.35), rgba(93,214,255,.35)) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#pixelyz-pricing .card:hover::after {
    opacity: .9 !important;
}

/* Appliquer exactement les mêmes styles hover que les cartes de témoignages */
/* Les cartes de témoignages gardent la bordure bleue ET ajoutent le contour en dégradé */
#pixelyz-pricing .card:hover,
#pixelyz-pricing .popular.card:hover {
    transform: translateY(-6px) !important; /* Même translation que les témoignages */
    box-shadow: 0 12px 28px rgba(0,0,0,.28) !important; /* Même ombre */
    border-color: rgba(59, 130, 246, 0.6) !important; /* Même couleur de bordure */
}

/* Effet glassmorphism sur les cartes tarifs - similaire aux cartes "Comment ça marche" */
/* Base commune pour toutes les cartes tarifs */
body .entry-content #pixelyz-pricing .card,
body .page-content #pixelyz-pricing .card,
body #pixelyz-pricing .card,
#pixelyz-pricing .card {
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-repeat: repeat !important;
}

/* Carte 1 - Glow en haut gauche */
body .entry-content #pixelyz-pricing .card:nth-child(1)::before,
body .page-content #pixelyz-pricing .card:nth-child(1)::before,
body #pixelyz-pricing .card:nth-child(1)::before,
#pixelyz-pricing .card:nth-child(1)::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette marquée en haut - assombrissement du haut de la carte */
        radial-gradient(
            ellipse 200% 100% at top center,
            rgba(11, 16, 32, 0.85) 0%,
            rgba(11, 16, 32, 0.65) 30%,
            rgba(11, 16, 32, 0.4) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en haut gauche */
        radial-gradient(
            ellipse 200% 150% at top left,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Carte 2 (popular) - Glow en haut droite */
body .entry-content #pixelyz-pricing .card:nth-child(2)::before,
body .page-content #pixelyz-pricing .card:nth-child(2)::before,
body #pixelyz-pricing .card:nth-child(2)::before,
#pixelyz-pricing .card:nth-child(2)::before,
body .entry-content #pixelyz-pricing .popular.card::before,
body .page-content #pixelyz-pricing .popular.card::before,
body #pixelyz-pricing .popular.card::before,
#pixelyz-pricing .popular.card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette marquée en bas - assombrissement du bas de la carte */
        radial-gradient(
            ellipse 200% 100% at bottom center,
            rgba(11, 16, 32, 0.85) 0%,
            rgba(11, 16, 32, 0.65) 30%,
            rgba(11, 16, 32, 0.4) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en haut droite */
        radial-gradient(
            ellipse 200% 150% at top right,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Carte 3 - Glow en bas gauche */
body .entry-content #pixelyz-pricing .card:nth-child(3)::before,
body .page-content #pixelyz-pricing .card:nth-child(3)::before,
body #pixelyz-pricing .card:nth-child(3)::before,
#pixelyz-pricing .card:nth-child(3)::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette marquée sur les côtés - assombrissement gauche et droite */
        radial-gradient(
            ellipse 100% 200% at left center,
            rgba(11, 16, 32, 0.75) 0%,
            rgba(11, 16, 32, 0.55) 30%,
            rgba(11, 16, 32, 0.3) 50%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 100% 200% at right center,
            rgba(11, 16, 32, 0.75) 0%,
            rgba(11, 16, 32, 0.55) 30%,
            rgba(11, 16, 32, 0.3) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en bas gauche */
        radial-gradient(
            ellipse 200% 150% at bottom left,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* S'assurer que le contenu des cartes tarifs est au-dessus du fond glassmorphism */
/* Exclure le badge "populaire" qui a son propre z-index */
body .entry-content #pixelyz-pricing .card > *:not(.flag),
body .page-content #pixelyz-pricing .card > *:not(.flag),
body #pixelyz-pricing .card > *:not(.flag),
#pixelyz-pricing .card > *:not(.flag) {
    position: relative !important;
    z-index: 10 !important;
}

/* Appliquer le même effet de contour au survol pour les cartes "Comment ça marche" */
#pixelyz-howto .pixelyz-card::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: -1px !important;
    border-radius: 18px !important;
    padding: 1px !important;
    opacity: 0 !important;
    transition: opacity .35s ease !important;
    background: linear-gradient(135deg, rgba(123,108,255,.35), rgba(93,214,255,.35)) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#pixelyz-howto .pixelyz-card:hover::after {
    opacity: .9 !important;
}

/* Appliquer exactement les mêmes styles hover que les cartes de témoignages */
#pixelyz-howto .pixelyz-card:hover {
    transform: translateY(-6px) !important; /* Même translation que les témoignages */
    box-shadow: 0 12px 28px rgba(0,0,0,.28) !important; /* Même ombre */
    border-color: rgba(59, 130, 246, 0.6) !important; /* Même couleur de bordure */
}

/* Titres des cartes "Comment ça marche" - Au-dessus du fond premium */
body .entry-content #pixelyz-howto .pixelyz-card h3,
body .page-content #pixelyz-howto .pixelyz-card h3,
body #pixelyz-howto .pixelyz-card h3,
#pixelyz-howto .pixelyz-card h3 {
    font-size: 18px !important;
    margin: 0.75rem 0 18px !important;
    color: #e7eef7 !important;
    text-align: center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Ligne de séparation entre pictogramme et image - Au-dessus du fond premium */
body .entry-content #pixelyz-howto .pixelyz-card .pixelyz-sep,
body .page-content #pixelyz-howto .pixelyz-card .pixelyz-sep,
body #pixelyz-howto .pixelyz-card .pixelyz-sep,
#pixelyz-howto .pixelyz-card .pixelyz-sep {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(188, 211, 230, 0.4), transparent) !important;
    margin: 14px 0 !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 1px !important;
    box-sizing: border-box !important;
}

/* Badge numéroté - Position absolue en haut de la carte */
body .entry-content #pixelyz-howto .pixelyz-card .pixelyz-badge,
body .page-content #pixelyz-howto .pixelyz-card .pixelyz-badge,
body #pixelyz-howto .pixelyz-card .pixelyz-badge,
#pixelyz-howto .pixelyz-card .pixelyz-badge {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translate(-50%, -50%) !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    font: 700 16px/1 Inter, system-ui, sans-serif !important;
    color: #e7eef7 !important;
    background: linear-gradient(135deg, #1e6cf3, #68aeff) !important;
    box-shadow: 0 0 18px rgba(30, 108, 243, 0.55), 0 0 36px rgba(104, 174, 255, 0.35) !important;
    pointer-events: none !important;
    z-index: 20 !important;
}

/* S'assurer que les autres éléments de contenu sont au-dessus du fond premium (sauf le badge qui est déjà positionné) */
body .entry-content #pixelyz-howto .pixelyz-card .pixelyz-icon,
body .page-content #pixelyz-howto .pixelyz-card .pixelyz-icon,
body #pixelyz-howto .pixelyz-card .pixelyz-icon,
#pixelyz-howto .pixelyz-card .pixelyz-icon,
body .entry-content #pixelyz-howto .pixelyz-card h3,
body .page-content #pixelyz-howto .pixelyz-card h3,
body #pixelyz-howto .pixelyz-card h3,
#pixelyz-howto .pixelyz-card h3,
body .entry-content #pixelyz-howto .pixelyz-card .pixelyz-sep,
body .page-content #pixelyz-howto .pixelyz-card .pixelyz-sep,
body #pixelyz-howto .pixelyz-card .pixelyz-sep,
#pixelyz-howto .pixelyz-card .pixelyz-sep,
body .entry-content #pixelyz-howto .pixelyz-card .pixelyz-step-image,
body .page-content #pixelyz-howto .pixelyz-card .pixelyz-step-image,
body #pixelyz-howto .pixelyz-card .pixelyz-step-image,
#pixelyz-howto .pixelyz-card .pixelyz-step-image {
    position: relative !important;
    z-index: 10 !important;
}

/* Effet premium sur les cartes "Comment ça marche" - Opacité réduite */
/* Carte 01 - Glow en haut gauche, vignette en haut */
body .entry-content #pixelyz-howto .howto-step-01,
body .page-content #pixelyz-howto .howto-step-01,
body #pixelyz-howto .howto-step-01,
#pixelyz-howto .howto-step-01 {
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-repeat: repeat !important;
}

body .entry-content #pixelyz-howto .howto-step-01::before,
body .page-content #pixelyz-howto .howto-step-01::before,
body #pixelyz-howto .howto-step-01::before,
#pixelyz-howto .howto-step-01::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette marquée en haut - assombrissement du haut de la carte (contraste augmenté) */
        radial-gradient(
            ellipse 200% 100% at top center,
            rgba(11, 16, 32, 0.85) 0%,
            rgba(11, 16, 32, 0.65) 30%,
            rgba(11, 16, 32, 0.4) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en haut gauche (opacité réduite) */
        radial-gradient(
            ellipse 200% 150% at top left,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale (opacité réduite) */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger (opacité réduite) */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale (opacité réduite) */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale (opacité réduite) */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Carte 02 - Glow en haut droite, vignette en bas */
body .entry-content #pixelyz-howto .howto-step-02,
body .page-content #pixelyz-howto .howto-step-02,
body #pixelyz-howto .howto-step-02,
#pixelyz-howto .howto-step-02 {
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-repeat: repeat !important;
}

body .entry-content #pixelyz-howto .howto-step-02::before,
body .page-content #pixelyz-howto .howto-step-02::before,
body #pixelyz-howto .howto-step-02::before,
#pixelyz-howto .howto-step-02::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette marquée en bas - assombrissement du bas de la carte (contraste augmenté) */
        radial-gradient(
            ellipse 200% 100% at bottom center,
            rgba(11, 16, 32, 0.85) 0%,
            rgba(11, 16, 32, 0.65) 30%,
            rgba(11, 16, 32, 0.4) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en haut droite (opacité réduite) */
        radial-gradient(
            ellipse 200% 150% at top right,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale (opacité réduite) */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger (opacité réduite) */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale (opacité réduite) */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale (opacité réduite) */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Carte 03 - Glow en bas gauche, vignette sur les côtés */
body .entry-content #pixelyz-howto .howto-step-03,
body .page-content #pixelyz-howto .howto-step-03,
body #pixelyz-howto .howto-step-03,
#pixelyz-howto .howto-step-03 {
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-repeat: repeat !important;
}

body .entry-content #pixelyz-howto .howto-step-03::before,
body .page-content #pixelyz-howto .howto-step-03::before,
body #pixelyz-howto .howto-step-03::before,
#pixelyz-howto .howto-step-03::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette marquée sur les côtés - assombrissement gauche et droite (contraste augmenté) */
        radial-gradient(
            ellipse 100% 200% at left center,
            rgba(11, 16, 32, 0.75) 0%,
            rgba(11, 16, 32, 0.55) 30%,
            rgba(11, 16, 32, 0.3) 50%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 100% 200% at right center,
            rgba(11, 16, 32, 0.75) 0%,
            rgba(11, 16, 32, 0.55) 30%,
            rgba(11, 16, 32, 0.3) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en bas gauche (opacité réduite) */
        radial-gradient(
            ellipse 200% 150% at bottom left,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale (opacité réduite) */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger (opacité réduite) */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale (opacité réduite) */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale (opacité réduite) */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Appliquer le même effet de contour au survol pour les blocs de questions FAQ */
#pixelyz-faq .item::after,
.faq .item::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: -1px !important;
    border-radius: 14px !important; /* border-radius de 14px pour correspondre aux items FAQ */
    padding: 1px !important;
    opacity: 0 !important;
    transition: opacity .35s ease !important;
    background: linear-gradient(135deg, rgba(123,108,255,.35), rgba(93,214,255,.35)) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#pixelyz-faq .item:hover::after,
.faq .item:hover::after,
#pixelyz-faq .item[open]:hover::after,
.faq .item[open]:hover::after {
    opacity: .9 !important;
}

/* Appliquer exactement les mêmes styles hover que les cartes de témoignages */
#pixelyz-faq .item:hover,
.faq .item:hover,
#pixelyz-faq .item[open]:hover,
.faq .item[open]:hover {
    transform: translateY(-6px) !important; /* Même translation que les témoignages */
    box-shadow: 0 12px 28px rgba(0,0,0,.28) !important; /* Même ombre */
    border-color: rgba(59, 130, 246, 0.6) !important; /* Même couleur de bordure */
}

/* Effet glassmorphism sur les items FAQ - similaire aux cartes "Comment ça marche" */
/* Base commune pour tous les items FAQ */
body .entry-content #pixelyz-faq .item,
body .page-content #pixelyz-faq .item,
body #pixelyz-faq .item,
#pixelyz-faq .item,
body .entry-content .faq .item,
body .page-content .faq .item,
body .faq .item,
.faq .item {
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-repeat: repeat !important;
}

/* Effet glassmorphism avec variations pour chaque item (alternance) */
/* Item 1 - Glow en haut gauche */
body .entry-content #pixelyz-faq .item:nth-child(odd)::before,
body .page-content #pixelyz-faq .item:nth-child(odd)::before,
body #pixelyz-faq .item:nth-child(odd)::before,
#pixelyz-faq .item:nth-child(odd)::before,
body .entry-content .faq .item:nth-child(odd)::before,
body .page-content .faq .item:nth-child(odd)::before,
body .faq .item:nth-child(odd)::before,
.faq .item:nth-child(odd)::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 14px !important; /* border-radius de 14px pour correspondre aux items FAQ */
    overflow: hidden !important;
    background: 
        /* Vignette marquée en haut - assombrissement du haut de la carte */
        radial-gradient(
            ellipse 200% 100% at top center,
            rgba(11, 16, 32, 0.85) 0%,
            rgba(11, 16, 32, 0.65) 30%,
            rgba(11, 16, 32, 0.4) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en haut gauche */
        radial-gradient(
            ellipse 200% 150% at top left,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Item 2 - Glow en haut droite */
body .entry-content #pixelyz-faq .item:nth-child(even)::before,
body .page-content #pixelyz-faq .item:nth-child(even)::before,
body #pixelyz-faq .item:nth-child(even)::before,
#pixelyz-faq .item:nth-child(even)::before,
body .entry-content .faq .item:nth-child(even)::before,
body .page-content .faq .item:nth-child(even)::before,
body .faq .item:nth-child(even)::before,
.faq .item:nth-child(even)::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 14px !important; /* border-radius de 14px pour correspondre aux items FAQ */
    overflow: hidden !important;
    background: 
        /* Vignette marquée en bas - assombrissement du bas de la carte */
        radial-gradient(
            ellipse 200% 100% at bottom center,
            rgba(11, 16, 32, 0.85) 0%,
            rgba(11, 16, 32, 0.65) 30%,
            rgba(11, 16, 32, 0.4) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en haut droite */
        radial-gradient(
            ellipse 200% 150% at top right,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* S'assurer que le contenu des items FAQ est au-dessus du fond glassmorphism */
body .entry-content #pixelyz-faq .item > *,
body .page-content #pixelyz-faq .item > *,
body #pixelyz-faq .item > *,
#pixelyz-faq .item > *,
body .entry-content .faq .item > *,
body .page-content .faq .item > *,
body .faq .item > *,
.faq .item > * {
    position: relative !important;
    z-index: 10 !important;
}

/* Appliquer exactement les mêmes styles hover que les cartes de témoignages pour "Pourquoi choisir Pixelyz" */
/* (Le contour en dégradé est déjà présent dans le CSS inline) */
#pixelyz-why .card:hover {
    transform: translateY(-6px) !important; /* Même translation que les témoignages */
    box-shadow: 0 12px 28px rgba(0,0,0,.28) !important; /* Même ombre */
    border-color: rgba(59, 130, 246, 0.6) !important; /* Même couleur de bordure */
}

/* Ajouter la bordure bleue au hover pour les cartes "Styles prédéfinis" */
/* (Le contour en dégradé est déjà présent dans le CSS inline) */
#pixelyz-styles .card:hover,
#pixelyz-styles .card.reveal.show:hover {
    border-color: rgba(59, 130, 246, 0.6) !important; /* Même couleur de bordure que les témoignages */
}

/* Ajouter la bordure bleue au hover pour les cartes "Cas d'usage" */
/* (Le contour en dégradé est déjà présent dans le CSS inline) */
#pixelyz-usecases .card:hover,
#pixelyz-usecases .card.reveal.show:hover {
    border-color: rgba(59, 130, 246, 0.6) !important; /* Même couleur de bordure que les témoignages */
}

/* Correction spécifique pour la section cas d'usage */
/* Appliquer le même espacement que la section "Comment ça marche" */
#pixelyz-usecases .kicker {
    margin-bottom: 20px !important; /* Identique à #pixelyz-howto .pixelyz-kicker */
    margin-top: 0 !important;
}

/* Aligner le titre avec la section "Comment ça marche" */
/* #pixelyz-howto .pixelyz-title a margin:14px 0 8px, mais on veut 0 en haut et 16px en bas */
#pixelyz-usecases .title {
    margin-top: 0 !important; /* Identique à #pixelyz-howto après correction */
    margin-bottom: 16px !important; /* Identique à #pixelyz-howto après correction */
}

/* Aligner le subtitle avec la section "Comment ça marche" */
#pixelyz-usecases .subtitle {
    margin-bottom: 20px !important; /* Identique à #pixelyz-howto .pixelyz-intro */
}

/* Réduire le margin-bottom du section-header pour équilibrer l'espacement */
#pixelyz-usecases .section-header {
    margin-bottom: 0 !important; /* Supprimer le margin-bottom du header */
}

/* Aligner la section "Comment ça marche" pour avoir le même espacement */
#pixelyz-howto .pixelyz-kicker {
    margin-bottom: 20px !important; /* Identique aux autres sections */
}

#pixelyz-howto .pixelyz-title {
    margin-top: 0 !important; /* Supprimer le margin-top de 14px */
    margin-bottom: 16px !important; /* Uniformiser avec les autres sections */
}

#pixelyz-howto .pixelyz-intro {
    margin-bottom: 60px !important; /* Espacement augmenté entre description et cartes */
}

/* Aligner la section "Styles prédéfinis" pour avoir le même espacement */
#pixelyz-styles .kicker {
    margin-bottom: 20px !important; /* Identique aux autres sections */
    margin-top: 0 !important;
}

#pixelyz-styles .title {
    margin-top: 0 !important; /* Uniformiser avec les autres sections */
    margin-bottom: 16px !important; /* Uniformiser avec les autres sections */
}

/* Ajouter de l'espace entre le subtitle et les cartes pour la section Styles prédéfinis */
#pixelyz-styles .subtitle {
    margin-bottom: 20px !important; /* Espace normal */
}

/* Ajouter de l'espace entre "Optimisé pour e-commerce..." (.proof) et les cartes */
#pixelyz-styles .proof {
    margin-bottom: 25px !important; /* Espace réduit de 5px supplémentaires */
}

/* Séparer le texte en italique du reste du paragraphe dans les cartes Styles prédéfinis */
/* Le texte en italique doit être centré et sur sa propre ligne */
#pixelyz-styles .card p em {
    display: block !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    font-style: italic;
    width: 100%;
}

/* Le reste du paragraphe doit être à la ligne suivante et aligné à gauche */
/* S'assurer que tous les paragraphes sont alignés de la même manière dans toutes les cartes */
#pixelyz-styles .card p {
    text-align: left !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1.55 !important;
}

/* Espacement entre titre et description/subtitle */
#pixelyz-why .title,
#pixelyz-howto .title,
#pixelyz-howto .pixelyz-title,
#pixelyz-styles .title,
#pixelyz-usecases .title,
#pixelyz-pricing .title,
#pixelyz-faq .title,
#pixelyz-cta .title {
    margin-bottom: 16px !important; /* Espace entre titre et description */
    margin-top: 0 !important; /* S'assurer qu'il n'y a pas de margin-top qui réduit l'espace avec le badge */
}

/* Espacement entre description/subtitle et contenu */
#pixelyz-why .subtitle,
#pixelyz-howto .subtitle,
#pixelyz-styles .subtitle,
#pixelyz-usecases .subtitle,
#pixelyz-pricing .subtitle,
#pixelyz-faq .subtitle,
#pixelyz-cta .subtitle {
    margin-bottom: 20px !important; /* Espace entre description et contenu */
}

/* Ajustements spécifiques pour certaines sections */
/* Section Why - ajuster le margin du subtitle */
#pixelyz-why .subtitle {
    margin-bottom: 20px !important; /* Équilibre avec l'espacement général */
}

/* Section Pricing - ajuster le margin du subtitle */
#pixelyz-pricing .subtitle {
    margin-bottom: 20px !important; /* Équilibre avec l'espacement général */
}

/* Section FAQ - ajuster le margin du subtitle */
#pixelyz-faq .subtitle {
    margin-bottom: 20px !important; /* Équilibre avec l'espacement général */
}

/* IMPORTANT: Ne pas forcer les dimensions des SVG */
/* Les SVG doivent respecter leurs attributs width/height inline */
/* ou les styles dans les balises <style> */
.pixelyz-landing-section svg {
    /* Ne pas forcer de dimensions - laisser les styles inline gérer */
    /* Les styles dans les balises <style> définiront width/height */
    display: inline-block; /* Pour que width/height fonctionnent */
    vertical-align: middle; /* Alignement correct */
}

/* Protection contre les styles WordPress qui forcent des dimensions sur SVG */
body .entry-content .pixelyz-landing-section svg,
body .page-content .pixelyz-landing-section svg,
body .site-main .pixelyz-landing-section svg {
    /* Ne pas forcer de dimensions - laisser les styles inline gérer */
    max-width: none !important;
    max-height: none !important;
    /* Les styles dans les balises <style> comme #pixelyz-why .icon { width: 28px; } */
    /* doivent être respectés */
}

/* IMPORTANT: Les styles des icônes sont maintenant dans landing-sections-inline.css */
/* Les règles suivantes sont des protections de base */
/* Les styles spécifiques (#pixelyz-why .icon, etc.) sont dans landing-sections-inline.css */

/* Protection spécifique pour les icônes - NE PAS forcer de dimensions */
.pixelyz-landing-section .icon,
.pixelyz-landing-section svg.icon,
.pixelyz-landing-section .pixelyz-icon {
    display: inline-block;
    vertical-align: middle;
    /* Les dimensions sont définies dans landing-sections-inline.css */
    /* Ex: #pixelyz-why .icon { width: 28px; height: 28px; } */
}

/* Protection contre les styles WordPress qui forcent des dimensions sur les icônes */
body .entry-content .pixelyz-landing-section .icon,
body .page-content .pixelyz-landing-section .icon,
body .entry-content .pixelyz-landing-section svg.icon,
body .page-content .pixelyz-landing-section svg.icon {
    /* Ne PAS forcer de dimensions - les styles dans landing-sections-inline.css gèrent cela */
    max-width: none !important;
    max-height: none !important;
}

/* IMPORTANT: Les styles des badges sont maintenant dans landing-sections-inline.css */
/* Les règles suivantes sont des protections de base */

/* Protection des badges - NE PAS forcer de styles */
.pixelyz-landing-section .badge,
.pixelyz-landing-section .kicker,
.pixelyz-landing-section .pixelyz-kicker {
    display: inline-block;
    /* Les styles sont définis dans landing-sections-inline.css */
    /* Ex: .badge { padding: 6px 12px; ... } */
}

/* Protection contre les styles WordPress qui surchargent les badges */
body .entry-content .pixelyz-landing-section .badge,
body .page-content .pixelyz-landing-section .badge,
body .entry-content .pixelyz-landing-section .kicker,
body .page-content .pixelyz-landing-section .kicker {
    /* Ne PAS forcer de styles - les styles dans landing-sections-inline.css gèrent cela */
}

/* Correction spécifique pour le badge de la FAQ */
/* Le badge doit être identique à celui de la section Why (.kicker) */
#pixelyz-faq .badge,
#pixelyz-faq h2.badge {
    /* Styles identiques à #pixelyz-why .kicker */
    display: inline-block !important;
    margin: 0 auto 10px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(188,211,230,.25) !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    color: #bcd3e6 !important;
    background: linear-gradient(90deg, rgba(123,108,255,.18), rgba(93,214,255,.18)) !important;
    /* Réinitialiser les styles de h2 */
    line-height: normal !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important; /* Identique aux autres sections */
    width: auto !important;
    max-width: none !important;
}

/* S'assurer que les effets de hover fonctionnent */
.pixelyz-landing-section a:hover,
.pixelyz-landing-section button:hover,
.pixelyz-landing-section .card:hover,
.pixelyz-landing-section .cta-primary:hover,
.pixelyz-landing-section .cta-ghost:hover {
    /* Les styles inline dans <style> définissent les hover */
    /* On ne force rien ici pour éviter les conflits */
}

/* ==========================================================================
   PROTECTION SPÉCIFIQUE - Empêcher WordPress de surcharger les styles inline
   ========================================================================== */

/* Les styles inline ont la priorité maximale en CSS */
/* Mais on doit s'assurer qu'aucun style WordPress ne les surcharge */

/* Protection contre les styles de blocs WordPress génériques */
.entry-content .pixelyz-landing-section,
.page-content .pixelyz-landing-section,
.site-main .pixelyz-landing-section {
    /* Ne pas forcer de dimensions - laisser les styles inline gérer */
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Protection contre les styles de texte WordPress */
.entry-content .pixelyz-landing-section h1,
.entry-content .pixelyz-landing-section h2,
.entry-content .pixelyz-landing-section h3,
.entry-content .pixelyz-landing-section h4,
.entry-content .pixelyz-landing-section h5,
.entry-content .pixelyz-landing-section h6,
.entry-content .pixelyz-landing-section p,
.entry-content .pixelyz-landing-section a,
.entry-content .pixelyz-landing-section span,
.entry-content .pixelyz-landing-section div {
    /* Les styles inline sur ces éléments auront la priorité */
    /* On ne force rien ici pour éviter les conflits */
}

/* S'assurer que les conteneurs WordPress ne limitent pas les sections */
.wp-block-group,
.wp-block-columns,
.wp-block-group__inner-wrapper,
.wp-block {
    /* Si une section est dans un bloc WordPress, elle doit prendre toute la place */
}

/* Protection contre les transformations CSS globales */
body .pixelyz-landing-section,
body .pixelyz-landing-section * {
    /* Ne pas appliquer de transformations globales */
    /* Les styles inline géreront les transformations si nécessaire */
}

/* Empêcher les styles WordPress de forcer des largeurs */
.entry-content,
.page-content {
    /* Déjà géré plus haut, mais on renforce */
}

/* ==========================================================================
   PROTECTION MAXIMALE - S'assurer que les styles inline sont respectés
   ========================================================================== */

/* Les styles dans les balises <style> à l'intérieur des sections */
/* doivent avoir la priorité sur tous les styles WordPress */
/* La spécificité des sélecteurs dans les balises <style> est très élevée */
/* Ex: #pixelyz-hero .title a une spécificité de (1,0,1) ce qui est très élevé */

/* Protection contre les règles WordPress génériques */
body .entry-content .pixelyz-landing-section *,
body .page-content .pixelyz-landing-section *,
body .site-main .pixelyz-landing-section * {
    /* On ne force rien ici - les styles inline dans <style> ont la priorité */
    /* Les styles avec des IDs comme #pixelyz-hero ont une spécificité très élevée */
}

/* S'assurer que les styles inline dans les attributs style="" sont préservés */
.pixelyz-landing-section[style],
.pixelyz-landing-section [style] {
    /* Les attributs style inline ont déjà la priorité maximale en CSS */
    /* Aucune règle externe ne peut les surcharger, même avec !important */
}

/* IMPORTANT: Les styles dans les balises <style> à l'intérieur des sections */
/* sont traités comme des styles dans la feuille de style, pas comme inline */
/* Ils ont une spécificité basée sur leurs sélecteurs */
/* Ex: #pixelyz-hero .title {} a une spécificité plus élevée que .title {} */

/* ==========================================================================
   STYLES SPÉCIFIQUES - Programme d'affiliation
   ========================================================================== */

/* Section Hero Programme Affiliation - Centré */
body .entry-content #affiliate-hero,
body .page-content #affiliate-hero,
#affiliate-hero {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 80px 40px 48px !important;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #E7EEF7 !important;
    display: block !important;
    text-align: center !important;
}

body .entry-content #affiliate-hero > *,
body .page-content #affiliate-hero > *,
#affiliate-hero > * {
    text-align: left !important;
}

body .entry-content #affiliate-hero .hero-grid,
body .page-content #affiliate-hero .hero-grid,
#affiliate-hero .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr 0.9fr !important;
    gap: 28px !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    justify-items: stretch !important;
}

#affiliate-hero .hero-content {
    text-align: left;
}

#affiliate-hero .hero-mockup {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style coupon pour la carte mockup */
#affiliate-hero .hero-mockup .card {
    position: relative !important;
    background: 
        /* Filigrane */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(104, 174, 255, 0.03) 10px,
            rgba(104, 174, 255, 0.03) 20px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 10px,
            rgba(104, 174, 255, 0.03) 10px,
            rgba(104, 174, 255, 0.03) 20px
        ),
        /* Fond de base */
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
    background-size: 40px 40px, 40px 40px, 100% 100% !important;
    border: 2px dashed rgba(104, 174, 255, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(104, 174, 255, 0.1),
        inset 0 0 60px rgba(104, 174, 255, 0.05) !important;
    overflow: visible !important;
}

/* Style coupon avec bordure en pointillés (comme le reste de la carte) */
#affiliate-hero .hero-mockup .card {
    position: relative !important;
}

/* Badge "COUPON" en haut à droite */
#affiliate-hero .hero-mockup .card {
    background-image: 
        /* Filigrane */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(104, 174, 255, 0.03) 10px,
            rgba(104, 174, 255, 0.03) 20px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 10px,
            rgba(104, 174, 255, 0.03) 10px,
            rgba(104, 174, 255, 0.03) 20px
        ) !important;
    background-size: 40px 40px !important;
}

/* Badge "COUPON" avec effet de relief - positionné sur card-inner pour éviter les coupures */
#affiliate-hero .hero-mockup .card-inner::after {
    content: 'COUPON' !important;
    position: absolute !important;
    top: -6px !important;
    right: -9px !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, rgba(123, 108, 255, 0.85), rgba(93, 214, 255, 0.85)) !important;
    border: 1px solid rgba(104, 174, 255, 0.85) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.2em !important;
    color: #68aeff !important;
    text-transform: uppercase !important;
    transform: rotate(5deg) !important;
    z-index: 100 !important;
    box-shadow: 
        0 2px 8px rgba(104, 174, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    pointer-events: none !important;
}

/* Styles pour hero-content (identique à pixelyz-hero) */
#affiliate-hero .hero-content {
    display: flex;
    flex-direction: column;
}

/* Badge hero affiliation - style identique au hero de la page d'accueil */
body .entry-content #affiliate-hero .hero-badge,
body .page-content #affiliate-hero .hero-badge,
body #affiliate-hero .hero-badge,
.pixelyz-landing-section#affiliate-hero .hero-badge,
.pixelyz-landing-section #affiliate-hero .hero-badge,
#affiliate-hero .hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 0 10px 0 !important;
    padding: 7px 12px 5px 12px !important;
    border-radius: 999px !important;
    border: 1px solid #404652 !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    background: #242930 !important;
    line-height: normal !important;
    vertical-align: middle !important;
    width: auto !important;
    max-width: fit-content !important;
    box-sizing: border-box !important;
}

/* Surcharger les styles globaux qui pourraient affecter le badge */
.pixelyz-landing-section #affiliate-hero .hero-badge.badge,
.pixelyz-landing-section #affiliate-hero .hero-badge.kicker,
body .pixelyz-landing-section #affiliate-hero .hero-badge,
body .entry-content .pixelyz-landing-section #affiliate-hero .hero-badge {
    padding: 7px 12px 5px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    line-height: normal !important;
    background: #242930 !important;
    background-image: none !important;
    border: 1px solid #404652 !important;
    border-radius: 999px !important;
}

body .entry-content #affiliate-hero .hero-badge-text,
body .page-content #affiliate-hero .hero-badge-text,
body #affiliate-hero .hero-badge-text,
.pixelyz-landing-section#affiliate-hero .hero-badge-text,
#affiliate-hero .hero-badge-text {
    color: #E0E2E7 !important;
    text-transform: uppercase !important;
    line-height: normal !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Emoji dans le badge - style identique au hero de la page d'accueil */
#affiliate-hero .hero-badge::first-letter {
    font-size: 12px !important;
}

/* Emoji dans le badge */
#affiliate-hero .hero-badge-text span {
    font-size: 14px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
    line-height: 1 !important;
}

#affiliate-hero .hero-title {
    margin: 0 0 12px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    font-size: clamp(27px, 5vw, 51px) !important;
    line-height: 1.06 !important;
}

#affiliate-hero .hero-lead {
    margin: 0 0 26px !important;
    max-width: 720px !important;
    color: #9fb0c0 !important;
    line-height: 1.75 !important;
    font-size: clamp(13px, 1.6vw, 15px) !important;
}

/* CTA Hero avec flèche à droite - style identique au hero de la page d'accueil */
#affiliate-hero .hero-cta-row {
    margin-bottom: 24px !important;
}

/* CTA hero affiliation - style identique au hero de la page d'accueil */
body .entry-content #affiliate-hero .hero-cta.cta-primary,
body .page-content #affiliate-hero .hero-cta.cta-primary,
body #affiliate-hero .hero-cta.cta-primary,
#affiliate-hero .hero-cta.cta-primary,
#affiliate-hero .cta-primary.hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    background: linear-gradient(90deg, #68aeff, #1e6cf3) !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(40, 117, 244, 0.35), 0 0 25px rgba(40, 117, 244, 0.3) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
    transform: none !important;
}

/* Hover pour le CTA du hero affiliation (identique à pixelyz-hero) */
body .entry-content #affiliate-hero .hero-cta.cta-primary:hover,
body .page-content #affiliate-hero .hero-cta.cta-primary:hover,
body #affiliate-hero .hero-cta.cta-primary:hover,
#affiliate-hero .hero-cta.cta-primary:hover,
#affiliate-hero .cta-primary.hero-cta:hover,
#affiliate-hero .hero-cta:hover {
    background: linear-gradient(90deg, #7ab8ff, #2d7ef5) !important;
    box-shadow: 0 6px 20px rgba(98, 169, 254, 0.45), 0 0 40px rgba(98, 169, 254, 0.4) !important;
    transform: none !important;
}

/* Animation de la flèche SVG dans le CTA du hero affiliation (identique à pixelyz-hero) */
#affiliate-hero .hero-cta svg {
    transition: transform 0.3s ease !important;
    transform: rotate(-45deg) !important;
}

#affiliate-hero .hero-cta:hover svg {
    transform: rotate(0deg) translateX(4px) !important;
}


@media (max-width: 768px) {
    #affiliate-hero .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    
    #affiliate-hero .hero-mockup .card {
        max-width: 100% !important;
    }
}

/* Mockup code créateur - Bloc rectangulaire élargi */
#affiliate-hero .hero-mockup {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
}

#affiliate-hero .hero-mockup .card {
    width: 100% !important;
    max-width: 90% !important;
    min-height: 350px !important;
    display: flex !important;
    flex-direction: column !important;
}

#affiliate-hero .hero-mockup .card-inner {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    position: relative !important;
}

#affiliate-hero .affiliate-mockup-content {
    padding: 24px 20px;
    text-align: center;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    background: rgba(16, 24, 36, 0.7) !important;
}

/* Lignes de découpe stylisées (style coupon) */
#affiliate-hero .affiliate-mockup-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: 
        /* Lignes de découpe horizontales - opacité augmentée */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(104, 174, 255, 0.12) 8px,
            rgba(104, 174, 255, 0.12) 9px
        ),
        /* Motif de fond subtil */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 15px,
            rgba(104, 174, 255, 0.04) 15px,
            rgba(104, 174, 255, 0.04) 16px
        ) !important;
    background-size: 100% 100%, 30px 30px !important;
    opacity: 0.8 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
}

#affiliate-hero .affiliate-mockup-content > * {
    position: relative !important;
    z-index: 1 !important;
}

#affiliate-hero .affiliate-mockup-label {
    font-size: 12px;
    color: #9fb0c0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

#affiliate-hero .affiliate-code-display {
    margin: 20px 0;
}

#affiliate-hero .affiliate-code {
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: 700;
    color: #68aeff;
    letter-spacing: 2px;
}

#affiliate-hero .affiliate-discount-badge {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(90deg, rgba(123,108,255,.2), rgba(93,214,255,.2));
    border: 1px solid rgba(188,211,230,.3);
    border-radius: 999px;
    font-size: 18px;
    font-weight: 700;
    color: #5dd6ff;
    margin: 16px 0;
}

#affiliate-hero .affiliate-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

#affiliate-hero .affiliate-stat-card {
    padding: 16px 12px !important;
    border-radius: 12px !important;
    text-align: center !important;
    border: 1px solid transparent !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#affiliate-hero .affiliate-stat-card:hover {
    transform: translateY(-2px) !important;
}

#affiliate-hero .affiliate-stat-card-green {
    background: rgba(74, 222, 128, 0.15) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

#affiliate-hero .affiliate-stat-card-gray {
    background: rgba(159, 176, 192, 0.1) !important;
    border-color: rgba(159, 176, 192, 0.2) !important;
}

#affiliate-hero .affiliate-stat-label {
    display: block;
    font-size: 11px;
    color: #9fb0c0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    font-weight: 600;
}

#affiliate-hero .affiliate-stat-card-green .affiliate-stat-label {
    color: rgba(74, 222, 128, 0.9);
}

#affiliate-hero .affiliate-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

#affiliate-hero .affiliate-stat-card-green .affiliate-stat-value {
    color: #4ade80;
}

#affiliate-hero .affiliate-stat-card-gray .affiliate-stat-value {
    color: #E7EEF7;
}

/* Section Étapes Programme Affiliation */
.pixelyz-landing-section:has(#affiliate-steps) {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 3rem 40px !important;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #E7EEF7 !important;
    position: relative !important;
}


.pixelyz-landing-section:has(#affiliate-steps) .section-header {
    text-align: center;
    margin-bottom: 80px;
}

/* Badge "Revenus passifs..." - style identique à la section "Pourquoi Pixelyz" */
#affiliate-steps.kicker {
    display: inline-block !important;
    margin: 0 auto 10px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(188, 211, 230, 0.25) !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    color: #bcd3e6 !important;
    background: linear-gradient(90deg, rgba(123, 108, 255, 0.18), rgba(93, 214, 255, 0.18)) !important;
    line-height: normal !important;
    scroll-margin-top: 80px !important;
}

#affiliate-steps.kicker::first-letter {
    font-size: 12px !important;
}

.pixelyz-landing-section:has(#affiliate-steps) .subtitle {
    max-width: 100% !important;
    margin: 16px auto 40px !important;
    color: #9fb0c0 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Container de la timeline */
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-container {
    position: relative !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Ligne verticale centrée */
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-line {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: linear-gradient(180deg, #68aeff, #1e6cf3) !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
}

/* Item de la timeline */
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 60px !important;
    z-index: 2 !important;
}

.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-item:last-child {
    margin-bottom: 0 !important;
}

/* Points sur la ligne */
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-point {
    position: absolute !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    background: linear-gradient(135deg, #68aeff, #1e6cf3) !important;
    border: 3px solid #101824 !important;
    border-radius: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
    flex-shrink: 0 !important;
}

/* Cartes de la timeline */
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-card {
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Alignement gauche */
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-left {
    justify-content: flex-start !important;
}

.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-left .affiliate-timeline-card {
    margin-right: auto !important;
    padding-right: 40px !important;
}

.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-left .affiliate-timeline-point {
    right: calc(50% - 8px) !important;
    left: auto !important;
    transform: translateX(0) !important;
}

/* Alignement droite */
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-right {
    justify-content: flex-end !important;
}

.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-right .affiliate-timeline-card {
    margin-left: auto !important;
    padding-left: 40px !important;
}

.pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-right .affiliate-timeline-point {
    left: calc(50% - 8px) !important;
    transform: translateX(0) !important;
}

.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-number {
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(90deg, #68aeff, #1e6cf3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 16px;
    line-height: 1;
}

/* Carte 01 - Fond premium avec grille, gradient et vignette */
body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01 {
    position: relative !important;
    overflow: visible !important;
}

/* Pseudo-élément ::before pour le fond premium */
body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01::before,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01::before,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01::before,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette douce - assombrissement des bords */
        radial-gradient(
            ellipse at center,
            transparent 0%,
            transparent 50%,
            rgba(11, 16, 32, 0.5) 80%,
            rgba(11, 16, 32, 0.7) 100%
        ),
        /* Glow directionnel - point focal lumineux en haut gauche */
        radial-gradient(
            ellipse 200% 150% at top left,
            rgba(79, 70, 229, 0.15) 0%,
            rgba(59, 130, 246, 0.1) 30%,
            rgba(59, 130, 246, 0.05) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.08) 0%,
            rgba(15, 23, 42, 0.05) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.03) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.02) 100%
        ),
        /* Grille horizontale */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.05) 29px,
            rgba(59, 130, 246, 0.05) 30px
        ),
        /* Grille verticale */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.05) 29px,
            rgba(59, 130, 246, 0.05) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Carte 02 - Fond premium avec gradient radial en haut à droite */
body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02 {
    position: relative !important;
    overflow: visible !important;
}

body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02::before,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02::before,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02::before,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    background: 
        /* Vignette douce - assombrissement des bords */
        radial-gradient(
            ellipse at center,
            transparent 0%,
            transparent 50%,
            rgba(11, 16, 32, 0.5) 80%,
            rgba(11, 16, 32, 0.7) 100%
        ),
        /* Glow directionnel - point focal lumineux en haut droite */
        radial-gradient(
            ellipse 200% 150% at top right,
            rgba(79, 70, 229, 0.15) 0%,
            rgba(59, 130, 246, 0.1) 30%,
            rgba(59, 130, 246, 0.05) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.08) 0%,
            rgba(15, 23, 42, 0.05) 40%,
            transparent 70%
        ),
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.03) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.02) 100%
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.05) 29px,
            rgba(59, 130, 246, 0.05) 30px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.05) 29px,
            rgba(59, 130, 246, 0.05) 30px
        ),
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Carte 03 - Fond premium avec gradient radial en bas à gauche */
body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03 {
    position: relative !important;
    overflow: visible !important;
}

body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03::before,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03::before,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03::before,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    background: 
        /* Vignette douce - assombrissement des bords */
        radial-gradient(
            ellipse at center,
            transparent 0%,
            transparent 50%,
            rgba(11, 16, 32, 0.5) 80%,
            rgba(11, 16, 32, 0.7) 100%
        ),
        /* Glow directionnel - point focal lumineux en bas gauche */
        radial-gradient(
            ellipse 200% 150% at bottom left,
            rgba(79, 70, 229, 0.15) 0%,
            rgba(59, 130, 246, 0.1) 30%,
            rgba(59, 130, 246, 0.05) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.08) 0%,
            rgba(15, 23, 42, 0.05) 40%,
            transparent 70%
        ),
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.03) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.02) 100%
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.05) 29px,
            rgba(59, 130, 246, 0.05) 30px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.05) 29px,
            rgba(59, 130, 246, 0.05) 30px
        ),
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Carte 04 - Fond premium avec gradient radial en bas à droite */
body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04 {
    position: relative !important;
    overflow: visible !important;
}

body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04::before,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04::before,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04::before,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    background: 
        /* Vignette douce - assombrissement des bords */
        radial-gradient(
            ellipse at center,
            transparent 0%,
            transparent 50%,
            rgba(11, 16, 32, 0.5) 80%,
            rgba(11, 16, 32, 0.7) 100%
        ),
        /* Glow directionnel - point focal lumineux en bas droite */
        radial-gradient(
            ellipse 200% 150% at bottom right,
            rgba(79, 70, 229, 0.15) 0%,
            rgba(59, 130, 246, 0.1) 30%,
            rgba(59, 130, 246, 0.05) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.08) 0%,
            rgba(15, 23, 42, 0.05) 40%,
            transparent 70%
        ),
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.03) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.02) 100%
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.05) 29px,
            rgba(59, 130, 246, 0.05) 30px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.05) 29px,
            rgba(59, 130, 246, 0.05) 30px
        ),
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Assurer que le contenu est au-dessus du fond pour toutes les cartes */
body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01 > *,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01 > *,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01 > *,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-01 > *,
body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02 > *,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02 > *,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02 > *,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-02 > *,
body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03 > *,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03 > *,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03 > *,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-03 > *,
body .entry-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04 > *,
body .page-content .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04 > *,
body .pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04 > *,
.pixelyz-landing-section:has(#affiliate-steps) .affiliate-step-04 > * {
    position: relative !important;
    z-index: 1 !important;
}

.pixelyz-landing-section:has(#affiliate-steps) .card h3 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 600;
    color: #E7EEF7;
}

/* Section Avantages Gagnant-Gagnant */
#affiliate-benefits {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #E7EEF7 !important;
    background: none !important;
}

#affiliate-benefits .section-header {
    text-align: center;
    margin-bottom: 50px;
}

/* Badge "Avantages mutuels" - style identique à la section "Pourquoi Pixelyz" */
#affiliate-benefits .kicker {
    display: inline-block !important;
    margin: 0 auto 10px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(188, 211, 230, 0.25) !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    color: #bcd3e6 !important;
    background: linear-gradient(90deg, rgba(123, 108, 255, 0.18), rgba(93, 214, 255, 0.18)) !important;
    line-height: normal !important;
}

#affiliate-benefits .kicker::first-letter {
    font-size: 12px !important;
}

#affiliate-benefits .subtitle {
    max-width: 720px !important;
    margin: 16px auto 0 !important;
    color: #9fb0c0 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    text-align: center !important;
}

/* Tableau comparatif moderne */
#affiliate-benefits .affiliate-comparison-table {
    max-width: 1000px !important;
    margin: 50px auto 0 !important;
    padding: 0 20px !important;
}

#affiliate-benefits .comparison-grid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(33, 49, 73, 0.5) !important;
    border-radius: 20px !important;
    overflow: visible !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    position: relative !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

/* Fond premium pour le tableau comparatif */
#affiliate-benefits .comparison-grid::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: 
        /* Vignette douce - assombrissement des bords */
        radial-gradient(
            ellipse at center,
            transparent 0%,
            transparent 50%,
            rgba(11, 16, 32, 0.5) 80%,
            rgba(11, 16, 32, 0.7) 100%
        ),
        /* Glow directionnel - point focal lumineux en haut gauche */
        radial-gradient(
            ellipse 200% 150% at top left,
            rgba(79, 70, 229, 0.15) 0%,
            rgba(59, 130, 246, 0.1) 30%,
            rgba(59, 130, 246, 0.05) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.08) 0%,
            rgba(15, 23, 42, 0.05) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.03) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.02) 100%
        ),
        /* Grille horizontale */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.05) 29px,
            rgba(59, 130, 246, 0.05) 30px
        ),
        /* Grille verticale */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.05) 29px,
            rgba(59, 130, 246, 0.05) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Assurer que le contenu est au-dessus du fond */
#affiliate-benefits .comparison-grid > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Effet de contour en dégradé au survol */
#affiliate-benefits .comparison-grid::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: -1px !important;
    border-radius: 20px !important;
    padding: 1px !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    background: linear-gradient(135deg, rgba(123, 108, 255, 0.35), rgba(93, 214, 255, 0.35)) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#affiliate-benefits .comparison-grid:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
}

#affiliate-benefits .comparison-grid:hover::after {
    opacity: 0.9 !important;
}

/* ==========================================================================
   Styles prédéfinis - Nouvelle structure (Studio, Lifestyle, Personnalisé)
   ========================================================================== */

/* Grid pour les 3 cartes */
#pixelyz-styles .styles-grid-new {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-top: 40px !important;
}

@media (min-width: 900px) {
    #pixelyz-styles .styles-grid-new {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Structure de la carte */
#pixelyz-styles .styles-card-new {
    display: flex !important;
    flex-direction: column !important;
    background: #101824 !important;
    border: 1px solid #213149 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

#pixelyz-styles .styles-card-new:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
}

/* Conteneur de l'image */
#pixelyz-styles .styles-card-image {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    background: #0B1020 !important;
    position: relative !important;
    border-radius: 12px !important;
}

#pixelyz-styles .styles-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 12px !important;
}

/* Contenu de la carte */
#pixelyz-styles .styles-card-content {
    padding: 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 16px !important;
    position: relative !important;
}

/* Titre - Aligné sur le bord gauche de l'image */
#pixelyz-styles .styles-card-new h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #e7eef7 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    width: 100% !important;
    text-align: left !important;
}

/* Description - Alignée sur le bord gauche de l'image */
#pixelyz-styles .styles-description {
    color: #74879a !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Liste de features - Alignée sur le bord gauche de l'image */
#pixelyz-styles .styles-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

#pixelyz-styles .styles-features li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
}

/* Icône de checkmark */
#pixelyz-styles .styles-check {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: #3b82f6 !important;
    stroke-width: 2.5 !important;
}

#pixelyz-styles .styles-features li span {
    color: #bcd3e6 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Conteneur du badge de catégorie - Aligné sur le bord droit de l'image */
#pixelyz-styles .styles-category {
    margin-top: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding-top: 8px !important;
    padding: 8px 0 0 0 !important;
    width: 100% !important;
}

/* Badge de catégorie */
#pixelyz-styles .styles-category-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: rgba(33, 49, 73, 0.6) !important;
    border: 1px solid rgba(188, 211, 230, 0.15) !important;
    border-radius: 8px !important;
    color: #bcd3e6 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* Icône dans le badge */
#pixelyz-styles .styles-category-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    color: #bcd3e6 !important;
    stroke-width: 2 !important;
}

/* Icône du robot plus grande pour meilleure visibilité */
#pixelyz-styles .styles-step-03 .styles-category-icon {
    width: 18px !important;
    height: 18px !important;
}

/* ==========================================================================
   Effets premium sur les cartes "Styles prédéfinis" - Opacité réduite
   ========================================================================== */

/* Carte 01 : Studio - Glow en haut gauche, vignette en haut */
body .entry-content #pixelyz-styles .styles-step-01,
body .page-content #pixelyz-styles .styles-step-01,
body #pixelyz-styles .styles-step-01,
#pixelyz-styles .styles-step-01 {
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-repeat: repeat !important;
}

body .entry-content #pixelyz-styles .styles-step-01::before,
body .page-content #pixelyz-styles .styles-step-01::before,
body #pixelyz-styles .styles-step-01::before,
#pixelyz-styles .styles-step-01::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette marquée en haut - assombrissement du haut de la carte (contraste augmenté) */
        radial-gradient(
            ellipse 200% 100% at top center,
            rgba(11, 16, 32, 0.85) 0%,
            rgba(11, 16, 32, 0.65) 30%,
            rgba(11, 16, 32, 0.4) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en haut gauche (opacité réduite) */
        radial-gradient(
            ellipse 200% 150% at top left,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale (opacité réduite) */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger (opacité réduite) */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale (opacité réduite) */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale (opacité réduite) */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Carte 02 : Lifestyle - Glow en haut droite, vignette en bas */
body .entry-content #pixelyz-styles .styles-step-02,
body .page-content #pixelyz-styles .styles-step-02,
body #pixelyz-styles .styles-step-02,
#pixelyz-styles .styles-step-02 {
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-repeat: repeat !important;
}

body .entry-content #pixelyz-styles .styles-step-02::before,
body .page-content #pixelyz-styles .styles-step-02::before,
body #pixelyz-styles .styles-step-02::before,
#pixelyz-styles .styles-step-02::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette marquée en bas - assombrissement du bas de la carte (contraste augmenté) */
        radial-gradient(
            ellipse 200% 100% at bottom center,
            rgba(11, 16, 32, 0.85) 0%,
            rgba(11, 16, 32, 0.65) 30%,
            rgba(11, 16, 32, 0.4) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en haut droite (opacité réduite) */
        radial-gradient(
            ellipse 200% 150% at top right,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale (opacité réduite) */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger (opacité réduite) */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale (opacité réduite) */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale (opacité réduite) */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Carte 03 : Personnalisé - Glow en bas gauche, vignette sur les côtés */
body .entry-content #pixelyz-styles .styles-step-03,
body .page-content #pixelyz-styles .styles-step-03,
body #pixelyz-styles .styles-step-03,
#pixelyz-styles .styles-step-03 {
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-repeat: repeat !important;
}

body .entry-content #pixelyz-styles .styles-step-03::before,
body .page-content #pixelyz-styles .styles-step-03::before,
body #pixelyz-styles .styles-step-03::before,
#pixelyz-styles .styles-step-03::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette marquée sur les côtés - assombrissement gauche et droite (contraste augmenté) */
        radial-gradient(
            ellipse 100% 200% at left center,
            rgba(11, 16, 32, 0.75) 0%,
            rgba(11, 16, 32, 0.55) 30%,
            rgba(11, 16, 32, 0.3) 50%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 100% 200% at right center,
            rgba(11, 16, 32, 0.75) 0%,
            rgba(11, 16, 32, 0.55) 30%,
            rgba(11, 16, 32, 0.3) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en bas gauche (opacité réduite) */
        radial-gradient(
            ellipse 200% 150% at bottom left,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale (opacité réduite) */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger (opacité réduite) */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale (opacité réduite) */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale (opacité réduite) */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* S'assurer que le contenu est au-dessus du fond premium */
#pixelyz-styles .styles-card-content,
#pixelyz-styles .styles-card-image {
    position: relative !important;
    z-index: 1 !important;
}

/* ==========================================================================
   Cas d'usage - Bento Grid (E-commerce, Marketing, Performance & scale, Mode & Lifestyle, Réseaux sociaux)
   ========================================================================== */

/* Grid Bento - Mobile : empilement vertical */
#pixelyz-usecases .usecases-grid-bento {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 40px !important;
}

/* Desktop : Bento Grid asymétrique */
@media (min-width: 900px) {
    #pixelyz-usecases .usecases-grid-bento {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 24px !important;
    }
    
    /* Ligne 1 : E-commerce (span 3 colonnes) */
    #pixelyz-usecases .usecases-card-large.usecases-step-01 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }
    
    /* Ligne 2 : 3 cartes compactes */
    #pixelyz-usecases .usecases-card-compact.usecases-step-02 {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    
    #pixelyz-usecases .usecases-card-compact.usecases-step-03 {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    
    #pixelyz-usecases .usecases-card-compact.usecases-step-04 {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }
    
    /* Ligne 3 : Performance & scale (span 3 colonnes) */
    #pixelyz-usecases .usecases-card-large.usecases-step-05 {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }
}

/* Structure de base de la carte */
#pixelyz-usecases .usecases-card-new {
    display: flex !important;
    background: linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    border: 1px solid #213149 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
    position: relative !important;
}

/* Base premium dark : grille + dégradé + vignette (commun à toutes les cartes) */
#pixelyz-usecases .usecases-card-new::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 18px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: 
        /* Quadrillage subtil (opacité réduite) */
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        /* Dégradé radial interne pour profondeur (opacité réduite) */
        radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%),
        /* Dégradé linear subtil (opacité réduite) */
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        /* Vignette contrastée (bords plus sombres) */
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0, center, center, center !important;
    opacity: 1 !important;
}

/* Highlight léger en haut pour effet glass (optionnel) */
#pixelyz-usecases .usecases-card-new::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 30% !important;
    border-radius: 18px 18px 0 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.03) 0%, transparent 100%) !important;
    opacity: 1 !important;
}

/* Cartes compactes : disposition verticale */
#pixelyz-usecases .usecases-card-compact {
    flex-direction: column !important;
    min-height: 420px !important;
}

/* Cartes grandes horizontales : disposition horizontale */
#pixelyz-usecases .usecases-card-horizontal {
    flex-direction: row !important;
    min-height: 320px !important;
}

/* Carte reverse : pour Performance & scale (image à gauche) */
#pixelyz-usecases .usecases-card-reverse {
    flex-direction: row !important;
}

/* Performance & scale : image à gauche, texte aligné à droite */
#pixelyz-usecases .usecases-step-05 .usecases-card-image {
    order: 1 !important;
}

#pixelyz-usecases .usecases-step-05 .usecases-card-content {
    order: 2 !important;
    align-items: flex-end !important;
    text-align: right !important;
}

#pixelyz-usecases .usecases-step-05 .usecases-icon-wrapper {
    margin-left: auto !important;
    margin-right: 0 !important;
}

#pixelyz-usecases .usecases-step-05 h3 {
    text-align: right !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

#pixelyz-usecases .usecases-step-05 .usecases-card-content > h3 {
    text-align: right !important;
    align-self: flex-end !important;
}

#pixelyz-usecases .usecases-step-05 .usecases-description {
    text-align: right !important;
}

#pixelyz-usecases .usecases-step-05 .usecases-features {
    align-items: flex-end !important;
}

#pixelyz-usecases .usecases-step-05 .usecases-features li {
    justify-content: flex-end !important;
    flex-direction: row-reverse !important;
}

/* Hover */
#pixelyz-usecases .usecases-card-new:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
}

/* Contenu de la carte (icône, titre, description, features) */
#pixelyz-usecases .usecases-card-content {
    padding: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Cartes compactes : padding réduit */
#pixelyz-usecases .usecases-card-compact .usecases-card-content {
    padding: 24px !important;
    gap: 16px !important;
}

/* Wrapper de l'icône */
#pixelyz-usecases .usecases-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background: rgba(104, 174, 255, 0.1) !important;
    border: 1px solid rgba(104, 174, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Icône */
#pixelyz-usecases .usecases-icon {
    width: 32px !important;
    height: 32px !important;
    color: #68aeff !important;
    filter: drop-shadow(0 4px 12px rgba(104, 174, 255, 0.35)) !important;
}

/* Titre */
#pixelyz-usecases .usecases-card-new h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #e7eef7 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    width: 100% !important;
    text-align: left !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Titre des cartes compactes */
#pixelyz-usecases .usecases-card-compact h3 {
    font-size: 20px !important;
}

/* Pour les cartes compactes : icône et titre côte à côte */
#pixelyz-usecases .usecases-card-compact .usecases-icon-wrapper {
    margin-bottom: 0 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 10px !important;
}

#pixelyz-usecases .usecases-card-compact .usecases-icon {
    width: 28px !important;
    height: 28px !important;
}

#pixelyz-usecases .usecases-card-compact .usecases-card-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Wrapper flex pour icône + titre */
#pixelyz-usecases .usecases-card-compact .usecases-card-content > .usecases-icon-wrapper {
    display: inline-flex !important;
}

#pixelyz-usecases .usecases-card-compact .usecases-card-content > h3 {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
}

/* Créer un conteneur flex pour icône et titre */
#pixelyz-usecases .usecases-card-compact .usecases-card-content {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 16px !important;
    align-items: start !important;
}

#pixelyz-usecases .usecases-card-compact .usecases-icon-wrapper {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

#pixelyz-usecases .usecases-card-compact .usecases-card-content > h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
}

#pixelyz-usecases .usecases-card-compact .usecases-description {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}

#pixelyz-usecases .usecases-card-compact .usecases-features {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

/* Description */
#pixelyz-usecases .usecases-description {
    color: #74879a !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Description des cartes compactes */
#pixelyz-usecases .usecases-card-compact .usecases-description {
    font-size: 14px !important;
}

/* Liste de features */
#pixelyz-usecases .usecases-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}

#pixelyz-usecases .usecases-features li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Bulletpoint carré arrondi */
#pixelyz-usecases .usecases-check {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}

#pixelyz-usecases .usecases-features li span {
    color: #bcd3e6 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Conteneur de l'image */
#pixelyz-usecases .usecases-card-image {
    border-radius: 12px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #0B1020 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Glows directionnels spécifiques par carte - Source lumineuse depuis le bas de la carte centrale */

/* Carte 1 : E-commerce (carte centrale) - Glow concentré vers le bas, source principale */
#pixelyz-usecases .usecases-step-01::before {
    background: 
        /* Quadrillage avec dégradé d'opacité en haut */
        linear-gradient(to bottom, transparent 0%, rgba(59, 130, 246, 0.03) 20%, rgba(59, 130, 246, 0.03) 100%),
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 85%, rgba(59, 130, 246, 0.10) 0%, rgba(79, 70, 229, 0.06) 25%, rgba(59, 130, 246, 0.03) 45%, transparent 75%),
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 100% 100%, 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0, 0 0, center, center, center !important;
}

/* Carte 2 : Mode & Lifestyle (bas gauche) - Diffusion depuis le bas de la carte centrale */
#pixelyz-usecases .usecases-step-02::before {
    background: 
        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        radial-gradient(ellipse at 60% 80%, rgba(59, 130, 246, 0.05) 0%, rgba(79, 70, 229, 0.03) 30%, transparent 65%),
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
}

/* Carte 3 : Réseaux sociaux (bas centre) - Diffusion directe depuis le bas de la carte centrale */
#pixelyz-usecases .usecases-step-03::before {
    background: 
        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 75%, rgba(59, 130, 246, 0.06) 0%, rgba(79, 70, 229, 0.03) 35%, transparent 70%),
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
}

/* Carte 4 : Marketing (bas droite) - Diffusion depuis le bas de la carte centrale */
#pixelyz-usecases .usecases-step-04::before {
    background: 
        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        radial-gradient(ellipse at 40% 80%, rgba(59, 130, 246, 0.05) 0%, rgba(79, 70, 229, 0.03) 30%, transparent 65%),
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
}

/* Carte 5 : Performance & scale (dernière ligne) - Diffusion depuis le haut (réception de la lumière) */
#pixelyz-usecases .usecases-step-05::before {
    background: 
        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 20%, rgba(59, 130, 246, 0.07) 0%, rgba(79, 70, 229, 0.04) 40%, transparent 80%),
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
}

/* Images pour cartes compactes (en bas) */
#pixelyz-usecases .usecases-card-compact .usecases-card-image {
    width: 100% !important;
    height: 180px !important;
    margin-top: auto !important;
}

/* Images pour cartes horizontales (sur le côté) */
#pixelyz-usecases .usecases-card-horizontal .usecases-card-image {
    width: 38% !important;
    height: 100% !important;
    min-width: 280px !important;
}

/* Image à droite (E-commerce) */
#pixelyz-usecases .usecases-image-right {
    order: 2 !important;
}

/* Image à gauche (Performance & scale) */
#pixelyz-usecases .usecases-image-left {
    order: 0 !important;
}

#pixelyz-usecases .usecases-image {
    border-radius: 12px !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Graphique Performance & scale - Remplace l'image */
#pixelyz-usecases .usecases-step-05 .usecases-card-image {
    position: relative !important;
    background: transparent !important;
    overflow: hidden !important;
}

/* Grille de fond - supprimée */
#pixelyz-usecases .usecases-step-05 .chart-grid {
    display: none !important;
}

/* Header avec pourcentage et label */
#pixelyz-usecases .usecases-step-05 .chart-header {
    position: absolute !important;
    top: 28px !important;
    left: 32px !important;
    z-index: 2 !important;
}

#pixelyz-usecases .usecases-step-05 .chart-header-content {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1 !important;
    align-items: flex-start !important;
}

#pixelyz-usecases .usecases-step-05 .chart-percentage-large {
    font-size: clamp(32px, 4vw, 56px) !important;
    font-weight: 750 !important;
    letter-spacing: -0.03em !important;
    color: rgba(240, 246, 255, 0.95) !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}

#pixelyz-usecases .usecases-step-05 .chart-label {
    margin-top: 12px !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: 0.26em !important;
    color: rgb(220, 235, 255) !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Barres du graphique */
#pixelyz-usecases .usecases-step-05 .chart-bars {
    position: absolute !important;
    left: 80px !important;
    right: 32px !important;
    bottom: 32px !important;
    top: 120px !important;
    display: flex !important;
    gap: 26px !important;
    align-items: flex-end !important;
    z-index: 1 !important;
}

#pixelyz-usecases .usecases-step-05 .chart-bar-item {
    flex: 1 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(90, 140, 255, 0.5), rgba(90, 140, 255, 0.15)) !important;
}

/* Ligne SVG avec flèche */
#pixelyz-usecases .usecases-step-05 .chart-line {
    position: absolute !important;
    left: 80px !important;
    right: 32px !important;
    bottom: 32px !important;
    top: 120px !important;
    width: calc(100% - 112px) !important;
    height: calc(100% - 152px) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Responsive : tablette */
@media (min-width: 600px) and (max-width: 899px) {
    #pixelyz-usecases .usecases-grid-bento {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    #pixelyz-usecases .usecases-card-large.usecases-step-01 {
        grid-column: 1 / -1 !important;
    }
    
    #pixelyz-usecases .usecases-card-compact.usecases-step-02 {
        grid-column: 1 !important;
    }
    
    #pixelyz-usecases .usecases-card-compact.usecases-step-03 {
        grid-column: 2 !important;
    }
    
    #pixelyz-usecases .usecases-card-compact.usecases-step-04 {
        grid-column: 1 / -1 !important;
    }
    
    #pixelyz-usecases .usecases-card-large.usecases-step-05 {
        grid-column: 1 / -1 !important;
    }
    
    /* Sur tablette, les cartes horizontales deviennent verticales */
    #pixelyz-usecases .usecases-card-horizontal {
        flex-direction: column !important;
    }
    
    #pixelyz-usecases .usecases-card-horizontal .usecases-card-image {
        width: 100% !important;
        height: 200px !important;
        min-width: auto !important;
    }
}

/* Mobile : empilement vertical, ordre de priorité */
@media (max-width: 599px) {
    #pixelyz-usecases .usecases-card-horizontal {
        flex-direction: column !important;
    }
    
    #pixelyz-usecases .usecases-card-horizontal .usecases-card-image {
        width: 100% !important;
        height: 200px !important;
        min-width: auto !important;
        order: 2 !important;
    }
    
    #pixelyz-usecases .usecases-card-compact {
        min-height: auto !important;
    }
    
    #pixelyz-usecases .usecases-card-content {
        padding: 20px !important;
    }
}

/* ==========================================================================
   Pourquoi Pixelyz - Effets premium dark sur les cartes bento
   ========================================================================== */

/* Structure de base des cartes bento avec fond sombre */
#pixelyz-why .bento-card {
    background: linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    position: relative !important;
}

/* Base premium dark : grille + dégradé + vignette (commun à toutes les cartes) */
#pixelyz-why .bento-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 18px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: 
        /* Quadrillage subtil (opacité réduite) */
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        /* Dégradé radial interne pour profondeur (opacité réduite) */
        radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%),
        /* Dégradé linear subtil (opacité réduite) */
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        /* Vignette contrastée (bords plus sombres) */
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0, center, center, center !important;
    opacity: 1 !important;
}

/* Highlight léger en haut pour effet glass - combiné avec le hover existant */
#pixelyz-why .bento-card::after {
    content: '' !important;
    position: absolute !important;
    inset: -1px !important;
    border-radius: 18px !important;
    padding: 1px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: 
        /* Highlight léger en haut */
        linear-gradient(180deg, rgba(59, 130, 246, 0.03) 0%, transparent 30%),
        /* Hover border gradient (visible au hover) */
        linear-gradient(135deg, rgba(123, 108, 255, 0.35), rgba(93, 214, 255, 0.35)) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
}

#pixelyz-why .bento-card:hover::after {
    opacity: 0.9 !important;
}

/* ==========================================================================
   CLASSES RÉUTILISABLES - GLASSMORPHISM CARD
   ========================================================================== */
/* Classe réutilisable pour appliquer l'effet glassmorphism de la carte centrale "Comment ça marche" */
/* Utilisation : Ajouter la classe "glassmorphism-card" dans les classes CSS additionnelles de Gutenberg */

.glassmorphism-card {
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-repeat: repeat !important;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
    border-radius: 18px !important;
    border: 1px solid rgba(33, 49, 73, 0.5) !important;
}

/* Effet glassmorphism avec vignette en bas et glow en haut droite (style carte centrale) */
.glassmorphism-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: 
        /* Vignette marquée en bas - assombrissement du bas de la carte (contraste augmenté) */
        radial-gradient(
            ellipse 200% 100% at bottom center,
            rgba(11, 16, 32, 0.85) 0%,
            rgba(11, 16, 32, 0.65) 30%,
            rgba(11, 16, 32, 0.4) 50%,
            transparent 70%
        ),
        /* Glow directionnel - point focal lumineux en haut droite (opacité réduite) */
        radial-gradient(
            ellipse 200% 150% at top right,
            rgba(79, 70, 229, 0.09) 0%,
            rgba(59, 130, 246, 0.06) 30%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 80%
        ),
        /* Gradient d'ambiance large - profondeur globale (opacité réduite) */
        radial-gradient(
            ellipse 150% 120% at center,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(15, 23, 42, 0.03) 40%,
            transparent 70%
        ),
        /* Gradient linéaire très léger (opacité réduite) */
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 50%,
            rgba(79, 70, 229, 0.01) 100%
        ),
        /* Grille horizontale (opacité réduite) */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Grille verticale (opacité réduite) */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 29px,
            rgba(59, 130, 246, 0.03) 29px,
            rgba(59, 130, 246, 0.03) 30px
        ),
        /* Fond de base dark navy bleuté */
        linear-gradient(180deg, #0F172A 0%, #0B1020 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 30px,
        30px 100%,
        100% 100% !important;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0 !important;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

/* Contour au survol avec dégradé */
.glassmorphism-card::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: -1px !important;
    border-radius: 18px !important;
    padding: 1px !important;
    opacity: 0 !important;
    transition: opacity .35s ease !important;
    background: linear-gradient(135deg, rgba(123,108,255,.35), rgba(93,214,255,.35)) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.glassmorphism-card:hover::after {
    opacity: .9 !important;
}

/* Effet hover - translation et ombre */
.glassmorphism-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
}

/* S'assurer que le contenu est au-dessus du fond glassmorphism */
.glassmorphism-card > * {
    position: relative !important;
    z-index: 10 !important;
}

/* Glows directionnels spécifiques par carte */

/* Carte 1 : Flexibilité (grande carte) - Glow centre-gauche, mais sous les 3 parties */
#pixelyz-why .bento-large:first-child::before {
    background: 
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse at 30% 50%, rgba(59, 130, 246, 0.08) 0%, rgba(79, 70, 229, 0.04) 35%, transparent 70%),
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
    z-index: 0 !important;
}

/* Carte 2 : Vitesse (petite carte) - Glow coin haut droit */
#pixelyz-why .bento-small:nth-child(2)::before {
    background: 
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.07) 0%, rgba(79, 70, 229, 0.04) 30%, transparent 65%),
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
}

/* Carte 3 : Économie (petite carte) - Glow coin bas gauche */
#pixelyz-why .bento-small:nth-child(3)::before {
    background: 
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.07) 0%, rgba(79, 70, 229, 0.04) 30%, transparent 65%),
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
}

/* Carte 4 : Cohérence (grande carte) - Glow centre-droit */
#pixelyz-why .bento-large:last-child::before {
    background: 
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse at 70% 50%, rgba(59, 130, 246, 0.08) 0%, rgba(79, 70, 229, 0.04) 35%, transparent 70%),
        linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 0%, rgba(11, 16, 32, 0.6) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%, 100% 100% !important;
}

/* CARTE 1: FLEXIBILITÉ - 3 parties découpées avec effets */

/* Conteneur des 3 parties */
#pixelyz-why .bento-bg-split {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    opacity: 0.4 !important;
    transition: opacity 0.5s ease !important;
    z-index: 1 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* Au hover, les images retrouvent leur apparence naturelle */
#pixelyz-why .bento-card:hover .bento-bg-split {
    opacity: 1 !important;
}

/* S'assurer que la partie survolée garde son opacité normale */
#pixelyz-why .bento-bg-split:hover .bg-studio:hover,
#pixelyz-why .bento-bg-split:hover .bg-urbain:hover,
#pixelyz-why .bento-bg-split:hover .bg-nature:hover {
    opacity: 1 !important;
}

/* Chaque partie avec petit zoom individuel contenu */
#pixelyz-why .bg-studio {
    flex: 1 !important;
    background: #1f2937 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    overflow: hidden !important;
    isolation: isolate !important;
    filter: none !important;
    contain: layout style paint !important;
    clip-path: inset(0) !important;
}

/* Petit zoom individuel au survol direct - contenu strictement */
#pixelyz-why .bg-studio:hover {
    transform: scale(1.02) !important;
    z-index: 2 !important;
    will-change: transform !important;
    clip-path: inset(0) !important;
}

#pixelyz-why .bg-studio:hover .bg-split-image {
    transform: scale(1.03) !important;
    transform-origin: center center !important;
}

/* Quand on survole studio, les autres parties s'assombrissent */
#pixelyz-why .bento-bg-split:hover .bg-urbain:not(:hover),
#pixelyz-why .bento-bg-split:hover .bg-nature:not(:hover) {
    opacity: 0.3 !important;
}

#pixelyz-why .bento-card:hover .bg-studio,
#pixelyz-why .bg-studio:hover {
    filter: none !important;
}

/* Images dans les parties découpées */
#pixelyz-why .bg-split-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    transition: transform 0.5s ease !important;
    transform-origin: center center !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* S'assurer qu'aucun filtre n'est appliqué au hover */
#pixelyz-why .bento-card:hover .bg-split-image,
#pixelyz-why .bg-studio:hover .bg-split-image,
#pixelyz-why .bg-urbain:hover .bg-split-image,
#pixelyz-why .bg-nature:hover .bg-split-image {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

#pixelyz-why .bg-studio::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.005) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
    z-index: 1 !important;
}

/* Pas de zoom global, mais zoom individuel possible */
#pixelyz-why .bento-card:hover .bg-studio:not(:hover) {
    transform: none !important;
}

#pixelyz-why .bento-card:hover .bg-studio:not(:hover) .bg-split-image {
    transform: none !important;
}


#pixelyz-why .bento-card:hover .bg-studio::before {
    opacity: 0 !important;
}

#pixelyz-why .bg-urbain {
    flex: 1 !important;
    background: #334155 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    overflow: hidden !important;
    isolation: isolate !important;
    filter: none !important;
    contain: layout style paint !important;
    clip-path: inset(0) !important;
}

/* Petit zoom individuel au survol direct - contenu strictement */
#pixelyz-why .bg-urbain:hover {
    transform: scale(1.02) !important;
    z-index: 2 !important;
    will-change: transform !important;
    clip-path: inset(0) !important;
}

#pixelyz-why .bg-urbain:hover .bg-split-image {
    transform: scale(1.03) !important;
    transform-origin: center center !important;
}

/* Quand on survole urbain, les autres parties s'assombrissent */
#pixelyz-why .bento-bg-split:hover .bg-studio:not(:hover),
#pixelyz-why .bento-bg-split:hover .bg-nature:not(:hover) {
    opacity: 0.3 !important;
}

#pixelyz-why .bento-card:hover .bg-urbain,
#pixelyz-why .bg-urbain:hover {
    filter: none !important;
}

#pixelyz-why .bg-urbain::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.005) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
    z-index: 1 !important;
}

/* Pas de zoom global, mais zoom individuel possible */
#pixelyz-why .bento-card:hover .bg-urbain:not(:hover) {
    transform: none !important;
}

#pixelyz-why .bento-card:hover .bg-urbain:not(:hover) .bg-split-image {
    transform: none !important;
}


#pixelyz-why .bento-card:hover .bg-urbain::before {
    opacity: 0 !important;
}

#pixelyz-why .bg-nature {
    flex: 1 !important;
    background: rgba(6, 78, 59, 0.5) !important;
    position: relative !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    overflow: hidden !important;
    isolation: isolate !important;
    filter: none !important;
    contain: layout style paint !important;
    clip-path: inset(0) !important;
}

/* Petit zoom individuel au survol direct - contenu strictement */
#pixelyz-why .bg-nature:hover {
    transform: scale(1.02) !important;
    z-index: 2 !important;
    will-change: transform !important;
    clip-path: inset(0) !important;
}

#pixelyz-why .bg-nature:hover .bg-split-image {
    transform: scale(1.03) !important;
    transform-origin: center center !important;
}

/* Quand on survole nature, les autres parties s'assombrissent */
#pixelyz-why .bento-bg-split:hover .bg-studio:not(:hover),
#pixelyz-why .bento-bg-split:hover .bg-urbain:not(:hover) {
    opacity: 0.3 !important;
}

#pixelyz-why .bento-card:hover .bg-nature,
#pixelyz-why .bg-nature:hover {
    filter: none !important;
}

#pixelyz-why .bg-nature::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.005) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
    z-index: 1 !important;
}

/* Pas de zoom global, mais zoom individuel possible */
#pixelyz-why .bento-card:hover .bg-nature:not(:hover) {
    transform: none !important;
}

#pixelyz-why .bento-card:hover .bg-nature:not(:hover) .bg-split-image {
    transform: none !important;
}


#pixelyz-why .bento-card:hover .bg-nature::before {
    opacity: 0 !important;
}

/* Dégradés transparents en haut et en bas pour laisser place au texte */
#pixelyz-why .bento-bg-split::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: 
        linear-gradient(to bottom, rgba(15, 23, 42, 0.9) 0%, transparent 20%, transparent 70%, rgba(15, 23, 42, 0.9) 100%) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    mix-blend-mode: normal !important;
}

/* Logo vitesse - position d'origine en haut à droite */
#pixelyz-why .bento-speed-icon {
    position: absolute !important;
    top: 28px !important;
    right: 28px !important;
    opacity: 0.2 !important;
    z-index: 3 !important;
}

#pixelyz-why .bento-speed-icon svg {
    width: 80px !important;
    height: 80px !important;
    color: #68aeff !important;
}

/* Emplacements d'images pour les coherence-item */
#pixelyz-why .coherence-item {
    position: relative !important;
    overflow: hidden !important;
}

/* Agrandissement des encadrés */
#pixelyz-why .coherence-item.inactive {
    width: 92px !important;
    height: 128px !important;
    transition: width 0.5s ease, height 0.5s ease, filter 0.5s ease, opacity 0.5s ease !important;
}

#pixelyz-why .coherence-item.active {
    width: 118px !important;
    height: 152px !important;
    transition: width 0.5s ease, height 0.5s ease, filter 0.5s ease, opacity 0.5s ease !important;
}

/* Au hover, l'item survolé prend la taille active */
#pixelyz-why .coherence-item:hover {
    width: 118px !important;
    height: 152px !important;
    z-index: 10 !important;
}

/* Les autres items (non survolés) prennent la taille inactive */
#pixelyz-why .coherence-items:hover .coherence-item:not(:hover) {
    width: 92px !important;
    height: 128px !important;
}

/* Quand on survole l'image 1 ou 3, l'image 2 (active) s'assombrit */
#pixelyz-why .coherence-items:hover .coherence-item.inactive:hover ~ .coherence-item.active,
#pixelyz-why .coherence-items:hover .coherence-item.active:not(:hover) {
    filter: grayscale(1) !important;
    opacity: 0.5 !important;
}

/* L'item survolé garde ses couleurs naturelles */
#pixelyz-why .coherence-items:hover .coherence-item:hover {
    filter: none !important;
    opacity: 1 !important;
}

#pixelyz-why .coherence-item-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

#pixelyz-why .coherence-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    transition: filter 0.5s ease, opacity 0.5s ease !important;
}

/* Au hover, les images gardent leurs couleurs naturelles */
#pixelyz-why .coherence-item:hover .coherence-image,
#pixelyz-why .bento-card:hover .coherence-item .coherence-image {
    filter: none !important;
    opacity: 1 !important;
}

/* S'assurer que les items inactive perdent leur filtre au hover */
#pixelyz-why .coherence-item.inactive:hover {
    filter: none !important;
    opacity: 1 !important;
}

#pixelyz-why .coherence-item.inactive:hover .coherence-image {
    filter: none !important;
    opacity: 1 !important;
}

/* SVG en arrière-plan, masqué si une image est présente */
#pixelyz-why .coherence-item .coherence-icon-fallback {
    position: relative !important;
    z-index: 2 !important;
}

/* Quand une image est présente, masquer le SVG */
#pixelyz-why .coherence-item:has(.coherence-item-image img[src]) .coherence-icon-fallback {
    display: none !important;
}

/* Masquer l'icône centrale avec badge noir */
#pixelyz-why .bento-center-icon {
    display: none !important;
}

/* Assurer que le contenu est au-dessus des effets */
#pixelyz-why .bento-content,
#pixelyz-why .bento-speed-content,
#pixelyz-why .bento-economy-header,
#pixelyz-why .bento-coherence-content,
#pixelyz-why .bento-labels,
#pixelyz-why .bento-economy-chart {
    position: relative !important;
    z-index: 3 !important;
}

/* Colonnes du tableau */
#affiliate-benefits .comparison-column {
    padding: 32px 28px !important;
    background: transparent !important;
    transition: background 0.3s ease !important;
}

#affiliate-benefits .comparison-column:hover {
    background: rgba(16, 24, 36, 0.6) !important;
}

/* Header de chaque colonne */
#affiliate-benefits .comparison-header {
    text-align: center !important;
    margin-bottom: 28px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid rgba(33, 49, 73, 0.5) !important;
}

#affiliate-benefits .comparison-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background: rgba(104, 174, 255, 0.1) !important;
    border: 1px solid rgba(104, 174, 255, 0.2) !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
}

#affiliate-benefits .comparison-icon-wrapper svg {
    width: 24px !important;
    height: 24px !important;
}

#affiliate-benefits .comparison-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #E7EEF7 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Contenu de chaque colonne */
#affiliate-benefits .comparison-content {
    margin-top: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

#affiliate-benefits .comparison-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
}

#affiliate-benefits .comparison-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

#affiliate-benefits .comparison-check {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(74, 222, 128, 0.1) !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
    border-radius: 6px !important;
    margin-top: 2px !important;
}

#affiliate-benefits .comparison-check svg {
    width: 14px !important;
    height: 14px !important;
}

#affiliate-benefits .comparison-text {
    color: #E7EEF7 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    flex: 1 !important;
}

/* Séparateur vertical */
#affiliate-benefits .comparison-divider {
    width: 1px !important;
    background: linear-gradient(180deg, transparent, rgba(33, 49, 73, 0.8), transparent) !important;
    margin: 24px 0 !important;
}

/* Section Liste Avantages */
#affiliate-advantages {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #E7EEF7 !important;
}

#affiliate-advantages .section-header {
    text-align: center;
    margin-bottom: 40px;
}

/* Badge "Avantages exclusifs" - style identique à la section "Pourquoi Pixelyz" */
#affiliate-advantages .kicker {
    display: inline-block !important;
    margin: 0 auto 10px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(188, 211, 230, 0.25) !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    color: #bcd3e6 !important;
    background: linear-gradient(90deg, rgba(123, 108, 255, 0.18), rgba(93, 214, 255, 0.18)) !important;
    line-height: normal !important;
}

#affiliate-advantages .kicker::first-letter {
    font-size: 12px !important;
}

#affiliate-advantages .subtitle {
    max-width: 720px !important;
    margin: 16px auto 0 !important;
    color: #9fb0c0 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    text-align: center !important;
}

/* Liste des avantages */
#affiliate-advantages .affiliate-advantages-list {
    max-width: 900px !important;
    margin: 50px auto 0 !important;
    padding: 0 20px !important;
}

#affiliate-advantages .affiliate-advantages-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#affiliate-advantages .affiliate-advantage-item {
    display: flex !important;
    align-items: flex-start !important;
    padding: 16px 20px !important;
    background: rgba(16, 24, 36, 0.4) !important;
    border: 1px solid rgba(33, 49, 73, 0.5) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

#affiliate-advantages .affiliate-advantage-item:hover {
    background: rgba(16, 24, 36, 0.6) !important;
    border-color: rgba(104, 174, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

#affiliate-advantages .affiliate-advantage-icon {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 14px !important;
    margin-top: 2px !important;
}

#affiliate-advantages .affiliate-advantage-text {
    color: #E7EEF7 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

/* Section CTA Programme Affiliation */
#affiliate-cta {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #E7EEF7 !important;
    background: none !important;
}

#affiliate-cta .section-header {
    text-align: center;
}

#affiliate-cta .cta-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0 !important;
}

/* Badge "C'est parti !" - style identique à la section "Pourquoi Pixelyz" */
#affiliate-cta .kicker {
    display: inline-block !important;
    margin: 0 auto 10px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(188, 211, 230, 0.25) !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    color: #bcd3e6 !important;
    background: linear-gradient(90deg, rgba(123, 108, 255, 0.18), rgba(93, 214, 255, 0.18)) !important;
    line-height: normal !important;
}

#affiliate-cta .kicker::first-letter {
    font-size: 12px !important;
}

/* === CTA section affiliate-cta - Style identique au hero affiliation === */
#affiliate-cta .cta-primary,
body .entry-content #affiliate-cta .cta-primary,
body .page-content #affiliate-cta .cta-primary,
body #affiliate-cta .cta-primary {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 22px !important;
    border-radius: 9999px !important;
    background: linear-gradient(90deg, #68aeff, #1e6cf3) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 18px 60px -20px rgba(56, 189, 248, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    text-shadow: none !important;
}

#affiliate-cta .cta-primary::before {
    content: "" !important;
    position: absolute !important;
    top: -60% !important;
    left: -40% !important;
    width: 60% !important;
    height: 220% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.20), transparent) !important;
    transform: rotate(18deg) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease, transform 0.35s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
    will-change: transform, opacity !important;
}

#affiliate-cta .cta-primary > * {
    position: relative !important;
    z-index: 1 !important;
}

#affiliate-cta .cta-primary:hover,
body .entry-content #affiliate-cta .cta-primary:hover,
body .page-content #affiliate-cta .cta-primary:hover,
body #affiliate-cta .cta-primary:hover {
    background: linear-gradient(90deg, #7ab8ff, #2d7ef5) !important;
    box-shadow: 0 20px 70px -15px rgba(56, 189, 248, 0.95) !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
}

#affiliate-cta .cta-primary:hover::before {
    opacity: 1 !important;
    transform: translateX(160%) rotate(18deg) !important;
}

/* ==========================================================================
   Section Logos - Ils nous font confiance
   ========================================================================== */

/* Section logos */
.pixelyz-landing-section.logos,
section.logos {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    background: none !important;
}

/* Container de la section logos */
.pixelyz-landing-section.logos .container,
section.logos .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    text-align: center !important;
}

/* Titre centré en gris moyen avec lignes de chaque côté */
.pixelyz-landing-section.logos h3,
section.logos h3 {
    text-align: center !important;
    color: rgba(107, 127, 147, 0.7) !important; /* Gris avec opacité réduite */
    font-size: clamp(11px, 1.5vw, 13px) !important;
    font-weight: 700 !important;
    margin: 0 auto 8px !important;
    padding: 0 40px !important;
    display: inline-block !important;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    position: relative !important;
}

/* Ligne de gauche */
.pixelyz-landing-section.logos h3::before,
section.logos h3::before {
    content: '' !important;
    position: absolute !important;
    left: -80px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 90px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(188, 211, 230, 0.5)) !important;
    z-index: 1 !important;
    display: block !important;
}

/* Ligne de droite */
.pixelyz-landing-section.logos h3::after,
section.logos h3::after {
    content: '' !important;
    position: absolute !important;
    right: -80px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 90px !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(188, 211, 230, 0.5), transparent) !important;
    z-index: 1 !important;
    display: block !important;
}

/* Grid pour les logos (préparé pour l'insertion des logos) */
.pixelyz-landing-section.logos .logos-grid,
section.logos .logos-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 30px !important;
    align-items: center !important;
    justify-items: center !important;
}

/* Items de logo (placeholder pour l'instant) */
.pixelyz-landing-section.logos .logo-item,
section.logos .logo-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 80px !important;
    opacity: 0.7 !important;
    transition: opacity 0.3s ease !important;
}

.pixelyz-landing-section.logos .logo-item:hover,
section.logos .logo-item:hover {
    opacity: 1 !important;
}

/* Image dans les logos */
.pixelyz-landing-section.logos .logo-image,
section.logos .logo-image {
    max-width: 100% !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: grayscale(100%) opacity(0.7) !important;
    transition: filter 0.3s ease !important;
}

.pixelyz-landing-section.logos .logo-item:hover .logo-image,
section.logos .logo-item:hover .logo-image {
    filter: grayscale(0%) opacity(1) !important;
}

#affiliate-cta .cta-primary svg {
    transition: transform 0.3s ease !important;
    transform: rotate(-45deg) !important;
    flex-shrink: 0 !important;
}

#affiliate-cta .cta-primary:hover svg {
    transform: rotate(0deg) translateX(4px) !important;
}

/* Responsive pour les sections du programme d'affiliation */
@media (max-width: 768px) {
    #affiliate-hero,
    .pixelyz-landing-section:has(#affiliate-steps),
    #affiliate-benefits,
    #affiliate-advantages,
    #affiliate-cta {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Timeline responsive mobile */
    .pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-container {
        padding: 0 10px !important;
    }
    
    .pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-line {
        left: 20px !important;
        transform: none !important;
    }
    
    .pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-left: 50px !important;
    }
    
    .pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-point {
        left: 20px !important;
        transform: translateX(-50%) !important;
    }
    
    .pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-left .affiliate-timeline-point,
    .pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-right .affiliate-timeline-point {
        left: 20px !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    
    .pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-card {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-left .affiliate-timeline-card,
    .pixelyz-landing-section:has(#affiliate-steps) .affiliate-timeline-right .affiliate-timeline-card {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #affiliate-benefits .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Tableau comparatif responsive mobile */
    #affiliate-benefits .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    
    #affiliate-benefits .comparison-divider {
        width: 100% !important;
        height: 1px !important;
        background: linear-gradient(90deg, transparent, rgba(33, 49, 73, 0.8), transparent) !important;
        margin: 0 !important;
    }
    
    #affiliate-benefits .comparison-column {
        padding: 28px 24px !important;
    }
    
    #affiliate-benefits .comparison-column:first-child {
        border-bottom: 1px solid rgba(33, 49, 73, 0.5) !important;
    }
    
    /* Liste des avantages responsive */
    #affiliate-advantages .affiliate-advantages-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    #affiliate-advantages .affiliate-advantage-item {
        padding: 14px 16px !important;
    }
}

/* ============================================
   PREMIUM AFFILIATE HERO - DASHBOARD MOCKUP
   Namespace: pxz-afhero
   ============================================ */

/* ============================================
   PREMIUM AFFILIATE HERO - DASHBOARD MOCKUP
   Namespace: pxz-afhero
   ============================================ */

/* Section principale */
.pxz-afhero {
    /* Variables locales Pixelyz (bleu/indigo uniquement) */
    --pxz-blue: 56, 189, 248;     /* Sky blue Pixelyz */
    --pxz-indigo: 99, 102, 241;    /* Indigo Pixelyz */
    --pxz-white: 255, 255, 255;
    --pxz-bg: 7, 11, 20;
    
    position: relative !important;
    min-height: 240px !important;
    padding: 40px 40px 32px !important;
    overflow: visible !important;
    isolation: isolate !important;
    
    /* Fondus d'intégration (gauche / droite / bas) - SUPPRIMÉ pour permettre au CTA d'avoir les bonnes couleurs */
    /* Le masque est maintenant appliqué uniquement aux éléments de fond via .pxz-cinematic-bg */
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Exclure complètement le container du CTA du masque du parent */
.pxz-afhero__left {
    isolation: isolate !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Arrière-plan supprimé - utiliser la classe .pxz-cinematic-bg pour l'appliquer */

/* Solution: Déplacer le masque uniquement sur les éléments de fond, pas sur le contenu */
.pxz-afhero > *:not(.pxz-afhero__container) {
    -webkit-mask-image: inherit !important;
    mask-image: inherit !important;
}

/* Le container et ses enfants échappent au masque */
.pxz-afhero__container,
.pxz-afhero__container * {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Container - Exclure du masque pour permettre au CTA d'échapper au masque */
.pxz-afhero__container {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    isolation: isolate !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    overflow: visible !important;
}

/* Layout 2 colonnes */
.pxz-afhero__layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: center !important;
    overflow: visible !important;
}

/* Colonne gauche */
.pxz-afhero__left {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: visible !important;
}

/* Pill badge */
.pxz-afhero__pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 12px 5px 12px !important;
    border-radius: 999px !important;
    border: 1px solid #404652 !important;
    background: #242930 !important;
    width: fit-content !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: normal !important;
    vertical-align: middle !important;
    margin: 0 0 2px 0 !important;
}

.pxz-afhero__pillIcon {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pxz-afhero__pillText {
    color: #E0E2E7 !important;
    text-transform: uppercase !important;
    line-height: normal !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.pxz-afhero__pill::first-letter {
    font-size: 12px !important;
}

/* Titre */
/* === Titre hero affiliation - Style identique au hero page d'accueil === */
.pxz-afhero__title {
    font-size: clamp(30px, 4.5vw, 48px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 18px 0 8px !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

.pxz-afhero__titleA,
.pxz-afhero__titleB {
    display: inline-block !important;
}

/* Gradient sur la deuxième partie du titre (comme "Zéro prompt" dans le hero accueil) */
.pxz-afhero__titleB {
    background: linear-gradient(90deg, #68aeff, #1e6cf3) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    position: relative;
}

/* Subtitle */
.pxz-afhero__subtitle {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(14px, 1.8vw, 18px) !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #93C5FD !important;
}

/* Description */
.pxz-afhero__desc {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(12px, 1.3vw, 14px) !important;
    line-height: 1.7 !important;
    color: #9FB0C0 !important;
    max-width: 520px !important;
}

/* CTA Row */
.pxz-afhero__ctaRow {
    margin-top: 8px !important;
}

/* === CTA hero affiliation - Duplication EXACTE de la section affiliate-cta === */
/* Exclure complètement du masque du parent */
.pxz-afhero__cta,
body .entry-content .pxz-afhero__cta,
body .page-content .pxz-afhero__cta,
body .pxz-afhero__cta {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 22px !important;
    border-radius: 9999px !important;
    background: linear-gradient(90deg, #68aeff, #1e6cf3) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 18px 60px -20px rgba(56, 189, 248, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
    cursor: pointer !important;
    overflow: hidden !important;
    animation: none !important;
    filter: none !important;
    text-shadow: none !important;
}


.pxz-afhero__cta::before {
    content: "" !important;
    position: absolute !important;
    top: -60% !important;
    left: -40% !important;
    width: 60% !important;
    height: 220% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.20), transparent) !important;
    transform: rotate(18deg) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease, transform 0.35s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
    will-change: transform, opacity !important;
}

.pxz-afhero__cta > * {
    position: relative !important;
    z-index: 1 !important;
}

.pxz-afhero__cta:hover,
body .entry-content .pxz-afhero__cta:hover,
body .page-content .pxz-afhero__cta:hover,
body .pxz-afhero__cta:hover {
    background: linear-gradient(90deg, #7ab8ff, #2d7ef5) !important;
    box-shadow: 0 20px 70px -15px rgba(56, 189, 248, 0.95) !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
}

.pxz-afhero__cta:hover::before {
    opacity: 1 !important;
    transform: translateX(160%) rotate(18deg) !important;
}

.pxz-afhero__cta svg {
    transition: transform 0.3s ease !important;
    transform: rotate(-45deg) !important;
    flex-shrink: 0 !important;
}

.pxz-afhero__cta:hover svg {
    transform: rotate(0deg) translateX(4px) !important;
}

/* Colonne droite - Dashboard Frame */
.pxz-afhero__right {
    position: relative !important;
    max-width: 600px !important;
    margin-left: auto !important;
}

/* === Device frame (right mockup) === */
.pxz-dashFrame {
    position: relative !important;
    border: 1px dashed rgba(var(--pxz-indigo), 0.38) !important;
    border-radius: 24px !important;
    padding: 16px !important;
    background: rgba(var(--pxz-white), 0.04) !important;
    box-shadow:
        0 60px 160px -80px rgba(0, 0, 0, 0.95),
        0 40px 120px -70px rgba(var(--pxz-blue), 0.75) !important;
    overflow: hidden !important;
}

.pxz-dashFrame::before {
    content: "" !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 85% 45%, rgba(var(--pxz-blue), 0.45), transparent 62%),
        radial-gradient(circle at 55% 55%, rgba(var(--pxz-indigo), 0.35), transparent 70%) !important;
    filter: blur(18px) !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Perspective 3D sur desktop uniquement */
@media (min-width: 980px) {
    .pxz-dashFrame {
        transform: perspective(1200px) rotateY(-6deg) rotateX(2deg) !important;
    }
}

.pxz-dash {
    position: relative !important;
    border-radius: 18px !important;
    background: #050814 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    padding: 16px 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.pxz-dash::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0.22 !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(var(--pxz-blue), 0.22), transparent 55%),
        radial-gradient(circle at 75% 30%, rgba(var(--pxz-indigo), 0.18), transparent 58%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
    background-size: auto, auto, 14px 14px !important;
}

/* KPIs Row */
.pxz-dash__kpis {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
}

.pxz-kpiCard {
    background: rgba(var(--pxz-blue), 0.08) !important;
    border: 1px solid rgba(var(--pxz-blue), 0.15) !important;
    border-radius: 13px !important;
    padding: 11px 9px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.pxz-kpiCard:hover {
    background: rgba(var(--pxz-blue), 0.12) !important;
    border-color: rgba(var(--pxz-blue), 0.25) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(var(--pxz-blue), 0.2) !important;
}

.pxz-kpiCard__label {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #9FB0C0 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.pxz-kpiCard__value {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #E7EEF7 !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* Chart Section */
.pxz-chart {
    position: relative !important;
    z-index: 1 !important;
    background: rgba(5, 8, 20, 0.6) !important;
    border-radius: 11px !important;
    border: 1px solid rgba(var(--pxz-blue), 0.1) !important;
    padding: 11px !important;
}

.pxz-chart__head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.pxz-chart__title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #E7EEF7 !important;
}

.pxz-chart__tag {
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #93C5FD !important;
    padding: 5px 8px !important;
    background: rgba(var(--pxz-blue), 0.15) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(var(--pxz-blue), 0.2) !important;
}

.pxz-chart__body {
    position: relative !important;
    height: 85px !important;
}

.pxz-chart__svg {
    width: 100% !important;
    height: 100% !important;
}

/* Chart Grid Lines */
.pxz-chart__grid line {
    stroke: rgba(var(--pxz-blue), 0.1) !important;
    stroke-width: 1 !important;
}

/* Chart Lines */
.pxz-chart__line {
    fill: none !important;
    stroke: rgb(var(--pxz-indigo)) !important;
    stroke-width: 1.4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.pxz-chart__line2 {
    fill: none !important;
    stroke: rgb(var(--pxz-blue)) !important;
    stroke-width: 1.4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Chart Dots */
.pxz-chart__dot {
    fill: rgb(var(--pxz-indigo)) !important;
    filter: drop-shadow(0 0 4px rgba(var(--pxz-indigo), 0.6)) !important;
}

.pxz-chart__dot2 {
    fill: rgb(var(--pxz-blue)) !important;
    filter: drop-shadow(0 0 4px rgba(var(--pxz-blue), 0.6)) !important;
}

/* Chart Tooltip */
.pxz-chart__tooltip {
    position: absolute !important;
    background: rgba(5, 8, 20, 0.95) !important;
    border: 1px solid rgba(var(--pxz-blue), 0.3) !important;
    border-radius: 6px !important;
    padding: 7px 8px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.pxz-chart__tooltipTitle {
    font-size: 8px !important;
    font-weight: 700 !important;
    color: #E7EEF7 !important;
    margin-bottom: 4px !important;
}

.pxz-chart__tooltipRow {
    font-size: 8px !important;
    color: #9FB0C0 !important;
    line-height: 1.6 !important;
}

/* Mini Table */
.pxz-miniTable {
    position: relative !important;
    z-index: 1 !important;
    background: rgba(5, 8, 20, 0.4) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(59, 130, 246, 0.1) !important;
    overflow: hidden !important;
}

.pxz-miniTable__head {
    display: grid !important;
    grid-template-columns: 0.8fr 1fr 0.8fr 1fr 1.2fr !important;
    gap: 12px !important;
    padding: 12px 15px !important;
    background: rgba(59, 130, 246, 0.05) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #9FB0C0 !important;
}

.pxz-miniTable__row {
    display: grid !important;
    grid-template-columns: 0.8fr 1fr 0.8fr 1fr 1.2fr !important;
    gap: 12px !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.05) !important;
    font-size: 10px !important;
    color: #E7EEF7 !important;
    transition: background 0.2s ease !important;
}

.pxz-miniTable__row:last-child {
    border-bottom: none !important;
}

.pxz-miniTable__row:hover {
    background: rgba(59, 130, 246, 0.05) !important;
}

/* Status Badge */
.pxz-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: lowercase !important;
}

.pxz-status--ok {
    color: rgba(var(--pxz-blue), 0.95) !important;
}

.pxz-status--bad {
    color: #F87171 !important;
}

.pxz-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.pxz-status--ok .pxz-dot {
    background: rgba(var(--pxz-blue), 1) !important;
    box-shadow: 0 0 0 2px rgba(var(--pxz-blue), 0.25) !important;
}

.pxz-status--bad .pxz-dot {
    background: #F87171 !important;
    box-shadow: 0 0 4px rgba(248, 113, 113, 0.5) !important;
}

/* Dashboard Footer */
.pxz-dash__foot {
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
    font-size: 10px !important;
    color: #6B7280 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(59, 130, 246, 0.1) !important;
    font-style: italic !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .pxz-afhero__layout {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    .pxz-afhero__right {
        order: -1 !important;
    }
    
    .pxz-dash__kpis {
        grid-template-columns: 1fr !important;
    }
    
    /* Retirer la perspective 3D sur tablette et mobile */
    .pxz-dashFrame {
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .pxz-afhero {
        padding: 24px 20px 20px !important;
        min-height: auto !important;
    }
    
    .pxz-afhero__layout {
        gap: 12px !important;
    }
    
    .pxz-dash {
        padding: 8px 7px 7px !important;
        gap: 7px !important;
    }
    
    .pxz-kpiCard {
        padding: 5px 4px !important;
    }
    
    .pxz-kpiCard__value {
        font-size: 7px !important;
    }
    
    .pxz-chart__body {
        height: 53px !important;
    }
    
    .pxz-miniTable__head,
    .pxz-miniTable__row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 6px 8px !important;
    }
    
    .pxz-miniTable__head > div,
    .pxz-miniTable__row > div {
        display: flex !important;
        justify-content: space-between !important;
    }
    
    .pxz-miniTable__head > div::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
    }
}

@media (max-width: 480px) {
    .pxz-afhero__title {
        font-size: clamp(24px, 6vw, 36px) !important;
    }
    
    .pxz-afhero__subtitle {
        font-size: 14px !important;
    }
    
    .pxz-afhero__desc {
        font-size: 12px !important;
    }
    
    .pxz-afhero__cta {
        padding: 10px 18px !important;
        font-size: 12px !important;
    }
    
    #pixelyz-hero .hero-cta {
        padding: 10px 18px !important;
        font-size: 12px !important;
    }
    
    #pixelyz-cta .cta {
        padding: 10px 18px !important;
        font-size: 12px !important;
    }
    
    #affiliate-cta .cta-primary {
        padding: 10px 18px !important;
        font-size: 12px !important;
    }
}