:root {
    --academy-bg: #f3f6fb;
    --academy-surface: #ffffff;
    --academy-surface-soft: #f8fafc;

    --academy-sidebar: #020617;
    --academy-sidebar-soft: #0f172a;
    --academy-sidebar-active: #14275d;

    --academy-primary: #2563eb;
    --academy-primary-dark: #1d4ed8;
    --academy-primary-soft: #dbeafe;

    --academy-text: #0f172a;
    --academy-text-soft: #475569;
    --academy-text-muted: #64748b;

    --academy-border: #e2e8f0;
    --academy-border-strong: #cbd5e1;

    --academy-success: #15803d;
    --academy-success-soft: #dcfce7;

    --academy-warning: #b45309;
    --academy-warning-soft: #fef3c7;

    --academy-danger: #b91c1c;
    --academy-danger-soft: #fee2e2;

    --academy-shadow:
        0 10px 35px rgba(15, 23, 42, 0.08);

    --academy-shadow-soft:
        0 4px 18px rgba(15, 23, 42, 0.06);

    --academy-radius: 18px;
    --academy-radius-small: 12px;

    --academy-sidebar-width: 300px;
    --academy-topbar-height: 82px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body.academy-body {
    min-height: 100vh;
    margin: 0;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            var(--academy-bg) 100%
        );

    color: var(--academy-text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body.academy-menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* =========================================================
   LAYOUT
========================================================= */

.academy-layout {
    display: flex;
    min-height: 100vh;
}

.academy-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;

    width: var(--academy-sidebar-width);
    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            #020617 0%,
            #03091c 100%
        );

    color: #ffffff;

    border-right:
        1px solid rgba(148, 163, 184, 0.12);

    transition:
        transform 0.25s ease;
}

.academy-shell {
    width: calc(100% - var(--academy-sidebar-width));
    min-height: 100vh;
    margin-left: var(--academy-sidebar-width);
}

.academy-main {
    min-height:
        calc(100vh - var(--academy-topbar-height));

    padding: 32px;
}

.academy-content {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}

/* =========================================================
   SIDEBAR
========================================================= */

.academy-sidebar-brand {
    padding: 26px 24px 22px;

    border-bottom:
        1px solid rgba(148, 163, 184, 0.13);
}

.academy-sidebar-brand a {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.academy-sidebar-brand strong {
    color: #ffffff;

    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.academy-sidebar-brand span {
    color: #93c5fd;
    font-size: 0.84rem;
    font-weight: 500;
}

.academy-sidebar-nav {
    padding: 18px 14px 30px;
}

.sidebar-section {
    margin-bottom: 22px;
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.sidebar-section-title {
    padding: 0 12px;
    margin-bottom: 8px;

    color: #7185ad;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 48px;
    padding: 10px 14px;
    margin-bottom: 4px;

    border: 1px solid transparent;
    border-radius: 11px;

    color: #dbeafe;

    font-size: 0.96rem;
    font-weight: 650;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.sidebar-link:hover {
    color: #ffffff;

    background:
        rgba(37, 99, 235, 0.14);

    border-color:
        rgba(96, 165, 250, 0.12);

    transform: translateX(3px);
}

.sidebar-link.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #14275d,
            #112453
        );

    border-color:
        rgba(96, 165, 250, 0.18);

    box-shadow:
        inset 3px 0 0 #60a5fa;
}

.sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    min-width: 23px;

    font-size: 1rem;
}

/* =========================================================
   TOPBAR
========================================================= */

.academy-topbar {
    position: sticky;
    top: 0;
    z-index: 900;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    min-height: var(--academy-topbar-height);
    padding: 14px 32px;

    background:
        rgba(255, 255, 255, 0.92);

    border-bottom:
        1px solid var(--academy-border);

    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.02);

    backdrop-filter: blur(12px);
}

.academy-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.academy-topbar-left > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.academy-topbar-left strong {
    color: var(--academy-text);

    font-size: 1rem;
    font-weight: 800;
}

.academy-topbar-left span {
    color: var(--academy-text-muted);
    font-size: 0.84rem;
}

.academy-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    padding: 0;

    color: var(--academy-text);

    background: var(--academy-surface-soft);

    border: 1px solid var(--academy-border);
    border-radius: 11px;

    cursor: pointer;
}

.academy-user-menu {
    display: flex;
    align-items: center;
    gap: 11px;
}

.academy-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1e40af
        );

    border-radius: 50%;

    font-size: 1rem;
    font-weight: 800;

    box-shadow:
        0 7px 18px rgba(37, 99, 235, 0.25);
}

.academy-user-information {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.academy-user-information strong {
    color: var(--academy-text);
    font-size: 0.9rem;
}

.academy-user-information span {
    color: var(--academy-text-muted);
    font-size: 0.78rem;
}

/* =========================================================
   TITRES DE PAGE
========================================================= */

.academy-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 26px;
}

.academy-page-head-content {
    max-width: 820px;
}

.academy-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 9px;

    color: var(--academy-primary);

    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.academy-page-title,
.academy-page-head h1 {
    margin: 0;

    color: var(--academy-text);

    font-size:
        clamp(1.8rem, 3vw, 2.55rem);

    line-height: 1.12;
    letter-spacing: -0.035em;
}

.academy-page-description,
.academy-page-head p {
    max-width: 760px;
    margin: 12px 0 0;

    color: var(--academy-text-soft);

    font-size: 1rem;
    line-height: 1.7;
}

/* =========================================================
   PANELS ET CARTES
========================================================= */

.academy-panel {
    padding: 25px;

    background: var(--academy-surface);

    border: 1px solid var(--academy-border);
    border-radius: var(--academy-radius);

    box-shadow: var(--academy-shadow-soft);
}

.academy-panel + .academy-panel {
    margin-top: 22px;
}

.academy-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 20px;
}

.academy-panel-title {
    margin: 0;

    color: var(--academy-text);

    font-size: 1.16rem;
    font-weight: 800;
}

.academy-panel-description {
    margin: 5px 0 0;

    color: var(--academy-text-muted);
    line-height: 1.6;
}

.academy-card-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.academy-card {
    overflow: hidden;

    background: var(--academy-surface);

    border: 1px solid var(--academy-border);
    border-radius: var(--academy-radius);

    box-shadow: var(--academy-shadow-soft);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.academy-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(37, 99, 235, 0.24);

    box-shadow: var(--academy-shadow);
}

.academy-card-body {
    padding: 21px;
}

/* =========================================================
   STATISTIQUES
========================================================= */

.academy-stats-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;

    margin-bottom: 24px;
}

.academy-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;

    min-height: 124px;
    padding: 20px;

    background: var(--academy-surface);

    border: 1px solid var(--academy-border);
    border-radius: var(--academy-radius);

    box-shadow: var(--academy-shadow-soft);
}

.academy-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    min-width: 52px;

    background: var(--academy-primary-soft);
    border-radius: 15px;

    font-size: 1.35rem;
}

.academy-stat-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.academy-stat-value {
    color: var(--academy-text);

    font-size: 1.55rem;
    font-weight: 850;
}

.academy-stat-label {
    color: var(--academy-text-muted);

    font-size: 0.84rem;
    font-weight: 600;
}

/* =========================================================
   BOUTONS
========================================================= */

.academy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 43px;
    padding: 10px 17px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--academy-primary),
            var(--academy-primary-dark)
        );

    border: 1px solid transparent;
    border-radius: 11px;

    font-size: 0.88rem;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(37, 99, 235, 0.2);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.academy-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 23px rgba(37, 99, 235, 0.26);
}

.academy-btn-secondary {
    color: var(--academy-text);

    background: var(--academy-surface);

    border-color: var(--academy-border);

    box-shadow: none;
}

.academy-btn-secondary:hover {
    border-color:
        rgba(37, 99, 235, 0.35);

    box-shadow:
        0 7px 16px rgba(15, 23, 42, 0.07);
}

.academy-btn-danger {
    background:
        linear-gradient(
            135deg,
            #dc2626,
            #b91c1c
        );

    box-shadow:
        0 7px 18px rgba(220, 38, 38, 0.18);
}

/* =========================================================
   PROGRESSION
========================================================= */

.academy-progress {
    width: 100%;
    height: 9px;
    overflow: hidden;

    background: #e2e8f0;

    border-radius: 999px;
}

.academy-progress-bar {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

    border-radius: inherit;
}

.academy-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 8px;

    color: var(--academy-text-muted);
    font-size: 0.82rem;
}

.academy-progress-meta strong {
    color: var(--academy-text);
}

/* =========================================================
   BADGES
========================================================= */

.academy-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    color: var(--academy-primary-dark);

    background: var(--academy-primary-soft);

    border-radius: 999px;

    font-size: 0.75rem;
    font-weight: 800;
}

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

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

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

/* =========================================================
   TABLES
========================================================= */

.academy-table-wrap {
    width: 100%;
    overflow-x: auto;

    border: 1px solid var(--academy-border);
    border-radius: 14px;
}

.academy-table {
    width: 100%;
    border-collapse: collapse;

    background: var(--academy-surface);
}

.academy-table th {
    padding: 14px 16px;

    color: var(--academy-text-soft);

    background: var(--academy-surface-soft);

    border-bottom: 1px solid var(--academy-border);

    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
}

.academy-table td {
    padding: 16px;

    color: var(--academy-text-soft);

    border-bottom: 1px solid var(--academy-border);

    vertical-align: middle;
}

.academy-table tbody tr:last-child td {
    border-bottom: none;
}

.academy-table tbody tr:hover {
    background: #f8fbff;
}

/* =========================================================
   ÉTAT VIDE
========================================================= */

.academy-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 650px;
    margin: 0 auto;
    padding: 56px 24px;

    text-align: center;
}

.academy-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;
    margin-bottom: 18px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #eff6ff
        );

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

    font-size: 2rem;
}

.academy-empty-state h2 {
    margin: 0;

    color: var(--academy-text);

    font-size: 1.35rem;
    font-weight: 850;
}

.academy-empty-state p {
    max-width: 520px;
    margin: 12px 0 0;

    color: var(--academy-text-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}

.academy-empty-state .academy-btn {
    margin-top: 22px;
}

/* =========================================================
   ALERTES
========================================================= */

.academy-messages {
    display: grid;
    gap: 12px;

    margin-bottom: 22px;
}

.academy-alert {
    padding: 14px 16px;

    color: #1e3a8a;
    background: #dbeafe;

    border: 1px solid #bfdbfe;
    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: 600;
}

.academy-alert-success {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.academy-alert-warning {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.academy-alert-error,
.academy-alert-danger {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

/* =========================================================
   MOBILE OVERLAY
========================================================= */

.academy-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 950;

    visibility: hidden;
    opacity: 0;

    background: rgba(2, 6, 23, 0.6);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.academy-sidebar-overlay.is-visible {
    visibility: visible;
    opacity: 1;
}

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

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

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

@media (max-width: 992px) {
    .academy-sidebar {
        transform: translateX(-100%);
    }

    .academy-sidebar.is-open {
        transform: translateX(0);
    }

    .academy-shell {
        width: 100%;
        margin-left: 0;
    }

    .academy-menu-toggle {
        display: inline-flex;
    }

    .academy-main {
        padding: 26px 22px;
    }

    .academy-topbar {
        padding: 13px 22px;
    }
}

@media (max-width: 720px) {
    .academy-main {
        padding: 22px 16px;
    }

    .academy-topbar {
        padding: 12px 16px;
    }
 
    .academy-user-information {
        display: none;
    }

    .academy-topbar-left span {
        display: none;
    }

    .academy-page-head {
        align-items: stretch;
        flex-direction: column;
    }

    .academy-page-head .academy-btn {
        width: 100%;
    }

    .academy-card-grid,
    .academy-stats-grid {
        grid-template-columns: 1fr;
    }

    .academy-panel {
        padding: 19px;
        border-radius: 15px;
    }

    .academy-table-wrap {
        border: none;
        overflow: visible;
    }

    .academy-table,
    .academy-table tbody,
    .academy-table tr,
    .academy-table td {
        display: block;
        width: 100%;
    }

    .academy-table thead {
        display: none;
    }

    .academy-table tr {
        padding: 16px;
        margin-bottom: 14px;

        background: var(--academy-surface);

        border: 1px solid var(--academy-border);
        border-radius: 14px;

        box-shadow: var(--academy-shadow-soft);
    }

    .academy-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;

        padding: 9px 0;

        border-bottom: 1px solid var(--academy-border);
    }

    .academy-table td:last-child {
        border-bottom: none;
    }

    .academy-table td::before {
        content: attr(data-label);

        color: var(--academy-text-muted);

        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
    }
}


/* =========================================================
   TABLEAU DE BORD ÉLÈVE
========================================================= */

.academy-dashboard-section {
    margin-top: 26px;
}

.academy-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
}

.academy-section-heading h2 {
    margin: 0;

    color: var(--academy-text);

    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.academy-section-heading p {
    margin: 6px 0 0;

    color: var(--academy-text-muted);

    font-size: 0.9rem;
    line-height: 1.6;
}


/* Images des formations */

.academy-course-image {
    position: relative;

    width: 100%;
    height: 190px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #eff6ff
        );
}

.academy-course-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}

.academy-card:hover .academy-course-image img {
    transform: scale(1.04);
}


/* Cartes formations */

.academy-course-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 14px;
}

.academy-course-title {
    margin: 0;

    color: var(--academy-text);

    font-size: 1.15rem;
    font-weight: 850;
    line-height: 1.4;
}

.academy-course-description {
    margin: 10px 0 0;

    color: var(--academy-text-muted);

    font-size: 0.9rem;
    line-height: 1.65;
}

.academy-course-progress {
    margin-top: 22px;
}

.academy-course-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 20px;
}


/* Accès rapides */

