:root {
    --color-primary: #2B0960;
    --color-dark: #0F172A;
    --color-accent: #2B0960;
    --color-accent-light: #EEE8F8;
    --color-bg: #F8F7FB;
    --color-surface: #FFFFFF;
    --color-text: #1F2937;
    --color-muted: #6B7280;
    --color-border: #E5E7EB;
    --color-gold: #F5B84B;
    --color-success: #22C55E;
    --color-info: #2563EB;
    --color-warning: #F97316;
    --color-danger: #DC2626;
    --brand-primary: var(--color-primary);
    --brand-accent: var(--color-primary);
    --brand-white: var(--color-surface);
    --brand-text: var(--color-text);
    --brand-dark: var(--color-dark);
    --ink: var(--color-text);
    --muted: var(--color-muted);
    --line: var(--color-border);
    --soft: var(--color-bg);
    --white: var(--color-surface);
    --green: var(--color-primary);
    --green-dark: #1E0646;
    --amber: var(--color-warning);
    --red: var(--color-danger);
    --blue: var(--color-info);
    --gold: var(--color-gold);
    --surface: var(--color-surface);
    --surface-strong: #111827;
    --shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
    --shadow-soft: 0 12px 34px rgba(15, 23, 42, 0.08);
    --eg-ui-bg: var(--color-bg);
    --eg-ui-surface: var(--color-surface);
    --eg-ui-surface-muted: #FCFBFE;
    --eg-ui-surface-soft: #F3F0F8;
    --eg-ui-border: var(--color-border);
    --eg-ui-border-strong: rgba(43, 9, 96, 0.1);
    --eg-ui-text: var(--color-text);
    --eg-ui-text-soft: var(--color-muted);
    --eg-ui-heading: var(--color-dark);
    --eg-ui-primary: var(--color-primary);
    --eg-ui-primary-soft: rgba(43, 9, 96, 0.08);
    --eg-ui-success-soft: rgba(34, 197, 94, 0.12);
    --eg-ui-warning-soft: rgba(249, 115, 22, 0.12);
    --eg-ui-danger-soft: rgba(220, 38, 38, 0.12);
    --eg-ui-info-soft: rgba(37, 99, 235, 0.12);
    --eg-ui-radius-sm: 10px;
    --eg-ui-radius-md: 14px;
    --eg-ui-radius-lg: 18px;
    --eg-ui-radius-xl: 22px;
    --eg-ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --eg-ui-shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
    --eg-ui-shadow-md: 0 18px 40px rgba(15, 23, 42, 0.08);
    --eg-ui-space-1: 4px;
    --eg-ui-space-2: 8px;
    --eg-ui-space-3: 12px;
    --eg-ui-space-4: 16px;
    --eg-ui-space-5: 20px;
    --eg-ui-space-6: 24px;
    --eg-ui-space-7: 28px;
    --eg-ui-space-8: 32px;
    --eg-ui-text-xs: 11px;
    --eg-ui-text-sm: 12.5px;
    --eg-ui-text-md: 14px;
    --eg-ui-text-lg: 16px;
    --eg-ui-text-xl: 20px;
    --eg-ui-title-sm: 17px;
    --eg-ui-title-md: 22px;
    --eg-ui-title-lg: 28px;
    --eg-ui-transition-fast: 0.15s ease;
    --eg-ui-transition-base: 0.22s ease;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--color-bg);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary);
}

img {
    display: block;
    max-width: 100%;
}

input,
select,
textarea,
button {
    font: inherit;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: var(--white);
    color: var(--ink);
}

textarea {
    resize: vertical;
}

label {
    display: grid;
    gap: 0.4rem;
    color: var(--muted);
    font-weight: 700;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 740px;
}

th,
td {
    padding: 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 0.88rem;
    text-transform: uppercase;
}

.container {
    width: min(1120px, calc(100% - 2rem));
    margin-inline: auto;
}

/* ==========================================================================
   EG UI design system — base commune prudente
   Prépare l'harmonisation progressive sans toucher aux vues existantes.
   ========================================================================== */

.eg-ui-surface {
    background: var(--eg-ui-surface);
    border: 1px solid var(--eg-ui-border);
    border-radius: var(--eg-ui-radius-lg);
    box-shadow: var(--eg-ui-shadow-xs);
}

.eg-ui-surface-soft {
    background: var(--eg-ui-surface-muted);
    border: 1px solid var(--eg-ui-border);
    border-radius: var(--eg-ui-radius-lg);
}

.eg-ui-card {
    background: var(--eg-ui-surface);
    border: 1px solid var(--eg-ui-border);
    border-radius: var(--eg-ui-radius-lg);
    box-shadow: var(--eg-ui-shadow-xs);
    padding: var(--eg-ui-space-6);
}

.eg-ui-card-compact {
    background: var(--eg-ui-surface);
    border: 1px solid var(--eg-ui-border);
    border-radius: var(--eg-ui-radius-md);
    box-shadow: var(--eg-ui-shadow-xs);
    padding: var(--eg-ui-space-4);
}

.eg-ui-panel {
    background: var(--eg-ui-surface);
    border: 1px solid var(--eg-ui-border);
    border-radius: var(--eg-ui-radius-lg);
    box-shadow: var(--eg-ui-shadow-xs);
    padding: var(--eg-ui-space-6);
}

.eg-ui-section {
    display: flex;
    flex-direction: column;
    gap: var(--eg-ui-space-5);
}

.eg-ui-stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--eg-ui-space-3);
}

.eg-ui-stack-md {
    display: flex;
    flex-direction: column;
    gap: var(--eg-ui-space-4);
}

.eg-ui-stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--eg-ui-space-6);
}

.eg-ui-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eg-ui-space-5);
}

.eg-ui-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--eg-ui-space-5);
}

.eg-ui-title {
    margin: 0;
    color: var(--eg-ui-heading);
    font-size: var(--eg-ui-title-md);
    line-height: 1.2;
    font-weight: 700;
}

.eg-ui-subtitle {
    margin: 0;
    color: var(--eg-ui-text-soft);
    font-size: var(--eg-ui-text-md);
    line-height: 1.55;
}

.eg-ui-kicker {
    margin: 0;
    color: var(--eg-ui-text-soft);
    font-size: var(--eg-ui-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eg-ui-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--eg-ui-space-4);
}

.eg-ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: var(--eg-ui-radius-sm);
    border: 1px solid transparent;
    background: var(--eg-ui-primary);
    color: #fff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background var(--eg-ui-transition-fast),
        border-color var(--eg-ui-transition-fast),
        color var(--eg-ui-transition-fast),
        transform var(--eg-ui-transition-fast),
        box-shadow var(--eg-ui-transition-fast);
}

.eg-ui-button:hover {
    background: #3d1882;
    color: #fff;
}

.eg-ui-button-secondary {
    background: var(--eg-ui-surface);
    color: var(--eg-ui-primary);
    border-color: var(--eg-ui-border-strong);
}

.eg-ui-button-secondary:hover {
    background: var(--eg-ui-primary-soft);
    color: var(--eg-ui-primary);
}

.eg-ui-button-ghost {
    background: transparent;
    color: var(--eg-ui-text);
    border-color: var(--eg-ui-border);
}

.eg-ui-button-ghost:hover {
    background: var(--eg-ui-surface-soft);
    color: var(--eg-ui-primary);
}

.eg-ui-button-sm {
    min-height: 34px;
    padding: 8px 14px;
    font-size: 12.5px;
}

.eg-ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--eg-ui-primary-soft);
    color: var(--eg-ui-primary);
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.eg-ui-badge-success {
    background: var(--eg-ui-success-soft);
    color: var(--color-success);
}

.eg-ui-badge-warning {
    background: var(--eg-ui-warning-soft);
    color: var(--color-warning);
}

.eg-ui-badge-danger {
    background: var(--eg-ui-danger-soft);
    color: var(--color-danger);
}

.eg-ui-badge-info {
    background: var(--eg-ui-info-soft);
    color: var(--color-info);
}

.eg-ui-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    background: var(--eg-ui-bg);
    border: 1px solid var(--eg-ui-border);
    border-radius: 12px;
    transition: border-color var(--eg-ui-transition-fast), box-shadow var(--eg-ui-transition-fast);
}

.eg-ui-search:focus-within {
    border-color: rgba(43, 9, 96, 0.18);
    box-shadow: 0 0 0 3px rgba(43, 9, 96, 0.06);
}

.eg-ui-search input,
.eg-ui-search select,
.eg-ui-search textarea {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--eg-ui-text);
    outline: none;
}

.eg-ui-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eg-ui-space-4);
}

.eg-ui-empty {
    background: var(--eg-ui-surface-muted);
    border: 1px dashed var(--eg-ui-border);
    border-radius: var(--eg-ui-radius-md);
    padding: var(--eg-ui-space-7);
    text-align: center;
}

.eg-ui-empty h3 {
    margin: 0 0 6px;
    color: var(--eg-ui-heading);
    font-size: 15px;
}

.eg-ui-empty p {
    margin: 0;
    color: var(--eg-ui-text-soft);
    font-size: var(--eg-ui-text-md);
}

.eg-ui-table-card {
    background: var(--eg-ui-surface);
    border: 1px solid var(--eg-ui-border);
    border-radius: var(--eg-ui-radius-lg);
    box-shadow: var(--eg-ui-shadow-xs);
    overflow: hidden;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ink);
    font-weight: 800;
}

.brand-logo {
    display: block;
    width: auto;
    height: 34px;
    max-width: 180px;
    object-fit: contain;
}

.brand-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--green);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    background: var(--color-dark);
}

.button,
button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--green);
    border-radius: 8px;
    padding: 0.72rem 1rem;
    color: var(--white);
    background: var(--green);
    font-weight: 800;
    cursor: pointer;
}

.button:hover {
    color: var(--white);
    background: var(--green-dark);
}

.button-secondary {
    color: var(--green);
    background: var(--white);
}

.button-secondary:hover {
    color: var(--green-dark);
    background: var(--soft);
}

.button-small {
    min-height: 36px;
    padding: 0.5rem 0.8rem;
}

.full-width {
    width: 100%;
}

.link-button {
    border: 0;
    padding: 0;
    color: var(--green);
    background: transparent;
    cursor: pointer;
    font-weight: 700;
}

.danger {
    color: var(--red);
}

.hero {
    background:
        linear-gradient(135deg, rgba(43, 9, 96, 0.10), rgba(15, 23, 42, 0.08)),
        var(--soft);
    border-bottom: 1px solid var(--line);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 3rem;
    align-items: center;
    min-height: 560px;
    padding-block: 4rem;
}

.hero h1,
.page-header h1,
.course-hero h1 {
    margin: 0;
    max-width: 820px;
    font-size: clamp(2.2rem, 4vw, 4.4rem);
    line-height: 1.05;
}

.hero-text,
.page-header p,
.course-hero p {
    max-width: 680px;
    color: var(--muted);
    font-size: 1.08rem;
}

.eyebrow {
    margin: 0 0 0.7rem;
    color: var(--green);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-actions,
.form-actions,
.checkbox-row,
.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

.hero-panel,
.enroll-panel,
.auth-card,
.admin-panel,
.empty-state,
.stat-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.hero-panel {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

.metric {
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
    border-radius: 8px;
    background: var(--color-dark);
    color: var(--white);
}

.metric span {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
}

.metric small,
.lesson-preview small,
.course-meta,
.course-footer small,
.lesson-row small,
.dashboard-row p {
    color: var(--muted);
}

.lesson-preview {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.play-dot,
.comment-dot {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--green);
}

.comment-dot {
    background: var(--amber);
}

.section {
    padding-block: 4rem;
}

.subtle-section {
    background: var(--soft);
}

.section-heading,
.header-actions {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-heading h2,
.section-heading p {
    margin: 0;
}

.compact {
    margin-bottom: 1rem;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.course-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.course-card img,
.course-card-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.course-card-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--color-dark), var(--color-primary));
    color: var(--white);
}

.course-card-placeholder span {
    font-size: 4rem;
    font-weight: 900;
}

.course-card-body {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
}

.course-card h3,
.course-card p {
    margin: 0;
}

.course-meta,
.course-footer,
.course-meta-large {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.course-meta span,
.course-meta-large span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.28rem 0.6rem;
    background: var(--soft);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.page-header,
.course-hero {
    padding-block: 3.5rem;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
}

.course-hero-grid,
.content-grid,
.lesson-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2rem;
    align-items: start;
}

.enroll-panel {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

.enroll-panel strong {
    font-size: 2rem;
}

.filters,
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
    margin-bottom: 2rem;
}

.prose {
    max-width: 760px;
}

.lesson-list,
.comment-list,
.dashboard-list {
    display: grid;
    gap: 0.8rem;
}

.lesson-row,
.dashboard-row,
.sidebar-lesson,
.comment {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.lesson-row {
    display: flex;
    gap: 1rem;
    padding: 0.9rem;
}

.lesson-row > span {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--green);
    font-weight: 900;
}

.video-frame {
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-dark);
}

.video-frame iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.comments {
    margin-top: 2rem;
}

.comment-form {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.comment {
    padding: 1rem;
}

.comment time {
    display: block;
    color: var(--muted);
    font-size: 0.85rem;
}

.lesson-sidebar {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 0.6rem;
}

.sidebar-lesson {
    padding: 0.75rem;
    color: var(--ink);
}

.sidebar-lesson.active {
    border-color: var(--green);
    background: var(--soft);
}

.auth-section {
    display: grid;
    min-height: calc(100vh - 160px);
    place-items: center;
    padding: 3rem 1rem;
    background: var(--soft);
}

.auth-card {
    width: min(460px, 100%);
    padding: 1.4rem;
}

.auth-card form,
.admin-form {
    display: grid;
    gap: 1rem;
}

.checkbox {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.checkbox input {
    width: auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    padding: 1rem;
}

.stat-card span {
    display: block;
    font-size: 2.2rem;
    font-weight: 900;
}

.stat-card p {
    margin: 0;
    color: var(--muted);
}

.admin-panel,
.empty-state {
    padding: 1.25rem;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.table-wrap table {
    border: 0;
}

.form-shell {
    max-width: 880px;
}

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

.flash {
    margin-top: 1rem;
    border: 1px solid #b7dbc8;
    border-radius: 8px;
    padding: 1rem;
    background: #eef8f2;
    color: #145a3f;
}

.flash-error {
    border-color: #f0b6b2;
    background: #fff1f0;
    color: var(--red);
}

.pagination-wrap {
    margin-top: 1.5rem;
}

.site-footer {
    border-top: 1px solid var(--line);
    padding-block: 1.5rem;
    background: var(--color-dark);
    color: var(--white);
}

.footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}

.footer-grid p {
    margin: 0;
}

.footer-branding {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.footer-brand-logo {
    display: block;
    width: auto;
    height: 28px;
    max-width: 160px;
    object-fit: contain;
}

@media (max-width: 900px) {
    .nav-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;
        top: 72px;
        right: 1rem;
        left: 1rem;
        display: none;
        flex-direction: column;
        align-items: stretch;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 1rem;
        background: var(--white);
        box-shadow: var(--shadow);
    }

    .nav-links.open {
        display: flex;
    }

    .hero-grid,
    .course-hero-grid,
    .content-grid,
    .lesson-layout {
        grid-template-columns: 1fr;
    }

    .cards-grid,
    .filters,
    .form-grid,
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lesson-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(100% - 1rem, 1120px);
    }

    .hero-grid {
        min-height: auto;
        padding-block: 2.5rem;
    }

    .hero h1,
    .page-header h1,
    .course-hero h1 {
        font-size: 2.15rem;
    }

    .cards-grid,
    .filters,
    .form-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .section-heading,
    .header-actions,
    .dashboard-row {
        align-items: stretch;
        flex-direction: column;
    }

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

/* Explorer Group SARL theme */
body {
    background: var(--color-bg);
}

.site-header {
    background: rgba(15, 23, 42, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18);
}

.brand,
.nav-links a,
.site-header .link-button {
    color: var(--white);
}

.brand:hover,
.nav-links a:hover,
.site-header .link-button:hover {
    color: var(--gold);
}

.brand-mark {
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: var(--brand-primary);
    box-shadow: 0 0 24px rgba(43, 9, 96, 0.18);
}

.nav-toggle {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
}

.nav-toggle span {
    background: var(--white);
}

.button,
button.button {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    box-shadow: 0 12px 26px rgba(43, 9, 96, 0.18);
}

.button:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
}

.button-secondary {
    border-color: var(--line);
    color: var(--brand-primary);
    background: var(--white);
    box-shadow: none;
}

.button-secondary:hover {
    color: var(--brand-primary);
    background: var(--soft);
}

.link-button,
a {
    color: var(--blue);
}

a:hover {
    color: var(--brand-primary);
}

.hero {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 82% 18%, rgba(245, 184, 75, 0.16), transparent 22%),
        radial-gradient(circle at 18% 78%, rgba(37, 99, 235, 0.14), transparent 28%),
        linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-primary) 100%);
    border-bottom: 0;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto -8% -34% -8%;
    height: 45%;
    background: rgba(255, 255, 255, 0.16);
    transform: rotate(-3deg);
}

.hero-grid {
    position: relative;
    z-index: 1;
    min-height: 620px;
}

.hero h1 {
    color: var(--white);
    text-wrap: balance;
}

.hero-text {
    color: rgba(255, 255, 255, 0.86);
}

.hero .eyebrow {
    color: var(--gold);
}

.hero-panel {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    backdrop-filter: blur(16px);
}

.hero-panel strong,
.hero-panel small {
    color: var(--white);
}

.metric {
    background: rgba(15, 23, 42, 0.84);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.lesson-preview {
    border-color: rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.10);
}

.play-dot,
.comment-dot,
.lesson-row > span {
    background: var(--brand-primary);
    box-shadow: 0 10px 22px rgba(43, 9, 96, 0.18);
}

.page-header,
.course-hero {
    color: var(--white);
    background:
        radial-gradient(circle at 88% 15%, rgba(245, 184, 75, 0.14), transparent 24%),
        linear-gradient(135deg, var(--brand-dark), var(--brand-primary));
    border-bottom: 0;
}

.page-header p,
.course-hero p {
    color: rgba(255, 255, 255, 0.78);
}

.page-header .eyebrow,
.course-hero .eyebrow {
    color: var(--gold);
}

.section {
    padding-block: 4.5rem;
}

.section-heading h2,
.prose h2,
aside h2,
.auth-card h1,
.course-card h3,
.admin-panel h2,
.empty-state h2,
.empty-state h3,
.dashboard-row h3 {
    color: var(--brand-primary);
}

.eyebrow {
    color: var(--brand-primary);
}

.subtle-section {
    background: linear-gradient(180deg, #fbfbfd, var(--color-bg));
}

.course-card,
.enroll-panel,
.auth-card,
.admin-panel,
.empty-state,
.stat-card,
.lesson-row,
.dashboard-row,
.sidebar-lesson,
.comment,
.table-wrap {
    border-color: var(--line);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.course-card {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.course-card:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 9, 96, 0.22);
    box-shadow: var(--shadow);
}

.course-card-placeholder {
    background:
        radial-gradient(circle at 70% 20%, rgba(245, 184, 75, 0.18), transparent 26%),
        linear-gradient(135deg, var(--brand-dark), var(--brand-primary));
}

.course-card-body {
    padding: 1.15rem;
}

.course-meta span,
.course-meta-large span {
    border-color: rgba(43, 9, 96, 0.10);
    background: var(--color-bg);
    color: var(--color-text);
}

.course-footer a,
.section-heading > a,
.table-actions a,
.sidebar-lesson.active {
    color: var(--blue);
    font-weight: 800;
}

.filters,
.admin-form,
.comment-form {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.1rem;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(43, 9, 96, 0.14);
    border-color: var(--brand-primary);
}

.enroll-panel strong,
.stat-card span {
    color: var(--brand-primary);
}

.dashboard-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-primary), var(--gold));
}

th {
    color: var(--brand-primary);
    background: var(--color-bg);
}

tbody tr:hover {
    background: var(--color-bg);
}

.video-frame {
    border: 1px solid rgba(43, 9, 96, 0.14);
    background: var(--brand-dark);
    box-shadow: var(--shadow);
}

.sidebar-lesson.active {
    border-color: rgba(43, 9, 96, 0.24);
    background: var(--color-bg);
}

.auth-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(43, 9, 96, 0.12), transparent 30%),
        linear-gradient(180deg, var(--color-bg), #ffffff);
}

.flash {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.08);
    color: #166534;
}

.site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--brand-dark);
}

@media (max-width: 900px) {
    .nav-links {
        border-color: rgba(255, 255, 255, 0.10);
        background: var(--brand-dark);
    }
}

@media (max-width: 640px) {
    .section {
        padding-block: 3rem;
    }

    .hero-actions .button {
        width: 100%;
    }
}

.institutional-note {
    display: inline-flex;
    width: fit-content;
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    color: var(--color-accent-light);
    background: rgba(255, 255, 255, 0.10);
    font-size: 0.86rem;
    font-weight: 800;
}

