/* ============================================================







   CLASSMIRROR — MIRROR FLOW V109







   Transition premium compacte.







   VISUEL UNIQUEMENT :







   - aucun pourcentage ;







   - aucun faux temps ;







   - aucune modification de logique ;







   - aucun avatar ;







   - aucun changement du microphone.







   ============================================================ */















:root {







    --cm-mf-ink: #18152d;







    --cm-mf-muted: #716b86;







    --cm-mf-soft: #9b95aa;







    --cm-mf-violet: #6f5cff;







    --cm-mf-violet-2: #9b8cff;







    --cm-mf-blue: #5ba6ff;







    --cm-mf-border: rgba(91, 78, 173, 0.12);







    --cm-mf-card: rgba(255, 255, 255, 0.94);







}















#cm-transition-v89,







.cm-transition-v89,







#cm-wait-screen-v35,







.cm-wait-screen-v35 {







    display: none !important;







    visibility: hidden !important;







    opacity: 0 !important;







    pointer-events: none !important;







}















html.cm-mirror-flow-open,







body.cm-mirror-flow-open {







    overflow: hidden !important;







}















.cm-mirror-flow {







    position: fixed;







    inset: 0;







    z-index: 2147483000;







    display: grid;







    place-items: center;







    padding: 22px;







    color: var(--cm-mf-ink);







    background:







        radial-gradient(circle at 16% 18%, rgba(91, 166, 255, 0.10), transparent 28%),







        radial-gradient(circle at 82% 76%, rgba(111, 92, 255, 0.10), transparent 30%),







        linear-gradient(180deg, rgba(249, 249, 254, 0.975), rgba(244, 243, 252, 0.985));







    opacity: 0;







    visibility: hidden;







    pointer-events: none;







    transition: opacity 190ms ease, visibility 190ms ease;







    isolation: isolate;







}















.cm-mirror-flow.is-visible {







    opacity: 1;







    visibility: visible;







    pointer-events: all;







}















.cm-mf-ambient {







    position: absolute;







    inset: 0;







    overflow: hidden;







    pointer-events: none;







}















.cm-mf-orb {







    position: absolute;







    border-radius: 999px;







    filter: blur(90px);







    opacity: 0.17;







    animation: cmMf109Ambient 10s ease-in-out infinite alternate;







}















.cm-mf-orb-a {







    width: 360px;







    height: 360px;







    left: -70px;







    top: -80px;







    background: rgba(91, 166, 255, 0.25);







}















.cm-mf-orb-b {







    width: 390px;







    height: 390px;







    right: -90px;







    bottom: -110px;







    background: rgba(111, 92, 255, 0.22);







    animation-delay: -4s;







}















.cm-mf-orb-c {







    display: none;







}















@keyframes cmMf109Ambient {







    from { transform: translate3d(-8px, -5px, 0) scale(0.97); }







    to   { transform: translate3d(16px, 12px, 0) scale(1.04); }







}















.cm-mf-particle {







    display: none !important;







}















/* Carte principale : plus compacte et plus lisible. */







.cm-mf-shell {







    position: relative;







    z-index: 2;







    width: min(860px, calc(100vw - 36px));







    min-height: 430px;







    max-height: calc(100vh - 36px);







    overflow: hidden;







    padding: 76px 46px 46px;







    border: 1px solid rgba(255, 255, 255, 0.96);







    border-radius: 30px;







    background:







        linear-gradient(145deg, rgba(255,255,255,0.97), rgba(249,248,255,0.92));







    box-shadow:







        0 32px 90px rgba(45, 37, 102, 0.16),







        0 8px 28px rgba(45, 37, 102, 0.06),







        inset 0 1px 0 rgba(255,255,255,0.98);







    backdrop-filter: blur(24px);







    -webkit-backdrop-filter: blur(24px);







}















.cm-mf-shell::before {







    content: "";







    position: absolute;







    inset: 0;







    pointer-events: none;







    border-radius: inherit;







    background:







        linear-gradient(90deg, rgba(111,92,255,0.055), transparent 26%),







        radial-gradient(circle at 22% 50%, rgba(91,166,255,0.06), transparent 29%);







}















.cm-mf-topline {







    position: absolute;







    z-index: 3;







    top: 25px;







    left: 30px;







    right: 30px;







    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: 18px;







    padding-bottom: 16px;







    border-bottom: 1px solid rgba(91, 78, 173, 0.08);







    color: var(--cm-mf-muted);







    font-size: 12px;







}















.cm-mf-brand-pill {







    display: inline-flex;







    align-items: center;







    gap: 9px;







    padding: 7px 11px;







    color: #5849c5;







    font-weight: 900;







    letter-spacing: -0.01em;







    background: rgba(111, 92, 255, 0.07);







    border: 1px solid rgba(111, 92, 255, 0.09);







    border-radius: 999px;







}















.cm-mf-live-dot {







    width: 7px;







    height: 7px;







    flex: 0 0 auto;







    border-radius: 999px;







    background: var(--cm-mf-violet);







    box-shadow: 0 0 0 4px rgba(111, 92, 255, 0.08);







    animation: cmMf109Pulse 1.9s ease-in-out infinite;







}















@keyframes cmMf109Pulse {







    0%, 100% { opacity: 0.62; transform: scale(0.92); }







    50% { opacity: 1; transform: scale(1.08); }







}















.cm-mf-stage-label {







    max-width: 55%;







    overflow: hidden;







    text-overflow: ellipsis;







    white-space: nowrap;







    color: #676078;







    font-weight: 800;







}















/* Deux colonnes : identité visuelle à gauche, information à droite. */







.cm-mf-core {







    position: relative;







    z-index: 2;







    width: 100%;







    min-height: 292px;







    display: grid;







    grid-template-columns: 230px minmax(0, 1fr);







    grid-template-areas:







        "visual context"







        "visual title"







        "visual status"







        "visual hint";







    column-gap: 44px;







    align-content: center;







    align-items: center;







    text-align: left;







}















.cm-mf-flow-wrap {







    grid-area: visual;







    position: relative;







    width: 214px;







    height: 214px;







    display: grid;







    place-items: center;







    margin: 0;







}















/* Animation volontairement sobre : un seul mouvement principal. */







.cm-mf-halo {







    position: absolute;







    inset: 19px;







    border-radius: 50%;







    background:







        radial-gradient(circle, rgba(111, 92, 255, 0.12), rgba(91, 166, 255, 0.045) 50%, transparent 72%);







    filter: blur(4px);







    animation: cmMf109Halo 3.4s ease-in-out infinite;







}















@keyframes cmMf109Halo {







    0%, 100% { transform: scale(0.97); opacity: 0.55; }







    50% { transform: scale(1.035); opacity: 0.88; }







}















.cm-mf-ring {







    position: absolute;







    border-radius: 50%;







    border: 1px solid transparent;







}















.cm-mf-ring-a {







    inset: 12px;







    background:







        linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.88)) padding-box,







        conic-gradient(







            from 20deg,







            rgba(111,92,255,0.14),







            rgba(111,92,255,0.84),







            rgba(91,166,255,0.52),







            rgba(111,92,255,0.14)







        ) border-box;







    filter: drop-shadow(0 0 14px rgba(111,92,255,0.12));







    animation: cmMf109Spin 8.5s linear infinite;







}















.cm-mf-ring-b {







    inset: 32px;







    border-color: rgba(111, 92, 255, 0.14);







    box-shadow: inset 0 0 34px rgba(111, 92, 255, 0.035);







    animation: none;







}















.cm-mf-ring-c {







    inset: 49px;







    border-color: rgba(91, 166, 255, 0.12);







    animation: none;







}















@keyframes cmMf109Spin {







    to { transform: rotate(360deg); }







}















.cm-mf-orbit-dot {







    display: none !important;







}















.cm-mf-brand-core {







    position: relative;







    width: 118px;







    height: 118px;







    display: grid;







    place-items: center;







    overflow: hidden;







    border: 1px solid rgba(111, 92, 255, 0.11);







    border-radius: 28px;







    background:







        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(246,244,255,0.94));







    box-shadow:







        0 18px 45px rgba(60, 50, 124, 0.11),







        inset 0 1px 0 rgba(255,255,255,0.98);







    transform: rotate(-2deg);







}















.cm-mf-brand-core::before {







    content: "";







    position: absolute;







    inset: 0;







    background:







        linear-gradient(135deg, rgba(111,92,255,0.05), transparent 45%, rgba(91,166,255,0.06));







}















.cm-mf-brand-core::after {







    content: "";







    position: absolute;







    width: 56px;







    height: 170px;







    top: -34px;







    left: -95px;







    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);







    transform: rotate(18deg);







    animation: cmMf109Shine 4.8s ease-in-out infinite;







}















@keyframes cmMf109Shine {







    0%, 62% { left: -95px; opacity: 0; }







    72% { opacity: 0.75; }







    100% { left: 160px; opacity: 0; }







}















.cm-mf-brand-copy {







    position: relative;







    z-index: 2;







    text-align: center;







}















.cm-mf-brand-name {







    display: block;







    color: var(--cm-mf-ink);







    font-size: 16px;







    font-weight: 950;







    letter-spacing: -0.03em;







}















.cm-mf-brand-sub {







    display: block;







    margin-top: 5px;







    color: #817a97;







    font-size: 8px;







    font-weight: 900;







    letter-spacing: 0.15em;







    text-transform: uppercase;







}















.cm-mf-context {







    grid-area: context;







    max-width: 100%;







    min-height: 20px;







    margin: 0 0 9px;







    overflow: hidden;







    color: #6e6682;







    font-size: 12px;







    font-weight: 850;







    letter-spacing: 0.025em;







    text-overflow: ellipsis;







    white-space: nowrap;







    text-transform: uppercase;







}















.cm-mf-title {







    grid-area: title;







    max-width: 520px;







    margin: 0;







    color: var(--cm-mf-ink);







    font-size: clamp(28px, 4vw, 40px);







    font-weight: 950;







    line-height: 1.08;







    letter-spacing: -0.045em;







}















.cm-mf-status {







    grid-area: status;







    position: relative;







    min-height: 31px;







    margin-top: 18px;







    padding-left: 24px;







    color: #554e69;







    font-size: 14px;







    font-weight: 760;







    line-height: 1.45;







    transition: opacity 220ms ease, transform 220ms ease;







}















.cm-mf-status::before {







    content: "";







    position: absolute;







    left: 0;







    top: 7px;







    width: 10px;







    height: 10px;







    border: 2px solid rgba(111, 92, 255, 0.20);







    border-top-color: var(--cm-mf-violet);







    border-radius: 50%;







    animation: cmMf109StatusSpin 0.9s linear infinite;







}