.academy-quick-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.academy-quick-card {
    display: flex;
    align-items: center;
    gap: 16px;

    min-height: 105px;
    padding: 19px 20px;

    background: var(--academy-surface);

    border: 1px solid var(--academy-border);
    border-radius: var(--academy-radius);

    box-shadow: var(--academy-shadow-soft);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.academy-quick-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(37, 99, 235, 0.28);

    box-shadow: var(--academy-shadow);
}

.academy-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    min-width: 54px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #eff6ff
        );

    border: 1px solid #bfdbfe;
    border-radius: 16px;

    font-size: 1.35rem;
}

.academy-quick-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

.academy-quick-content strong {
    color: var(--academy-text);

    font-size: 0.98rem;
    font-weight: 800;
}

.academy-quick-content small {
    color: var(--academy-text-muted);

    font-size: 0.82rem;
    line-height: 1.5;
}

.academy-quick-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    min-width: 34px;

    color: var(--academy-primary);

    background: var(--academy-primary-soft);

    border-radius: 10px;

    font-size: 1.1rem;
    font-weight: 800;

    transition:
        transform 0.2s ease;
}

.academy-quick-card:hover .academy-quick-arrow {
    transform: translateX(3px);
}


/* Responsive */

@media (max-width: 900px) {
    .academy-quick-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .academy-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .academy-quick-card {
        padding: 16px;
    }

    .academy-quick-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .academy-quick-arrow {
        display: none;
    }
}


/* =========================================================
   PAGE MES FORMATIONS
========================================================= */

.academy-course-list-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.academy-training-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    min-width: 0;

    background: var(--academy-surface);

    border: 1px solid var(--academy-border);
    border-radius: var(--academy-radius);

    box-shadow: var(--academy-shadow-soft);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.academy-training-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(37, 99, 235, 0.28);

    box-shadow: var(--academy-shadow);
}


/* Image */

.academy-training-card-media {
    position: relative;

    width: 100%;
    height: 225px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #eff6ff
        );
}

.academy-training-card-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}

.academy-training-card:hover
.academy-training-card-media img {
    transform: scale(1.045);
}

.academy-training-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at top right,
            rgba(96, 165, 250, 0.38),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #dbeafe,
            #eff6ff
        );
}

.academy-training-placeholder span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 84px;
    height: 84px;

    background:
        rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 24px;

    font-size: 2.4rem;

    box-shadow:
        0 12px 30px rgba(37, 99, 235, 0.12);
}

.academy-training-card-badges {
    position: absolute;
    top: 16px;
    left: 16px;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* Contenu */

.academy-training-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 24px;
}

.academy-training-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.academy-training-category {
    display: inline-block;

    margin-bottom: 7px;

    color: var(--academy-primary);

    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.academy-training-card-heading h2 {
    margin: 0;

    color: var(--academy-text);

    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.academy-training-description {
    margin: 13px 0 0;

    color: var(--academy-text-muted);

    font-size: 0.91rem;
    line-height: 1.68;
}


/* Informations formation */

.academy-training-meta {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 11px;

    margin-top: 21px;
}

.academy-training-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    padding: 12px;

    background: var(--academy-surface-soft);

    border: 1px solid var(--academy-border);
    border-radius: 12px;
}

.academy-training-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;
    min-width: 35px;

    background: var(--academy-primary-soft);
    border-radius: 10px;

    font-size: 0.95rem;
}

.academy-training-meta-item div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.academy-training-meta-item small {
    overflow: hidden;

    color: var(--academy-text-muted);

    font-size: 0.68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-training-meta-item strong {
    overflow: hidden;

    color: var(--academy-text);

    font-size: 0.82rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Progression */

.academy-training-progress {
    margin-top: 22px;
}


/* Bas de carte */

.academy-training-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding-top: 20px;
    margin-top: auto;
}

.academy-training-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.academy-training-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


/* Responsive */

@media (max-width: 1180px) {
    .academy-course-list-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .academy-training-card-media {
        height: 195px;
    }

    .academy-training-card-content {
        padding: 19px;
    }

    .academy-training-meta {
        grid-template-columns: 1fr;
    }

    .academy-training-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .academy-training-actions,
    .academy-training-actions .academy-btn {
        width: 100%;
    }

    .academy-training-actions .academy-btn {
        justify-content: center;
    }
}

/* =========================================================
   DÉTAIL D'UNE FORMATION
========================================================= */

.student-course-page {
    width: 100%;
}


/* Breadcrumb */

.student-course-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 20px;

    color: var(--academy-text-muted);

    font-size: 0.83rem;
    font-weight: 650;
}

.student-course-breadcrumb a {
    color: var(--academy-primary);
}

.student-course-breadcrumb a:hover {
    text-decoration: underline;
}

.student-course-breadcrumb strong {
    overflow: hidden;

    max-width: 420px;

    color: var(--academy-text-soft);

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   HERO
========================================================= */

.student-course-hero {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 310px;
    gap: 28px;

    overflow: hidden;

    padding: 36px;
    margin-bottom: 28px;

    background:
        radial-gradient(
            circle at top right,
            rgba(96, 165, 250, 0.22),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #071533,
            #0b2454
        );

    border:
        1px solid rgba(96, 165, 250, 0.18);

    border-radius: 24px;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.16);

    color: #ffffff;
}

.student-course-hero::before {
    position: absolute;
    top: -100px;
    right: -80px;

    width: 250px;
    height: 250px;

    background:
        rgba(37, 99, 235, 0.16);

    border-radius: 50%;

    content: "";
}

.student-course-hero-content {
    position: relative;
    z-index: 1;
}

.student-course-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;
    margin-bottom: 15px;

    color: #bfdbfe;

    background:
        rgba(37, 99, 235, 0.22);

    border:
        1px solid rgba(147, 197, 253, 0.2);

    border-radius: 999px;

    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.student-course-hero h1 {
    max-width: 850px;
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(2rem, 4vw, 3.25rem);

    line-height: 1.08;
    letter-spacing: -0.045em;
}

.student-course-description {
    max-width: 780px;
    margin: 17px 0 0;

    color: #cbd5e1;

    font-size: 1rem;
    line-height: 1.75;
}

.student-course-progress-block {
    max-width: 700px;
    margin-top: 27px;
}

.student-course-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 9px;

    color: #cbd5e1;

    font-size: 0.85rem;
}

.student-course-progress-head strong {
    color: #ffffff;
    font-size: 0.95rem;
}

.student-course-progress-track {
    width: 100%;
    height: 11px;
    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.13);

    border-radius: 999px;
}

.student-course-progress-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #60a5fa,
            #93c5fd
        );

    border-radius: inherit;
}

.student-course-progress-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: 8px;

    color: #94a3b8;
    font-size: 0.75rem;
}

.student-course-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: 26px;
}

.student-course-hero
.academy-btn-secondary {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.08);

    border-color:
        rgba(255, 255, 255, 0.16);
}

.student-course-hero
.academy-btn-secondary:hover {
    background:
        rgba(255, 255, 255, 0.14);
}


/* Résumé */

.student-course-summary {
    position: relative;
    z-index: 1;

    padding: 24px;

    background:
        rgba(255, 255, 255, 0.08);

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

    border-radius: 19px;

    backdrop-filter: blur(10px);
}

.student-course-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 17px;

    background:
        rgba(37, 99, 235, 0.28);

    border:
        1px solid rgba(147, 197, 253, 0.2);

    border-radius: 16px;

    font-size: 1.45rem;
}

.student-course-summary h2 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 1.1rem;
    font-weight: 850;
}

.student-course-summary-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.student-course-summary-list > div {
    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 0;
    padding: 12px;

    background:
        rgba(255, 255, 255, 0.065);

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

    border-radius: 12px;
}

.student-course-summary-list > div > span {
    font-size: 1rem;
}

.student-course-summary-list p {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;

    margin: 0;
}

.student-course-summary-list strong {
    color: #ffffff;
    font-size: 0.95rem;
}

.student-course-summary-list small {
    color: #94a3b8;
    font-size: 0.69rem;
}


/* =========================================================
   LAYOUT CONTENU
========================================================= */

.student-course-layout {
    display: grid;
    grid-template-columns:
        285px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}


/* =========================================================
   SOMMAIRE LATÉRAL
========================================================= */

.student-course-outline {
    position: sticky;
    top:
        calc(var(--academy-topbar-height) + 24px);

    max-height:
        calc(
            100vh
            - var(--academy-topbar-height)
            - 48px
        );

    overflow-y: auto;

    background: var(--academy-surface);

    border:
        1px solid var(--academy-border);

    border-radius: var(--academy-radius);

    box-shadow:
        var(--academy-shadow-soft);
}

.student-course-outline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 18px;

    border-bottom:
        1px solid var(--academy-border);
}

.student-course-outline-head span {
    color: var(--academy-text);

    font-size: 0.95rem;
    font-weight: 850;
}

.student-course-outline-head strong {
    color: var(--academy-text-muted);

    font-size: 0.72rem;
    font-weight: 750;
}

.student-course-outline-nav {
    padding: 12px;
}

.student-outline-module {
    margin-bottom: 10px;
}

.student-outline-module:last-child {
    margin-bottom: 0;
}

.student-outline-module-title {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px;

    border-radius: 11px;

    transition:
        background-color 0.18s ease;
}

.student-outline-module-title:hover {
    background:
        var(--academy-surface-soft);
}

.student-outline-module-title > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    min-width: 34px;

    color: var(--academy-primary-dark);

    background:
        var(--academy-primary-soft);

    border-radius: 10px;

    font-size: 0.75rem;
    font-weight: 850;
}

.student-outline-module-title div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.student-outline-module-title strong {
    overflow: hidden;

    color: var(--academy-text);

    font-size: 0.8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-outline-module-title small {
    color: var(--academy-text-muted);
    font-size: 0.68rem;
}

.student-outline-lessons {
    display: grid;
    gap: 3px;

    padding:
        3px 0 5px 24px;
}

.student-outline-lesson {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
    padding: 7px 9px;

    color: var(--academy-text-muted);

    border-radius: 9px;

    font-size: 0.75rem;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.student-outline-lesson:hover {
    color: var(--academy-primary);

    background:
        var(--academy-primary-soft);
}

.student-outline-lesson > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    min-width: 20px;

    background: #e2e8f0;

    border-radius: 50%;

    font-size: 0.62rem;
    font-weight: 850;
}

.student-outline-lesson p {
    overflow: hidden;

    margin: 0;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-outline-lesson.is-completed {
    color: var(--academy-success);
}

.student-outline-lesson.is-completed > span {
    color: #ffffff;
    background: var(--academy-success);
}

.student-outline-empty {
    padding: 18px;

    color: var(--academy-text-muted);

    font-size: 0.8rem;
    text-align: center;
}


/* =========================================================
   MODULES
========================================================= */

.student-course-section-head {
    margin-bottom: 18px;
}

.student-course-section-head h2 {
    margin: 0;

    color: var(--academy-text);

    font-size:
        clamp(1.45rem, 3vw, 2rem);

    letter-spacing: -0.03em;
}

.student-course-section-head p {
    margin: 8px 0 0;

    color: var(--academy-text-muted);
    line-height: 1.65;
}

.student-course-modules {
    min-width: 0;
}

.student-module-card {
    overflow: hidden;

    margin-bottom: 22px;

    background:
        var(--academy-surface);

    border:
        1px solid var(--academy-border);

    border-radius:
        var(--academy-radius);

    box-shadow:
        var(--academy-shadow-soft);

    scroll-margin-top:
        calc(var(--academy-topbar-height) + 24px);
}

.student-module-card:last-child {
    margin-bottom: 0;
}

.student-module-header {
    display: flex;
    align-items: flex-start;
    gap: 17px;

    padding: 23px;
}

.student-module-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;
    min-width: 50px;

    color: var(--academy-primary-dark);

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #eff6ff
        );

    border:
        1px solid #bfdbfe;

    border-radius: 15px;

    font-size: 0.9rem;
    font-weight: 900;
}

.student-module-heading {
    flex: 1;
    min-width: 0;
}

.student-module-heading > span {
    display: inline-block;

    margin-bottom: 4px;

    color: var(--academy-primary);

    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.student-module-heading h2 {
    margin: 0;

    color: var(--academy-text);

    font-size: 1.2rem;
    font-weight: 850;
    line-height: 1.35;
}

.student-module-heading p {
    max-width: 800px;
    margin: 8px 0 0;

    color: var(--academy-text-muted);

    font-size: 0.88rem;
    line-height: 1.65;
}

.student-module-progress {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 3px;

    min-width: 64px;
}

.student-module-progress strong {
    color: var(--academy-text);

    font-size: 1rem;
    font-weight: 850;
}

.student-module-progress span {
    color: var(--academy-text-muted);

    font-size: 0.7rem;
}

.student-module-progress-track {
    width: 100%;
    height: 5px;

    background: #e2e8f0;
}

.student-module-progress-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );
}


/* =========================================================
   LEÇONS
========================================================= */

.student-module-lessons {
    border-top:
        1px solid var(--academy-border);
}

.student-lesson-row {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
    padding: 15px 21px;

    border-bottom:
        1px solid var(--academy-border);

    transition:
        background-color 0.18s ease;
}

.student-lesson-row:last-child {
    border-bottom: none;
}

.student-lesson-row:hover {
    background: #f8fbff;
}

.student-lesson-status {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    min-width: 38px;

    color: var(--academy-primary);

    background:
        var(--academy-primary-soft);

    border-radius: 11px;

    font-size: 0.8rem;
    font-weight: 850;
}

.student-lesson-row.is-completed
.student-lesson-status {
    color: #ffffff;
    background: var(--academy-success);
}

