/* =====================================================
   RESET
   ===================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


[hidden] {
    display: none !important;
}


body {
    margin: 0;

    background: #f4f6f9;

    color: #1f2937;

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


a {
    color: inherit;
}


/* =====================================================
   TOP BAR
   ===================================================== */

.topbar {
    background: #111827;

    color: white;
}


.topbar-inner {
    max-width: 1320px;

    margin: auto;

    padding: 18px 24px;
}


.brand {
    font-size: 20px;

    font-weight: 750;

    text-decoration: none;

    letter-spacing: -0.3px;
}


/* =====================================================
   PAGE
   ===================================================== */

.page {
    max-width: 1320px;

    margin: auto;

    padding: 38px 24px 80px;
}


.back-link {
    color: #64748b;

    text-decoration: none;

    font-size: 14px;

    font-weight: 650;
}


.back-link:hover {
    color: #111827;
}


/* =====================================================
   MICROSOFT LOGO
   ===================================================== */

.microsoft-row {
    display: flex;

    align-items: center;

    gap: 9px;
}


.microsoft-mark {
    display: grid;

    grid-template-columns:
        8px 8px;

    grid-template-rows:
        8px 8px;

    gap: 2px;

    flex: 0 0 auto;
}


.microsoft-mark span {
    display: block;
}


.ms-red {
    background: #f25022;
}


.ms-green {
    background: #7fba00;
}


.ms-blue {
    background: #00a4ef;
}


.ms-yellow {
    background: #ffb900;
}


.microsoft-name {
    color: #475569;

    font-size: 14px;

    font-weight: 700;
}


/* =====================================================
   ACCUEIL
   ===================================================== */

.home-hero {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;

    padding-top: 10px;
}



.home-hero h1 {
    margin: 0;

    color: #111827;

    font-size: 38px;

    letter-spacing: -1px;
}



.section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 18px;
}


.section-heading h2 {
    margin: 0;

    font-size: 22px;
}


.section-heading p {
    margin:
        5px 0 0;

    color: #64748b;

    font-size: 14px;
}


/* =====================================================
   CARTE CERTIFICATION ACCUEIL
   ===================================================== */

.certification-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(330px, 1fr)
        );

    gap: 22px;
}


.certification-card {
    display: flex;

    flex-direction: column;

    min-height: 255px;

    padding: 28px;

    background: white;

    border:
        1px solid #e2e8f0;

    border-radius: 20px;

    color: inherit;

    text-decoration: none;

    box-shadow:
        0 5px 20px
        rgba(15, 23, 42, 0.04);

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


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

    border-color: #bfdbfe;

    box-shadow:
        0 14px 38px
        rgba(15, 23, 42, 0.09);
}


.certification-card-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 24px;
}


.certification-card h3 {
    flex: 1;

    max-width: 760px;

    margin: 0;

    color: #111827;

    font-size: 21px;

    line-height: 1.35;

    letter-spacing: -0.3px;
}


.exam-code-inline {
    color: #2563eb;

    font-weight: 900;

    white-space: nowrap;
}


.cert-progress-badge {
    flex: 0 0 auto;

    min-width: 92px;

    padding:
        9px 14px;

    background: #eff6ff;

    border-radius: 16px;

    color: #1d4ed8;

    font-size: 30px;

    font-weight: 900;

    line-height: 1;

    text-align: center;

    letter-spacing: -1px;
}


.certification-card > .microsoft-row {
    margin-top: 18px;
}


.certification-progress {
    margin-top: auto;

    padding-top: 22px;
}


.cert-progress-track {
    width: 100%;

    height: 7px;

    overflow: hidden;

    background: #e5e7eb;

    border-radius: 999px;
}


.cert-progress-fill {
    height: 100%;

    background: #2563eb;

    border-radius: inherit;

    transition: width 0.3s ease;
}


.cert-progress-text {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 10px;

    color: #64748b;

    font-size: 13px;
}


.cert-progress-text strong {
    color: #2563eb;
}


/* =====================================================
   HUB
   ===================================================== */

.hub-page {
    max-width: 1120px;

    margin: auto;
}


.hub-back {
    margin-bottom: 18px;
}


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

.exam-hero {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 32px;

    background: white;

    border:
        1px solid #e2e8f0;

    border-radius: 22px;

    box-shadow:
        0 5px 22px
        rgba(15, 23, 42, 0.045);
}


.exam-hero-main {
    display: flex;

    align-items: flex-start;

    gap: 22px;
}


.exam-code-badge {
    flex: 0 0 auto;

    padding:
        12px 15px;

    background: #eff6ff;

    border:
        1px solid #bfdbfe;

    border-radius: 13px;

    color: #1d4ed8;

    font-size: 18px;

    font-weight: 900;
}


.exam-hero h1 {
    max-width: 700px;

    margin:
        10px 0 8px;

    color: #111827;

    font-size: 29px;

    line-height: 1.25;

    letter-spacing: -0.7px;
}


