/* ==========================================================
   WP24 — METHOD ACCORDION V8.2
   Elementor Atomic — COMPLETE CSS

   DESKTOP : >= 1025px
   TABLETTE + MOBILE : <= 1024px

   ========================================================== */


/* ==========================================================
   01 — VARIABLES ET CONTENEUR PRINCIPAL
   ========================================================== */

#wp24-method-list {

    --method-bg: #f4f7fa;
    --method-text: #041d2c;
    --method-muted: #627383;

    --method-radius: 17px;
    --method-gap: 15px;
    --method-height: 250px;

    --method-speed: 850ms;
    --method-ease: cubic-bezier(0.22, 1, 0.36, 1);

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: var(--method-gap) !important;
    align-items: stretch !important;

    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    transition:
        grid-template-columns
        var(--method-speed)
        var(--method-ease) !important;
}


/* ==========================================================
   02 — COLONNES ACTIVES
   ========================================================== */

#wp24-method-list.wp24-active-1 {

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(0, 1fr)
        minmax(0, 1fr);
}

#wp24-method-list.wp24-active-2 {

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.8fr)
        minmax(0, 1fr);
}

#wp24-method-list.wp24-active-3 {

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1.8fr);
}


/* ==========================================================
   03 — CARTES
   ========================================================== */

#wp24-method-list
> [id^="wp24-method-card-"] {

    position: relative !important;
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: var(--method-height) !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: var(--method-radius) !important;
    background: var(--method-bg) !important;

    cursor: pointer;
    isolation: isolate;
    box-sizing: border-box !important;
}


/* ==========================================================
   04 — ZONE TEXTE
   ========================================================== */

#wp24-method-list
> [id^="wp24-method-card-"]
> .e-con:first-child {

    position: relative !important;
    z-index: 2;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;

    padding: 17px 15px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    transition:
        width
        var(--method-speed)
        var(--method-ease) !important;
}


/* Carte active : texte à gauche */

#wp24-method-list
> .wp24-card-active
> .e-con:first-child {

    width: 51% !important;
}


/* ==========================================================
   05 — CONTENEUR TITRE + DESCRIPTION
   ========================================================== */

#wp24-method-list
> [id^="wp24-method-card-"]
> .e-con:first-child
> .e-con:last-child {

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    gap: 4px;
}


/* ==========================================================
   06 — TYPOGRAPHIE
   ========================================================== */

#wp24-method-list h6 {

    margin: 0 !important;
    color: var(--method-muted);
    line-height: 1.2;
}

#wp24-method-list h5 {

    margin: 0 !important;
    color: var(--method-text);
    line-height: 1.3;
}

#wp24-method-list .content-methode {

    margin: 0 !important;
    color: var(--method-muted);
    line-height: 1.6;
}


/* ==========================================================
   07 — IMAGES DESKTOP
   ========================================================== */

#wp24-method-list
> [id^="wp24-method-card-"]
> img {

    position: absolute !important;
    z-index: 3 !important;

    top: 5px !important;
    right: 5px !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: 49% !important;
    height: calc(100% - 10px) !important;

    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 12px !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform:
        translate3d(18px, 0, 0)
        scale(1.035);

    pointer-events: none;

    transition:
        opacity 450ms ease,
        transform
        var(--method-speed)
        var(--method-ease),
        visibility 0s linear 450ms !important;
}


/* ==========================================================
   08 — IMAGE DE LA CARTE ACTIVE
   ========================================================== */

#wp24-method-list
> .wp24-card-active
> img {

    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    transition:
        opacity 550ms ease 100ms,
        transform
        var(--method-speed)
        var(--method-ease),
        visibility 0s !important;
}


/* ==========================================================
   09 — ACCESSIBILITÉ
   ========================================================== */

#wp24-method-list
> [id^="wp24-method-card-"]:focus-visible {

    outline: 2px solid var(--method-text);
    outline-offset: -3px;
}


/* ==========================================================
   10 — ALIGNEMENT DE LA SECTION
   ========================================================== */

/* Section extérieure */

