.mosaic-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.fade-out {
    opacity: 0;
    transform: scale(0.95);
}

.fade-in {
    opacity: 1;
    transform: scale(1);
}

.banner-text-part {
    background-size: 100% auto;
}

@media screen and (min-width: 1024px) {
    .banner-text-part {
        background-size: auto 100%;
    }
}

@media screen and (max-width: 480px) {
    .banner-text-part {
        background-size: auto 100%;
    }
}

/*banner-text responsive*/
/*banner-text responsive*/
/*banner-text responsive*/
/*banner-text responsive*/
/*banner-text responsive*/

/* écrans larges */
@media (max-width: 1280px) {
    .phrase-container .phrase {
        font-size: 1.8rem;
        /* réduire un peu */
    }
}

/* Tablettes et petits écrans */
@media (max-width: 1024px) {
    .phrase-container .phrase {
        font-size: 1.7rem;
        /* réduire un peu */
    }
}

/* Téléphones moyens */
@media (max-width: 768px) {
    .phrase-container .phrase {
        font-size: 1.7rem;
    }
}

/* Très petits écrans */
@media (max-width: 640px) {
    .phrase-container .phrase {
        font-size: 1.3rem;
    }

    /* Ajuster aussi le padding au-dessus des boutons */
    .text-center.pt-78,
    .text-center.sm\:pt-78,
    .text-center.md\:pt-84,
    .text-center.lg\:pt-90 {
        padding-top: 1.5rem !important;
        /* réduire pour les petits écrans */
    }
}





/*text responsive*/
/*text responsive*/
/*text responsive*/
/*text responsive*/
/* Par défaut (grands écrans) */
/* Par défaut (grands écrans) */
h1.responsive-text {
    font-size: 2.5rem;
}

h2.responsive-text {
    font-size: 3.5rem;
}

p.responsive-text,
div.responsive-text.text-gray-400 {
    font-size: 1.2rem;
}

/* Moyens écrans (jusqu’à 1024px, donc iPad Pro inclus) */
@media (max-width: 1024px) {
    h1.responsive-text {
        font-size: 2.2rem;
    }

    h2.responsive-text {
        font-size: 3rem;
    }

    p.responsive-text,
    div.responsive-text.text-gray-400 {
        font-size: 1.1rem;
    }
}

/* Petits écrans (jusqu’à 768px, donc iPad Mini inclus) */
@media (max-width: 768px) {
    h1.responsive-text {
        font-size: 1.9rem;
    }

    h2.responsive-text {
        font-size: 2.6rem;
    }

    p.responsive-text,
    div.responsive-text.text-gray-400 {
        font-size: 1rem;
    }
}

/* Très petits écrans (mobiles type iPhone) */
@media (max-width: 640px) {
    h1.responsive-text {
        font-size: 1.6rem;
    }

    h2.responsive-text {
        font-size: 2rem;
    }

    p.responsive-text,
    div.responsive-text.text-gray-400 {
        font-size: 0.95rem;
    }
}



/*banner-sevice-image responsive*/
/*banner-sevice-image responsive*/
/*banner-sevice-image responsive*/
/*banner-sevice-image responsive*/
.banner {
    background-image: url('/assets/img/banner-educational-institution.jpg');
    background-size: cover;
    /* ou contain si tu veux toute l’image visible */
    background-position: center center;
    background-repeat: no-repeat;
    height: 36rem;
    /* par défaut (xl) */
}

/* ↓ Écrans ≤ 1024px */
@media (max-width: 1024px) {
    .banner-educational {
        background-position: center top;
        height: 30rem;
    }
}

/* ↓ Écrans ≤ 768px */
@media (max-width: 768px) {
    .banner-educational {
        background-position: center 20%;
        height: 26rem;
    }
}

/* ↓ Écrans ≤ 640px */
@media (max-width: 640px) {
    .banner-educational {
        background-position: center 10%;
        height: 22rem;
    }
}