/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-lottie.css
 * Rôle : Animations Lottie.
 *
 * Lecture conseillée :
 * 1. fondations et structure du composant ;
 * 2. éléments internes et états ;
 * 3. adaptations responsive et compatibilité.
 *
 * IMPORTANT : l'ordre de cascade est volontairement préservé lorsqu'un déplacement
 * pourrait modifier le rendu. Les doublons retirés sont uniquement ceux dont une
 * déclaration strictement identique existe plus loin dans le même contexte CSS.
  */

.jp-lottie-icon{
        display: inline-block;
        vertical-align: middle;
        line-height: 0;
        --jp-icon-primary: currentColor;
        --jp-icon-secondary: currentColor;
}

/*  CIBLE — Icônes : .jp-lottie-icon svg  */

.jp-lottie-icon svg{
        display: block;
        width: 100%;
        height: 100%;
}

/*  CIBLE — Composant : .jp-lottie-error  */

.jp-lottie-error{
        border: 1px dashed currentColor;
        opacity: .5;
}

/*  CIBLE — Icônes : .jp-icon-choice-animation  */

.jp-icon-choice-animation{
        display: block;
        width: 72px;
        height: 72px;
        margin: auto;
}

/*  CIBLE — Icônes : .jp-icon-type-filter  */

.jp-icon-type-filter{
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
}

/*  CIBLE — Boutons : .jp-icon-type-filter button.is-active  */

.jp-icon-type-filter button.is-active{
        font-weight: 700;
}

/* Framework JP 12.2.7 — rendu universel SVG/Lottie dans tous les contextes. */

.jp-universal-icon{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        vertical-align: middle;
        overflow: visible;
}

/*  CIBLE — Icônes : .jp-universal-icon--lottie  */

.jp-universal-icon--lottie{
        background: none!important;
        -webkit-mask: none!important;
        mask: none!important;
        color: inherit;
}

/*  CIBLE — Icônes : .jp-universal-icon--lottie::before,.jp-universal-icon--lottie::after  */

.jp-universal-icon--lottie::before,.jp-universal-icon--lottie::after{
        display: none!important;
        content: none!important;
}

/*  CIBLE — Icônes : .jp-universal-icon--lottie .jp-lottie-icon  */

.jp-universal-icon--lottie .jp-lottie-icon{
        display: block!important;
        width: 100%!important;
        height: 100%!important;
        min-width: 1em;
        min-height: 1em;
        background: none!important;
        -webkit-mask: none!important;
        mask: none!important;
}

/*  CIBLE — Icônes : .jp-universal-icon--lottie .jp-lottie-icon svg,.jp-universal-icon--lottie .jp-lottie-icon canvas  */

.jp-universal-icon--lottie .jp-lottie-icon svg,.jp-universal-icon--lottie .jp-lottie-icon canvas{
        display: block;
        width: 100%!important;
        height: 100%!important;
}

/*  CIBLE — Boutons : .jp-btn-icon.jp-universal-icon--lottie  */

.jp-btn-icon.jp-universal-icon--lottie{
        width: 22px!important;
        height: 22px!important;
        min-width: 22px!important;
}

/*  CIBLE — Appel à l’action : .jp-cta-icon.jp-universal-icon--lottie  */

.jp-cta-icon.jp-universal-icon--lottie{
        width: 64px!important;
        height: 64px!important;
}

/*  CIBLE — Icônes : .jp-step-icon-mask.jp-universal-icon--lottie  */

.jp-step-icon-mask.jp-universal-icon--lottie{
        width: 52px!important;
        height: 52px!important;
}

/*  CIBLE — Icônes : .jp-profile-icon-mask.jp-universal-icon--lottie  */

.jp-profile-icon-mask.jp-universal-icon--lottie{
        width: 54px!important;
        height: 54px!important;
}

/*  CIBLE — Icônes : .jp-quality-icon.jp-universal-icon--lottie  */

.jp-quality-icon.jp-universal-icon--lottie{
        width: 42px!important;
        height: 42px!important;
}

/*  CIBLE — Cartes : .jp-number-icon.jp-universal-icon--lottie,.jp-chiffre-icon.jp-universal-icon--lottie,.jp-info-card-ico…  */

.jp-number-icon.jp-universal-icon--lottie,.jp-chiffre-icon.jp-universal-icon--lottie,.jp-info-card-icon.jp-universal-icon--lottie{
        width: 48px!important;
        height: 48px!important;
}

/*  CIBLE — FAQ : .jp-faq-icon.jp-universal-icon--lottie,.jp-faq-page-icon.jp-universal-icon--lottie  */

.jp-faq-icon.jp-universal-icon--lottie,.jp-faq-page-icon.jp-universal-icon--lottie{
        width: 32px!important;
        height: 32px!important;
}

/*  CIBLE — Icônes : .jp-composition-column-icon.jp-universal-icon--lottie  */

.jp-composition-column-icon.jp-universal-icon--lottie{
        width: 48px!important;
        height: 48px!important;
}

/*  CIBLE — Cartes : .jp-composition-card-icon.jp-universal-icon--lottie  */

.jp-composition-card-icon.jp-universal-icon--lottie{
        width: 38px!important;
        height: 38px!important;
}

/* 12.2.8 — neutralisation complète des anciens masques SVG dans les boutons. */

.jp-btn .jp-lottie-icon.jp-btn-icon,
.jp-buttons .jp-btn .jp-lottie-icon.jp-btn-icon,
.jp-cta .jp-btn .jp-lottie-icon.jp-btn-icon {
        display: inline-block !important;
        flex: 0 0 22px !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        -webkit-mask: none !important;
        mask: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
}