/* Learner progress module */
.progress-card {
    display: grid;
    gap: 0.9rem;
    border: 1px solid rgba(43, 9, 96, 0.12);
    border-radius: 14px;
    padding: 1rem;
    background: linear-gradient(180deg, #ffffff, #fbfbfd);
    box-shadow: var(--shadow-soft);
}

.compact-progress-card {
    box-shadow: none;
}

.progress-card h2,
.progress-card p {
    margin: 0;
}

.progress-card h2 {
    color: var(--brand-primary);
}

.progress-summary,
.dashboard-row-heading,
.lesson-completion-actions,
.progress-mini-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.progress-summary span,
.progress-mini-summary span {
    color: var(--muted);
    font-weight: 800;
}

.progress-summary strong {
    color: var(--brand-primary);
}

.progress-bar {
    overflow: hidden;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: var(--color-border);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.progress-bar span {
    display: block;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-success), #16a34a);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.24);
    transition: width 220ms ease;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid rgba(43, 9, 96, 0.14);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    color: var(--color-text);
    background: var(--color-bg);
    font-size: 0.88rem;
    font-weight: 900;
    white-space: nowrap;
}

.status-pill.complete,
.lesson-row.is-complete > span,
.sidebar-lesson.is-complete::before {
    color: var(--white);
    background: linear-gradient(135deg, var(--color-success), #16a34a);
}

.status-pill.neutral {
    color: #9a3412;
    background: rgba(249, 115, 22, 0.14);
}

.progress-dashboard-row {
    align-items: center;
}

.dashboard-progress-content {
    display: grid;
    flex: 1 1 auto;
    gap: 0.75rem;
    min-width: 0;
}

.dashboard-row-heading h3,
.dashboard-row-heading p {
    margin: 0;
}

.lesson-completion-card {
    margin-bottom: 1.25rem;
}

.lesson-completion-actions {
    justify-content: flex-start;
}

.lesson-completion-actions form {
    margin: 0;
}

.progress-card .button-secondary,
.lesson-completion-actions .button-secondary {
    border-color: rgba(43, 9, 96, 0.14);
    color: var(--brand-primary);
    background: var(--white);
}

.progress-card .button-secondary:hover,
.lesson-completion-actions .button-secondary:hover {
    color: var(--white);
    background: var(--brand-primary);
}

.progress-mini-summary {
    margin-bottom: 0.8rem;
    border: 1px solid rgba(43, 9, 96, 0.10);
    border-radius: 12px;
    padding: 0.7rem;
    background: var(--color-bg);
}

.lesson-row.is-complete {
    border-color: rgba(34, 197, 94, 0.22);
    background: linear-gradient(180deg, #ffffff, #f7fcf8);
}

.lesson-row.is-complete strong,
.sidebar-lesson.is-complete {
    color: var(--brand-primary);
}

.sidebar-lesson {
    position: relative;
}

.sidebar-lesson.is-complete {
    border-color: rgba(34, 197, 94, 0.20);
    background: var(--color-bg);
}

@media (max-width: 640px) {
    .progress-dashboard-row,
    .lesson-completion-actions,
    .dashboard-row-heading,
    .progress-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .lesson-completion-actions .button,
    .lesson-completion-actions form {
        width: 100%;
    }
}

/* Internal messaging module */
.nav-message-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.nav-badge,
.unread-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
    color: var(--color-dark);
    background: var(--gold);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(245, 184, 75, 0.24);
}

.message-list,
.message-thread {
    display: grid;
    gap: 1rem;
}

.message-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    color: var(--ink);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.message-card:hover {
    color: var(--ink);
    transform: translateY(-2px);
    border-color: rgba(43, 9, 96, 0.18);
    box-shadow: var(--shadow);
}

.message-card.is-unread {
    border-color: rgba(43, 9, 96, 0.20);
    background: linear-gradient(180deg, #ffffff, #fafafe);
}

.message-card-heading,
.thread-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: space-between;
}

.message-card h2,
.message-card p,
.thread-bubble p {
    margin: 0;
}

.message-card h2 {
    color: var(--brand-primary);
    font-size: 1.12rem;
}

.message-card time,
.message-participants,
.message-excerpt,
.thread-meta time {
    color: var(--muted);
}

.message-excerpt {
    margin-top: 0.35rem;
}

.conversation-shell {
    display: grid;
    gap: 1.25rem;
}

.message-thread {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    background: linear-gradient(180deg, #ffffff, #fafafe);
    box-shadow: var(--shadow-soft);
}

.thread-message {
    display: flex;
    justify-content: flex-start;
}

.thread-message.is-mine {
    justify-content: flex-end;
}

.thread-bubble {
    width: min(680px, 86%);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    background: var(--white);
}

.thread-message.is-mine .thread-bubble {
    border-color: rgba(43, 9, 96, 0.22);
    color: var(--white);
    background: linear-gradient(135deg, var(--brand-primary), #1f0a4a);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.thread-message.is-mine .thread-meta time,
.thread-message.is-mine .thread-bubble p {
    color: rgba(255, 255, 255, 0.86);
}

.message-form,
.reply-form {
    max-width: 780px;
}

.reply-form {
    max-width: none;
}

@media (max-width: 640px) {
    .message-card {
        grid-template-columns: 1fr;
    }

    .message-card time {
        justify-self: start;
    }

    .thread-bubble {
        width: 100%;
    }
}

/* Internal notifications module */
.notification-list {
    display: grid;
    gap: 1rem;
}

.notification-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.notification-card.is-unread {
    border-color: rgba(43, 9, 96, 0.18);
    background: linear-gradient(180deg, #ffffff, #fafafe);
}

.notification-content {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.notification-heading,
.notification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    justify-content: space-between;
}

.notification-heading h2,
.notification-heading p,
.notification-content > p {
    margin: 0;
}

.notification-heading h2 {
    color: var(--brand-primary);
    font-size: 1.12rem;
}

.notification-content time {
    color: var(--muted);
    font-size: 0.9rem;
}

.notification-actions {
    justify-content: flex-end;
}

.notification-actions form {
    margin: 0;
}

@media (max-width: 700px) {
    .notification-card {
        grid-template-columns: 1fr;
    }

    .notification-actions,
    .notification-actions .button,
    .notification-actions form {
        width: 100%;
    }

    .notification-actions {
        justify-content: stretch;
    }
}


/* Explorer visual identity refresh */
.site-header,
.site-footer {
    background: var(--color-dark);
}

.site-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nav-links a[aria-current="page"],
.nav-links a.active {
    color: var(--gold);
}

.hero {
    background:
        linear-gradient(135deg, rgba(43, 9, 96, 0.94), rgba(15, 23, 42, 0.96));
}

.hero::after {
    display: none;
}

.hero-visual {
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background-color: var(--color-primary);
    background-position: center;
    background-size: cover;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.24);
}

.hero-visual.is-placeholder {
    background:
        linear-gradient(135deg, rgba(43, 9, 96, 0.94), rgba(15, 23, 42, 0.84)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 20px);
}

.hero-visual-overlay {
    display: grid;
    align-content: end;
    gap: 1rem;
    min-height: inherit;
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.82));
}

.hero-visual .metric,
.hero-visual .lesson-preview {
    backdrop-filter: blur(14px);
}

.hero-visual .metric {
    background: rgba(15, 23, 42, 0.82);
}

.hero-visual .lesson-preview {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.12);
}

.course-cover {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    color: var(--white);
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(43, 9, 96, 0.86)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 18px);
}

.course-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-cover-placeholder {
    display: grid;
    align-content: end;
    gap: 0.45rem;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 1rem;
}

.course-cover-placeholder span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.1rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.course-cover-placeholder strong {
    max-width: 18ch;
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.15;
}

.course-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.course-card-image .course-cover-placeholder span {
    width: 54px;
    height: 54px;
    font-size: 1.6rem;
}

.course-cover-large {
    min-height: 220px;
    aspect-ratio: 16 / 10;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.dashboard-course-cover {
    flex: 0 0 132px;
    width: 132px;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
}

.dashboard-course-cover .course-cover-placeholder {
    padding: 0.7rem;
}

.dashboard-course-cover .course-cover-placeholder span,
.admin-course-cover .course-cover-placeholder span {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 1rem;
}

.dashboard-course-cover .course-cover-placeholder strong,
.admin-course-cover .course-cover-placeholder strong {
    font-size: 0.82rem;
}

.admin-course-cover {
    flex: 0 0 76px;
    width: 76px;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
}

.admin-course-cover .course-cover-placeholder {
    padding: 0.45rem;
}

.table-course-cell {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 240px;
}

.avatar {
    display: inline-grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(43, 9, 96, 0.12);
    border-radius: 50%;
    color: var(--white);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(43, 9, 96, 0.84));
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

.trainer-avatar {
    display: inline-grid;
    overflow: hidden;
    border-radius: 50%;
}

.avatar-small {
    width: 34px;
    height: 34px;
    font-size: 0.82rem;
}

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
}

.comment-with-avatar,
.message-card-with-avatar,
.thread-message {
    display: flex;
    gap: 0.8rem;
}

.comment-with-avatar {
    align-items: flex-start;
}

.comment-with-avatar p {
    margin-bottom: 0;
}

.message-card-with-avatar {
    align-items: flex-start;
    min-width: 0;
}

.message-card-content {
    min-width: 0;
}

.thread-message {
    align-items: flex-start;
}

.thread-message.is-mine {
    flex-direction: row-reverse;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.badge-success {
    color: #14532d;
    background: rgba(34, 197, 94, 0.15);
}

.badge-muted {
    color: var(--color-muted);
    background: var(--color-bg);
}

.stat-card {
    background: linear-gradient(180deg, var(--color-surface), #fbfbfd);
}

.stat-card p {
    color: var(--color-muted);
}

@media (max-width: 900px) {
    .hero-visual {
        min-height: 360px;
    }

    .dashboard-course-cover {
        flex-basis: 112px;
        width: 112px;
    }
}

@media (max-width: 640px) {
    .hero-visual {
        min-height: 320px;
        border-radius: 14px;
    }

    .hero-visual-overlay {
        padding: 0.9rem;
    }

    .course-cover-large {
        min-height: 180px;
    }

    .dashboard-course-cover {
        width: 100%;
        flex-basis: auto;
        aspect-ratio: 16 / 9;
    }

    .table-course-cell {
        min-width: 220px;
    }

    .message-card-with-avatar,
    .thread-message,
    .thread-message.is-mine {
        align-items: flex-start;
    }
}


/* Trainer workspace */
.trainer-stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.trainer-actions-grid,
.stats-split-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

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

.trainer-action-card,
.trainer-course-card,
.trainer-comment-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.trainer-action-card {
    display: grid;
    gap: 0.45rem;
    padding: 1.1rem;
    color: var(--ink);
}

.trainer-action-card:hover {
    color: var(--ink);
    border-color: rgba(43, 9, 96, 0.18);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.trainer-action-card strong,
.trainer-course-card h2,
.trainer-comment-card h2,
.trainer-mini-row strong {
    color: var(--brand-primary);
}

.trainer-action-card span,
.trainer-course-card p,
.trainer-course-metrics span,
.trainer-mini-row small {
    color: var(--muted);
}

.trainer-course-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.trainer-course-card {
    overflow: hidden;
}

.trainer-course-cover {
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 0;
}

.trainer-course-body {
    display: grid;
    gap: 0.9rem;
    padding: 1.1rem;
}

.trainer-course-body h2,
.trainer-course-body p {
    margin: 0;
}

.trainer-course-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.trainer-course-metrics div {
    border: 1px solid rgba(43, 9, 96, 0.10);
    border-radius: 12px;
    padding: 0.75rem;
    background: var(--color-bg);
}

.trainer-course-metrics strong {
    display: block;
    color: var(--brand-primary);
    font-size: 1.35rem;
    line-height: 1;
}

.trainer-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.trainer-comment-list {
    display: grid;
    gap: 1rem;
}

.trainer-comment-card {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem;
}

.trainer-comment-content {
    display: grid;
    flex: 1;
    gap: 0.65rem;
    min-width: 0;
}

.trainer-comment-content p {
    margin: 0;
}

.trainer-filters {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.table-user-cell,
.table-progress-cell {
    display: grid;
    gap: 0.45rem;
}

.table-user-cell {
    display: flex;
    align-items: center;
    min-width: 210px;
}

.table-progress-cell {
    min-width: 170px;
}

.table-progress-cell .progress-bar {
    height: 9px;
}

.trainer-mini-list {
    display: grid;
    gap: 0.75rem;
}

.trainer-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.85rem;
    background: var(--color-bg);
}

.badge-warning {
    color: #9a3412;
    background: rgba(249, 115, 22, 0.14);
}

@media (max-width: 1050px) {
    .trainer-stats-grid,
    .trainer-actions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .trainer-course-grid,
    .stats-split-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .trainer-stats-grid,
    .trainer-actions-grid,
    .trainer-course-metrics,
    .trainer-filters {
        grid-template-columns: 1fr;
    }

    .trainer-comment-card {
        flex-direction: column;
    }

    .trainer-card-actions .button,
    .trainer-card-actions a {
        width: 100%;
    }

    .trainer-mini-row {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* Admin workspace */
.admin-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.75rem;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.admin-subnav a {
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    color: var(--brand-primary);
    font-weight: 900;
}

.admin-subnav a:hover {
    color: var(--white);
    background: var(--brand-primary);
}

.admin-stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.admin-filters {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.5fr) auto;
}

.admin-detail-list {
    display: grid;
    gap: 0.45rem;
}

.admin-detail-list p {
    margin: 0;
}

.compact-admin-form {
    margin-bottom: 1rem;
}

.admin-table-actions {
    min-width: 220px;
}

/* ==========================================================================
   LOT 7 — Admin desktop refresh
   ========================================================================== */

.eg-admin-header .container,
.eg-admin-section .container {
    width: min(1360px, calc(100% - 2rem));
}

.eg-admin-header {
    padding-block: 3.25rem 1.75rem;
    color: var(--color-dark);
    background:
        linear-gradient(180deg, #f6f3ed 0%, var(--color-bg) 34%, transparent 100%);
}

.eg-admin-header .header-actions,
.eg-admin-header .container {
    gap: 1rem;
}

.eg-admin-header h1 {
    color: var(--color-dark);
    letter-spacing: -0.03em;
}

.eg-admin-header p:not(.eyebrow) {
    color: var(--color-text);
    max-width: 760px;
}

.eg-admin-header .eyebrow {
    color: var(--color-primary);
}

.eg-admin-section {
    padding-block: 2rem 4rem;
}

.eg-admin-nav {
    gap: 0.75rem;
    margin-top: 0.65rem;
    padding: 0.9rem;
    border-radius: 20px;
    border-color: rgba(15, 23, 42, 0.07);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px rgba(15, 23, 42, 0.04);
}

.eg-admin-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 0.9rem;
    border-radius: 999px;
    color: var(--color-text);
    background: transparent;
    font-size: 0.84rem;
    font-weight: 700;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.eg-admin-nav a:hover,
.eg-admin-nav a.is-active {
    color: var(--color-primary);
    background: rgba(43, 9, 96, 0.08);
}

.eg-admin-nav a.is-active {
    box-shadow: inset 0 0 0 1px rgba(43, 9, 96, 0.06);
}

.admin-panel,
.eg-admin-table-wrap,
.filters.admin-filters,
.payment-filter-row {
    border-color: rgba(15, 23, 42, 0.07);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.04);
}

.admin-panel {
    padding: 1.3rem;
}

.admin-panel h2 {
    font-size: 1.08rem;
    line-height: 1.2;
}

.admin-stats-grid {
    gap: 14px;
}

.admin-stats-grid .stat-card,
.trainer-stats-grid .stat-card {
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 20px;
    padding: 1.1rem 1rem;
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-stats-grid .stat-card span,
.trainer-stats-grid .stat-card span {
    font-size: 1.9rem;
    line-height: 1;
}

.admin-stats-grid .stat-card p,
.trainer-stats-grid .stat-card p {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.eg-admin-filters-panel,
.payment-filter-row {
    padding: 1rem 1.05rem;
    background: var(--color-surface);
}

.eg-admin-filters-panel label {
    gap: 0.45rem;
}

.eg-admin-filters-panel input,
.eg-admin-filters-panel select,
.compact-admin-form select,
.compact-admin-form input {
    min-height: 44px;
    border-radius: 14px;
    background: #fcfbfe;
}

.eg-admin-table-wrap {
    overflow: hidden;
    background: var(--color-surface);
}

.eg-admin-table-wrap table {
    min-width: 100%;
}

.eg-admin-table-wrap thead th {
    padding: 0.95rem 1rem;
    color: var(--color-muted);
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #faf9fc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.eg-admin-table-wrap tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.eg-admin-table-wrap tbody tr:hover {
    background: rgba(43, 9, 96, 0.02);
}

.eg-admin-empty-cell {
    padding: 2rem 1rem;
    color: var(--color-muted);
    text-align: center;
}

.admin-detail-list {
    gap: 0.7rem;
}

.admin-detail-list p {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    background: #fcfbfe;
}

.compact-admin-form {
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.compact-admin-form .button {
    width: fit-content;
}

.payment-filter-row {
    margin-bottom: 1rem;
}

.status-filter {
    min-height: 36px;
    padding: 0 0.82rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.table-user-cell,
.table-course-cell {
    gap: 0.8rem;
}

.table-actions,
.payment-actions {
    gap: 0.55rem;
}

.table-actions a,
.payment-actions .button,
.payment-actions .link-button {
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-course-cover {
    width: 68px;
    border-radius: 14px;
}

.pagination-wrap {
    margin-top: 1.2rem;
}

@media (max-width: 1050px) {
    .admin-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .admin-stats-grid,
    .admin-filters {
        grid-template-columns: 1fr;
    }

    .admin-subnav {
        align-items: stretch;
        flex-direction: column;
    }
}


/* Visible image assets fix */
.hero-visual {
    position: relative;
    display: grid;
    isolation: isolate;
    background: linear-gradient(135deg, var(--color-dark), var(--color-primary));
}

.hero-visual img,
.hero-visual-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-visual-overlay {
    position: relative;
    z-index: 1;
}

.visual-status {
    display: inline-flex;
    width: fit-content;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 0.36rem 0.7rem;
    color: var(--color-accent-light);
    background: rgba(15, 23, 42, 0.62);
    font-size: 0.82rem;
    font-weight: 900;
}

.course-cover.has-image {
    background: var(--color-dark);
}

.course-cover img,
.course-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
}

.avatar.has-image {
    background: var(--color-dark);
}

.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trainer-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Interactive lesson resource */
.interactive-resource-card {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 1.2rem;
    background: linear-gradient(135deg, var(--color-dark), var(--color-primary));
    color: var(--white);
    box-shadow: var(--shadow);
}

.interactive-resource-card h2,
.interactive-resource-card p {
    margin: 0;
}

.interactive-resource-card .eyebrow {
    color: var(--color-accent-light);
}

.interactive-resource-card p {
    color: rgba(255, 255, 255, 0.82);
}

.interactive-resource-card .button {
    width: fit-content;
}

@media (max-width: 640px) {
    .interactive-resource-card .button {
        width: 100%;
    }
}


/* Internal payment MVP */
.payment-status-card {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-weight: 900;
}

.payment-status-pending {
    color: #9a3412;
    background: rgba(249, 115, 22, 0.14);
}

.payment-badge,
.status-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.32rem 0.72rem;
    font-size: 0.84rem;
    font-weight: 900;
    white-space: nowrap;
}

.payment-badge-pending {
    color: #9a3412;
    background: rgba(249, 115, 22, 0.14);
}

.payment-badge-paid {
    color: #14532d;
    background: rgba(34, 197, 94, 0.16);
}

.payment-badge-failed {
    color: #7f1d1d;
    background: rgba(220, 38, 38, 0.14);
}

.payment-badge-cancelled {
    color: var(--color-muted);
    background: #f3f4f6;
}

.payment-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.status-filter {
    border: 1px solid var(--line);
    color: var(--brand-primary);
    background: var(--white);
}

.status-filter.active,
.status-filter:hover {
    color: var(--white);
    background: var(--brand-primary);
}

.payment-actions form {
    margin: 0;
}

/* Assignments MVP */
.assignments-panel,
.assignment-card,
.form-panel {
    display: grid;
    gap: 1rem;
}

.assignment-list {
    display: grid;
    gap: 1rem;
}

.assignment-card,
.form-panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.15rem;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.assignment-card-header,
.assignment-review-grid {
    display: grid;
    gap: 1rem;
}

.assignment-card-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.assignment-card h3,
.assignment-card p,
.assignment-submission-content p {
    margin: 0;
}

.assignment-badge-stack,
.assignment-meta,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.assignment-meta {
    color: var(--muted);
    font-size: 0.9rem;
}

.assignment-badge,
.assignment-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0.32rem 0.72rem;
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.assignment-badge-mandatory {
    color: var(--white);
    background: var(--brand-primary);
}

.assignment-badge-optional {
    color: var(--color-text);
    background: rgba(245, 184, 75, 0.18);
}

.assignment-status-submitted,
.assignment-alert {
    color: #9a3412;
    background: rgba(249, 115, 22, 0.14);
}

.assignment-status-approved {
    color: #14532d;
    background: rgba(34, 197, 94, 0.16);
}

.assignment-status-rejected {
    color: #7f1d1d;
    background: rgba(220, 38, 38, 0.14);
}

.assignment-feedback,
.assignment-note,
.assignment-file-link,
.form-help {
    display: block;
}

.assignment-feedback {
    border-left: 4px solid var(--color-info);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    background: var(--soft);
}

.assignment-form {
    display: grid;
    gap: 0.9rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.assignment-file-link {
    font-weight: 900;
}

.form-help,
.assignment-note {
    color: var(--muted);
    font-size: 0.9rem;
}

.form-grid.two-columns,
.assignment-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.assignment-submission-content {
    display: grid;
    gap: 0.75rem;
}

.assignment-submission-content h3 {
    margin: 0.4rem 0 0;
    color: var(--brand-primary);
}

@media (max-width: 760px) {
    .assignment-card-header,
    .form-grid.two-columns,
    .assignment-review-grid {
        grid-template-columns: 1fr;
    }

    .button-row .button {
        width: 100%;
    }
}

/* Instant courses MVP */
.instant-course-card,
.instant-course-learner-card {
    align-items: stretch;
}

.instant-course-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0.35rem 0.78rem;
    font-size: 0.84rem;
    font-weight: 900;
    white-space: nowrap;
}

.instant-course-status-scheduled {
    color: var(--color-text);
    background: rgba(245, 184, 75, 0.18);
}

.instant-course-status-live {
    color: var(--white);
    background: linear-gradient(135deg, var(--color-info), var(--brand-primary));
}

.instant-course-status-completed {
    color: #14532d;
    background: rgba(34, 197, 94, 0.16);
}

.instant-course-status-cancelled {
    color: #7f1d1d;
    background: rgba(220, 38, 38, 0.14);
}

.instant-course-response-participating {
    color: #14532d;
    background: rgba(34, 197, 94, 0.16);
}

.instant-course-response-not_participating {
    color: #7f1d1d;
    background: rgba(220, 38, 38, 0.14);
}

.instant-course-response-pending {
    color: #9a3412;
    background: rgba(249, 115, 22, 0.14);
}

/* =========================================================
   EG FORMATION - REDESIGN E-LEARNING CONSOLIDE
   Sections: Header, Hero, Cartes, Catalogue, Detail, Lecture, Responsive
========================================================= */

/* Header marketplace */
.eg-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(248, 247, 251, 0.94);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px);
}

.eg-announcement-bar {
    background: linear-gradient(90deg, rgba(43, 9, 96, 0.06), rgba(245, 184, 75, 0.12));
    color: var(--color-text);
    font-size: 0.77rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(43, 9, 96, 0.06);
}

.eg-announcement-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    text-align: center;
}

.eg-main-header {
    background: rgba(248, 247, 251, 0.94);
    border-bottom: 1px solid rgba(43, 9, 96, 0.07);
}

.eg-navbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 74px;
}

.eg-brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.75rem;
    color: #171827;
    font-weight: 900;
    letter-spacing: 0;
}

.eg-brand-mark {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: var(--color-primary);
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(43, 9, 96, 0.18);
}

.eg-brand-text {
    font-size: 0.92rem;
    letter-spacing: 0.07em;
}

.eg-nav-content {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.eg-nav-links,
.eg-nav-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.8rem;
}

.eg-nav-links a,
.eg-nav-link,
.eg-login-link,
.eg-logout-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    border-radius: 10px;
    padding: 0 0.8rem;
    color: #1f2430;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background var(--eg-ui-transition-fast), color var(--eg-ui-transition-fast);
}

.eg-nav-links a:hover,
.eg-nav-link:hover,
.eg-login-link:hover,
.eg-logout-button:hover {
    background: rgba(43, 9, 96, 0.06);
    color: var(--color-primary);
}

.eg-search-form {
    display: flex;
    flex: 1 1 360px;
    align-items: center;
    gap: 0.7rem;
    min-width: 220px;
    max-width: 520px;
    min-height: 44px;
    border: 1px solid rgba(43, 9, 96, 0.08);
    border-radius: 14px;
    padding: 0 1rem;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.eg-search-form input {
    border: 0;
    padding: 0;
    background: transparent;
    outline: 0;
    font-size: 0.9rem;
}

.eg-search-icon {
    color: var(--color-muted);
    font-weight: 800;
}

.eg-register-button,
.eg-logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 10px;
    font-weight: 900;
}

.eg-register-button {
    padding: 0 1rem;
    color: #fff;
    background: var(--color-primary);
    box-shadow: 0 12px 28px rgba(43, 9, 96, 0.14);
}

.eg-register-button:hover {
    color: #fff;
    box-shadow: 0 14px 30px rgba(43, 9, 96, 0.18);
}

.eg-logout-button {
    border: 0;
    padding: 0 0.8rem;
    background: transparent;
    cursor: pointer;
}

.eg-nav-actions form {
    margin: 0;
}

.eg-nav-actions .nav-badge {
    position: static;
    min-width: 20px;
}

/* Hero accueil valide */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 36px 0 40px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-dark), #1a1142 40%, var(--color-primary) 100%);
    border: 0;
}

