/* ========== 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;
}

/* Logo MelyaKids : borne la hauteur quel que soit le fichier source
   (le PNG peut avoir de grandes dimensions intrins�ques) */
/* Le logo desktop est plus grand que la barre : on le sort du flux (absolute)
   pour qu'il déborde sur le bandeau violet sans décaler le menu. */
.navbar-area .rainbow-nav .navbar-brand {
    position: relative;
    display: inline-block;
    width: 170px;
    height: 60px;
}

.navbar-area .rainbow-nav .navbar-brand img {
    position: absolute;
    left: 0;
    top: -18px;
    height: 170px;
    width: auto;
    max-width: none;
}

.navbar-area .rainbow-responsive-menu .logo img {
    height: 120px;
    width: auto;
    max-width: none;
}

.footer-logo img {
    height: 110px;
    width: auto;
    max-width: none;
    margin-bottom: 14px;
}

/* Bandeau de titre de page : m�me d�grad� radial violet que le CTA final (.mk-cta)
   � point lumineux resserr� en haut � gauche sur un violet profond */
.page-title-area,
.page-title-area.item-bg1,
.page-title-area.item-bg2 {
    background-image: none;
    background-color: var(--mk-purple-900);
    background: radial-gradient(1200px 600px at 20% 20%, #7b2cff 0%, #4d0a85 40%, #2f075a 100%);
    position: relative;
    overflow: hidden;
    height: 340px;
}

/* Décale le contenu (titre + fil d'ariane) sous la barre de navigation
   pour aérer le haut du bandeau violet */
.page-title-area .page-title-content {
    padding-top: 60px;
}

/* points blancs discrets, comme sur .mk-cta */
.page-title-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: auto;
    height: auto;
    width: auto;
    opacity: 1;
    background-color: transparent;
    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;
}

/* Fond newsletter/footer : retire l'illustration g�n�rique du template
   qui recouvrait le formulaire et les infos de contact */
.footer-subscribe-wrapper {
    background-image: none;
    background-color: var(--mk-lavender);
}

/* 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;
}

/* Variante : CTA principal seul sur sa ligne, actions secondaires en dessous */
.mk-hero-actions--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

    .mk-hero-actions--stack .mk-pill-btn {
        justify-content: center;
    }

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

@media (max-width: 575.98px) {
    .mk-hero-actions--stack,
    .mk-hero-actions-row {
        align-self: stretch;
        width: 100%;
    }

        .mk-hero-actions--stack > .mk-pill-btn,
        .mk-hero-actions-row > .mk-pill-btn {
            flex: 1 1 100%;
        }
}

/* 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;
}

/* Hauteur uniforme uniquement pour les cartes en grille (colonnes Bootstrap) ;
   les cartes pleine largeur empilées s'ajustent à leur contenu. */
[class*="col-"] > .mk-card {
    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);
}

.mk-card-gold .mk-card-icon {
    background: linear-gradient(135deg, #e8a300, #ffc94d);
}

.mk-card-green .mk-card-icon {
    background: linear-gradient(135deg, #7cb02a, #a6d84f);
}

/* 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%);
}

/* Resserrer l'espace entre un hero .mk-values et le pavé de contenu qui suit
   (Qui sommes-nous, pages soutien : Maths / Physique / Anglais / Français) */
.mk-values--hero {
    padding-bottom: 36px;
}

.mk-programs--after-hero {
    padding-top: 40px;
}

.mk-values--hero + .class-details-section.section-padding {
    padding-top: 44px;
}

.mk-values--hero + .class-details-section .faq-accordion.first-faq-box {
    margin-top: 18px;
}

.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;
    }

    /* Logo MelyaKids affiché à gauche du bloc CTA (espace libre du bandeau violet) */
    .mk-cta::after {
        content: "";
        position: absolute;
        left: max(24px, 6%);
        top: 50%;
        transform: translateY(-50%);
        width: 160px;
        height: 160px;
        background: url("/assets/img/NouveauLogo.png") center / contain no-repeat;
        pointer-events: none;
        z-index: 1;
    }

@media (max-width: 1199.98px) {
    .mk-cta::after { display: 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;
    }
.mk-card.mk-card-info {
    background: linear-gradient(135deg, #ffffff 0%, var(--mk-lavender) 100%);
    border-left: 5px solid var(--mk-purple-700); /* Petite barre d�corative sur le c�t� */
}

/* Encarts cl�/valeur (Infos pratiques, Contact...) */
.mk-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(91, 14, 160, .12);
}

    .mk-kv:last-child {
        border-bottom: none;
    }

.mk-k {
    color: var(--mk-purple-700);
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
}

.mk-v {
    color: var(--mk-text);
    font-weight: 600;
    font-size: 14.5px;
    text-align: right;
}

.mk-badge-free {
    display: inline-block;
    background: var(--mk-purple-700);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    padding: 3px 12px;
    border-radius: 999px;
}

/* ========== Algorithmics & Robotique - grille catalogue ========== */

/* ----- Encart d'introduction : 2 univers en cartes + bandeau d'infos ----- */
.mk-cat-intro {
    padding: 60px 0 28px;
}

.mk-cat-intro-head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.mk-cat-intro-head h2 {
    color: var(--mk-purple-900);
    font-weight: 900;
    letter-spacing: -.3px;
    margin-bottom: 6px;
}

.mk-cat-intro-head p {
    color: rgba(33, 18, 60, .70);
    line-height: 1.55;
    margin: 0;
}

/* Bandeau des infos pratiques */
.mk-cat-facts {
    list-style: none;
    max-width: 980px;
    margin: 16px auto 0;
    padding: 10px 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(91, 14, 160, .10);
    border-radius: 16px;
}

    .mk-cat-facts li {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 3px 10px;
    }

        .mk-cat-facts li + li {
            border-left: 1px solid rgba(91, 14, 160, .10);
        }

.mk-cat-fact-ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mk-lavender);
    color: var(--mk-purple-700);
    font-size: 14px;
}