/*  CIBLE — Boutons : .jp-btn .jp-lottie-icon.jp-btn-icon svg, .jp-btn .jp-lottie-icon.jp-btn-icon canvas  */

.jp-btn .jp-lottie-icon.jp-btn-icon svg,
.jp-btn .jp-lottie-icon.jp-btn-icon canvas {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
}

/*  RESPONSIVE — (max-width: 600px)  */

@media (max-width: 600px) {
        /*  CIBLE — Boutons : .jp-btn .jp-lottie-icon.jp-btn-icon, .jp-buttons .jp-btn .jp-lottie-icon.jp-btn-icon, .jp-cta .jp-btn …  */
        .jp-btn .jp-lottie-icon.jp-btn-icon,
    .jp-buttons .jp-btn .jp-lottie-icon.jp-btn-icon,
    .jp-cta .jp-btn .jp-lottie-icon.jp-btn-icon {
            flex-basis: 18px !important;
            width: 18px !important;
            height: 18px !important;
            min-width: 18px !important;
            min-height: 18px !important;
    }
}

/* Framework JP 12.2.9 — dimensions adaptées aux boutons CTA et Hero. */

.jp-btn .jp-btn-icon--cta.jp-lottie-icon,
.jp-cta .jp-btn .jp-btn-icon--cta.jp-lottie-icon {
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
}

/*  CIBLE — Bandeau Hero : .jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon  */

.jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon {
        display: inline-block !important;
        flex: 0 0 26px !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        background: transparent !important;
        background-color: transparent !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 1 !important;
        visibility: visible !important;
}

/*  CIBLE — Bandeau Hero : .jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon svg, .jp-hero .jp-buttons .jp-btn .jp-b…  */

.jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon svg,
.jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon canvas {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
}

/*  RESPONSIVE — (max-width: 600px)  */

@media (max-width: 600px) {
        /*  CIBLE — Boutons : .jp-btn .jp-btn-icon--cta.jp-lottie-icon, .jp-cta .jp-btn .jp-btn-icon--cta.jp-lottie-icon  */
        .jp-btn .jp-btn-icon--cta.jp-lottie-icon,
    .jp-cta .jp-btn .jp-btn-icon--cta.jp-lottie-icon {
            flex-basis: 24px !important;
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
    }
        /*  CIBLE — Bandeau Hero : .jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon  */
        .jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon {
            flex-basis: 22px !important;
            width: 22px !important;
            height: 22px !important;
            min-width: 22px !important;
            min-height: 22px !important;
    }
}

/* Framework JP 12.2.10 — boutons ×1,6 et palette Lottie contextuelle. */

.jp-btn .jp-btn-icon--cta.jp-lottie-icon,
.jp-cta .jp-btn .jp-btn-icon--cta.jp-lottie-icon {
        flex: 0 0 45px !important;
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
}

/*  CIBLE — Bandeau Hero : .jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon  */

.jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
}

/*  RESPONSIVE — (max-width:600px)  */

@media (max-width:600px){
        /*  CIBLE — Boutons : .jp-btn .jp-btn-icon--cta.jp-lottie-icon,.jp-cta .jp-btn .jp-btn-icon--cta.jp-lottie-icon  */
        .jp-btn .jp-btn-icon--cta.jp-lottie-icon,.jp-cta .jp-btn .jp-btn-icon--cta.jp-lottie-icon {
            flex-basis: 38px !important;
            width: 38px !important;
            height: 38px !important;
            min-width: 38px !important;
            min-height: 38px !important;
    }
        /*  CIBLE — Bandeau Hero : .jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon  */
        .jp-hero .jp-buttons .jp-btn .jp-btn-icon--hero.jp-lottie-icon {
            flex-basis: 35px !important;
            width: 35px !important;
            height: 35px !important;
            min-width: 35px !important;
            min-height: 35px !important;
    }
}

/* Framework JP 12.2.11 — contraste contextuel et boutons compacts. */

.jp-btn:has(.jp-lottie-icon),
.jp-buttons .jp-btn:has(.jp-lottie-icon),
.jp-cta .jp-btn:has(.jp-lottie-icon),
.jp-hero .jp-buttons .jp-btn:has(.jp-lottie-icon) {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        min-height: 50px;
        gap: 8px;
}

/*  CIBLE — Bandeau Hero : .jp-btn .jp-lottie-icon, .jp-cta .jp-btn .jp-lottie-icon, .jp-hero .jp-buttons .jp-btn .jp-lottie-icon  */

.jp-btn .jp-lottie-icon,
.jp-cta .jp-btn .jp-lottie-icon,
.jp-hero .jp-buttons .jp-btn .jp-lottie-icon {
        color: inherit !important;
}

/*  RESPONSIVE — (max-width:600px)  */

@media (max-width:600px){
        /*  CIBLE — Bandeau Hero : .jp-btn:has(.jp-lottie-icon), .jp-buttons .jp-btn:has(.jp-lottie-icon), .jp-cta .jp-btn:has(.jp-lottie…  */
        .jp-btn:has(.jp-lottie-icon),
    .jp-buttons .jp-btn:has(.jp-lottie-icon),
    .jp-cta .jp-btn:has(.jp-lottie-icon),
    .jp-hero .jp-buttons .jp-btn:has(.jp-lottie-icon) {
            padding-top: 2px !important;
            padding-bottom: 2px !important;
            min-height: 44px;
            gap: 7px;
    }
}