.cm-mf-status::after {







    content: "";







    position: absolute;







    left: 24px;







    bottom: -9px;







    width: min(260px, 72%);







    height: 2px;







    overflow: hidden;







    border-radius: 999px;







    background:







        linear-gradient(







            90deg,







            rgba(111,92,255,0.05),







            rgba(111,92,255,0.56),







            rgba(91,166,255,0.28),







            rgba(111,92,255,0.05)







        );







    background-size: 210% 100%;







    animation: cmMf109Activity 2.2s linear infinite;







}















@keyframes cmMf109StatusSpin {







    to { transform: rotate(360deg); }







}















@keyframes cmMf109Activity {







    from { background-position: 100% 0; }







    to   { background-position: -110% 0; }







}















.cm-mf-status.is-changing {







    opacity: 0;







    transform: translateY(4px);







}















.cm-mf-hint {







    grid-area: hint;







    max-width: 520px;







    margin-top: 25px;







    padding: 12px 14px;







    border: 1px solid rgba(111, 92, 255, 0.08);







    border-radius: 13px;







    color: #817b91;







    background: rgba(111, 92, 255, 0.035);







    font-size: 11.5px;







    font-weight: 600;







    line-height: 1.5;







}















.cm-mf-signature {







    position: absolute;







    z-index: 3;







    right: 30px;







    bottom: 22px;







    left: auto;







    color: #aaa4b5;







    font-size: 9px;







    font-weight: 850;







    letter-spacing: 0.08em;







    text-transform: uppercase;







}















/* RTL */







.cm-mirror-flow[dir="rtl"] .cm-mf-core {







    text-align: right;







}















.cm-mirror-flow[dir="rtl"] .cm-mf-status {







    padding-right: 24px;







    padding-left: 0;







}















.cm-mirror-flow[dir="rtl"] .cm-mf-status::before {







    right: 0;







    left: auto;







}















.cm-mirror-flow[dir="rtl"] .cm-mf-status::after {







    right: 24px;







    left: auto;







}















/* Tablette / mobile */







@media (max-width: 720px) {







    .cm-mirror-flow {







        padding: 12px;







    }















    .cm-mf-shell {







        width: calc(100vw - 24px);







        min-height: calc(100vh - 24px);







        max-height: calc(100vh - 24px);







        padding: 76px 22px 44px;







        border-radius: 25px;







        overflow-y: auto;







    }















    .cm-mf-topline {







        top: 22px;







        left: 20px;







        right: 20px;







    }















    .cm-mf-stage-label {







        max-width: 48%;







    }















    .cm-mf-core {







        min-height: auto;







        grid-template-columns: 1fr;







        grid-template-areas:







            "visual"







            "context"







            "title"







            "status"







            "hint";







        justify-items: center;







        text-align: center;







    }















    .cm-mf-flow-wrap {







        width: 174px;







        height: 174px;







        margin: 4px 0 20px;







    }















    .cm-mf-brand-core {







        width: 94px;







        height: 94px;







        border-radius: 23px;







    }















    .cm-mf-brand-name {







        font-size: 14px;







    }















    .cm-mf-context,







    .cm-mf-title,







    .cm-mf-status,







    .cm-mf-hint {







        max-width: min(520px, 88vw);







    }















    .cm-mf-context {







        text-align: center;







    }















    .cm-mf-title {







        font-size: clamp(25px, 8vw, 34px);







        text-align: center;







    }















    .cm-mf-status {







        margin-top: 16px;







        text-align: left;







    }















    .cm-mf-hint {







        margin-top: 24px;







        text-align: center;







    }















    .cm-mf-signature {







        right: 20px;







        bottom: 17px;







    }







}















@media (max-height: 620px) and (min-width: 721px) {







    .cm-mf-shell {







        min-height: calc(100vh - 28px);







        padding-top: 70px;







        padding-bottom: 34px;







    }















    .cm-mf-core {







        min-height: 245px;







    }















    .cm-mf-flow-wrap {







        width: 188px;







        height: 188px;







    }















    .cm-mf-brand-core {







        width: 102px;







        height: 102px;







    }















    .cm-mf-hint {







        margin-top: 20px;







    }







}















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







    .cm-mirror-flow *,







    .cm-mirror-flow *::before,







    .cm-mirror-flow *::after {







        animation-duration: 0.001ms !important;







        animation-iteration-count: 1 !important;







        transition-duration: 0.001ms !important;







    }







}













/* === CLASSMIRROR V110 ORBITE JAD MAYA LINA : BEGIN === */













/*






   V110 - nouvelle scene visuelle de transition.






   Jad, Maya et Lina font un demi-tour autour d'une sphere.






   Aucun pourcentage et aucun faux temps.






   La logique de soumission/tours de Mirror Flow reste inchangee.






*/













.cm-mf-shell {






    width: min(1020px, calc(100vw - 36px));






    min-height: 520px;






    padding: 76px 46px 46px;






}













.cm-mf-core {






    min-height: 390px;






    grid-template-columns: 470px minmax(0, 1fr);






    column-gap: 38px;






}













.cm-mf-flow-wrap {






    width: 450px;






    height: 360px;






    overflow: visible;






}













.cm-mf-flow-wrap > .cm-mf-halo,






.cm-mf-flow-wrap > .cm-mf-ring,






.cm-mf-flow-wrap > .cm-mf-orbit-dot,






.cm-mf-flow-wrap > .cm-mf-brand-core {






    display: none !important;






}













.cm110-scene {






    position: absolute;






    inset: 0;






    display: grid;






    place-items: center;






    overflow: visible;






    isolation: isolate;






}













.cm110-scene::before {






    content: "";






    position: absolute;






    left: 50%;






    top: 52%;






    width: 410px;






    height: 196px;






    transform: translate(-50%, -50%);






    border: 1px solid rgba(111, 92, 255, 0.18);






    border-radius: 50%;






    box-shadow:






        0 0 32px rgba(91, 166, 255, 0.09),






        inset 0 0 28px rgba(111, 92, 255, 0.04);






}













.cm110-scene::after {






    content: "";






    position: absolute;






    left: 50%;






    top: 52%;






    width: 365px;






    height: 156px;






    transform: translate(-50%, -50%) rotate(-8deg);






    border-top: 2px solid rgba(91, 166, 255, 0.28);






    border-radius: 50%;






    filter: drop-shadow(0 0 8px rgba(91, 166, 255, 0.18));






}