.exam-hero p {
    margin: 0;

    color: #64748b;

    font-size: 14px;
}


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

.hub-progress-ring {
    flex: 0 0 auto;
}


.progress-ring-wrapper {
    display: flex;

    justify-content: center;

    margin:
        20px 0 22px;
}


.progress-ring {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 126px;

    height: 126px;

    border-radius: 50%;

    background:
        conic-gradient(
            #2563eb
            var(--progress),
            #e5e7eb
            0
        );
}


.progress-ring-inner {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 98px;

    height: 98px;

    background: white;

    border-radius: 50%;
}


.progress-ring-inner strong {
    color: #111827;

    font-size: 25px;

    font-weight: 900;
}


.progress-ring-inner span {
    margin-top: 1px;

    color: #64748b;

    font-size: 11px;
}


/* =====================================================
   4 STATS HUB
   ===================================================== */

.hub-stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 13px;

    margin-top: 16px;
}


.hub-stat {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 17px 18px;

    background: white;

    border:
        1px solid #e2e8f0;

    border-radius: 14px;
}


.hub-stat-dot {
    width: 12px;

    height: 12px;

    border-radius: 50%;

    flex: 0 0 auto;
}


.hub-stat div {
    display: flex;

    flex-direction: column;
}


.hub-stat strong {
    color: #111827;

    font-size: 20px;

    line-height: 1;
}


.hub-stat span:not(
    .hub-stat-dot
) {
    margin-top: 4px;

    color: #64748b;

    font-size: 12px;
}


.hub-stat-green
.hub-stat-dot {
    background: #16a34a;
}


.hub-stat-orange
.hub-stat-dot {
    background: #f97316;
}


.hub-stat-red
.hub-stat-dot {
    background: #dc2626;
}


.hub-stat-grey
.hub-stat-dot {
    background: #cbd5e1;
}


/* =====================================================
   CONTINUER
   ===================================================== */

.continue-card {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 20px;

    margin-top: 26px;

    padding: 24px;

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

    border-radius: 18px;

    color: white;

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


.continue-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

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

    border-radius: 13px;

    font-size: 18px;
}


.continue-label {
    color: #bfdbfe;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}


.continue-card h2 {
    margin:
        4px 0;

    font-size: 20px;
}


.continue-card p {
    margin: 0;

    color: #dbeafe;

    font-size: 13px;
}


.continue-button {
    padding:
        12px 17px;

    background: white;

    border-radius: 10px;

    color: #1d4ed8;

    text-decoration: none;

    font-size: 14px;

    font-weight: 850;
}


/* =====================================================
   CARTES DE RÉVISION
   ===================================================== */

.revision-section {
    margin-top: 38px;
}


.revision-grid {
    display: grid;

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

    gap: 15px;
}


.revision-card {
    position: relative;

    display: grid;

    grid-template-columns:
        47px
        1fr
        auto;

    align-items: center;

    gap: 16px;

    min-height: 130px;

    padding: 21px;

    background: white;

    border:
        1px solid #e2e8f0;

    border-radius: 16px;

    color: inherit;

    text-decoration: none;

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


.revision-card:hover {
    transform: translateY(-2px);

    border-color: #cbd5e1;

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


.revision-card-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 47px;

    height: 47px;

    background: #f8fafc;

    border:
        1px solid #e2e8f0;

    border-radius: 13px;

    font-size: 20px;
}


.revision-card h3 {
    margin:
        0 0 4px;

    color: #111827;

    font-size: 16px;
}


.revision-card p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.4;
}


.revision-count {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 38px;

    height: 38px;

    padding:
        0 9px;

    background: #f1f5f9;

    border-radius: 10px;

    color: #475569;

    font-size: 14px;

    font-weight: 850;
}


.revision-card-primary {
    border-color: #bfdbfe;

    background: #f8fbff;
}


.revision-card-primary
.revision-count {
    background: #dbeafe;

    color: #1d4ed8;
}


.revision-card-orange {
    border-color: #fed7aa;
}


.revision-card-orange
.revision-count {
    background: #fff7ed;

    color: #c2410c;
}


.revision-card-red {
    border-color: #fecaca;
}


.revision-card-red
.revision-count {
    background: #fef2f2;

    color: #b91c1c;
}


.revision-card-green {
    border-color: #bbf7d0;
}


.revision-card-green
.revision-count {
    background: #f0fdf4;

    color: #15803d;
}


/* =====================================================
   BROWSER QUESTIONS
   ===================================================== */

.questions-browser {
    max-width: 1080px;

    margin: auto;
}


.questions-browser-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 26px;
}


.browser-code {
    margin-top: 20px;

    color: #2563eb;

    font-size: 13px;

    font-weight: 850;
}


.questions-browser-header h1 {
    margin:
        2px 0 4px;

    font-size: 32px;
}


