/* =========================================================
   CLASSMIRROR HOME V133 — ENRICHISSEMENT
========================================================= */

.cm133-section{
    padding:82px 0;
}

.cm133-soft{
    background:
        linear-gradient(
            180deg,
            #fbfbff,
            #f6f5fc
        );
}

.cm133-shell{
    width:min(
        calc(100% - 40px),
        1180px
    );
    margin:0 auto;
}

.cm133-head{
    max-width:780px;
    margin:0 auto 38px;
    text-align:center;
}

.cm133-kicker{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-bottom:13px;

    color:#6551d9;

    font-size:11px;
    font-weight:950;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.cm133-head h2{
    margin:0;

    color:#262c43;

    font-size:
        clamp(32px,4.2vw,51px);

    line-height:1.05;
    letter-spacing:-.04em;
}

.cm133-head p{
    max-width:700px;

    margin:14px auto 0;

    color:#70788a;

    font-size:14px;
    line-height:1.75;
}


/* =========================================================
   MATIERES
========================================================= */

.cm133-subjects{
    display:grid;

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

    gap:16px;
}

.cm133-subject{
    position:relative;

    min-height:285px;

    padding:24px;

    overflow:hidden;

    background:#fff;

    border:1px solid #e8e7ef;
    border-radius:22px;

    box-shadow:
        0 16px 45px
        rgba(40,35,90,.07);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.cm133-subject:hover{
    transform:translateY(-4px);

    box-shadow:
        0 23px 55px
        rgba(40,35,90,.11);
}

.cm133-subject-icon{
    display:grid;
    place-items:center;

    width:48px;
    height:48px;

    margin-bottom:20px;

    font-size:23px;

    background:#f3f0ff;

    border-radius:15px;
}

.cm133-subject h3{
    margin:0 0 11px;

    color:#292e45;

    font-size:18px;
}

.cm133-subject p{
    margin:0 0 16px;

    color:#71798b;

    font-size:12.5px;
    line-height:1.65;
}

.cm133-example{
    padding:12px 13px;

    color:#5a4a99;

    font-size:11px;
    font-weight:800;
    line-height:1.55;

    background:#f7f5ff;

    border:1px solid #e8e2ff;
    border-radius:13px;
}


/* =========================================================
   INTELLIGENCE CLASSMIRROR
========================================================= */

.cm133-intelligence{
    display:grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap:25px;

    align-items:stretch;
}

.cm133-intro{
    padding:34px;

    color:#fff;

    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(126,225,206,.22),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #21154e,
            #46328e
        );

    border-radius:26px;
}

.cm133-intro .cm133-kicker{
    color:#b9acef;
}

.cm133-intro h2{
    margin:8px 0 15px;

    font-size:
        clamp(30px,4vw,48px);

    line-height:1.04;
    letter-spacing:-.04em;
}

.cm133-intro p{
    margin:0;

    color:#ddd8f2;

    line-height:1.75;
}

.cm133-ai-grid{
    display:grid;

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

    gap:15px;
}

.cm133-ai-card{
    padding:24px;

    background:#fff;

    border:1px solid #e7e7ef;
    border-radius:20px;

    box-shadow:
        0 14px 38px
        rgba(38,35,85,.055);
}

.cm133-ai-card span{
    display:grid;
    place-items:center;

    width:42px;
    height:42px;

    margin-bottom:15px;

    font-size:20px;

    background:#f3f1ff;

    border-radius:13px;
}

.cm133-ai-card h3{
    margin:0 0 8px;

    color:#2c3147;

    font-size:16px;
}

.cm133-ai-card p{
    margin:0;

    color:#747b8d;

    font-size:12px;
    line-height:1.65;
}


/* =========================================================
   ANALYSE
========================================================= */

.cm133-analysis-grid{
    display:grid;

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

    gap:14px;
}

.cm133-analysis-card{
    padding:22px;

    background:#fff;

    border:1px solid #e8e7ef;
    border-radius:18px;
}

.cm133-analysis-card .num{
    display:inline-flex;

    margin-bottom:12px;

    color:#6951da;

    font-size:10px;
    font-weight:950;
    letter-spacing:.12em;
}

.cm133-analysis-card h3{
    margin:0 0 7px;

    color:#30364d;

    font-size:15px;
}

.cm133-analysis-card p{
    margin:0;

    color:#7a8191;

    font-size:11.5px;
    line-height:1.65;
}


/* =========================================================
   OUTILS
========================================================= */

.cm133-tools{
    display:grid;

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

    gap:15px;
}

.cm133-tool{
    display:flex;
    align-items:flex-start;

    gap:15px;

    padding:21px;

    color:inherit;
    text-decoration:none;

    background:#fff;

    border:1px solid #e6e6ed;
    border-radius:18px;

    transition:
        transform .18s ease,
        border-color .18s ease;
}

.cm133-tool:hover{
    transform:translateY(-3px);
    border-color:#cfc5ff;
}

.cm133-tool-icon{
    display:grid;
    place-items:center;

    flex:0 0 44px;

    width:44px;
    height:44px;

    font-size:20px;

    background:#f3f1ff;
    border-radius:13px;
}

.cm133-tool h3{
    margin:1px 0 5px;

    color:#30354a;

    font-size:14px;
}

.cm133-tool p{
    margin:0;

    color:#767e90;

    font-size:11px;
    line-height:1.55;
}


/* =========================================================
   PUBLICS
========================================================= */

.cm133-audiences{
    display:grid;

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

    gap:18px;
}

.cm133-audience{
    padding:29px;

    background:#fff;

    border:1px solid #e8e7ef;
    border-radius:22px;
}

.cm133-audience-icon{
    font-size:28px;
}

.cm133-audience h3{
    margin:15px 0 8px;

    color:#292f46;

    font-size:20px;
}

.cm133-audience p{
    margin:0;

    color:#747c8e;

    font-size:12.5px;
    line-height:1.7;
}

.cm133-audience.family{
    color:#fff;

    background:
        linear-gradient(
            145deg,
            #302064,
            #6746ce
        );

    border-color:transparent;
}

.cm133-audience.family h3{
    color:#fff;
}

.cm133-audience.family p{
    color:#e7e1fa;
}


/* =========================================================
   MINI FLOW
========================================================= */

.cm133-flow{
    display:flex;
    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:34px;
}

.cm133-flow span{
    padding:10px 14px;

    color:#554296;

    font-size:11px;
    font-weight:950;

    background:#f5f2ff;

    border:1px solid #e7e0ff;
    border-radius:999px;
}

.cm133-flow b{
    color:#aaa4c6;
}


/* =========================================================
   CTA
========================================================= */

.cm133-more{
    margin-top:34px;
    text-align:center;
}

.cm133-more a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;

    padding:0 20px;

    color:#fff;

    font-size:12px;
    font-weight:900;
    text-decoration:none;

    background:#644cdf;

    border-radius:13px;

    box-shadow:
        0 12px 25px
        rgba(93,71,205,.22);
}


/* =========================================================
   RTL
========================================================= */

html[dir="rtl"] .cm133-section{
    direction:rtl;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .cm133-subjects{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .cm133-intelligence{
        grid-template-columns:1fr;
    }

    .cm133-tools{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media(max-width:700px){

    .cm133-section{
        padding:60px 0;
    }

    .cm133-shell{
        width:min(
            calc(100% - 24px),
            1180px
        );
    }

    .cm133-subjects,
    .cm133-ai-grid,
    .cm133-analysis-grid,
    .cm133-tools,
    .cm133-audiences{
        grid-template-columns:1fr;
    }

    .cm133-intro{
        padding:26px;
    }

}

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

    .cm133-subject,
    .cm133-tool{
        transition:none;
    }

}