.cm110-sphere {






    position: absolute;






    z-index: 4;






    left: 50%;






    top: 52%;






    width: 182px;






    height: 182px;






    transform: translate(-50%, -50%);






    overflow: hidden;






    display: grid;






    place-items: center;






    border: 1px solid rgba(255,255,255,.95);






    border-radius: 50%;






    background:






        radial-gradient(circle at 31% 25%, rgba(255,255,255,.94), transparent 14%),






        radial-gradient(circle at 55% 45%, rgba(105,229,255,.28), transparent 30%),






        radial-gradient(circle at center, #735fff 0%, #5d8fff 48%, #35c6df 100%);






    box-shadow:






        0 20px 52px rgba(69, 74, 170, .22),






        0 0 0 10px rgba(111,92,255,.055),






        0 0 46px rgba(70,191,241,.22),






        inset -22px -24px 42px rgba(46,45,135,.22),






        inset 16px 14px 28px rgba(255,255,255,.17);






    animation: cm110SphereFloat 3.2s ease-in-out infinite;






}













.cm110-sphere::before {






    content: "";






    position: absolute;






    width: 238px;






    height: 76px;






    left: 50%;






    top: 50%;






    transform: translate(-50%, -50%) rotate(-8deg);






    border: 1px solid rgba(255,255,255,.28);






    border-radius: 50%;






    box-shadow:






        0 -44px 0 -43px rgba(255,255,255,.20),






        0 44px 0 -43px rgba(255,255,255,.20);






    animation: cm110SphereTurn 5.5s linear infinite;






}













.cm110-sphere::after {






    content: "";






    position: absolute;






    inset: 11px;






    border-radius: 50%;






    background:






        linear-gradient(90deg, transparent 49%, rgba(255,255,255,.16) 50%, transparent 51%),






        linear-gradient(0deg, transparent 49%, rgba(255,255,255,.12) 50%, transparent 51%);






    background-size: 32px 32px;






    opacity: .56;






    animation: cm110GridDrift 7s linear infinite;






}













.cm110-sphere-copy {






    position: relative;






    z-index: 3;






    width: 130px;






    text-align: center;






    color: white;






    text-shadow: 0 3px 18px rgba(21,22,92,.28);






}













.cm110-sphere-icon {






    display: grid;






    width: 38px;






    height: 38px;






    margin: 0 auto 5px;






    place-items: center;






    border: 1px solid rgba(255,255,255,.44);






    border-radius: 50%;






    background: rgba(255,255,255,.13);






    font-size: 20px;






    font-weight: 950;






    backdrop-filter: blur(6px);






}













.cm110-sphere-word {






    display: block;






    min-height: 28px;






    font-size: 22px;






    font-weight: 950;






    line-height: 1;






    letter-spacing: -0.035em;






    transition: opacity .22s ease, transform .22s ease;






}













.cm110-sphere-word.is-changing {






    opacity: 0;






    transform: translateY(6px);






}













.cm110-sphere-mini {






    display: block;






    margin-top: 6px;






    font-size: 9px;






    font-weight: 850;






    letter-spacing: .08em;






    opacity: .78;






    text-transform: uppercase;






}













.cm110-student {






    position: absolute;






    z-index: 7;






    left: 50%;






    top: 52%;






    width: 86px;






    display: grid;






    justify-items: center;






    gap: 5px;






    pointer-events: none;






    will-change: transform;






}













.cm110-avatar {






    position: relative;






    width: 58px;






    height: 58px;






    display: grid;






    place-items: center;






    overflow: hidden;






    border: 3px solid rgba(255,255,255,.96);






    border-radius: 50%;






    background: linear-gradient(145deg, #ffffff, #edf0ff);






    box-shadow:






        0 10px 24px rgba(61,52,133,.17),






        0 0 0 5px rgba(111,92,255,.055);






    font-size: 27px;






}













.cm110-student-name {






    padding: 4px 9px;






    border: 1px solid rgba(97,84,184,.13);






    border-radius: 999px;






    color: #4b4468;






    background: rgba(255,255,255,.94);






    box-shadow: 0 6px 14px rgba(55,48,112,.08);






    font-size: 10px;






    font-weight: 950;






}













.cm110-jad {






    animation: cm110HalfJad 5.8s ease-in-out infinite alternate;






}













.cm110-maya {






    animation: cm110HalfMaya 5.8s ease-in-out .38s infinite alternate;






}













.cm110-lina {






    animation: cm110HalfLina 5.8s ease-in-out .76s infinite alternate;






}













@keyframes cm110HalfJad {






    0%   { transform: translate(-50%,-50%) translate(-190px, 78px) scale(.92); }






    25%  { transform: translate(-50%,-50%) translate(-145px,-38px) scale(.97); }






    50%  { transform: translate(-50%,-50%) translate(0,-128px) scale(1.04); }






    75%  { transform: translate(-50%,-50%) translate(145px,-38px) scale(.97); }






    100% { transform: translate(-50%,-50%) translate(190px, 78px) scale(.92); }






}













@keyframes cm110HalfMaya {






    0%   { transform: translate(-50%,-50%) translate(192px, 82px) scale(.91); }






    25%  { transform: translate(-50%,-50%) translate(150px,-32px) scale(.96); }






    50%  { transform: translate(-50%,-50%) translate(8px,-139px) scale(1.03); }






    75%  { transform: translate(-50%,-50%) translate(-148px,-34px) scale(.96); }






    100% { transform: translate(-50%,-50%) translate(-192px, 82px) scale(.91); }






}













@keyframes cm110HalfLina {






    0%   { transform: translate(-50%,-50%) translate(-166px, 112px) scale(.88); }






    25%  { transform: translate(-50%,-50%) translate(-125px,-12px) scale(.94); }






    50%  { transform: translate(-50%,-50%) translate(-10px,-111px) scale(1); }






    75%  { transform: translate(-50%,-50%) translate(125px,-12px) scale(.94); }






    100% { transform: translate(-50%,-50%) translate(166px, 112px) scale(.88); }






}













@keyframes cm110SphereFloat {






    0%,100% { transform: translate(-50%,-50%) translateY(0) scale(1); }






    50%     { transform: translate(-50%,-50%) translateY(-6px) scale(1.025); }






}













@keyframes cm110SphereTurn {






    to { transform: translate(-50%, -50%) rotate(352deg); }






}













@keyframes cm110GridDrift {






    to { transform: rotate(360deg); }






}













.cm110-spark {






    position: absolute;






    z-index: 2;






    width: 5px;






    height: 5px;






    border-radius: 50%;






    background: #ffffff;






    box-shadow: 0 0 12px rgba(91,166,255,.8);






    animation: cm110Spark 2.2s ease-in-out infinite;






}













.cm110-spark-a { left: 12%; top: 23%; }






.cm110-spark-b { right: 10%; top: 31%; animation-delay: .7s; }






.cm110-spark-c { right: 18%; bottom: 18%; animation-delay: 1.2s; }













@keyframes cm110Spark {






    0%,100% { opacity: .25; transform: scale(.7); }






    50% { opacity: 1; transform: scale(1.7); }






}













@media (max-width: 720px) {






    .cm-mf-shell {






        width: calc(100vw - 24px);






        min-height: calc(100vh - 24px);






        padding: 72px 18px 38px;






    }













    .cm-mf-core {






        grid-template-columns: 1fr;






        grid-template-areas:






            "visual"






            "context"






            "title"






            "status"






            "hint";






        justify-items: center;






        text-align: center;






    }













    .cm-mf-flow-wrap {






        width: min(330px, 86vw);






        height: 286px;






        margin: -4px 0 12px;






    }













    .cm110-scene::before {






        width: min(318px, 82vw);






        height: 154px;






    }













    .cm110-scene::after {






        width: min(286px, 76vw);






        height: 126px;






    }













    .cm110-sphere {






        width: 142px;






        height: 142px;






    }













    .cm110-sphere-copy {






        width: 104px;






    }













    .cm110-sphere-icon {






        width: 31px;






        height: 31px;






        font-size: 16px;






    }













    .cm110-sphere-word {






        min-height: 22px;






        font-size: 18px;






    }













    .cm110-sphere-mini {






        font-size: 7px;






    }













    .cm110-student {






        width: 68px;






    }













    .cm110-avatar {






        width: 48px;






        height: 48px;






        font-size: 22px;






    }













    .cm110-student-name {






        font-size: 9px;






    }













    @keyframes cm110HalfJad {






        0%   { transform: translate(-50%,-50%) translate(-132px, 72px) scale(.88); }






        50%  { transform: translate(-50%,-50%) translate(0,-105px) scale(1); }






        100% { transform: translate(-50%,-50%) translate(132px, 72px) scale(.88); }






    }













    @keyframes cm110HalfMaya {






        0%   { transform: translate(-50%,-50%) translate(132px, 78px) scale(.86); }






        50%  { transform: translate(-50%,-50%) translate(8px,-115px) scale(.98); }






        100% { transform: translate(-50%,-50%) translate(-132px, 78px) scale(.86); }






    }













    @keyframes cm110HalfLina {






        0%   { transform: translate(-50%,-50%) translate(-116px, 95px) scale(.84); }






        50%  { transform: translate(-50%,-50%) translate(-8px,-88px) scale(.95); }






        100% { transform: translate(-50%,-50%) translate(116px, 95px) scale(.84); }






    }






}













@media (max-height: 690px) and (min-width: 721px) {






    .cm-mf-shell {






        min-height: calc(100vh - 26px);






        padding-top: 68px;






        padding-bottom: 30px;






    }













    .cm-mf-core {






        min-height: 330px;






    }













    .cm-mf-flow-wrap {






        transform: scale(.88);






        margin-left: -18px;






    }






}













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






    .cm110-jad,






    .cm110-maya,






    .cm110-lina,






    .cm110-sphere,






    .cm110-sphere::before,






    .cm110-sphere::after,






    .cm110-spark {






        animation: none !important;






    }













    .cm110-jad  { transform: translate(-50%,-50%) translate(-155px, 75px); }






    .cm110-maya { transform: translate(-50%,-50%) translate(155px, 75px); }






    .cm110-lina { transform: translate(-50%,-50%) translate(0,-120px); }






}













/* === CLASSMIRROR V110 ORBITE JAD MAYA LINA : END === */











/* === CLASSMIRROR V111 TRANSITION CONTEXTUELLE : BEGIN === */











/* Neutralise visuellement la scène V110 si elle existe. */





.cm110-scene {





    display: none !important;





}











/* Mise à jour globale de la scène */





.cm-mf-shell {





    width: min(1040px, calc(100vw - 34px));





    min-height: 540px;





    padding: 76px 40px 46px;





}











.cm-mf-core {





    width: 100%;





    min-height: 390px;





    display: grid;





    grid-template-columns: 460px minmax(0, 1fr);





    grid-template-areas:





        "visual context"





        "visual title"





        "visual status"





        "visual hint";





    align-items: center;





    column-gap: 34px;





    text-align: left;





}











.cm-mf-flow-wrap {





    grid-area: visual;





    position: relative;





    width: 430px;





    height: 340px;





    margin: 0 auto;





    overflow: visible;





}











/* Cache l'ancien dessin central pour laisser place à V111 */





.cm-mf-flow-wrap > .cm-mf-halo,





.cm-mf-flow-wrap > .cm-mf-ring,





.cm-mf-flow-wrap > .cm-mf-orbit-dot,





.cm-mf-flow-wrap > .cm-mf-brand-core {





    display: none !important;





}











.cm-mf-context {





    grid-area: context;





    justify-self: start;





}











.cm-mf-title {





    grid-area: title;





    justify-self: start;





}











.cm-mf-status {





    grid-area: status;





    justify-self: start;





    max-width: 100%;





}











.cm-mf-hint {





    grid-area: hint;





    justify-self: start;





}











.cm111-scene {





    position: absolute;





    inset: 0;





    overflow: visible;





    isolation: isolate;





}











.cm111-scene::before {





    content: "";





    position: absolute;





    inset: 8px 10px auto 10px;





    height: 320px;





    border-radius: 28px;





    background:





        radial-gradient(circle at 22% 30%, rgba(91,166,255,.13), transparent 30%),





        radial-gradient(circle at 76% 74%, rgba(111,92,255,.12), transparent 28%),





        linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.08));





    box-shadow: inset 0 1px 0 rgba(255,255,255,.58);





    opacity: .92;





}











.cm111-base {





    position: absolute;





    left: 50%;





    bottom: 24px;





    width: 270px;





    height: 32px;





    transform: translateX(-50%);





    border-radius: 50%;





    background: radial-gradient(circle, rgba(111,92,255,.20), rgba(111,92,255,0) 72%);





    filter: blur(10px);





}











.cm111-orbit-back,





.cm111-orbit-front {





    position: absolute;





    left: 50%;





    top: 53%;





    width: 340px;





    height: 158px;





    transform: translate(-50%, -50%);





    border-radius: 50%;





    border: 1px solid rgba(111,92,255,.18);





    box-shadow: 0 0 18px rgba(91,166,255,.08);





}











.cm111-orbit-back {





    opacity: .30;





    transform: translate(-50%, -50%) rotate(-10deg);





}











.cm111-orbit-front {





    opacity: .48;





    transform: translate(-50%, -50%) rotate(12deg);





    border-top-color: rgba(91,166,255,.30);





    border-left-color: rgba(91,166,255,.10);





    border-right-color: rgba(111,92,255,.16);





    border-bottom-color: transparent;





}











