/* ============================================================
   Habari Apprendre — Styles frontend
   Exclusivement en CSS variables, zéro border-radius, zéro valeur codée en dur.
   ============================================================ */

:root {
    --habari-apprendre-sidebar-width: 280px;
    --habari-apprendre-gap: var(--habari-space-md, 24px);
    --habari-apprendre-content-max: 860px;
}

/* ── LAYOUT LEÇON ─────────────────────────────────────────── */

.habari-apprendre-lecon-wrap {
    display: grid;
    grid-template-columns: var(--habari-apprendre-sidebar-width) 1fr;
    min-height: calc(100vh - var(--habari-navbar-height, 70px));
    align-items: start;
}

.habari-apprendre-lecon {
    padding: var(--habari-apprendre-gap);
    max-width: var(--habari-apprendre-content-max);
    min-width: 0;
    box-sizing: border-box;
}

/* ── SIDEBAR ──────────────────────────────────────────────── */

.apprendre-sidebar {
    position: sticky;
    top: var(--habari-navbar-height, 70px);
    max-height: calc(100vh - var(--habari-navbar-height, 70px));
    overflow-y: auto;
    align-self: start;
    background: var(--habari-dark-50, #f8f9fa);
    border-right: 1px solid var(--habari-dark-200, #dee2e6);
    padding: 20px 0;
}

.apprendre-sidebar-cours-link {
    display: block;
    padding: 0 20px 12px;
    font-weight: bold;
    color: var(--habari-secondary-navy, #03224D);
    text-decoration: none;
    border-bottom: 1px solid var(--habari-dark-200, #dee2e6);
    font-family: var(--habari-font-heading);
}

.apprendre-sidebar-chapters {
    list-style: none;
    margin: 0;
    padding: 0;
}

.apprendre-sidebar-chapter {
    border-bottom: 1px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-sidebar-chapter-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 12px 20px;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--habari-dark-800, #212529);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.apprendre-sidebar-chapter.is-active .apprendre-sidebar-chapter-toggle {
    color: var(--habari-primary-brand, #9E2E2E);
}

.apprendre-sidebar-chapter.is-locked .apprendre-sidebar-chapter-toggle {
    color: var(--habari-dark-400, #adb5bd);
    cursor: default;
}

.apprendre-sidebar-lessons {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    background: var(--habari-dark-100, #f1f3f5);
}

.apprendre-sidebar-lessons.is-open {
    display: block;
}

.apprendre-sidebar-lesson {
    padding: 8px 20px 8px 32px;
    font-size: 0.8125rem;
}

.apprendre-sidebar-lesson a {
    color: var(--habari-dark-700, #343a40);
    text-decoration: none;
}

.apprendre-sidebar-lesson.is-current a {
    color: var(--habari-primary-brand, #9E2E2E);
    font-weight: 600;
}

.apprendre-sidebar-lesson.is-done a {
    color: var(--habari-success-600, #198754);
}

.apprendre-sidebar-lesson.is-locked span {
    color: var(--habari-dark-400, #adb5bd);
}

.apprendre-sidebar-progress-count {
    font-size: 0.75rem;
    color: var(--habari-dark-500, #6c757d);
    font-weight: normal;
    margin-left: auto;
}

.apprendre-sidebar-lesson-duree {
    display: block;
    font-size: 0.7rem;
    color: var(--habari-dark-400, #adb5bd);
    font-weight: normal;
    margin-top: 1px;
}

/* ── BREADCRUMB ───────────────────────────────────────────── */

.apprendre-breadcrumb {
    font-size: 0.8125rem;
    color: var(--habari-dark-500, #6c757d);
    margin-bottom: 16px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.apprendre-breadcrumb a {
    color: var(--habari-secondary-navy, #03224D);
    text-decoration: none;
}

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

/* ── TITRES ───────────────────────────────────────────────── */

.apprendre-lecon-title {
    font-family: var(--habari-font-heading);
    color: var(--habari-secondary-navy, #03224D);
    margin-bottom: 8px;
}

.apprendre-lecon-duree-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    color: var(--habari-dark-500, #6c757d);
    margin-bottom: 24px;
}

/* ── CONTENU LEÇON ────────────────────────────────────────── */

.apprendre-lecon-contenu {
    line-height: 1.75;
    color: var(--habari-dark-800, #212529);
    margin-bottom: 32px;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
    box-sizing: border-box;
    text-align: justify;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Médias et tableaux éditeur — contenus dans leur parent */
.apprendre-lecon-contenu img,
.apprendre-lecon-contenu video,
.apprendre-lecon-contenu iframe,
.apprendre-lecon-contenu embed,
.apprendre-lecon-contenu object {
    max-width: 100%;
    height: auto;
    display: block;
}

.apprendre-lecon-contenu table {
    max-width: 100%;
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Exclusions justification */
.apprendre-lecon-contenu pre,
.apprendre-lecon-contenu code {
    white-space: pre-wrap;
    max-width: 100%;
    overflow-x: auto;
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

.apprendre-lecon-contenu h1,
.apprendre-lecon-contenu h2,
.apprendre-lecon-contenu h3,
.apprendre-lecon-contenu h4,
.apprendre-lecon-contenu h5,
.apprendre-lecon-contenu h6,
.apprendre-lecon-contenu blockquote {
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

.apprendre-lecon-contenu :not(pre) > code {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── TIPS ─────────────────────────────────────────────────── */

.apprendre-tip {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 4px solid;
}

.apprendre-tip--astuce {
    border-color: var(--habari-info-500, #0d6efd);
    background: var(--habari-info-50, #e7f1ff);
}

.apprendre-tip--rappel {
    border-color: var(--habari-success-500, #198754);
    background: var(--habari-success-50, #e8f5e9);
}

.apprendre-tip--attention {
    border-color: var(--habari-warning-500, #ffc107);
    background: var(--habari-warning-50, #fff9e6);
}

.apprendre-tip-label {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.apprendre-tip--astuce .apprendre-tip-label    { color: var(--habari-info-700, #0a58ca); }
.apprendre-tip--rappel .apprendre-tip-label    { color: var(--habari-success-700, #146c43); }
.apprendre-tip--attention .apprendre-tip-label { color: var(--habari-warning-700, #997404); }

/* ── TABLEAUX ─────────────────────────────────────────────── */

.apprendre-tableau-wrap {
    margin: 24px 0;
    max-width: 100%;
    box-sizing: border-box;
}

.apprendre-tableau-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--habari-secondary-navy, #03224D);
}

.apprendre-tableau-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.apprendre-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.apprendre-tableau th,
.apprendre-tableau td {
    border: 1px solid var(--habari-dark-300, #ced4da);
    padding: 10px 14px;
    text-align: left;
}

.apprendre-tableau th {
    background: var(--habari-secondary-navy, #03224D);
    color: #fff;
    font-weight: 600;
}

.apprendre-tableau tr:nth-child(even) td {
    background: var(--habari-dark-50, #f8f9fa);
}

.apprendre-tableau-locked {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--habari-dark-100, #f1f3f5);
    color: var(--habari-dark-500, #6c757d);
    font-size: 0.875rem;
    border: 1px solid var(--habari-dark-200, #dee2e6);
    margin: 16px 0;
}

/* ── EXERCICES ────────────────────────────────────────────── */

.apprendre-lecon-exercices {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 2px solid var(--habari-dark-200, #dee2e6);
    max-width: 100%;
    box-sizing: border-box;
}

.apprendre-exercice {
    margin-bottom: 32px;
    padding: 24px;
    background: var(--habari-dark-50, #f8f9fa);
    border: 1px solid var(--habari-dark-200, #dee2e6);
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.apprendre-exercice--locked {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--habari-dark-400, #adb5bd);
    font-style: italic;
}

.apprendre-exercice-question {
    font-family: var(--habari-font-shimaore);
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--habari-secondary-navy, #03224D);
}

/* QCM */
.apprendre-qcm-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apprendre-qcm-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-qcm-options label:hover {
    border-color: var(--habari-secondary-navy, #03224D);
}

.apprendre-qcm-options label:has(input:checked) {
    border-color: var(--habari-secondary-navy, #03224D);
    background: rgba(3, 34, 77, 0.05);
    font-weight: 600;
}

/* QCM — révélation après 3 échecs */
.apprendre-qcm-options li.is-correct {
    border-color: var(--habari-success-600, #198754);
    background: rgba(25, 135, 84, 0.08);
}

.apprendre-qcm-options li.is-correct label {
    color: var(--habari-success-600, #198754);
    font-weight: 700;
}

.apprendre-qcm-options li.is-wrong {
    border-color: var(--habari-primary-brand, #9E2E2E);
    background: rgba(158, 46, 46, 0.08);
}

.apprendre-qcm-options li.is-wrong label {
    color: var(--habari-primary-brand, #9E2E2E);
}

/* Trous */
.apprendre-trous-phrase {
    font-family: var(--habari-font-shimaore);
    line-height: 2.2;
}

.apprendre-trou-wrapper {
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
}

.apprendre-trou-input {
    width: 120px;
    padding: 2px 8px;
    border: none;
    border-bottom: 2px solid var(--habari-secondary-navy, #03224D);
    background: color-mix(in srgb, var(--habari-secondary-navy, #03224D) 6%, transparent);
    font-size: 1rem;
    text-align: center;
    cursor: text;
    transition: border-color 0.2s, background 0.2s;
}

.apprendre-trou-input.is-correct {
    border: 2px solid var(--habari-success-500);
    background: var(--habari-success-50, #f0fdf4);
}

.apprendre-trou-input.is-wrong {
    border: 2px solid var(--habari-warning-500, #dc2626);
    background: var(--habari-warning-50, #fef2f2);
}

.apprendre-trou-input:focus {
    outline: 2px solid var(--habari-primary-brand, #9E2E2E);
    border-bottom-color: var(--habari-primary-brand, #9E2E2E);
    background: color-mix(in srgb, var(--habari-primary-brand, #9E2E2E) 6%, transparent);
}

.apprendre-trous-indication {
    font-size: 0.85rem;
    color: var(--habari-dark-3, #666);
    font-style: italic;
    margin-top: 8px;
}

/* Association */
.apprendre-association-cols {
    display: flex;
    gap: 40px;
}

.apprendre-association-left,
.apprendre-association-right {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apprendre-association-left li,
.apprendre-association-right li {
    font-family: var(--habari-font-shimaore);
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--habari-dark-200, #dee2e6);
    cursor: pointer;
    font-size: 0.9375rem;
}

.apprendre-association-left li.is-selected {
    border-color: var(--habari-primary-brand, #9E2E2E);
    background: var(--habari-primary-brand-10, #fdf2f2);
    outline: 2px solid var(--habari-primary-brand, #9E2E2E);
    outline-offset: 2px;
}

.apprendre-association-left li.is-linked,
.apprendre-association-right li.is-linked {
    border-color: var(--habari-secondary-navy, #03224D);
    background: var(--habari-secondary-navy-off, #e8e8ee);
}

/* États après validation */
.apprendre-association-left li.is-correct,
.apprendre-association-right li.is-correct {
    border-color: var(--habari-success-600, #198754);
    background: var(--habari-success-100, #d1e7dd);
    position: relative;
}

.apprendre-association-left li.is-correct::after,
.apprendre-association-right li.is-correct::after {
    content: '✓';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--habari-success-600, #198754);
    font-weight: 700;
    font-size: 0.875rem;
}

.apprendre-association-left li.is-wrong,
.apprendre-association-right li.is-wrong {
    border-color: var(--habari-warning-600, #dc3545);
    background: var(--habari-warning-50, #f8d7da);
    position: relative;
}

.apprendre-association-left li.is-wrong::after,
.apprendre-association-right li.is-wrong::after {
    content: '✕';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--habari-warning-600, #dc3545);
    font-weight: 700;
    font-size: 0.875rem;
}

/* Focus clavier visible */
.apprendre-association-left li:focus-visible,
.apprendre-association-right li:focus-visible {
    outline: 2px solid var(--habari-primary-brand, #9E2E2E);
    outline-offset: 2px;
}

/* Hint : élément cliquable pour délier */
.apprendre-association-left li.is-linked,
.apprendre-association-right li.is-linked {
    cursor: pointer;
}

.apprendre-association-left li.is-linked:hover,
.apprendre-association-right li.is-linked:hover {
    opacity: 0.85;
}

/* SVG overlay pour les lignes de liaison */
.apprendre-association {
    position: relative;
}

.apprendre-association-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

@keyframes habari-assoc-draw-line {
    to { stroke-dashoffset: 0; }
}

.apprendre-assoc-line {
    stroke-dasharray: var(--line-length, 200);
    stroke-dashoffset: var(--line-length, 200);
}

.apprendre-assoc-line.is-drawn {
    animation: habari-assoc-draw-line 0.22s ease-out forwards;
}

/* Puzzle */
.apprendre-puzzle-pool,
.apprendre-puzzle-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 48px;
    padding: 12px;
    border: 2px dashed var(--habari-dark-300, #ced4da);
    margin-bottom: 12px;
}

.apprendre-puzzle-mot {
    font-family: var(--habari-font-shimaore);
    padding: 6px 12px;
    background: var(--habari-secondary-navy, #03224D);
    color: #fff;
    cursor: grab;
    font-size: 0.9375rem;
    user-select: none;
}

.apprendre-puzzle-mot.is-dragging { opacity: 0.5; }

/* Puzzle — feedback mot par mot */
.apprendre-puzzle-mot.is-correct {
    background: var(--habari-success-600, #198754);
}

.apprendre-puzzle-mot.is-wrong {
    background: var(--habari-primary-brand, #9E2E2E);
}

/* Mots mêlés */
.apprendre-mots-meles {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.apprendre-wordgrid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    user-select: none;
    margin-bottom: 20px;
    position: relative;
    touch-action: none;
}

.apprendre-wordgrid.is-done {
    pointer-events: none;
    opacity: 0.5;
}

.apprendre-exercice-already-done {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--habari-info-50, #e7f1ff);
    border-left: 4px solid var(--habari-info-500, #0d6efd);
    color: var(--habari-info-700, #0a58ca);
    font-size: 0.875rem;
    font-weight: 600;
}

.apprendre-ex-done-badge {
    color: var(--habari-success-600, #198754);
    font-weight: 600;
    margin-left: 8px;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: normal;
}

.apprendre-ex-failed-badge {
    color: var(--habari-warning-600, #dc3545);
    font-weight: 600;
    margin-left: 8px;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: normal;
}

.apprendre-exercice.is-ex-failed {
    border-left: 4px solid var(--habari-warning-600, #dc3545);
    background: var(--habari-warning-50, #fff5f5);
}

.apprendre-exercice-locked-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--habari-dark-100, #f1f3f5);
    border-left: 4px solid var(--habari-dark-400, #adb5bd);
    color: var(--habari-dark-600, #495057);
    font-size: 0.875rem;
    font-weight: 600;
}

.apprendre-wordgrid-row {
    display: flex;
    gap: 0;
    width: 100%;
}

.apprendre-wordgrid-cell {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    font-weight: 700;
    font-size: calc(var(--cell-size, 38px) * 0.42);
    cursor: pointer;
    text-transform: uppercase;
    color: var(--habari-secondary-navy, #03224D);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: none;
}

@media (hover: hover) {
    .apprendre-wordgrid-cell:hover {
        background: transparent;
        outline: 2px solid var(--habari-primary-brand, #9E2E2E);
    }
}

.apprendre-wordgrid-cell:focus-visible {
    background: transparent;
    outline: 2px solid var(--habari-primary-brand, #9E2E2E);
}

.apprendre-wordgrid-cell.is-selecting {
    background: transparent;
    outline: none;
    color: #fff;
    position: relative;
    z-index: 1;
}

.apprendre-wordgrid-cell.is-found,
.apprendre-wordgrid-cell.is-found-word {
    color: #fff;
    position: relative;
    z-index: 1;
    background: transparent;
}

.apprendre-ex-validate.is-hidden {
    display: none;
}

.apprendre-ex-validate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Séparateur horizontal léger entre les lignes uniquement */
.apprendre-wordgrid-row + .apprendre-wordgrid-row {
    border-top: 1px solid var(--habari-dark-100, #f1f3f5);
}

/* ── Mot en cours de construction (point 3) ── */
.apprendre-word-preview {
    min-height: 2rem;
    font-family: var(--habari-font-heading, serif);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--habari-secondary-navy, #03224D);
    text-align: center;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.1s;
}

.apprendre-word-preview.is-active {
    opacity: 1;
}

/* ── Animation tracé SVG lignes trouvées (point 5) ── */
@keyframes habari-draw-line {
    to { stroke-dashoffset: 0; }
}

.apprendre-found-line {
    stroke-dasharray: var(--line-length);
    stroke-dashoffset: var(--line-length);
    animation: habari-draw-line 0.32s ease-out forwards;
}

.apprendre-mots-meles-words {
    margin-top: 4px;
}

.apprendre-mots-meles-words strong {
    display: block;
    font-family: var(--habari-font-heading, serif);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--habari-dark-400, #868e96);
    margin-bottom: 8px;
}

.apprendre-mots-meles-words ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.apprendre-mots-meles-words li {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--habari-dark-200, #dee2e6);
    color: var(--habari-secondary-navy, #03224D);
    transition: background-color 0.25s, border-color 0.25s, color 0.25s;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.apprendre-mots-meles-words li.is-found {
    text-decoration: none;
    font-weight: 700;
    /* background-color et border-color définis via inline style JS */
}

/* Chronomètre */
.apprendre-chrono {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--habari-dark-400, #868e96);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.apprendre-chrono::before {
    content: '⏱';
    font-style: normal;
}

.apprendre-chrono-display {
    font-variant-numeric: tabular-nums;
    color: var(--habari-secondary-navy, #03224D);
}

.apprendre-chrono-display {
    font-variant-numeric: tabular-nums;
}

/* Feedback exercice */
.apprendre-exercice-feedback {
    margin-top: 12px;
    font-weight: 600;
    font-size: 0.875rem;
}

.apprendre-exercice-feedback.is-correct { color: var(--habari-success-600, #198754); }
.apprendre-exercice-feedback.is-wrong   { color: var(--habari-primary-brand, #9E2E2E); }

/* ── BOUTONS (UIkit overrides) ───────────────────────────── */

/* Bouton "Leçon suivante" désactivé */
.uk-button.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── PROGRESSION ──────────────────────────────────────────── */

.apprendre-progress-bar-wrap {
    background: var(--habari-dark-200, #dee2e6);
    height: 8px;
    margin: 8px 0;
    position: relative;
    overflow: hidden;
}

.apprendre-progress-bar-wrap--large {
    height: 12px;
    margin: 16px 0;
}

.apprendre-progress-bar-wrap--small {
    margin: 8px 20px;
    height: 4px;
}

.apprendre-progress-bar {
    height: 100%;
    background: var(--habari-success-500, #198754);
    transition: width 0.3s ease;
}

.apprendre-progress-bar-wrap span {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    background: transparent;
    color: var(--habari-dark-600, #495057);
    padding: 0 4px;
}

/* ── CATALOGUE ARCHIVE ────────────────────────────────────── */

.habari-apprendre-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px var(--habari-apprendre-gap);
}

.apprendre-archive-header {
    margin-bottom: 32px;
}

.apprendre-archive-header h1 {
    font-family: var(--habari-font-heading);
    color: var(--habari-secondary-navy, #03224D);
}

.apprendre-filters {
    margin-bottom: 32px;
}

.apprendre-filters-inner {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.apprendre-filters select {
    padding: 8px 12px;
    border: 1px solid var(--habari-dark-300, #ced4da);
    background: #fff;
    font-size: 0.9375rem;
    color: var(--habari-dark-800, #212529);
}

.apprendre-catalogue {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.apprendre-cours-card {
    border: 1px solid var(--habari-dark-200, #dee2e6);
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.apprendre-cours-card-thumb img {
    width: 100%;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.apprendre-cours-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.apprendre-cours-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.apprendre-cours-card-title {
    font-family: var(--habari-font-heading);
    font-size: 1.0625rem;
    margin: 0;
}

.apprendre-cours-card-title a {
    color: var(--habari-secondary-navy, #03224D);
    text-decoration: none;
}

.apprendre-cours-card-extrait {
    position: relative;
    max-height: 60px;
    overflow: hidden;
    font-size: 0.875rem;
    color: var(--habari-dark-600, #495057);
}

.apprendre-extrait-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, #fff);
}

/* ── BADGES ───────────────────────────────────────────────── */

.apprendre-badge-niveau,
.apprendre-badge-lmplus {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.apprendre-badge-niveau--debutant      { background: var(--habari-success-100, #d1e7dd); color: var(--habari-success-800, #0a3622); }
.apprendre-badge-niveau--intermediaire { background: var(--habari-warning-100, #fff3cd); color: var(--habari-warning-800, #533f03); }
.apprendre-badge-niveau--avance        { background: var(--habari-primary-brand-10, #fdf2f2); color: var(--habari-primary-brand, #9E2E2E); }

.apprendre-badge-lmplus { background: var(--habari-secondary-navy, #03224D); color: #fff; }

.apprendre-cours-card-duree {
    font-size: 0.75rem;
    color: var(--habari-dark-400, #6c757d);
    align-self: center;
}

.apprendre-cours-card-duree strong {
    font-weight: 600;
    color: var(--habari-dark-700, #343a40);
}

/* ── LOCK ICON ────────────────────────────────────────────── */

.apprendre-lock .habari-apprendre-lock,
.apprendre-icon-lock .habari-apprendre-lock {
    font-size: 14px;
    vertical-align: middle;
}

/* ── NOTICES ──────────────────────────────────────────────── */

.apprendre-notice {
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.875rem;
}

.apprendre-notice--warning {
    background: var(--habari-warning-50, #fff9e6);
    border-left: 4px solid var(--habari-warning-500, #ffc107);
    color: var(--habari-warning-800, #533f03);
}

/* ── PAYWALL ──────────────────────────────────────────────── */

.apprendre-paywall {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px var(--habari-apprendre-gap);
}

.apprendre-paywall-inner {
    max-width: 560px;
    text-align: center;
}

.apprendre-paywall-icon {
    margin-bottom: 20px;
    font-size: 48px;
    line-height: 1;
}

.apprendre-paywall-title {
    font-family: var(--habari-font-heading);
    color: var(--habari-secondary-navy, #03224D);
    margin-bottom: 12px;
}

.apprendre-paywall-text {
    color: var(--habari-dark-600, #495057);
    margin-bottom: 28px;
}

.apprendre-paywall-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── ARGUMENTAIRE ─────────────────────────────────────────── */

.apprendre-argumentaire {
    margin-top: 60px;
    padding: 40px;
    background: var(--habari-secondary-navy, #03224D);
    color: #fff;
}

.apprendre-argumentaire-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.apprendre-argumentaire h2 {
    font-family: var(--habari-font-heading);
    color: #fff;
    margin-bottom: 24px;
}

.apprendre-avantages {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.apprendre-avantages li::before {
    content: '✓ ';
    color: var(--habari-success-400, #75b798);
    font-weight: bold;
}

.apprendre-argumentaire-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── ACTIONS LEÇON ────────────────────────────────────────── */

.apprendre-lecon-actions {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--habari-dark-200, #dee2e6);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.apprendre-lecon-done {
    color: var(--habari-success-600, #198754);
    font-weight: 600;
    margin: 0;
}

.apprendre-lecon-feedback {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-question-form {
    margin-top: 16px;
}

.apprendre-question-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--habari-dark-300, #ced4da);
    font-size: 0.9375rem;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
    margin-bottom: 8px;
}

/* ── EXERCICES — flux séquentiel ──────────────────────────── */

/* Numéro d'exercice */
.apprendre-ex-num {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--habari-dark-400, #6c757d);
    margin-bottom: 6px;
}

/* Exercice non encore débloqué */
.apprendre-exercice.is-seq-locked {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

/* Footer par exercice */
.apprendre-ex-footer {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    align-items: center;
    flex-wrap: wrap;
}

/* Bouton Recommencer verrouillé (non-abonné) */
.apprendre-ex-retry:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── COMPTEUR DE TENTATIVES ──────────────────────────────── */

.apprendre-ex-attempts-info {
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--habari-dark-500, #6c757d);
}

.apprendre-ex-attempts-info.is-low {
    color: var(--habari-warning-600, #d97706);
    font-weight: 600;
}

.apprendre-ex-attempts-info.is-exhausted {
    color: var(--habari-primary-brand, #9E2E2E);
    font-weight: 600;
}

.apprendre-ex-attempts-count {
    font-weight: 700;
}

/* ── HOME ENCART ────────────────────────────────────────────
   Styles déplacés dans front-page.css pour cohérence DA
   ─────────────────────────────────────────────────────────── */

/* ── PAGE COURS ───────────────────────────────────────────── */

.habari-apprendre-cours {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px var(--habari-apprendre-gap);
}

.apprendre-cours-header {
    margin-bottom: 40px;
}

.apprendre-cours-hero img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    display: block;
    margin-bottom: 24px;
}

.apprendre-cours-intro-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.apprendre-cours-duree-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--habari-dark-600, #495057);
}

.apprendre-cours-intro h1 {
    font-family: var(--habari-font-heading);
    color: var(--habari-secondary-navy, #03224D);
    margin-bottom: 12px;
}

.apprendre-cours-description {
    font-size: 1.0625rem;
    color: var(--habari-dark-600, #495057);
    line-height: 1.65;
    text-align: justify;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.apprendre-cours-chapitres h2 {
    font-family: var(--habari-font-heading);
    color: var(--habari-secondary-navy, #03224D);
    margin-bottom: 16px;
}

.apprendre-cours-version-footer {
    text-align: right;
    font-size: 0.85em;
    color: var(--habari-dark-400, #9ca3af);
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-chapitres-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-chapitre-item {
    border-bottom: 1px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-chapitre-item:last-child { border-bottom: none; }

.apprendre-chapitre-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    gap: 12px;
}

.apprendre-chapitre-title {
    font-weight: 600;
    color: var(--habari-secondary-navy, #03224D);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

a.apprendre-chapitre-title:hover { text-decoration: underline; }

.apprendre-chapitre-item.is-locked .apprendre-chapitre-title {
    color: var(--habari-dark-400, #adb5bd);
}

.apprendre-chapitre-count {
    font-size: 0.8125rem;
    color: var(--habari-dark-500, #6c757d);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.apprendre-chapitre-duree {
    color: var(--habari-dark-400, #adb5bd);
}

/* ── PAGE CHAPITRE ───────────────────────────────────────── */

.habari-apprendre-chapitre {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px var(--habari-apprendre-gap);
}

.habari-apprendre-chapitre h1 {
    font-family: var(--habari-font-heading);
    color: var(--habari-secondary-navy, #03224D);
    margin-bottom: 6px;
}

.apprendre-chapitre-duree-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    color: var(--habari-dark-500, #6c757d);
    margin-bottom: 12px;
}

.apprendre-chapitre-desc {
    font-size: 1.0625rem;
    color: var(--habari-dark-600, #495057);
    line-height: 1.65;
    margin-bottom: 32px;
    text-align: justify;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.apprendre-lecons-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-lecon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--habari-dark-200, #dee2e6);
    gap: 12px;
}

.apprendre-lecon-item:last-child {
    border-bottom: none;
}

.apprendre-lecon-item a {
    font-weight: 600;
    color: var(--habari-secondary-navy, #03224D);
    text-decoration: none;
}

.apprendre-lecon-item a:hover {
    text-decoration: underline;
}

.apprendre-lecon-item.is-locked span {
    color: var(--habari-dark-400, #adb5bd);
}

.apprendre-lecon-item.is-completed a {
    color: var(--habari-success-700, #198754);
}

.apprendre-lecon-duree {
    font-size: 0.8125rem;
    color: var(--habari-dark-400, #adb5bd);
    white-space: nowrap;
    margin-left: auto;
}

/* ── STARS ────────────────────────────────────────────────── */

.apprendre-cours-card-utilite .star { color: var(--habari-dark-200, #dee2e6); }
.apprendre-cours-card-utilite .star.filled { color: var(--habari-warning-400, #ffda6a); }

/* ── SECTIONS CHAPITRE (MEP + EXAMEN) ───────────────────── */

.apprendre-chapitre-section {
    margin-top: var(--habari-space-lg, 32px);
    padding-top: var(--habari-space-md, 24px);
    border-top: 2px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-chapitre-section.is-locked {
    opacity: 0.6;
    pointer-events: none;
}

.apprendre-chapitre-section-header {
    display: flex;
    align-items: center;
    gap: var(--habari-space-sm, 12px);
    margin-bottom: var(--habari-space-md, 16px);
}

.apprendre-chapitre-section-header h2 {
    margin: 0;
    font-family: var(--habari-font-heading);
    color: var(--habari-secondary-navy, #03224D);
}

.apprendre-chapitre-section-status {
    font-size: 0.875rem;
    color: var(--habari-dark-500, #6c757d);
}

/* Mise en pratique */
.apprendre-mise-pratique {
    margin-top: var(--habari-space-md, 16px);
}

.apprendre-mep-footer {
    margin-top: var(--habari-space-md, 24px);
    display: flex;
    gap: var(--habari-space-sm, 12px);
    flex-wrap: wrap;
}

.apprendre-mep-result {
    margin-top: var(--habari-space-md, 16px);
    padding: var(--habari-space-md, 16px);
}

.apprendre-mep-result.is-passed {
    background: var(--habari-success-100, #d1e7dd);
    border: 1px solid var(--habari-success-300, #75b798);
    color: var(--habari-success-700, #0f5132);
}

.apprendre-mep-result.is-failed {
    background: var(--habari-warning-100, #fff3cd);
    border: 1px solid var(--habari-warning-300, #ffecb5);
    color: var(--habari-warning-700, #664d03);
}

.apprendre-mep-done {
    color: var(--habari-success-700, #198754);
    font-weight: 600;
}

/* Examen */
.apprendre-examen {
    margin-top: var(--habari-space-md, 16px);
}

.apprendre-examen-seuil {
    background: var(--habari-dark-50, #f8f9fa);
    padding: var(--habari-space-sm, 12px);
    margin-bottom: var(--habari-space-md, 16px);
    font-size: 0.9rem;
}

.apprendre-examen-cooldown {
    background: var(--habari-warning-100, #fff3cd);
    border: 1px solid var(--habari-warning-300, #ffecb5);
    padding: var(--habari-space-sm, 12px) var(--habari-space-md, 16px);
    margin-bottom: var(--habari-space-md, 16px);
}

.apprendre-examen-footer {
    margin-top: var(--habari-space-md, 24px);
}

.apprendre-examen-result {
    padding: var(--habari-space-md, 16px);
    margin-top: var(--habari-space-md, 16px);
}

.apprendre-examen-result.is-passed {
    background: var(--habari-success-100, #d1e7dd);
    border: 1px solid var(--habari-success-300, #75b798);
    color: var(--habari-success-700, #0f5132);
}

.apprendre-examen-result.is-failed {
    background: var(--habari-warning-100, #fff3cd);
    border: 1px solid var(--habari-warning-300, #ffecb5);
    color: var(--habari-warning-700, #664d03);
}

/* Sidebar extras */
.apprendre-sidebar-extras {
    margin: var(--habari-space-xs, 8px) 0 0 0;
    padding-left: var(--habari-space-sm, 12px);
    list-style: none;
}

.apprendre-sidebar-extra {
    font-size: 0.8125rem;
    padding: 3px 0;
}

.apprendre-sidebar-extra a {
    color: var(--habari-dark-600, #495057);
    text-decoration: none;
}

.apprendre-sidebar-extra a:hover {
    text-decoration: underline;
}

.apprendre-sidebar-extra.is-done { color: var(--habari-success-600, #198754); }
.apprendre-sidebar-extra.is-locked { opacity: 0.5; }
.apprendre-sidebar-extra.is-cooldown { color: var(--habari-warning-600, #997404); }

/* ============================================================
   ONGLET "MES COURS" (page-mon-compte.php)
   ============================================================ */

/* ── Stats globales ───────────────────────────────────────── */
.apprendre-mescours-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.apprendre-mescours-stat {
    background: var(--habari-dark-50, #f8f9fa);
    border: 1px solid var(--habari-dark-200, #dee2e6);
    padding: 16px;
    text-align: center;
}

.apprendre-mescours-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--habari-secondary-navy, #03224D);
    line-height: 1.2;
}

.apprendre-mescours-stat-label {
    font-size: 0.75rem;
    color: var(--habari-dark-500, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.apprendre-mescours-stat--alert .apprendre-mescours-stat-value {
    color: var(--habari-primary-brand, #9E2E2E);
}

.apprendre-mescours-meta-failed {
    color: var(--habari-primary-brand, #9E2E2E);
    font-weight: 600;
}

.apprendre-mescours-lecon-failed {
    color: var(--habari-primary-brand, #9E2E2E);
    font-size: 0.85em;
}

/* ── Liste des cours ──────────────────────────────────────── */
.apprendre-mescours-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.apprendre-mescours-item {
    background: #fff;
    border: 1px solid var(--habari-dark-200, #dee2e6);
    padding: 20px;
}

.apprendre-mescours-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.apprendre-mescours-item-header strong {
    font-family: var(--habari-font-heading);
    font-size: 1.0625rem;
    color: var(--habari-secondary-navy, #03224D);
}

.apprendre-mescours-version {
    font-size: 0.75rem;
    color: var(--habari-dark-400, #adb5bd);
    font-weight: 600;
    background: var(--habari-dark-100, #f1f3f5);
    padding: 2px 8px;
}

.apprendre-mescours-item-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* ── Synthèse par cours ───────────────────────────────────── */
.apprendre-mescours-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--habari-dark-500, #6c757d);
}

.apprendre-mescours-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Certificat message ───────────────────────────────────── */
.apprendre-mescours-cert-msg {
    font-size: 0.8125rem;
    color: var(--habari-dark-500, #6c757d);
    margin-top: 8px;
    font-style: italic;
}

.apprendre-mescours-cert-msg.is-near {
    color: var(--habari-success-600, #198754);
    font-weight: 600;
    font-style: normal;
}

/* ── Détail par chapitre (accordéon) ──────────────────────── */
.apprendre-mescours-detail {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-mescours-chapitre {
    margin-bottom: 4px;
    border: 1px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-mescours-chapitre-toggle {
    width: 100%;
    background: var(--habari-dark-50, #f8f9fa);
    border: none;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--habari-secondary-navy, #03224D);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.apprendre-mescours-chapitre-toggle:hover {
    background: var(--habari-dark-100, #f1f3f5);
}

.apprendre-mescours-chapitre-toggle .toggle-icon {
    font-size: 0.75rem;
    color: var(--habari-dark-400, #adb5bd);
    transition: transform 0.2s ease;
}

.apprendre-mescours-chapitre.is-open .apprendre-mescours-chapitre-toggle .toggle-icon {
    transform: rotate(180deg);
}

.apprendre-mescours-chapitre-content {
    display: none;
    padding: 12px 16px;
    background: #fff;
}

.apprendre-mescours-chapitre.is-open .apprendre-mescours-chapitre-content {
    display: block;
}

.apprendre-mescours-chapitre-lock {
    font-size: 0.75rem;
    color: var(--habari-dark-400, #adb5bd);
    margin-left: 4px;
}

/* ── Lignes leçon / MEP / Examen ──────────────────────────── */
.apprendre-mescours-lecon-row,
.apprendre-mescours-mep-row,
.apprendre-mescours-exam-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
}

.apprendre-mescours-lecon-row {
    padding: 4px 0;
}

.apprendre-mescours-mep-row,
.apprendre-mescours-exam-row {
    margin-top: 4px;
    padding-top: 4px;
}

.apprendre-mescours-mep-row {
    border-top: 1px dashed var(--habari-dark-200, #dee2e6);
}

.apprendre-mescours-lecon-row a,
.apprendre-mescours-mep-row a,
.apprendre-mescours-exam-row a {
    color: var(--habari-dark-700, #343a40);
    text-decoration: none;
}

.apprendre-mescours-lecon-row a:hover,
.apprendre-mescours-mep-row a:hover,
.apprendre-mescours-exam-row a:hover {
    text-decoration: underline;
}

.apprendre-mescours-lecon-status,
.apprendre-mescours-mep-status,
.apprendre-mescours-exam-status {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

.apprendre-mescours-lecon-status.is-done,
.apprendre-mescours-mep-status.is-done,
.apprendre-mescours-exam-status.is-done {
    color: var(--habari-success-600, #198754);
}

.apprendre-mescours-lecon-status.is-progress,
.apprendre-mescours-mep-status.is-progress {
    color: var(--habari-warning-500, #ffc107);
}

.apprendre-mescours-lecon-status.is-pending,
.apprendre-mescours-exam-status.is-pending {
    color: var(--habari-dark-400, #adb5bd);
}

.apprendre-mescours-lecon-status.is-locked,
.apprendre-mescours-mep-status.is-locked,
.apprendre-mescours-exam-status.is-locked {
    color: var(--habari-dark-400, #adb5bd);
}

.apprendre-mescours-lecon-count {
    color: var(--habari-dark-400, #adb5bd);
    font-size: 0.75rem;
    margin-left: auto;
    white-space: nowrap;
}

.apprendre-mescours-exam-score {
    color: var(--habari-dark-400, #adb5bd);
    font-size: 0.75rem;
    margin-left: auto;
    white-space: nowrap;
}

.apprendre-mescours-mep-label,
.apprendre-mescours-exam-label {
    font-style: italic;
}

.apprendre-mescours-exam-label {
    font-weight: 600;
    font-style: normal;
}

/* ── Section "À découvrir" ────────────────────────────────── */
.apprendre-mescours-discover {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--habari-dark-200, #dee2e6);
}

.apprendre-mescours-discover-title {
    font-family: var(--habari-font-heading);
    color: var(--habari-secondary-navy, #03224D);
    margin-bottom: 16px;
    font-size: 1.125rem;
}

.apprendre-mescours-discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.apprendre-mescours-discover-card {
    background: #fff;
    border: 1px solid var(--habari-dark-200, #dee2e6);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apprendre-mescours-discover-card h4 {
    font-family: var(--habari-font-heading);
    font-size: 0.9375rem;
    margin: 0;
    color: var(--habari-secondary-navy, #03224D);
}

.apprendre-mescours-discover-card h4 a {
    color: inherit;
    text-decoration: none;
}

.apprendre-mescours-discover-card h4 a:hover {
    text-decoration: underline;
}

.apprendre-mescours-discover-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Streak ───────────────────────────────────────────────── */
.apprendre-streak-block {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 12px 16px;
    background: var(--habari-warning-50, #fff8e1);
    border-left: 3px solid var(--habari-warning-500, #ffc107);
}

.apprendre-streak-block .streak-emoji {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.apprendre-streak-block .streak-current {
    font-size: 0.9375rem;
    font-weight: 700;
}

.apprendre-streak-block .streak-record {
    font-size: 0.8125rem;
    color: var(--habari-dark-500, #6c757d);
    margin-left: 8px;
}

/* ── Titres de section ────────────────────────────────────── */
.apprendre-mescours-section-title {
    margin-top: 32px;
    margin-bottom: 12px;
    font-family: var(--habari-font-heading);
    color: var(--habari-secondary-navy, #03224D);
    font-size: 1.125rem;
}

/* ── Formulaire notifications ─────────────────────────────── */
.apprendre-mescours-notif-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.9375rem;
}

.apprendre-mescours-notif-form input[type="number"] {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--habari-dark-300, #ced4da);
}

.apprendre-mescours-notif-status {
    margin-left: 12px;
    font-size: 0.8125rem;
    color: var(--habari-success-600, #198754);
}

/* ── Filtres cours ────────────────────────────────────────── */
.apprendre-mescours-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}

.apprendre-mescours-filters select {
    padding: 6px 10px;
    border: 1px solid var(--habari-dark-300, #ced4da);
    background: #fff;
    font-size: 0.875rem;
    color: var(--habari-dark-800, #212529);
}

/* ── Scores par type d'exercice ───────────────────────────── */
.apprendre-mescours-ex-types {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-left: 28px;
}

.apprendre-mescours-ex-type {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: var(--habari-dark-100, #f1f3f5);
    color: var(--habari-dark-600, #495057);
    white-space: nowrap;
}

.apprendre-mescours-ex-type.is-complete {
    background: var(--habari-success-100, #d1e7dd);
    color: var(--habari-success-700, #0f5132);
}

/* ── Recommandation ───────────────────────────────────────── */
.apprendre-mescours-recommend {
    margin-top: 24px;
    padding: 16px;
    background: var(--habari-dark-50, #f8f9fa);
    border-left: 3px solid var(--habari-primary-brand, #9E2E2E);
}

.apprendre-mescours-recommend-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--habari-secondary-navy, #03224D);
    margin-bottom: 8px;
}

.apprendre-mescours-recommend-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.apprendre-mescours-recommend-card img {
    width: 80px;
    height: 45px;
    object-fit: cover;
    flex-shrink: 0;
}

.apprendre-mescours-recommend-card a {
    color: var(--habari-secondary-navy, #03224D);
    text-decoration: none;
    font-weight: 600;
}

.apprendre-mescours-recommend-card a:hover {
    text-decoration: underline;
}

/* ── Toast éléments verrouillés (mobile) ── */
.habari-locked-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 9999;
    background: var(--habari-dark-900, #1a1a1a);
    color: #fff;
    padding: 0.75rem 1rem;
    max-width: 90%;
    width: max-content;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.4;
    opacity: 0;
    pointer-events: auto;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.habari-locked-toast.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 420px) {
    .habari-locked-toast {
        bottom: 12%;
        top: auto;
        transform: translateX(-50%) scale(0.96);
    }

    .habari-locked-toast.visible {
        transform: translateX(-50%) scale(1);
    }
}

/*
 * Responsive Apprendre : voir breakpoints.css
 * Toutes les règles @media sont centralisées dans breakpoints.css
 */