.questions-browser-header p {
    max-width: 650px;

    margin: 0;

    color: #64748b;

    font-size: 14px;
}


.browser-progress {
    display: flex;

    flex-direction: column;

    align-items: flex-end;
}


.browser-progress strong {
    color: #2563eb;

    font-size: 28px;
}


.browser-progress span {
    color: #64748b;

    font-size: 11px;
}


/* =====================================================
   FILTRES QUESTIONS
   ===================================================== */

.question-filters {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 17px;
}


.question-filter {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 12px;

    background: white;

    border:
        1px solid #e2e8f0;

    border-radius: 10px;

    color: #475569;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;
}


.question-filter strong {
    padding:
        2px 6px;

    background: #f1f5f9;

    border-radius: 6px;

    font-size: 11px;
}


.question-filter:hover {
    border-color: #94a3b8;
}


.question-filter.active {
    background: #111827;

    border-color: #111827;

    color: white;
}


.question-filter.active strong {
    background:
        rgba(
            255,
            255,
            255,
            0.14
        );

    color: white;
}


/* =====================================================
   LIGNES QUESTIONS
   ===================================================== */

.question-browser-list {
    overflow: hidden;

    background: white;

    border:
        1px solid #e2e8f0;

    border-radius: 16px;
}


.question-browser-row {
    display: grid;

    grid-template-columns:
        105px
        110px
        1fr
        145px
        25px;

    align-items: center;

    gap: 14px;

    min-height: 70px;

    padding:
        13px 17px;

    border-bottom:
        1px solid #edf0f2;

    color: inherit;

    text-decoration: none;

    transition: background 0.12s ease;
}


.question-browser-row:last-child {
    border-bottom: 0;
}


.question-browser-row:hover {
    background: #f8fafc;
}


.browser-question-number {
    display: flex;

    flex-direction: column;
}


.browser-question-number span {
    color: #111827;

    font-size: 15px;

    font-weight: 850;
}


.browser-question-number small {
    margin-top: 2px;

    color: #94a3b8;

    font-size: 10px;
}


.browser-question-meta {
    display: flex;

    gap: 12px;

    color: #64748b;

    font-size: 12px;
}


.browser-question-status {
    display: flex;

    justify-content: flex-end;
}


.browser-question-arrow {
    color: #94a3b8;

    font-size: 17px;

    text-align: right;
}


/* =====================================================
   STATUS PILLS
   ===================================================== */

.status-pill {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        6px 8px;

    border-radius: 8px;

    font-size: 11px;

    font-weight: 750;

    white-space: nowrap;
}


.status-pill > span {
    width: 7px;

    height: 7px;

    border-radius: 50%;
}


.status-mastered {
    background: #f0fdf4;

    color: #166534;
}


.status-mastered > span {
    background: #16a34a;
}


.status-learning {
    background: #fff7ed;

    color: #9a3412;
}


.status-learning > span {
    background: #f97316;
}


.status-review {
    background: #fef2f2;

    color: #991b1b;
}


.status-review > span {
    background: #dc2626;
}


.status-unanswered {
    background: #f1f5f9;

    color: #64748b;
}


.status-unanswered > span {
    background: #cbd5e1;
}


/* =====================================================
   EMPTY QUESTIONS
   ===================================================== */

.questions-empty {
    padding: 60px 25px;

    background: white;

    border:
        1px solid #e2e8f0;

    border-radius: 16px;

    text-align: center;
}


.questions-empty-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    margin:
        0 auto 15px;

    background: #ecfdf5;

    border-radius: 50%;

    color: #16a34a;

    font-size: 20px;

    font-weight: 900;
}


.questions-empty h2 {
    margin:
        0 0 7px;
}


.questions-empty p {
    margin:
        0 0 18px;

    color: #64748b;
}


.questions-empty a {
    color: #2563eb;

    font-weight: 750;
}


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

.badge {
    display: inline-block;

    padding:
        5px 9px;

    border-radius: 999px;

    background: #e5e7eb;

    color: #374151;

    font-size: 11px;

    font-weight: 800;
}


.type-qcm {
    background: #dbeafe;

    color: #1d4ed8;
}


.type-hotspot {
    background: #fef3c7;

    color: #92400e;
}


.type-drag_drop {
    background: #ede9fe;

    color: #6d28d9;
}


.type-autre,
.type-autre_image {
    background: #e5e7eb;

    color: #475569;
}


/* =====================================================
   PAGE QUESTION + SIDEBAR
   ===================================================== */

.study-page-layout {
    display: grid;

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

    gap: 26px;

    align-items: start;
}


.question-main-column {
    min-width: 0;
}


.progress-sidebar {
    position: sticky;

    top: 24px;
}


/* =====================================================
   HAUT QUESTION
   ===================================================== */

.question-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 22px;
}


.progress-text {
    color: #64748b;

    font-size: 14px;

    font-weight: 600;
}


/* =====================================================
   QUESTION
   ===================================================== */