.mk-cat-fact-txt {
    display: flex;
    flex-direction: column;
    font-size: 11.5px;
    line-height: 1.35;
    color: rgba(33, 18, 60, .66);
}

    .mk-cat-fact-txt strong {
        color: var(--mk-purple-900);
        font-size: 12.5px;
        font-weight: 800;
    }

@media (max-width: 860px) {
    .mk-cat-facts {
        grid-template-columns: repeat(2, 1fr);
    }

        .mk-cat-facts li:nth-child(odd) {
            border-left: 0;
        }
}

@media (max-width: 460px) {
    .mk-cat-facts {
        grid-template-columns: 1fr;
    }

        .mk-cat-facts li {
            border-left: 0 !important;
        }
}

.mk-cat-tranche {
    margin-top: 54px;
}

.mk-cat-tranche:first-child {
    margin-top: 10px;
}

.mk-cat-tranche-head {
    margin-bottom: 22px;
    text-align: center;
}

.mk-cat-tranche-age {
    display: inline-block;
    background: var(--mk-lavender);
    color: var(--mk-purple-700);
    font-weight: 800;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.mk-cat-tranche-head h3 {
    color: var(--mk-purple-900);
    font-weight: 900;
    font-size: 24px;
    margin: 0 0 6px;
}

.mk-cat-tranche-age-inline {
    font-weight: 700;
    color: var(--mk-purple-700);
}

.mk-cat-tranche-head p {
    color: rgba(33, 18, 60, .7);
    margin: 0 auto;
    max-width: 780px;
    font-size: 15px;
    text-wrap: pretty;
}

.mk-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575px) {
    .mk-cat-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}

.mk-cat-card {
    position: relative;
    border-radius: 28px;
    padding: 26px 24px 24px;
    min-height: 230px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Relief : ombre de contact + ombres portées étagées + biseau interne
       (arête claire en haut, ombre douce en bas = volume) */
    box-shadow:
        0 2px 4px rgba(15, 5, 40, .18),
        0 12px 24px rgba(20, 8, 48, .16),
        0 30px 55px rgba(25, 10, 55, .22),
        inset 0 1px 0 rgba(255, 255, 255, .40),
        inset 0 0 0 1px rgba(255, 255, 255, .07),
        inset 0 -18px 30px rgba(8, 2, 26, .22);
    transform: perspective(1100px);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

    .mk-cat-card:hover {
        transform: perspective(1100px) translateY(-10px) rotateX(4deg) scale(1.02);
        box-shadow:
            0 4px 8px rgba(15, 5, 40, .20),
            0 20px 38px rgba(20, 8, 48, .20),
            0 46px 74px rgba(25, 10, 55, .32),
            inset 0 1px 0 rgba(255, 255, 255, .45),
            inset 0 0 0 1px rgba(255, 255, 255, .10),
            inset 0 -18px 30px rgba(8, 2, 26, .22);
    }

.mk-cat-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 44px;
    opacity: .28;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .28));
}

.mk-cat-age {
    font-weight: 800;
    font-size: 13px;
    opacity: .85;
    margin-bottom: 8px;
    display: block;
}

.mk-cat-title {
    font-weight: 900;
    font-size: 20px;
    line-height: 1.25;
    margin: 0 0 18px;
}

.mk-cat-more {
    align-self: flex-start;
    border: none;
    background: rgba(255, 255, 255, .22);
    color: inherit;
    font-weight: 800;
    font-size: 13.5px;
    padding: 8px 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s ease;
}

    .mk-cat-more:hover {
        background: rgba(255, 255, 255, .35);
        color: inherit;
    }