.student-lesson-content {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.student-lesson-number {
    color: var(--academy-primary);

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.student-lesson-content strong {
    overflow: hidden;

    color: var(--academy-text);

    font-size: 0.9rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-lesson-content small {
    color: var(--academy-text-muted);
    font-size: 0.72rem;
}

.student-lesson-state {
    flex-shrink: 0;
}

.student-lesson-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-width: 72px;

    color: var(--academy-primary);

    font-size: 0.78rem;
    font-weight: 800;
    text-align: right;
}


/* État vide du module */

.student-module-empty {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 25px;

    color: var(--academy-text-muted);
}

.student-module-empty > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    min-width: 46px;

    background: var(--academy-surface-soft);

    border:
        1px solid var(--academy-border);

    border-radius: 13px;

    font-size: 1.15rem;
}

.student-module-empty strong {
    display: block;

    color: var(--academy-text);

    font-size: 0.9rem;
}

.student-module-empty p {
    margin: 4px 0 0;
    font-size: 0.78rem;
}


/* =========================================================
   QUIZ DU MODULE
========================================================= */

.student-module-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 18px 21px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #eff6ff
        );

    border-top:
        1px solid var(--academy-border);
}

.student-module-quiz-information {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}

.student-module-quiz-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    min-width: 42px;

    background: var(--academy-primary-soft);

    border-radius: 12px;

    font-size: 1.05rem;
}

.student-module-quiz-information div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.student-module-quiz-information strong {
    color: var(--academy-text);

    font-size: 0.86rem;
}

.student-module-quiz-information small {
    color: var(--academy-text-muted);

    font-size: 0.74rem;
    line-height: 1.5;
}


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

@media (max-width: 1180px) {
    .student-course-hero {
        grid-template-columns: 1fr;
    }

    .student-course-summary {
        max-width: 600px;
    }

    .student-course-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .student-course-layout {
        grid-template-columns: 1fr;
    }

    .student-course-outline {
        position: static;

        max-height: none;
    }
}

@media (max-width: 720px) {
    .student-course-hero {
        padding: 24px 19px;

        border-radius: 19px;
    }

    .student-course-summary {
        padding: 19px;
    }

    .student-course-summary-list {
        grid-template-columns: 1fr 1fr;
    }

    .student-course-hero-actions,
    .student-course-hero-actions
    .academy-btn {
        width: 100%;
    }

    .student-module-header {
        flex-wrap: wrap;

        padding: 19px;
    }

    .student-module-progress {
        align-items: flex-start;

        width: 100%;
        padding-left: 67px;
    }

    .student-lesson-row {
        align-items: flex-start;
        flex-wrap: wrap;

        padding: 15px 17px;
    }

    .student-lesson-content {
        width:
            calc(100% - 52px);
    }

    .student-lesson-state {
        margin-left: 52px;
    }

    .student-lesson-action {
        margin-left: auto;
    }

    .student-module-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .student-module-footer
    .academy-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .student-course-summary-list {
        grid-template-columns: 1fr;
    }

    .student-lesson-state {
        display: none;
    }

    .student-lesson-action {
        margin-left: 52px;
    }
}


/* =========================================================
   DÉTAIL D'UNE LEÇON
========================================================= */

.academy-lesson-page {
    width: 100%;
}


/* En-tête */

.lesson-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;

    padding: 30px;
    margin-bottom: 22px;

    background:
        radial-gradient(
            circle at top right,
            rgba(96, 165, 250, 0.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #071533,
            #0b2454
        );

    border:
        1px solid rgba(96, 165, 250, 0.16);

    border-radius: 23px;

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.15);

    color: #ffffff;
}

.lesson-page-header > div:first-child {
    flex: 1;
    min-width: 0;
}

.academy-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 18px;

    color: #bfdbfe;

    font-size: 0.82rem;
    font-weight: 750;
}

.academy-back-link:hover {
    color: #ffffff;
}

.academy-lesson-type {
    display: table;

    padding: 6px 11px;
    margin-bottom: 12px;

    color: #bfdbfe;

    background:
        rgba(37, 99, 235, 0.22);

    border:
        1px solid rgba(147, 197, 253, 0.19);

    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lesson-page-header h1 {
    max-width: 900px;
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(1.8rem, 4vw, 2.8rem);

    line-height: 1.12;
    letter-spacing: -0.04em;
}

.lesson-page-header p {
    margin: 12px 0 0;

    color: #cbd5e1;

    font-size: 0.94rem;
    line-height: 1.6;
}


/* Progression de l'en-tête */

.lesson-progress-box {
    width: 260px;
    min-width: 260px;
    padding: 20px;

    background:
        rgba(255, 255, 255, 0.08);

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

    border-radius: 17px;

    backdrop-filter: blur(8px);
}

.lesson-progress-box > span {
    display: block;

    margin-bottom: 11px;

    color: #cbd5e1;

    font-size: 0.75rem;
    font-weight: 700;
}

.lesson-progress-box .academy-progress-bar {
    height: 9px;

    background:
        rgba(255, 255, 255, 0.14);
}

.lesson-progress-box strong {
    display: block;

    margin-top: 10px;

    color: #ffffff;

    font-size: 1.15rem;
    font-weight: 900;
}


/* Grille */

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

.lesson-main-content {
    min-width: 0;
}

.lesson-side-panel {
    position: sticky;
    top:
        calc(var(--academy-topbar-height) + 22px);

    display: grid;
    gap: 18px;
}


/* Blocs de contenu */

.lesson-block {
    overflow: hidden;

    padding: 24px;
    margin-bottom: 20px;

    background: var(--academy-surface);

    border:
        1px solid var(--academy-border);

    border-radius: var(--academy-radius);

    box-shadow:
        var(--academy-shadow-soft);
}

.lesson-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 18px;
}

.lesson-block-head span {
    display: block;

    margin-bottom: 4px;

    color: var(--academy-primary);

    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lesson-block-head h2 {
    margin: 0;

    color: var(--academy-text);

    font-size: 1.15rem;
    font-weight: 850;
}

.lesson-description,
.lesson-text-content {
    color: var(--academy-text-soft);

    font-size: 0.95rem;
    line-height: 1.8;
}

.lesson-text-content p:last-child,
.lesson-description p:last-child {
    margin-bottom: 0;
}


/* Vidéos */

.academy-video-player,
.academy-local-video-player {
    overflow: hidden;

    background: #020617;

    border-radius: 15px;
}

.academy-video-player {
    position: relative;

    aspect-ratio: 16 / 9;
}

.academy-video-player iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}

.academy-local-video-player video {
    display: block;

    width: 100%;
    max-height: 680px;

    background: #000000;
}

.video-progress-wrapper {
    padding: 15px 18px;

    background: #0f172a;
}

.video-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #cbd5e1;

    font-size: 0.76rem;
}

.video-progress-info strong {
    color: #ffffff;
}

.video-watch-progress {
    width: 100%;
    height: 7px;
    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.13);

    border-radius: 999px;
}

.video-watch-progress-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

    border-radius: inherit;
}


/* Image, audio et PDF */

.academy-lesson-image {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 14px;
}

.academy-audio-player {
    width: 100%;
}

.academy-pdf-viewer {
    height: min(760px, 78vh);
    overflow: hidden;

    background: #e2e8f0;

    border:
        1px solid var(--academy-border);

    border-radius: 14px;
}

.academy-pdf-viewer iframe {
    width: 100%;
    height: 100%;

    border: 0;
}


/* Ressources */

.lesson-download-link,
.academy-resource-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 13px;

    color: #ffffff;

    background: var(--academy-primary);

    border-radius: 10px;

    font-size: 0.76rem;
    font-weight: 800;
}

.lesson-download-link:hover,
.academy-resource-button:hover {
    background: var(--academy-primary-dark);
}

.academy-resource-button.secondary {
    color: var(--academy-primary);

    background: var(--academy-primary-soft);
}

.academy-resource-list {
    display: grid;
    gap: 12px;
}

.academy-resource-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 17px;

    background: var(--academy-surface-soft);

    border:
        1px solid var(--academy-border);

    border-radius: 13px;
}

.academy-resource-card h3 {
    margin: 4px 0 0;

    color: var(--academy-text);

    font-size: 0.95rem;
}

.resource-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}


/* Panneau latéral */

.lesson-side-card {
    padding: 21px;

    background: var(--academy-surface);

    border:
        1px solid var(--academy-border);

    border-radius: var(--academy-radius);

    box-shadow:
        var(--academy-shadow-soft);
}

.lesson-side-card h2 {
    margin: 0 0 17px;

    color: var(--academy-text);

    font-size: 1rem;
    font-weight: 850;
}

.lesson-big-progress {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 112px;
    height: 112px;

    margin: 3px auto 18px;

    color: var(--academy-primary-dark);

    background:
        conic-gradient(
            var(--academy-primary)
            calc(var(--lesson-progress, 0) * 1%),
            #e2e8f0 0
        );

    border:
        11px solid var(--academy-primary-soft);

    border-radius: 50%;

    font-size: 1.5rem;
    font-weight: 900;
}

.lesson-side-card > p {
    color: var(--academy-text-muted);

    font-size: 0.82rem;
    line-height: 1.6;
}

.academy-complete-button {
    width: 100%;
    padding: 12px 15px;

    color: #ffffff;

    background: var(--academy-success);

    border: 0;
    border-radius: 11px;

    cursor: pointer;

    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
}

.academy-complete-button:hover {
    filter: brightness(0.94);
}

.lesson-info-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;

    padding: 11px 0;

    border-bottom:
        1px solid var(--academy-border);
}

.lesson-info-line:last-child {
    border-bottom: 0;
}

.lesson-info-line span {
    color: var(--academy-text-muted);
    font-size: 0.75rem;
}

.lesson-info-line strong {
    max-width: 165px;

    color: var(--academy-text);

    font-size: 0.77rem;
    text-align: right;
}


/* Sommaire latéral */

.lesson-side-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 14px;
}

.lesson-side-title-row h2 {
    margin: 2px 0 0;
}

.lesson-side-eyebrow {
    color: var(--academy-primary);

    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lesson-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 30px;
    height: 30px;
    padding: 0 8px;

    color: var(--academy-primary-dark);

    background: var(--academy-primary-soft);

    border-radius: 9px;

    font-size: 0.72rem;
    font-weight: 850;
}

.lesson-outline-list {
    display: grid;
    gap: 5px;
}

.lesson-outline-item {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    padding: 10px;

    color: var(--academy-text-muted);

    border-radius: 10px;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.lesson-outline-item:hover {
    color: var(--academy-primary);

    background: var(--academy-primary-soft);
}

.lesson-outline-item.is-active {
    color: var(--academy-primary-dark);

    background: var(--academy-primary-soft);

    box-shadow:
        inset 3px 0 0 var(--academy-primary);
}

.lesson-outline-status {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;
    min-width: 29px;

    color: var(--academy-text-muted);

    background: #e2e8f0;

    border-radius: 9px;

    font-size: 0.67rem;
    font-weight: 850;
}

.lesson-outline-item.is-active
.lesson-outline-status {
    color: #ffffff;
    background: var(--academy-primary);
}

.lesson-outline-item.is-completed
.lesson-outline-status {
    color: #ffffff;
    background: var(--academy-success);
}

.lesson-outline-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.lesson-outline-content small {
    color: inherit;
    font-size: 0.62rem;
}

.lesson-outline-content strong {
    overflow: hidden;

    color: inherit;

    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Progression générale */

.lesson-global-progress {
    padding-top: 17px;
    margin-top: 18px;

    border-top:
        1px solid var(--academy-border);
}

.lesson-global-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 8px;

    color: var(--academy-text-muted);

    font-size: 0.72rem;
}

.lesson-global-progress-head strong {
    color: var(--academy-text);
}

.lesson-global-progress-track {
    width: 100%;
    height: 7px;
    overflow: hidden;

    background: #e2e8f0;

    border-radius: 999px;
}

.lesson-global-progress-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

    border-radius: inherit;
}

.lesson-global-progress small {
    display: block;

    margin-top: 8px;

    color: var(--academy-text-muted);

    font-size: 0.67rem;
}


/* Navigation précédente / suivante */

.lesson-navigation {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 15px;

    margin-top: 24px;
}

.lesson-navigation-side {
    min-width: 0;
}

.lesson-navigation-side.next {
    display: flex;
    justify-content: flex-end;
}

.lesson-navigation-card {
    display: flex;
    align-items: center;
    gap: 13px;

    width: 100%;
    min-width: 0;
    padding: 17px;

    background: var(--academy-surface);

    border:
        1px solid var(--academy-border);

    border-radius: 14px;

    box-shadow:
        var(--academy-shadow-soft);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.lesson-navigation-card:hover {
    transform: translateY(-2px);
    border-color: #bfdbfe;
}

.lesson-navigation-card.next {
    justify-content: flex-end;
    text-align: right;
}

.lesson-navigation-card.quiz {
    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #f8fafc
        );
}

.lesson-navigation-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;
    min-width: 39px;

    color: var(--academy-primary);

    background: var(--academy-primary-soft);

    border-radius: 11px;

    font-weight: 900;
}

.lesson-navigation-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.lesson-navigation-content small {
    color: var(--academy-text-muted);
    font-size: 0.66rem;
}

.lesson-navigation-content strong {
    overflow: hidden;

    color: var(--academy-text);

    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Responsive */

@media (max-width: 1050px) {
    .lesson-content-grid {
        grid-template-columns: 1fr;
    }

    .lesson-side-panel {
        position: static;

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

    .lesson-outline-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .lesson-page-header {
        flex-direction: column;

        padding: 23px 18px;
    }

    .lesson-progress-box {
        width: 100%;
        min-width: 0;
    }

    .lesson-block {
        padding: 18px;
    }

    .lesson-block-head,
    .academy-resource-card {
        align-items: stretch;
        flex-direction: column;
    }

    .resource-actions {
        width: 100%;
    }

    .resource-actions a {
        flex: 1;
    }

    .lesson-side-panel {
        grid-template-columns: 1fr;
    }

    .lesson-navigation {
        grid-template-columns: 1fr;
    }

    .academy-pdf-viewer {
        height: 560px;
    }
}

/* =========================================================
   REPRISE DE FORMATION
========================================================= */

.academy-resume-card {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: center;
    gap: 34px;

    padding: 34px;
    margin-bottom: 28px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(96, 165, 250, 0.34),
            transparent 33%
        ),
        radial-gradient(
            circle at 5% 100%,
            rgba(37, 99, 235, 0.24),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #071633,
            #0b2f74
        );

    border:
        1px solid rgba(147, 197, 253, 0.16);

    border-radius: 26px;

    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.18);
}

