/* ========== MelyaKids - Qui sommes-nous (page-specific) ========== */

:root {
    --mk-purple-900: #3b0a6a;
    --mk-purple-800: #4d0a85;
    --mk-purple-700: #5b0ea0;
    --mk-lavender: #f3e9ff;
    --mk-lavender-2: #efe3ff;
    --mk-white: #ffffff;
    --mk-text: #2b2b2b;
    --mk-shadow: 0 18px 40px rgba(25, 10, 55, 0.14);
    --mk-radius-xl: 26px;
}

/* HERO background “vague” */
.mk-about-hero {
    position: relative;
    padding: 70px 0 40px;
    background: radial-gradient(1200px 600px at 20% 20%, #ffffff 0%, var(--mk-lavender) 55%, var(--mk-lavender-2) 100%);
    overflow: hidden;
}

    /* vague haute */
    .mk-about-hero::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -1px;
        height: 140px;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 100%);
        /* SVG wave (data-uri)
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='%23ffffff' fill-opacity='0.0' d='M0,64L80,69.3C160,75,320,85,480,96C640,107,800,117,960,112C1120,107,1280,85,1360,74.7L1440,64L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z'/%3E%3C/svg%3E");
         */
        background-size: cover;
        background-repeat: no-repeat;
        pointer-events: none;
        opacity: .35;
    }

    /* “poussières” décoratives */
    .mk-about-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 12% 30%, rgba(167, 120, 255, .20) 0 6px, transparent 7px), radial-gradient(circle at 28% 60%, rgba(255, 170, 220, .18) 0 5px, transparent 6px), radial-gradient(circle at 70% 35%, rgba(120, 190, 255, .16) 0 6px, transparent 7px), radial-gradient(circle at 88% 70%, rgba(167, 120, 255, .18) 0 5px, transparent 6px);
        background-repeat: no-repeat;
        pointer-events: none;
    }

.mk-hero-grid {
    position: relative;
    z-index: 2;
}

.mk-hero-content {
    padding-right: 12px;
}

.mk-hero-kicker {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(91, 14, 160, 0.10);
    color: var(--mk-purple-700);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 14px;
}

.mk-hero-title {
    color: var(--mk-purple-900);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.05;
    margin-bottom: 14px;
    font-size: clamp(20px, 3.2vw, 30px);
}

/* Animation “soft” sur le slogan */
.mk-hero-animated {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    animation: mkFadeUp .75s ease forwards;
}

    .mk-hero-animated.delay-1 {
        animation-delay: .12s;
    }

@keyframes mkFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mk-hero-lead {
    color: rgba(33, 18, 60, 0.78);
    font-size: 16.5px;
    line-height: 1.7;
    margin-bottom: 16px;
    max-width: 520px;
}

.mk-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 22px;
}

.mk-tag {
    background: #fff;
    border: 1px solid rgba(91,14,160,.12);
    color: var(--mk-purple-800);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 10px 25px rgba(25, 10, 55, 0.06);
}

.mk-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

/* harmonisation boutons template */
.mk-btn-primary {
    border-radius: 999px !important;
    box-shadow: 0 16px 34px rgba(25, 10, 55, 0.18);
}

.mk-btn-ghost {
    border-radius: 999px !important;
    background: rgba(255,255,255,.75) !important;
    color: var(--mk-purple-900) !important;
    border: 1px solid rgba(91,14,160,.18) !important;
}

.mk-hero-note {
    margin-top: 10px;
    color: rgba(33, 18, 60, 0.65);
    font-size: 13.5px;
}

/* visuel à droite */
.mk-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.mk-hero-illustration {
    border-radius: var(--mk-radius-xl);
    box-shadow: var(--mk-shadow);
    max-height: 420px;
    object-fit: cover;
}

/* Sections */
.mk-section {
    padding: 70px 0;
    position: relative;
}

.mk-section-title h2 {
    color: var(--mk-purple-900);
    font-weight: 900;
    letter-spacing: -0.3px;
}

.mk-section-title p {
    color: rgba(33, 18, 60, 0.70);
    margin-top: 6px;
}