.cm111-sphere {





    position: absolute;





    left: 50%;





    top: 53%;





    z-index: 4;





    width: 178px;





    height: 178px;





    transform: translate(-50%, -50%);





    display: grid;





    place-items: center;





    overflow: hidden;





    border-radius: 50%;





    border: 1px solid rgba(255,255,255,.95);





    background:





        radial-gradient(circle at 33% 28%, rgba(255,255,255,.92), transparent 14%),





        radial-gradient(circle at 58% 46%, rgba(102,228,255,.22), transparent 26%),





        radial-gradient(circle at center, #775fff 0%, #5f8bff 50%, #3acddd 100%);





    box-shadow:





        0 18px 48px rgba(67,64,155,.20),





        0 0 0 10px rgba(111,92,255,.05),





        inset -18px -20px 36px rgba(54,52,145,.20),





        inset 10px 12px 22px rgba(255,255,255,.18);





    animation: cm111SphereFloat 3.0s ease-in-out infinite;





}











.cm111-sphere::before {





    content: "";





    position: absolute;





    width: 222px;





    height: 72px;





    left: 50%;





    top: 50%;





    transform: translate(-50%, -50%);





    border: 1px solid rgba(255,255,255,.28);





    border-radius: 50%;





    box-shadow:





        0 -38px 0 -37px rgba(255,255,255,.16),





        0 38px 0 -37px rgba(255,255,255,.16);





    animation: cm111SphereSpin 6.3s linear infinite;





}











.cm111-sphere::after {





    content: "";





    position: absolute;





    inset: 12px;





    border-radius: 50%;





    background:





        linear-gradient(90deg, transparent 49%, rgba(255,255,255,.16) 50%, transparent 51%),





        linear-gradient(0deg, transparent 49%, rgba(255,255,255,.12) 50%, transparent 51%);





    background-size: 30px 30px;





    opacity: .52;





    animation: cm111GridSpin 8s linear infinite;





}











.cm111-sphere-copy {





    position: relative;





    z-index: 5;





    width: 126px;





    text-align: center;





    color: #fff;





    text-shadow: 0 3px 16px rgba(22,22,90,.30);





}











.cm111-sphere-icon {





    display: grid;





    place-items: center;





    width: 36px;





    height: 36px;





    margin: 0 auto 6px;





    border-radius: 50%;





    background: rgba(255,255,255,.12);





    border: 1px solid rgba(255,255,255,.42);





    backdrop-filter: blur(6px);





    font-size: 18px;





    font-weight: 900;





}











.cm111-sphere-word {





    display: block;





    min-height: 28px;





    font-size: 22px;





    font-weight: 950;





    line-height: 1.02;





    transition: opacity .22s ease, transform .22s ease;





}











.cm111-sphere-word.is-changing {





    opacity: 0;





    transform: translateY(6px);





}











.cm111-sphere-mini {





    display: block;





    margin-top: 6px;





    font-size: 9px;





    letter-spacing: .08em;





    text-transform: uppercase;





    font-weight: 850;





    opacity: .78;





}











.cm111-tag {





    position: absolute;





    left: 50%;





    top: 24px;





    transform: translateX(-50%);





    z-index: 6;





    display: inline-flex;





    align-items: center;





    gap: 8px;





    padding: 8px 14px;





    border-radius: 999px;





    background: rgba(255,255,255,.78);





    border: 1px solid rgba(105,93,186,.14);





    box-shadow: 0 10px 26px rgba(61,52,133,.10);





    color: #584c91;





    font-size: 12px;





    font-weight: 900;





}











.cm111-tag-dot {





    width: 8px;





    height: 8px;





    border-radius: 50%;





    background: #6f5cff;





    box-shadow: 0 0 0 0 rgba(111,92,255,.32);





    animation: cm111PulseDot 1.7s infinite;





}











.cm111-travelers {





    position: absolute;





    inset: 0;





    z-index: 7;





}











.cm111-traveler {





    position: absolute;





    left: 50%;





    top: 53%;





    width: 84px;





    display: grid;





    justify-items: center;





    gap: 5px;





    pointer-events: none;





    will-change: transform;





}











.cm111-avatar {





    width: 56px;





    height: 56px;





    display: grid;





    place-items: center;





    border-radius: 50%;





    border: 3px solid rgba(255,255,255,.96);





    background: linear-gradient(145deg, #ffffff, #eef1ff);





    box-shadow:





        0 10px 22px rgba(61,52,133,.16),





        0 0 0 5px rgba(111,92,255,.05);





    font-size: 26px;





}











.cm111-name {





    padding: 4px 9px;





    border-radius: 999px;





    background: rgba(255,255,255,.95);





    border: 1px solid rgba(97,84,184,.14);





    box-shadow: 0 6px 14px rgba(55,48,112,.08);





    color: #4a4468;





    font-size: 10px;





    font-weight: 950;





}











.cm111-jad {





    animation: cm111ArcJad 6.2s linear infinite alternate;





}











.cm111-maya {





    animation: cm111ArcMaya 6.2s linear infinite .42s alternate;





}











.cm111-lina {





    animation: cm111ArcLina 6.2s linear infinite .84s alternate;





}











@keyframes cm111ArcJad {





    0%   { transform: translate(-50%,-50%) translate(-160px, 80px) scale(.92); }





    12%  { transform: translate(-50%,-50%) translate(-145px, 40px) scale(.95); }





    25%  { transform: translate(-50%,-50%) translate(-112px, -4px) scale(.98); }





    37%  { transform: translate(-50%,-50%) translate(-64px, -54px) scale(1.01); }





    50%  { transform: translate(-50%,-50%) translate(0, -114px) scale(1.05); }





    62%  { transform: translate(-50%,-50%) translate(64px, -54px) scale(1.01); }





    75%  { transform: translate(-50%,-50%) translate(112px, -4px) scale(.98); }





    87%  { transform: translate(-50%,-50%) translate(145px, 40px) scale(.95); }





    100% { transform: translate(-50%,-50%) translate(160px, 80px) scale(.92); }





}











@keyframes cm111ArcMaya {





    0%   { transform: translate(-50%,-50%) translate(164px, 86px) scale(.90); }





    12%  { transform: translate(-50%,-50%) translate(148px, 44px) scale(.94); }





    25%  { transform: translate(-50%,-50%) translate(114px, -2px) scale(.97); }





    37%  { transform: translate(-50%,-50%) translate(68px, -58px) scale(1.00); }





    50%  { transform: translate(-50%,-50%) translate(2px, -122px) scale(1.04); }





    62%  { transform: translate(-50%,-50%) translate(-68px, -58px) scale(1.00); }





    75%  { transform: translate(-50%,-50%) translate(-114px, -2px) scale(.97); }





    87%  { transform: translate(-50%,-50%) translate(-148px, 44px) scale(.94); }





    100% { transform: translate(-50%,-50%) translate(-164px, 86px) scale(.90); }





}











@keyframes cm111ArcLina {





    0%   { transform: translate(-50%,-50%) translate(-138px, 110px) scale(.86); }





    12%  { transform: translate(-50%,-50%) translate(-122px, 60px) scale(.89); }





    25%  { transform: translate(-50%,-50%) translate(-94px, 14px) scale(.93); }





    37%  { transform: translate(-50%,-50%) translate(-52px, -36px) scale(.96); }





    50%  { transform: translate(-50%,-50%) translate(0, -92px) scale(.99); }





    62%  { transform: translate(-50%,-50%) translate(52px, -36px) scale(.96); }





    75%  { transform: translate(-50%,-50%) translate(94px, 14px) scale(.93); }





    87%  { transform: translate(-50%,-50%) translate(122px, 60px) scale(.89); }





    100% { transform: translate(-50%,-50%) translate(138px, 110px) scale(.86); }





}











.cm111-minimal-track {





    position: absolute;





    inset: 0;





    z-index: 7;





    display: none;





}











.cm111-node {





    position: absolute;





    left: 50%;





    top: 53%;





    width: 22px;





    height: 22px;





    margin-left: -11px;





    margin-top: -11px;





    border-radius: 50%;





    background: #fff;





    border: 3px solid rgba(255,255,255,.88);





    box-shadow:





        0 0 0 5px rgba(111,92,255,.06),





        0 0 20px rgba(91,166,255,.30);





}











.cm111-node-a {





    animation: cm111NodeA 5.4s ease-in-out infinite alternate;





}











.cm111-node-b {





    background: #8fc4ff;





    animation: cm111NodeB 5.4s ease-in-out .4s infinite alternate;





}











.cm111-node-c {





    background: #b39cff;





    animation: cm111NodeC 5.4s ease-in-out .8s infinite alternate;





}











@keyframes cm111NodeA {





    0%   { transform: translate(-130px, 30px) scale(.95); }





    50%  { transform: translate(0, -86px) scale(1.06); }





    100% { transform: translate(130px, 30px) scale(.95); }





}











@keyframes cm111NodeB {





    0%   { transform: translate(130px, 36px) scale(.93); }





    50%  { transform: translate(6px, -96px) scale(1.05); }





    100% { transform: translate(-130px, 36px) scale(.93); }





}











@keyframes cm111NodeC {





    0%   { transform: translate(-108px, 74px) scale(.88); }





    50%  { transform: translate(-2px, -72px) scale(1.00); }





    100% { transform: translate(108px, 74px) scale(.88); }





}











.cm111-spark {





    position: absolute;





    width: 5px;





    height: 5px;





    border-radius: 50%;





    background: #fff;





    box-shadow: 0 0 12px rgba(91,166,255,.8);





    animation: cm111Spark 2.2s ease-in-out infinite;





}











.cm111-spark-a { left: 12%; top: 28%; }





.cm111-spark-b { right: 11%; top: 36%; animation-delay: .7s; }





.cm111-spark-c { right: 18%; bottom: 17%; animation-delay: 1.1s; }











.cm111-metric {





    position: absolute;





    bottom: 34px;





    right: 28px;





    z-index: 6;





    padding: 8px 11px;





    border-radius: 16px;





    background: rgba(255,255,255,.86);





    border: 1px solid rgba(97,84,184,.12);





    box-shadow: 0 10px 24px rgba(52,44,108,.08);





    color: #5c5484;





    font-size: 11px;





    font-weight: 850;





}











@keyframes cm111Spark {





    0%,100% { opacity: .28; transform: scale(.72); }





    50% { opacity: 1; transform: scale(1.6); }





}











@keyframes cm111SphereFloat {





    0%,100% { transform: translate(-50%, -50%) translateY(0) scale(1); }





    50% { transform: translate(-50%, -50%) translateY(-6px) scale(1.02); }





}











@keyframes cm111SphereSpin {





    to { transform: translate(-50%, -50%) rotate(360deg); }





}











@keyframes cm111GridSpin {





    to { transform: rotate(360deg); }





}











@keyframes cm111PulseDot {





    0% { box-shadow: 0 0 0 0 rgba(111,92,255,.35); }





    70% { box-shadow: 0 0 0 10px rgba(111,92,255,0); }





    100% { box-shadow: 0 0 0 0 rgba(111,92,255,0); }





}











/* Variantes contextuelles */





.cm-mirror-flow[data-cm111-variant="create"] .cm111-tag {





    color: #266896;





}











.cm-mirror-flow[data-cm111-variant="create"] .cm111-tag-dot {





    background: #5aa7ff;





}











.cm-mirror-flow[data-cm111-variant="create"] .cm111-sphere {





    background:





        radial-gradient(circle at 33% 28%, rgba(255,255,255,.92), transparent 14%),





        radial-gradient(circle at 58% 46%, rgba(123,235,255,.22), transparent 26%),





        radial-gradient(circle at center, #5a9eff 0%, #4db7ff 52%, #54d8d8 100%);





}











.cm-mirror-flow[data-cm111-variant="round"] .cm111-tag {





    color: #5b4ca1;





}











.cm-mirror-flow[data-cm111-variant="result"] .cm111-tag {





    color: #2f6b5e;





}











.cm-mirror-flow[data-cm111-variant="result"] .cm111-tag-dot {





    background: #4dcfa6;





}











.cm-mirror-flow[data-cm111-variant="result"] .cm111-sphere {





    background:





        radial-gradient(circle at 33% 28%, rgba(255,255,255,.92), transparent 14%),





        radial-gradient(circle at 58% 46%, rgba(158,255,222,.22), transparent 26%),





        radial-gradient(circle at center, #6cccb3 0%, #6a8cff 50%, #7f63ff 100%);





}











/* Avatars seulement si le mode l'autorise */





.cm-mirror-flow[data-cm111-mode="minimal"] .cm111-travelers {





    display: none;





}











.cm-mirror-flow[data-cm111-mode="minimal"] .cm111-minimal-track {





    display: block;





}











.cm-mirror-flow[data-cm111-mode="avatars"] .cm111-travelers {





    display: block;





}











.cm-mirror-flow[data-cm111-mode="avatars"] .cm111-minimal-track {





    display: none;





}











@media (max-width: 720px) {





    .cm-mf-shell {





        width: calc(100vw - 22px);





        min-height: calc(100vh - 22px);





        padding: 72px 18px 34px;





    }











    .cm-mf-core {





        grid-template-columns: 1fr;





        grid-template-areas:





            "visual"





            "context"





            "title"





            "status"





            "hint";





        row-gap: 0;





        text-align: center;





    }











    .cm-mf-context,





    .cm-mf-title,





    .cm-mf-status,





    .cm-mf-hint {





        justify-self: center;





    }











    .cm-mf-flow-wrap {





        width: min(330px, 86vw);





        height: 286px;





        margin-bottom: 10px;





    }











    .cm111-scene::before {





        left: 6px;





        right: 6px;





        height: 270px;





    }











    .cm111-orbit-back,





    .cm111-orbit-front {





        width: 290px;





        height: 136px;





    }











    .cm111-sphere {





        width: 144px;





        height: 144px;





    }











    .cm111-sphere-copy {





        width: 102px;





    }











    .cm111-sphere-icon {





        width: 30px;





        height: 30px;





        font-size: 16px;





    }











    .cm111-sphere-word {





        min-height: 22px;





        font-size: 18px;





    }











    .cm111-sphere-mini {





        font-size: 7px;





    }











    .cm111-tag {





        top: 16px;





        font-size: 11px;





        padding: 7px 11px;





    }











    .cm111-traveler {





        width: 68px;





    }











    .cm111-avatar {





        width: 46px;





        height: 46px;





        font-size: 22px;





    }











    .cm111-name {





        font-size: 9px;





    }











    @keyframes cm111ArcJad {





        0%   { transform: translate(-50%,-50%) translate(-128px, 74px) scale(.90); }





        50%  { transform: translate(-50%,-50%) translate(0, -98px) scale(1.02); }





        100% { transform: translate(-50%,-50%) translate(128px, 74px) scale(.90); }





    }











    @keyframes cm111ArcMaya {





        0%   { transform: translate(-50%,-50%) translate(130px, 80px) scale(.88); }





        50%  { transform: translate(-50%,-50%) translate(2px, -106px) scale(1.00); }





        100% { transform: translate(-50%,-50%) translate(-130px, 80px) scale(.88); }





    }











    @keyframes cm111ArcLina {





        0%   { transform: translate(-50%,-50%) translate(-108px, 96px) scale(.84); }





        50%  { transform: translate(-50%,-50%) translate(0, -82px) scale(.95); }





        100% { transform: translate(-50%,-50%) translate(108px, 96px) scale(.84); }





    }











    @keyframes cm111NodeA {





        0%   { transform: translate(-112px, 30px) scale(.95); }





        50%  { transform: translate(0, -72px) scale(1.04); }





        100% { transform: translate(112px, 30px) scale(.95); }





    }











    @keyframes cm111NodeB {





        0%   { transform: translate(112px, 36px) scale(.93); }





        50%  { transform: translate(6px, -80px) scale(1.03); }





        100% { transform: translate(-112px, 36px) scale(.93); }





    }











    @keyframes cm111NodeC {





        0%   { transform: translate(-92px, 68px) scale(.88); }





        50%  { transform: translate(-2px, -64px) scale(.98); }





        100% { transform: translate(92px, 68px) scale(.88); }





    }











    .cm111-metric {





        right: 16px;





        bottom: 20px;





        font-size: 10px;





    }





}











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





    .cm111-sphere,





    .cm111-sphere::before,





    .cm111-sphere::after,





    .cm111-jad,





    .cm111-maya,





    .cm111-lina,





    .cm111-node-a,





    .cm111-node-b,





    .cm111-node-c,





    .cm111-tag-dot,





    .cm111-spark {





        animation: none !important;





    }





}











/* === CLASSMIRROR V111 TRANSITION CONTEXTUELLE : END === */





/* === CLASSMIRROR V180 MIRROR INTELLIGENCE : BEGIN === */





/*


   ClassMirror V180 — Mirror Intelligence


   Transition premium sans cartes, sans sphère, sans spinner.


   Aucune barre de progression, aucun pourcentage, aucun faux temps.


*/





.cm110-scene,


.cm111-scene,


.cm117-scene,


.cm118-scene {


    display: none !important;


}





.cm-mirror-flow {


    background:


        radial-gradient(circle at 50% 46%, rgba(109, 92, 255, .14), transparent 30%),


        radial-gradient(circle at 18% 20%, rgba(72, 164, 255, .08), transparent 27%),


        linear-gradient(180deg, rgba(7, 9, 20, .70), rgba(7, 9, 20, .82)) !important;


    backdrop-filter: blur(18px) saturate(.92) !important;


    -webkit-backdrop-filter: blur(18px) saturate(.92) !important;


}





.cm-mf-shell {


    width: min(1080px, calc(100vw - 28px)) !important;


    min-height: 520px !important;


    padding: 16px !important;


    border: 0 !important;


    border-radius: 0 !important;


    background: transparent !important;


    box-shadow: none !important;


}





.cm-mf-core {


    min-height: 500px !important;


    display: grid !important;


    grid-template-columns: 1fr !important;


    grid-template-areas: "visual" !important;


    place-items: center !important;


}





.cm-mf-context,


.cm-mf-title,


.cm-mf-status,


.cm-mf-hint {


    display: none !important;


}





.cm-mf-flow-wrap {


    grid-area: visual !important;


    position: relative !important;


    width: min(1000px, 100%) !important;


    height: 480px !important;


    margin: 0 auto !important;


    overflow: visible !important;


}





.cm-mf-flow-wrap > .cm-mf-halo,


.cm-mf-flow-wrap > .cm-mf-ring,


.cm-mf-flow-wrap > .cm-mf-orbit-dot,


.cm-mf-flow-wrap > .cm-mf-brand-core {


    display: none !important;


}





.cm180-scene {


    --cm180-accent: #8a7cff;


    --cm180-accent-2: #5fb8ff;


    --cm180-ok: #5fd8b2;


    --cm180-ink: #f7f8ff;


    --cm180-muted: rgba(238, 240, 255, .64);


    --cm180-line: rgba(190, 198, 255, .16);





    position: absolute;


    inset: 0;


    display: grid;


    place-items: center;


    color: var(--cm180-ink);


    isolation: isolate;


    overflow: hidden;


    border-radius: 32px;


}





.cm180-scene::before {


    content: "";


    position: absolute;


    inset: 28px 24px;


    border-radius: 30px;


    background:


        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),


        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),


        radial-gradient(circle at 50% 50%, rgba(124, 104, 255, .08), transparent 38%);


    background-size: 34px 34px, 34px 34px, auto;


    -webkit-mask-image: radial-gradient(circle at center, #000 25%, transparent 84%);


    mask-image: radial-gradient(circle at center, #000 25%, transparent 84%);


    pointer-events: none;


}





.cm180-scene::after {


    content: "";


    position: absolute;


    left: 50%;


    top: 50%;


    width: 520px;


    height: 240px;


    transform: translate(-50%, -50%);


    border-radius: 50%;


    background: radial-gradient(circle, rgba(111, 93, 255, .16), transparent 68%);


    filter: blur(28px);


    opacity: .72;


    pointer-events: none;


}





.cm180-eyebrow {


    position: absolute;


    top: 58px;


    left: 50%;


    z-index: 8;


    transform: translateX(-50%);


    display: inline-flex;


    align-items: center;


    gap: 10px;


    min-height: 28px;


    padding: 0 12px;


    border: 1px solid rgba(255,255,255,.10);


    border-radius: 999px;


    background: rgba(255,255,255,.035);


    color: rgba(241,243,255,.70);


    font-size: 10px;


    font-weight: 850;


    letter-spacing: .13em;


    text-transform: uppercase;


    backdrop-filter: blur(10px);


}





.cm180-live-dot {


    width: 6px;


    height: 6px;


    border-radius: 50%;


    background: var(--cm180-accent-2);


    box-shadow: 0 0 0 0 rgba(95,184,255,.36);


    animation: cm180Pulse 1.8s ease-out infinite;


}





.cm180-stage {


    position: relative;


    z-index: 5;


    width: min(850px, calc(100% - 48px));


    height: 270px;


    display: grid;


    place-items: center;


}





.cm180-network {


    position: absolute;


    inset: 0;


}





.cm180-rail {


    position: absolute;


    left: 50%;


    top: 50%;


    height: 1px;


    width: 78%;


    transform-origin: 50% 50%;


    background:


        linear-gradient(


            90deg,


            transparent,


            var(--cm180-line) 12%,


            rgba(170,178,255,.30) 42%,


            rgba(170,178,255,.30) 58%,


            var(--cm180-line) 88%,


            transparent


        );


    opacity: .90;


}





.cm180-rail-a { transform: translate(-50%, -50%) rotate(0deg); }


.cm180-rail-b { transform: translate(-50%, -50%) rotate(16deg); opacity: .60; }


.cm180-rail-c { transform: translate(-50%, -50%) rotate(-16deg); opacity: .60; }


.cm180-rail-d { transform: translate(-50%, -50%) rotate(31deg); opacity: .32; }


.cm180-rail-e { transform: translate(-50%, -50%) rotate(-31deg); opacity: .32; }





.cm180-pulse {


    position: absolute;


    left: 50%;


    top: 50%;


    width: 8px;


    height: 8px;


    margin: -4px 0 0 -4px;


    border-radius: 50%;


    background: #fff;


    box-shadow:


        0 0 0 5px rgba(255,255,255,.025),


        0 0 24px rgba(111,92,255,.58);


    opacity: .86;


}





.cm180-pulse-a { animation: cm180InA 2.4s ease-in-out infinite; }


.cm180-pulse-b { animation: cm180InB 2.65s ease-in-out .22s infinite; }


.cm180-pulse-c { animation: cm180InC 2.85s ease-in-out .44s infinite; }


.cm180-pulse-d { animation: cm180InD 3.05s ease-in-out .66s infinite; }





.cm180-focus {


    position: relative;


    z-index: 7;


    width: min(520px, calc(100% - 100px));


    min-height: 166px;


    display: grid;


    align-content: center;


    justify-items: center;


    text-align: center;


}





.cm180-mark {


    position: relative;


    width: 52px;


    height: 52px;


    margin-bottom: 16px;


}





.cm180-mark::before,


.cm180-mark::after {


    content: "";


    position: absolute;


    inset: 6px;


    border: 1px solid rgba(255,255,255,.50);


    transform: rotate(45deg);


    transition: transform 520ms cubic-bezier(.22,.9,.25,1), border-color 320ms ease;


}





.cm180-mark::after {


    inset: 15px;


    border-color: rgba(139,123,255,.94);


    box-shadow: 0 0 28px rgba(123,103,255,.38);


}





.cm180-brand {


    margin: 0;


    color: #fff;


    font-size: clamp(24px, 3vw, 38px);


    font-weight: 900;


    letter-spacing: -.04em;


    line-height: 1;


}





.cm180-phase {


    margin-top: 10px;


    color: rgba(234,236,255,.70);


    font-size: 11px;


    font-weight: 850;


    letter-spacing: .16em;


    text-transform: uppercase;


    transition: opacity 180ms ease, transform 180ms ease;


}





.cm180-message {


    margin-top: 17px;


    max-width: 520px;


    color: rgba(246,247,255,.88);


    font-size: clamp(14px, 1.7vw, 17px);


    font-weight: 600;


    line-height: 1.55;


    transition: opacity 180ms ease, transform 180ms ease;


}





.cm180-phase.is-changing,


.cm180-message.is-changing {


    opacity: 0;


    transform: translateY(5px);


}





.cm180-signature {


    position: absolute;


    left: 50%;


    bottom: 58px;


    z-index: 8;


    transform: translateX(-50%);


    color: rgba(231,233,255,.42);


    font-size: 10px;


    font-weight: 750;


    letter-spacing: .08em;


    white-space: nowrap;


}





.cm180-primary {


    position: absolute;


    inset: 0;


    z-index: 6;


    display: none;


    pointer-events: none;


}





.cm180-person {


    position: absolute;


    display: grid;


    justify-items: center;


    gap: 5px;


    opacity: .86;


    animation: cm180PersonFloat 3.6s ease-in-out infinite;


}





.cm180-person-a {


    left: 11%;


    top: 42%;


}


.cm180-person-b {


    right: 11%;


    top: 42%;


    animation-delay: .45s;


}


.cm180-person-c {


    left: 50%;


    bottom: 3%;


    transform: translateX(-50%);


    animation-delay: .90s;


}





.cm180-avatar {


    width: 38px;


    height: 38px;


    display: grid;


    place-items: center;


    border: 1px solid rgba(255,255,255,.14);


    border-radius: 50%;


    background: rgba(255,255,255,.06);


    box-shadow: 0 8px 24px rgba(0,0,0,.18);


    font-size: 18px;


    backdrop-filter: blur(8px);


}





.cm180-person-name {


    color: rgba(245,246,255,.72);


    font-size: 9px;


    font-weight: 850;


    letter-spacing: .04em;


}





.cm-mirror-flow[data-cm180-mode="primary"] .cm180-primary {


    display: block;


}





.cm-mirror-flow[data-cm180-variant="create"] .cm180-live-dot {


    background: #63bfff;


}





.cm-mirror-flow[data-cm180-variant="result"] .cm180-live-dot {


    background: var(--cm180-ok);


}





.cm-mirror-flow[data-cm180-phase="analyse"] .cm180-mark::before {


    transform: rotate(45deg) scale(.92);


}





.cm-mirror-flow[data-cm180-phase="adapt"] .cm180-mark::before {


    transform: rotate(135deg) scale(1.04);


    border-color: rgba(137,121,255,.76);


}





.cm-mirror-flow[data-cm180-phase="prepare"] .cm180-mark::before {


    transform: rotate(225deg) scale(.94);


    border-color: rgba(94,190,255,.78);


}





.cm-mirror-flow[data-cm180-phase="adapt"] .cm180-pulse {


    animation-direction: reverse;


}





.cm-mirror-flow[data-cm180-phase="prepare"] .cm180-pulse {


    box-shadow:


        0 0 0 5px rgba(255,255,255,.025),


        0 0 28px rgba(95,184,255,.70);


}





@keyframes cm180Pulse {


    0% { box-shadow: 0 0 0 0 rgba(95,184,255,.35); }


    75% { box-shadow: 0 0 0 11px rgba(95,184,255,0); }


    100% { box-shadow: 0 0 0 0 rgba(95,184,255,0); }


}





@keyframes cm180InA {


    0%,100% { transform: translateX(-330px) scale(.72); opacity: .12; }


    48% { transform: translateX(-16px) scale(1); opacity: .95; }


    52% { transform: translateX(16px) scale(1); opacity: .95; }


}


@keyframes cm180InB {


    0%,100% { transform: translate(300px, -78px) scale(.68); opacity: .10; }


    50% { transform: translate(8px, -3px) scale(1); opacity: .92; }


}


@keyframes cm180InC {


    0%,100% { transform: translate(-292px, 84px) scale(.70); opacity: .10; }


    50% { transform: translate(-6px, 3px) scale(1); opacity: .92; }


}


@keyframes cm180InD {


    0%,100% { transform: translate(316px, 72px) scale(.64); opacity: .08; }


    50% { transform: translate(6px, 3px) scale(.98); opacity: .82; }


}





@keyframes cm180PersonFloat {


    0%,100% { margin-top: 0; }


    50% { margin-top: -6px; }


}





@media (max-width: 760px) {


    .cm-mf-shell {


        width: calc(100vw - 14px) !important;


        min-height: calc(100vh - 14px) !important;


        padding: 8px !important;


    }





    .cm-mf-core {


        min-height: calc(100vh - 30px) !important;


    }





    .cm-mf-flow-wrap {


        width: 100% !important;


        height: min(520px, calc(100vh - 52px)) !important;


    }





    .cm180-scene {


        border-radius: 22px;


    }





    .cm180-eyebrow {


        top: 34px;


        font-size: 9px;


    }





    .cm180-stage {


        width: calc(100% - 18px);


        height: 280px;


    }





    .cm180-focus {


        width: min(390px, calc(100% - 42px));


    }





    .cm180-brand {


        font-size: 28px;


    }





    .cm180-message {


        font-size: 14px;


        max-width: 330px;


    }





    .cm180-signature {


        bottom: 34px;


        font-size: 9px;


    }





    .cm180-person-a {


        left: 5%;


        top: 38%;


    }


    .cm180-person-b {


        right: 5%;


        top: 38%;


    }


    .cm180-person-c {


        bottom: 7%;


    }





    .cm180-avatar {


        width: 34px;


        height: 34px;


        font-size: 16px;


    }


}





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


    .cm180-scene *,


    .cm180-scene *::before,


    .cm180-scene *::after {


        animation-duration: .001ms !important;


        animation-iteration-count: 1 !important;


        transition-duration: .001ms !important;


    }


}





/* === CLASSMIRROR V180 MIRROR INTELLIGENCE : END === */



/* === CLASSMIRROR V182 CLASS COMING ALIVE : BEGIN === */



/*

   V182 — The Class Is Coming Alive

   Scène réservée à la CRÉATION d'une classe.

   V180 reste le visuel des transitions round/result.

*/



.cm-mirror-flow[data-cm182-create="1"] {

    background:

        radial-gradient(circle at 50% 20%, rgba(111, 91, 255, .10), transparent 34%),

        linear-gradient(180deg, rgba(246,248,255,.93), rgba(239,242,252,.97)) !important;

    backdrop-filter: blur(18px) saturate(.96) !important;

    -webkit-backdrop-filter: blur(18px) saturate(.96) !important;

}



.cm-mirror-flow[data-cm182-create="1"] .cm180-scene {

    display: none !important;

}



.cm-mirror-flow:not([data-cm182-create="1"]) .cm182-scene {

    display: none !important;

}



.cm182-scene {

    --cm182-ink: #171a2b;

    --cm182-muted: #74798f;

    --cm182-soft: rgba(98, 81, 221, .08);

    --cm182-line: rgba(93, 83, 184, .17);

    --cm182-accent: #6657d9;

    --cm182-accent-2: #4b9be8;

    --cm182-ok: #319b77;



    position: absolute;

    inset: 0;

    z-index: 20;

    display: grid;

    align-items: center;

    justify-items: center;

    overflow: hidden;

    border-radius: 30px;

    color: var(--cm182-ink);

}



.cm182-scene::before {

    content: "";

    position: absolute;

    inset: 18px;

    border: 1px solid rgba(76, 69, 151, .08);

    border-radius: 28px;

    background:

        radial-gradient(circle at 50% 46%, rgba(101,87,217,.09), transparent 27%),

        linear-gradient(rgba(88,80,160,.025) 1px, transparent 1px),

        linear-gradient(90deg, rgba(88,80,160,.025) 1px, transparent 1px);

    background-size: auto, 42px 42px, 42px 42px;

    pointer-events: none;

}



.cm182-shell {

    position: relative;

    z-index: 2;

    width: min(940px, calc(100% - 48px));

    min-height: 420px;

    display: grid;

    grid-template-rows: auto 1fr auto;

    align-items: center;

}



.cm182-brandline {

    display: grid;

    justify-items: center;

    gap: 7px;

    text-align: center;

}



.cm182-brand {

    margin: 0;

    color: #23263a;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .18em;

    text-transform: uppercase;

}



.cm182-headline {

    margin: 0;

    color: #15182a;

    font-size: clamp(24px, 3vw, 36px);

    line-height: 1.08;

    font-weight: 900;

    letter-spacing: -.035em;

}



.cm182-subline {

    margin: 2px 0 0;

    color: var(--cm182-muted);

    font-size: 13px;

    font-weight: 620;

}



.cm182-stage {

    position: relative;

    width: min(820px, 100%);

    height: 280px;

    margin: 10px auto 0;

}



.cm182-stage::before,

.cm182-stage::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 0;

    width: 74%;

    height: 1px;

    transform: translate(-50%, -50%);

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--cm182-line) 18%,

            rgba(102,87,217,.30) 50%,

            var(--cm182-line) 82%,

            transparent

        );

}