.academy-resume-card-main {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.academy-resume-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 14px;

    color: #bfdbfe;

    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.academy-resume-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    color: #ffffff;
    background: #2563eb;

    border-radius: 9px;

    font-size: 0.68rem;
}

.academy-resume-card h2 {
    max-width: 780px;
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(1.65rem, 3vw, 2.35rem);

    line-height: 1.15;
    letter-spacing: -0.035em;
}

.academy-resume-description {
    max-width: 680px;
    margin: 12px 0 22px;

    color: #cbd5e1;

    font-size: 0.94rem;
    line-height: 1.7;
}

.academy-resume-current {
    display: flex;
    max-width: 720px;
    flex-direction: column;
    gap: 4px;

    padding: 17px 19px;

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

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

    border-radius: 15px;
}

.academy-resume-current > span {
    color: #93c5fd;

    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.academy-resume-current strong {
    overflow: hidden;

    color: #ffffff;

    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-resume-current small {
    color: #cbd5e1;

    font-size: 0.75rem;
}

.academy-resume-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: 21px;
}

.academy-resume-button,
.academy-resume-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 46px;
    padding: 0 18px;

    border-radius: 12px;

    font-size: 0.82rem;
    font-weight: 850;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease;
}

.academy-resume-button {
    color: #0f172a;
    background: #ffffff;
}

.academy-resume-button:hover {
    transform: translateY(-2px);
    background: #eff6ff;
}

.academy-resume-secondary {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid rgba(255, 255, 255, 0.13);
}

.academy-resume-secondary:hover {
    background:
        rgba(255, 255, 255, 0.14);
}


/* Progression circulaire */

.academy-resume-progress {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    flex-direction: column;

    text-align: center;
}

.academy-resume-circle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 164px;
    height: 164px;

    background:
        conic-gradient(
            #60a5fa
            calc(var(--resume-progress) * 1%),
            rgba(255, 255, 255, 0.13) 0
        );

    border-radius: 50%;
}

.academy-resume-circle::before {
    position: absolute;

    width: 127px;
    height: 127px;

    background: #0a2555;

    border-radius: 50%;

    content: "";
}

.academy-resume-circle div {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
}

.academy-resume-circle strong {
    color: #ffffff;

    font-size: 1.75rem;
    font-weight: 900;
}

.academy-resume-circle span {
    color: #bfdbfe;

    font-size: 0.67rem;
    font-weight: 750;
}

.academy-resume-progress p {
    max-width: 220px;
    margin: 16px 0 0;

    color: #cbd5e1;

    font-size: 0.75rem;
    line-height: 1.6;
}

.academy-resume-progress p strong {
    color: #ffffff;
}


/* Messages Django */

.academy-messages {
    display: grid;
    gap: 10px;

    margin-bottom: 22px;
}

.academy-message {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 17px;

    color: #1e3a8a;
    background: #eff6ff;

    border: 1px solid #bfdbfe;
    border-radius: 13px;

    font-size: 0.83rem;
    font-weight: 700;
}

.academy-message.success {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.academy-message.error {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.academy-message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;
    min-width: 28px;

    color: currentColor;
    background: rgba(255, 255, 255, 0.7);

    border-radius: 8px;

    font-weight: 900;
}


/* Responsive */

@media (max-width: 900px) {
    .academy-resume-card {
        grid-template-columns: 1fr;
    }

    .academy-resume-progress {
        align-items: flex-start;
        flex-direction: row;
        gap: 18px;

        text-align: left;
    }

    .academy-resume-circle {
        width: 126px;
        height: 126px;
        min-width: 126px;
    }

    .academy-resume-circle::before {
        width: 96px;
        height: 96px;
    }
}

@media (max-width: 600px) {
    .academy-resume-card {
        padding: 24px 18px;
    }

    .academy-resume-progress {
        align-items: center;
        flex-direction: column;

        text-align: center;
    }

    .academy-resume-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .academy-resume-actions a {
        width: 100%;
    }
}


/* =========================================================
   TABLEAU DE BORD ÉLÈVE
========================================================= */

.academy-dashboard-page {
    display: grid;
    gap: 26px;
}


/* Hero */

.academy-dashboard-hero {
    position: relative;
    overflow: hidden;

    padding: 34px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(96, 165, 250, 0.3),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #071633,
            #0b347c
        );

    border:
        1px solid rgba(147, 197, 253, 0.18);

    border-radius: 24px;

    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.15);
}

.academy-dashboard-hero-content {
    position: relative;
    z-index: 1;
}

.academy-dashboard-eyebrow {
    display: block;

    margin-bottom: 12px;

    color: #93c5fd;

    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.academy-dashboard-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.academy-dashboard-hero p {
    max-width: 720px;
    margin: 13px 0 0;

    color: #cbd5e1;

    font-size: 0.96rem;
    line-height: 1.7;
}


/* KPI */

.academy-kpi-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.academy-kpi-card {
    display: flex;
    align-items: center;
    gap: 15px;

    min-width: 0;
    padding: 20px;

    background: var(--academy-surface, #ffffff);

    border:
        1px solid var(--academy-border, #e2e8f0);

    border-radius: 17px;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);
}

.academy-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    min-width: 48px;

    background: #eff6ff;

    border-radius: 14px;

    font-size: 1.25rem;
}

.academy-kpi-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.academy-kpi-content strong {
    color: var(--academy-text, #0f172a);

    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
}

.academy-kpi-content span {
    color: var(--academy-text-muted, #64748b);

    font-size: 0.75rem;
    font-weight: 700;
}


/* Section formations */

.academy-dashboard-section {
    padding: 28px;

    background: var(--academy-surface, #ffffff);

    border:
        1px solid var(--academy-border, #e2e8f0);

    border-radius: 22px;

    box-shadow:
        0 12px 34px rgba(15, 23, 42, 0.06);
}

.academy-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 23px;
}

.academy-section-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: var(--academy-primary, #2563eb);

    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.academy-section-heading h2 {
    margin: 0;

    color: var(--academy-text, #0f172a);

    font-size: 1.45rem;
    letter-spacing: -0.025em;
}

.academy-section-heading p {
    margin: 8px 0 0;

    color: var(--academy-text-muted, #64748b);

    font-size: 0.84rem;
}

.academy-section-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--academy-primary, #2563eb);

    font-size: 0.78rem;
    font-weight: 850;
}


/* Cartes des formations */

.academy-dashboard-formations-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.academy-dashboard-formation-card {
    display: flex;
    min-width: 0;
    flex-direction: column;

    padding: 21px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 17px;
}

.academy-dashboard-formation-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 17px;
}

.academy-dashboard-formation-badge,
.academy-dashboard-status {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 10px;

    border-radius: 999px;

    font-size: 0.65rem;
    font-weight: 850;
}

.academy-dashboard-formation-badge {
    color: #1d4ed8;
    background: #dbeafe;
}

.academy-dashboard-status {
    color: #475569;
    background: #e2e8f0;
}

.academy-dashboard-status.active {
    color: #1d4ed8;
    background: #dbeafe;
}

.academy-dashboard-status.completed {
    color: #166534;
    background: #dcfce7;
}

.academy-dashboard-formation-content h3 {
    margin: 0;

    color: var(--academy-text, #0f172a);

    font-size: 1.04rem;
}

.academy-dashboard-formation-content p {
    margin: 9px 0 0;

    color: var(--academy-text-muted, #64748b);

    font-size: 0.79rem;
    line-height: 1.6;
}


/* Progression des formations */

.academy-dashboard-formation-progress {
    margin-top: 21px;
}

.academy-dashboard-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #64748b;

    font-size: 0.71rem;
}

.academy-dashboard-progress-head strong {
    color: #0f172a;
}

.academy-dashboard-progress-track {
    height: 8px;
    overflow: hidden;

    background: #e2e8f0;

    border-radius: 999px;
}

.academy-dashboard-progress-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

    border-radius: inherit;
}

.academy-dashboard-formation-progress small {
    display: block;

    margin-top: 8px;

    color: #64748b;

    font-size: 0.67rem;
}


/* Boutons */

.academy-dashboard-formation-actions {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: auto;
    padding-top: 21px;
}

.academy-dashboard-primary-button,
.academy-dashboard-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;
    padding: 0 15px;

    border-radius: 11px;

    font-size: 0.75rem;
    font-weight: 850;
}

.academy-dashboard-primary-button {
    color: #ffffff;
    background: var(--academy-primary, #2563eb);
}

.academy-dashboard-primary-button:hover {
    background: var(--academy-primary-dark, #1d4ed8);
}

.academy-dashboard-secondary-button {
    color: #1d4ed8;
    background: #eff6ff;
}


/* État vide */

.academy-dashboard-empty {
    padding: 48px 24px;

    text-align: center;

    background: #f8fafc;

    border: 1px dashed #cbd5e1;
    border-radius: 17px;
}

.academy-dashboard-empty-icon {
    margin-bottom: 13px;

    font-size: 2rem;
}

.academy-dashboard-empty h3 {
    margin: 0;

    color: #0f172a;
}

.academy-dashboard-empty p {
    margin: 8px 0 0;

    color: #64748b;

    font-size: 0.82rem;
}


/* Responsive */

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

@media (max-width: 780px) {
    .academy-dashboard-formations-grid {
        grid-template-columns: 1fr;
    }

    .academy-dashboard-section,
    .academy-dashboard-hero {
        padding: 23px 18px;
    }
}

@media (max-width: 560px) {
    .academy-kpi-grid {
        grid-template-columns: 1fr;
    }

    .academy-section-heading {
        flex-direction: column;
    }

    .academy-dashboard-formation-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .academy-dashboard-formation-actions a {
        width: 100%;
    }
}


/* =========================================================
   PARCOURS ET DÉVERROUILLAGE DES LEÇONS
========================================================= */

.academy-lesson-row {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    min-width: 0;
    padding: 15px 16px;

    color: var(--academy-text);

    background: var(--academy-surface);

    border: 1px solid var(--academy-border);
    border-radius: 13px;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.academy-lesson-row + .academy-lesson-row {
    margin-top: 9px;
}

a.academy-lesson-row:hover {
    transform: translateY(-2px);

    border-color: #bfdbfe;

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08);
}

.academy-lesson-row-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    min-width: 38px;

    color: var(--academy-text-muted);

    background: var(--academy-surface-soft);

    border: 1px solid var(--academy-border);
    border-radius: 11px;

    font-size: 0.75rem;
    font-weight: 900;
}

.academy-lesson-row-content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.academy-lesson-row-meta {
    color: var(--academy-text-muted);

    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.academy-lesson-row-content strong {
    overflow: hidden;

    color: var(--academy-text);

    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-lesson-row-content small {
    color: var(--academy-text-muted);

    font-size: 0.69rem;
    line-height: 1.4;
}

.academy-lesson-row-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    flex-shrink: 0;

    color: var(--academy-primary);

    font-size: 0.72rem;
    font-weight: 850;
}

.academy-lesson-row.is-completed
.academy-lesson-row-status {
    color: #ffffff;
    background: var(--academy-success);
    border-color: var(--academy-success);
}

.academy-lesson-row.is-started
.academy-lesson-row-status {
    color: #ffffff;
    background: var(--academy-primary);
    border-color: var(--academy-primary);
}

.academy-lesson-row.is-locked {
    cursor: not-allowed;
    opacity: 0.68;

    background: #f8fafc;
}

.academy-lesson-row.is-locked
.academy-lesson-row-action {
    color: var(--academy-text-muted);
}


/* Sommaire verrouillé */

.lesson-outline-item.is-locked {
    cursor: not-allowed;
    opacity: 0.58;

    background: transparent;
}

.lesson-outline-item.is-locked:hover {
    color: var(--academy-text-muted);
    background: transparent;
}

.lesson-outline-item.is-locked
.lesson-outline-status {
    background: #e2e8f0;
}


/* Navigation verrouillée */

.lesson-navigation-card.is-locked {
    cursor: not-allowed;
    opacity: 0.68;

    background: #f8fafc;
}

.lesson-navigation-card.is-locked:hover {
    transform: none;
    border-color: var(--academy-border);
}


/* Action principale de la formation */

.formation-primary-action,
.formation-completed-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 47px;
    padding: 0 19px;

    border-radius: 12px;

    font-size: 0.82rem;
    font-weight: 850;
}

.formation-primary-action {
    color: #0f172a;
    background: #ffffff;
}

.formation-primary-action:hover {
    background: #eff6ff;
    transform: translateY(-1px);
}

.formation-completed-action {
    color: #dcfce7;

    background: rgba(22, 163, 74, 0.2);

    border: 1px solid rgba(134, 239, 172, 0.24);
}

@media (max-width: 640px) {
    .academy-lesson-row {
        align-items: flex-start;
    }

    .academy-lesson-row-action {
        display: none;
    }

    .academy-lesson-row-content strong {
        white-space: normal;
    }
}


/* =========================================================
   CONNEXION ÉLÈVE
========================================================= */

.academy-login-body {
    min-height: 100vh;
    margin: 0;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: #f8fafc;
}

.academy-login-page {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(440px, 0.95fr);

    min-height: 100vh;
}


/* Partie visuelle */

.academy-login-visual {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

    padding: 70px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(96, 165, 250, 0.34),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(37, 99, 235, 0.34),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #020617,
            #0b2f74
        );
}

.academy-login-visual-content {
    position: relative;
    z-index: 1;

    max-width: 650px;
}

.academy-login-eyebrow {
    display: inline-flex;

    margin-bottom: 18px;

    color: #93c5fd;

    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.academy-login-visual h1 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(2.4rem, 5vw, 4.5rem);

    line-height: 1.02;
    letter-spacing: -0.055em;
}

.academy-login-visual p {
    max-width: 590px;
    margin: 22px 0 0;

    color: #cbd5e1;

    font-size: 1rem;
    line-height: 1.8;
}

.academy-login-features {
    display: grid;
    gap: 13px;

    margin-top: 38px;
}

.academy-login-features div {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #e2e8f0;

    font-size: 0.86rem;
    font-weight: 700;
}

.academy-login-features span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    color: #ffffff;
    background: #2563eb;

    border-radius: 8px;
}


/* Partie formulaire */

.academy-login-panel {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 48px;

    background: #ffffff;
}

.academy-login-card {
    width: 100%;
    max-width: 470px;
}

.academy-login-card-header {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 45px;
}

.academy-login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1e3a8a
        );

    border-radius: 14px;

    font-size: 0.88rem;
    font-weight: 900;
}

.academy-login-card-header div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.academy-login-card-header strong {
    color: #0f172a;
    font-size: 0.93rem;
}

.academy-login-card-header small {
    color: #64748b;
    font-size: 0.72rem;
}

.academy-login-heading h2 {
    margin: 0;

    color: #0f172a;

    font-size: 2rem;
    letter-spacing: -0.035em;
}

.academy-login-heading p {
    margin: 10px 0 0;

    color: #64748b;

    font-size: 0.86rem;
    line-height: 1.7;
}


/* Formulaire */

.academy-login-form {
    display: grid;
    gap: 19px;

    margin-top: 31px;
}

.academy-login-field {
    display: grid;
    gap: 8px;
}

.academy-login-field label {
    color: #334155;

    font-size: 0.76rem;
    font-weight: 800;
}

.academy-login-field input {
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;

    padding: 0 15px;

    color: #0f172a;
    background: #f8fafc;

    border: 1px solid #cbd5e1;
    border-radius: 12px;

    outline: none;

    font: inherit;
    font-size: 0.86rem;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.academy-login-field input:focus {
    background: #ffffff;

    border-color: #2563eb;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.1);
}

.academy-password-wrapper {
    position: relative;
}

.academy-password-wrapper input {
    padding-right: 52px;
}

.academy-password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 9px;

    cursor: pointer;

    transform: translateY(-50%);
}

.academy-password-toggle:hover {
    background: #e2e8f0;
}

.academy-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 52px;
    padding: 0 18px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    border: 0;
    border-radius: 12px;

    cursor: pointer;

    font: inherit;
    font-size: 0.86rem;
    font-weight: 850;

    box-shadow:
        0 12px 28px rgba(37, 99, 235, 0.2);
}