.hero::after {
    display: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.68fr);
    gap: 2.2rem;
    align-items: center;
    min-height: 0;
}

.hero-copy {
    max-width: 600px;
}

.hero .eyebrow {
    color: var(--color-gold);
}

.hero h1 {
    max-width: 580px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.2rem, 3.3vw, 3.3rem);
    line-height: 1.04;
    letter-spacing: 0;
}

.hero-text {
    max-width: 600px;
    margin-top: 0.95rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.98rem;
    line-height: 1.6;
}

.institutional-note {
    display: inline-flex;
    width: fit-content;
    margin: 1rem 0 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0.42rem 0.85rem;
    color: #eee8f8;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.82rem;
    font-weight: 800;
}

.hero-actions {
    margin-top: 1rem;
}

.hero-visual {
    position: relative;
    display: grid;
    overflow: hidden;
    height: 320px;
    min-height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: var(--color-dark);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
    isolation: isolate;
}

.hero-visual img,
.hero-visual-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-visual-overlay {
    position: absolute;
    inset: auto 20px 20px 20px;
    z-index: 1;
    display: grid;
    gap: 0.6rem;
}

.hero-visual-overlay .metric,
.hero-visual-overlay .lesson-preview {
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    background: rgba(15, 23, 42, 0.76);
    backdrop-filter: blur(14px);
}

.hero-visual .metric {
    padding: 0.8rem 0.95rem;
}

.hero-visual .metric span {
    font-size: 1.8rem;
}

.hero-visual .lesson-preview {
    padding: 0.78rem 0.9rem;
}

.hero-visual .lesson-preview:nth-of-type(3) {
    display: none;
}

/* Cartes formations marketplace */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: stretch;
    overflow: visible;
}

.eg-course-card-compact {
    position: relative;
    min-width: 0;
    height: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.eg-course-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 328px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    color: inherit;
    background: #fff;
    box-shadow: var(--eg-ui-shadow-xs);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.eg-course-card-link:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: rgba(43, 9, 96, 0.18);
    box-shadow: var(--eg-ui-shadow-md);
}

.eg-course-thumb {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3efe7;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.eg-course-thumb-image,
.eg-course-thumb img,
.course-cover-large,
.eg-enroll-cover-image,
.eg-enroll-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eg-course-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 144px;
    padding: 1rem;
}

.eg-course-card-topline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 26px;
}

.eg-course-card-body h3 {
    display: -webkit-box;
    min-height: 2.65em;
    max-height: 2.65em;
    margin: 0;
    overflow: hidden;
    color: #171827;
    font-size: 1rem;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.eg-course-trainer-name {
    margin: 0;
    overflow: hidden;
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eg-course-mini-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
}

.eg-course-card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 0.6rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.eg-course-card-cta strong {
    font-size: 0.95rem;
    line-height: 1;
}

.eg-course-mini-meta span,
.eg-hover-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 0.58rem;
    color: #5b5367;
    background: var(--eg-ui-surface-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

.eg-course-hover-card {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 25;
    width: 290px;
    max-width: 92vw;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
    visibility: hidden;
}

.eg-course-card-compact:hover .eg-course-hover-card {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

.eg-hover-label {
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.eg-course-hover-card h4,
.eg-hover-trainer,
.eg-hover-excerpt {
    margin: 0.45rem 0 0;
}

.eg-course-hover-card h4 {
    color: #171827;
    font-size: 1rem;
    line-height: 1.35;
}

.eg-hover-trainer,
.eg-hover-excerpt {
    color: var(--color-muted);
    font-size: 0.84rem;
}

.eg-hover-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.eg-hover-button {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin-top: 0.85rem;
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    color: #fff;
    background: var(--color-primary);
    font-weight: 900;
}

.eg-hover-button:hover {
    color: #fff;
}

.course-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: inherit;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
    font-weight: 900;
}

.course-cover-placeholder span {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
}

/* Catalogue */
.eg-catalog-header {
    padding: 3.3rem 0 2.9rem;
    border-bottom: 1px solid rgba(43, 9, 96, 0.06);
    background: linear-gradient(180deg, rgba(43, 9, 96, 0.05), rgba(248, 247, 251, 0) 80%), var(--color-bg);
}

.eg-catalog-header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
}

.eg-catalog-header h1 {
    margin: 0.35rem 0 0.75rem;
    color: #171827;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.eg-catalog-header p:not(.eyebrow) {
    max-width: 720px;
    margin: 0;
    color: var(--color-muted);
}

.eg-catalog-stats,
.eg-catalog-filters,
.eg-catalog-empty,
.eg-content-card,
.eg-program-panel,
.eg-enroll-panel,
.eg-lesson-video-card,
.eg-lesson-resource-card,
.eg-lesson-block,
.eg-lesson-progress-card,
.eg-lesson-list-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.eg-catalog-stats {
    min-width: 190px;
    padding: 1.1rem 1.2rem;
    text-align: center;
}

.eg-catalog-stats strong {
    display: block;
    color: var(--color-primary);
    font-size: 2.4rem;
    line-height: 1;
}

.eg-catalog-stats span,
.eg-catalog-results-heading > span {
    color: var(--color-muted);
    font-weight: 800;
}

.eg-catalog-section {
    padding: 1.9rem 0 3.8rem;
    background: var(--color-bg);
}

.eg-catalog-filters {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 240px auto;
    gap: 1rem;
    align-items: end;
    padding: 1.25rem;
}

.eg-catalog-filters label {
    display: block;
    margin-bottom: 0.45rem;
    color: #202534;
    font-size: 0.84rem;
    font-weight: 900;
}

.eg-filter-search-box {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    border: 1px solid rgba(31, 36, 48, 0.16);
    border-radius: 14px;
    padding: 0 0.9rem;
    background: #fbfaf7;
}

.eg-filter-search-box input,
.eg-filter-select select {
    border: 0;
    background: transparent;
    outline: 0;
}

.eg-filter-select select {
    min-height: 46px;
    border: 1px solid rgba(31, 36, 48, 0.16);
    border-radius: 14px;
    padding: 0 0.85rem;
    background: #fbfaf7;
    font-weight: 800;
}

.eg-filter-actions,
.eg-catalog-results-heading,
.eg-program-header,
.eg-lesson-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.eg-filter-reset {
    color: var(--color-primary);
    font-weight: 700;
}

.eg-catalog-results-heading {
    margin-top: 1.7rem;
    margin-bottom: 1.15rem;
}

.eg-catalog-results-heading h2 {
    margin: 0.35rem 0 0;
    color: #171827;
    font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.eg-catalog-empty {
    grid-column: 1 / -1;
    padding: 2rem 1.5rem;
    text-align: center;
}

.eg-pagination-wrap {
    margin-top: 2rem;
}

.eg-public-section {
    padding: 0 0 3.1rem;
}

.eg-public-cards-grid {
    margin-top: 0.5rem;
}

.section-heading {
    margin-bottom: 1.1rem;
}

.section-heading h2 {
    margin: 0.35rem 0 0;
    color: var(--eg-ui-heading);
    font-size: 1.7rem;
    line-height: 1.15;
}

.section-heading a:not(.button):not(.eg-ui-button) {
    color: var(--color-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.site-footer {
    margin-top: 0;
    background: var(--color-dark);
}

.footer-grid {
    padding: 28px 0;
}

/* Detail formation */
.eg-course-detail-hero {
    padding: 2.4rem 0 2rem;
    color: var(--color-text);
    background:
        radial-gradient(circle at top right, rgba(43, 9, 96, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(43, 9, 96, 0.04), rgba(248, 247, 251, 0) 80%),
        var(--color-bg);
}

.eg-course-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    gap: 28px;
    align-items: start;
}

.eg-course-detail-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
    min-width: 0;
}

.eg-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.eg-detail-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 0 12px;
    color: var(--color-primary);
    background: rgba(43, 9, 96, 0.08);
    font-size: 12px;
    font-weight: 700;
}

.eg-course-detail-hero .eyebrow {
    margin: 0;
    color: var(--color-primary);
}

.eg-course-detail-copy h1 {
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.eg-course-detail-excerpt {
    max-width: 68ch;
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.7;
}

.eg-course-detail-trainer {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    padding: 12px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--eg-ui-shadow-xs);
}

.eg-course-detail-trainer small,
.eg-course-detail-trainer strong {
    display: block;
}

.eg-course-detail-trainer small {
    color: var(--color-muted);
    font-size: 12px;
}

.eg-course-detail-trainer strong {
    color: var(--color-dark);
    font-size: 14px;
}

.eg-enroll-panel {
    position: sticky;
    top: 100px;
    overflow: hidden;
    max-width: 420px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.eg-enroll-cover {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    background: #f3efe7;
}

.eg-enroll-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 16px;
}

.eg-enroll-label {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eg-course-detail-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.eg-enroll-price {
    display: block;
    color: var(--color-dark);
    font-size: 28px;
    line-height: 1.1;
}

.eg-enroll-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eg-enroll-info span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--color-text);
    background: var(--eg-ui-surface-soft);
    font-size: 12px;
    font-weight: 600;
}

.eg-enroll-reassurance {
    display: grid;
    gap: 8px;
}

.eg-enroll-reassurance span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 500;
}

.eg-enroll-reassurance span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
}

.eg-course-detail-section {
    padding: 0 0 4rem;
    background: var(--color-bg);
}

.eg-course-detail-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
    gap: 28px;
    align-items: start;
}

.eg-course-main-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.eg-content-card,
.eg-program-panel {
    padding: 24px;
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.eg-content-card h2,
.eg-program-header h2 {
    margin: 6px 0 0;
    color: var(--color-dark);
    font-size: 22px;
    line-height: 1.2;
}

.eg-content-card p,
.eg-content-card li {
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.7;
}

.eg-course-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.eg-learning-list {
    margin: 0;
    padding-left: 20px;
}

.eg-course-detail-trainer-card {
    overflow: hidden;
}

.eg-course-detail-trainer-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
}

.eg-course-detail-trainer-panel h2 {
    margin: 0;
}

.eg-course-detail-trainer-role {
    margin: 4px 0 10px !important;
    color: var(--color-primary) !important;
    font-size: 12px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eg-course-detail-lessons {
    position: sticky;
    top: 100px;
}

.eg-detail-lesson-list {
    display: grid;
    gap: 10px;
}

.eg-detail-lesson-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: var(--eg-ui-surface-muted);
    color: inherit;
    transition: border-color var(--eg-ui-transition-fast), box-shadow var(--eg-ui-transition-fast), transform var(--eg-ui-transition-fast);
}

.eg-detail-lesson-row:hover {
    color: inherit;
    border-color: rgba(43, 9, 96, 0.18);
    box-shadow: var(--eg-ui-shadow-xs);
    transform: translateY(-1px);
}

.eg-detail-lesson-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(43, 9, 96, 0.1);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 800;
}

.eg-detail-lesson-copy {
    min-width: 0;
}

.eg-detail-lesson-copy strong {
    display: block;
    color: var(--color-dark);
    font-size: 14px;
    line-height: 1.35;
}

.eg-detail-lesson-copy small {
    display: block;
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 12.5px;
}

.eg-detail-lesson-arrow {
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
}

.eg-detail-lesson-row.is-complete .eg-detail-lesson-index {
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
}

.eg-empty-program {
    border: 1px dashed rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    padding: 18px;
    background: var(--eg-ui-surface-muted);
}

.eg-empty-program strong {
    display: block;
    color: var(--color-dark);
    font-size: 14px;
}

.eg-empty-program p {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

/* Lecture lecon */
.eg-lesson-shell {
    background: var(--color-bg);
}

.eg-lesson-hero {
    padding: 2.3rem 0 1.9rem;
    background:
        radial-gradient(circle at top right, rgba(43, 9, 96, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(43, 9, 96, 0.04), rgba(248, 247, 251, 0) 80%),
        var(--color-bg);
}

.eg-lesson-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
}

.eg-lesson-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.eg-lesson-hero .eyebrow {
    margin: 0;
    color: var(--color-primary);
}

.eg-lesson-hero h1 {
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.05;
}

.eg-lesson-hero-course {
    margin: 0;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.eg-lesson-hero-text {
    max-width: 68ch;
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.7;
}

.eg-lesson-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.eg-lesson-hero-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(43, 9, 96, 0.08);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
}

.eg-lesson-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.eg-lesson-hero-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.eg-lesson-section {
    padding: 0 0 4rem;
    background: var(--color-bg);
}

.eg-lesson-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.eg-lesson-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.eg-lesson-aside {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 16px;
}

.eg-lesson-content-card,
.eg-lesson-progress-card,
.eg-lesson-list-card,
.eg-lesson-resource-card,
.eg-lesson-video-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: var(--color-surface);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.eg-lesson-content-card,
.eg-lesson-progress-card,
.eg-lesson-list-card,
.eg-lesson-block {
    padding: 24px;
}

.eg-lesson-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.eg-lesson-card-head h2,
.eg-lesson-video-heading h2,
.eg-lesson-resource-card h2,
.eg-lesson-progress-card h2,
.eg-lesson-list-card h2 {
    margin: 6px 0 0;
    color: var(--color-dark);
    font-size: 22px;
    line-height: 1.2;
}

.eg-lesson-content-text p {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.75;
}

.eg-lesson-video-card {
    overflow: hidden;
}

.eg-lesson-video-heading {
    padding: 24px 24px 0;
}

.eg-lesson-video-frame {
    padding: 20px 24px 24px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.eg-lesson-video-frame iframe {
    min-height: 430px;
    border-radius: 18px;
}

.eg-lesson-resource-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(43, 9, 96, 0.06), rgba(255, 255, 255, 0.98));
}

.eg-lesson-resource-card p {
    margin: 0;
    color: var(--color-muted);
}

.eg-lesson-comment-list {
    display: grid;
    gap: 12px;
}

.eg-lesson-comment-card {
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: var(--eg-ui-surface-muted);
}

.eg-lesson-comment-card strong {
    display: block;
    color: var(--color-dark);
    font-size: 14px;
}

.eg-lesson-comment-card time {
    display: block;
    margin: 3px 0 6px;
    color: var(--color-muted);
    font-size: 12px;
}

.eg-lesson-comment-card p {
    margin: 0;
    color: var(--color-text);
    font-size: 13.5px;
    line-height: 1.6;
}

.eg-lesson-progress-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 10px;
}

.eg-lesson-progress-footer span {
    color: var(--color-primary);
    font-size: 1.45rem;
    font-weight: 900;
}

.eg-sidebar-lessons {
    display: grid;
    gap: 10px;
}

.eg-sidebar-lesson {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    padding: 12px;
    color: #171827;
    background: var(--eg-ui-surface-muted);
    transition: border-color var(--eg-ui-transition-fast), box-shadow var(--eg-ui-transition-fast), transform var(--eg-ui-transition-fast);
}

.eg-sidebar-lesson:hover {
    color: inherit;
    border-color: rgba(43, 9, 96, 0.18);
    box-shadow: var(--eg-ui-shadow-xs);
    transform: translateY(-1px);
}

.eg-sidebar-lesson span {
    display: inline-flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    background: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 900;
}

.eg-sidebar-lesson strong {
    font-size: 0.9rem;
    line-height: 1.4;
}

.eg-sidebar-lesson.active {
    color: #fff;
    background: var(--color-primary);
}

.eg-sidebar-lesson.active span {
    background: rgba(255, 255, 255, 0.16);
}

.eg-sidebar-lesson.is-complete span {
    background: var(--color-success);
}

.eg-lesson-nav-card {
    padding: 24px;
}

.eg-lesson-nav-grid {
    display: grid;
    gap: 10px;
}

/* Responsive */
@media (max-width: 1400px) {
    .cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cards-grid > *:nth-child(4n) .eg-course-hover-card {
        right: 0;
        left: auto;
    }
}

