.eg-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.eg-section {
    padding: 50px 0;
}

.eg-hero {
    padding: 80px 0;
    background:
        linear-gradient(135deg, #5b3df5 0%, #7c5cff 45%, #ff7a59 100%);
    color: white;
}

.eg-hero-content {
    max-width: 720px;
}

.eg-hero h1,
.eg-workshop-hero h1 {
    margin: 8px 0 15px;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
}

.eg-intro {
    max-width: 650px;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

.eg-kicker {
    margin: 0;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .85;
}

.eg-section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 28px;
}

.eg-section-header h2 {
    margin: 5px 0 0;
    font-size: 2rem;
}

.eg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 24px;
}

.eg-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e8ef;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(30, 30, 60, .06);
}

.eg-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 22px 0;
}

.eg-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #f3f0ff;
    font-size: 2rem;
}

.eg-card > .eg-card-icon {
    margin: 22px 22px 0;
}

.eg-card-body {
    flex: 1;
    padding: 20px 22px;
}

.eg-card-body h3 {
    margin: 7px 0 12px;
    font-size: 1.35rem;
}

.eg-card-body p {
    color: #626275;
    line-height: 1.6;
}

.eg-card-subject {
    display: inline-block;
    color: #6847ea;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.eg-card-footer {
    padding: 0 22px 22px;
}

.eg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    transition: .2s ease;
}

.eg-btn-primary {
    background: #6545e8;
    color: #fff;
}

.eg-btn-primary:hover {
    background: #5134cd;
    transform: translateY(-1px);
}

.eg-workshop-hero {
    padding: 50px 0;
    background: linear-gradient(135deg, #f6f2ff, #fff6f1);
}

.eg-workshop-title {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
}

.eg-workshop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 85px;
    width: 85px;
    height: 85px;
    border-radius: 24px;
    background: white;
    font-size: 2.8rem;
    box-shadow: 0 10px 30px rgba(40, 30, 90, .08);
}

.eg-workshop-title h1 {
    color: #272536;
    font-size: clamp(2rem, 4vw, 3rem);
}

.eg-workshop-title p {
    color: #626275;
    max-width: 700px;
}

.eg-back {
    color: #6545e8;
    text-decoration: none;
    font-weight: 700;
}

.eg-xp {
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff4ce;
    color: #7d5b00;
    font-size: .85rem;
    font-weight: 800;
}

.eg-progress-block {
    margin-top: 22px;
}

.eg-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
    font-size: .9rem;
}

.eg-progress {
    height: 10px;
    overflow: hidden;
    background: #ececf2;
    border-radius: 999px;
}

.eg-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #6545e8, #9c7cff);
    border-radius: inherit;
    transition: width .35s ease;
}

.eg-empty,
.eg-alert {
    padding: 25px;
    border-radius: 16px;
    background: #f7f7fa;
}

.eg-alert-error {
    background: #fff1f1;
    color: #9b2d2d;
}

@media (max-width: 650px) {

    .eg-hero {
        padding: 55px 0;
    }

    .eg-workshop-title {
        align-items: flex-start;
    }

    .eg-workshop-icon {
        flex-basis: 65px;
        width: 65px;
        height: 65px;
        font-size: 2rem;
        border-radius: 18px;
    }

    .eg-section {
        padding: 35px 0;
    }
}