.elementor-element-decfb1d {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-inline: auto !important;
    box-sizing: border-box !important;
}


/* Conteneur intérieur centré */

.elementor-element-decfb1d
> .elementor-element-531c497 {

    width: 100% !important;
    max-width: 1360px !important;
    min-width: 0 !important;

    margin-inline: auto !important;
    box-sizing: border-box !important;
}


/* Conteneur de l'accordéon */

.elementor-element-decfb1d
.elementor-element-a2680c8 {

    width: 100% !important;
    max-width: 1120px !important;
    min-width: 0 !important;

    margin-inline: auto !important;
    box-sizing: border-box !important;
}


/* Liste des cartes */

.elementor-element-decfb1d
#wp24-method-list {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
}


/* ==========================================================
   11 — TABLETTE ET MOBILE
   Breakpoint : 1024px
   ========================================================== */

@media (max-width: 1024px) {

    /* Alignement des conteneurs */

    .elementor-element-decfb1d
    > .elementor-element-531c497 {

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .elementor-element-decfb1d
    .elementor-element-a2680c8 {

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* Liste verticale */

    #wp24-method-list,
    #wp24-method-list.wp24-active-1,
    #wp24-method-list.wp24-active-2,
    #wp24-method-list.wp24-active-3 {

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        min-width: 0 !important;

        gap: 16px !important;

        grid-template-columns: none !important;
        transition: none !important;
    }


    /* Cartes */

    #wp24-method-list
    > [id^="wp24-method-card-"] {

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 17px !important;
        overflow: hidden !important;

        cursor: default !important;
    }


    /* Texte */

    #wp24-method-list
    > [id^="wp24-method-card-"]
    > .e-con:first-child {

        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        justify-content: space-between !important;
        align-items: flex-start !important;

        flex: 0 0 auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 170px !important;

        padding: 20px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
        transition: none !important;
    }


    /* Texte de la carte active */

    #wp24-method-list
    > .wp24-card-active
    > .e-con:first-child {

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        transition: none !important;
    }


    /* Titre et description */

    #wp24-method-list
    > [id^="wp24-method-card-"]
    > .e-con:first-child
    > .e-con:last-child {

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 6px !important;
    }


    /* Typographie */

    #wp24-method-list h6 {

        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    #wp24-method-list h5 {

        font-size: clamp(
            18px,
            4.5vw,
            21px
        ) !important;

        line-height: 1.3 !important;
    }

    #wp24-method-list .content-methode {

        font-size: 13px !important;
        line-height: 1.6 !important;

        max-width: 100% !important;
    }


    /* Images toujours visibles */

    #wp24-method-list
    > [id^="wp24-method-card-"]
    > img {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;
        flex: 0 0 auto !important;

        width: calc(100% - 10px) !important;
        max-width: none !important;
        min-width: 0 !important;

        height: 220px !important;
        min-height: 0 !important;

        margin: 0 5px 5px !important;
        padding: 0 !important;

        object-fit: cover !important;
        object-position: center 40% !important;

        border-radius: 12px !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
        pointer-events: auto !important;

        transition: none !important;
    }


    /* Image de la carte active */

    #wp24-method-list
    > .wp24-card-active
    > img {

        position: relative !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
        transition: none !important;
    }

}


/* ==========================================================
   12 — PETITS MOBILES
   ========================================================== */

@media (max-width: 390px) {

    #wp24-method-list
    > [id^="wp24-method-card-"]
    > .e-con:first-child {

        min-height: 165px !important;
        padding: 18px !important;
    }

    #wp24-method-list
    > [id^="wp24-method-card-"]
    > img {

        height: 190px !important;
    }

}


/* ==========================================================
   13 — RÉDUCTION DES ANIMATIONS
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    #wp24-method-list,

    #wp24-method-list
    > [id^="wp24-method-card-"]
    > .e-con:first-child,

    #wp24-method-list
    > [id^="wp24-method-card-"]
    > img {

        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

}

/* ==========================================================
   END — WP24 METHOD ACCORDION V8.2
   ========================================================== */