.cm182-stage::after {

    width: 54%;

    transform: translate(-50%, -50%) rotate(24deg);

    opacity: .58;

}



.cm182-topic {

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 5;

    width: min(350px, 48%);

    transform: translate(-50%, -50%);

    padding: 20px 22px;

    text-align: center;

}



.cm182-topic::before {

    content: "";

    position: absolute;

    inset: -16px -20px;

    z-index: -1;

    border-radius: 999px;

    background:

        radial-gradient(circle, rgba(101,87,217,.11), rgba(101,87,217,.025) 48%, transparent 70%);

    filter: blur(4px);

}



.cm182-topic-kicker {

    display: block;

    margin-bottom: 7px;

    color: #85899b;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .16em;

    text-transform: uppercase;

}



.cm182-topic-name {

    display: block;

    overflow: hidden;

    color: #20233a;

    font-size: clamp(18px, 2.3vw, 27px);

    line-height: 1.16;

    font-weight: 900;

    letter-spacing: -.03em;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.cm182-level {

    display: inline-flex;

    align-items: center;

    min-height: 24px;

    margin-top: 10px;

    padding: 0 10px;

    border: 1px solid rgba(101,87,217,.12);

    border-radius: 999px;

    background: rgba(255,255,255,.56);

    color: #676c80;

    font-size: 10px;

    font-weight: 800;

    backdrop-filter: blur(8px);

}



.cm182-person {

    position: absolute;

    z-index: 6;

    width: 170px;

    display: grid;

    justify-items: center;

    gap: 7px;

    opacity: .42;

    transform: translateY(8px) scale(.95);

    transition:

        opacity 430ms ease,

        transform 560ms cubic-bezier(.2,.85,.25,1),

        filter 430ms ease;

    filter: saturate(.66);

}



.cm182-lina {

    left: 2%;

    top: 34px;

}



.cm182-jad {

    left: 50%;

    bottom: 0;

    transform: translate(-50%, 8px) scale(.95);

}



.cm182-maya {

    right: 2%;

    top: 34px;

}



.cm182-avatar {

    position: relative;

    width: 68px;

    height: 68px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(74,72,121,.12);

    border-radius: 50%;

    background:

        linear-gradient(145deg, rgba(255,255,255,.96), rgba(243,244,251,.88));

    box-shadow:

        0 12px 32px rgba(63,57,115,.08),

        inset 0 1px 0 rgba(255,255,255,.92);

    font-size: 29px;

}



.cm182-avatar::after {

    content: "";

    position: absolute;

    inset: -5px;

    border: 1px solid transparent;

    border-radius: inherit;

    transition: border-color 350ms ease, box-shadow 350ms ease;

}



.cm182-name {

    color: #2b2e43;

    font-size: 12px;

    font-weight: 900;

}



.cm182-role {

    min-height: 32px;

    color: #7a7f92;

    font-size: 10px;

    font-weight: 650;

    line-height: 1.42;

    text-align: center;

    opacity: .70;

    transition: color 350ms ease, opacity 350ms ease;

}



.cm182-signal {

    position: absolute;

    z-index: 3;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 0 0 5px rgba(101,87,217,.06), 0 0 18px rgba(101,87,217,.25);

    opacity: .12;

}



.cm182-signal-a {

    left: 17%;

    top: 48%;

    animation: cm182SignalA 2.3s ease-in-out infinite;

}



.cm182-signal-b {

    left: 50%;

    bottom: 24%;

    animation: cm182SignalB 2.55s ease-in-out .22s infinite;

}



.cm182-signal-c {

    right: 17%;

    top: 48%;

    animation: cm182SignalC 2.4s ease-in-out .44s infinite;

}



.cm182-footer {

    display: grid;

    justify-items: center;

    gap: 8px;

    min-height: 54px;

    text-align: center;

}



.cm182-state {

    color: #42475e;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: .01em;

    transition: opacity 180ms ease, transform 180ms ease;

}



.cm182-state.is-changing {

    opacity: 0;

    transform: translateY(4px);

}



.cm182-note {

    color: #9296a7;

    font-size: 9px;

    font-weight: 750;

    letter-spacing: .09em;

    text-transform: uppercase;

}



/* personnage actif */

.cm-mirror-flow[data-cm182-step="lina"] .cm182-lina,

.cm-mirror-flow[data-cm182-step="jad"] .cm182-jad,

.cm-mirror-flow[data-cm182-step="maya"] .cm182-maya {

    opacity: 1;

    filter: saturate(1);

}



.cm-mirror-flow[data-cm182-step="lina"] .cm182-lina {

    transform: translateY(0) scale(1);

}



.cm-mirror-flow[data-cm182-step="jad"] .cm182-jad {

    transform: translate(-50%, 0) scale(1);

}



.cm-mirror-flow[data-cm182-step="maya"] .cm182-maya {

    transform: translateY(0) scale(1);

}



.cm-mirror-flow[data-cm182-step="lina"] .cm182-lina .cm182-avatar::after,

.cm-mirror-flow[data-cm182-step="jad"] .cm182-jad .cm182-avatar::after,

.cm-mirror-flow[data-cm182-step="maya"] .cm182-maya .cm182-avatar::after {

    border-color: rgba(101,87,217,.24);

    box-shadow: 0 0 0 5px rgba(101,87,217,.045);

}



.cm-mirror-flow[data-cm182-step="lina"] .cm182-lina .cm182-role,

.cm-mirror-flow[data-cm182-step="jad"] .cm182-jad .cm182-role,

.cm-mirror-flow[data-cm182-step="maya"] .cm182-maya .cm182-role {

    color: #50556b;

    opacity: 1;

}



/* finalisation : les trois collaborent */

.cm-mirror-flow[data-cm182-step="together"] .cm182-person {

    opacity: .94;

    filter: saturate(.96);

}



.cm-mirror-flow[data-cm182-step="together"] .cm182-lina,

.cm-mirror-flow[data-cm182-step="together"] .cm182-maya {

    transform: translateY(0) scale(.98);

}



.cm-mirror-flow[data-cm182-step="together"] .cm182-jad {

    transform: translate(-50%, 0) scale(.98);

}



.cm-mirror-flow[data-cm182-step="together"] .cm182-topic::before {

    animation: cm182TopicBreath 2.2s ease-in-out infinite;

}



@keyframes cm182SignalA {

    0%,100% { transform: translateX(-95px); opacity: .08; }

    50% { transform: translateX(85px); opacity: .92; }

}



@keyframes cm182SignalB {

    0%,100% { transform: translateY(38px); opacity: .08; }

    50% { transform: translateY(-54px); opacity: .92; }

}



@keyframes cm182SignalC {

    0%,100% { transform: translateX(95px); opacity: .08; }

    50% { transform: translateX(-85px); opacity: .92; }

}



@keyframes cm182TopicBreath {

    0%,100% { opacity: .72; transform: scale(.96); }

    50% { opacity: 1; transform: scale(1.04); }

}



@media (max-width: 760px) {

    .cm182-shell {

        width: calc(100% - 18px);

        min-height: min(520px, calc(100vh - 56px));

    }



    .cm182-headline {

        font-size: 25px;

    }



    .cm182-subline {

        max-width: 310px;

        font-size: 11px;

    }



    .cm182-stage {

        height: 330px;

    }



    .cm182-topic {

        top: 47%;

        width: min(300px, 70%);

    }



    .cm182-person {

        width: 115px;

    }



    .cm182-lina {

        left: 0;

        top: 25px;

    }



    .cm182-maya {

        right: 0;

        top: 25px;

    }



    .cm182-jad {

        bottom: 0;

    }



    .cm182-avatar {

        width: 54px;

        height: 54px;

        font-size: 23px;

    }



    .cm182-role {

        font-size: 9px;

    }



    .cm182-topic-name {

        font-size: 20px;

    }

}



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

    .cm182-scene *,

    .cm182-scene *::before,

    .cm182-scene *::after {

        animation-duration: .001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .001ms !important;

    }

}