/* Cartes programmes */
.mk-programs {
    background: #fff;
}

.mk-card {
    background: #fff;
    border-radius: var(--mk-radius-xl);
    padding: 22px 22px 20px;
    box-shadow: var(--mk-shadow);
    border: 1px solid rgba(91,14,160,.10);
    margin-bottom: 24px;
    transition: transform .2s ease, box-shadow .2s ease;
    min-height: 260px;
}

    .mk-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 55px rgba(25, 10, 55, 0.18);
    }

.mk-card-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.mk-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.mk-card h3 {
    font-size: 18px;
    margin: 0;
    font-weight: 900;
    color: var(--mk-purple-900);
}

.mk-card p {
    color: rgba(33, 18, 60, 0.75);
    line-height: 1.7;
    margin: 12px 0 16px;
    font-size: 14.5px;
}

.mk-card-link {
    font-weight: 800;
    color: var(--mk-purple-700);
}

    .mk-card-link i {
        margin-left: 6px;
        font-size: 13px;
    }

.mk-card-purple .mk-card-icon {
    background: linear-gradient(135deg, #6b2bd6, #8b5cff);
}

.mk-card-pink .mk-card-icon {
    background: linear-gradient(135deg, #ff4da0, #ff7ac0);
}

.mk-card-blue .mk-card-icon {
    background: linear-gradient(135deg, #3a7cff, #63b3ff);
}

/* Valeurs */
.mk-values {
    background: radial-gradient(900px 500px at 20% 0%, rgba(167,120,255,.28) 0%, rgba(243,233,255,1) 55%, rgba(255,255,255,1) 100%);
}

.mk-bullets {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .mk-bullets li {
        position: relative;
        padding-left: 28px;
        margin: 12px 0;
        color: rgba(33, 18, 60, 0.80);
        line-height: 1.65;
    }

        .mk-bullets li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6b2bd6, #ff7ac0);
            box-shadow: 0 10px 20px rgba(25, 10, 55, 0.12);
        }

    .mk-bullets.compact li {
        margin: 9px 0;
    }

.mk-values-box {
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(91,14,160,.12);
    border-radius: var(--mk-radius-xl);
    padding: 22px;
    box-shadow: 0 18px 45px rgba(25, 10, 55, 0.12);
}

.mk-center-action {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* Bouton “pilule” */
.mk-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffb23f, #ffcc66);
    color: #3c1d02;
    font-weight: 900;
    box-shadow: 0 18px 35px rgba(25, 10, 55, 0.16);
    border: none;
}

    .mk-pill-btn:hover {
        color: #3c1d02;
        filter: brightness(0.98);
    }

.mk-pill-btn-light {
    background: rgba(255,255,255,.92);
    color: var(--mk-purple-900);
    border: 1px solid rgba(91,14,160,.18);
}

/* CTA final */
.mk-cta {
    padding: 80px 0;
    background: radial-gradient(1200px 600px at 20% 20%, #7b2cff 0%, #4d0a85 40%, #2f075a 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .mk-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 15% 35%, rgba(255,255,255,.18) 0 2px, transparent 3px), radial-gradient(circle at 45% 70%, rgba(255,255,255,.12) 0 2px, transparent 3px), radial-gradient(circle at 78% 30%, rgba(255,255,255,.16) 0 2px, transparent 3px);
        pointer-events: none;
    }

.mk-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
}

.mk-cta h2 {
    font-weight: 900;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
}

.mk-cta p {
    opacity: .9;
    line-height: 1.7;
    margin-bottom: 18px;
}

.mk-cta-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* =========================================================
   MelyaKids - Notre pédagogie (compléments)
   ========================================================= */

.mk-ped-hero {
    position: relative;
    padding: 70px 0 40px;
    background: radial-gradient(1200px 600px at 20% 20%, #ffffff 0%, var(--mk-lavender) 55%, var(--mk-lavender-2) 100%);
    overflow: hidden;
}

    /* Vague "blanche" en bas (comme le modèle) */
    .mk-ped-hero::before {
        content: "";
        position: absolute;
        left: -2%;
        right: -2%;
        bottom: -1px;
        height: 220px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center bottom;
        pointer-events: none;
        opacity: 1;
        /* SVG wave */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,224L60,202.7C120,181,240,139,360,128C480,117,600,139,720,154.7C840,171,960,181,1080,176C1200,171,1320,149,1380,138.7L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'/%3E%3C/svg%3E");
    }

    /* Petits points décoratifs */
    .mk-ped-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 10% 35%, rgba(167,120,255,.22) 0 6px, transparent 7px), radial-gradient(circle at 26% 62%, rgba(255,170,220,.18) 0 5px, transparent 6px), radial-gradient(circle at 70% 35%, rgba(120,190,255,.16) 0 6px, transparent 7px), radial-gradient(circle at 90% 68%, rgba(167,120,255,.18) 0 5px, transparent 6px);
        background-repeat: no-repeat;
        pointer-events: none;
    }


/* Image sans “cadre” trop visible : on garde le style doux */
.mk-hero-illustration {
    width: 100%;
    border-radius: 26px;
    box-shadow: 0 18px 40px rgba(25, 10, 55, 0.14);
}

/* Cards larges (Codage / Robotique) */
.mk-wide-card {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(91,14,160,.10);
    border-radius: var(--mk-radius-xl);
    padding: 22px;
    box-shadow: 0 18px 40px rgba(25, 10, 55, 0.10);
    margin-bottom: 24px;
}

.mk-wide-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.mk-wide-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #6b2bd6, #8b5cff);
    font-size: 20px;
}

.mk-wide-card h3 {
    margin: 0;
    font-weight: 900;
    color: var(--mk-purple-900);
    font-size: 18px;
}

.mk-wide-card p {
    color: rgba(33, 18, 60, 0.78);
    line-height: 1.7;
    margin: 12px 0 12px;
    font-size: 14.5px;
}

/* Section numérique légère */
.mk-ped-digital {
    background: #fff;
}



    

/* L’image passe au-dessus du halo */
.mk-hero-illustration {
    position: relative;
    z-index: 1;
    width: 100%;
    display: block;
    /* on garde un radius mais moins “cadre” */
    border-radius: 26px;
    /* ombre plus douce + diffuse */
    box-shadow: 0 18px 40px rgba(25, 10, 55, 0.10);
    /* IMPORTANT : masque dégradé pour “fondre” les bords */
    -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 78%, rgba(0,0,0,0.92) 84%, rgba(0,0,0,0.65) 90%, rgba(0,0,0,0.00) 100%);
    mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 78%, rgba(0,0,0,0.92) 84%, rgba(0,0,0,0.65) 90%, rgba(0,0,0,0.00) 100%);
    /* bonus : léger contraste pour garder de la netteté */
    filter: saturate(1.02) contrast(1.02);
}