/* Mission / jeu */
.eg-game-list{display:grid;gap:16px}.eg-game-step{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px;border:1px solid #e7e7ef;border-radius:18px;background:#fff}.eg-game-step.is-locked{opacity:.7;background:#f8f8fb}.eg-game-number{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f1edff;color:#6545e8;font-weight:900}.eg-game-step-body h3{margin:0 0 7px}.eg-game-step-body p{margin:0 0 8px;color:#626275}.eg-status{font-size:.86rem;font-weight:800}.eg-btn-disabled{background:#e7e7ed;color:#888894;cursor:not-allowed}.eg-iframe-shell{overflow:hidden;border:1px solid #dedee8;border-radius:18px;background:#fff;margin-top:22px}.eg-validation-box{margin-top:22px;padding:22px;border-radius:18px;background:#f7f5ff;border:1px solid #e3dcff}.eg-validation-box h2{margin-top:0}@media(max-width:720px){.eg-game-step{grid-template-columns:48px minmax(0,1fr)}.eg-game-step-action{grid-column:1/-1}.eg-game-step-action .eg-btn{width:100%}}


/* ===== Validation automatique LearningApps - V1.3 ===== */

.eg-learningapps-player {
    margin-top: 20px;
}

.eg-auto-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 15px;
    border: 1px solid #e3defc;
    border-radius: 12px;
    background: #f8f6ff;
    color: #514a69;
    font-weight: 700;
}

.eg-auto-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #6b46f2;
}

.eg-auto-status.is-saving .eg-auto-dot {
    animation: egPulse 1s infinite ease-in-out;
}

.eg-auto-status.is-success {
    border-color: #b9e6c8;
    background: #f2fbf5;
    color: #176a37;
}

.eg-auto-status.is-success .eg-auto-dot {
    background: #25a55a;
}

.eg-auto-status.is-error {
    border-color: #f0caca;
    background: #fff5f5;
    color: #9d3030;
}

.eg-auto-status.is-error .eg-auto-dot {
    background: #d94a4a;
}

.eg-success-panel {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #b9e6c8;
    border-radius: 16px;
    background: #f2fbf5;
}

.eg-success-panel[hidden] {
    display: none;
}

.eg-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #25a55a;
    color: white;
    font-size: 1.4rem;
    font-weight: 900;
}

.eg-success-panel p {
    margin: 4px 0 0;
    color: #44614e;
}

.eg-fallback-validation {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px dashed #d8d4e8;
    border-radius: 12px;
    color: #666176;
}

.eg-fallback-validation summary {
    cursor: pointer;
    font-weight: 700;
}

.eg-fallback-validation p {
    margin: 10px 0;
}

.eg-btn-secondary {
    background: #efedf8;
    color: #4f4674;
}

@keyframes egPulse {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 720px) {
    .eg-success-panel {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .eg-success-panel .eg-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* ===== EduGames V1.5 : Primaire / Collège ===== */
.eg-level-switch{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.eg-level-choice{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 16px;border:1px solid rgba(255,255,255,.42);border-radius:999px;color:#fff;text-decoration:none;font-weight:800;background:rgba(255,255,255,.10)}.eg-level-choice:hover,.eg-level-choice.is-active{background:#fff;color:#5d43dc}.eg-level-badge{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border-radius:999px;font-size:.78rem;font-weight:900}.eg-level-badge.is-primary{background:#eaf8ee;color:#23713d}.eg-level-badge.is-college{background:#eeebff;color:#5c45ce}.eg-level-more{color:#6545e8;text-decoration:none;font-weight:800}.eg-level-more:hover{text-decoration:underline}.eg-level-separator{height:1px;margin:46px 0;background:#ececf2}.eg-workshop-heading-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.eg-workshop-heading-row h1{margin-right:4px}.eg-empty-level{margin-bottom:10px}@media(max-width:650px){.eg-level-switch{display:grid;grid-template-columns:1fr}.eg-level-choice{width:100%}.eg-level-section-head{align-items:flex-start;flex-direction:column}}


/* ===== EduGames V1.6 : classes précises ===== */

.eg-grade-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.eg-grade-choice {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.30);
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 800;
}

.eg-grade-choice:hover,
.eg-grade-choice.is-active {
    background: rgba(255,255,255,.96);
    color: #5c43d8;
}

.eg-grade-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0;
}

.eg-grade-badges-hero {
    margin-top: 14px;
    margin-bottom: 0;
}

.eg-grade-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f1effb;
    color: #5b4e8a;
    font-size: .78rem;
    font-weight: 850;
}

.eg-grade-badge.is-all {
    background: #eef7f1;
    color: #39704a;
}

.eg-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 20px;
}