.question-card {
    background: white;

    border:
        1px solid #e5e7eb;

    border-radius: 18px;

    padding: 30px;

    box-shadow:
        0 3px 14px
        rgba(15, 23, 42, 0.035);
}


.question-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 26px;
}


.question-header h1 {
    margin:
        3px 0 0;

    font-size: 28px;
}


.question-kicker {
    color: #64748b;

    font-size: 13px;

    font-weight: 700;
}


/* =====================================================
   CONTENU QUESTION
   ===================================================== */

.question-content {
    display: flex;

    flex-direction: column;
}


.question-text-block {
    margin:
        0 0 18px;

    white-space: pre-line;

    font-size: 16px;

    line-height: 1.68;
}


.question-text-block:last-child {
    margin-bottom: 0;
}


.question-image-block {
    margin:
        10px 0 26px;
}


.question-image {
    display: block;

    max-width: 100%;

    height: auto;

    margin: 0 auto;

    border-radius: 8px;
}


/* =====================================================
   CHOIX
   ===================================================== */

.choices {
    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-top: 28px;
}


.choice {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding:
        15px 17px;

    background: #f8fafc;

    border:
        1px solid #e2e8f0;

    border-radius: 11px;
}


.choice-letter {
    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 32px;

    width: 32px;

    height: 32px;

    background: white;

    border:
        1px solid #cbd5e1;

    border-radius: 50%;

    font-weight: 800;
}


.choice-text {
    padding-top: 4px;

    line-height: 1.5;
}


/* QCM interactif */

.choice-answer {
    width: 100%;

    color: inherit;

    font: inherit;

    text-align: left;

    cursor: pointer;

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


.choice-answer:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color: #8b5cf6;

    background: #faf8ff;

    box-shadow:
        0 4px 14px
        rgba(99, 102, 241, 0.09);
}


.choice-answer.selected-answer-choice {
    border-color: #6366f1;

    background: #eef2ff;

    box-shadow:
        0 0 0 3px
        rgba(99, 102, 241, 0.12);
}


.choice-answer.selected-answer-choice
.choice-letter {
    border-color: #6366f1;

    background: #6366f1;

    color: white;
}


.choice-answer.answer-correct {
    border-color: #22c55e;

    background: #f0fdf4;

    color: #14532d;

    box-shadow:
        0 0 0 3px
        rgba(34, 197, 94, 0.11);
}


.choice-answer.answer-correct
.choice-letter {
    border-color: #16a34a;

    background: #16a34a;

    color: white;
}


.choice-answer.answer-correct::after {
    content: "✓";

    align-self: center;

    margin-left: auto;

    color: #15803d;

    font-size: 20px;

    font-weight: 900;
}


.choice-answer.answer-wrong {
    border-color: #ef4444;

    background: #fef2f2;

    color: #7f1d1d;

    box-shadow:
        0 0 0 3px
        rgba(239, 68, 68, 0.09);
}


.choice-answer.answer-wrong
.choice-letter {
    border-color: #dc2626;

    background: #dc2626;

    color: white;
}


.choice-answer.answer-wrong::after {
    content: "×";

    align-self: center;

    margin-left: auto;

    color: #b91c1c;

    font-size: 24px;

    font-weight: 900;

    line-height: 1;
}


.choice-answer:disabled {
    cursor: default;

    opacity: 1;
}


/* =====================================================
   BARRE ÉTUDE
   ===================================================== */

.study-toolbar {
    display: grid;

    grid-template-columns:
        1fr
        minmax(390px, auto)
        1fr;

    align-items: center;

    gap: 16px;

    margin-top: 20px;

    padding: 16px;

    background: white;

    border:
        1px solid #e2e8f0;

    border-radius: 16px;

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


.study-side {
    display: flex;

    align-items: center;
}


.study-side-left {
    justify-content: flex-start;
}


.study-side-right {
    justify-content: flex-end;
}


.study-center {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;
}


/* =====================================================
   NAVIGATION QUESTION
   ===================================================== */

.side-nav-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 88px;

    min-height: 44px;

    padding:
        10px 15px;

    background: #111827;

    color: white;

    border-radius: 11px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 750;

    white-space: nowrap;
}


.side-nav-button:hover {
    background: #374151;
}


/* =====================================================
   AFFICHER RÉPONSE
   ===================================================== */

.reveal-answer-button {
    width: 100%;

    max-width: 370px;

    min-height: 50px;

    padding:
        12px 22px;

    border: 0;

    border-radius: 11px;

    background: #2563eb;

    color: white;

    font-family: inherit;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

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


.reveal-answer-button:hover {
    background: #1d4ed8;
}


/* =====================================================
   MAÎTRISE
   ===================================================== */

.mastery-zone {
    width: 100%;
}


.mastery-buttons {
    display: flex;

    justify-content: center;

    gap: 9px;
}


.mastery-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    flex: 1;

    min-height: 44px;

    padding:
        9px 12px;

    border-radius: 11px;

    font-family: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}