.academy-login-button:hover {
    filter: brightness(0.96);
}


/* Messages */

.academy-login-messages {
    display: grid;
    gap: 10px;

    margin-top: 22px;
}

.academy-login-message {
    padding: 13px 15px;

    color: #1e3a8a;
    background: #eff6ff;

    border: 1px solid #bfdbfe;
    border-radius: 11px;

    font-size: 0.79rem;
    font-weight: 700;
}

.academy-login-message.error {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.academy-login-message.success {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}


/* Assistance */

.academy-login-help {
    padding-top: 23px;
    margin-top: 25px;

    border-top: 1px solid #e2e8f0;

    text-align: center;
}

.academy-login-help p {
    margin: 0 0 7px;

    color: #64748b;

    font-size: 0.74rem;
    line-height: 1.5;
}

.academy-login-help a {
    color: #2563eb;

    font-size: 0.76rem;
    font-weight: 850;
}


/* Responsive */

@media (max-width: 940px) {
    .academy-login-page {
        grid-template-columns: 1fr;
    }

    .academy-login-visual {
        min-height: auto;
        padding: 55px 30px;
    }

    .academy-login-visual h1 {
        font-size:
            clamp(2rem, 8vw, 3.4rem);
    }

    .academy-login-panel {
        padding: 55px 24px;
    }
}

@media (max-width: 520px) {
    .academy-login-visual {
        padding: 42px 20px;
    }

    .academy-login-features {
        display: none;
    }

    .academy-login-panel {
        padding: 40px 18px;
    }

    .academy-login-card-header {
        margin-bottom: 34px;
    }
}

/* =========================================================
   PIED DE LA BARRE LATÉRALE
========================================================= */

.academy-sidebar {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.academy-sidebar-nav {
    flex: 1;
}

.academy-sidebar-footer {
    padding: 18px;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);
}

.academy-sidebar-user {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 13px;
}

.academy-sidebar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    min-width: 38px;

    color: #ffffff;
    background: #2563eb;

    border-radius: 11px;

    font-size: 0.82rem;
    font-weight: 900;
}

.academy-sidebar-user div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.academy-sidebar-user strong {
    overflow: hidden;

    color: #ffffff;

    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-sidebar-user small {
    color: #94a3b8;

    font-size: 0.65rem;
}

.academy-logout-form {
    width: 100%;
    margin: 0;
}

.academy-logout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    min-height: 42px;
    padding: 0 13px;

    color: #fecaca;
    background: rgba(220, 38, 38, 0.12);

    border:
        1px solid rgba(248, 113, 113, 0.18);

    border-radius: 11px;

    cursor: pointer;

    font: inherit;
    font-size: 0.75rem;
    font-weight: 800;
}

.academy-logout-button:hover {
    color: #ffffff;
    background: rgba(220, 38, 38, 0.28);
}


/* =========================================================
   PAGE QUIZ
========================================================= */

.academy-quiz-page {
    width: min(920px, calc(100% - 40px));
    margin: 36px auto 70px;
}

.academy-quiz-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 22px;

    color: #2563eb;

    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.academy-quiz-back:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.academy-quiz-card {
    padding: 34px;

    background: #ffffff;

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

    box-shadow:
        0 16px 45px rgba(15, 23, 42, 0.08);
}

.academy-quiz-header {
    padding-bottom: 24px;
    margin-bottom: 28px;

    border-bottom: 1px solid #e2e8f0;
}

.academy-quiz-eyebrow {
    display: inline-flex;

    margin-bottom: 9px;

    color: #2563eb;

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.academy-quiz-header h1 {
    margin: 0;

    color: #0f172a;

    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.academy-quiz-header p {
    margin: 13px 0 0;

    color: #64748b;

    font-size: 0.94rem;
    line-height: 1.7;
}

.academy-quiz-form {
    display: grid;
    gap: 25px;
}

.academy-quiz-question {
    padding: 24px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.academy-quiz-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    height: 34px;
    padding: 0 10px;

    margin-bottom: 13px;

    color: #ffffff;
    background: #2563eb;

    border-radius: 10px;

    font-size: 0.76rem;
    font-weight: 900;
}

.academy-quiz-question h2 {
    margin: 0 0 18px;

    color: #0f172a;

    font-size: 1.05rem;
    line-height: 1.5;
}

.academy-quiz-choices {
    display: grid;
    gap: 11px;
}

.academy-quiz-choice {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 15px;

    color: #334155;
    background: #ffffff;

    border: 1px solid #cbd5e1;
    border-radius: 12px;

    cursor: pointer;

    font-size: 0.88rem;
    line-height: 1.5;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.academy-quiz-choice:hover {
    background: #eff6ff;
    border-color: #93c5fd;

    transform: translateY(-1px);
}

.academy-quiz-choice:has(input:checked) {
    color: #1e3a8a;
    background: #eff6ff;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.1);
}

.academy-quiz-choice input {
    width: 18px;
    height: 18px;

    margin: 2px 0 0;

    accent-color: #2563eb;
}

.academy-quiz-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;

    padding-top: 5px;
}

.academy-quiz-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;
    padding: 0 24px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    border: 0;
    border-radius: 12px;

    cursor: pointer;

    font: inherit;
    font-size: 0.84rem;
    font-weight: 850;

    box-shadow:
        0 12px 28px rgba(37, 99, 235, 0.2);
}

.academy-quiz-submit:hover {
    filter: brightness(0.96);
}

.academy-quiz-submit:active {
    transform: translateY(1px);
}

@media (max-width: 700px) {
    .academy-quiz-page {
        width: min(100% - 24px, 920px);
        margin-top: 22px;
    }

    .academy-quiz-card {
        padding: 21px;
        border-radius: 16px;
    }

    .academy-quiz-question {
        padding: 18px;
    }

    .academy-quiz-actions {
        display: grid;
    }

    .academy-quiz-submit {
        width: 100%;
    }
}


/* =========================================================
   BIBLIOTHÈQUE ACADEMY
========================================================= */

.academy-library-filters {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.academy-library-filter-form {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.academy-library-search,
.academy-library-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.academy-library-search label,
.academy-library-filter-field label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}

.academy-library-search input,
.academy-library-filter-field select {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 0.9rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.academy-library-search input:focus,
.academy-library-filter-field select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.academy-library-filter-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.academy-library-results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.academy-library-results-head h2 {
    margin: 0 0 0.2rem;
    color: #0f172a;
    font-size: 1.25rem;
}

.academy-library-results-head p {
    margin: 0;
    color: #64748b;
}

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

.academy-resource-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.academy-resource-card:hover {
    transform: translateY(-3px);
    border-color: #bfdbfe;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.academy-resource-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.15rem 0;
}

.academy-resource-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    background: #eff6ff;
    border-radius: 14px;
}

.academy-resource-type {
    padding: 0.35rem 0.65rem;
    color: #1d4ed8;
    background: #eff6ff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}

.academy-resource-card-content {
    flex: 1;
    padding: 1.1rem 1.15rem;
}

.academy-resource-formation {
    display: block;
    margin-bottom: 0.45rem;
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.academy-resource-card-content h2 {
    margin: 0 0 0.8rem;
    color: #0f172a;
    font-size: 1.08rem;
    line-height: 1.4;
}

.academy-resource-location {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #64748b;
    font-size: 0.85rem;
}

.academy-resource-location strong {
    color: #334155;
}

.academy-resource-preview {
    margin-top: 1rem;
    padding: 0.85rem;
    color: #475569;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.6;
}

.academy-resource-preview p {
    margin: 0;
}

.academy-resource-card-footer {
    display: flex;
    align-items: center;
    padding: 0 1.15rem 1.15rem;
}

.academy-resource-card-footer .academy-btn {
    width: 100%;
    justify-content: center;
}

.academy-resource-full-content {
    padding: 0 1.15rem 1.15rem;
}

.academy-resource-full-content-inner {
    max-height: 350px;
    overflow-y: auto;
    padding: 1rem;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.academy-resource-full-content h3 {
    margin: 0 0 0.75rem;
    color: #0f172a;
}

.academy-resource-text {
    line-height: 1.7;
}

.academy-resource-text p:first-child {
    margin-top: 0;
}

.academy-resource-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    .academy-library-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .academy-library-filter-actions {
        width: 100%;
    }

    .academy-library-filter-actions .academy-btn {
        flex: 1;
        justify-content: center;
    }
}


/* ===========================
   EXAMENS BLANCS
===========================*/

.academy-exams-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
gap:28px;
margin-top:30px;
}

.academy-exam-card{
background:#fff;
border-radius:20px;
padding:28px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
gap:22px;
transition:.3s;
}

.academy-exam-card:hover{
transform:translateY(-6px);
}

.academy-exam-category{
display:inline-block;
background:#eef5ff;
color:#2563eb;
padding:6px 14px;
border-radius:30px;
font-size:.8rem;
font-weight:700;
margin-bottom:12px;
}

.academy-exam-top h2{
margin-bottom:12px;
font-size:1.5rem;
}

.academy-exam-top p{
color:#64748b;
line-height:1.6;
}

.academy-exam-meta{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}

.academy-meta-box{
background:#f8fafc;
border-radius:15px;
padding:16px;
text-align:center;
}

.academy-meta-icon{
font-size:28px;
margin-bottom:10px;
}

.academy-meta-box strong{
display:block;
font-size:1.3rem;
}

.academy-meta-box small{
color:#64748b;
}

.academy-exam-footer{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:auto;
}

.academy-exam-score{
display:flex;
flex-direction:column;
gap:8px;
}

/* =========================================================
   DÉTAIL EXAMEN BLANC
========================================================= */

.academy-exam-detail-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.academy-exam-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.8fr);
    gap: 1.5rem;
    align-items: start;
}

.academy-exam-main-card,
.academy-exam-side-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.academy-exam-main-card {
    padding: 1.7rem;
}

.academy-exam-side-card {
    position: sticky;
    top: 1.5rem;
    padding: 1.5rem;
}

.academy-exam-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.academy-exam-detail-label {
    display: block;
    margin-bottom: 0.4rem;
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.academy-exam-detail-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
}

.academy-exam-detail-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.academy-exam-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.academy-exam-detail-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    background: #eff6ff;
    border-radius: 12px;
}

.academy-exam-detail-meta-item strong {
    display: block;
    color: #0f172a;
    font-size: 1.15rem;
}

.academy-exam-detail-meta-item small {
    display: block;
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.78rem;
}

.academy-exam-instructions {
    padding: 1.25rem;
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    border-radius: 0 14px 14px 0;
}

.academy-exam-instructions h3 {
    margin: 0 0 0.75rem;
    color: #0f172a;
}

.academy-exam-instructions ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #475569;
    line-height: 1.7;
}

.academy-exam-detail-action {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.academy-exam-start-form {
    margin: 0;
}

.academy-btn-large {
    min-height: 52px;
    padding: 0.9rem 1.3rem;
    justify-content: center;
    font-size: 0.95rem;
}

.academy-exam-side-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    background: #eff6ff;
    border-radius: 16px;
}