@media (max-width: 1100px) {
    .eg-nav-content {
        position: absolute;
        top: calc(100% + 0.75rem);
        right: 1rem;
        left: 1rem;
        display: none;
        flex-direction: column;
        align-items: stretch;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 18px;
        padding: 1rem;
        background: #f3efe7;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    }

    .eg-nav-content.open,
    .eg-nav-content.is-open,
    .eg-nav-content.active {
        display: flex;
    }

    .eg-nav-links,
    .eg-nav-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .eg-search-form {
        max-width: none;
    }

    .cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .eg-course-hover-card {
        display: none;
    }

    .eg-catalog-header-grid,
    .eg-catalog-filters,
    .eg-course-detail-grid,
    .eg-course-detail-content,
    .eg-lesson-layout {
        grid-template-columns: 1fr;
    }

    .eg-enroll-panel,
    .eg-lesson-sidebar {
        position: relative;
        top: auto;
    }
}

@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eg-course-card-link {
        min-height: 300px;
    }

    .eg-lesson-header-inner,
    .eg-lesson-resource-card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .eg-announcement-inner {
        min-height: 38px;
        padding: 0 0.75rem;
        font-size: 0.78rem;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        height: 240px;
        min-height: 230px;
    }

    .hero-actions .button,
    .eg-filter-actions .button,
    .eg-filter-reset,
    .eg-lesson-resource-card .button,
    .eg-lesson-navigation a {
        width: 100%;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .eg-course-card-link {
        min-height: auto;
    }

    .eg-course-card-body h3 {
        max-height: none;
        -webkit-line-clamp: 3;
    }

    .eg-catalog-header,
    .eg-course-detail-hero,
    .eg-lesson-header {
        padding: 2rem 0;
    }

    .eg-catalog-section,
    .eg-course-detail-section,
    .eg-lesson-section {
        padding-bottom: 3.5rem;
    }

    .eg-content-card,
    .eg-program-panel,
    .eg-lesson-video-heading,
    .eg-lesson-block,
    .eg-lesson-progress-card,
    .eg-lesson-list-card,
    .eg-lesson-resource-card {
        padding: 1rem;
        border-radius: 16px;
    }

    .eg-lesson-video-frame iframe {
        min-height: 260px;
    }
}

/* Dashboard apprenant */
.eg-learner-dashboard {
    padding: 1.35rem 0 3.2rem;
    background:
        radial-gradient(circle at top left, rgba(43, 9, 96, 0.06), transparent 24%),
        linear-gradient(180deg, #f5f2ec 0%, var(--color-bg) 14%, var(--color-bg) 100%);
}

.eg-learner-dashboard-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 286px;
    gap: 1.1rem;
    align-items: start;
    width: min(1320px, calc(100% - 2rem));
}

.eg-learner-sidebar,
.eg-learner-panel,
.eg-learner-aside-card,
.eg-learner-welcome-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(10px);
}

.eg-learner-sidebar {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 1rem;
    padding: 0.95rem;
}

.eg-learner-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.eg-learner-sidebar-mark {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: var(--color-primary);
    font-weight: 900;
}

.eg-learner-sidebar-brand strong,
.eg-learner-sidebar-brand span {
    display: block;
}

.eg-learner-sidebar-brand strong {
    color: #171827;
    font-size: 0.98rem;
}

.eg-learner-sidebar-brand span {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.eg-learner-sidebar-nav {
    display: grid;
    gap: 0.35rem;
}

.eg-learner-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 42px;
    border-radius: 12px;
    padding: 0 0.8rem;
    color: #344054;
    font-size: 0.92rem;
    font-weight: 800;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.eg-learner-sidebar-link:hover {
    color: var(--color-primary);
    background: #f4f0fb;
    transform: translateX(2px);
}

.eg-learner-sidebar-link.is-active {
    color: var(--color-primary);
    background: #f4f0fb;
}

.eg-learner-sidebar-icon {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.6;
}

.eg-learner-sidebar-help {
    display: grid;
    gap: 0.55rem;
    border-radius: 16px;
    padding: 0.9rem;
    background: linear-gradient(180deg, #fcfbff, #f6f1fb);
}

.eg-learner-sidebar-help h2,
.eg-learner-sidebar-help p {
    margin: 0;
}

.eg-learner-sidebar-help h2 {
    color: #171827;
    font-size: 1.15rem;
}

.eg-learner-sidebar-help p:not(.eyebrow) {
    color: var(--color-muted);
    font-size: 0.92rem;
}

.eg-learner-main,
.eg-learner-aside {
    display: grid;
    gap: 1rem;
}

.eg-learner-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.eg-learner-search {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.55rem;
    max-width: 500px;
    min-height: 46px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 0 0.9rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.eg-learner-search input {
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 0.94rem;
}

.eg-learner-topbar-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--color-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.eg-learner-notification-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    padding: 0 0.75rem;
    color: #344054;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.83rem;
}

.eg-learner-notification-chip strong {
    display: inline-flex;
    min-width: 20px;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: var(--color-primary);
    font-size: 0.72rem;
}

.eg-learner-welcome-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 184px;
    gap: 1rem;
    padding: 1.15rem 1.2rem;
}

.eg-learner-welcome-copy h1,
.eg-learner-panel-heading h2,
.eg-learner-profile-card h2,
.eg-learner-aside-card h2,
.eg-learner-empty-card h3 {
    margin: 0;
    color: #171827;
}

.eg-learner-welcome-copy h1 {
    margin-top: 0.3rem;
    font-size: clamp(1.55rem, 2.2vw, 2.1rem);
    line-height: 1.1;
}

.eg-learner-welcome-copy p:not(.eyebrow) {
    max-width: 560px;
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.eg-learner-welcome-visual {
    position: relative;
    min-height: 150px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(245, 184, 75, 0.22), transparent 30%),
        linear-gradient(160deg, #f6f3ff 0%, #efe8fb 100%);
}

.eg-learner-visual-orbit {
    position: absolute;
    inset: 16px;
    border: 1px dashed rgba(43, 9, 96, 0.18);
    border-radius: 18px;
}

.eg-learner-visual-card {
    position: absolute;
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(43, 9, 96, 0.12);
}

.eg-learner-visual-card.eg-is-primary {
    top: 34px;
    right: 28px;
    width: 88px;
    height: 58px;
    background: linear-gradient(135deg, var(--color-primary), #5c31ad);
}

.eg-learner-visual-card.eg-is-secondary {
    bottom: 28px;
    left: 22px;
    width: 78px;
    height: 48px;
    background: linear-gradient(135deg, #f5b84b, #f7d595);
}

.eg-learner-visual-card.eg-is-muted {
    bottom: 20px;
    right: 18px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.eg-learner-panel,
.eg-learner-aside-card {
    padding: 1rem;
}

.eg-learner-panel-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.eg-learner-panel-heading.eg-is-compact {
    align-items: start;
    margin-bottom: 0.7rem;
}

.eg-learner-panel-heading h2 {
    margin-top: 0.2rem;
    font-size: 1.2rem;
}

.eg-learner-panel-heading a {
    color: var(--color-primary);
    font-weight: 800;
}

.eg-learner-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.eg-learner-course-card {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #fbf9ff);
}

.eg-learner-course-cover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0ecf8;
}

.eg-learner-course-cover-image {
    width: 100%;
    height: 100%;
}

.eg-learner-course-body {
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem;
}

.eg-learner-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.eg-learner-course-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 0.65rem;
    color: #5b5367;
    background: #f3efe7;
    font-size: 0.72rem;
    font-weight: 800;
}

.eg-learner-course-body h3 {
    font-size: 0.94rem;
    line-height: 1.35;
}

.eg-learner-course-body p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.82rem;
}

.eg-learner-course-progress {
    display: grid;
    gap: 0.55rem;
}

.eg-learner-empty-card {
    display: grid;
    gap: 0.75rem;
    grid-column: 1 / -1;
    padding: 1.1rem;
    border-radius: 18px;
    border: 1px dashed rgba(15, 23, 42, 0.14);
    background: #ffffff;
}

.eg-learner-empty-card.eg-is-soft {
    background: #fcfbfe;
}

.eg-learner-empty-card h3,
.eg-learner-empty-card p {
    margin: 0;
}

.eg-learner-empty-card p {
    color: var(--color-muted);
}

.eg-learner-activity-table {
    display: grid;
    gap: 0.55rem;
}

.eg-learner-activity-head,
.eg-learner-activity-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 120px 120px;
    gap: 0.8rem;
    align-items: center;
}

.eg-learner-activity-head {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.eg-learner-activity-row {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 0.7rem 0.85rem;
    background: #fcfbfe;
}

.eg-learner-activity-row strong,
.eg-learner-activity-row span {
    min-width: 0;
}

.eg-learner-activity-row span {
    color: #4b5563;
    font-size: 0.86rem;
}

.eg-learner-status-pill {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 0.75rem;
    color: var(--color-primary);
    background: #f4f0fb;
    font-size: 0.78rem;
    font-weight: 900;
}

.eg-is-soft-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.82));
}

.eg-learner-profile-card {
    display: grid;
    justify-items: start;
    gap: 0.55rem;
}

.eg-learner-profile-card .avatar {
    width: 50px;
    height: 50px;
}

.eg-learner-profile-card p {
    margin: 0;
    color: var(--color-muted);
}

.eg-learner-schedule-list,
.eg-learner-reminder-list,
.eg-learner-feed-list {
    display: grid;
    gap: 0.6rem;
}

.eg-learner-schedule-item,
.eg-learner-reminder-item,
.eg-learner-feed-item {
    display: grid;
    gap: 0.3rem;
    border-radius: 16px;
    padding: 0.75rem;
    background: #fcfbfe;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.eg-learner-schedule-item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
}

.eg-learner-schedule-item > strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 12px;
    color: var(--color-primary);
    background: #f4f0fb;
    font-size: 0.86rem;
}

.eg-learner-schedule-item h3,
.eg-learner-reminder-item strong,
.eg-learner-feed-item strong {
    margin: 0;
    color: #171827;
    font-size: 0.88rem;
}

.eg-learner-schedule-item p,
.eg-learner-reminder-item span,
.eg-learner-feed-item span,
.eg-learner-schedule-item small,
.eg-learner-empty-inline p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.eg-learner-empty-inline {
    border-radius: 16px;
    padding: 0.95rem;
    background: #fcfbfe;
}

.eg-is-muted-card {
    background: linear-gradient(180deg, #ffffff, #f7f4fb);
}

.eg-learner-courses-page .eg-learner-main {
    gap: 0.75rem;
}

.eg-learner-page-header-card,
.eg-learner-priority-card,
.eg-learner-summary-card,
.eg-learner-library-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.eg-learner-page-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.eg-learner-page-header h1 {
    margin: 0.3rem 0 0;
    color: #171827;
    font-size: 1.75rem;
    line-height: 1.08;
}

.eg-learner-priority-copy h2 {
    margin: 0.2rem 0 0;
    color: #171827;
    font-size: 1.45rem;
    line-height: 1.1;
}

.eg-learner-page-header p:not(.eyebrow),
.eg-learner-priority-copy p,
.eg-learner-summary-card p,
.eg-learner-library-meta span {
    margin: 0;
    color: var(--color-muted);
}

.eg-learner-priority-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    background:
        radial-gradient(circle at top right, rgba(245, 184, 75, 0.18), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 251, 0.94));
}

.eg-learner-priority-copy {
    display: grid;
    gap: 0.5rem;
}

.eg-learner-priority-meta,
.eg-learner-library-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.eg-learner-priority-meta span,
.eg-learner-library-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 0.7rem;
    color: #5b5367;
    background: #f4f0fb;
    font-size: 0.76rem;
    font-weight: 800;
}

.eg-learner-priority-cover {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 18px;
    background: #f0ecf8;
}

.eg-learner-priority-cover-image {
    width: 100%;
    height: 100%;
}

.eg-learner-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.eg-learner-summary-card {
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
}

.eg-learner-summary-card span {
    display: block;
    color: var(--color-primary);
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 900;
}

.eg-learner-summary-card strong {
    color: #171827;
    font-size: 0.95rem;
}

.eg-learner-summary-card p {
    font-size: 0.82rem;
    line-height: 1.45;
}

.eg-learner-course-filters {
    display: grid;
    gap: 0.95rem;
}

.eg-learner-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.eg-learner-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    padding: 0 0.95rem;
    color: #344054;
    background: #fff;
    font-size: 0.84rem;
    font-weight: 800;
}

.eg-learner-filter-pill.is-active,
.eg-learner-filter-pill:hover {
    color: var(--color-primary);
    background: #f4f0fb;
    border-color: rgba(43, 9, 96, 0.14);
}

.eg-learner-course-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.eg-is-inline-search {
    max-width: 420px;
    min-height: 44px;
}

.eg-is-courses-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eg-learner-library-card {
    overflow: hidden;
}

.eg-learner-library-cover {
    aspect-ratio: 16 / 8.5;
    overflow: hidden;
    background: #f0ecf8;
}

.eg-learner-library-cover-image {
    width: 100%;
    height: 100%;
}

.eg-learner-library-body {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

.eg-learner-library-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.eg-learner-library-topline small {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.eg-learner-library-body h3 {
    margin: 0;
    color: #171827;
    font-size: 1rem;
    line-height: 1.35;
}

.eg-learner-library-body > p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.84rem;
}

.eg-learner-library-progress {
    display: grid;
    gap: 0.55rem;
}

.eg-learner-status-pill.eg-is-in_progress {
    color: var(--color-primary);
    background: #f4f0fb;
}

.eg-learner-status-pill.eg-is-completed {
    color: #166534;
    background: rgba(34, 197, 94, 0.14);
}

.eg-learner-status-pill.eg-is-not_started {
    color: #9a3412;
    background: rgba(245, 184, 75, 0.18);
}

/* =========================================================
   EG FORMATION — PAGE CLASSE LIVE (espace apprenant desktop)
   ========================================================= */

/* Layout */
.eg-learner-live-page .eg-learner-main {
    gap: 0.75rem;
}

/* Nouvelle classe de statut : aujourd'hui */
.instant-course-status-today {
    color: #1e40af;
    background: rgba(37, 99, 235, 0.12);
}

/* Carte prioritaire "Prochaine classe live" */
.eg-learner-live-priority {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 176px;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 251, 0.94));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.eg-learner-live-priority-copy {
    display: grid;
    gap: 0.5rem;
}

.eg-learner-live-priority-copy h2 {
    margin: 0.2rem 0 0;
    color: #171827;
    font-size: 1.45rem;
    line-height: 1.1;
}

.eg-learner-live-priority-copy > p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.eg-learner-live-priority-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.eg-learner-live-priority-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 0.7rem;
    color: #1e3a5f;
    background: rgba(37, 99, 235, 0.10);
    font-size: 0.76rem;
    font-weight: 800;
}

.eg-learner-live-priority-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.eg-learner-live-priority-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Bloc date (côté droit de la carte prioritaire) */
.eg-learner-live-date-block {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    padding: 1.1rem 0.75rem;
    border-radius: 18px;
    background: rgba(37, 99, 235, 0.08);
    text-align: center;
}

.eg-live-date-day {
    display: block;
    color: #1e3a5f;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
}

.eg-live-date-month {
    display: block;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: capitalize;
}

.eg-live-date-time {
    display: block;
    margin-top: 0.4rem;
    color: var(--color-primary);
    font-size: 1.25rem;
    font-weight: 900;
}

.eg-live-date-duration {
    display: block;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

/* Table de sessions */
.eg-learner-live-table {
    display: grid;
    gap: 0.5rem;
}

.eg-learner-live-head,
.eg-learner-live-row {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) 160px minmax(0, auto) auto;
    gap: 0.85rem;
    align-items: center;
}

.eg-learner-live-head {
    padding: 0 0.85rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.eg-learner-live-row {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 0.75rem 0.85rem;
    background: #fcfbfe;
    transition: background 160ms ease;
}

.eg-learner-live-row:hover {
    background: #f9f7fe;
}

/* Cellule titre */
.eg-learner-live-row-title h3 {
    margin: 0 0 0.15rem;
    color: #171827;
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 800;
}

.eg-learner-live-row-title > p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.eg-learner-live-row-title > small {
    display: block;
    margin-top: 0.1rem;
    color: var(--color-muted);
    font-size: 0.76rem;
}

/* Cellule date */
.eg-learner-live-row-date {
    display: grid;
    gap: 0.1rem;
}

.eg-learner-live-row-date strong {
    color: #171827;
    font-size: 0.86rem;
    font-weight: 800;
}

.eg-learner-live-row-date small {
    color: var(--color-muted);
    font-size: 0.78rem;
}

/* Cellule badges */
.eg-learner-live-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

/* Cellule actions */
.eg-learner-live-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.eg-learner-live-row-unavailable {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 0.75rem;
    border-radius: 999px;
    color: var(--color-muted);
    background: rgba(15, 23, 42, 0.05);
    font-size: 0.82rem;
    font-weight: 800;
}

/* Masquer l'en-tête de table sur petits écrans (déjà pris en charge) */
@media (max-width: 820px) {
    .eg-learner-live-head {
        display: none;
    }

    .eg-learner-live-row {
        grid-template-columns: 1fr;
    }

    .eg-learner-live-row-actions {
        justify-content: start;
    }
}

@media (max-width: 1280px) {
    .eg-learner-dashboard-grid {
        grid-template-columns: 220px minmax(0, 1fr) 290px;
    }

    .eg-learner-course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eg-learner-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .eg-learner-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .eg-learner-sidebar,
    .eg-learner-aside {
        position: relative;
        top: auto;
    }

    .eg-learner-sidebar {
        order: -1;
    }

    .eg-learner-sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eg-learner-welcome-card {
        grid-template-columns: 1fr;
    }

    .eg-learner-priority-card,
    .eg-learner-page-header {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: start;
    }
}

@media (max-width: 820px) {
    .eg-learner-course-grid,
    .eg-learner-activity-head,
    .eg-learner-activity-row {
        grid-template-columns: 1fr;
    }

    .eg-learner-activity-head {
        display: none;
    }

    .eg-learner-activity-row {
        gap: 0.45rem;
    }

    .eg-learner-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .eg-learner-search {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .eg-learner-dashboard {
        padding: 1.25rem 0 3rem;
    }

    .eg-learner-dashboard-grid {
        width: min(100% - 1rem, 1360px);
    }

    .eg-learner-sidebar,
    .eg-learner-panel,
    .eg-learner-aside-card,
    .eg-learner-welcome-card {
        border-radius: 18px;
    }

    .eg-learner-sidebar-nav {
        grid-template-columns: 1fr;
    }

    .eg-learner-panel,
    .eg-learner-aside-card,
    .eg-learner-welcome-card,
    .eg-learner-sidebar {
        padding: 1rem;
    }

    .eg-learner-welcome-visual {
        min-height: 180px;
    }
}

/* ==========================================================================
   Espace apprenant — pages Messages / Planning / Profil / Paramètres
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Stats grid (réutilisable) */
.eg-learner-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.eg-learner-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eg-learner-stat-card .eyebrow {
    color: var(--color-muted);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.eg-learner-stat-card strong {
    font-size: 26px;
    color: var(--color-dark);
    font-weight: 700;
    line-height: 1.1;
}

.eg-learner-stat-card span {
    color: var(--color-muted);
    font-size: 13px;
}

/* Filter bar */
.eg-learner-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.eg-learner-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}

.eg-learner-filter-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.eg-learner-filter-chip.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Messages page */
.eg-learner-messages-shell {
    padding: 0;
    overflow: hidden;
}

.eg-learner-messages-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    min-height: 520px;
}

.eg-learner-messages-list {
    border-right: 1px solid var(--color-border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 640px;
    overflow-y: auto;
}

.eg-learner-message-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: var(--color-bg);
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.15s ease;
}

.eg-learner-message-row:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
}

.eg-learner-message-row.is-active {
    background: var(--color-accent-light);
    border-color: var(--color-primary);
}

.eg-learner-message-row.is-unread strong {
    color: var(--color-primary);
}

.eg-learner-message-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.eg-learner-message-row-head strong {
    font-size: 14px;
    color: var(--color-dark);
}

.eg-learner-message-row-people {
    color: var(--color-muted);
    font-size: 12px;
}

.eg-learner-message-row-excerpt {
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.4;
}

.eg-learner-message-row-date {
    color: var(--color-muted);
    font-size: 11px;
    align-self: flex-end;
}

.unread-pill {
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.eg-learner-messages-thread {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.eg-learner-thread-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.eg-learner-thread-message {
    background: var(--color-bg);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    max-width: 80%;
}

.eg-learner-thread-message.is-self {
    background: var(--color-accent-light);
    border-color: var(--color-primary);
    align-self: flex-end;
}

.eg-learner-thread-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 12px;
}

.eg-learner-thread-meta strong {
    color: var(--color-dark);
}

.eg-learner-thread-meta span {
    color: var(--color-muted);
}

.eg-learner-thread-message p {
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
}

.eg-learner-thread-reply {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}

.eg-learner-thread-reply textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    resize: vertical;
}