.mastery-button:hover {
    transform: translateY(-1px);
}


.mastery-icon {
    font-size: 14px;
}


.mastery-mastered {
    background: #f0fdf4;

    border:
        1px solid #86efac;

    color: #166534;
}


.mastery-mastered
.mastery-icon {
    color: #16a34a;
}


.mastery-learning {
    background: #fff7ed;

    border:
        1px solid #fdba74;

    color: #9a3412;
}


.mastery-learning
.mastery-icon {
    color: #f97316;
}


.mastery-review {
    background: #fef2f2;

    border:
        1px solid #fca5a5;

    color: #991b1b;
}


.mastery-review
.mastery-icon {
    color: #dc2626;
}


.mastery-mastered.selected {
    background: #15803d;

    border-color: #15803d;

    color: white;

    transform: scale(1.045);

    box-shadow:
        0 0 0 4px
        rgba(21, 128, 61, 0.18);
}


.mastery-learning.selected {
    background: #ea580c;

    border-color: #ea580c;

    color: white;

    transform: scale(1.045);

    box-shadow:
        0 0 0 4px
        rgba(234, 88, 12, 0.18);
}


.mastery-review.selected {
    background: #dc2626;

    border-color: #dc2626;

    color: white;

    transform: scale(1.045);

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


.mastery-button.selected
.mastery-icon {
    color: white;
}


.mastery-button.selected::after {
    content: "✓";

    margin-left: 2px;

    font-size: 14px;

    font-weight: 900;
}


.mastery-button:disabled {
    cursor: wait;
}


/* =====================================================
   FEEDBACK
   ===================================================== */

.save-feedback {
    height: 0;

    margin-top: 0;

    text-align: center;

    color: #15803d;

    font-size: 12px;

    font-weight: 750;

    opacity: 0;

    transition:
        opacity 0.2s ease,
        height 0.2s ease,
        margin 0.2s ease;
}


.save-feedback.visible {
    height: 18px;

    margin-top: 7px;

    opacity: 1;
}


.save-feedback.error {
    color: #dc2626;
}


/* =====================================================
   RÉPONSE
   ===================================================== */

.answer-section {
    margin-top: 25px;
}


/* =====================================================
   ANALYSE COMMUNAUTAIRE
   ===================================================== */

.community-analysis {
    padding: 24px;

    background: white;

    border:
        1px solid #c7d2fe;

    border-radius: 16px;
}


.analysis-heading {
    margin-bottom: 18px;

    color: #4338ca;

    font-size: 13px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}


.community-result {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;
}


.result-letter {
    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 54px;

    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: #4f46e5;

    color: white;

    font-size: 24px;

    font-weight: 850;
}


.result-title {
    font-size: 16px;

    font-weight: 800;
}


.result-confidence {
    margin-top: 4px;

    color: #64748b;

    font-size: 14px;
}


.vote-list {
    border-top:
        1px solid #e5e7eb;
}


.vote-row {
    display: grid;

    grid-template-columns:
        40px
        1fr
        auto;

    gap: 15px;

    padding:
        11px 0;

    border-bottom:
        1px solid #edf0f2;

    font-size: 14px;
}


.vote-row:last-child {
    border-bottom: 0;
}


.vote-simple {
    color: #64748b;
}


/* =====================================================
   COMMENTAIRES
   ===================================================== */

.comments-section {
    margin-top: 32px;
}


.comments-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 16px;
}


.comments-header h2 {
    margin: 0;

    font-size: 22px;
}


.comments-header span {
    color: #64748b;

    font-size: 13px;
}


.comments {
    display: flex;

    flex-direction: column;

    gap: 13px;
}


.comment {
    padding:
        18px 20px;

    background: white;

    border:
        1px solid #e5e7eb;

    border-radius: 13px;
}


.comment-top {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 12px;
}


.selected-answer {
    display: inline-block;

    padding:
        4px 8px;

    background: #ecfdf5;

    color: #047857;

    border-radius: 6px;

    font-size: 12px;

    font-weight: 750;
}


.likes {
    flex-shrink: 0;

    color: #64748b;

    font-size: 13px;
}


.comment-text {
    white-space: pre-wrap;

    overflow-wrap: anywhere;

    line-height: 1.58;
}


.comment-text a {
    color: #2563eb;

    text-decoration: none;
}


.comment-text a:hover {
    text-decoration: underline;
}


.empty {
    padding: 25px;

    background: white;

    border:
        1px solid #e5e7eb;

    border-radius: 12px;

    color: #64748b;
}


/* =====================================================
   SIDEBAR PROGRESSION QUESTION
   ===================================================== */

.progress-card {
    padding: 20px;

    background: white;

    border:
        1px solid #e2e8f0;

    border-radius: 18px;

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


.progress-card-title {
    text-align: center;

    font-size: 16px;

    font-weight: 800;
}


.progress-stats {
    display: flex;

    flex-direction: column;

    gap: 11px;
}


.progress-stat-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    font-size: 13px;
}