.academy-exam-side-card h2 {
    margin: 0 0 1.2rem;
    color: #0f172a;
    font-size: 1.2rem;
}

.academy-exam-side-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid #e2e8f0;
}

.academy-exam-side-stat span:first-child {
    color: #64748b;
    font-size: 0.86rem;
}

.academy-exam-side-stat strong {
    color: #0f172a;
    font-size: 1.05rem;
}

.academy-exam-side-empty {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}

.academy-exam-history-panel {
    padding: 1.5rem;
}

.academy-section-head {
    margin-bottom: 1.25rem;
}

.academy-section-head h2 {
    margin: 0.25rem 0 0.35rem;
    color: #0f172a;
}

.academy-section-head p {
    margin: 0;
    color: #64748b;
}

.academy-exam-history-table {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.academy-exam-history-head,
.academy-exam-history-row {
    display: grid;
    grid-template-columns: 1.2fr 1.4fr 0.8fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
}

.academy-exam-history-head {
    color: #475569;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.academy-exam-history-row {
    border-top: 1px solid #e2e8f0;
}

.academy-exam-history-row:first-of-type {
    border-top: none;
}

.academy-exam-history-date {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.academy-exam-history-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #f1f5f9;
    border-radius: 10px;
}

.academy-exam-history-date strong,
.academy-exam-history-date small {
    display: block;
}

.academy-exam-history-date small {
    margin-top: 0.15rem;
    color: #64748b;
}

.academy-exam-history-score {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.academy-exam-history-score .academy-progress {
    max-width: 180px;
}

.academy-btn-small {
    min-height: 38px;
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
}

.academy-badge-danger {
    color: #991b1b;
    background: #fee2e2;
}

.academy-alert-warning {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.academy-alert-danger {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.academy-alert-warning p,
.academy-alert-danger p {
    margin: 0.35rem 0 0;
}

@media (max-width: 1100px) {
    .academy-exam-detail-grid {
        grid-template-columns: 1fr;
    }

    .academy-exam-side-card {
        position: static;
    }

    .academy-exam-detail-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .academy-exam-main-card,
    .academy-exam-side-card,
    .academy-exam-history-panel {
        padding: 1rem;
    }

    .academy-exam-detail-head {
        flex-direction: column;
    }

    .academy-exam-detail-meta {
        grid-template-columns: 1fr;
    }

    .academy-exam-history-head {
        display: none;
    }

    .academy-exam-history-row {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .academy-exam-history-score .academy-progress {
        max-width: none;
    }

    .academy-exam-history-row .academy-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   PASSAGE D'UN EXAMEN
========================================================= */

.academy-exam-runner-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.academy-exam-runner-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.6rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.academy-exam-runner-heading {
    min-width: 0;
}

.academy-exam-runner-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.75rem;
    color: #1d4ed8;
    background: #eff6ff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.academy-exam-runner-heading h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.2;
}

.academy-exam-runner-heading p {
    max-width: 650px;
    margin: 0.7rem 0 0;
    color: #64748b;
    line-height: 1.6;
}

.academy-exam-runner-status {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    flex: 0 0 210px;
}

.academy-exam-timer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    color: #1e3a8a;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
}

.academy-exam-timer-card > span {
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.academy-exam-timer {
    font-size: 2rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.academy-exam-timer.danger {
    color: #b45309;
}

.academy-exam-timer.critical {
    color: #b91c1c;
    animation: academyTimerPulse 1s infinite;
}

@keyframes academyTimerPulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

.exam-save-status {
    padding: 0.7rem 0.8rem;
    text-align: center;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

.exam-save-status.saved {
    color: #166534;
    background: #dcfce7;
}

.exam-save-status.saving {
    color: #92400e;
    background: #fef3c7;
}

.exam-save-status.error {
    color: #991b1b;
    background: #fee2e2;
}

.academy-exam-runner-toolbar {
    position: sticky;
    top: 0;
    z-index: 15;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(8px);
}

.academy-exam-runner-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.65rem;
    color: #475569;
    font-size: 0.85rem;
}

.academy-exam-runner-progress-info strong {
    color: #0f172a;
}

.academy-exam-progress-track {
    height: 9px;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 999px;
}

.academy-exam-progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(
        90deg,
        #2563eb,
        #0ea5e9
    );
    border-radius: inherit;
    transition: width 0.3s ease;
}

.academy-exam-form {
    margin: 0;
}

.academy-exam-questions-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.academy-exam-question {
    padding: 1.6rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #cbd5e1;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.academy-exam-question.answered {
    border-left-color: #22c55e;
}

.academy-exam-question:hover {
    border-color: #bfdbfe;
    border-left-color: #2563eb;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.academy-exam-question-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.academy-exam-question-number {
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.academy-exam-question-state {
    padding: 0.35rem 0.65rem;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.academy-exam-question-state.answered {
    color: #166534;
    background: #dcfce7;
}

.academy-exam-question h2 {
    margin: 0 0 1.25rem;
    color: #0f172a;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.5;
}

.academy-exam-answer-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.academy-exam-answer-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 56px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.academy-exam-answer-option:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    transform: translateX(3px);
}

.academy-exam-answer-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.academy-exam-answer-control {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    color: transparent;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 900;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.academy-exam-answer-option input[type="radio"]
    + .academy-exam-answer-control {
    border-radius: 50%;
}

.academy-exam-answer-option input:checked
    + .academy-exam-answer-control {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
}

.academy-exam-answer-option:has(input:checked) {
    color: #1e3a8a;
    background: #eff6ff;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.academy-exam-answer-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.5;
}

.academy-exam-submit-zone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding: 1.3rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 16px;
}

.academy-exam-submit-info {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.academy-exam-submit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: #ffedd5;
    border-radius: 12px;
}

.academy-exam-submit-info strong {
    display: block;
    color: #9a3412;
}

.academy-exam-submit-info p {
    margin: 0.25rem 0 0;
    color: #9a3412;
    font-size: 0.85rem;
    line-height: 1.5;
}

.academy-exam-submit-btn {
    flex: 0 0 auto;
    min-height: 50px;
    padding-inline: 1.25rem;
}

/* Fenêtre de confirmation */

.academy-modal-open {
    overflow: hidden;
}

.academy-exam-modal[hidden] {
    display: none;
}

.academy-exam-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.academy-exam-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
}

.academy-exam-modal-dialog {
    position: relative;
    width: min(100%, 480px);
    padding: 1.8rem;
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.3);
}

.academy-exam-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    font-size: 1.8rem;
    background: #eff6ff;
    border-radius: 18px;
}

.academy-exam-modal-dialog h2 {
    margin: 0 0 0.75rem;
    color: #0f172a;
}

.academy-exam-modal-dialog p {
    color: #64748b;
    line-height: 1.6;
}

.academy-exam-modal-warning {
    padding: 0.8rem;
    color: #92400e !important;
    background: #fef3c7;
    border-radius: 10px;
}

.academy-exam-modal-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

@media (max-width: 800px) {
    .academy-exam-runner-header {
        flex-direction: column;
    }

    .academy-exam-runner-status {
        width: 100%;
        flex-basis: auto;
    }

    .academy-exam-timer-card {
        flex-direction: row;
        justify-content: space-between;
    }

    .academy-exam-submit-zone {
        flex-direction: column;
        align-items: stretch;
    }

    .academy-exam-submit-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .academy-exam-runner-page {
        gap: 1rem;
    }

    .academy-exam-runner-header,
    .academy-exam-question {
        padding: 1rem;
    }

    .academy-exam-question-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .academy-exam-answer-option {
        align-items: flex-start;
    }

    .academy-exam-modal-actions {
        flex-direction: column;
    }

    .academy-exam-modal-actions .academy-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   MES RÉSULTATS
========================================================= */

.academy-results-page,
.academy-exam-result-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.academy-result-summary-card,
.academy-result-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.academy-result-summary-icon,
.academy-result-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    background: #eff6ff;
    border-radius: 14px;
}

.academy-result-summary-card small,
.academy-result-stat-card small {
    display: block;
    margin-bottom: 0.25rem;
    color: #64748b;
    font-size: 0.8rem;
}

.academy-result-summary-card strong,
.academy-result-stat-card strong {
    color: #0f172a;
    font-size: 1.15rem;
}

.academy-results-panel {
    padding: 1.5rem;
}

.academy-results-panel-head {
    margin-bottom: 1.25rem;
}

.academy-results-panel-head h2 {
    margin: 0.2rem 0 0.35rem;
    color: #0f172a;
}

.academy-results-panel-head p {
    margin: 0;
    color: #64748b;
}

.academy-result-exam-name {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.academy-result-exam-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: #eff6ff;
    border-radius: 11px;
}

.academy-result-exam-name strong,
.academy-result-exam-name small {
    display: block;
}

.academy-result-exam-name small {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.74rem;
}

.academy-result-formation {
    color: #334155;
    line-height: 1.5;
}

.academy-result-score-cell {
    min-width: 120px;
}

.academy-result-score-cell strong {
    display: block;
    margin-bottom: 0.45rem;
    color: #0f172a;
}

.academy-result-score-cell .academy-progress {
    max-width: 130px;
}

.academy-status {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.7rem;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.academy-badge-danger {
    color: #991b1b;
    background: #fee2e2;
}

/* =========================================================
   RÉSULTAT D'UN EXAMEN
========================================================= */

.academy-result-hero {
    padding: 1.6rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
}

.academy-result-hero-success {
    border-top: 5px solid #22c55e;
}

.academy-result-hero-danger {
    border-top: 5px solid #ef4444;
}

.academy-result-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.academy-result-hero-status {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.academy-result-large-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    font-size: 2rem;
    background: #f8fafc;
    border-radius: 20px;
}

.academy-result-hero-status h2 {
    margin: 0.6rem 0 0.35rem;
    color: #0f172a;
    font-size: 1.5rem;
}

.academy-result-hero-status p {
    max-width: 650px;
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}

.academy-result-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.academy-result-badge.success {
    color: #166534;
    background: #dcfce7;
}

.academy-result-badge.danger {
    color: #991b1b;
    background: #fee2e2;
}

.academy-result-score-circle {
    display: flex;
    flex: 0 0 145px;
    width: 145px;
    height: 145px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 10px solid #dbeafe;
    border-radius: 50%;
}

.academy-result-score-circle strong {
    color: #0f172a;
    font-size: 2rem;
    font-weight: 900;
}

.academy-result-score-circle span {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.75rem;
}

.academy-result-score-progress {
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    border-top: 1px solid #e2e8f0;
}

.academy-result-required-marker {
    margin-top: 0.6rem;
    color: #64748b;
    font-size: 0.82rem;
    text-align: right;
}

.academy-result-required-marker strong {
    color: #0f172a;
}

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

.academy-result-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.academy-correction-panel {
    padding: 1.5rem;
}

.academy-correction-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.academy-correction-card {
    padding: 1.3rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #cbd5e1;
    border-radius: 16px;
}

.academy-correction-card-success {
    border-left-color: #22c55e;
}

.academy-correction-card-danger {
    border-left-color: #ef4444;
}

.academy-correction-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.academy-correction-number {
    display: block;
    margin-bottom: 0.35rem;
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.academy-correction-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.1rem;
    line-height: 1.5;
}

.academy-correction-answer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.academy-correction-answer-box {
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
}

.academy-correction-answer-label {
    display: block;
    margin-bottom: 0.75rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.academy-correction-answer-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.academy-correction-answer-item {
    display: inline-flex;
    padding: 0.5rem 0.7rem;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 700;
}

.academy-correction-answer-item.correct {
    color: #166534;
    background: #dcfce7;
}

.academy-correction-answer-item.incorrect {
    color: #991b1b;
    background: #fee2e2;
}

.academy-correction-no-answer {
    color: #64748b;
    font-style: italic;
}

.academy-question-explanation {
    margin-top: 1rem;
    padding: 1rem;
    color: #1e3a8a;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    line-height: 1.7;
}

.academy-question-explanation-title {
    margin-bottom: 0.5rem;
    font-weight: 800;
}

.academy-question-explanation p:first-child {
    margin-top: 0;
}

.academy-question-explanation p:last-child {
    margin-bottom: 0;
}

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

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

@media (max-width: 760px) {
    .academy-result-hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .academy-result-score-circle {
        align-self: center;
    }

    .academy-correction-answer-grid,
    .academy-result-stats-grid,
    .academy-results-summary {
        grid-template-columns: 1fr;
    }

    .academy-correction-head {
        flex-direction: column;
    }

    .academy-result-actions .academy-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   MES CERTIFICATS
========================================================= */

.academy-certificates-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.academy-certificate-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.academy-certificate-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    background: #fff7ed;
    border-radius: 14px;
}

.academy-certificate-summary-card small {
    display: block;
    margin-bottom: 0.25rem;
    color: #64748b;
    font-size: 0.8rem;
}

.academy-certificate-summary-card strong {
    color: #0f172a;
    font-size: 1.15rem;
}

.academy-certificates-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(340px, 1fr)
    );
    gap: 1.5rem;
}

.academy-certificate-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 5px solid #d97706;
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.academy-certificate-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}

.academy-certificate-card-decoration {
    position: absolute;
    top: 28px;
    right: -45px;
    width: 180px;
    padding: 0.4rem;
    text-align: center;
    color: #92400e;
    background: #fef3c7;
    transform: rotate(35deg);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.academy-certificate-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem 1.3rem 0;
}

.academy-certificate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    font-size: 1.7rem;
    background: #fff7ed;
    border-radius: 16px;
}

.academy-certificate-card-content {
    flex: 1;
    padding: 1.3rem;
}

.academy-certificate-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #b45309;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.academy-certificate-card-content h2 {
    max-width: 80%;
    margin: 0 0 1rem;
    color: #0f172a;
    font-size: 1.35rem;
    line-height: 1.4;
}

.academy-certificate-student {
    margin: 0 0 1.2rem;
    color: #64748b;
    line-height: 1.6;
}