/* Option : si vous voulez encore plus “fondu”, décommentez
.mk-hero-illustration{
    -webkit-mask-image: radial-gradient(closest-side,
        rgba(0,0,0,1) 72%,
        rgba(0,0,0,0.90) 80%,
        rgba(0,0,0,0.55) 88%,
        rgba(0,0,0,0.00) 100%);
    mask-image: radial-gradient(closest-side,
        rgba(0,0,0,1) 72%,
        rgba(0,0,0,0.90) 80%,
        rgba(0,0,0,0.55) 88%,
        rgba(0,0,0,0.00) 100%);
}
*/


/* =========================================================
   Illustration “fusionnée” (moins de bord) - commun
   ========================================================= */

.mk-hero-visual {
    padding: 0; /* réduit l'effet "bloc" */
}

/* wrapper commun */
.mk-hero-visual-wrap {
    position: relative;
    width: 100%;
    max-width: 560px;
    transform: translateY(-10px); /* option: l'image "rentre" dans la vague */
}

    /* Halo doux derrière l’image */
    .mk-hero-visual-wrap::before {
        content: "";
        position: absolute;
        inset: -26px;
        border-radius: 40px;
        background: radial-gradient(60% 60% at 50% 50%, rgba(167, 120, 255, 0.22) 0%, rgba(167, 120, 255, 0.10) 40%, rgba(167, 120, 255, 0.00) 75%);
        filter: blur(10px);
        z-index: 0;
        pointer-events: none;
    }