.progress-stat-label {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #475569;
}


.summary-dot {
    display: inline-block;

    width: 10px;

    height: 10px;

    border-radius: 50%;
}


.summary-mastered {
    background: #16a34a;
}


.summary-learning {
    background: #f97316;
}


.summary-review {
    background: #dc2626;
}


.summary-unanswered {
    background: #cbd5e1;
}


.progress-evaluated {
    display: flex;

    justify-content: space-between;

    margin-top: 18px;

    padding-top: 15px;

    border-top:
        1px solid #e5e7eb;

    color: #64748b;

    font-size: 12px;
}


.progress-evaluated strong {
    color: #1f2937;
}


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

@media (
    max-width: 1120px
) {

    .study-page-layout {
        grid-template-columns:
            1fr;
    }


    .progress-sidebar {
        position: static;

        grid-row: 1;
    }


    .progress-card {
        display: grid;

        grid-template-columns:
            auto
            auto
            1fr;

        align-items: center;

        gap: 25px;
    }


    .progress-card-title {
        display: none;
    }


    .progress-ring-wrapper {
        margin: 0;
    }


    .progress-ring {
        width: 100px;

        height: 100px;
    }


    .progress-ring-inner {
        width: 78px;

        height: 78px;
    }


    .progress-ring-inner strong {
        font-size: 20px;
    }


    .progress-evaluated {
        margin-top: 0;

        border-top: 0;

        border-left:
            1px solid #e5e7eb;

        padding:
            10px 0 10px 20px;

        flex-direction: column;

        gap: 4px;
    }

}


@media (
    max-width: 900px
) {

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


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


    .question-browser-row {
        grid-template-columns:
            90px
            100px
            1fr
            130px
            20px;
    }

}


@media (
    max-width: 760px
) {

    .page {
        padding:
            24px
            14px
            60px;
    }


    .home-hero h1 {
        font-size: 31px;
    }


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


    .certification-card {
        padding: 22px;
    }


    .certification-card-top {
        gap: 16px;
    }


    .certification-card h3 {
        font-size: 19px;
    }


    .cert-progress-badge {
        min-width: 78px;

        padding:
            8px 11px;

        font-size: 25px;
    }


    .exam-hero {
        align-items: flex-start;

        flex-direction: column;

        padding: 23px;
    }


    .exam-hero-main {
        flex-direction: column;
    }


    .hub-progress-ring {
        align-self: center;
    }


    .hub-stats {
        grid-template-columns:
            1fr 1fr;
    }


    .continue-card {
        grid-template-columns:
            auto
            1fr;
    }


    .continue-button {
        grid-column:
            1 / -1;

        text-align: center;
    }


    .questions-browser-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .browser-progress {
        align-items: flex-start;
    }


    .question-browser-row {
        grid-template-columns:
            75px
            1fr
            auto;
    }


    .browser-question-type {
        grid-column: 2;
    }


    .browser-question-meta {
        display: none;
    }


    .browser-question-status {
        grid-column: 2;

        justify-content: flex-start;
    }


    .browser-question-arrow {
        grid-column: 3;

        grid-row:
            1 / 3;
    }


    .question-card {
        padding: 21px;
    }


    .study-toolbar {
        grid-template-columns:
            1fr
            1fr;

        gap: 10px;
    }


    .study-center {
        grid-column:
            1 / -1;

        grid-row: 1;
    }


    .study-side-left {
        grid-column: 1;
    }


    .study-side-right {
        grid-column: 2;
    }


    .side-nav-button {
        width: 100%;
    }


    .mastery-buttons {
        flex-direction: column;
    }


    .mastery-button {
        width: 100%;
    }


    .progress-card {
        grid-template-columns:
            auto
            1fr;
    }


    .progress-evaluated {
        grid-column:
            1 / -1;

        border-left: 0;

        border-top:
            1px solid #e5e7eb;

        padding:
            12px 0 0;

        flex-direction: row;
    }


    .comments-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .vote-row {
        grid-template-columns:
            32px
            1fr;
    }


    .vote-simple {
        grid-column: 2;
    }

}
/* =====================================================
   MODES D'ÉTUDE
   ===================================================== */

.study-modes-section {
    margin-top: 30px;
}

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

.study-mode-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 18px;
    min-height: 230px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: white;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(15, 23, 42, 0.04);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.study-mode-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.study-mode-discovery:hover {
    border-color: #93c5fd;
}

.study-mode-review {
    border-color: #c7d2fe;
    background: linear-gradient(145deg, #ffffff, #f8faff);
}

.study-mode-review:hover {
    border-color: #818cf8;
}

.study-mode-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #eff6ff;
    font-size: 27px;
}

.study-mode-review .study-mode-icon {
    background: #eef2ff;
}