/* === CLASSMIRROR V182 CLASS COMING ALIVE : END === */

/* === CLASSMIRROR V162 TRANSITIONS PAR NIVEAU : BEGIN === */

/*
 V162 — couche visuelle au-dessus de V180/V182.
 - Primaire : monde ClassMirror + Lina/Jad/Maya.
 - Collège : réseau de concepts.
 - Lycée : interface académique.
 - Supérieur : graphe de connaissances.
 Le moteur historique Mirror Flow reste inchangé.
*/

.cm-mirror-flow[data-cm162-active="1"] .cm180-scene,
.cm-mirror-flow[data-cm162-active="1"] .cm182-scene {
    display: none !important;
}

.cm-mirror-flow:not([data-cm162-active="1"]) .cm162-scene {
    display: none !important;
}

.cm-mirror-flow[data-cm162-active="1"] {
    background:
        radial-gradient(circle at 50% 14%, rgba(105, 90, 235, .10), transparent 34%),
        linear-gradient(180deg, rgba(248,249,255,.95), rgba(240,243,252,.98)) !important;
    backdrop-filter: blur(18px) saturate(.96) !important;
    -webkit-backdrop-filter: blur(18px) saturate(.96) !important;
}

.cm162-scene {
    --cm162-ink: #17192c;
    --cm162-muted: #6f7489;
    --cm162-accent: #6658da;
    --cm162-accent-2: #4b9be8;
    --cm162-line: rgba(91, 82, 178, .17);
    --cm162-soft: rgba(100, 86, 220, .08);

    position: absolute;
    inset: 0;
    z-index: 70;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    padding: 28px 34px 24px;
    overflow: hidden;
    border-radius: 30px;
    color: var(--cm162-ink);
    isolation: isolate;
}