/* Image “fondue” */
.mk-hero-illustration {
    position: relative;
    z-index: 1;
    width: 100%;
    display: block;
    border-radius: 28px; /* très léger arrondi */
    box-shadow: none; /* IMPORTANT : plus de cadre/shadow dur */
    /* masque = bords qui disparaissent progressivement */
    -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 72%, rgba(0,0,0,.90) 80%, rgba(0,0,0,.55) 88%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 72%, rgba(0,0,0,.90) 80%, rgba(0,0,0,.55) 88%, rgba(0,0,0,0) 100%);
    filter: saturate(1.02) contrast(1.02);
}

/* Responsive */
@media (max-width: 991px) {
    .mk-hero-visual-wrap {
        max-width: 640px;
        margin: 18px auto 0;
        transform: none;
    }

        .mk-hero-visual-wrap::before {
            inset: -16px;
            filter: blur(8px);
        }
}
/* =========================================================
   MelyaKids - Notre centre (même style que About/Pédagogie)
   ========================================================= */

.mk-centre-hero {
    position: relative;
    padding: 70px 0 40px;
    background: radial-gradient(1200px 600px at 20% 20%, #ffffff 0%, var(--mk-lavender) 55%, var(--mk-lavender-2) 100%);
    overflow: hidden;
}

    /* vague blanche en bas (rendu “fusionné”) */
    .mk-centre-hero::before {
        display: none;
        content: "";
        position: absolute;
        left: -2%;
        right: -2%;
        bottom: -1px;
        height: 220px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center bottom;
        pointer-events: none;
        opacity: 1;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,224L60,202.7C120,181,240,139,360,128C480,117,600,139,720,154.7C840,171,960,181,1080,176C1200,171,1320,149,1380,138.7L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'/%3E%3C/svg%3E");
    }

    /* points décoratifs */
    .mk-centre-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 10% 35%, rgba(167,120,255,.22) 0 6px, transparent 7px), radial-gradient(circle at 26% 62%, rgba(255,170,220,.18) 0 5px, transparent 6px), radial-gradient(circle at 70% 35%, rgba(120,190,255,.16) 0 6px, transparent 7px), radial-gradient(circle at 90% 68%, rgba(167,120,255,.18) 0 5px, transparent 6px);
        background-repeat: no-repeat;
        pointer-events: none;
    }

/* Carousel “fusionné” dans le hero */
.mk-carousel-wrap {
    transform: translateY(-10px);
}

@media (max-width: 991px) {
    .mk-carousel-wrap {
        transform: none;
    }
}

/* wrapper déjà existant : on le garde (halo + fondu) */
/* on applique le fondu au carousel aussi */
.mk-carousel {
    border-radius: 28px;
    overflow: hidden;
    /* pas de bord “dur” */
    box-shadow: none;
}

    /* Images du carousel : même fondu que .mk-hero-illustration */
    .mk-carousel .carousel-item img {
        width: 100%;
        display: block;
        border-radius: 28px;
        box-shadow: none;
        -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 72%, rgba(0,0,0,.90) 80%, rgba(0,0,0,.55) 88%, rgba(0,0,0,0) 100%);
        mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 72%, rgba(0,0,0,.90) 80%, rgba(0,0,0,.55) 88%, rgba(0,0,0,0) 100%);
        filter: saturate(1.02) contrast(1.02);
    }

    /* Indicateurs plus “template” */
    .mk-carousel .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        margin: 0 5px;
        opacity: .35;
    }

    .mk-carousel .carousel-indicators .active {
        opacity: 1;
    }

    /* Contrôles plus discrets */
    .mk-carousel .carousel-control-prev-icon,
    .mk-carousel .carousel-control-next-icon {
        filter: drop-shadow(0 10px 18px rgba(25,10,55,.25));
        opacity: .85;
    }