.study-mode-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.study-mode-label {
    margin-bottom: 5px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.65px;
}

.study-mode-review .study-mode-label {
    color: #4f46e5;
}

.study-mode-card h3 {
    margin: 0 0 9px;
    color: #111827;
    font-size: 20px;
}

.study-mode-card p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.study-mode-action {
    margin-top: auto;
    padding-top: 18px;
    color: #2563eb;
    font-size: 14px;
    font-weight: 850;
}

.study-mode-review .study-mode-action {
    color: #4f46e5;
}

.review-weight-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.review-weight {
    padding: 5px 7px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.review-weight-red {
    background: #fef2f2;
    color: #b91c1c;
}

.review-weight-orange {
    background: #fff7ed;
    color: #c2410c;
}

.review-weight-grey {
    background: #f1f5f9;
    color: #64748b;
}

.review-weight-green {
    background: #f0fdf4;
    color: #15803d;
}

.review-next-button {
    background: #4f46e5;
}

.review-next-button:hover {
    background: #4338ca;
}

@media (max-width: 800px) {
    .study-modes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .study-mode-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .study-mode-action {
        margin-top: 18px;
        padding-top: 0;
    }
}

/* =====================================================
   THÈME MICROSOFT 365 / FLUENT
   ===================================================== */

:root {
    --m365-blue: #0f6cbd;
    --m365-blue-hover: #115ea3;
    --m365-purple: #5b5fc7;
    --m365-magenta: #c239b3;
    --m365-green: #107c10;
    --m365-orange: #ca5010;
    --m365-red: #d13438;
    --m365-bg: #f7f7fb;
    --m365-surface: #ffffff;
    --m365-border: #e6e6ef;
    --m365-text: #242424;
    --m365-muted: #616161;
}

body {
    background: var(--m365-bg);
    color: var(--m365-text);
}

.topbar {
    background: linear-gradient(
        100deg,
        #0f6cbd 0%,
        #5b5fc7 52%,
        #a426a8 100%
    );
    box-shadow: 0 4px 18px rgba(60, 47, 143, 0.18);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
}

.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 18px;
    line-height: 1;
}

.page {
    padding-top: 34px;
}

.back-link:hover,
.exam-code-large,
.exam-code-inline,
.browser-code,
.study-mode-label,
.study-mode-action,
.cert-progress-text strong {
    color: var(--m365-purple);
}

.certification-card,
.exam-hero,
.study-mode-card,
.question-browser-list,
.question-card,
.progress-card,
.comment,
.community-analysis,
.study-toolbar {
    border-color: var(--m365-border);
}

.certification-card:hover,
.study-mode-card:hover {
    border-color: #b9b7eb;
    box-shadow: 0 14px 34px rgba(91, 95, 199, 0.11);
}

.cert-progress-badge {
    min-width: 78px;
    padding: 9px 13px;
    background: linear-gradient(135deg, #eef6ff, #f4efff);
    color: var(--m365-purple);
    font-size: 22px;
    font-weight: 900;
    text-align: center;
}

.cert-progress-fill {
    background: linear-gradient(
        90deg,
        var(--m365-blue),
        var(--m365-purple),
        var(--m365-magenta)
    );
}

.exam-code-badge {
    background: linear-gradient(135deg, #eef6ff, #f4efff);
    border-color: #d8d6f4;
    color: var(--m365-purple);
}

.microsoft-name,
.exam-hero p,
.study-mode-card p,
.questions-browser-header p,
.progress-text {
    color: var(--m365-muted);
}

/* =====================================================
   PROGRESSION SEGMENTÉE DU HUB
   ===================================================== */

.exam-hero-progress {
    min-height: 300px;
}

.exam-hero-progress .exam-hero-main {
    align-items: center;
}

.hub-progress-ring-large {
    padding: 8px 10px;
}

.progress-ring.progress-ring-segmented {
    width: 214px;
    height: 214px;
    padding: 0;
    background: conic-gradient(
        var(--m365-green) 0 var(--mastered-end),
        var(--m365-orange) var(--mastered-end) var(--learning-end),
        var(--m365-red) var(--learning-end) var(--review-end),
        #ffffff var(--review-end) 100%
    );
    border: 1px solid #dedee8;
    box-shadow:
        0 10px 30px rgba(55, 48, 130, 0.12),
        inset 0 0 0 1px rgba(36, 36, 36, 0.03);
}

.progress-ring.progress-ring-segmented .progress-ring-inner {
    width: 158px;
    height: 158px;
    background: #ffffff;
    box-shadow: 0 0 0 1px #eeeeF4;
}

.progress-ring.progress-ring-segmented .progress-ring-inner strong {
    font-size: 31px;
    letter-spacing: -1px;
}

.progress-ring.progress-ring-segmented .progress-ring-inner span {
    margin-top: 4px;
    color: var(--m365-muted);
    font-size: 12px;
    font-weight: 700;
}

.progress-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    max-width: 620px;
    margin-top: 18px;
}

.progress-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--m365-muted);
    font-size: 12px;
    font-weight: 650;
}

