.wp-block-group.chiffre-cle {
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* Chiffres clés : la grille 4 colonnes devient un slider scroll-snap sur
   mobile. Chaque .chiffre-cle = une slide ; paragraphes vides masqués.
   Pattern : patterns/design-chiffres-cles.php (groupe .chiffres-slider). */
.wp-block-group.chiffres-slider {
    @media (max-width: 768px) {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: var(--wp--preset--spacing--50);
        /* Rail tactile : masque la scrollbar */
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        > .chiffre-cle {
            flex: 0 0 78%; /* slide ~80 % : laisse apparaître la suivante */
            scroll-snap-align: start;
        }

        /* Paragraphe vide retiré du flux de la slide */
        p:empty {
            display: none;
        }
    }

    /* Palier intermédiaire : 2,5 slides visibles (grand mobile / petite tablette) */
    @media (min-width: 500px) and (max-width: 768px) {
        > .chiffre-cle {
            flex-basis: calc((100% - 2 * var(--wp--preset--spacing--50)) / 2.5);
        }
    }
}

/* Dots du slider chiffres clés — injectés par assets/js/chiffres-slider.js,
   en frère du .chiffres-slider. Visibles uniquement sur mobile. */
.chiffres-slider__dots {
    display: none;
}

@media (max-width: 768px) {
    .chiffres-slider__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: var(--wp--preset--spacing--40);
    }

    .chiffres-slider__dot {
        width: 10px;
        height: 10px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--wp--preset--color--primary);
        opacity: 0.3;
        cursor: pointer;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .chiffres-slider__dot.is-active {
        opacity: 1;
    }
}

.wp-block-group.chiffre-cle:hover {
    color: var(--wp--preset--color--secondary) !important;
    border-bottom-color: var(--wp--preset--color--secondary) !important;
}

.wp-block-group.is-style-primary-gradient, .wp-block-group.is-style-primary {
    * {
        color: var(--wp--preset--color--white);
    }

    .wp-block-buttons {
        .wp-block-button.is-style-border {
            .wp-element-button {
                border-color : var(--wp--preset--color--white);

                &:hover {
                    border-color: var(--wp--preset--color--secondary);
                    color: var(--wp--preset--color--black) !important;
                }
            }
        }
        .wp-block-button.is-style-secondary {
            .wp-element-button {

                &:hover {
                    border-color: var(--wp--preset--color--white);
                    background-color: var(--wp--preset--color--white);
                    color: var(--wp--preset--color--black);
                }
            }
        }
    }

    .wp-block-teamtreize-slider-libre{
        .swiper-pagination-bullet {
            background-color: var(--wp--preset--color--white);
        }
    }
}


.wp-block-group.is-card-event {
    margin-block-end: 24px !important;
    margin-inline: auto;
    max-width: 768px;
}

/* Header (tt-header) — mobile : hauteur fixe 80px, padding latéral spacing|40,
   override des paddings inline du group. patterns/parts/header.html */
.wp-block-group.tt-header {
    @media (max-width: 1024px) {
        height: 80px !important;
        padding: 0 var(--wp--custom--spacing--40) !important;
    }
}

.wp-block-group.cta-mobile {
    margin-block-start: 0 !important;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 100;
    height: 103px;
    background: transparent linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 41%, rgba(255, 255, 255, 1) 100%) 0% 0% no-repeat padding-box;

    &.formation {
    .wp-block-button.is-style-pdf .wp-element-button {
        background-color: var(--wp--preset--color--primary) !important;
        border-color: var(--wp--preset--color--primary) !important;
        color: var(--wp--preset--color--white) !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    }
}

/* Menu plein écran ouvert (html.has-modal-open posée par WP core) : on masque
   la barre CTA. Son z-index:100 vit au niveau root tandis que l'overlay
   (z-index:100000) est piégé dans le contexte d'empilement du header sticky,
   donc la CTA passerait par-dessus l'overlay. */
html.has-modal-open .wp-block-group.cta-mobile {
    display: none !important;
}


@media (max-width: 340px) {
    .wp-block-group.cta-mobile .wp-block-buttons .wp-block-button .wp-element-button {
        font-size: 14px !important;
        padding: 7px 16px !important;
    }

    .wp-block-group.cta-mobile .wp-block-buttons {
        gap: 8px !important;
    }
}

@media (max-width: 400px) {
    .wp-block-group.cta-mobile.formation .wp-block-button.is-style-pdf .wp-block-button__link {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 8px !important;

        &::before {
            width: 16px !important;
            height: 16px !important;
        }
    }

    .wp-block-group.cta-mobile.formation .wp-block-buttons .wp-block-button .wp-element-button {
        font-size: 14px !important;
        padding: 7px 16px !important;
    }

    .wp-block-group.cta-mobile.formation .wp-block-buttons {
        gap: 8px !important;
    }
}


@media (min-width: 1025px) {
    .wp-block-group.cta-mobile {
        display: none !important;
    }
}


.wp-block-group.is-style-overlay {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('../img/overlay-bleu.svg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.7;
        z-index: 0;
        pointer-events: none;
    }

    * {
        position: relative;
        z-index: 1;
    }
}


.wp-block-group.presentation-isbatp {
    .wp-block-media-text.is-image-fill-element {
        
        @media (max-width: 768px) {
            gap: 0 !important;
        }
        
        .wp-block-media-text__media {

            img {
                @media (max-width: 768px) {
                    position: static !important;
                    width: 100% !important;
                    height: auto !important;
                    inset: unset !important;
                    object-fit: contain !important;
                    z-index: auto !important;
                }
            }
        }
    }
}