.eg-learner-thread-reply textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.eg-learner-thread-reply button {
    align-self: flex-end;
}

/* Planning timeline */
.eg-learner-timeline {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
}

.eg-learner-timeline-day-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.eg-learner-timeline-day-head strong {
    color: var(--color-dark);
    font-size: 16px;
}

.eg-learner-timeline-day-head span {
    color: var(--color-muted);
    font-size: 12px;
}

.eg-learner-timeline-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eg-learner-timeline-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 14px;
}

.eg-learner-timeline-item.eg-is-assignment {
    border-left-color: var(--color-warning);
}

.eg-learner-timeline-item.eg-is-live {
    border-left-color: var(--color-primary);
}

.eg-learner-timeline-time {
    font-weight: 700;
    color: var(--color-dark);
    font-size: 16px;
}

.eg-learner-timeline-body h3 {
    margin: 4px 0 2px;
    font-size: 15px;
    color: var(--color-dark);
}

.eg-learner-timeline-body p {
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
}

.eg-learner-timeline-body small {
    color: var(--color-muted);
    font-size: 12px;
}

.eg-learner-timeline-tag {
    display: inline-block;
    background: var(--color-accent-light);
    color: var(--color-primary);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Profile page hero */
.eg-learner-profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.eg-learner-profile-hero-identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.eg-learner-profile-hero-identity h2 {
    margin: 0 0 4px;
    color: var(--color-dark);
}

.eg-learner-profile-hero-identity p {
    margin: 0;
    color: var(--color-muted);
}

.eg-learner-profile-tags {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.eg-learner-profile-tags span:not(.eg-learner-status-pill) {
    color: var(--color-muted);
    font-size: 13px;
}

.eg-learner-profile-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.avatar-large {
    width: 72px;
    height: 72px;
    font-size: 22px;
}

/* Settings */
.eg-learner-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.eg-learner-settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eg-learner-settings-field label {
    color: var(--color-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eg-learner-settings-field input {
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
}

.eg-learner-settings-field input[readonly] {
    color: var(--color-text);
    cursor: default;
}

.eg-learner-settings-note {
    margin-top: 12px;
    color: var(--color-muted);
    font-size: 13px;
    font-style: italic;
}

.eg-learner-settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.eg-learner-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--color-bg);
    border-radius: 14px;
    border: 1px solid var(--color-border);
}

.eg-learner-settings-row strong {
    color: var(--color-dark);
    font-size: 14px;
    display: block;
    margin-bottom: 2px;
}

.eg-learner-settings-row p {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
}

.eg-learner-settings-row button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   LOT 5 — Espace apprenant desktop refresh
   Harmonisation douce avec le dashboard formateur
   ========================================================================== */

.eg-learner-dashboard {
    padding: 1.8rem 0 3.4rem;
    background:
        linear-gradient(180deg, #f6f3ed 0%, var(--color-bg) 9%, var(--color-bg) 100%);
}

.eg-learner-dashboard-grid {
    grid-template-columns: 232px minmax(0, 1fr) 310px;
    gap: 24px;
    width: min(1460px, calc(100% - 2rem));
}

.eg-learner-main,
.eg-learner-aside {
    gap: 20px;
}

.eg-learner-sidebar,
.eg-learner-panel,
.eg-learner-aside-card,
.eg-learner-welcome-card,
.eg-learner-page-header-card,
.eg-learner-priority-card,
.eg-learner-summary-card,
.eg-learner-library-card,
.eg-learner-live-priority,
.eg-learner-stat-card {
    background: var(--color-surface);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.04);
    backdrop-filter: none;
}

.eg-learner-sidebar {
    top: 28px;
    gap: 18px;
    min-height: calc(100vh - 56px);
    padding: 22px 16px;
    border-radius: 24px;
}

.eg-learner-sidebar-brand {
    gap: 0.7rem;
    padding-inline: 4px;
}

.eg-learner-sidebar-mark {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 0.88rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.eg-learner-sidebar-brand strong {
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.eg-learner-sidebar-brand span {
    font-size: 0.78rem;
}

.eg-learner-sidebar-nav {
    gap: 0.4rem;
}

.eg-learner-sidebar-link {
    min-height: 44px;
    gap: 0.75rem;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.eg-learner-sidebar-link:hover {
    transform: translateX(0);
    background: rgba(43, 9, 96, 0.06);
}

.eg-learner-sidebar-link.is-active {
    background: rgba(43, 9, 96, 0.08);
    box-shadow: inset 0 0 0 1px rgba(43, 9, 96, 0.06);
}

.eg-learner-sidebar-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--color-primary);
    background: rgba(43, 9, 96, 0.08);
    font-size: 0.74rem;
    font-weight: 800;
    opacity: 1;
}

.eg-learner-sidebar-icon svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.eg-learner-sidebar-help {
    margin-top: auto;
    gap: 0.65rem;
    padding: 16px;
    border-radius: 18px;
    background: var(--color-bg);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.eg-learner-sidebar-help .button {
    width: 100%;
    justify-content: center;
}

.eg-learner-topbar {
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.eg-learner-search {
    max-width: 560px;
    min-height: 42px;
    gap: 0.65rem;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--color-bg);
    box-shadow: none;
}

.eg-learner-search input {
    font-size: 0.9rem;
}

.eg-learner-search-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    opacity: 0.72;
    font-size: 0.9rem;
    font-weight: 800;
}

.eg-learner-topbar-meta {
    gap: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.eg-learner-date-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--color-muted);
    background: rgba(15, 23, 42, 0.04);
}

.eg-learner-notification-chip {
    min-height: 34px;
    padding: 0 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: none;
}

.eg-learner-notification-chip strong {
    min-width: 18px;
    min-height: 18px;
    font-size: 0.68rem;
}

.eg-learner-welcome-card {
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 20px;
    padding: 24px;
    border-radius: 24px;
}

.eg-learner-welcome-copy h1 {
    margin-top: 0.2rem;
    margin-bottom: 0.6rem;
    font-size: clamp(1.72rem, 2vw, 2.3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.eg-learner-welcome-copy p:not(.eyebrow) {
    font-size: 0.9rem;
    line-height: 1.7;
}

.eg-learner-welcome-visual {
    min-height: 164px;
    border-radius: 20px;
}

.eg-learner-visual-orbit {
    inset: 18px;
}

.eg-learner-visual-card.eg-is-primary {
    top: 34px;
    right: 24px;
    width: 92px;
    height: 60px;
}

.eg-learner-visual-card.eg-is-secondary {
    bottom: 24px;
    left: 24px;
    width: 82px;
    height: 50px;
}

.eg-learner-visual-card.eg-is-muted {
    right: 22px;
    bottom: 18px;
    width: 50px;
    height: 50px;
}

.eg-learner-panel,
.eg-learner-aside-card {
    padding: 20px;
    border-radius: 22px;
}

.eg-learner-page-header-card,
.eg-learner-priority-card,
.eg-learner-summary-card,
.eg-learner-library-card {
    border-radius: 22px;
}

.eg-learner-panel-heading {
    margin-bottom: 1rem;
}

.eg-learner-panel-heading h2 {
    margin-top: 0.18rem;
    font-size: 1.12rem;
    line-height: 1.2;
}

.eg-learner-panel-heading a {
    font-size: 0.84rem;
    font-weight: 700;
}

.eg-learner-course-grid {
    gap: 14px;
}

.eg-learner-course-card,
.eg-learner-library-card {
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.eg-learner-course-cover,
.eg-learner-library-cover,
.eg-learner-priority-cover {
    background: #efe9f8;
}

.eg-learner-course-body,
.eg-learner-library-body {
    gap: 0.7rem;
    padding: 18px;
}

.eg-learner-course-body h3,
.eg-learner-library-body h3 {
    font-size: 1rem;
    line-height: 1.38;
}

.eg-learner-course-body p,
.eg-learner-library-body > p {
    font-size: 0.84rem;
}

.eg-learner-course-meta span,
.eg-learner-priority-meta span,
.eg-learner-library-meta span,
.eg-learner-live-priority-meta span {
    min-height: 26px;
    padding: 0 0.75rem;
    font-size: 0.74rem;
}

.eg-learner-priority-card {
    gap: 18px;
    padding: 18px 20px;
}

.eg-learner-priority-copy h2,
.eg-learner-live-priority-copy h2 {
    font-size: 1.34rem;
    line-height: 1.12;
}

.eg-learner-summary-grid,
.eg-learner-stats-grid {
    gap: 14px;
}

.eg-learner-summary-card,
.eg-learner-stat-card {
    padding: 18px;
}

.eg-learner-summary-card span {
    font-size: 1.48rem;
}

.eg-learner-summary-card strong,
.eg-learner-stat-card strong {
    font-size: 0.96rem;
}

.eg-learner-stat-card strong {
    font-size: 1.55rem;
}

.eg-learner-page-header h1 {
    font-size: 1.62rem;
}

.eg-learner-page-header p:not(.eyebrow),
.eg-learner-priority-copy p,
.eg-learner-summary-card p,
.eg-learner-stat-card span,
.eg-learner-library-meta span {
    line-height: 1.55;
}

.eg-learner-course-filters {
    gap: 14px;
}

.eg-learner-filter-pills,
.eg-learner-filter-bar {
    gap: 10px;
}

.eg-learner-filter-pill,
.eg-learner-filter-chip {
    min-height: 36px;
    font-size: 0.8rem;
    font-weight: 700;
}

.eg-learner-course-filter-actions {
    gap: 12px;
}

.eg-is-inline-search {
    min-height: 42px;
}

.eg-learner-activity-table,
.eg-learner-live-table,
.eg-learner-schedule-list,
.eg-learner-reminder-list,
.eg-learner-feed-list,
.eg-learner-timeline,
.eg-learner-timeline-items {
    gap: 12px;
}

.eg-learner-activity-row,
.eg-learner-live-row,
.eg-learner-reminder-item,
.eg-learner-feed-item,
.eg-learner-schedule-item,
.eg-learner-timeline-item,
.eg-learner-settings-row {
    border-radius: 16px;
    background: #fcfbfe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.eg-learner-activity-row,
.eg-learner-live-row {
    padding: 13px 15px;
}

.eg-learner-status-pill,
.eg-learner-timeline-tag,
.unread-pill {
    font-weight: 800;
}

.eg-learner-live-page .eg-learner-main,
.eg-learner-courses-page .eg-learner-main {
    gap: 16px;
}

.eg-learner-live-priority {
    gap: 18px;
    padding: 18px 20px;
    border-radius: 22px;
}

.eg-learner-live-date-block {
    border-radius: 18px;
}

.eg-learner-messages-shell {
    padding: 0;
    border-radius: 22px;
}

.eg-learner-messages-grid {
    gap: 0;
    min-height: 560px;
}

.eg-learner-messages-list {
    gap: 12px;
    padding: 20px;
}

.eg-learner-message-row {
    gap: 6px;
    padding: 15px;
    border-radius: 16px;
}

.eg-learner-messages-thread {
    gap: 16px;
    padding: 22px;
}

.eg-learner-thread-list {
    gap: 12px;
}

.eg-learner-thread-message {
    border-radius: 16px;
    padding: 14px 16px;
}

.eg-learner-thread-reply {
    padding-top: 18px;
}

.eg-learner-thread-reply textarea {
    border-radius: 14px;
    background: #fcfbfe;
}

.eg-learner-profile-hero {
    gap: 18px;
    padding: 2px 0;
}

.eg-learner-profile-hero-identity h2 {
    font-size: 1.5rem;
    line-height: 1.1;
}

.eg-learner-profile-card .avatar {
    width: 54px;
    height: 54px;
}

.avatar-large {
    width: 76px;
    height: 76px;
}

.eg-learner-settings-grid {
    gap: 18px;
    margin-top: 10px;
}

.eg-learner-settings-field {
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 16px;
    background: #fcfbfe;
}

.eg-learner-settings-field input {
    background: #fff;
}

.eg-learner-settings-list {
    gap: 12px;
    margin-top: 10px;
}

.eg-learner-settings-row {
    padding: 16px;
}

/* ==========================================================================
   Espace formateur — shell, dashboard, mini-calendar
   ========================================================================== */

/* Shell */
.eg-trainer-shell {
    background: var(--color-bg);
    min-height: calc(100vh - 0px);
    padding: 28px 32px;
}

.eg-trainer-shell-grid {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
    max-width: 1480px;
    margin: 0 auto;
}

/* Sidebar — slim, airy */
.eg-trainer-sidebar {
    position: sticky;
    top: 28px;
    background: var(--color-surface);
    border-radius: 20px;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border: 1px solid var(--color-border);
    min-height: calc(100vh - 56px);
}

.eg-trainer-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
}

.eg-trainer-sidebar-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.04em;
}

.eg-trainer-sidebar-brand strong {
    display: block;
    color: var(--color-dark);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.eg-trainer-sidebar-brand span {
    color: var(--color-muted);
    font-size: 11px;
}

.eg-trainer-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eg-trainer-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.eg-trainer-sidebar-link:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.eg-trainer-sidebar-link.is-active {
    background: var(--color-accent-light);
    color: var(--color-primary);
    font-weight: 600;
}

.eg-trainer-sidebar-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eg-trainer-sidebar-icon svg {
    width: 18px;
    height: 18px;
}

.eg-trainer-sidebar-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 6px 42px;
    border-left: 1px solid var(--color-border);
    padding-left: 10px;
}

.eg-trainer-sidebar-sub-link {
    color: var(--color-muted);
    font-size: 12.5px;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 6px;
}

.eg-trainer-sidebar-sub-link:hover {
    color: var(--color-primary);
    background: var(--color-bg);
}

.eg-trainer-sidebar-footer {
    margin-top: auto;
    padding: 14px;
    background: var(--color-bg);
    border-radius: 14px;
}

.eg-trainer-sidebar-footer .eyebrow {
    color: var(--color-muted);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.eg-trainer-sidebar-footer p {
    margin: 0 0 10px;
    color: var(--color-text);
    font-size: 12.5px;
    line-height: 1.4;
}

.eg-trainer-sidebar-footer-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
}

/* Topbar — light, slim */
.eg-trainer-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-surface);
    border-radius: 16px;
    padding: 10px 14px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.eg-trainer-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg);
    border-radius: 12px;
    padding: 8px 14px;
}

.eg-trainer-search svg {
    width: 16px;
    height: 16px;
    color: var(--color-muted);
    flex-shrink: 0;
}

.eg-trainer-search input {
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--color-text);
    flex: 1;
    outline: none;
    font-size: 13.5px;
}

.eg-trainer-topbar-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eg-trainer-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg);
    border: 0;
    border-radius: 10px;
    color: var(--color-text);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.eg-trainer-date-chip svg {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
}

.eg-trainer-date-chip:hover {
    background: var(--color-accent-light);
}

.eg-trainer-topbar-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--color-text);
    background: var(--color-bg);
    text-decoration: none;
}

.eg-trainer-topbar-icon svg {
    width: 16px;
    height: 16px;
}

.eg-trainer-topbar-icon strong {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1;
}

.eg-trainer-topbar-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Main column */
.eg-trainer-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Hero */
.eg-trainer-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #3d1882 100%);
    color: #fff;
    border-radius: 20px;
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    position: relative;
}

.eg-trainer-hero-copy {
    max-width: 580px;
}

.eg-trainer-hero-copy .eyebrow {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.eg-trainer-hero-copy h1 {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.2;
    color: #fff;
}

.eg-trainer-hero-copy p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
}

.eg-trainer-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.eg-trainer-hero-visual {
    position: relative;
    width: 200px;
    height: 160px;
    flex-shrink: 0;
}

.eg-trainer-hero-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.25);
}

.eg-trainer-hero-card {
    position: absolute;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
}

.eg-trainer-hero-card.eg-is-1 { width: 70px; height: 90px; top: 20px; left: 30px; }
.eg-trainer-hero-card.eg-is-2 { width: 70px; height: 70px; top: 10px; right: 20px; background: rgba(255, 255, 255, 0.28); }
.eg-trainer-hero-card.eg-is-3 { width: 110px; height: 50px; bottom: 10px; right: 30px; background: rgba(255, 255, 255, 0.12); }

/* Buttons */
.eg-trainer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.eg-trainer-button:hover {
    background: #3d1882;
}