.academy-certificate-student strong {
    color: #0f172a;
}

.academy-certificate-information {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.academy-certificate-information > div {
    padding: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.academy-certificate-information small,
.academy-certificate-number small {
    display: block;
    margin-bottom: 0.25rem;
    color: #64748b;
    font-size: 0.72rem;
}

.academy-certificate-information strong {
    color: #0f172a;
    font-size: 0.95rem;
}

.academy-certificate-number {
    padding: 0.9rem;
    background: #fff7ed;
    border: 1px dashed #f59e0b;
    border-radius: 12px;
}

.academy-certificate-number strong {
    display: block;
    overflow-wrap: anywhere;
    color: #92400e;
    font-family: monospace;
    font-size: 0.9rem;
}

.academy-certificate-card-footer {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0 1.3rem 1.3rem;
}

.academy-certificate-card-footer .academy-btn {
    flex: 1;
    justify-content: center;
}

.academy-certificate-pdf-waiting {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 0.85rem;
    color: #92400e;
    background: #fef3c7;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 900px) {
    .academy-certificates-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .academy-certificates-grid {
        grid-template-columns: 1fr;
    }

    .academy-certificate-information {
        grid-template-columns: 1fr;
    }

    .academy-certificate-card-content h2 {
        max-width: 100%;
    }

    .academy-certificate-card-decoration {
        display: none;
    }

    .academy-certificate-card-footer {
        flex-direction: column;
    }

    .academy-certificate-card-footer .academy-btn {
        width: 100%;
    }
}

/* ==========================================================
   VERIFICATION PUBLIQUE CERTIFICAT
========================================================== */

.certificate-verification-page {
    min-height: 75vh;
    padding: 4rem 1.25rem;
    background:
        radial-gradient(
            circle at top,
            #eff6ff 0,
            #f8fafc 45%,
            #ffffff 100%
        );
}

.certificate-verification-container {
    width: min(820px, 100%);
    margin: 0 auto;
}

.certificate-verification-brand {
    margin-bottom: 2rem;
    text-align: center;
}

.certificate-verification-eyebrow {
    display: inline-flex;
    margin-bottom: 0.8rem;
    padding: 0.45rem 0.8rem;
    color: #1e3a8a;
    background: #dbeafe;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.certificate-verification-brand h1 {
    margin: 0 0 0.7rem;
    color: #0f172a;
    font-size: clamp(2rem, 5vw, 3rem);
}

.certificate-verification-brand p {
    max-width: 620px;
    margin: 0 auto;
    color: #64748b;
    line-height: 1.7;
}

.certificate-verification-card {
    padding: 2rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
    text-align: center;
}

.certificate-verification-card.is-valid {
    border-top: 6px solid #16a34a;
}

.certificate-verification-card.is-invalid {
    border-top: 6px solid #dc2626;
}

.certificate-verification-card.is-revoked {
    border-top: 6px solid #d97706;
}

.certificate-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    font-size: 2.2rem;
    font-weight: 900;
}

.is-valid .certificate-status-icon {
    color: #15803d;
    background: #dcfce7;
}

.is-invalid .certificate-status-icon {
    color: #b91c1c;
    background: #fee2e2;
}

.is-revoked .certificate-status-icon {
    color: #b45309;
    background: #fef3c7;
}

.certificate-status-label {
    display: inline-flex;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.is-valid .certificate-status-label {
    color: #15803d;
}

.is-invalid .certificate-status-label {
    color: #b91c1c;
}

.is-revoked .certificate-status-label {
    color: #b45309;
}

.certificate-verification-card h2 {
    margin: 0 0 0.8rem;
    color: #0f172a;
    font-size: 1.65rem;
}

.certificate-status-description,
.certificate-verification-card > p {
    max-width: 620px;
    margin: 0 auto 1.7rem;
    color: #64748b;
    line-height: 1.7;
}

.certificate-verification-details {
    margin-top: 2rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-align: left;
}

.certificate-detail-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #e2e8f0;
}

.certificate-detail-row:last-child {
    border-bottom: 0;
}

.certificate-detail-row:nth-child(odd) {
    background: #f8fafc;
}

.certificate-detail-row span {
    color: #64748b;
    font-size: 0.85rem;
}

.certificate-detail-row strong {
    color: #0f172a;
    overflow-wrap: anywhere;
}

.certificate-number {
    font-family: monospace;
    color: #1e3a8a !important;
}

.certificate-valid-text {
    color: #15803d !important;
}

.certificate-verification-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    text-align: left;
}

.certificate-verification-footer div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.certificate-verification-footer strong {
    color: #0f172a;
}

.certificate-verification-footer span {
    color: #64748b;
    font-size: 0.8rem;
}

.certificate-verification-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    color: #ffffff;
    background: #1e3a8a;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
}

.certificate-verification-button:hover {
    background: #172554;
}

.certificate-invalid-number {
    display: inline-flex;
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    color: #334155;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    font-family: monospace;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.certificate-security-message {
    margin-top: 1rem !important;
    font-size: 0.85rem;
}

.certificate-security-notice {
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    color: #475569;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-align: center;
}

.certificate-security-notice strong {
    display: block;
    margin-bottom: 0.3rem;
    color: #0f172a;
}

.certificate-security-notice p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
}

@media (max-width: 650px) {

    .certificate-verification-page {
        padding: 2rem 0.8rem;
    }

    .certificate-verification-card {
        padding: 1.3rem;
    }

    .certificate-detail-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .certificate-verification-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .certificate-verification-button {
        width: 100%;
    }
}

/* =========================================================
   MES ATTESTATIONS
========================================================= */

.academy-attestations-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.academy-attestation-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.academy-attestation-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    background: #eff6ff;
    border-radius: 14px;
    font-size: 1.4rem;
}

.academy-attestation-summary-card small {
    display: block;
    margin-bottom: 0.2rem;
    color: #64748b;
    font-size: 0.8rem;
}

.academy-attestation-summary-card strong {
    color: #0f172a;
    font-size: 1.1rem;
}

.academy-attestations-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(340px, 1fr)
    );
    gap: 1.5rem;
}

.academy-attestation-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 5px solid #173b6c;
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.academy-attestation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}

.academy-attestation-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.3rem 0;
}

.academy-attestation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: #eff6ff;
    border-radius: 16px;
    font-size: 1.7rem;
}

.academy-attestation-card-content {
    flex: 1;
    padding: 1.3rem;
}

.academy-attestation-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #173b6c;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.academy-attestation-card-content h2 {
    margin: 0 0 1rem;
    color: #0f172a;
    font-size: 1.35rem;
    line-height: 1.4;
}

.academy-attestation-student {
    margin: 0 0 1.2rem;
    color: #64748b;
    line-height: 1.6;
}

.academy-attestation-student strong {
    color: #0f172a;
}

.academy-attestation-information {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.academy-attestation-information > div {
    padding: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.academy-attestation-information small,
.academy-attestation-number small {
    display: block;
    margin-bottom: 0.25rem;
    color: #64748b;
    font-size: 0.72rem;
}

.academy-attestation-information strong {
    color: #0f172a;
}

.academy-attestation-number {
    padding: 0.9rem;
    background: #eff6ff;
    border: 1px dashed #93c5fd;
    border-radius: 12px;
}

.academy-attestation-number strong {
    display: block;
    color: #173b6c;
    font-family: monospace;
    overflow-wrap: anywhere;
}

.academy-attestation-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 0 1.3rem 1.3rem;
}

.academy-attestation-card-footer .academy-btn {
    flex: 1;
    justify-content: center;
}

.academy-attestation-pdf-waiting {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem;
    color: #475569;
    background: #f1f5f9;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .academy-attestations-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .academy-attestations-grid {
        grid-template-columns: 1fr;
    }

    .academy-attestation-information {
        grid-template-columns: 1fr;
    }

    .academy-attestation-card-footer {
        flex-direction: column;
    }

    .academy-attestation-card-footer .academy-btn {
        width: 100%;
    }
}

/* =========================================================
   PROFIL ELEVE
========================================================= */

.academy-profile-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.academy-profile-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, .85fr);
    gap: 1.5rem;
    align-items: start;
}

.academy-profile-card {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow:
        0 12px 35px
        rgba(15, 23, 42, .06);
}

.academy-profile-card-head {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #e2e8f0;
}

.academy-profile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    background: #eff6ff;
    border-radius: 15px;
    font-size: 1.5rem;
}

.academy-profile-card-head h2 {
    margin: 0 0 .3rem;
    color: #0f172a;
    font-size: 1.2rem;
}

.academy-profile-card-head p {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.5;
}

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

.academy-form-group {
    margin-bottom: 1rem;
}

.academy-form-group-full {
    grid-column: 1 / -1;
}

.academy-form-group label {
    display: block;
    margin-bottom: .45rem;
    color: #334155;
    font-size: .82rem;
    font-weight: 800;
}

.academy-form-control {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: .75rem .9rem;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    outline: none;
    font: inherit;
}

.academy-form-control:focus {
    border-color: #173b6c;
    box-shadow:
        0 0 0 3px
        rgba(23, 59, 108, .1);
}

.academy-form-error {
    display: block;
    margin-top: .35rem;
    color: #b91c1c;
    font-size: .78rem;
}

.academy-form-error-box {
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
}

.academy-account-info {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin: .4rem 0 1.3rem;
}

.academy-account-info > div {
    padding: .85rem;
    background: #f8fafc;
    border-radius: 10px;
}

.academy-account-info span {
    display: block;
    margin-bottom: .25rem;
    color: #64748b;
    font-size: .72rem;
}

.academy-account-info strong {
    color: #0f172a;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .academy-profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .academy-form-grid,
    .academy-account-info {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   STATISTIQUES DASHBOARD
========================================================= */

.academy-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    );
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.academy-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, .05);
}

.academy-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    background: #eff6ff;
    border-radius: 14px;
    font-size: 1.4rem;
}

.academy-stat-card span {
    display: block;
    margin-bottom: .2rem;
    color: #64748b;
    font-size: .78rem;
}

.academy-stat-card strong {
    color: #0f172a;
    font-size: 1.3rem;
}

.academy-global-progress {
    margin-bottom: 1.5rem;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
}

.academy-global-progress-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.academy-global-progress-head span {
    display: block;
    margin-bottom: .2rem;
    color: #64748b;
    font-size: .8rem;
}

.academy-global-progress-head strong {
    color: #173b6c;
    font-size: 1.4rem;
}

.academy-global-progress-head small {
    color: #64748b;
}

.academy-global-progress-track {
    width: 100%;
    height: 12px;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 999px;
}

.academy-global-progress-bar {
    height: 100%;
    background: #173b6c;
    border-radius: inherit;
    transition: width .35s ease;
}

.academy-performance-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.academy-performance-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    background: #dbeafe;
    border-radius: 14px;
    font-size: 1.5rem;
}

.academy-performance-card span,
.academy-performance-card small {
    display: block;
    color: #64748b;
}

.academy-performance-card strong {
    display: block;
    margin: .2rem 0;
    color: #0f172a;
    font-size: 1.3rem;
}

@media (max-width: 1000px) {
    .academy-dashboard-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .academy-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .academy-global-progress-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   ACADEMY - RESPONSIVE GLOBAL
========================================================= */

.academy-mobile-menu-button,
.academy-sidebar-overlay {
    display: none;
}

@media (max-width: 900px) {

    body.academy-menu-open {
        overflow: hidden;
    }

    .academy-mobile-menu-button {
        position: sticky;
        top: 0;
        z-index: 1100;

        display: inline-flex;
        align-items: center;
        gap: .5rem;

        min-height: 44px;
        margin-bottom: 1rem;
        padding: .65rem 1rem;

        color: #fff;
        background: #173b6c;

        border: 0;
        border-radius: 10px;

        font-weight: 800;
        cursor: pointer;
    }

    .academy-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1200;

        width: min(310px, 86vw);
        height: 100vh;

        overflow-y: auto;

        transform: translateX(-105%);
        transition: transform .25s ease;

        box-shadow:
            15px 0 40px
            rgba(15, 23, 42, .2);
    }

    .academy-sidebar.is-open {
        transform: translateX(0);
    }

    .academy-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 1150;

        background:
            rgba(15, 23, 42, .55);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .2s ease,
            visibility .2s ease;
    }

    .academy-sidebar-overlay.is-visible {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .academy-main,
    .academy-content,
    .academy-dashboard-page {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 700px) {

    .academy-dashboard-hero {
        padding: 1.4rem;
        border-radius: 16px;
    }

    .academy-dashboard-hero h1 {
        font-size: 1.7rem;
    }

    .academy-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .academy-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .academy-resume-card {
        grid-template-columns: 1fr;
    }

    .academy-resume-progress {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
    }

    .academy-dashboard-formations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .academy-kpi-grid {
        grid-template-columns: 1fr;
    }

    .academy-dashboard-hero {
        padding: 1.1rem;
    }

    .academy-resume-actions,
    .academy-dashboard-formation-actions {
        flex-direction: column;
    }

    .academy-resume-button,
    .academy-resume-secondary,
    .academy-dashboard-primary-button,
    .academy-dashboard-secondary-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {

    .academy-certificate-card,
    .academy-attestation-card,
    .academy-profile-card {
        border-radius: 14px;
    }

    .academy-certificate-card-content,
    .academy-attestation-card-content {
        padding: 1rem;
    }

    .academy-certificate-card-head,
    .academy-attestation-card-head {
        padding: 1rem 1rem 0;
    }

    .academy-certificate-card-footer,
    .academy-attestation-card-footer {
        padding: 0 1rem 1rem;
    }
}


.academy-satisfaction-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 34px 20px 60px;
}

.academy-satisfaction-head {
    margin-bottom: 28px;
}

.academy-back-link {
    display: inline-flex;
    margin-bottom: 24px;
    color: #0066c9;
    font-weight: 800;
    text-decoration: none;
}

.academy-satisfaction-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #0066c9;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.academy-satisfaction-head h1 {
    margin: 0 0 14px;
    color: #06163a;
    font-size: clamp(2rem, 4vw, 3rem);
}

