@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700&display=swap');

*{box-sizing:border-box}
html{background:#fff}
body{margin:0;color:#262f40;background:#fff;font-family:Tajawal,sans-serif}
.edu-container{width:min(100% - 32px,1400px);margin:auto}

.edu-header{background:#dbe6f1}
.edu-header-inner{height:84px;display:flex;align-items:center;justify-content:space-between}
.edu-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#262f40;font:700 24px Cairo}
.edu-brand-icon{width:50px;height:50px;border-radius:12px;background:#1763a6;color:#fff;display:grid;place-items:center}
.edu-langs{display:flex;gap:10px}
.edu-langs a{text-decoration:none;font-size:20px}
.edu-blue-line{height:10px;background:#1763a6}

.edu-main{padding:70px 0 90px}
.edu-level-title{display:flex;gap:18px;align-items:flex-start;margin-bottom:30px}
.edu-level-title a{text-decoration:none;color:#1763a6;font-size:28px}
.edu-level-title h1{margin:0;font:800 32px Cairo}
.edu-level-title p{margin:6px 0 0;color:#7c8797}
.edu-section-title{font:700 30px Cairo;text-align:start;margin:20px 0 36px}

.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.subject-card{min-height:230px;padding:32px;border:1px solid #d9e0e8;border-radius:20px;text-decoration:none;color:#262f40;box-shadow:0 2px 8px rgba(23,42,67,.03);transition:.2s}
.subject-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(23,42,67,.1)}
.subject-icon{width:72px;height:72px;border-radius:18px;color:#fff;display:grid;place-items:center;margin-bottom:24px}
.edu-svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.color-primary{background:#1763a6}.color-pink{background:#df3777}.color-yellow{background:#fdbd17}.color-green{background:#2fac79}.color-orange{background:#ff8d13}
.subject-card h3{font:700 24px Cairo;margin:0 0 6px}
.subject-card p{margin:0;color:#8993a4;font-size:18px}

.resource-page{padding:38px 0 64px;background:#f5f8fb;min-height:calc(100vh - 94px)}
.resource-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
.resource-top a{color:#1763a6;text-decoration:none;font-weight:700}
.resource-top h1{margin:0;font:800 28px Cairo}

/* Lecteur principal, inspiré des deux interfaces de cours fournies */
.learning-console{
    display:grid;
    grid-template-columns:minmax(0,2.15fr) minmax(300px,.88fr);
    grid-template-rows:minmax(500px,68vh) 52px;
    background:#0b1d48;
    border:12px solid #0b1d48;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 18px 55px rgba(11,29,72,.18)
}

.resource-stage{
    position:relative;
    min-width:0;
    background:#101010;
    overflow:hidden
}

.resource-pane{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    overflow:auto;
    background:#fff
}
.resource-pane.is-active{display:flex}

.resource-pane img,
.resource-pane video{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#101010
}
.course-cover,
.resource-image{object-position:center center}

.resource-video{
    max-width:100%;
    max-height:100%;
    background:#000
}

.resource-pdf{
    width:100%;
    height:100%;
    border:0;
    background:#fff
}

.resource-placeholder,
.resource-missing,
.text-resource,
.audio-resource{
    width:100%;
    min-height:100%;
    padding:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(135deg,#eef5fc,#fff)
}

.placeholder-icon,
.resource-missing>span,
.audio-visual{
    width:84px;
    height:84px;
    margin-bottom:20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e2edf8;
    color:#1763a6;
    font-size:36px
}

.resource-placeholder strong,
.resource-missing h2,
.text-resource h2,
.audio-resource h2{
    margin:0 0 16px;
    font:800 34px Cairo;
    color:#1763a6
}

.resource-placeholder>span:last-child,
.resource-missing p,
.media-hint{
    max-width:760px;
    margin:0;
    color:#667286;
    font-size:19px;
    line-height:1.8
}

.audio-resource audio{
    width:min(680px,92%);
    margin:10px 0 28px
}

.resource-rich-body{
    width:min(900px,94%);
    color:#344054;
    text-align:start;
    font-size:19px;
    line-height:1.9
}
.resource-rich-body h1,
.resource-rich-body h2,
.resource-rich-body h3{font-family:Cairo,sans-serif;color:#1763a6}
.resource-rich-body img{max-width:100%;height:auto;background:transparent}
.resource-rich-body ul,
.resource-rich-body ol{padding-inline-start:30px}

.stage-fullscreen{
    position:absolute;
    z-index:10;
    top:14px;
    right:14px;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:8px;
    background:rgba(10,23,49,.72);
    color:#fff;
    font-size:23px;
    cursor:pointer;
    backdrop-filter:blur(5px)
}
html[dir=rtl] .stage-fullscreen{right:auto;left:14px}
.stage-fullscreen:hover,
.stage-fullscreen.is-active{background:#1763a6}

.resource-stage:fullscreen{
    width:100vw;
    height:100vh;
    background:#000
}
.resource-stage:fullscreen .resource-pane{background:#000}
.resource-stage:fullscreen .text-resource,
.resource-stage:fullscreen .audio-resource,
.resource-stage:fullscreen .resource-missing,
.resource-stage:fullscreen .resource-placeholder{background:#fff}

.resource-menu{
    background:#430707;
    padding:11px;
    display:flex;
    flex-direction:column;
    gap:9px;
    overflow:auto
}
.resource-menu button{
    position:relative;
    min-height:64px;
    padding:11px 16px;
    border:2px solid transparent;
    background:#d8d600;
    color:#161616;
    font:500 21px Georgia,serif;
    cursor:pointer;
    transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px
}
.resource-button-icon{
    min-width:30px;
    font:700 15px ui-sans-serif,system-ui,sans-serif;
    opacity:.68
}
.resource-menu button:hover{
    background:#ecea00;
    transform:translateY(-1px)
}
.resource-menu button.is-active{
    background:#fff200;
    border-color:#fff;
    box-shadow:inset 0 0 0 2px #8e7800,0 2px 7px rgba(0,0,0,.22)
}

.resource-status{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    align-items:center;
    min-width:0;
    padding:0 18px;
    background:#430707;
    color:#f0ee00;
    font:700 18px Georgia,serif
}
.resource-status strong{
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.resource-status span:first-child{text-align:start}
.resource-status span:last-child{text-align:end}
.resource-status span{font-weight:500}

.clickable-level{cursor:pointer}
.clickable-level:hover{filter:brightness(1.03)}

html[dir=rtl] .subject-icon{margin-left:0;margin-right:auto}
html[dir=ltr] .subject-icon{margin-right:0;margin-left:auto}

@media(max-width:900px){
    .subject-grid{grid-template-columns:1fr 1fr}
    .learning-console{
        grid-template-columns:1fr;
        grid-template-rows:minmax(420px,58vh) auto 50px
    }
    .resource-menu{
        display:grid;
        grid-template-columns:1fr 1fr;
        max-height:none
    }
    .resource-status{grid-column:1}
    .resource-top{align-items:flex-start;flex-direction:column-reverse}
}

@media(max-width:600px){
    .subject-grid{grid-template-columns:1fr}
    .edu-header-inner{height:68px}
    .edu-brand{font-size:19px}
    .edu-brand-icon{width:42px;height:42px}
    .edu-main{padding-top:40px}
    .subject-card{min-height:180px}
    .resource-page{padding-top:20px}
    .learning-console{border-width:6px;border-radius:10px;grid-template-rows:52vh auto 46px}
    .resource-menu{grid-template-columns:1fr}
    .resource-menu button{min-height:54px;font-size:18px}
    .resource-placeholder,
    .resource-missing,
    .text-resource,
    .audio-resource{padding:26px}
    .resource-placeholder strong,
    .resource-missing h2,
    .text-resource h2,
    .audio-resource h2{font-size:25px}
    .resource-rich-body{font-size:17px}
    .resource-status{font-size:14px;padding:0 10px;grid-template-columns:1fr 1.6fr 1fr}
}

/* EDUMAJID_PLAYER_SCALE_V3 */
@media (min-width: 901px) {
    .learning-console {
        grid-template-rows: clamp(520px, calc(100vh - 250px), 720px) 52px;
    }

    .resource-menu {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-gutter: stable;
    }

    .resource-menu button {
        flex: 0 0 auto;
        min-height: 56px;
        padding: 8px 12px;
        font-size: clamp(17px, 1.25vw, 20px);
        line-height: 1.22;
    }
}

.resource-menu {
    scroll-behavior: smooth;
}

.resource-menu button {
    scroll-margin-block: 8px;
}
/* /EDUMAJID_PLAYER_SCALE_V3 */

/* EDUMAJID_ELIZABETH_LEVEL_LOGO */
.edu-elizabeth-level-logo {
    display: block;
    width: 88px;
    height: 88px;
    max-width: 88px;
    max-height: 88px;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(16, 54, 84, .12);
}
.edu-elizabeth-logo-holder {
    width: 94px !important;
    height: 94px !important;
    min-width: 94px !important;
    min-height: 94px !important;
    padding: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(16, 54, 84, .12) !important;
}
.edu-elizabeth-logo-holder .edu-elizabeth-level-logo {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    box-shadow: none;
}
@media (max-width: 640px) {
    .edu-elizabeth-level-logo {
        width: 72px;
        height: 72px;
    }
    .edu-elizabeth-logo-holder {
        width: 78px !important;
        height: 78px !important;
        min-width: 78px !important;
        min-height: 78px !important;
    }
}
/* EDUMAJID_LEVEL_LOGO_NO_COLOR_V733 */
/* Les Niveaux utilisent désormais uniquement le logo Elizabeth, sans couleur décorative. */
a[href*="/class/"] .edu-elizabeth-logo-holder,
a[href*="/class/"] [class*="icon"],
a[href*="/class/"] [class*="badge"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
}
a[href*="/class/"] .edu-elizabeth-logo-holder::before,
a[href*="/class/"] .edu-elizabeth-logo-holder::after,
a[href*="/class/"] [class*="icon"]::before,
a[href*="/class/"] [class*="icon"]::after,
a[href*="/class/"] [class*="badge"]::before,
a[href*="/class/"] [class*="badge"]::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}
a[href*="/class/"] img.edu-elizabeth-level-logo {
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* EDUMAJID_PROGRAM_SWITCH_V8 */
.edu-program-switch{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    margin-inline-start:auto;
    margin-inline-end:12px;
    padding:0 12px;
    border:1px solid rgba(23,104,169,.14);
    border-radius:999px;
    background:#fff;
    color:#1768a9;
    text-decoration:none;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}
.edu-program-switch:hover{background:#eef6fc}
.edu-program-switch+.edu-langs{margin-inline-start:0!important}
@media(max-width:700px){
    .edu-program-switch{min-height:30px;margin-inline-end:7px;padding:0 8px;font-size:10px}
}