/* Couleurs des cartes (fond foncé -> texte clair) : chaque teinte en dégradé 135° */
.mk-cat-c1  { background: linear-gradient(135deg, #7b2cff 0%, #4d0a85 55%, #2f075a 100%); color: #ffffff; } /* violet, comme le bandeau de titre */
.mk-cat-c4  { background: linear-gradient(135deg, #f5487f 0%, #d81159 55%, #a20d43 100%); color: #ffffff; } /* framboise */
.mk-cat-c6  { background: linear-gradient(135deg, #ff7a52 0%, #f2542d 55%, #c0350f 100%); color: #ffffff; } /* corail */
.mk-cat-c7  { background: linear-gradient(135deg, #2f2557 0%, #171235 55%, #0d0a22 100%); color: #ffffff; } /* bleu nuit */
.mk-cat-c10 { background: linear-gradient(135deg, #4a1a75 0%, #2c0a4a 55%, #1a0530 100%); color: #ffffff; } /* violet foncé */
.mk-cat-c12 { background: linear-gradient(135deg, #4a92ef 0%, #1f6fd6 55%, #17539f 100%); color: #ffffff; } /* bleu */

/* Couleurs des cartes (fond clair -> texte foncé) : chaque teinte en dégradé 135° */
.mk-cat-c3  { background: linear-gradient(135deg, #ffc766 0%, #ffb23f 55%, #f59422 100%); color: #4a3300; } /* jaune Algorithmics */
.mk-cat-c2  { background: linear-gradient(135deg, #abd753 0%, #95c535 55%, #79a827 100%); color: #22330a; } /* vert */
.mk-cat-c5  { background: linear-gradient(135deg, #fdd2e2 0%, #f6b8cf 55%, #e894b5 100%); color: #5b0e40; } /* rose */
.mk-cat-c8  { background: linear-gradient(135deg, #ffc766 0%, #ffb23f 55%, #f59422 100%); color: #4a3300; } /* jaune */
.mk-cat-c9  { background: linear-gradient(135deg, #8ceef2 0%, #63e3e9 55%, #38ccd3 100%); color: #142049; } /* cyan */
.mk-cat-c11 { background: linear-gradient(135deg, #74f0cb 0%, #4be7b8 55%, #2fc99a 100%); color: #0a3d2d; } /* menthe */

.mk-cat-c3 .mk-cat-more, .mk-cat-c2 .mk-cat-more, .mk-cat-c5 .mk-cat-more, .mk-cat-c8 .mk-cat-more, .mk-cat-c9 .mk-cat-more, .mk-cat-c11 .mk-cat-more {
    background: rgba(33, 18, 60, .10);
}

    .mk-cat-c3 .mk-cat-more:hover, .mk-cat-c2 .mk-cat-more:hover, .mk-cat-c5 .mk-cat-more:hover, .mk-cat-c8 .mk-cat-more:hover, .mk-cat-c9 .mk-cat-more:hover, .mk-cat-c11 .mk-cat-more:hover {
        background: rgba(33, 18, 60, .18);
    }

/* ----- Carte de niveau : entièrement cliquable + micro-animations ----- */
.mk-cat-card[role="button"] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mk-cat-card:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .95);
    outline-offset: 3px;
}

.mk-cat-c3:focus-visible, .mk-cat-c2:focus-visible, .mk-cat-c5:focus-visible,
.mk-cat-c8:focus-visible, .mk-cat-c9:focus-visible, .mk-cat-c11:focus-visible {
    outline-color: rgba(33, 18, 60, .9);
}

.mk-cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .16), transparent 60%);
    opacity: .55;
    transition: opacity .3s ease;
    pointer-events: none;
}

.mk-cat-card:hover::after,
.mk-cat-card:focus-visible::after {
    opacity: 1;
}

.mk-cat-icon {
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}

.mk-cat-card:hover .mk-cat-icon,
.mk-cat-card:focus-visible .mk-cat-icon {
    transform: scale(1.18) rotate(-8deg);
    opacity: .45;
}

.mk-cat-card:hover .mk-cat-more,
.mk-cat-card:focus-visible .mk-cat-more {
    background: rgba(255, 255, 255, .38);
}

.mk-cat-c3:hover .mk-cat-more, .mk-cat-c2:hover .mk-cat-more, .mk-cat-c5:hover .mk-cat-more,
.mk-cat-c8:hover .mk-cat-more, .mk-cat-c9:hover .mk-cat-more, .mk-cat-c11:hover .mk-cat-more,
.mk-cat-c3:focus-visible .mk-cat-more, .mk-cat-c2:focus-visible .mk-cat-more, .mk-cat-c5:focus-visible .mk-cat-more,
.mk-cat-c8:focus-visible .mk-cat-more, .mk-cat-c9:focus-visible .mk-cat-more, .mk-cat-c11:focus-visible .mk-cat-more {
    background: rgba(33, 18, 60, .20);
}

.mk-cat-more i {
    transition: transform .25s ease;
}

.mk-cat-card:hover .mk-cat-more i,
.mk-cat-card:focus-visible .mk-cat-more i {
    transform: translateX(5px);
}

.mk-cat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.mk-cat-tag {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .20);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .mk-cat-tag.robo {
        background: rgba(255, 255, 255, .12);
    }

.mk-cat-c3 .mk-cat-tag, .mk-cat-c2 .mk-cat-tag, .mk-cat-c5 .mk-cat-tag,
.mk-cat-c8 .mk-cat-tag, .mk-cat-c9 .mk-cat-tag, .mk-cat-c11 .mk-cat-tag {
    background: rgba(33, 18, 60, .12);
}

    .mk-cat-c3 .mk-cat-tag.robo, .mk-cat-c2 .mk-cat-tag.robo, .mk-cat-c5 .mk-cat-tag.robo,
    .mk-cat-c8 .mk-cat-tag.robo, .mk-cat-c9 .mk-cat-tag.robo, .mk-cat-c11 .mk-cat-tag.robo {
        background: rgba(33, 18, 60, .06);
    }

/* Chiffres clés visibles directement sur la carte */
.mk-cat-quickfacts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    font-weight: 700;
    opacity: .92;
}

    .mk-cat-quickfacts span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .mk-cat-quickfacts i {
        opacity: .8;
    }

/* (Le bandeau .mk-cat-facts est defini plus haut, avec l'encart d'introduction.) */

@media (prefers-reduced-motion: reduce) {
    .mk-cat-card, .mk-cat-icon, .mk-cat-more i, .mk-cat-card::after {
        transition: none;
    }

    .mk-cat-card:hover {
        transform: perspective(1100px); /* pas de bascule ni de translation animée */
    }
}

/* ===== Modale de détail d'un niveau (redesign) ===== */
.mk-cat-modal .modal-content {
    border-radius: 26px;
    border: none;
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(25, 10, 55, .35);
}

/* Accent de la modale = couleur de la carte cliquée.
   La classe .mk-modal-cN (sur .modal-content) pose --mk-modal-accent ;
   le bandeau d'en-tête et le bouton CTA le reprennent, avec un violet par défaut. */

/* Bandeau d'en-tête coloré */
.mk-modal-hero {
    position: relative;
    flex: 0 0 auto;
    padding: 30px 34px 30px;
    color: var(--mk-modal-fg, #fff);
    background: var(--mk-modal-accent, linear-gradient(135deg, #201548 0%, #4a2299 55%, #7b3ff0 100%));
    overflow: hidden;
}

    .mk-modal-hero::after {
        content: "";
        position: absolute;
        right: -40px;
        top: -60px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--mk-modal-glow, rgba(255, 255, 255, .16)), transparent 68%);
    }

/* Accent par carte = couleur de la carte cliquée.
   Cartes foncées → dégradé assombri, texte blanc (valeurs par défaut).
   Cartes claires (ambre, lime, cyan, rose pâle, menthe) → couleur réelle de la carte
   + texte foncé, comme la carte elle-même. */
.mk-modal-c1 { --mk-modal-accent: linear-gradient(135deg, #7b2cff 0%, #4d0a85 55%, #2f075a 100%); }  /* violet, comme le bandeau */
.mk-modal-c4 { --mk-modal-accent: linear-gradient(135deg, #a20d43 0%, #d81159 100%); }   /* rose */
.mk-modal-c6 { --mk-modal-accent: linear-gradient(135deg, #c0350f 0%, #f2542d 100%); }   /* orange */
.mk-modal-c7 { --mk-modal-accent: linear-gradient(135deg, #171235 0%, #2f2557 100%); }   /* bleu nuit */
.mk-modal-c10 { --mk-modal-accent: linear-gradient(135deg, #2c0a4a 0%, #4a1a75 100%); }  /* violet foncé */
.mk-modal-c12 { --mk-modal-accent: linear-gradient(135deg, #17539f 0%, #1f6fd6 100%); }  /* bleu */

.mk-modal-c3,
.mk-modal-c8 {                                                                           /* ambre */
    --mk-modal-accent: linear-gradient(135deg, #ffb23f 0%, #ffc766 100%);
    --mk-modal-fg: #4a3300;
    --mk-modal-chip-bg: rgba(74, 51, 0, .14);
    --mk-modal-glow: rgba(255, 255, 255, .32);
}

.mk-modal-c2 {                                                                           /* lime */
    --mk-modal-accent: linear-gradient(135deg, #95c535 0%, #abd753 100%);
    --mk-modal-fg: #22330a;
    --mk-modal-chip-bg: rgba(34, 51, 10, .14);
    --mk-modal-glow: rgba(255, 255, 255, .32);
}

.mk-modal-c5 {                                                                           /* rose pâle */
    --mk-modal-accent: linear-gradient(135deg, #f6b8cf 0%, #fac9dc 100%);
    --mk-modal-fg: #5b0e40;
    --mk-modal-chip-bg: rgba(91, 14, 64, .12);
    --mk-modal-glow: rgba(255, 255, 255, .4);
}

.mk-modal-c9 {                                                                           /* cyan */
    --mk-modal-accent: linear-gradient(135deg, #63e3e9 0%, #86ebef 100%);
    --mk-modal-fg: #123a4a;
    --mk-modal-chip-bg: rgba(18, 58, 74, .12);
    --mk-modal-glow: rgba(255, 255, 255, .4);
}

.mk-modal-c11 {                                                                          /* menthe */
    --mk-modal-accent: linear-gradient(135deg, #4be7b8 0%, #6ff0cb 100%);
    --mk-modal-fg: #0a3d2d;
    --mk-modal-chip-bg: rgba(10, 61, 45, .12);
    --mk-modal-glow: rgba(255, 255, 255, .4);
}

.mk-modal-hero-icon {
    position: absolute;
    right: 26px;
    bottom: 18px;
    font-size: 58px;
    opacity: .22;
}

.mk-modal-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--mk-modal-chip-bg, rgba(255, 255, 255, .18));
    margin-bottom: 12px;
}

.mk-modal-title {
    font-weight: 900;
    font-size: 25px;
    line-height: 1.2;
    margin: 0;
    color: inherit;
    position: relative;
    z-index: 1;
    max-width: 88%;
}

.mk-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--mk-modal-chip-bg, rgba(255, 255, 255, .16));
    color: inherit;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
    z-index: 2;
}

    .mk-modal-close:hover {
        background: rgba(127, 127, 127, .28);
        transform: rotate(90deg);
    }

.mk-cat-modal .modal-body {
    padding: 28px 34px 32px;
}

/* Le cours en chiffres */
.mk-modal-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.mk-modal-stat {
    text-align: center;
    padding: 14px 8px;
    border-radius: 14px;
    background: linear-gradient(160deg, #f6f0ff 0%, #efe6ff 100%);
    border: 1px solid #e7dcfb;
}

.mk-modal-stat-num {
    display: block;
    font-weight: 900;
    font-size: 20px;
    line-height: 1.1;
    color: #5b0ea0;
}

.mk-modal-stat-label {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #7a6b93;
}

.mk-modal-stats-note {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6a5c86;
    margin: 0 0 22px;
}

    .mk-modal-stats-note i {
        color: #9450ff;
        margin-top: 2px;
    }

@media (max-width: 640px) {
    .mk-modal-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Programme module par module */
.mk-modal-syllabus {
    margin: 22px 0 4px;
}

.mk-modal-syllabus-head {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

    .mk-modal-syllabus-head h4 {
        font-weight: 800;
        font-size: 15px;
        margin: 0 0 3px;
        color: var(--mk-purple-900);
    }

    .mk-modal-syllabus-head p {
        margin: 0;
        font-size: 12.5px;
        color: #6a5c86;
        line-height: 1.5;
    }

.mk-modal-syllabus-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #5b0ea0;
    background: #f3e9ff;
    border-radius: 10px;
    padding: 8px 12px;
    margin: 0 0 12px;
}

/* En-tête d'un parcours « au choix » (12-15 · N3 : Unity / IA 2.0) */
h5.mk-modal-syllabus-parcours {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 18px 0 4px;
    font-size: 13px;
    font-weight: 800;
    color: #4a2299;
}

    h5.mk-modal-syllabus-parcours span {
        margin-left: auto;
        font-size: 11px;
        font-weight: 700;
        color: #7a6b93;
        white-space: nowrap;
    }

    h5.mk-modal-syllabus-parcours i {
        color: #6c2bd9;
        font-size: 12px;
    }

.mk-modal-syllabus-list {
    list-style: none;
    counter-reset: syl;
    margin: 0;
    padding: 0;
}

    .mk-modal-syllabus-list li {
        counter-increment: syl;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 9px 0;
        border-top: 1px solid #f0edf8;
        font-size: 13.5px;
    }

        .mk-modal-syllabus-list li::before {
            content: counter(syl);
            flex: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #ece3ff;
            color: #6c2bd9;
            font-size: 11px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transform: translateY(1px);
        }

.mk-modal-syllabus-body {
    flex: 1;
    min-width: 0;
}

.mk-modal-syllabus-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.mk-modal-syllabus-title {
    flex: 1;
    font-weight: 600;
    color: #2c2340;
}

.mk-modal-syllabus-count {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    color: #7a6b93;
    white-space: nowrap;
}

/* Descriptif d'un module : une ligne « écran » (Algorithmics) + une ligne robotique,
   reprises de la 1re leçon du module (DerouleEcran / VoletRobotique). */
.mk-modal-syllabus-line {
    display: flex;
    gap: 7px;
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.45;
}

    .mk-modal-syllabus-line i {
        flex: none;
        margin-top: 2px;
        font-size: 11px;
    }

    .mk-modal-syllabus-line.algo {
        color: #574a72;
        margin-top: 7px;
    }

        .mk-modal-syllabus-line.algo i {
            color: #6c2bd9;
        }

    .mk-modal-syllabus-line.robo {
        color: #3f6b5c;
    }

        .mk-modal-syllabus-line.robo i {
            color: #0f6b5c;
        }

/* Deux voies : Algorithmics + Robotique côte à côte */
.mk-modal-tracks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}

@media (max-width: 640px) {
    .mk-modal-tracks {
        grid-template-columns: 1fr;
    }
}

.mk-modal-track {
    border: 1px solid #ece7f6;
    border-radius: 16px;
    padding: 16px 18px;
    background: #faf8ff;
    display: flex;
    flex-direction: column;
}

    .mk-modal-track.robo {
        background: #f2fbf8;
        border-color: #d5efe6;
    }

/* Visuel de l'outil / du robot, placé sous le texte, sans cadre.
   mix-blend-mode:multiply fond le blanc des images matricielles dans la teinte de l'encart. */
.mk-modal-track-img {
    order: 2;
    display: block;
    width: auto;
    max-width: 100%;
    height: 72px;
    object-fit: contain;
    object-position: left center;
    margin: 12px 0 0;
    mix-blend-mode: multiply;
}

.mk-modal-track-head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #4a2299;
    margin-bottom: 9px;
}

.mk-modal-track.robo .mk-modal-track-head {
    color: #067a5c;
}

.mk-modal-track p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(33, 18, 60, .82);
}

/* Chip d'icône */
.mk-modal-chip {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #ece3ff;
    color: #6c2bd9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.mk-modal-track.robo .mk-modal-chip {
    background: #d6f2e8;
    color: #067a5c;
}

    .mk-modal-chip.sm {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 14px;
    }

/* Lignes objectifs / activités */
.mk-modal-row {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #f0edf8;
}

    .mk-modal-row h4 {
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--mk-purple-700);
        margin: 3px 0 5px;
    }

    .mk-modal-row p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: rgba(33, 18, 60, .82);
    }

/* Projet final : encart mis en avant */
.mk-modal-project {
    margin-top: 20px;
    border-radius: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f3e9ff 0%, #e9f7f1 100%);
    border: 1px solid #e4dbf5;
}

.mk-modal-project-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mk-purple-900);
    margin-bottom: 7px;
}

    .mk-modal-project-label i {
        color: #6c2bd9;
    }

.mk-modal-project p {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mk-purple-900);
    line-height: 1.55;
}

/* CTA */
.mk-modal-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 24px;
    padding: 15px 24px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    background: var(--mk-modal-accent, linear-gradient(135deg, #6c2bd9 0%, #9450ff 100%));
    box-shadow: 0 14px 32px rgba(25, 10, 55, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .mk-modal-cta:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(25, 10, 55, .4);
    }

    .mk-modal-cta i {
        transition: transform .2s ease;
    }

    .mk-modal-cta:hover i {
        transform: translateX(4px);
    }

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

    .mk-modal-close:hover,
    .mk-modal-cta:hover {
        transform: none;
    }
}

/* =========================================================
   Pages d'authentification Espace Parents (.mk-auth)
   Connexion / Créer un compte / Mot de passe oublié
   ========================================================= */
.mk-auth .mk-auth-lead {
    max-width: 620px;
    margin: 0 auto 8px;
    text-align: center;
    color: rgba(33, 18, 60, .72);
    font-size: 15.5px;
    line-height: 1.6;
}

.mk-auth .mk-card {
    border-radius: var(--mk-radius-xl);
    border: 1px solid rgba(91, 14, 160, .10);
    box-shadow: var(--mk-shadow);
}

.mk-auth .mk-card-pad {
    padding: 26px 26px 24px;
}

.mk-auth .mk-underline {
    width: 54px;
    height: 4px;
    border-radius: 999px;
    margin: 8px auto 4px;
    background: linear-gradient(90deg, #7c3aed 0%, #c9a3ff 100%);
}

.mk-auth .mk-side-card .mk-underline {
    margin-left: 0;
}

.mk-auth .form-label {
    font-weight: 700;
    font-size: 13px;
    color: var(--mk-purple-700);
    margin-bottom: 6px;
    letter-spacing: .1px;
}

.mk-auth .form-control,
.mk-auth .form-select {
    border-radius: 14px;
    border: 1.5px solid rgba(91, 14, 160, .16);
    background: #fbf9ff;
    padding: 11px 14px;
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .mk-auth .form-control:hover,
    .mk-auth .form-select:hover {
        border-color: rgba(91, 14, 160, .30);
    }

    .mk-auth .form-control:focus,
    .mk-auth .form-select:focus {
        border-color: #7c3aed;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(124, 58, 237, .14);
        outline: none;
    }

.mk-auth .mk-auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
    font-size: 13.5px;
    color: rgba(33, 18, 60, .82);
    background: rgba(167, 120, 255, .09);
    border: 1px solid rgba(91, 14, 160, .12);
    border-radius: 14px;
    padding: 12px 14px;
}

    .mk-auth .mk-auth-check input {
        margin-top: 2px;
        width: 17px;
        height: 17px;
        flex: none;
        accent-color: #7c3aed;
    }

.mk-auth .mk-auth-alt {
    text-align: center;
    font-size: 14.5px;
    color: rgba(33, 18, 60, .70);
}

    .mk-auth .mk-auth-alt a {
        font-weight: 800;
    }

.mk-auth .mk-auth-perks {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

    .mk-auth .mk-auth-perks li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 7px 0;
        font-size: 14px;
        color: rgba(33, 18, 60, .82);
    }

        .mk-auth .mk-auth-perks li i {
            color: #2fb673;
            margin-top: 3px;
            font-size: 13px;
            flex: none;
        }

.mk-auth .mk-kv .mk-k i {
    color: #7c3aed;
    margin-right: 7px;
    font-size: 12.5px;
}

.mk-auth .default-btn {
    border-radius: 999px;
    min-width: 220px;
}

@media (max-width: 575.98px) {
    .mk-auth .mk-card-pad {
        padding: 20px 18px;
    }
}

/* Tableau de bord parents — prochains cours par enfant */
.mk-next-course + .mk-next-course {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(91, 14, 160, .18);
}

.mk-next-course-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 900;
    font-size: 14px;
    color: var(--mk-purple-900);
    background: rgba(167, 120, 255, .14);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 8px;
}

    .mk-next-course-name i {
        color: #7c3aed;
        font-size: 12px;
    }
/* =========================================================
   Pages d'administration (.mk-admin) — tableaux & panneaux
   ========================================================= */
.mk-admin .mk-admin-panel {
    background: #fff;
    border-radius: var(--mk-radius-xl);
    border: 1px solid rgba(91, 14, 160, .10);
    box-shadow: var(--mk-shadow);
    padding: 22px 22px 20px;
    margin-bottom: 26px;
}

.mk-admin .mk-admin-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

    .mk-admin .mk-admin-head .mk-card-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        flex: none;
    }

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

    .mk-admin .mk-admin-head .mk-admin-actions {
        margin-left: auto;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

.mk-admin .mk-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 12.5px;
    color: var(--mk-purple-700);
    background: rgba(167, 120, 255, .14);
    border-radius: 999px;
    padding: 3px 11px;
}

/* Barre outil "générer la journée" */
.mk-admin .mk-admin-tool {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    background: rgba(167, 120, 255, .08);
    border: 1px dashed rgba(91, 14, 160, .20);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

    .mk-admin .mk-admin-tool label {
        display: block;
        font-weight: 700;
        font-size: 12.5px;
        color: var(--mk-purple-700);
        margin-bottom: 4px;
    }

    .mk-admin .mk-admin-tool input[type="date"] {
        border-radius: 12px;
        border: 1.5px solid rgba(91, 14, 160, .18);
        padding: 8px 12px;
        font-size: 14px;
        background: #fff;
    }

    .mk-admin .mk-admin-tool .mk-check {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-weight: 600;
        font-size: 13px;
        color: rgba(33, 18, 60, .8);
    }

/* Tableau */
.mk-admin .table-responsive {
    border-radius: 16px;
    border: 1px solid rgba(91, 14, 160, .12);
    overflow: auto;
}

.mk-admin table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
}

    .mk-admin table thead th {
        background: linear-gradient(180deg, #f6efff, #efe6ff);
        color: var(--mk-purple-800);
        font-weight: 800;
        font-size: 11.5px;
        letter-spacing: .4px;
        text-transform: uppercase;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(91, 14, 160, .14);
        white-space: nowrap;
    }

    .mk-admin table tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(91, 14, 160, .08);
        vertical-align: middle;
        color: rgba(33, 18, 60, .86);
    }

    .mk-admin table tbody tr:last-child td {
        border-bottom: none;
    }

    .mk-admin table tbody tr:hover td {
        background: rgba(167, 120, 255, .06);
    }

.mk-admin .mk-td-actions {
    text-align: right;
    white-space: nowrap;
}

/* Chips tranche d'âge */
.mk-admin .mk-chip {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mk-purple-800);
    background: rgba(167, 120, 255, .16);
    border-radius: 999px;
    padding: 2px 9px;
    margin: 2px 3px 2px 0;
}

/* Tranche d'âge ouverte mais sans inscrit : chip grisé */
.mk-admin .mk-chip.mk-chip-vide,
.mk-admin .mk-chip-vide {
    color: rgba(33, 18, 60, .45);
    background: rgba(33, 18, 60, .06);
    font-weight: 700;
}

/* Inscrit sur une tranche non prévue par le créneau : chip ambre */
.mk-admin .mk-chip.mk-chip-alerte {
    color: #8a4b00;
    background: rgba(255, 178, 63, .28);
}

/* Créneaux : une ligne par tranche d'âge — trait de séparation entre créneaux
   + lignes de suite resserrées et infos communes estompées */
.mk-admin #creneauxBody tr.creneau-first > td {
    border-top: 2px solid rgba(91, 14, 160, .16);
}

.mk-admin #creneauxBody tr.creneau-suite > td {
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 1px solid rgba(91, 14, 160, .05);
}

/* Badge Actif */
.mk-admin .mk-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 999px;
    padding: 3px 10px;
}

    .mk-admin .mk-badge.on {
        color: #0a3d2d;
        background: #b8f0d8;
    }

    .mk-admin .mk-badge.off {
        color: #5b5b5b;
        background: #e4e4e4;
    }

/* Capacité */
.mk-admin .mk-cap {
    font-weight: 800;
    font-size: 13px;
}

    .mk-admin .mk-cap.full {
        color: #d81159;
    }

/* Boutons d'action compacts */
.mk-admin .mk-btn-xs {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
    font-size: 12.5px;
    border-radius: 999px;
    padding: 6px 13px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

    .mk-admin .mk-btn-xs.edit {
        color: var(--mk-purple-800);
        background: rgba(124, 58, 237, .12);
        border-color: rgba(124, 58, 237, .18);
    }

        .mk-admin .mk-btn-xs.edit:hover {
            background: rgba(124, 58, 237, .2);
        }

    .mk-admin .mk-btn-xs.del {
        color: #b00b46;
        background: rgba(216, 17, 89, .1);
        border-color: rgba(216, 17, 89, .18);
    }

        .mk-admin .mk-btn-xs.del:hover {
            background: rgba(216, 17, 89, .18);
        }

.mk-admin .mk-empty {
    text-align: center;
    color: rgba(33, 18, 60, .6);
    padding: 26px 10px;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .mk-admin .mk-admin-panel { padding: 16px 14px; }
    .mk-admin .mk-admin-head .mk-admin-actions { margin-left: 0; width: 100%; }
}

/* Barre de suppression multiple */
.mk-admin .mk-bulk-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(216, 17, 89, .05);
    border: 1px dashed rgba(216, 17, 89, .18);
    border-radius: 12px;
}

    .mk-admin .mk-bulk-bar .mk-check {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-weight: 700;
        font-size: 13px;
        color: var(--mk-purple-800);
    }

    .mk-admin .mk-bulk-bar .mk-btn-xs.del[disabled] {
        opacity: .45;
        cursor: not-allowed;
    }

.mk-admin table .chkCreneau,
.mk-admin #chkAllCreneaux,
.mk-admin .mk-bulk-bar input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #7c3aed;
    cursor: pointer;
}

/* Lien "voir le détail" dans un tableau admin */
.mk-admin .mk-td-link {
    color: var(--mk-purple-800);
    text-decoration: none;
}

    .mk-admin .mk-td-link:hover {
        text-decoration: underline;
        color: #7c3aed;
    }

.mk-admin .mk-btn-xs.view {
    color: #17539f;
    background: rgba(58, 124, 255, .12);
    border-color: rgba(58, 124, 255, .18);
}

    .mk-admin .mk-btn-xs.view:hover {
        background: rgba(58, 124, 255, .2);
    }

/* Bleu du design du site, plein (bouton « Affecter / Changer ») */
.mk-admin .mk-btn-xs.affect {
    color: #ffffff;
    background: linear-gradient(135deg, #3a7cff, #63b3ff);
    border-color: transparent;
}

    .mk-admin .mk-btn-xs.affect:hover {
        color: #ffffff;
        filter: brightness(.95);
    }

/* Cartes cursus Algorithmics & Robotique : bouton « Réservez votre cours d'essai »
   côte à côte avec « Voir le programme » */
.mk-cat-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
    align-self: stretch;
}

    .mk-cat-actions > .mk-cat-more,
    .mk-cat-actions > .mk-cat-reserve {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
        align-self: stretch;
        padding: 8px 10px;
        font-size: 11.5px;
        line-height: 1.2;
    }

/* Même habillage que « Voir le programme » (.mk-cat-more) */
.mk-cat-reserve {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .22);
    color: inherit;
    font-weight: 800;
    font-size: 13.5px;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s ease;
}

    .mk-cat-reserve:hover {
        background: rgba(255, 255, 255, .38);
        color: inherit;
    }

    .mk-cat-reserve i {
        font-size: 12px;
    }

/* Cartes à fond clair (jaune / vert / rose / cyan / menthe) : puce sombre */
.mk-cat-c3 .mk-cat-reserve, .mk-cat-c2 .mk-cat-reserve, .mk-cat-c5 .mk-cat-reserve,
.mk-cat-c8 .mk-cat-reserve, .mk-cat-c9 .mk-cat-reserve, .mk-cat-c11 .mk-cat-reserve {
    background: rgba(33, 18, 60, .10);
}

    .mk-cat-c3 .mk-cat-reserve:hover, .mk-cat-c2 .mk-cat-reserve:hover, .mk-cat-c5 .mk-cat-reserve:hover,
    .mk-cat-c8 .mk-cat-reserve:hover, .mk-cat-c9 .mk-cat-reserve:hover, .mk-cat-c11 .mk-cat-reserve:hover {
        background: rgba(33, 18, 60, .20);
    }

/* Champs de formulaire dans les panneaux admin (formulaires inline des tableaux) */
.mk-admin .form-control,
.mk-admin .form-control-sm,
.mk-admin select.form-control {
    border-radius: 10px;
    border: 1.5px solid rgba(91, 14, 160, .16);
    background: #fbf9ff;
    padding: 7px 10px;
    font-size: 13px;
    max-width: 100%;
}

    .mk-admin .form-control:focus,
    .mk-admin select.form-control:focus {
        border-color: #7c3aed;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
        outline: none;
    }

.mk-admin .mk-inline-form {
    margin-top: 8px;
    padding: 10px;
    background: rgba(167, 120, 255, .07);
    border: 1px solid rgba(91, 14, 160, .12);
    border-radius: 12px;
}

/* Formulaires admin pleine page (créer / modifier un créneau, un enseignant…) */
.mk-admin .mk-admin-form .form-group {
    margin-bottom: 16px;
}

.mk-admin .mk-admin-form > .form-group > label,
.mk-admin .mk-admin-form .mk-field-label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: var(--mk-purple-700);
    margin-bottom: 6px;
    letter-spacing: .1px;
}

.mk-admin .mk-admin-form .form-control {
    width: 100%;
    font-size: 15px;
    padding: 11px 14px;
    border-radius: 12px;
}

.mk-admin .mk-admin-form .mk-check-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mk-admin .mk-admin-form .mk-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13.5px;
    color: rgba(33, 18, 60, .82);
    background: rgba(167, 120, 255, .09);
    border: 1px solid rgba(91, 14, 160, .12);
    border-radius: 12px;
    padding: 9px 13px;
    cursor: pointer;
}

    .mk-admin .mk-admin-form .mk-check input {
        width: 16px;
        height: 16px;
        accent-color: #7c3aed;
        margin: 0;
    }

.mk-admin .mk-admin-form .mk-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.mk-admin .mk-admin-form .text-danger {
    display: block;
    font-size: 12.5px;
    margin-top: 4px;
}

.mk-admin .mk-pref {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(33, 18, 60, .6);
}

.mk-admin .mk-badge.pending {
    color: #7a4f00;
    background: #ffe1a8;
}

.mk-admin .mk-badge.sent {
    color: #0b4a63;
    background: #b8e6f5;
}

/* Filtre par statut au-dessus des tableaux admin */
.mk-admin .mk-filterbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

    .mk-admin .mk-filterbar label {
        font-weight: 800;
        font-size: 12.5px;
        color: var(--mk-purple-700);
        margin: 0;
    }

    .mk-admin .mk-filterbar select {
        width: auto;
        min-width: 240px;
        font-weight: 700;
    }

/* ===================================================================
   Bouton radio « pilule » — utilisé pour les choix de créneau (jour,
   horaire) dans le formulaire parent « Inscrire mon enfant ». Volontairement
   non scopé à .mk-admin : réutilisé côté parent.
   =================================================================== */
.mk-radio-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 2px solid var(--mk-lavender-2);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mk-purple-700);
    cursor: pointer;
    transition: all .15s ease;
}

    .mk-radio-pill input {
        position: static;
        opacity: 1;
        pointer-events: auto;
        width: 15px;
        height: 15px;
        margin: 0;
        flex: 0 0 auto;
        accent-color: var(--mk-purple-700);
    }

    .mk-radio-pill:has(input:checked) {
        background: var(--mk-purple-700);
        border-color: var(--mk-purple-700);
        color: #fff;
    }


/* =========================================================
   Documents déposés sur les comptes élèves (espace parents + dépôt équipe)
   ========================================================= */
.mk-doc-texte {
    margin-top: 6px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: rgba(107,43,214,.05);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
}

.mk-doc-lien {
    margin-top: 6px;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.mk-doc-fichiers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.mk-doc-fichier {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(107,43,214,.25);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--mk-purple-700);
    text-decoration: none;
}

    .mk-doc-fichier:hover {
        background: rgba(107,43,214,.07);
    }

    .mk-doc-fichier span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .mk-doc-fichier small {
        font-weight: 400;
        color: rgba(33,18,60,.55);
        flex: 0 0 auto;
    }


.mk-choix-eleves {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.mk-choix-eleve-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(107,43,214,.2);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
}

    .mk-choix-eleve-item:has(input:checked) {
        background: rgba(107,43,214,.07);
        border-color: rgba(107,43,214,.45);
    }

    .mk-choix-eleve-item input {
        margin-top: 4px;
        accent-color: var(--mk-purple-700);
    }

    .mk-choix-eleve-item small {
        display: block;
        color: rgba(33,18,60,.6);
    }

/* Page Algorithmics & Robotique : image de fond decorative sur les cotes de la grille des niveaux */
.mk-programs.mk-cat-bg {
    position: relative;
    isolation: isolate;
    clip-path: inset(0); /* limite le fond fixe (::before) a cette section */
    background: #fff;
}

    /* Fond discret : image fixe, nette mais tres attenuee pour ne pas envahir les cartes */
    .mk-programs.mk-cat-bg::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: url("../assets/img/class/AlgorithmicsFond.webp") center top / cover no-repeat;
        opacity: .1;
        pointer-events: none;
    }

@media (max-width: 991px) {
    /* Sur tablette / mobile les cartes prennent toute la largeur : pas de fond */
    .mk-programs.mk-cat-bg::before {
        display: none;
    }
}