.eg-admin-card {
    padding: 20px;
    border: 1px solid #e7e7ef;
    border-radius: 18px;
    background: #fff;
}

.eg-admin-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.eg-admin-card-head small {
    display: block;
    margin-top: 3px;
    color: #777384;
}

.eg-admin-label {
    display: grid;
    gap: 7px;
    margin-bottom: 12px;
    font-weight: 800;
}

.eg-admin-select {
    width: 100%;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid #dcdbe5;
    border-radius: 10px;
    background: #fff;
}

.eg-admin-help {
    margin: 0 0 12px;
    color: #6f6b7b;
    font-size: .9rem;
}

.eg-admin-grades {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 18px;
}

.eg-grade-check {
    cursor: pointer;
}

.eg-grade-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eg-grade-check span {
    display: inline-flex;
    min-width: 48px;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid #dedce8;
    border-radius: 999px;
    font-weight: 800;
}

.eg-grade-check input:checked + span {
    border-color: #6545e8;
    background: #f0edff;
    color: #5b3fde;
}

@media(max-width:650px) {
    .eg-grade-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .eg-grade-choice {
        justify-content: center;
    }
}


/* ===== EduGames V1.7 : organisation admin ===== */

.eg-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0;
}

.eg-admin-tab {
    border: 1px solid #dedce8;
    border-radius: 999px;
    background: #fff;
    padding: 9px 16px;
    font-weight: 850;
    cursor: pointer;
}

.eg-admin-tab.is-active {
    background: #6545e8;
    border-color: #6545e8;
    color: #fff;
}

.eg-admin-tab-panel {
    display: none;
}

.eg-admin-tab-panel.is-active {
    display: block;
}

.eg-admin-list {
    display: grid;
    gap: 14px;
}

.eg-admin-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px, 520px);
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid #e6e5ee;
    border-radius: 16px;
    background: #fff;
}

.eg-admin-row-main {
    min-width: 0;
}

.eg-admin-row-main strong {
    display: block;
    font-size: 1rem;
}

.eg-admin-row-main small {
    display: block;
    margin-top: 5px;
    color: #777384;
}

.eg-admin-move-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
}

@media(max-width:780px) {
    .eg-admin-row {
        grid-template-columns: 1fr;
    }

    .eg-admin-move-form {
        grid-template-columns: 1fr;
    }

    .eg-admin-move-form .eg-btn {
        width: 100%;
    }
}


/* ===== EduGames V1.8 : création missions / jeux ===== */

.eg-admin-create-card {
    margin-bottom: 28px;
    padding: 22px;
    border: 1px solid #ddd8ff;
    border-radius: 18px;
    background: linear-gradient(180deg,#faf9ff,#fff);
}

.eg-admin-create-head {
    margin-bottom: 20px;
}

.eg-admin-create-head > div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.eg-admin-create-head h2 {
    margin: 0 0 4px;
}

.eg-admin-create-head p {
    margin: 0;
    color: #706b7e;
}

.eg-admin-create-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #6545e8;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
}

.eg-admin-form {
    display: grid;
    gap: 16px;
}

.eg-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.eg-form-span-2 {
    grid-column: span 2;
}

.eg-admin-input,
.eg-admin-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dcdbe5;
    border-radius: 10px;
    background: #fff;
    padding: 10px 11px;
    font: inherit;
}

.eg-admin-textarea {
    resize: vertical;
}

.eg-admin-input:focus,
.eg-admin-textarea:focus,
.eg-admin-select:focus {
    outline: 2px solid rgba(101,69,232,.18);
    border-color: #6545e8;
}

.eg-admin-checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    font-weight: 800;
}

.eg-admin-list-title {
    margin: 28px 0 14px;
    font-size: 1.25rem;
}

@media(max-width:720px) {
    .eg-form-grid {
        grid-template-columns: 1fr;
    }

    .eg-form-span-2 {
        grid-column: auto;
    }
}