.cm162-scene::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: -2;
    border: 1px solid rgba(75, 70, 145, .08);
    border-radius: 28px;
    background:
        linear-gradient(rgba(90,82,165,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90,82,165,.022) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 88%);
}

.cm162-head {
    text-align: center;
}

.cm162-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 25px;
    padding: 0 11px;
    border: 1px solid rgba(101,87,217,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.67);
    color: #5a5875;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cm162-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cm162-accent);
    box-shadow: 0 0 0 5px rgba(102,88,218,.08);
    animation: cm162Pulse 1.7s ease-in-out infinite;
}

.cm162-title {
    margin: 10px 0 0;
    color: var(--cm162-ink);
    font-size: clamp(25px, 4vw, 38px);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.035em;
}

.cm162-subtitle {
    max-width: 660px;
    margin: 8px auto 0;
    color: var(--cm162-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.cm162-stage {
    position: relative;
    width: min(820px, 100%);
    min-height: 280px;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.cm162-panel {
    display: none;
    position: relative;
    width: min(760px, 100%);
    height: 275px;
}

/* ===================== PRIMAIRE ===================== */

.cm-mirror-flow[data-cm162-tier="primary"] .cm162-primary {
    display: block;
}

.cm-mirror-flow[data-cm162-tier="primary"] .cm162-scene {
    --cm162-accent: #725de7;
    --cm162-accent-2: #4cb7df;
}

.cm162-primary-world {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 142px;
    height: 142px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.86), transparent 23%),
        linear-gradient(145deg, #7b66e8, #4baee2);
    box-shadow:
        0 28px 70px rgba(82,83,190,.22),
        0 0 0 16px rgba(105,87,222,.055),
        0 0 0 34px rgba(105,87,222,.025);
}

.cm162-primary-world::before,
.cm162-primary-world::after {
    content: "";
    position: absolute;
    inset: 18px 26px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 50%;
}

.cm162-primary-world::after {
    inset: 42px 10px;
}

.cm162-primary-core {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
}

.cm162-primary-core strong {
    font-size: 16px;
    font-weight: 1000;
}

.cm162-primary-core span {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 800;
    opacity: .82;
}

.cm162-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 430px;
    height: 205px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(102,88,218,.18);
    border-radius: 50%;
    animation: cm162OrbitBreath 3.2s ease-in-out infinite;
}

.cm162-child {
    position: absolute;
    width: 116px;
    text-align: center;
    transition: transform .5s ease, opacity .35s ease, filter .35s ease;
}

.cm162-child-avatar {
    width: 62px;
    height: 62px;
    margin: 0 auto 8px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 34px rgba(47,50,105,.12);
    font-size: 27px;
}

.cm162-child strong {
    display: block;
    color: #292b49;
    font-size: 12px;
    font-weight: 950;
}

.cm162-child small {
    display: block;
    margin-top: 2px;
    color: #777b91;
    font-size: 9px;
    font-weight: 750;
}

.cm162-lina { left: 4%; top: 25%; }
.cm162-jad { left: 50%; bottom: -2%; transform: translateX(-50%); }
.cm162-maya { right: 4%; top: 25%; }

.cm-mirror-flow[data-cm162-phase="observe"] .cm162-lina,
.cm-mirror-flow[data-cm162-phase="adapt"] .cm162-jad,
.cm-mirror-flow[data-cm162-phase="prepare"] .cm162-maya {
    transform: translateY(-8px) scale(1.05);
    filter: saturate(1.08);
}

.cm-mirror-flow[data-cm162-phase="adapt"] .cm162-jad {
    transform: translate(-50%, -8px) scale(1.05);
}

/* ===================== COLLÈGE ===================== */

.cm-mirror-flow[data-cm162-tier="middle"] .cm162-middle {
    display: block;
}

.cm162-network {
    position: absolute;
    inset: 15px 45px;
}

.cm162-node {
    position: absolute;
    width: 108px;
    min-height: 54px;
    display: grid;
    place-items: center;
    padding: 8px;
    border: 1px solid rgba(88,82,173,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.82);
    color: #3d3f62;
    box-shadow: 0 13px 34px rgba(48,52,105,.08);
    text-align: center;
    font-size: 10px;
    font-weight: 900;
}

.cm162-node-a { left: 3%; top: 21%; }
.cm162-node-b { left: 22%; bottom: 10%; }
.cm162-node-c { right: 22%; bottom: 10%; }
.cm162-node-d { right: 3%; top: 21%; }

.cm162-network-core {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 30px;
    background: linear-gradient(145deg, #6758dc, #4d95e8);
    color: #fff;
    box-shadow: 0 23px 58px rgba(78,82,188,.22);
    text-align: center;
}

.cm162-network-core strong {
    font-size: 15px;
    font-weight: 1000;
}

.cm162-network-core span {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 750;
    opacity: .82;
}

.cm162-link {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 245px;
    height: 1px;
    transform-origin: 0 0;
    background: linear-gradient(90deg, rgba(101,87,217,.45), rgba(75,155,232,.07));
}

.cm162-link-a { transform: rotate(198deg); }
.cm162-link-b { transform: rotate(145deg); }
.cm162-link-c { transform: rotate(35deg); }
.cm162-link-d { transform: rotate(-18deg); }

.cm162-signal {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 10px;
    height: 10px;
    margin: -5px;
    border-radius: 50%;
    background: #6658da;
    box-shadow: 0 0 24px rgba(102,88,218,.65);
}

.cm-mirror-flow[data-cm162-phase="observe"] .cm162-signal {
    animation: cm162SignalA 1.35s ease-in-out infinite;
}
.cm-mirror-flow[data-cm162-phase="adapt"] .cm162-signal {
    animation: cm162SignalB 1.35s ease-in-out infinite;
}
.cm-mirror-flow[data-cm162-phase="prepare"] .cm162-signal {
    animation: cm162SignalC 1.35s ease-in-out infinite;
}

/* ===================== LYCÉE ===================== */

.cm-mirror-flow[data-cm162-tier="high"] .cm162-high {
    display: block;
}

.cm162-academic {
    position: absolute;
    inset: 18px 30px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 22px;
    align-items: center;
}

.cm162-academic-left,
.cm162-academic-right {
    min-height: 208px;
    padding: 22px;
    border: 1px solid rgba(81,78,153,.11);
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 18px 46px rgba(45,48,95,.07);
}

.cm162-academic-tag {
    color: #777b90;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cm162-academic-round {
    margin-top: 10px;
    color: #22243d;
    font-size: 28px;
    font-weight: 1000;
    letter-spacing: -.035em;
}

.cm162-academic-next {
    margin-top: 14px;
    color: #5d5f78;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.55;
}

.cm162-track {
    display: grid;
    grid-template-columns: 92px 1fr 52px;
    gap: 10px;
    align-items: center;
    margin: 14px 0;
}

.cm162-track span,
.cm162-track em {
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
}

.cm162-track span { color: #555970; }
.cm162-track em { color: #777b91; text-align: right; }

.cm162-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(80,79,143,.07);
}

.cm162-bar::after {
    content: "";
    display: block;
    width: 58%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6658da, #4f9ee5);
    transform-origin: left;
    animation: cm162Bar 1.8s ease-in-out infinite alternate;
}

.cm162-track:nth-child(3) .cm162-bar::after { width: 72%; animation-delay: .18s; }
.cm162-track:nth-child(4) .cm162-bar::after { width: 64%; animation-delay: .36s; }

/* ===================== SUPÉRIEUR ===================== */

.cm-mirror-flow[data-cm162-tier="higher"] .cm162-higher {
    display: block;
}

.cm162-knowledge {
    position: absolute;
    inset: 15px 50px;
}

.cm162-knowledge-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 94px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 22px;
    background: linear-gradient(145deg, #262a45, #32375c);
    color: #fff;
    box-shadow: 0 24px 65px rgba(29,32,61,.23);
    text-align: center;
}

.cm162-knowledge-core strong {
    font-size: 14px;
    font-weight: 1000;
}

.cm162-knowledge-core span {
    font-size: 9px;
    font-weight: 750;
    opacity: .72;
}

.cm162-k-node {
    position: absolute;
    width: 82px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(78,82,145,.13);
    border-radius: 15px;
    background: rgba(255,255,255,.82);
    color: #484b68;
    box-shadow: 0 11px 28px rgba(38,42,78,.07);
    font-size: 9px;
    font-weight: 900;
}

.cm162-k1 { left: 5%; top: 17%; }
.cm162-k2 { left: 12%; bottom: 13%; }
.cm162-k3 { right: 12%; bottom: 13%; }
.cm162-k4 { right: 5%; top: 17%; }
.cm162-k5 { left: 50%; top: 2%; transform: translateX(-50%); }

.cm162-k-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 250px;
    height: 1px;
    transform-origin: 0 0;
    background: linear-gradient(90deg, rgba(60,65,110,.36), rgba(93,89,181,.06));
}

.cm162-kl1 { transform: rotate(205deg); }
.cm162-kl2 { transform: rotate(153deg); }
.cm162-kl3 { transform: rotate(27deg); }
.cm162-kl4 { transform: rotate(-25deg); }
.cm162-kl5 { width: 132px; transform: rotate(-90deg); }

.cm162-k-pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px;
    border: 2px solid rgba(102,88,218,.50);
    border-radius: 50%;
    animation: cm162KnowledgePulse 1.6s ease-out infinite;
}

/* ===================== FOOTER / PHASE ===================== */

.cm162-foot {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.cm162-phases {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cm162-phase-pill {
    min-width: 82px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #85889a;
    background: rgba(255,255,255,.54);
    border: 1px solid rgba(83,80,151,.08);
    text-align: center;
    font-size: 9px;
    font-weight: 850;
    transition: all .3s ease;
}

.cm-mirror-flow[data-cm162-phase="observe"] [data-cm162-pill="observe"],
.cm-mirror-flow[data-cm162-phase="adapt"] [data-cm162-pill="adapt"],
.cm-mirror-flow[data-cm162-phase="prepare"] [data-cm162-pill="prepare"] {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #6758dc, #4f99e5);
    box-shadow: 0 9px 24px rgba(87,84,188,.18);
    transform: translateY(-2px);
}

.cm162-note {
    color: #8a8d9e;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .025em;
}

@keyframes cm162Pulse {
    0%,100% { transform: scale(.88); opacity: .65; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes cm162OrbitBreath {
    0%,100% { transform: translate(-50%, -50%) rotate(-2deg) scale(.98); }
    50% { transform: translate(-50%, -50%) rotate(2deg) scale(1.02); }
}

@keyframes cm162SignalA {
    0% { transform: translate(0,0); }
    50% { transform: translate(-190px,-55px); }
    100% { transform: translate(0,0); }
}
@keyframes cm162SignalB {
    0% { transform: translate(0,0); }
    50% { transform: translate(-132px,95px); }
    100% { transform: translate(0,0); }
}
@keyframes cm162SignalC {
    0% { transform: translate(0,0); }
    50% { transform: translate(175px,-45px); }
    100% { transform: translate(0,0); }
}

@keyframes cm162Bar {
    from { transform: scaleX(.48); opacity: .60; }
    to { transform: scaleX(1); opacity: 1; }
}

@keyframes cm162KnowledgePulse {
    0% { transform: scale(.55); opacity: .85; }
    100% { transform: scale(7.5); opacity: 0; }
}

@media (max-width: 760px) {
    .cm162-scene {
        padding: 22px 16px 18px;
    }

    .cm162-title {
        font-size: 25px;
    }

    .cm162-subtitle {
        max-width: 330px;
        font-size: 10px;
    }

    .cm162-stage {
        min-height: 330px;
    }

    .cm162-panel {
        height: 325px;
    }

    .cm162-primary-world {
        width: 118px;
        height: 118px;
    }

    .cm162-orbit {
        width: 300px;
        height: 190px;
    }

    .cm162-child {
        width: 90px;
    }

    .cm162-child-avatar {
        width: 50px;
        height: 50px;
        border-radius: 18px;
        font-size: 22px;
    }

    .cm162-lina { left: 0; top: 27%; }
    .cm162-maya { right: 0; top: 27%; }

    .cm162-network {
        inset: 18px 8px;
    }

    .cm162-node {
        width: 82px;
        min-height: 46px;
        font-size: 8px;
    }

    .cm162-network-core {
        width: 104px;
        height: 104px;
    }

    .cm162-link {
        width: 160px;
    }

    .cm162-academic {
        inset: 10px 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .cm162-academic-left,
    .cm162-academic-right {
        min-height: 0;
        padding: 14px 16px;
    }

    .cm162-academic-left {
        display: none;
    }

    .cm162-track {
        grid-template-columns: 78px 1fr 45px;
        margin: 12px 0;
    }

    .cm162-knowledge {
        inset: 20px 5px;
    }

    .cm162-k-node {
        width: 72px;
        height: 42px;
        font-size: 8px;
    }

    .cm162-k1 { left: 0; }
    .cm162-k2 { left: 3%; }
    .cm162-k3 { right: 3%; }
    .cm162-k4 { right: 0; }

    .cm162-k-line {
        width: 170px;
    }

    .cm162-phases {
        gap: 5px;
    }

    .cm162-phase-pill {
        min-width: 70px;
        padding: 6px 7px;
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cm162-scene *,
    .cm162-scene *::before,
    .cm162-scene *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* === CLASSMIRROR V162 TRANSITIONS PAR NIVEAU : END === */