.academy-satisfaction-head p {
    color: #64748b;
    line-height: 1.7;
}

.academy-satisfaction-form {
    display: grid;
    gap: 18px;
}

.satisfaction-section {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 20px;
    padding: 22px;
    border-radius: 16px;
    background: #06163a;
    color: #fff;
}

.satisfaction-section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffd000;
    color: #06163a;
    font-weight: 900;
}

.satisfaction-section h2 {
    margin: 0 0 6px;
    color: #fff;
}

.satisfaction-section p {
    margin: 0;
    color: #dbeafe;
}

.satisfaction-question {
    padding: 20px;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
    background: #fff;
}

.satisfaction-question-title {
    display: block;
    margin-bottom: 14px;
    color: #06163a;
    font-weight: 800;
}

.satisfaction-radio-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.satisfaction-radio-list li {
    margin: 0;
}

.satisfaction-radio-list label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid #dbe5f0;
    border-radius: 999px;
    cursor: pointer;
}

.satisfaction-radio-list label:hover {
    border-color: #0066c9;
    background: #f2f7fd;
}

.satisfaction-text-question textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
    resize: vertical;
}

.satisfaction-text-question textarea:focus {
    border-color: #0066c9;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 201, .12);
}

.satisfaction-submit {
    margin-top: 12px;
    padding: 24px;
    border-radius: 16px;
    text-align: center;
    background: #f6f9fd;
}

.academy-satisfaction-submit {
    border: 0;
    border-radius: 10px;
    padding: 14px 26px;
    background: #0066c9;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.academy-satisfaction-submit:hover {
    background: #06163a;
}

.satisfaction-submit p {
    margin: 12px 0 0;
    color: #64748b;
    font-size: .88rem;
}

.academy-form-error {
    margin-top: 7px;
    color: #b91c1c;
    font-size: .88rem;
    font-weight: 700;
}

@media (max-width: 700px) {
    .satisfaction-section {
        flex-direction: column;
    }

    .satisfaction-radio-list ul {
        flex-direction: column;
        align-items: stretch;
    }

    .satisfaction-radio-list label {
        width: 100%;
        box-sizing: border-box;
    }
}

.academy-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;

    padding: .75rem 1rem;

    border-radius: 10px;

    background: #ffd000;
    color: #06163a;

    font-weight: 900;
    text-decoration: none;

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

.academy-feedback-btn:hover {
    background: #ffe24d;

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(6, 22, 58, .12);
}

.academy-feedback-done {
    display: inline-flex;
    align-items: center;

    padding: .75rem 1rem;

    border-radius: 10px;

    background: #ecfdf5;
    color: #047857;

    font-weight: 800;
}


/* =========================================================
   CAMARA ITEC ACADEMY
   RÉCLAMATIONS / SIGNALEMENTS
   ========================================================= */

.academy-claim-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}


/* ---------- EN-TÊTE ---------- */

.academy-claim-head {
    position: relative;
    overflow: hidden;

    margin-bottom: 28px;
    padding: 30px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #06163a 0%,
            #0b3470 100%
        );

    color: #fff;

    box-shadow:
        0 18px 45px rgba(6, 22, 58, .16);
}

.academy-claim-head::after {
    content: "";

    position: absolute;
    width: 180px;
    height: 180px;

    right: -55px;
    top: -70px;

    border-radius: 50%;

    background: rgba(255, 208, 0, .12);
}

.academy-claim-back {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 22px;

    color: #fff;

    font-size: .9rem;
    font-weight: 800;

    text-decoration: none;
}

.academy-claim-back:hover {
    color: #ffd000;
}

.academy-claim-eyebrow {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 8px;

    color: #ffd000;

    font-size: .76rem;
    font-weight: 900;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.academy-claim-head h1 {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: #fff;

    font-size: clamp(1.9rem, 4vw, 2.8rem);
    line-height: 1.1;
}

.academy-claim-head p {
    position: relative;
    z-index: 2;

    max-width: 700px;

    margin: 6px 0 0;

    color: #dbeafe;

    line-height: 1.65;
}


/* ---------- FORMULAIRE ---------- */

.academy-claim-form {
    padding: 28px;

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

    background: #fff;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, .07);
}

.claim-form-intro {
    display: flex;
    gap: 14px;
    align-items: flex-start;

    margin-bottom: 26px;
    padding-bottom: 22px;

    border-bottom: 1px solid #e2e8f0;
}

.claim-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 48px;
    height: 48px;

    border-radius: 14px;

    background: #fff7cc;

    font-size: 1.35rem;
}

.claim-form-intro h2 {
    margin: 0 0 5px;

    color: #06163a;

    font-size: 1.25rem;
}

.claim-form-intro p {
    margin: 0;

    color: #64748b;

    font-size: .92rem;
    line-height: 1.55;
}


/* ---------- CHAMPS ---------- */

.claim-field {
    margin-bottom: 22px;
}

.claim-field label {
    display: block;

    margin-bottom: 8px;

    color: #06163a;

    font-size: .92rem;
    font-weight: 800;
}

.claim-field input,
.claim-field select,
.claim-field textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 13px 14px;

    border: 1px solid #cbd5e1;
    border-radius: 11px;

    background: #fff;

    color: #0f172a;

    font-family: inherit;
    font-size: .95rem;

    outline: none;

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

.claim-field textarea {
    min-height: 150px;
    resize: vertical;
}

.claim-field input:focus,
.claim-field select:focus,
.claim-field textarea:focus {
    border-color: #0066c9;

    box-shadow:
        0 0 0 4px rgba(0, 102, 201, .10);
}

.claim-help {
    display: block;

    margin-top: 6px;

    color: #64748b;

    font-size: .8rem;
}

.claim-error {
    margin-top: 6px;

    color: #b91c1c;

    font-size: .84rem;
    font-weight: 700;
}


/* ---------- INFORMATION ---------- */

.claim-info-box {
    display: flex;
    gap: 12px;

    margin: 22px 0;

    padding: 16px;

    border: 1px solid #bfdbfe;
    border-radius: 12px;

    background: #eff6ff;

    color: #1e3a5f;

    font-size: .88rem;
    line-height: 1.55;
}

.claim-info-box strong {
    color: #06163a;
}


/* ---------- BOUTON ENVOYER ---------- */

.claim-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: 28px;
    padding-top: 22px;

    border-top: 1px solid #e2e8f0;
}

.academy-claim-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 48px;

    padding: 0 24px;

    border: 0;
    border-radius: 11px;

    background: #0066c9;

    color: #fff;

    font-family: inherit;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 102, 201, .18);

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

.academy-claim-submit:hover {
    background: #06163a;

    transform: translateY(-1px);

    box-shadow:
        0 12px 24px rgba(6, 22, 58, .18);
}

.claim-submit-note {
    color: #64748b;

    font-size: .8rem;
}


/* =========================================================
   MES RÉCLAMATIONS
   ========================================================= */

.claim-list {
    display: grid;
    gap: 18px;
}

.claim-card {
    overflow: hidden;

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

    background: #fff;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .06);
}

.claim-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    padding: 20px 22px;

    border-bottom: 1px solid #edf2f7;

    background: #f8fafc;
}

.claim-reference {
    display: block;

    margin-bottom: 5px;

    color: #0066c9;

    font-size: .8rem;
    font-weight: 900;

    letter-spacing: .05em;
}

.claim-card-head h3 {
    margin: 0;

    color: #06163a;

    font-size: 1.1rem;
}

.claim-date {
    margin: 5px 0 0;

    color: #64748b;

    font-size: .82rem;
}


/* ---------- STATUTS ---------- */

.claim-status {
    display: inline-flex;
    align-items: center;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: .76rem;
    font-weight: 900;

    white-space: nowrap;
}

.claim-status-nouveau {
    background: #fff7cc;
    color: #7c5c00;
}

.claim-status-en-cours {
    background: #dbeafe;
    color: #1d4ed8;
}

.claim-status-traite {
    background: #dcfce7;
    color: #15803d;
}

.claim-status-cloture {
    background: #e2e8f0;
    color: #475569;
}


/* ---------- CONTENU ---------- */

.claim-card-body {
    padding: 22px;
}

.claim-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 18px;
}

.claim-tag {
    display: inline-flex;

    padding: 6px 10px;

    border-radius: 8px;

    background: #f1f5f9;

    color: #475569;

    font-size: .78rem;
    font-weight: 700;
}

.claim-description {
    color: #334155;

    line-height: 1.7;
}

.claim-response {
    margin-top: 20px;
    padding: 18px;

    border-left: 4px solid #0066c9;
    border-radius: 0 12px 12px 0;

    background: #f0f7ff;
}

.claim-response-title {
    display: block;

    margin-bottom: 8px;

    color: #06163a;

    font-weight: 900;
}

.claim-response p {
    margin-bottom: 0;

    color: #334155;

    line-height: 1.65;
}


/* ---------- ÉTAT VIDE ---------- */

.claim-empty {
    padding: 45px 25px;

    border: 1px dashed #cbd5e1;
    border-radius: 18px;

    background: #f8fafc;

    text-align: center;
}

.claim-empty-icon {
    display: block;

    margin-bottom: 10px;

    font-size: 2rem;
}

.claim-empty h3 {
    margin: 0 0 7px;

    color: #06163a;
}

.claim-empty p {
    margin: 0;

    color: #64748b;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 700px) {

    .academy-claim-page {
        padding:
            20px 14px
            45px;
    }

    .academy-claim-head {
        padding: 23px 20px;
    }

    .academy-claim-form {
        padding: 20px;
    }

    .claim-submit-row {
        flex-direction: column;
        align-items: stretch;
    }

    .academy-claim-submit {
        width: 100%;
    }

    .claim-card-head {
        flex-direction: column;
    }
}

/* =========================================================
   PAGE MES RÉCLAMATIONS / SIGNALEMENTS
   ========================================================= */

.academy-claims-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

/* HERO */
.claims-hero {
    margin-bottom: 24px;
    padding: 30px;
    border-radius: 22px;
    background: linear-gradient(135deg, #06163a, #0a3d7a);
    color: #fff;
    box-shadow: 0 18px 40px rgba(6, 22, 58, .12);
}

.claims-hero-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #ffd000;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.claims-hero h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
}

.claims-hero p {
    margin: 0;
    color: #dbeafe;
    line-height: 1.6;
}

/* LISTE */
.claims-list {
    display: grid;
    gap: 20px;
}

/* CARTE */
.claim-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;

    padding: 24px;

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

    background: #fff;

    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.claim-card-main {
    min-width: 0;
}

.claim-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;

    margin-bottom: 14px;
}

.claim-type-badge,
.claim-priority-badge,
.claim-status-badge {
    display: inline-flex;
    align-items: center;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: .75rem;
    font-weight: 900;
}

.claim-type-badge {
    background: #eff6ff;
    color: #1d4ed8;
}

.claim-priority-badge {
    background: #fff7cc;
    color: #7c5c00;
}

/* STATUTS */
.claim-status-badge.status-nouveau {
    background: #fff7cc;
    color: #7c5c00;
}

.claim-status-badge.status-en-cours {
    background: #dbeafe;
    color: #1d4ed8;
}

.claim-status-badge.status-traite {
    background: #dcfce7;
    color: #15803d;
}

.claim-status-badge.status-cloture {
    background: #e2e8f0;
    color: #475569;
}

/* TITRE / META */
.claim-reference {
    margin: 0 0 8px;
    color: #06163a;
    font-size: 1.55rem;
    font-weight: 900;
}

.claim-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;

    margin-bottom: 18px;

    color: #64748b;
    font-size: .88rem;
}

/* CONTENU */
.claim-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.claim-section-title {
    display: block;
    margin-bottom: 7px;

    color: #06163a;
    font-weight: 900;
}

.claim-section p {
    margin: 0;
    color: #334155;
    line-height: 1.7;
}

.claim-response-box {
    margin-top: 18px;
    padding: 16px 18px;

    border-left: 4px solid #0066c9;
    border-radius: 0 12px 12px 0;

    background: #f0f7ff;
}

/* COLONNE SUIVI */
.claim-progress {
    padding: 20px;

    border-radius: 16px;

    background: #f8fbff;

    border: 1px solid #dbeafe;
}

.claim-progress h3 {
    margin: 0 0 18px;
    color: #06163a;
    font-size: 1rem;
}

.claim-step {
    position: relative;

    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;

    padding-bottom: 20px;
}

.claim-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 32px;
    bottom: 0;

    width: 2px;

    background: #dbe5f0;
}

.claim-step-icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #e2e8f0;
    color: #64748b;

    font-size: .8rem;
    font-weight: 900;
}

.claim-step.active .claim-step-icon {
    background: #ffd000;
    color: #06163a;
}

.claim-step.done .claim-step-icon {
    background: #22c55e;
    color: #fff;
}

.claim-step strong {
    display: block;
    margin-bottom: 3px;
    color: #06163a;
}

.claim-step small {
    color: #64748b;
    line-height: 1.5;
}

/* ÉTAT VIDE */
.claim-empty {
    padding: 40px 24px;

    border: 1px dashed #cbd5e1;
    border-radius: 18px;

    background: #f8fafc;

    text-align: center;
}

.claim-empty h3 {
    margin: 0 0 8px;
    color: #06163a;
}

.claim-empty p {
    margin: 0;
    color: #64748b;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .claim-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .academy-claims-page {
        padding: 20px 14px 45px;
    }

    .claims-hero {
        padding: 24px 20px;
    }

    .claim-card {
        padding: 18px;
    }

    .claim-meta {
        flex-direction: column;
        gap: 6px;
    }
}