.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.legend-mastered { background: var(--m365-green); }
.legend-learning { background: var(--m365-orange); }
.legend-review { background: var(--m365-red); }
.legend-unanswered {
    background: #ffffff;
    border-color: #c8c8d2;
}

/* Les anciens 4 pavés de statistiques ne sont plus utilisés. */
.hub-stats {
    display: none;
}

/* =====================================================
   3 MODES DE RÉVISION
   ===================================================== */

.study-modes-section {
    margin-top: 30px;
}

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

.study-mode-card {
    grid-template-columns: 52px 1fr;
    min-height: 245px;
    border-color: var(--m365-border);
    border-radius: 18px;
}

.study-mode-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #eef6ff, #f4efff);
}

.study-mode-review {
    background: linear-gradient(145deg, #ffffff, #faf9ff);
    border-color: #d8d6f4;
}

.study-mode-free {
    background: linear-gradient(145deg, #ffffff, #f6fbff);
}

.study-mode-free:hover {
    border-color: #9ac7eb;
}

.study-mode-review .study-mode-label,
.study-mode-review .study-mode-action {
    color: var(--m365-purple);
}

.study-mode-free .study-mode-label,
.study-mode-free .study-mode-action {
    color: var(--m365-blue);
}

.review-weight-red {
    background: #fde7e9;
    color: #a4262c;
}

.review-weight-orange {
    background: #fdf1e7;
    color: #8a3707;
}

.review-weight-grey {
    background: #f3f2f1;
    color: #605e5c;
}

.review-weight-green {
    background: #e9f5e9;
    color: #0b6a0b;
}

/* =====================================================
   MODE LIBRE — TABLEAU
   ===================================================== */

.question-browser-table-head,
.question-browser-row-free {
    display: grid;
    grid-template-columns:
        110px
        160px
        minmax(180px, 1fr)
        28px;
    align-items: center;
    gap: 18px;
}

.question-browser-table-head {
    padding: 12px 18px;
    background: #f8f8fc;
    border-bottom: 1px solid var(--m365-border);
    color: #767676;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

.question-browser-row-free {
    min-height: 68px;
}

.question-browser-row-free .browser-question-status {
    justify-content: flex-start;
}

.question-browser-row-free .browser-question-arrow {
    color: #8a88b7;
}

.question-filter.active {
    background: var(--m365-purple);
    border-color: var(--m365-purple);
}

.question-filter:hover {
    border-color: #9c9ade;
}

.browser-progress strong {
    color: var(--m365-purple);
}

.status-mastered {
    background: #e9f5e9;
    color: #0b6a0b;
}
.status-mastered > span { background: var(--m365-green); }

.status-learning {
    background: #fdf1e7;
    color: #8a3707;
}
.status-learning > span { background: var(--m365-orange); }

.status-review {
    background: #fde7e9;
    color: #a4262c;
}
.status-review > span { background: var(--m365-red); }

.status-unanswered {
    background: #f3f2f1;
    color: #605e5c;
}
.status-unanswered > span { background: #a19f9d; }

/* =====================================================
   QUESTION / ACTIONS
   ===================================================== */

.reveal-answer-button,
.continue-card {
    background: linear-gradient(
        110deg,
        var(--m365-blue),
        var(--m365-purple)
    );
}

.reveal-answer-button:hover {
    background: linear-gradient(
        110deg,
        var(--m365-blue-hover),
        #4a4fb5
    );
}

.review-next-button {
    background: var(--m365-purple);
}

.review-next-button:hover {
    background: #4a4fb5;
}

.mastery-mastered.selected {
    background: var(--m365-green);
    border-color: var(--m365-green);
}

.mastery-learning.selected {
    background: var(--m365-orange);
    border-color: var(--m365-orange);
}

.mastery-review.selected {
    background: var(--m365-red);
    border-color: var(--m365-red);
}

@media (max-width: 980px) {
    .study-modes-grid.study-modes-grid-three {
        grid-template-columns: 1fr;
    }

    .study-mode-card {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .exam-hero-progress {
        align-items: flex-start;
    }

    .hub-progress-ring-large {
        align-self: center;
    }

    .progress-ring.progress-ring-segmented {
        width: 188px;
        height: 188px;
    }

    .progress-ring.progress-ring-segmented .progress-ring-inner {
        width: 138px;
        height: 138px;
    }

    .question-browser-table-head {
        display: none;
    }

    .question-browser-row-free {
        grid-template-columns: 82px 1fr auto 22px;
        gap: 10px;
    }
}

@media (max-width: 540px) {
    .question-browser-row-free {
        grid-template-columns: 70px 1fr 22px;
    }

    .question-browser-row-free .browser-question-status {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .question-browser-row-free .browser-question-arrow {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }
}