.eg-trainer-button.is-ghost {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.eg-trainer-hero-actions .eg-trainer-button.is-ghost:hover {
    background: rgba(255, 255, 255, 0.25);
}

.eg-trainer-panel .eg-trainer-button.is-ghost,
.eg-trainer-empty .eg-trainer-button.is-ghost {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.eg-trainer-panel .eg-trainer-button.is-ghost:hover,
.eg-trainer-empty .eg-trainer-button.is-ghost:hover {
    background: var(--color-accent-light);
}

.eg-trainer-button.is-small {
    padding: 7px 14px;
    font-size: 12.5px;
}

/* Stats grid */
.eg-trainer-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.eg-trainer-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.eg-trainer-stat .eyebrow {
    margin: 0;
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eg-trainer-stat strong {
    display: block;
    color: var(--color-dark);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    margin: 2px 0;
}

.eg-trainer-stat span {
    color: var(--color-muted);
    font-size: 12px;
}

/* Stat ring */
.eg-stat-ring {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.eg-stat-ring svg {
    width: 56px;
    height: 56px;
}

.eg-stat-ring-track {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 5;
}

.eg-stat-ring-progress {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s ease;
}

.eg-stat-ring.eg-is-primary .eg-stat-ring-progress { stroke: var(--color-primary); }
.eg-stat-ring.eg-is-accent .eg-stat-ring-progress { stroke: #7c3aed; }
.eg-stat-ring.eg-is-live .eg-stat-ring-progress { stroke: var(--color-info); }
.eg-stat-ring.eg-is-warning .eg-stat-ring-progress { stroke: var(--color-warning); }
.eg-stat-ring.eg-is-info .eg-stat-ring-progress { stroke: #0ea5e9; }

.eg-stat-ring-value {
    position: absolute;
    color: var(--color-dark);
    font-size: 13px;
    font-weight: 700;
}

/* Progress band */
.eg-trainer-progress-band {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 24px;
    align-items: center;
}

.eg-trainer-progress-band .eyebrow {
    margin: 0;
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eg-trainer-progress-band h2 {
    margin: 4px 0 2px;
    font-size: 16px;
    color: var(--color-dark);
}

.eg-trainer-progress-band p {
    margin: 0;
    color: var(--color-muted);
    font-size: 12.5px;
}

.eg-trainer-progress-track {
    height: 10px;
    background: var(--color-bg);
    border-radius: 999px;
    overflow: hidden;
}

.eg-trainer-progress-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #7c3aed);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* Panels */
.eg-trainer-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.eg-trainer-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.eg-trainer-panel-head .eyebrow {
    margin: 0;
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eg-trainer-panel-head h2 {
    margin: 4px 0 0;
    font-size: 17px;
    color: var(--color-dark);
}

.eg-trainer-panel-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
}

.eg-trainer-panel-link:hover {
    text-decoration: underline;
}

/* Two-column row */
.eg-trainer-two-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
}

/* Course grid */
.eg-trainer-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.eg-trainer-course-card {
    background: var(--color-bg);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eg-trainer-course-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eg-trainer-course-progress-text {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
}

.eg-trainer-status-pill {
    display: inline-block;
    background: var(--color-accent-light);
    color: var(--color-primary);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.eg-trainer-status-pill.is-muted {
    background: var(--color-bg);
    color: var(--color-muted);
}

.eg-trainer-course-card h3 {
    margin: 0;
    font-size: 14.5px;
    color: var(--color-dark);
    line-height: 1.3;
}

.eg-trainer-course-meta {
    display: flex;
    gap: 12px;
    color: var(--color-muted);
    font-size: 12px;
}

.eg-trainer-progress-bar {
    height: 6px;
    background: var(--color-surface);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.eg-trainer-progress-bar span {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
}

/* Live list */
.eg-trainer-live-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eg-trainer-live-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--color-bg);
    border-radius: 12px;
}

.eg-trainer-live-date {
    width: 52px;
    text-align: center;
    background: var(--color-surface);
    border-radius: 10px;
    padding: 8px 4px;
    border: 1px solid var(--color-border);
}

.eg-trainer-live-date strong {
    display: block;
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.eg-trainer-live-date span {
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.eg-trainer-live-body {
    flex: 1;
    min-width: 0;
}

.eg-trainer-live-body h3 {
    margin: 0;
    font-size: 14px;
    color: var(--color-dark);
}

.eg-trainer-live-body p {
    margin: 2px 0;
    color: var(--color-muted);
    font-size: 12.5px;
}

.eg-trainer-live-body small {
    color: var(--color-muted);
    font-size: 11.5px;
}

/* Actions list */
.eg-trainer-actions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eg-trainer-action-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--color-bg);
    border-radius: 12px;
    border-left: 3px solid var(--color-primary);
}

.eg-trainer-action-item.is-warning { border-left-color: var(--color-warning); }
.eg-trainer-action-item.is-info { border-left-color: var(--color-info); }
.eg-trainer-action-item.is-primary { border-left-color: var(--color-primary); }

.eg-trainer-action-tag {
    background: var(--color-surface);
    color: var(--color-dark);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.eg-trainer-action-body strong {
    display: block;
    color: var(--color-dark);
    font-size: 13.5px;
}

.eg-trainer-action-body span {
    color: var(--color-muted);
    font-size: 12px;
}

.eg-trainer-action-date {
    color: var(--color-muted);
    font-size: 12px;
}

/* Comments list */
.eg-trainer-comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eg-trainer-comment-item {
    background: var(--color-bg);
    border-radius: 12px;
    padding: 12px 16px;
}

.eg-trainer-comment-item strong {
    color: var(--color-dark);
    font-size: 13.5px;
}

.eg-trainer-comment-meta {
    display: block;
    color: var(--color-muted);
    font-size: 11.5px;
    margin: 2px 0 6px;
}

.eg-trainer-comment-item p {
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.4;
}

/* Empty */
.eg-trainer-empty {
    background: var(--color-bg);
    border-radius: 14px;
    padding: 22px;
    text-align: center;
}

.eg-trainer-empty h3 {
    margin: 0 0 6px;
    color: var(--color-dark);
    font-size: 14.5px;
}

.eg-trainer-empty p {
    margin: 0 0 12px;
    color: var(--color-muted);
    font-size: 13px;
}

/* Aside */
.eg-trainer-aside {
    position: sticky;
    top: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.eg-trainer-aside-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.eg-trainer-aside-card.eg-is-muted {
    background: var(--color-bg);
}

.eg-trainer-aside-head .eyebrow {
    margin: 0 0 10px;
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eg-trainer-aside-muted {
    color: var(--color-muted);
    font-size: 13px;
    margin: 0;
}

.eg-trainer-profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.eg-trainer-profile-head h2 {
    margin: 0;
    font-size: 15.5px;
    color: var(--color-dark);
}

.eg-trainer-profile-head p {
    margin: 0;
    color: var(--color-muted);
    font-size: 12.5px;
}

.eg-trainer-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.eg-trainer-profile-stats > div {
    text-align: center;
}

.eg-trainer-profile-stats strong {
    display: block;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
}

.eg-trainer-profile-stats span {
    color: var(--color-muted);
    font-size: 11px;
}

.eg-trainer-next-live strong {
    display: block;
    color: var(--color-dark);
    font-size: 13px;
    text-transform: capitalize;
}

.eg-trainer-next-live span {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 700;
    display: block;
    margin: 4px 0 8px;
}

.eg-trainer-next-live h3 {
    margin: 0 0 2px;
    font-size: 14px;
    color: var(--color-dark);
}

.eg-trainer-next-live p {
    margin: 0 0 12px;
    color: var(--color-muted);
    font-size: 12.5px;
}

.eg-trainer-reminders {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eg-trainer-reminders li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--color-bg);
    border-radius: 10px;
}

.eg-trainer-reminders strong {
    color: var(--color-dark);
    font-size: 13px;
}

.eg-trainer-reminders span {
    color: var(--color-muted);
    font-size: 12px;
}

.eg-trainer-quick-links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eg-trainer-quick-links a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.eg-trainer-quick-links a:hover {
    background: var(--color-accent-light);
    color: var(--color-primary);
}

/* Mini-calendar */
.eg-mini-calendar {
    background: var(--color-surface);
    border-radius: 14px;
    padding: 14px;
    border: 1px solid var(--color-border);
    user-select: none;
}

.eg-mini-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.eg-mini-calendar-head strong {
    color: var(--color-dark);
    font-size: 13.5px;
    text-transform: capitalize;
}

.eg-mini-calendar-nav {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 0;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.eg-mini-calendar-nav:hover {
    background: var(--color-accent-light);
    color: var(--color-primary);
}

.eg-mini-calendar-weekdays,
.eg-mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.eg-mini-calendar-weekdays {
    margin-bottom: 6px;
}

.eg-mini-calendar-weekdays span {
    text-align: center;
    color: var(--color-muted);
    font-size: 10.5px;
    text-transform: uppercase;
    font-weight: 600;
}

.eg-mini-calendar-cell {
    aspect-ratio: 1;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.eg-mini-calendar-cell:hover {
    background: var(--color-bg);
}

.eg-mini-calendar-cell.is-blank {
    visibility: hidden;
    pointer-events: none;
}

.eg-mini-calendar-cell.is-today {
    background: var(--color-accent-light);
    color: var(--color-primary);
    font-weight: 700;
}

.eg-mini-calendar-cell.is-highlight {
    position: relative;
    color: var(--color-primary);
    font-weight: 600;
}

.eg-mini-calendar-cell.is-highlight::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
}

.eg-mini-calendar-cell.is-selected {
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.eg-mini-calendar-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eg-mini-calendar-today {
    background: transparent;
    border: 0;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.eg-mini-calendar-foot span {
    color: var(--color-muted);
    font-size: 11.5px;
}

/* Floating calendar (topbar trigger) */
.eg-floating-calendar {
    position: absolute;
    z-index: 1000;
    width: 280px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
    border-radius: 14px;
}

.eg-floating-calendar .eg-mini-calendar {
    background: var(--color-surface);
}

/* Smaller breakpoint cleanup (desktop only — keep ≥ 1024px) */
@media (max-width: 1280px) {
    .eg-trainer-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .eg-trainer-shell-grid {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    .eg-trainer-aside {
        grid-column: 1 / -1;
        margin-top: 8px;
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* ==========================================================================
   LOT 8 — Responsive global (tablette + mobile)
   Breakpoints :
     1280px : desktop moyen
     1024px : tablette large (basculement aside / sidebar drawer)
      768px : tablette / mobile large
      480px : petit mobile
   ========================================================================== */

/* Garde-fous généraux : éviter tout scroll horizontal involontaire */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }

/* Bouton menu mobile (apprenant + formateur) — caché sur desktop */
.eg-mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: var(--color-bg);
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
}

.eg-mobile-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--color-dark);
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

body.eg-shell-mobile-open .eg-mobile-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
body.eg-shell-mobile-open .eg-mobile-toggle span:nth-child(2) {
    opacity: 0;
}
body.eg-shell-mobile-open .eg-mobile-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Overlay mobile */
.eg-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1100;
}

body.eg-shell-mobile-open .eg-mobile-overlay {
    opacity: 1;
    pointer-events: auto;
}

body.eg-shell-mobile-open {
    overflow: hidden;
}

/* ====== TABLETTE LARGE ≤ 1280px ====== */
@media (max-width: 1280px) {
    /* Espaces apprenant : panneau droit sous le contenu */
    .eg-learner-dashboard-grid {
        grid-template-columns: 240px minmax(0, 1fr);
    }
    .eg-learner-dashboard-grid > .eg-learner-aside {
        grid-column: 1 / -1;
        margin-top: 8px;
    }

    /* Stats apprenant 2 cartes par ligne */
    .eg-learner-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ====== TABLETTE ≤ 1024px ====== */
@media (max-width: 1024px) {
    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* === Bouton menu visible sur les shells apprenant/formateur === */
    .eg-mobile-toggle {
        display: inline-flex;
    }

    /* === SHELL APPRENANT === */
    .eg-learner-dashboard {
        padding: 0;
    }
    .eg-learner-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
    }
    .eg-learner-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(280px, 82vw);
        z-index: 1200;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        border-radius: 0;
        margin: 0;
        max-height: 100vh;
        overflow-y: auto;
        box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
    }
    body.eg-shell-mobile-open .eg-learner-sidebar {
        transform: translateX(0);
    }
    .eg-learner-aside {
        grid-column: 1 / -1;
    }

    /* === SHELL FORMATEUR === */
    .eg-trainer-shell {
        padding: 16px;
    }
    .eg-trainer-shell-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .eg-trainer-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(280px, 82vw);
        z-index: 1200;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        border-radius: 0;
        margin: 0;
        min-height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
    }
    body.eg-shell-mobile-open .eg-trainer-sidebar {
        transform: translateX(0);
    }
    .eg-trainer-aside {
        position: static;
        display: flex;
        flex-direction: column;
    }

    /* Stats formateur 3 colonnes */
    .eg-trainer-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Hero formateur : visuel plus discret */
    .eg-trainer-hero {
        padding: 24px;
    }

    /* Deux colonnes formateur (live + calendrier) → 1 colonne */
    .eg-trainer-two-cols {
        grid-template-columns: 1fr;
    }

    /* Bande progression : empile */
    .eg-trainer-progress-band {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .eg-trainer-progress-band .eg-trainer-progress-track {
        width: 100%;
    }

    /* Actions formateur : cellule date passe sous le titre */
    .eg-trainer-action-item {
        grid-template-columns: auto 1fr auto;
    }
    .eg-trainer-action-item .eg-trainer-action-date {
        grid-column: 2 / 3;
        font-size: 11.5px;
    }

    /* Topbar publique : champ recherche masqué (déjà dans menu mobile) */
    .eg-search-form { display: none; }
}

/* ====== MOBILE LARGE ≤ 768px ====== */
@media (max-width: 768px) {
    /* === Topbar publique (déjà gérée mais on harmonise le drawer existant) === */
    .eg-navbar {
        flex-wrap: wrap;
    }
    .eg-nav-content {
        order: 99;
        width: 100%;
        flex-basis: 100%;
        display: none;
        flex-direction: column;
        gap: 12px;
        padding: 12px 0 4px;
    }
    .eg-nav-content.open {
        display: flex;
    }
    .eg-nav-links,
    .eg-nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }
    .eg-nav-links a,
    .eg-nav-link {
        width: 100%;
        padding: 10px 12px;
        border-radius: 10px;
    }
    .eg-nav-actions form {
        width: 100%;
    }
    .eg-logout-button {
        width: 100%;
    }
    .eg-login-link,
    .eg-register-button {
        text-align: center;
    }

    /* === Topbars internes (apprenant + formateur) === */
    .eg-learner-topbar,
    .eg-trainer-topbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }
    .eg-learner-search,
    .eg-trainer-search {
        order: 3;
        width: 100%;
        flex-basis: 100%;
    }
    .eg-learner-topbar-meta,
    .eg-trainer-topbar-meta {
        margin-left: auto;
        gap: 6px;
    }
    .eg-trainer-date-chip span,
    .eg-learner-date-chip {
        max-width: 130px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* === Hero formateur : empilement === */
    .eg-trainer-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        text-align: left;
    }
    .eg-trainer-hero-copy h1 {
        font-size: 20px;
    }
    .eg-trainer-hero-copy p {
        font-size: 13px;
    }
    .eg-trainer-hero-actions {
        width: 100%;
    }
    .eg-trainer-hero-actions .eg-trainer-button {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
    .eg-trainer-hero-visual { display: none; }

    /* === Stats === */
    .eg-trainer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eg-trainer-stat { padding: 12px 14px; gap: 10px; }
    .eg-trainer-stat strong { font-size: 18px; }
    .eg-stat-ring, .eg-stat-ring svg { width: 44px; height: 44px; }

    .eg-learner-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* === Panneaux : moins de padding === */
    .eg-trainer-panel,
    .eg-trainer-aside-card,
    .eg-learner-panel,
    .eg-learner-aside-card {
        padding: 16px;
        border-radius: 14px;
    }
    .eg-trainer-panel-head,
    .eg-learner-panel-heading {
        flex-wrap: wrap;
    }

    /* === Course grids === */
    .eg-trainer-course-grid,
    .eg-learner-course-grid {
        grid-template-columns: 1fr;
    }

    /* === Live items (formateur) === */
    .eg-trainer-live-item {
        flex-wrap: wrap;
    }
    .eg-trainer-live-body {
        flex: 1 1 60%;
        min-width: 0;
    }

    /* === Actions formateur : empile la cellule action === */
    .eg-trainer-action-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .eg-trainer-action-item .eg-trainer-action-tag,
    .eg-trainer-action-item .eg-trainer-action-date {
        grid-column: 1 / -1;
        justify-self: start;
    }
    .eg-trainer-action-item .eg-trainer-button {
        align-self: flex-start;
    }

    /* === Page header générique (publique + apprenant) === */
    .eg-learner-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .eg-learner-page-header h1 { font-size: 22px; }

    /* === Profil apprenant hero === */
    .eg-learner-profile-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* === Messages apprenant : grid → empilement === */
    .eg-learner-messages-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .eg-learner-messages-list {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
        max-height: 360px;
    }

    /* === Settings apprenant === */
    .eg-learner-settings-grid {
        grid-template-columns: 1fr;
    }
    .eg-learner-settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* === Filter chips === */
    .eg-learner-filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .eg-learner-filter-chip { white-space: nowrap; flex-shrink: 0; }

    /* === Hero accueil publique === */
    .hero, .page-hero {
        padding: 32px 0;
    }
    .hero h1, .page-hero h1 { font-size: 24px; }

    /* === Cards grid (catalogue, etc.) === */
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* === Sections génériques === */
    .section,
    .subtle-section {
        padding-top: 28px;
        padding-bottom: 28px;
    }
    .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* === Page header générique === */
    .page-header h1 { font-size: 24px; }
    .header-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .header-actions > * { width: 100%; }
    .header-actions .button { width: auto; }

    /* === Formulaires : pleine largeur === */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .admin-form,
    .auth-form,
    .form-grid {
        grid-template-columns: 1fr;
    }
    form .button {
        width: 100%;
    }

    /* === Footer === */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: center;
    }

    /* === Admin nav (sub-nav horizontale) === */
    .admin-subnav,
    .eg-admin-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .admin-subnav a,
    .eg-admin-nav a {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* === Admin filters === */
    .admin-filters,
    .table-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .admin-filters > *,
    .table-actions > * {
        width: 100%;
    }

    /* === Admin stats === */
    .admin-stats-grid,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* === Tables : confort === */
    .table-wrap {
        margin: 0 -4px;
    }
    .table-wrap table {
        min-width: 640px; /* force le scroll horizontal proprement */
    }

    /* === Mini calendar : largeur 100% === */
    .eg-mini-calendar { width: 100%; }
    .eg-floating-calendar { width: min(280px, calc(100vw - 24px)); }

    /* === Message cards (page partagée) === */
    .message-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .message-card time { align-self: flex-end; }

    /* === Aside formateur : profil stats compactés === */
    .eg-trainer-profile-stats { gap: 4px; }
    .eg-trainer-profile-stats strong { font-size: 14px; }
    .eg-trainer-profile-stats span { font-size: 10.5px; }
}

/* ====== PETIT MOBILE ≤ 480px ====== */
@media (max-width: 480px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Stats : 1 colonne */
    .eg-trainer-stats,
    .eg-learner-stats-grid,
    .stats-grid,
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }

    /* Stat formateur : ring à gauche, libellé compact */
    .eg-trainer-stat strong { font-size: 17px; }

    /* Topbar : compresser un peu plus */
    .eg-learner-topbar,
    .eg-trainer-topbar {
        padding: 8px 10px;
        gap: 8px;
    }
    .eg-trainer-topbar-icon { width: 32px; height: 32px; }
    .eg-trainer-date-chip { padding: 6px 10px; font-size: 11.5px; }
    .eg-trainer-date-chip span {
        max-width: 90px;
    }
    .eg-learner-date-chip {
        font-size: 11px;
        padding: 4px 8px;
    }
    .eg-learner-notification-chip {
        font-size: 11.5px;
        padding: 4px 8px;
    }

    /* Hero formateur : titre encore plus compact */
    .eg-trainer-hero-copy h1 { font-size: 18px; }
    .eg-trainer-hero-copy p { font-size: 12.5px; }
    .eg-trainer-hero-actions {
        flex-direction: column;
        gap: 8px;
    }
    .eg-trainer-hero-actions .eg-trainer-button { width: 100%; }

    /* Sidebar drawer : largeur quasi pleine */
    .eg-learner-sidebar,
    .eg-trainer-sidebar {
        width: min(300px, 88vw);
    }

    /* Boutons globaux confort */
    .button,
    .eg-trainer-button {
        padding: 10px 14px;
        font-size: 13px;
    }
    .button-small,
    .eg-trainer-button.is-small {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Page header : titres légers */
    .eg-learner-page-header h1,
    .page-header h1 { font-size: 20px; }

    /* Mini calendar : cellules un peu plus petites */
    .eg-mini-calendar-cell { font-size: 11.5px; }
    .eg-mini-calendar { padding: 12px; }

    /* Live item formateur : date à gauche compacte */
    .eg-trainer-live-date { width: 44px; padding: 6px 4px; }
    .eg-trainer-live-date strong { font-size: 16px; }

    /* Profil apprenant identité empilée */
    .eg-learner-profile-hero-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Footer */
    .footer-grid p { font-size: 12.5px; }

    /* Admin tables : minimum scroll plus court */
    .table-wrap table { min-width: 560px; }
}

/* ==========================================================================
   LOT 8 V2 — Simplification mobile : tableaux→cartes, respiration, hiérarchie
   ========================================================================== */

@media (max-width: 768px) {
    /* === Tableaux : transformés en cartes empilées (override Lot 8 v1) === */
    .table-wrap {
        margin: 0;
        border: 0;
        background: transparent;
        overflow: visible;
        padding: 0;
    }
    .table-wrap table {
        min-width: 0;
        width: 100%;
        border: 0;
        background: transparent;
    }
    .table-wrap thead {
        display: none;
    }
    .table-wrap tbody,
    .table-wrap tr,
    .table-wrap td,
    .table-wrap th {
        display: block;
        width: 100%;
    }
    .table-wrap tbody tr {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    }
    .table-wrap tbody td {
        border: 0;
        padding: 6px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        text-align: right;
        color: var(--color-text);
        font-size: 13px;
        line-height: 1.4;
        min-height: 28px;
    }
    .table-wrap tbody td[data-label]::before {
        content: attr(data-label);
        color: var(--color-muted);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
        text-align: left;
        flex: 0 0 auto;
        margin-right: auto;
    }
    .table-wrap tbody td:first-child {
        font-weight: 600;
        color: var(--color-dark);
        font-size: 14px;
        text-align: left;
        justify-content: flex-start;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 4px;
    }
    .table-wrap tbody td:last-child {
        padding-top: 8px;
    }
    .table-wrap tbody td a,
    .table-wrap tbody td button,
    .table-wrap tbody td form {
        display: inline-flex;
    }
    .table-wrap tbody td form {
        margin: 0;
    }

    /* Cellules complexes : éviter l'écrasement quand le contenu est riche */
    .table-wrap tbody td .table-user-cell,
    .table-wrap tbody td .table-course-cell,
    .table-wrap tbody td .table-progress-cell {
        text-align: right;
        justify-content: flex-end;
    }

    /* === Public hero : ré-ordonner le visuel sous le texte === */
    .hero-grid {
        grid-template-columns: 1fr !important;
        text-align: left;
    }
    .hero-actions {
        flex-wrap: wrap;
    }
    .hero-actions .button {
        flex: 1 1 auto;
        text-align: center;
    }

    /* === Page détail formation : encadré achat juste après le titre === */
    .eg-course-detail-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .eg-course-detail-summary {
        order: -1;
        position: static;
        max-width: 100%;
    }
    .eg-course-detail-copy { order: 1; }

    /* === Page leçon : vidéo prioritaire, navigation après === */
    .eg-lesson-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .eg-lesson-video-frame { aspect-ratio: 16 / 9; }
    .eg-lesson-video-frame iframe,
    .eg-lesson-video-frame video {
        width: 100%;
        height: 100%;
    }
    .eg-lesson-navigation,
    .eg-lesson-progress-card {
        order: 99;
    }

    /* === Iframe globale (vidéos) : limiter la largeur === */
    iframe { max-width: 100%; }
    .video-frame { aspect-ratio: 16 / 9; }
    .video-frame iframe { width: 100%; height: 100%; }

    /* === Réduire le bruit visuel des panneaux === */
    .eg-trainer-panel-head h2,
    .eg-learner-panel-heading h2 { font-size: 15.5px; }
    .eg-trainer-panel-head .eyebrow,
    .eg-learner-panel-heading .eyebrow { font-size: 10.5px; }

    /* === Pagination : centrée === */
    .pagination-wrap,
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* === Flash messages : marges ajustées === */
    .flash {
        margin-left: 14px;
        margin-right: 14px;
    }

    /* === Sub-nav admin : indicateur visuel de scroll === */
    .admin-subnav,
    .eg-admin-nav {
        mask-image: linear-gradient(90deg, #000 80%, transparent);
        -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    }

    /* === Hero formateur : visuel décoratif masqué (déjà fait au L8v1, on confirme) === */
    .eg-trainer-hero-visual { display: none; }
}

/* === Tablette intermédiaire 769-1024 : respiration === */
@media (min-width: 769px) and (max-width: 1024px) {
    .eg-trainer-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .eg-learner-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === Petit mobile : compresser les cartes-tables === */
@media (max-width: 480px) {
    .table-wrap tbody tr { padding: 12px 14px; }
    .table-wrap tbody td:first-child { font-size: 13.5px; }
    .table-wrap tbody td { font-size: 12.5px; gap: 10px; }
}

/* ==========================================================================
   LOT 8 V2.1 — Ajustements ciblés
   1. Hamburger plus à droite dans le header mobile
   2. Cartes formations : 2 colonnes sur mobile standard, 1 colonne sur petit mobile
   ========================================================================== */

/* === 1. Hamburger aligné à droite sur mobile === */
@media (max-width: 1024px) {
    .eg-navbar .nav-toggle {
        margin-left: auto;
        margin-right: 4px;
    }
}

@media (max-width: 768px) {
    .eg-navbar {
        padding-right: 4px;
    }
    .eg-navbar .nav-toggle {
        order: 2; /* après le logo, avant le menu déroulant */
        margin-left: auto;
    }
    .eg-navbar .eg-nav-content {
        order: 3;
    }
}

/* === 2. Cartes formations en 2 colonnes sur mobile standard === */
@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* Carte plus compacte mais lisible */
    .cards-grid .card,
    .cards-grid .course-card,
    .cards-grid > article {
        padding: 12px;
        border-radius: 14px;
    }

    .cards-grid .card h3,
    .cards-grid .course-card h3,
    .cards-grid > article h3 {
        font-size: 14px;
        line-height: 1.3;
    }

    .cards-grid .card p,
    .cards-grid .course-card p,
    .cards-grid > article p {
        font-size: 12.5px;
    }

    .cards-grid .card .button,
    .cards-grid .course-card .button {
        padding: 8px 12px;
        font-size: 12.5px;
    }

    .cards-grid .card-cover,
    .cards-grid .course-cover,
    .cards-grid img {
        border-radius: 10px;
    }

    .cards-grid .badge,
    .cards-grid .pill,
    .cards-grid .eyebrow {
        font-size: 10.5px;
    }
}

/* === Très petit mobile : retour à 1 colonne pour préserver la lisibilité === */
@media (max-width: 360px) {
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .cards-grid .card,
    .cards-grid .course-card,
    .cards-grid > article {
        padding: 14px;
    }
    .cards-grid .card h3,
    .cards-grid .course-card h3,
    .cards-grid > article h3 {
        font-size: 15px;
    }
}

/* ==========================================================================
   LOT 8 V2.2 — Fix grille formations 2 colonnes mobile
   Problème : ancienne règle @media (max-width:640px) ligne 4501 forçait 1 col.
   Solution : règle ciblée sur les vraies classes des grilles publiques.
   ========================================================================== */

@media (min-width: 361px) and (max-width: 768px) {
    .cards-grid,
    .cards-grid.eg-public-cards-grid,
    .cards-grid.eg-catalog-grid,
    .eg-public-cards-grid,
    .eg-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* Compaction des cartes pour rester lisibles à 2 col à 390px */
    .cards-grid .eg-course-card-link,
    .cards-grid .eg-course-card-compact,
    .cards-grid .eg-course-card-body,
    .eg-public-cards-grid .eg-course-card-link,
    .eg-catalog-grid .eg-course-card-link {
        min-height: auto;
    }

    .cards-grid .eg-course-card-body h3,
    .eg-public-cards-grid .eg-course-card-body h3,
    .eg-catalog-grid .eg-course-card-body h3 {
        font-size: 14px;
        line-height: 1.3;
        max-height: none;
    }

    .cards-grid .eg-course-card-body p,
    .eg-public-cards-grid .eg-course-card-body p,
    .eg-catalog-grid .eg-course-card-body p {
        font-size: 12px;
    }

    .cards-grid .eg-course-card-body .button,
    .cards-grid .eg-course-card-body .eg-ui-button,
    .eg-public-cards-grid .button,
    .eg-catalog-grid .button {
        padding: 7px 10px;
        font-size: 12px;
    }

    .cards-grid .eg-course-card-cover,
    .eg-public-cards-grid .eg-course-card-cover,
    .eg-catalog-grid .eg-course-card-cover {
        aspect-ratio: 16 / 10;
    }

    .cards-grid .eg-course-card-meta,
    .cards-grid .eg-course-card-tag,
    .eg-public-cards-grid .eg-course-card-meta,
    .eg-catalog-grid .eg-course-card-meta {
        font-size: 11px;
        gap: 6px;
    }

    /* Désactive le hover-card flottant en mobile (déjà masqué ≤1100px, on confirme) */
    .eg-course-hover-card { display: none; }
}

/* ==========================================================================
   LOT 8 V2.3 — Grilles formations : 5 par ligne sur desktop
   Cible : .cards-grid (déjà 5), .trainer-course-grid, .eg-learner-course-grid,
   .eg-trainer-course-grid. Au-dessus de 1100px uniquement.
   N'affecte PAS le responsive validé (≤900/820/768px restent inchangés).
   ========================================================================== */

@media (min-width: 1101px) {
    .cards-grid,
    .cards-grid.eg-catalog-grid,
    .cards-grid.eg-public-cards-grid,
    .trainer-course-grid,
    .eg-learner-course-grid,
    .eg-trainer-course-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }

    /* Compaction des cartes pour rester lisibles à 5 colonnes
       (utile surtout dans les shells apprenant/formateur où l'espace est restreint
        par sidebar + aside) */
    .eg-learner-course-card,
    .eg-trainer-course-card,
    .trainer-course-card {
        padding: 14px;
        border-radius: 14px;
    }

    .eg-learner-course-card h3,
    .eg-trainer-course-card h3,
    .trainer-course-card h3 {
        font-size: 14px;
        line-height: 1.3;
    }

    .eg-learner-course-card p,
    .eg-trainer-course-card p,
    .trainer-course-card p {
        font-size: 12.5px;
    }

    .eg-learner-course-card .button,
    .eg-trainer-course-card .button,
    .trainer-course-card .button,
    .eg-learner-course-card .eg-trainer-button,
    .eg-trainer-course-card .eg-trainer-button {
        padding: 7px 12px;
        font-size: 12.5px;
    }

    .eg-learner-course-meta,
    .eg-trainer-course-meta {
        font-size: 11.5px;
        gap: 8px;
    }
}

/* Petit desktop intermédiaire : repli en 4 colonnes pour conserver la lisibilité
   dans les shells qui comportent sidebar + aside (apprenant 220px + 290px,
   formateur 232px + 320px). À cette largeur, 5 colonnes deviennent trop étroites
   uniquement DANS les shells, pas en pleine largeur publique. */
@media (min-width: 1101px) and (max-width: 1320px) {
    .eg-learner-course-grid,
    .eg-trainer-course-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==========================================================================
   LOT 8 V2.4 — Compaction des cartes formations (réduction hauteur ~30%)
   Cible principale : .trainer-course-card (page formateur "Mes formations")
   Cibles secondaires : .eg-learner-course-card, .eg-trainer-course-card
   Approche : réduction polices + paddings + gaps + line-clamp description.
   Aucune Blade modifiée. Le responsive mobile/tablette reste intact.
   ========================================================================== */

/* --- Carte formateur (utilisée sur Mes formations + admin/users/show + stats) --- */
.trainer-course-card {
    border-radius: 12px;
}

.trainer-course-cover {
    aspect-ratio: 16 / 6; /* couverture moins haute qu'avant (16/7) */
}

.trainer-course-body {
    gap: 0.5rem;       /* avant 0.9rem */
    padding: 0.85rem;  /* avant 1.1rem */
}

.trainer-course-body h2 {
    font-size: 0.95rem;  /* ~15px, avant ~24px (h2 par défaut) */
    line-height: 1.25;
    /* limiter le titre à 2 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trainer-course-body p {
    font-size: 0.78rem;  /* ~12.5px */
    line-height: 1.4;
    /* limiter la description à 2 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trainer-course-card .course-meta {
    gap: 0.5rem;
    font-size: 0.7rem;   /* ~11px */
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trainer-course-card .course-meta span {
    padding: 2px 8px;
}

.trainer-course-metrics {
    gap: 0.4rem;  /* avant 0.75rem */
}

.trainer-course-metrics div {
    padding: 0.45rem 0.5rem;  /* avant 0.75rem */
    border-radius: 8px;
}

.trainer-course-metrics strong {
    font-size: 0.95rem;  /* avant 1.35rem (~21.6px) → ~15px */
}

.trainer-course-metrics span {
    font-size: 0.68rem;  /* libellé apprenants/progression/commentaires */
}

.trainer-course-card .progress-bar {
    height: 4px;
}

.trainer-card-actions {
    gap: 0.4rem;  /* avant 0.65rem */
}

.trainer-card-actions .button,
.trainer-card-actions .button-small {
    padding: 6px 10px;
    font-size: 0.75rem;
    line-height: 1;
}

.trainer-card-actions a:not(.button) {
    font-size: 0.72rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 4px 6px;
    border-radius: 6px;
}

.trainer-card-actions a:not(.button):hover {
    background: var(--color-accent-light);
}

/* --- Compaction modérée des cartes apprenant et formateur dashboard --- */
.eg-learner-course-card {
    padding: 0; /* déjà géré par sa structure interne, on n'écrase pas */
}

.eg-learner-course-body {
    padding: 12px 14px;
    gap: 8px;
}

.eg-learner-course-body h3 {
    font-size: 14px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eg-learner-course-body p {
    font-size: 12.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eg-learner-course-meta {
    font-size: 11px;
    gap: 6px;
}

.eg-learner-course-progress .progress-summary {
    font-size: 11.5px;
}

.eg-learner-course-card .progress-bar {
    height: 4px;
}

.eg-learner-course-cover {
    aspect-ratio: 16 / 8;
}

/* Carte du dashboard formateur (vue compacte déjà) — léger ajustement */
.eg-trainer-course-card {
    padding: 14px;
    gap: 8px;
}

.eg-trainer-course-card h3 {
    font-size: 14px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eg-trainer-course-meta {
    font-size: 11.5px;
}

/* --- Mobile : on relâche le line-clamp pour ne pas tronquer trop court --- */
@media (max-width: 768px) {
    .trainer-course-body h2,
    .eg-learner-course-body h3,
    .eg-trainer-course-card h3 {
        -webkit-line-clamp: 3;
    }
    .trainer-course-body p,
    .eg-learner-course-body p {
        -webkit-line-clamp: 3;
    }
}

/* ==========================================================================
   LOT 8 V2.5 — Compaction agressive des cartes formations (deuxième passe)
   Durcit V2.4 : cover plus plate, padding/gap encore réduits,
   metrics en ligne inline, titre/description plus petits, actions denses.
   Objectif : carte ultra-compacte ~50% plus basse qu'à l'origine.
   ========================================================================== */

/* --- Carte formateur "Mes formations" --- */
.trainer-course-cover {
    aspect-ratio: 16 / 5; /* encore plus plate (V2.4 : 16/6, original : 16/7) */
}

.trainer-course-body {
    gap: 0.4rem;        /* V2.4 : 0.5rem */
    padding: 0.7rem 0.8rem; /* V2.4 : 0.85rem */
}

.trainer-course-body h2 {
    font-size: 0.88rem; /* ~14px, V2.4 : 0.95rem */
    line-height: 1.2;
    -webkit-line-clamp: 2;
}

.trainer-course-body p {
    font-size: 0.75rem; /* ~12px, V2.4 : 0.78rem */
    line-height: 1.35;
    -webkit-line-clamp: 2;
    margin: 0;
}

.trainer-course-card .course-meta {
    font-size: 0.65rem;
    gap: 0.4rem;
}

/* Metrics : passage en ligne horizontale compacte (au lieu de 3 cards) */
.trainer-course-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    background: var(--color-bg);
    border-radius: 8px;
    border: 0;
}

.trainer-course-metrics div {
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    flex: 1 1 auto;
    min-width: 0;
}

.trainer-course-metrics strong {
    font-size: 0.85rem; /* ~13.5px, V2.4 : 0.95rem */
    line-height: 1;
    display: inline;
}

.trainer-course-metrics span {
    font-size: 0.65rem;
    color: var(--color-muted);
    white-space: nowrap;
}

/* Progress bar collée à la zone actions */
.trainer-course-card .progress-bar {
    height: 3px;
    margin-top: -2px;
}

.trainer-card-actions {
    gap: 0.35rem;
    padding-top: 0.1rem;
}

.trainer-card-actions .button,
.trainer-card-actions .button-small {
    padding: 5px 9px;
    font-size: 0.72rem;
    border-radius: 8px;
}

.trainer-card-actions a:not(.button) {
    font-size: 0.7rem;
    padding: 3px 5px;
}

/* --- Apprenant (compaction supplémentaire) --- */
.eg-learner-course-body {
    padding: 10px 12px; /* V2.4 : 12px 14px */
    gap: 6px;
}

.eg-learner-course-body h3 {
    font-size: 13.5px;
    line-height: 1.25;
}

.eg-learner-course-body p {
    font-size: 12px;
    line-height: 1.3;
}

.eg-learner-course-meta {
    font-size: 10.5px;
    gap: 5px;
}

.eg-learner-course-progress {
    gap: 4px;
}

.eg-learner-course-progress .progress-summary {
    font-size: 11px;
    margin: 0;
}

.eg-learner-course-card .progress-bar {
    height: 3px;
}

.eg-learner-course-cover {
    aspect-ratio: 16 / 7; /* un peu moins plat que V2.4 (16/8) pour rester visuel */
}

.eg-learner-course-card .button-small {
    padding: 6px 10px;
    font-size: 12px;
}

/* --- Dashboard formateur (carte synthétique compacte) --- */
.eg-trainer-course-card {
    padding: 12px;
    gap: 6px;
}

.eg-trainer-course-card h3 {
    font-size: 13.5px;
    line-height: 1.25;
}

.eg-trainer-course-meta {
    font-size: 11px;
    gap: 6px;
}

.eg-trainer-course-progress-text {
    font-size: 11px;
}

.eg-trainer-course-card .eg-trainer-progress-bar {
    height: 4px;
}

.eg-trainer-course-card .eg-trainer-button.is-small {
    padding: 5px 10px;
    font-size: 11.5px;
}

/* --- Mobile : on conserve la lisibilité --- */
@media (max-width: 768px) {
    .trainer-course-body {
        padding: 0.8rem;
        gap: 0.5rem;
    }
    .trainer-course-body h2 { font-size: 0.95rem; -webkit-line-clamp: 3; }
    .trainer-course-body p { font-size: 0.8rem; -webkit-line-clamp: 3; }
    .trainer-course-metrics { padding: 0.5rem; }
}

/* ==========================================================================
   LOT 8 V2.6 — Cartes formateur calquées sur le catalogue public /formations
   Override final : .trainer-course-card adopte le visuel de .eg-course-card-link
   (même hauteur, cover 16/9, body padding 1rem gap 0.55rem, titre 1rem clamp 2,
    métriques en pills inline, actions footer CTA-strip).
   Aucune Blade modifiée.
   ========================================================================== */

.trainer-course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 328px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--eg-ui-shadow-xs);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.trainer-course-card:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 9, 96, 0.18);
    box-shadow: var(--eg-ui-shadow-md);
}

.trainer-course-cover {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: #f3efe7;
}

.trainer-course-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
}

/* Meta du haut : badges de niveau / leçons en pills (comme topline catalogue) */
.trainer-course-card .course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    min-height: 26px;
    padding: 0;
}

.trainer-course-card .course-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.58rem;
    border-radius: 999px;
    background: var(--eg-ui-surface-soft);
    color: #5b5367;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Titre : copie exacte du catalogue */
.trainer-course-body h2 {
    margin: 0;
    color: #171827;
    font-size: 1rem;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.65em;
    max-height: 2.65em;
}

/* Description : style "trainer-name" du catalogue (gris, 0.84rem, clamp court) */
.trainer-course-body p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Métriques : pills inline poussées en bas du body (comme mini-meta du catalogue) */
.trainer-course-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    margin-top: auto;
    padding: 0;
    background: transparent;
    border: 0;
}

.trainer-course-metrics div {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    min-height: 24px;
    padding: 0 0.58rem;
    border: 0;
    border-radius: 999px;
    background: var(--eg-ui-surface-soft);
}

.trainer-course-metrics strong {
    font-size: 0.74rem;
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1;
}

.trainer-course-metrics span {
    font-size: 0.66rem;
    color: #5b5367;
    font-weight: 600;
    white-space: nowrap;
}

/* Barre de progression : masquée (style catalogue ne l'a pas) */
.trainer-course-card .progress-bar {
    display: none;
}

/* Actions : strip CTA en footer (séparateur fin, comme .eg-course-card-cta) */
.trainer-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.trainer-card-actions .button,
.trainer-card-actions .button-small {
    padding: 5px 10px;
    font-size: 0.72rem;
    border-radius: 8px;
    line-height: 1;
}

.trainer-card-actions a:not(.button) {
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    padding: 2px 0;
}

.trainer-card-actions a:not(.button):hover {
    text-decoration: underline;
}

/* Mobile : on relâche les contraintes pour la lisibilité */
@media (max-width: 768px) {
    .trainer-course-card { min-height: 0; }
    .trainer-course-body h2 {
        font-size: 1.05rem;
        -webkit-line-clamp: 3;
        min-height: 0;
        max-height: none;
    }
    .trainer-course-body p {
        -webkit-line-clamp: 3;
    }
}

/* ==========================================================================
   LOT 2.1 — Profil formateur (page show + edit)
   ========================================================================== */

.eg-trainer-profile-hero-card { padding: 22px 24px; }

.eg-trainer-profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.eg-trainer-profile-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 auto;
    min-width: 0;
}

.eg-trainer-profile-identity .eyebrow {
    margin: 0 0 4px;
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eg-trainer-profile-identity h1 {
    margin: 0 0 6px;
    color: var(--color-dark);
    font-size: 22px;
    line-height: 1.2;
}

.eg-trainer-profile-headline {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
}

.eg-trainer-profile-email {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
}

.eg-trainer-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eg-trainer-profile-bio {
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
}

/* Form */
.eg-trainer-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.eg-trainer-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eg-trainer-form-label {
    color: var(--color-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.eg-trainer-form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.eg-trainer-form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.eg-trainer-form-input.is-readonly,
.eg-trainer-form-input[disabled] {
    background: var(--color-bg);
    color: var(--color-muted);
    cursor: not-allowed;
}

.eg-trainer-form-input[rows],
textarea.eg-trainer-form-input {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.eg-trainer-form-help {
    color: var(--color-muted);
    font-size: 12px;
}

.eg-trainer-form-file {
    padding: 8px;
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    background: var(--color-bg);
    font-size: 13px;
    cursor: pointer;
}

.eg-trainer-form-file::file-selector-button {
    margin-right: 12px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.eg-trainer-avatar-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    padding: 16px;
    background: var(--color-bg);
    border-radius: 14px;
}

.eg-trainer-avatar-preview {
    flex-shrink: 0;
}

.eg-trainer-avatar-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.eg-trainer-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

@media (max-width: 768px) {
    .eg-trainer-profile-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .eg-trainer-profile-actions { width: 100%; }
    .eg-trainer-profile-actions .eg-trainer-button { flex: 1 1 auto; text-align: center; justify-content: center; }
    .eg-trainer-avatar-row { flex-direction: column; }
    .eg-trainer-form-actions .eg-trainer-button { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* ==========================================================================
   LOT 2.2 — Page gestion couverture formation
   ========================================================================== */

.eg-trainer-cover-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 8px;
}

.eg-trainer-cover-preview {
    background: var(--color-bg);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.eg-trainer-cover-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eg-trainer-cover-preview .course-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-accent-light);
    color: var(--color-primary);
}

.eg-trainer-cover-preview .course-cover-placeholder span {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.eg-trainer-cover-preview .course-cover-placeholder strong {
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    padding: 0 16px;
}

.eg-trainer-cover-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.eg-trainer-cover-destroy-form {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
    .eg-trainer-cover-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   LOT 2.2-B — Création/modification formations formateur
   ========================================================================== */

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

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

@media (max-width: 768px) {
    .eg-trainer-form-grid-2 {
        grid-template-columns: 1fr;
    }
    .page-header-actions {
        width: 100%;
    }
    .page-header-actions .button {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   LOT 2.3 — Parcours guidé création formation (stepper, checklist, programme)
   ========================================================================== */

/* Stepper 4 étapes */
.eg-trainer-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.eg-trainer-stepper-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 0;
    background: transparent;
}

.eg-trainer-stepper-item:hover:not(.is-disabled):not(.is-active) {
    background: var(--color-bg);
    color: var(--color-text);
}

.eg-trainer-stepper-item.is-active {
    background: var(--color-accent-light);
    color: var(--color-primary);
}

.eg-trainer-stepper-item.is-done {
    color: var(--color-primary);
}

.eg-trainer-stepper-item.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.eg-trainer-stepper-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-bg);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--color-border);
}

.eg-trainer-stepper-item.is-active .eg-trainer-stepper-num,
.eg-trainer-stepper-item.is-done .eg-trainer-stepper-num {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.eg-trainer-stepper-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Liste des leçons (page Programme) */
.eg-trainer-lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eg-trainer-lesson-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--color-bg);
    border-radius: 12px;
}

.eg-trainer-lesson-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.eg-trainer-lesson-order {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.eg-trainer-lesson-meta strong {
    display: block;
    color: var(--color-dark);
    font-size: 13.5px;
}

.eg-trainer-lesson-tags {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 11.5px;
}

.eg-trainer-lesson-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Page Publication : grille preview + checklist */
.eg-trainer-publish-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 18px;
}

.eg-trainer-publish-preview {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eg-trainer-publish-meta h2 {
    margin: 0 0 6px;
    color: var(--color-dark);
    font-size: 18px;
}

.eg-trainer-publish-meta p {
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: 13.5px;
    line-height: 1.5;
}

/* Checklist */
.eg-trainer-publish-checklist h3 {
    margin: 0 0 12px;
    color: var(--color-dark);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eg-trainer-checklist {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eg-trainer-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--color-bg);
    border-radius: 10px;
    font-size: 13px;
}

.eg-trainer-checklist-item.is-done {
    color: var(--color-dark);
}

.eg-trainer-checklist-item.is-todo {
    color: var(--color-muted);
}

.eg-trainer-checklist-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.eg-trainer-checklist-item.is-done .eg-trainer-checklist-mark {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Mobile */
@media (max-width: 768px) {
    .eg-trainer-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }
    .eg-trainer-stepper-item {
        padding: 8px 10px;
        font-size: 12px;
    }
    .eg-trainer-stepper-label {
        white-space: normal;
    }
    .eg-trainer-publish-grid {
        grid-template-columns: 1fr;
    }
    .eg-trainer-lesson-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .eg-trainer-lesson-actions {
        width: 100%;
    }
    .eg-trainer-lesson-actions .eg-trainer-button {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ==========================================================================
   LOT 2.3-B — Navigation leçons + fallback vidéo propre
   ========================================================================== */

.eg-lesson-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.eg-lesson-video-fallback {
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    color: var(--color-muted);
}

.eg-lesson-video-fallback h3 {
    margin: 0 0 8px;
    color: var(--color-dark);
    font-size: 15px;
}

.eg-lesson-video-fallback p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-muted);
}

@media (max-width: 768px) {
    .eg-lesson-nav .eg-trainer-button {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   LOT 2.4 — Modules + leçons formateur
   ========================================================================== */

.eg-trainer-module {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.eg-trainer-module.eg-is-orphan {
    border-style: dashed;
    background: var(--color-bg);
}

.eg-trainer-module-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
}

.eg-trainer-module-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.eg-trainer-module-title h2 {
    margin: 0 0 4px;
    color: var(--color-dark);
    font-size: 16px;
    line-height: 1.3;
}

.eg-trainer-module-title p {
    margin: 0 0 6px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.4;
}

.eg-trainer-module-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-muted);
    font-size: 12px;
    flex-wrap: wrap;
}

.eg-trainer-module-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

.eg-trainer-module-actions form {
    margin: 0;
}

.eg-trainer-module .eg-trainer-lesson-list {
    margin: 0;
    padding: 8px 12px 12px;
    list-style: none;
    background: var(--color-bg);
}

.eg-trainer-module .eg-trainer-lesson-item {
    background: var(--color-surface);
    margin-bottom: 6px;
}

.eg-trainer-module .eg-trainer-lesson-item:last-child {
    margin-bottom: 0;
}

.eg-trainer-module-form-wrapper {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 6px 12px 12px;
}

.eg-trainer-module-form-wrapper[open] {
    background: var(--color-accent-light);
}

.eg-trainer-module-form-wrapper .eg-trainer-form {
    padding: 0 4px 4px;
}

@media (max-width: 768px) {
    .eg-trainer-module-head {
        flex-direction: column;
        align-items: stretch;
    }
    .eg-trainer-module-actions {
        width: 100%;
    }
    .eg-trainer-module-actions .eg-trainer-button,
    .eg-trainer-module-actions form {
        flex: 1 1 auto;
    }
    .eg-trainer-module-actions .eg-trainer-button,
    .eg-trainer-module-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   LOT 2.5 + 2.6 — Supports de cours + lecteur vidéo intégré
   ========================================================================== */

/* Liste des supports (formateur + apprenant) */
.eg-attachment-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eg-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.eg-attachment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.eg-attachment-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 4px 10px;
    background: var(--color-accent-light);
    color: var(--color-primary);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.eg-attachment-meta strong {
    display: block;
    color: var(--color-dark);
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
}

.eg-attachment-info {
    color: var(--color-muted);
    font-size: 12px;
}

/* Lecteur vidéo apprenant — renforcement */
.eg-lesson-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f172a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.eg-lesson-video-frame iframe,
.eg-lesson-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.eg-lesson-video-fallback {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    color: var(--color-muted);
}

.eg-lesson-video-fallback h3 {
    margin: 0 0 8px;
    color: var(--color-dark);
    font-size: 16px;
}

.eg-lesson-video-fallback p {
    margin: 0;
    max-width: 480px;
    font-size: 13.5px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .eg-attachment-item {
        flex-direction: column;
        align-items: stretch;
    }
    .eg-attachment-meta {
        align-items: flex-start;
    }
    .eg-attachment-item .eg-ui-button,
    .eg-attachment-item .eg-trainer-button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ==========================================================================
   LOT 2.7 — Validation admin formations
   ========================================================================== */

.eg-admin-review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.eg-admin-review-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.eg-admin-review-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
}

.eg-admin-review-side .eg-admin-panel {
    margin: 0;
}

.eg-admin-review-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.eg-admin-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.eg-admin-panel h2 {
    margin: 0 0 12px;
    color: var(--color-dark);
    font-size: 16px;
}

.eg-admin-panel h3 {
    margin: 0 0 8px;
    color: var(--color-dark);
    font-size: 14px;
}

/* Statut "À corriger" sur cards formateur */
.eg-trainer-status-pill.is-warning {
    background: rgba(249, 115, 22, 0.15);
    color: var(--color-warning);
}

/* Notice rejet côté formateur */
.eg-rejection-notice {
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid var(--color-warning);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 16px;
}

.eg-rejection-notice strong {
    color: var(--color-warning);
    font-size: 14px;
    display: block;
}

.eg-rejection-notice p {
    margin: 6px 0;
    color: var(--color-text);
    font-size: 13px;
}

@media (max-width: 1024px) {
    .eg-admin-review-grid {
        grid-template-columns: 1fr;
    }
    .eg-admin-review-side {
        position: static;
    }
}

/* ==========================================================================
   LOT 2.8 — Statistiques formateur (KPI, donut SVG, barres, timeline, watchlist)
   ========================================================================== */

.eg-trainer-stats-page {
    --stat-primary: #2B0960;
    --stat-success: #22C55E;
    --stat-warning: #F5B84B;
    --stat-danger: #F97316;
    --stat-info: #0ea5e9;
    --stat-accent: #7c3aed;
}

/* KPI grid */
.eg-stat-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.eg-stat-kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-left: 3px solid var(--stat-primary);
}

.eg-stat-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.eg-stat-kpi-card.eg-is-success { border-left-color: var(--stat-success); }
.eg-stat-kpi-card.eg-is-warning { border-left-color: var(--stat-warning); }
.eg-stat-kpi-card.eg-is-danger { border-left-color: var(--stat-danger); }
.eg-stat-kpi-card.eg-is-info { border-left-color: var(--stat-info); }
.eg-stat-kpi-card.eg-is-accent { border-left-color: var(--stat-accent); }

.eg-stat-kpi-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.eg-stat-kpi-card .eyebrow {
    margin: 0;
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eg-stat-kpi-card strong {
    display: block;
    color: var(--color-dark);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    margin: 2px 0;
}

.eg-stat-kpi-card span {
    color: var(--color-muted);
    font-size: 12px;
}

/* Two-cols (donut + bars) */
.eg-stat-two-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.eg-stat-chart-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* Donut */
.eg-stat-donut-wrapper {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
    align-items: center;
    margin-top: 12px;
}

.eg-stat-donut {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.eg-stat-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eg-stat-donut-legend li {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.eg-stat-donut-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.eg-stat-donut-label {
    color: var(--color-text);
    font-weight: 500;
}

.eg-stat-donut-legend strong {
    color: var(--color-dark);
    font-weight: 700;
    font-size: 14px;
}

/* Bars chart 30 jours */
.eg-stat-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    margin-top: 16px;
    padding: 8px 0;
    background: linear-gradient(to top, var(--color-bg), transparent);
    border-radius: 10px;
}

.eg-stat-bar {
    flex: 1;
    background: linear-gradient(to top, var(--stat-primary), var(--stat-accent));
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: opacity 0.15s ease;
    cursor: help;
}

.eg-stat-bar:hover {
    opacity: 0.8;
}

.eg-stat-bars-axis {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-muted);
    margin-top: 6px;
}

/* Performance par formation */
.eg-stat-course-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.eg-stat-course-row {
    background: var(--color-bg);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
}

.eg-stat-course-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.eg-stat-course-head strong {
    display: block;
    color: var(--color-dark);
    font-size: 14px;
    margin-bottom: 4px;
}

.eg-stat-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.eg-stat-progress {
    height: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.eg-stat-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--stat-primary), var(--stat-accent));
    border-radius: 999px;
}

/* Status pills variants */
.eg-trainer-status-pill.eg-is-success { background: rgba(34, 197, 94, 0.15); color: var(--stat-success); }
.eg-trainer-status-pill.eg-is-warning { background: rgba(245, 184, 75, 0.18); color: #b88207; }
.eg-trainer-status-pill.eg-is-danger { background: rgba(249, 115, 22, 0.15); color: var(--stat-danger); }

/* Watchlist */
.eg-stat-watchlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.eg-stat-watch-block {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
}

.eg-stat-watch-block header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.eg-stat-watch-icon {
    font-size: 20px;
}

.eg-stat-watch-block h3 {
    margin: 0;
    font-size: 13.5px;
    color: var(--color-dark);
    flex: 1;
}

.eg-stat-watch-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eg-stat-watch-block li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--color-surface);
    border-radius: 8px;
    font-size: 12.5px;
}

.eg-stat-watch-block li span {
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.eg-stat-watch-block li a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 11.5px;
    flex-shrink: 0;
}

.eg-stat-watch-block li a:hover {
    text-decoration: underline;
}

/* Timeline */
.eg-stat-timeline {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    position: relative;
}

.eg-stat-timeline::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 18px;
    width: 2px;
    background: var(--color-border);
}

.eg-stat-timeline-item {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    position: relative;
}

.eg-stat-timeline-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    z-index: 1;
}

.eg-stat-timeline-item.eg-is-published .eg-stat-timeline-dot { border-color: var(--stat-success); }
.eg-stat-timeline-item.eg-is-pending .eg-stat-timeline-dot { border-color: var(--stat-warning); }
.eg-stat-timeline-item.eg-is-rejected .eg-stat-timeline-dot { border-color: var(--stat-danger); }
.eg-stat-timeline-item.eg-is-lesson .eg-stat-timeline-dot { border-color: var(--stat-accent); }
.eg-stat-timeline-item.eg-is-attachment .eg-stat-timeline-dot { border-color: var(--stat-info); }
.eg-stat-timeline-item.eg-is-course .eg-stat-timeline-dot { border-color: var(--stat-primary); }

.eg-stat-timeline-body strong {
    display: block;
    color: var(--color-dark);
    font-size: 13.5px;
    line-height: 1.3;
}

.eg-stat-timeline-body span {
    color: var(--color-muted);
    font-size: 12px;
}

.eg-stat-timeline-date {
    color: var(--color-muted);
    font-size: 11.5px;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
    .eg-stat-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .eg-stat-two-cols {
        grid-template-columns: 1fr;
    }
    .eg-stat-watchlist {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .eg-stat-donut-wrapper {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .eg-stat-course-head {
        flex-direction: column;
        align-items: stretch;
    }
    .eg-stat-timeline-item {
        grid-template-columns: 32px 1fr;
    }
    .eg-stat-timeline-date {
        grid-column: 2;
        margin-top: 4px;
    }
}

/* ==========================================================================
   LOT 6 — Navbar publique allégée + Dropdown Catégories
   ========================================================================== */

/* Navbar plus compacte */
.eg-navbar {
    min-height: 60px;
    gap: 0.85rem;
}

.eg-nav-links {
    gap: 0.4rem;
}

.eg-nav-links > a,
.eg-nav-link {
    font-size: 0.85rem;
    padding: 6px 10px;
    font-weight: 500;
}

.eg-nav-actions {
    gap: 0.4rem;
}

.eg-search-form,
.eg-search-form.eg-ui-search {
    height: 36px;
    max-width: 280px;
}

.eg-search-form input {
    font-size: 0.85rem;
    padding: 0 12px;
}

.eg-search-icon {
    font-size: 14px;
}

.eg-brand {
    gap: 0.5rem;
}

.eg-brand-mark {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.eg-brand-text {
    font-size: 13px;
    letter-spacing: 0.04em;
}

.eg-login-link,
.eg-register-button,
.eg-logout-button {
    font-size: 0.82rem;
    padding: 6px 14px;
}

/* === Dropdown Catégories === */
.eg-nav-dropdown {
    position: relative;
    display: inline-block;
}

.eg-nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.eg-nav-dropdown-trigger:hover,
.eg-nav-dropdown:hover .eg-nav-dropdown-trigger,
.eg-nav-dropdown:focus-within .eg-nav-dropdown-trigger {
    background: rgba(43, 9, 96, 0.06);
    color: var(--color-primary);
}

.eg-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    min-width: 260px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    max-height: 70vh;
    overflow-y: auto;
}

.eg-nav-dropdown:hover .eg-nav-dropdown-menu,
.eg-nav-dropdown:focus-within .eg-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.eg-nav-dropdown-menu li { margin: 0; }

.eg-nav-dropdown-menu a {
    display: block;
    padding: 8px 12px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.83rem;
    border-radius: 8px;
    transition: background 0.12s ease, color 0.12s ease;
}

.eg-nav-dropdown-menu a:hover,
.eg-nav-dropdown-menu a:focus {
    background: var(--color-bg);
    color: var(--color-primary);
}

.eg-nav-dropdown-menu a.is-highlight {
    color: var(--color-primary);
    font-weight: 600;
}

.eg-nav-dropdown-menu a.is-highlight::before {
    content: '★ ';
    font-size: 0.7em;
    color: var(--color-gold, #F5B84B);
}

/* Mobile : transformer en liste empilée (pas un dropdown overlay) */
@media (max-width: 1100px) {
    .eg-nav-dropdown {
        width: 100%;
    }
    .eg-nav-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 10px 12px;
    }
    .eg-nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: transparent;
        max-height: none;
        padding: 0 0 4px 12px;
        display: none;
    }
    .eg-nav-dropdown:hover .eg-nav-dropdown-menu,
    .eg-nav-dropdown:focus-within .eg-nav-dropdown-menu,
    .eg-nav-dropdown-trigger[aria-expanded="true"] + .eg-nav-dropdown-menu {
        display: block;
    }
}

/* ==========================================================================
   LOT 6 — Navbar "pilule" inspirée du modèle de référence
   Brand orange à gauche, barre grise pilule, texte fin gris, mega-menu
   ========================================================================== */

/* Wrapper plus aéré */
.eg-main-header {
    padding: 14px 0 12px;
    background: transparent;
}

/* La navbar devient une longue pilule grise */
.eg-navbar {
    min-height: 52px;
    padding: 0;
    gap: 0;
    background: linear-gradient(180deg, #f4f4f6 0%, #e9e9ec 100%);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: visible;
    align-items: stretch;
}

/* Brand : tab orange à gauche (forme arrondie pleine hauteur) */
.eg-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 22px 0 26px;
    background: linear-gradient(180deg, #f7c052 0%, #f5a623 100%);
    color: #6e3a06;
    border-radius: 999px;
    margin: -2px -10px -2px -2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 8px rgba(245, 166, 35, 0.35);
    text-decoration: none;
    position: relative;
    z-index: 2;
    min-width: 200px;
}

.eg-brand:hover {
    color: #6e3a06;
    text-decoration: none;
}

.eg-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.45);
    color: #6e3a06;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.eg-brand-text {
    font-size: 12.5px;
    font-weight: 700;
    color: #6e3a06;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Liens centraux : texte fin gris, pas de fond */
.eg-nav-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 6px 0 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
    position: static;
}

.eg-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.eg-nav-links > a,
.eg-nav-link,
.eg-nav-dropdown-trigger {
    color: #6c7280;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    background: transparent;
    border: 0;
}

.eg-nav-links > a:hover,
.eg-nav-link:hover,
.eg-nav-dropdown-trigger:hover {
    color: #2B0960;
    background: rgba(255, 255, 255, 0.7);
}

/* Champ recherche : style pilule discret avec icône */
.eg-search-form {
    display: inline-flex;
    align-items: center;
    height: 34px;
    margin-left: auto;
    margin-right: 8px;
    padding: 0 14px 0 12px;
    background: #fff;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    max-width: 240px;
    flex: 0 1 auto;
}

.eg-search-icon {
    color: #6c7280;
    font-size: 14px;
    margin-right: 6px;
}

.eg-search-form input {
    border: 0;
    background: transparent;
    font-size: 0.8rem;
    color: #1f2937;
    outline: none;
    width: 100%;
    height: 100%;
    padding: 0;
}

/* Actions auth à droite */
.eg-nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 14px;
}

.eg-nav-actions form { margin: 0; }

.eg-login-link,
.eg-register-button {
    font-size: 0.78rem;
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.15s ease;
}

.eg-login-link {
    color: #6c7280;
}
.eg-login-link:hover { color: #2B0960; background: rgba(255, 255, 255, 0.7); }

.eg-register-button {
    background: #2B0960;
    color: #fff;
}
.eg-register-button:hover { background: #3d1882; color: #fff; }

.eg-logout-button {
    font-size: 0.78rem;
    padding: 6px 14px;
    background: transparent;
    border: 0;
    color: #6c7280;
    cursor: pointer;
    border-radius: 999px;
    font-weight: 500;
}
.eg-logout-button:hover { color: #2B0960; background: rgba(255, 255, 255, 0.7); }

.nav-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    background: #2B0960;
    color: #fff;
    font-size: 10px;
    border-radius: 999px;
    font-weight: 700;
}

/* Annoncement bar plus discret */
.eg-announcement-bar {
    background: rgba(43, 9, 96, 0.04);
    border-bottom: 1px solid rgba(43, 9, 96, 0.06);
}
.eg-announcement-inner {
    min-height: 28px;
    color: #6c7280;
    font-size: 0.74rem;
}

/* === Mega-menu Catégories === */
.eg-nav-megamenu-wrapper { position: static; }

.eg-nav-megamenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 200;
    width: min(960px, calc(100vw - 32px));
    max-height: 78vh;
    overflow-y: auto;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 22px;
}

.eg-nav-megamenu-wrapper:hover .eg-nav-megamenu,
.eg-nav-megamenu-wrapper:focus-within .eg-nav-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.eg-nav-mega-col { min-width: 0; }

.eg-nav-mega-heading {
    display: block;
    color: #2B0960;
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0 0 6px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(43, 9, 96, 0.08);
    text-decoration: none;
    transition: color 0.12s ease;
}

.eg-nav-mega-heading:hover { color: #3d1882; }

.eg-nav-mega-col ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.eg-nav-mega-col li { margin: 0; }

.eg-nav-mega-col li a {
    display: block;
    padding: 4px 0;
    color: #6c7280;
    font-size: 0.78rem;
    text-decoration: none;
    transition: color 0.12s ease, padding-left 0.12s ease;
}

.eg-nav-mega-col li a:hover {
    color: #2B0960;
    padding-left: 4px;
}

/* Responsive */
@media (max-width: 1100px) {
    .eg-navbar {
        flex-wrap: wrap;
        border-radius: 18px;
        min-height: 0;
        padding: 8px;
    }
    .eg-brand {
        margin: 0;
        padding: 8px 14px;
        min-width: 0;
        border-radius: 12px;
    }
    .eg-nav-content {
        order: 99;
        width: 100%;
        padding: 8px 4px 4px;
        flex-direction: column;
        align-items: stretch;
    }
    .eg-nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .eg-search-form {
        max-width: none;
        margin: 8px 0;
    }

    /* Mega-menu en mode accordéon mobile */
    .eg-nav-megamenu {
        position: static;
        width: 100%;
        max-height: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        padding: 0 0 0 12px;
        background: transparent;
        grid-template-columns: 1fr;
        gap: 8px;
        display: none;
    }
    .eg-nav-megamenu-wrapper:hover .eg-nav-megamenu,
    .eg-nav-megamenu-wrapper:focus-within .eg-nav-megamenu {
        display: grid;
    }
    .eg-nav-mega-heading { padding: 6px 0; border-bottom: 0; }
    .eg-nav-mega-col ul { padding-left: 8px; }
}