* {
    box-sizing: border-box;
}

:root {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111827;
    background: #f7f8fc;
}

body {
    margin: 0;
    min-height: 100vh;
}

a {
    color: inherit;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 5vw;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

.brand {
    font-weight: 800;
    text-decoration: none;
}

.container {
    width: min(1100px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

.hero {
    padding: clamp(2rem, 7vw, 6rem) 0;
    max-width: 760px;
}

.hero h1 {
    font-size: clamp(2.2rem, 8vw, 4.8rem);
    line-height: 1;
    margin: .5rem 0 1rem;
}

.eyebrow,
.badge {
    display: inline-block;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.actions,
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

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

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    padding: .8rem 1.1rem;
    border: 0;
    border-radius: 12px;
    background: #111827;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.button.secondary {
    background: #e5e7eb;
    color: #111827;
}

.card,
.auth-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.3rem;
}

.auth-card {
    max-width: 520px;
    margin: 2rem auto;
}

form {
    display: grid;
    gap: 1rem;
}

label {
    display: grid;
    gap: .45rem;
    font-weight: 700;
}

input {
    width: 100%;
    min-height: 46px;
    padding: .8rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
}

.alert {
    padding: .9rem;
    border-radius: 10px;
    background: #fee2e2;
    color: #991b1b;
}

.site-footer {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
}

@media (max-width: 720px) {
    .site-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-header nav {
        width: 100%;
    }

    .button {
        width: 100%;
    }
}


.page-heading {
    margin-bottom: 1.5rem;
}

.page-heading h1,
.dashboard-welcome h1 {
    margin: .35rem 0;
}

.page-heading.compact {
    margin-top: 2rem;
}

.course-card,
.learning-card {
    display: flex;
    flex-direction: column;
}

.course-card .button,
.learning-card .button {
    margin-top: auto;
}

.course-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.language-flag {
    font-size: 1.8rem;
}

.language-flag.large {
    font-size: 2.5rem;
}

.course-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin: 1rem 0;
}

.course-meta div {
    padding: .7rem;
    background: #f8fafc;
    border-radius: 10px;
}

.course-meta dt {
    color: #6b7280;
    font-size: .78rem;
}

.course-meta dd {
    margin: .2rem 0 0;
    font-weight: 700;
}

.course-hero {
    padding: clamp(1.4rem, 5vw, 3rem);
}

.inline-form {
    display: inline-flex;
}

.module-list {
    margin-top: 2rem;
}

.module-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: .8rem;
}

.module-number {
    display: grid;
    place-items: center;
    width: 48px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    font-weight: 800;
}

.muted {
    color: #6b7280;
}

.dashboard-section {
    margin-top: 2rem;
}

.progress-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.progress-track {
    height: 9px;
    margin: .45rem 0 1.25rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #111827;
}

.dashboard-stats {
    margin-top: 1rem;
}

.stat-card {
    display: grid;
    gap: .35rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
}

.flash {
    padding: .9rem 1rem;
    border-radius: 10px;
    margin: 0 0 1rem;
}

.flash-success {
    background: #dcfce7;
    color: #166534;
}

.flash-error {
    background: #fee2e2;
    color: #991b1b;
}

.flash-info {
    background: #dbeafe;
    color: #1e40af;
}

.empty-state {
    text-align: center;
}


.module-card-link,
.lesson-list-item {
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.module-card-link:hover,
.lesson-list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.breadcrumb {
    display: inline-flex;
    margin-bottom: 1rem;
    color: #475569;
    text-decoration: none;
}

.lesson-list {
    display: grid;
    gap: .85rem;
}

.lesson-list-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.lesson-index {
    display: grid;
    place-items: center;
    width: 52px;
    aspect-ratio: 1;
    border-radius: 16px;
    background: #eef2ff;
    font-weight: 800;
}

.lesson-title-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.lesson-title-row h2 {
    margin-top: 0;
}

.lesson-complete {
    display: inline-flex;
    align-items: center;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}

.lesson-page {
    max-width: 860px;
    margin: 0 auto;
}

.lesson-page-header {
    margin-bottom: 2rem;
}

.lesson-page-header h1 {
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.05;
    margin: .6rem 0 1rem;
}

.lesson-content {
    display: grid;
    gap: 1rem;
}

.lesson-block {
    padding: clamp(1.1rem, 4vw, 1.8rem);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
}

.lesson-block h2 {
    margin-top: 0;
}

.lesson-secondary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    color: #64748b;
}

.vocabulary-block {
    border-left: 5px solid #2563eb;
}

.grammar-block {
    border-left: 5px solid #7c3aed;
}

.example-block {
    background: #f8fafc;
}

.example-main {
    margin-bottom: .35rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.example-translation {
    margin: 0;
    color: #64748b;
}

.dialogue-block {
    background: #f8fafc;
}

.tip-block {
    background: #fffbeb;
    border-color: #fde68a;
}

.summary-block {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.audio-block {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.block-label {
    display: inline-block;
    margin-bottom: .6rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #475569;
}

.lesson-footer {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.lesson-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

.lesson-navigation form {
    display: inline-flex;
}

@media (max-width: 640px) {
    .lesson-list-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .lesson-index {
        width: 42px;
        border-radius: 12px;
    }

    .lesson-title-row {
        display: block;
    }

    .lesson-navigation,
    .lesson-navigation form {
        display: grid;
        width: 100%;
    }
}


.lesson-exercises {
    margin-top: 2rem;
}

.exercise-list {
    display: grid;
    gap: .85rem;
}

.exercise-list-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.exercise-list-item h3 {
    margin: .65rem 0 0;
}

.exercise-page {
    max-width: 760px;
    margin: 0 auto;
}

.exercise-header {
    margin-bottom: 1.25rem;
}

.exercise-header h1 {
    margin: .65rem 0;
}

.exercise-card {
    padding: clamp(1.2rem, 5vw, 2rem);
}

.exercise-prompt {
    margin-top: 0;
    font-size: clamp(1.2rem, 4vw, 1.7rem);
    font-weight: 800;
}

.answer-options {
    display: grid;
    gap: .8rem;
}

.answer-option {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.answer-option:hover {
    border-color: #64748b;
}

.answer-option input {
    width: auto;
    min-height: auto;
}

.exercise-result {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 14px;
}

.exercise-result.correct {
    background: #dcfce7;
    color: #166534;
}

.exercise-result.incorrect {
    background: #fee2e2;
    color: #991b1b;
}

.exercise-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

@media (max-width: 640px) {
    .exercise-list-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .exercise-actions {
        display: grid;
    }
}


.course-exams {
    margin-top: 2.5rem;
}

.exam-card {
    display: flex;
    flex-direction: column;
}

.exam-card .button {
    margin-top: auto;
}

.exam-page,
.result-page {
    max-width: 900px;
    margin: 0 auto;
}

.exam-header {
    margin-bottom: 1.5rem;
}

.exam-header h1 {
    margin: .6rem 0;
    font-size: clamp(2rem, 6vw, 3.8rem);
}

.exam-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.exam-meta span {
    padding: .5rem .75rem;
    border-radius: 999px;
    background: #e2e8f0;
    font-weight: 700;
    font-size: .86rem;
}

#exam-timer {
    background: #111827;
    color: #fff;
}

.exam-questions {
    display: grid;
    gap: 1rem;
}

.exam-question {
    padding: clamp(1.2rem, 5vw, 2rem);
}

.exam-question-number {
    margin-bottom: .75rem;
    color: #64748b;
    font-size: .85rem;
    font-weight: 700;
}

.exam-submit-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
}

.exam-submit-bar p {
    margin: 0;
}

.result-hero {
    padding: clamp(2rem, 7vw, 4rem);
    border-radius: 22px;
    text-align: center;
}

.result-hero.passed {
    background: #dcfce7;
    color: #166534;
}

.result-hero.failed {
    background: #fee2e2;
    color: #991b1b;
}

.result-hero h1 {
    margin: .4rem 0;
    font-size: clamp(3rem, 12vw, 6rem);
}

.result-summary {
    margin-top: 1rem;
}

.result-correction {
    margin-top: 2rem;
}

.result-answer {
    margin-bottom: .9rem;
    border-left: 5px solid #cbd5e1;
}

.result-answer.correct {
    border-left-color: #16a34a;
}

.result-answer.incorrect {
    border-left-color: #dc2626;
}

@media (max-width: 640px) {
    .exam-submit-bar {
        display: grid;
    }
}


.pronunciation-page {
    max-width: 780px;
    margin: 0 auto;
}

.pronunciation-card {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.2rem, 5vw, 2rem);
}

.pronunciation-target {
    padding: 1.2rem;
    border-radius: 16px;
    background: #f8fafc;
    text-align: center;
}

.pronunciation-target p {
    margin: .5rem 0 0;
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    font-weight: 800;
}

.pronunciation-listen-actions,
.pronunciation-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
}

.microphone-button {
    display: grid;
    place-items: center;
    gap: .55rem;
    width: min(100%, 260px);
    min-height: 150px;
    padding: 1rem;
    border: 0;
    border-radius: 24px;
    background: #111827;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.microphone-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.microphone-icon {
    font-size: 3rem;
}

.recording-status {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
}

.recording-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dc2626;
    animation: recordingPulse 1s infinite;
}

@keyframes recordingPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.45);
        opacity: .5;
    }
}

.pronunciation-transcript,
.pronunciation-result,
.recording-preview {
    padding: 1rem;
    border-radius: 16px;
    background: #f8fafc;
}

.pronunciation-transcript p {
    margin-bottom: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.pronunciation-score {
    display: flex;
    align-items: baseline;
    gap: .7rem;
}

.pronunciation-score strong {
    font-size: 2.6rem;
}

.word-comparison {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .9rem;
}

.comparison-word {
    padding: .35rem .6rem;
    border-radius: 999px;
    font-weight: 700;
}

.comparison-word.correct {
    background: #dcfce7;
    color: #166534;
}

.comparison-word.incorrect {
    background: #fee2e2;
    color: #991b1b;
}

.recording-preview audio {
    width: 100%;
    margin-top: .7rem;
}

@media (max-width: 640px) {
    .pronunciation-listen-actions,
    .pronunciation-controls {
        display: grid;
    }

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


.profile-layout,
.vocabulary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 1rem;
    align-items: start;
}

.profile-form,
.profile-summary {
    padding: clamp(1.2rem, 4vw, 2rem);
}

.profile-summary {
    position: sticky;
    top: 1rem;
}

.daily-goal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 1.5rem 0;
    padding: clamp(1.2rem, 4vw, 2rem);
}

.goal-circle {
    --progress: 0;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 120px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff 58%, transparent 59%),
        conic-gradient(
            #111827 calc(var(--progress) * 1%),
            #e5e7eb 0
        );
}

.goal-circle strong {
    font-size: 1.35rem;
}

.dashboard-tools {
    margin-top: 1rem;
}

.vocabulary-stats {
    margin-bottom: 1rem;
}

.vocabulary-layout {
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
}

.vocabulary-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .8rem;
    margin-bottom: 1rem;
}

.vocabulary-filters label {
    min-width: 180px;
    flex: 1;
}

.vocabulary-list {
    display: grid;
    gap: .85rem;
}

.vocabulary-card {
    display: grid;
    gap: .8rem;
}

.vocabulary-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.vocabulary-card h2 {
    margin: .65rem 0 .2rem;
}

.vocabulary-translation {
    margin: 0;
    font-size: 1.1rem;
    color: #475569;
}

.vocabulary-card blockquote {
    margin: 0;
    padding: .8rem 1rem;
    border-left: 4px solid #6366f1;
    background: #f8fafc;
}

.vocabulary-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .8rem;
    align-items: center;
}

.vocabulary-card-actions form {
    display: inline-flex;
}

.speech-icon-button {
    display: grid;
    place-items: center;
    width: 46px;
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: #eef2ff;
    cursor: pointer;
    font-size: 1.2rem;
}

@media (max-width: 820px) {
    .profile-layout,
    .vocabulary-layout {
        grid-template-columns: 1fr;
    }

    .profile-summary {
        position: static;
    }
}

@media (max-width: 600px) {
    .daily-goal {
        align-items: flex-start;
    }

    .goal-circle {
        width: 88px;
    }

    .vocabulary-filters,
    .vocabulary-card-actions {
        display: grid;
    }
}


.connection-banner {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: .65rem 1rem;
    background: #fef3c7;
    color: #92400e;
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
}

.pwa-banner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(520px, calc(100% - 2rem));
    padding: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
    backdrop-filter: blur(16px);
}

.pwa-banner[hidden] {
    display: none;
}

.pwa-banner > div:first-child {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.pwa-banner span {
    color: #64748b;
    font-size: .9rem;
}

.pwa-banner-actions {
    display: flex;
    gap: .55rem;
    margin-left: auto;
}

.update-banner {
    border-color: #a7f3d0;
    background: rgba(236, 253, 245, .98);
}

.is-offline .site-header {
    border-top: 3px solid #f59e0b;
}

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

.app-install-grid .card {
    display: flex;
    flex-direction: column;
}

.app-install-grid .button {
    margin-top: auto;
}

.app-platform-icon {
    font-size: 2.5rem;
}

.app-information {
    margin-top: 1rem;
}

.app-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.app-feature-list > div {
    display: grid;
    gap: .25rem;
    padding: 1rem;
    border-radius: 14px;
    background: #f8fafc;
}

.app-feature-list span {
    color: #64748b;
}

@media (max-width: 820px) {
    .app-install-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pwa-banner {
        display: grid;
        right: .75rem;
        bottom: .75rem;
        width: calc(100% - 1.5rem);
    }

    .pwa-banner-actions {
        display: grid;
        width: 100%;
        margin-left: 0;
    }

    .app-feature-list {
        grid-template-columns: 1fr;
    }
}


.today-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: clamp(1.3rem, 5vw, 2.5rem);
}

.today-hero h1 {
    margin: .45rem 0;
    font-size: clamp(2rem, 6vw, 3.8rem);
}

.today-stats {
    margin-top: 1rem;
}

.today-section {
    margin-top: 2rem;
}

.today-main-task {
    max-width: 720px;
    padding: clamp(1.2rem, 5vw, 2rem);
}

.today-main-task h3 {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
}

.today-revision-card {
    display: flex;
    flex-direction: column;
}

.today-revision-card .button {
    margin-top: auto;
}

.reminder-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

@media (max-width: 640px) {
    .today-hero,
    .reminder-card {
        align-items: flex-start;
    }

    .reminder-card {
        display: grid;
    }
}


.language-switcher {
    display: inline-flex;
    padding: .2rem;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #f8fafc;
}

.language-switcher a {
    display: grid;
    place-items: center;
    min-width: 34px;
    min-height: 30px;
    padding: .25rem .45rem;
    border-radius: 999px;
    color: #475569;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 800;
}

.language-switcher a.active {
    background: #111827;
    color: #fff;
}

@media (max-width: 760px) {
    .language-switcher {
        order: -1;
    }
}


.level-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.5rem, 5vw, 2.5rem);
}

.level-hero h1 {
    margin: .4rem 0;
    font-size: clamp(2.4rem, 8vw, 4.5rem);
}

.level-progress {
    width: min(520px, 100%);
    margin-top: 1rem;
}

.level-emblem {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 130px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    font-size: 3.2rem;
    font-weight: 900;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
}

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

.achievement-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.achievement-card.locked {
    opacity: .55;
    filter: grayscale(.75);
}

.achievement-icon {
    display: grid;
    place-items: center;
    width: 68px;
    aspect-ratio: 1;
    border-radius: 18px;
    background: #eef2ff;
    font-size: 2.2rem;
}

.achievement-card.unlocked .achievement-icon {
    background: #fef3c7;
}

.xp-history {
    display: grid;
}

.xp-history-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid #e5e7eb;
}

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

.xp-history-row > div {
    display: grid;
    gap: .25rem;
}

.xp-value {
    color: #4f46e5;
    white-space: nowrap;
}

.personal-rank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.personal-rank strong {
    font-size: 2rem;
}

.leaderboard-list {
    display: grid;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

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

.leaderboard-row.current-user {
    border-radius: 14px;
    background: #eef2ff;
}

.leaderboard-position {
    font-size: 1.3rem;
    font-weight: 900;
    text-align: center;
}

.leaderboard-user {
    display: grid;
    gap: .2rem;
}

.leaderboard-note {
    text-align: center;
}

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

    .level-emblem {
        width: 90px;
        font-size: 2.2rem;
    }
}

@media (max-width: 540px) {
    .level-hero {
        align-items: flex-start;
    }

    .achievement-card {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .achievement-icon {
        width: 54px;
    }

    .leaderboard-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .leaderboard-row .xp-value {
        grid-column: 2;
    }
}


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

.certificate-summary-card {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.certificate-summary-icon {
    display: grid;
    place-items: center;
    width: 72px;
    aspect-ratio: 1;
    border-radius: 18px;
    background: #fef3c7;
    font-size: 2.3rem;
}

.certificate-summary-actions {
    display: grid;
    gap: .55rem;
}

.certificate-page {
    max-width: 1100px;
    margin: 0 auto;
}

.certificate-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.certificate-document {
    padding: 18px;
    background: #e5e7eb;
}

.certificate-border {
    position: relative;
    min-height: 720px;
    padding: clamp(2rem, 7vw, 5rem);
    border: 12px double #111827;
    background:
        radial-gradient(circle at top left, rgba(79, 70, 229, .08), transparent 34%),
        radial-gradient(circle at bottom right, rgba(245, 158, 11, .12), transparent 34%),
        #fff;
    text-align: center;
}

.certificate-brand {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.certificate-label {
    display: inline-block;
    margin-top: 2rem;
    color: #4f46e5;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.certificate-intro {
    margin: 2rem 0 .5rem;
    color: #64748b;
    font-size: 1.1rem;
}

.certificate-document h1 {
    margin: .5rem 0;
    font-family: Georgia, serif;
    font-size: clamp(2.6rem, 8vw, 5rem);
    font-weight: 500;
}

.certificate-document h2 {
    margin: .5rem 0;
    font-size: clamp(1.6rem, 5vw, 2.8rem);
}

.certificate-course-details {
    color: #475569;
    font-weight: 700;
}

.certificate-seal {
    display: grid;
    place-items: center;
    width: 120px;
    aspect-ratio: 1;
    margin: 2.5rem auto;
    border: 4px solid #b45309;
    border-radius: 50%;
    color: #92400e;
    background: #fef3c7;
}

.certificate-seal span {
    font-size: 2rem;
}

.certificate-footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2rem;
}

.certificate-footer > div {
    display: grid;
    gap: .3rem;
    min-width: 180px;
    padding-top: .7rem;
    border-top: 1px solid #111827;
}

.certificate-footer span {
    color: #64748b;
    font-size: .85rem;
}

.certificate-verification {
    margin-top: 2rem;
    color: #64748b;
    font-size: .78rem;
}

.verification-page {
    max-width: 760px;
    margin: 0 auto;
}

.verification-form {
    display: flex;
    align-items: end;
    gap: .8rem;
}

.verification-form label {
    flex: 1;
}

.verification-result {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.verification-result.valid {
    border-left: 6px solid #16a34a;
}

.verification-result.invalid {
    border-left: 6px solid #dc2626;
}

.verification-icon {
    display: grid;
    place-items: center;
    width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f1f5f9;
    font-size: 2rem;
    font-weight: 900;
}

.verification-result.valid .verification-icon {
    background: #dcfce7;
    color: #166534;
}

.verification-result.invalid .verification-icon {
    background: #fee2e2;
    color: #991b1b;
}

.verification-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.verification-details div {
    padding: .75rem;
    border-radius: 12px;
    background: #f8fafc;
}

.verification-details dt {
    color: #64748b;
    font-size: .78rem;
}

.verification-details dd {
    margin: .2rem 0 0;
    font-weight: 800;
}

@media (max-width: 720px) {
    .certificate-summary-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .certificate-summary-actions {
        grid-column: 1 / -1;
    }

    .certificate-footer,
    .certificate-toolbar,
    .verification-form {
        display: grid;
    }

    .verification-details {
        grid-template-columns: 1fr;
    }
}

@media print {
    body {
        background: #fff !important;
    }

    .site-header,
    .site-footer,
    .pwa-banner,
    .connection-banner,
    .no-print {
        display: none !important;
    }

    .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .certificate-document {
        padding: 0;
        background: #fff;
    }

    .certificate-border {
        min-height: 98vh;
        break-inside: avoid;
    }
}


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

.placement-language-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: inherit;
    text-decoration: none;
}

.placement-language-card .language-flag {
    font-size: 3rem;
}

.placement-language-card .button {
    margin-top: auto;
    text-align: center;
}

.placement-intro {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    max-width: 820px;
}

.placement-intro-icon {
    display: grid;
    place-items: center;
    width: 100px;
    aspect-ratio: 1;
    border-radius: 24px;
    background: #f8fafc;
    font-size: 3.8rem;
}

.placement-history-card {
    display: flex;
    flex-direction: column;
}

.placement-history-card > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.placement-history-card .button {
    margin-top: auto;
}

.placement-result-page {
    max-width: 900px;
    margin: 0 auto;
}

.placement-result-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: clamp(1.5rem, 6vw, 3rem);
}

.placement-result-hero h1 {
    margin: .4rem 0;
    font-size: clamp(4rem, 14vw, 8rem);
}

.placement-level-emblem {
    display: grid;
    place-items: center;
    width: 150px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #eef2ff;
    font-size: 4.5rem;
}

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

.placement-skill-card {
    display: grid;
    gap: .75rem;
}

.placement-recommendation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (max-width: 760px) {
    .placement-language-grid,
    .placement-skill-grid {
        grid-template-columns: 1fr;
    }

    .placement-recommendation {
        display: grid;
    }
}

@media (max-width: 560px) {
    .placement-intro {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .placement-intro-icon {
        width: 68px;
        font-size: 2.4rem;
    }

    .placement-result-hero {
        align-items: flex-start;
    }

    .placement-level-emblem {
        width: 90px;
        font-size: 2.8rem;
    }
}


.placement-pronunciation {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 16px;
    background: #f8fafc;
}

.pronunciation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.pronunciation-status {
    margin: 0;
    font-weight: 700;
}

.pronunciation-transcript {
    padding: .85rem 1rem;
    border-radius: 12px;
    background: #eef2ff;
    color: #312e81;
    font-weight: 700;
}

.pronunciation-fallback {
    margin: 0;
    font-size: .85rem;
}

@media (max-width: 560px) {
    .pronunciation-actions {
        display: grid;
    }
}


.oral-history-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.oral-attempt-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

.oral-attempt-score {
    display: grid;
    place-items: center;
    align-content: center;
    width: 100px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #eef2ff;
    text-align: center;
}

.oral-attempt-score strong {
    font-size: 1.6rem;
}

.oral-attempt-score span {
    color: #64748b;
    font-size: .75rem;
}

.oral-attempt-content audio {
    width: min(100%, 460px);
    margin-top: .7rem;
}

@media (max-width: 760px) {
    .oral-attempt-card {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .oral-attempt-score {
        width: 76px;
    }

    .oral-attempt-card > .button {
        grid-column: 1 / -1;
    }
}


.vocabulary-heading,
.review-session-header {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: end;
}

.review-session-stats {
    display: flex;
    gap: .8rem;
}

.review-session-stats span {
    display: grid;
    gap: .15rem;
    min-width: 120px;
    padding: .8rem 1rem;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    font-size: .8rem;
}

.review-session-stats strong {
    color: #111827;
    font-size: 1.25rem;
}

.review-language-filter,
.review-session-size {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 1rem 0;
}

.review-session-size {
    margin-top: -.35rem;
    margin-bottom: 1.25rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .45rem .75rem;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    text-decoration: none;
    font-weight: 700;
    font-size: .84rem;
}

.chip.active {
    border-color: #111827;
    background: #111827;
    color: #fff;
}

.flashcard-session {
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-width: 820px;
    margin: 2rem auto;
}

.flashcard {
    width: 100%;
    min-height: 430px;
    perspective: 1200px;
    cursor: pointer;
    outline: none;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    min-height: 430px;
    transition: transform .5s ease;
    transform-style: preserve-3d;
}

.flashcard.revealed .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.4rem, 5vw, 3rem);
    border: 1px solid #dbe2ea;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .10);
    backface-visibility: hidden;
}

.flashcard-back {
    transform: rotateY(180deg);
    background:
        radial-gradient(circle at top right, rgba(79, 70, 229, .10), transparent 30%),
        #fff;
}

.flashcard-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flashcard-main {
    text-align: center;
}

.flashcard-main h2 {
    margin: .65rem 0;
    font-size: clamp(2rem, 8vw, 4rem);
}

.flashcard-main blockquote {
    max-width: 620px;
    margin: 1.5rem auto 0;
    padding: 1rem;
    border-left: 4px solid #4f46e5;
    background: #f8fafc;
    text-align: left;
}

.flashcard-hint {
    margin: 0;
    color: #64748b;
    text-align: center;
}

.review-rating-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
    width: 100%;
}

.review-rating-buttons[hidden] {
    display: none;
}

.review-rating {
    display: grid;
    gap: .2rem;
    min-height: 72px;
    padding: .75rem;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font: inherit;
}

.review-rating span {
    color: #64748b;
    font-size: .72rem;
}

.review-rating.again {
    border-color: #fecaca;
    background: #fff1f2;
}

.review-rating.hard {
    border-color: #fed7aa;
    background: #fff7ed;
}

.review-rating.good {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.review-rating.easy {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.review-complete {
    display: grid;
    justify-items: center;
    max-width: 680px;
    margin: 2rem auto;
    text-align: center;
}

.review-complete-icon {
    display: grid;
    place-items: center;
    width: 90px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #dcfce7;
    color: #166534;
    font-size: 2.5rem;
    font-weight: 900;
}

.vocabulary-memory-card {
    margin-top: 1rem;
}

.review-calendar {
    display: grid;
    grid-template-columns: repeat(15, minmax(22px, 1fr));
    gap: .4rem;
}

.review-calendar-day {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .65rem;
}

.review-calendar-day.intensity-1 {
    background: #dbeafe;
}

.review-calendar-day.intensity-2 {
    background: #93c5fd;
    color: #1e3a8a;
}

.review-calendar-day.intensity-3 {
    background: #3b82f6;
    color: #fff;
}

.review-calendar-day.intensity-4 {
    background: #1d4ed8;
    color: #fff;
}

.vocabulary-stat-columns {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 1rem;
    margin-top: 1rem;
}

.language-memory-row {
    padding: .9rem 0;
    border-bottom: 1px solid #e5e7eb;
}

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

.upcoming-review-list {
    display: grid;
}

.upcoming-review-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid #e5e7eb;
}

@media (max-width: 760px) {
    .vocabulary-heading,
    .review-session-header {
        display: grid;
        align-items: start;
    }

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

    .review-rating-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vocabulary-stat-columns {
        grid-template-columns: 1fr;
    }

    .review-calendar {
        grid-template-columns: repeat(10, minmax(22px, 1fr));
    }
}

@media (max-width: 520px) {
    .flashcard,
    .flashcard-inner {
        min-height: 390px;
    }

    .review-calendar {
        grid-template-columns: repeat(6, minmax(22px, 1fr));
    }
}


.lesson-title-row {
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    align-items: flex-start;
}

.lesson-personal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    flex: 0 0 auto;
}

.personal-action {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 42px;
    padding: .55rem .75rem;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
}

.personal-action.active {
    border-color: #4f46e5;
    background: #eef2ff;
    color: #312e81;
}

.personal-action:disabled {
    opacity: .55;
    cursor: wait;
}

.lesson-note-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 400;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 1rem;
    width: min(520px, 100%);
    height: 100dvh;
    padding: 1.2rem;
    border-left: 1px solid #dbe2ea;
    background: #fff;
    box-shadow: -18px 0 50px rgba(15, 23, 42, .18);
}

.lesson-note-panel[hidden] {
    display: none;
}

.lesson-note-panel-header,
.lesson-note-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.lesson-note-panel-header h2 {
    margin: .25rem 0 0;
}

.lesson-note-close {
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 1.7rem;
}

.lesson-note-panel textarea {
    width: 100%;
    min-height: 0;
    resize: none;
    font-size: 1rem;
    line-height: 1.65;
}

.note-panel-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 350;
    background: rgba(15, 23, 42, .42);
}

.lesson-personal-toast {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    z-index: 500;
    transform: translateX(-50%);
    max-width: calc(100% - 2rem);
    padding: .75rem 1rem;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .25);
    font-size: .9rem;
    font-weight: 800;
}

.lesson-personal-toast[hidden] {
    display: none;
}

.saved-content-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 1rem 0;
}

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

.saved-content-card {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.saved-content-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    font-size: 1.5rem;
}

.saved-content-meta {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.saved-content-main h2 {
    margin: .65rem 0 .35rem;
}

.personal-note-preview {
    margin: 1rem 0 0;
    padding: .9rem 1rem;
    border-left: 4px solid #4f46e5;
    background: #f8fafc;
}

.continue-exact-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

@media (max-width: 760px) {
    .lesson-title-row,
    .continue-exact-card {
        display: grid;
    }

    .saved-content-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .saved-content-card > .button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .lesson-personal-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .personal-action {
        justify-content: center;
        padding-inline: .45rem;
    }

    .personal-action span {
        display: none;
    }

    .lesson-note-panel {
        padding: 1rem;
    }
}


.lesson-feedback-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.lesson-rating {
    display: flex;
    gap: .2rem;
}

.lesson-rating button {
    padding: .15rem;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
}

.lesson-rating button.active {
    color: #f59e0b;
}

.feedback-dialog {
    width: min(620px, calc(100% - 2rem));
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
}

.feedback-dialog::backdrop {
    background: rgba(15, 23, 42, .58);
}

.feedback-dialog-card {
    display: grid;
    gap: 1rem;
    padding: 1.3rem;
    border-radius: 22px;
    background: #fff;
}

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

.feedback-history-card {
    display: grid;
    gap: .7rem;
}

.feedback-history-card > div:first-child {
    display: flex;
    gap: .5rem;
}

.feedback-history-card blockquote {
    margin: 0;
    padding: 1rem;
    border-left: 4px solid #4f46e5;
    background: #f8fafc;
}

.feedback-stars {
    margin: 0;
    color: #f59e0b;
    font-size: 1.6rem;
    letter-spacing: .12em;
}

@media (max-width: 760px) {
    .lesson-feedback-card {
        grid-template-columns: 1fr;
        align-items: start;
    }
}


.auth-secondary-link {
    display: inline-block;
    margin-top: .9rem;
    color: #4f46e5;
    font-weight: 700;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto 1rem;
}

.verification-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 36px;
    padding: .45rem .75rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .85rem;
}

.verification-badge.verified {
    background: #dcfce7;
    color: #166534;
}

.verification-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.sessions-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

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

.session-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.session-card.current {
    border-color: #4f46e5;
    background: #f8faff;
}

.session-icon {
    display: grid;
    place-items: center;
    width: 62px;
    aspect-ratio: 1;
    border-radius: 18px;
    background: #eef2ff;
    font-size: 2rem;
}

.session-title-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.session-title-row h2 {
    margin: 0;
}

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

    .sessions-heading,
    .session-card {
        display: grid;
    }

    .session-card {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .session-card > form {
        grid-column: 1 / -1;
    }
}


/* ========================================================================== 
   V23 — Refonte parcours et modules
   ========================================================================== */

:root {
    --learn-ink: #172033;
    --learn-muted: #667085;
    --learn-surface: #ffffff;
    --learn-soft: #f4f8f8;
    --learn-teal: #087f83;
    --learn-teal-dark: #05666a;
    --learn-teal-soft: #e6f5f4;
    --learn-orange: #f58b28;
    --learn-orange-soft: #fff1df;
    --learn-line: #dfe8e8;
    --learn-success: #23966f;
    --learn-shadow: 0 18px 50px rgba(28, 55, 65, .09);
}

body {
    color: var(--learn-ink);
    background:
        radial-gradient(circle at 8% 4%, rgba(8, 127, 131, .07), transparent 24rem),
        radial-gradient(circle at 94% 12%, rgba(245, 139, 40, .08), transparent 22rem),
        #f7faf9;
}

.learning-back-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1.4rem;
    color: var(--learn-muted);
    font-size: .92rem;
    font-weight: 750;
    text-decoration: none;
}

.learning-back-link:hover {
    color: var(--learn-teal);
}

.learning-course-hero,
.learning-module-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    padding: clamp(1.35rem, 4vw, 3.25rem);
    border: 1px solid rgba(8, 127, 131, .14);
    border-radius: 32px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 249, 247, .96));
    box-shadow: var(--learn-shadow);
}

.learning-course-hero::before,
.learning-module-hero::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -110px;
    top: -130px;
    border-radius: 50%;
    background: rgba(245, 139, 40, .1);
}

.learning-course-hero-copy,
.learning-module-hero-main,
.learning-mascot-panel,
.learning-module-side-card {
    position: relative;
    z-index: 1;
}

.learning-course-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
}

.learning-flag {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--learn-line);
    border-radius: 15px;
    background: #fff;
    font-size: 1.75rem;
    box-shadow: 0 8px 22px rgba(28, 55, 65, .08);
}

.learning-level-pill,
.learning-module-label,
.learning-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .35rem .72rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.learning-level-pill {
    background: var(--learn-teal-soft);
    color: var(--learn-teal-dark);
}

.learning-module-label {
    background: var(--learn-orange-soft);
    color: #a5530f;
}

.learning-course-hero h1,
.learning-module-hero h1 {
    max-width: 820px;
    margin: 1rem 0 .85rem;
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.learning-module-hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.65rem);
}

.learning-course-description {
    max-width: 720px;
    margin: 0;
    color: var(--learn-muted);
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.72;
}

.learning-course-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.45rem;
}

.learning-course-facts span {
    padding: .65rem .85rem;
    border: 1px solid var(--learn-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .72);
    color: var(--learn-muted);
    font-size: .88rem;
}

.learning-course-facts strong {
    color: var(--learn-ink);
}

.learning-course-progress {
    max-width: 680px;
    margin-top: 1.45rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(8, 127, 131, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .75);
}

.learning-course-progress.compact-progress {
    max-width: 600px;
}

.learning-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.learning-progress-heading div {
    display: grid;
    gap: .12rem;
}

.learning-progress-heading span {
    color: var(--learn-muted);
    font-size: .8rem;
}

.learning-progress-heading strong {
    font-size: .93rem;
}

.learning-progress-heading b {
    color: var(--learn-teal-dark);
    font-size: 1.2rem;
}

.learning-progress-track,
.learning-mini-progress {
    overflow: hidden;
    border-radius: 999px;
    background: #dfeceb;
}

.learning-progress-track {
    height: 10px;
    margin-top: .75rem;
}

.learning-progress-track span,
.learning-mini-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--learn-teal), #2aa8a5);
}

.learning-primary-action {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .15rem 1rem;
    width: min(100%, 520px);
    margin-top: 1.15rem;
    padding: .95rem 1.05rem;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--learn-teal), var(--learn-teal-dark));
    box-shadow: 0 12px 28px rgba(8, 127, 131, .22);
    text-align: left;
}

.learning-primary-action span {
    font-size: 1rem;
}

.learning-primary-action small {
    grid-column: 1;
    color: rgba(255, 255, 255, .78);
    font-size: .78rem;
    font-weight: 550;
}

.learning-primary-action i {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 1.35rem;
    font-style: normal;
}

.learning-start-form {
    display: block;
}

.learning-mascot-panel {
    display: flex;
    min-height: 360px;
    align-items: flex-end;
    justify-content: center;
}

.learning-mascot-panel img {
    display: block;
    width: min(100%, 365px);
    max-height: 390px;
    object-fit: contain;
    filter: drop-shadow(0 16px 20px rgba(49, 62, 66, .13));
}

.learning-mascot-bubble {
    position: absolute;
    z-index: 2;
    top: 1.1rem;
    left: 0;
    max-width: 220px;
    padding: .85rem 1rem;
    border: 1px solid var(--learn-line);
    border-radius: 18px 18px 18px 4px;
    background: #fff;
    color: var(--learn-ink);
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.4;
    box-shadow: 0 12px 30px rgba(28, 55, 65, .1);
    animation: mascot-float 4s ease-in-out infinite;
}

@keyframes mascot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.learning-section {
    margin-top: clamp(2.4rem, 6vw, 4.5rem);
}

.learning-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

.learning-section-header h2 {
    margin: .25rem 0 0;
    font-size: clamp(1.7rem, 4vw, 2.45rem);
    letter-spacing: -.035em;
}

.learning-section-header > p {
    max-width: 440px;
    margin: 0;
    color: var(--learn-muted);
    line-height: 1.55;
    text-align: right;
}

.learning-eyebrow {
    color: var(--learn-teal);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.learning-module-roadmap,
.learning-lesson-roadmap {
    display: grid;
    gap: 1rem;
}

.learning-module-card,
.learning-lesson-card {
    position: relative;
    display: grid;
    align-items: center;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--learn-line);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 25px rgba(28, 55, 65, .045);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.learning-module-card {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 1.15rem;
    min-height: 168px;
    padding: 1.25rem 1.35rem;
    border-radius: 23px;
}

.learning-module-card:hover,
.learning-lesson-card:hover {
    transform: translateY(-3px);
    border-color: rgba(8, 127, 131, .35);
    box-shadow: 0 18px 38px rgba(28, 55, 65, .09);
}

.learning-module-marker,
.learning-lesson-index {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 19px;
    background: var(--learn-soft);
    color: var(--learn-teal-dark);
    font-weight: 900;
}

.learning-module-marker {
    width: 66px;
    height: 66px;
    font-size: 1.25rem;
}

.learning-module-card.is-complete .learning-module-marker,
.learning-lesson-card.is-complete .learning-lesson-index {
    background: #ddf5eb;
    color: var(--learn-success);
}

.learning-module-card.is-current,
.learning-lesson-card.is-current {
    border-color: rgba(8, 127, 131, .38);
    box-shadow: 0 14px 34px rgba(8, 127, 131, .09);
}

.learning-module-card.is-current .learning-module-marker,
.learning-lesson-card.is-current .learning-lesson-index {
    background: var(--learn-teal);
    color: #fff;
}

.learning-module-content {
    min-width: 0;
}

.learning-module-topline,
.learning-lesson-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--learn-muted);
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.learning-status-pill {
    min-height: 26px;
    padding: .25rem .58rem;
    background: #eef3f3;
    color: var(--learn-muted);
    letter-spacing: .025em;
}

.is-current .learning-status-pill {
    background: var(--learn-teal-soft);
    color: var(--learn-teal-dark);
}

.is-complete .learning-status-pill {
    background: #ddf5eb;
    color: var(--learn-success);
}

.learning-module-card h3,
.learning-lesson-card h3 {
    margin: .55rem 0 .45rem;
    letter-spacing: -.02em;
}

.learning-module-card h3 {
    font-size: 1.28rem;
}

.learning-module-card p,
.learning-lesson-card p,
.learning-exam-card p,
.learning-module-side-card p {
    color: var(--learn-muted);
    line-height: 1.6;
}

.learning-module-card p {
    margin: 0;
}

.learning-module-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.learning-module-meta,
.learning-lesson-meta,
.learning-exam-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    color: var(--learn-muted);
    font-size: .82rem;
    font-weight: 650;
}

.learning-card-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--learn-soft);
    color: var(--learn-teal-dark);
    font-size: 1.1rem;
    font-weight: 900;
    transition: transform .2s ease, background .2s ease;
}

.learning-module-card:hover .learning-card-arrow,
.learning-lesson-card:hover .learning-card-arrow {
    transform: translateX(3px);
    background: var(--learn-teal-soft);
}

.learning-mini-progress {
    height: 5px;
    margin-top: 1rem;
}

.learning-exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.learning-exam-card {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding: 1.35rem;
    border: 1px solid var(--learn-line);
    border-radius: 23px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(28, 55, 65, .055);
}

.learning-exam-card h3 {
    margin: 1rem 0 .3rem;
    font-size: 1.28rem;
}

.learning-exam-card .button {
    margin-top: auto;
    background: var(--learn-ink);
}

.learning-exam-icon,
.learning-module-side-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: .8rem;
    border-radius: 15px;
    background: var(--learn-orange-soft);
    color: var(--learn-orange);
    font-size: 1.35rem;
}

.learning-module-side-card {
    align-self: center;
    padding: 1.35rem;
    border: 1px solid rgba(8, 127, 131, .14);
    border-radius: 24px;
    background: rgba(255, 255, 255, .76);
    backdrop-filter: blur(10px);
}

.learning-module-side-card > strong {
    display: block;
    font-size: 1.15rem;
}

.learning-module-side-card p {
    margin-bottom: 1.2rem;
}

.learning-module-side-stat {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--learn-line);
}

.learning-module-side-stat span {
    color: var(--learn-teal-dark);
    font-size: 2.15rem;
    font-weight: 900;
}

.learning-module-side-stat small {
    color: var(--learn-muted);
}

.learning-lesson-card {
    grid-template-columns: 52px minmax(0, 1fr) 36px;
    gap: 1rem;
    min-height: 136px;
    padding: 1.15rem 1.25rem;
    border-radius: 21px;
}

.learning-lesson-index {
    width: 50px;
    height: 50px;
}

.learning-lesson-card h3 {
    font-size: 1.15rem;
}

.learning-lesson-card p {
    margin: 0 0 .8rem;
}

.learning-empty-state {
    text-align: center;
}

@media (min-width: 860px) {
    .learning-module-roadmap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .learning-module-card:nth-child(3n) {
        grid-column: span 2;
    }
}

@media (max-width: 820px) {
    .learning-course-hero,
    .learning-module-hero {
        grid-template-columns: 1fr;
        border-radius: 25px;
    }

    .learning-mascot-panel {
        min-height: 260px;
    }

    .learning-mascot-panel img {
        width: min(86%, 340px);
    }

    .learning-mascot-bubble {
        left: 7%;
    }

    .learning-module-side-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .35rem 1rem;
        width: 100%;
    }

    .learning-module-side-icon {
        grid-row: 1 / 3;
        margin: 0;
    }

    .learning-module-side-card p {
        margin: 0;
    }

    .learning-module-side-stat {
        grid-column: 3;
        grid-row: 1 / 3;
        display: grid;
        padding: 0 0 0 1rem;
        border-top: 0;
        border-left: 1px solid var(--learn-line);
    }
}

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

    .learning-course-hero,
    .learning-module-hero {
        padding: 1.15rem;
        border-radius: 22px;
    }

    .learning-course-hero h1,
    .learning-module-hero h1 {
        margin-top: .85rem;
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .learning-course-facts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .learning-course-facts span {
        display: grid;
        padding: .65rem .35rem;
        text-align: center;
    }

    .learning-section-header {
        display: block;
    }

    .learning-section-header > p {
        margin-top: .55rem;
        text-align: left;
    }

    .learning-module-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: .85rem;
        min-height: auto;
        padding: 1rem;
        border-radius: 19px;
    }

    .learning-module-marker {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .learning-module-topline,
    .learning-lesson-topline {
        align-items: flex-start;
    }

    .learning-module-card h3 {
        margin-top: .45rem;
        font-size: 1.08rem;
    }

    .learning-module-footer {
        align-items: flex-end;
    }

    .learning-card-arrow {
        width: 32px;
        height: 32px;
    }

    .learning-mascot-panel {
        min-height: 230px;
    }

    .learning-mascot-bubble {
        top: 0;
        left: 0;
        max-width: 190px;
        font-size: .8rem;
    }

    .learning-lesson-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: .8rem;
        min-height: auto;
        padding: 1rem;
    }

    .learning-lesson-index {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .learning-lesson-card > .learning-card-arrow {
        display: none;
    }

    .learning-module-side-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .learning-module-side-stat {
        grid-column: 1 / 3;
        grid-row: auto;
        display: flex;
        padding: .8rem 0 0;
        border-left: 0;
        border-top: 1px solid var(--learn-line);
    }
}


/* =========================================================
   V23 — DESIGN ÉTAPE 2 : PAGE DE LEÇON
   ========================================================= */
.learning-lesson-page {
    --lesson-paper: #fffdf9;
    --lesson-teal: #087f83;
    --lesson-teal-dark: #075e62;
    --lesson-orange: #f28b22;
    --lesson-ink: #17343e;
    --lesson-muted: #687d84;
    display: grid;
    gap: 1.4rem;
    padding-bottom: 3rem;
}

.learning-lesson-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
    min-height: 390px;
    overflow: hidden;
    padding: clamp(1.4rem, 4vw, 3rem);
    border: 1px solid rgba(8, 127, 131, .12);
    border-radius: 32px;
    background:
        radial-gradient(circle at 88% 18%, rgba(242, 139, 34, .16), transparent 30%),
        linear-gradient(135deg, #f2fbf8 0%, #fffaf1 100%);
    box-shadow: 0 22px 55px rgba(22, 66, 75, .09);
}

.learning-lesson-hero::before {
    content: '';
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(8, 127, 131, .1);
    border-radius: 50%;
}

.learning-lesson-hero-main { position: relative; z-index: 2; align-self: center; }
.learning-back-link { display: inline-flex; align-items: center; gap: .55rem; color: var(--lesson-teal-dark); font-weight: 800; text-decoration: none; }
.learning-back-link span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #fff; box-shadow: 0 5px 15px rgba(23, 52, 62, .08); }
.learning-lesson-overline { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 1.35rem 0 1rem; color: var(--lesson-muted); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.learning-lesson-overline > span { padding: .45rem .7rem; border: 1px solid rgba(8, 127, 131, .11); border-radius: 999px; background: rgba(255,255,255,.72); }
.learning-language-chip { display: inline-flex; align-items: center; gap: .4rem; color: var(--lesson-teal-dark); }
.learning-lesson-hero h1 { max-width: 760px; margin: 0; color: var(--lesson-ink); font-size: clamp(2.35rem, 5.6vw, 4.9rem); line-height: .98; letter-spacing: -.055em; }
.learning-lesson-description { max-width: 690px; margin: 1.15rem 0 0; color: var(--lesson-muted); font-size: 1.05rem; line-height: 1.75; }
.learning-lesson-stats { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.learning-lesson-stats span { display: inline-flex; align-items: center; gap: .42rem; padding: .62rem .78rem; border-radius: 13px; background: rgba(255,255,255,.78); color: var(--lesson-muted); font-size: .86rem; box-shadow: 0 6px 17px rgba(23,52,62,.05); }
.learning-lesson-stats strong { color: var(--lesson-teal-dark); font-size: 1rem; }
.learning-lesson-stats .is-complete { background: #e8f8ef; color: #2c7852; }

.learning-lesson-mascot { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 300px; }
.learning-lesson-mascot img { position: relative; z-index: 2; width: min(100%, 390px); max-height: 350px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 22px 28px rgba(64, 67, 55, .16)); animation: learningFoxFocus 6.5s cubic-bezier(.38,.02,.19,.98) infinite; will-change: transform, filter; }
.learning-lesson-mascot-bubble { position: absolute; z-index: 3; top: 5%; left: -2%; max-width: 210px; padding: .82rem 1rem; border: 1px solid rgba(8,127,131,.12); border-radius: 17px 17px 5px 17px; background: rgba(255,255,255,.92); color: var(--lesson-teal-dark); font-size: .83rem; font-weight: 800; line-height: 1.45; box-shadow: 0 12px 25px rgba(23,52,62,.1); }
@keyframes learningFoxFocus { 0%,100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); filter: drop-shadow(0 22px 28px rgba(64, 67, 55, .16)); } 16% { transform: translate3d(.5px,-2px,0) rotate(-.35deg) scale(1.004); } 31% { transform: translate3d(-.9px,-5px,0) rotate(.45deg) scale(1.012); filter: drop-shadow(0 26px 31px rgba(64, 67, 55, .18)); } 49% { transform: translate3d(.6px,-3px,0) rotate(.7deg) scale(1.011); } 68% { transform: translate3d(-.4px,-4px,0) rotate(-.22deg) scale(1.006); } 84% { transform: translate3d(.25px,-1px,0) rotate(.12deg) scale(1.002); } }

.learning-lesson-toolbar { display: flex; align-items: center; gap: .65rem; padding: .75rem; border: 1px solid var(--learn-line); border-radius: 19px; background: #fff; box-shadow: 0 10px 28px rgba(28,55,65,.055); }
.learning-toolbar-label { display: grid; min-width: 170px; margin-right: auto; padding-left: .55rem; }
.learning-toolbar-label span { color: var(--lesson-ink); font-weight: 900; }
.learning-toolbar-label small { color: var(--lesson-muted); }
.learning-lesson-toolbar .personal-action { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .65rem .85rem; border: 1px solid var(--learn-line); border-radius: 13px; background: #fbfdfc; color: var(--lesson-muted); font-weight: 800; cursor: pointer; }
.learning-lesson-toolbar .personal-action > span:first-child { color: var(--lesson-teal); font-size: 1.05rem; }
.learning-lesson-toolbar .personal-action:hover, .learning-lesson-toolbar .personal-action.active { border-color: rgba(8,127,131,.35); background: #eaf8f6; color: var(--lesson-teal-dark); transform: translateY(-1px); }

.learning-lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 1.45rem; align-items: start; }
.learning-lesson-content { display: grid; gap: 1rem; min-width: 0; }
.learning-content-intro { padding: 1.55rem 1.7rem; border-radius: 23px; background: var(--lesson-ink); color: #fff; box-shadow: 0 14px 33px rgba(23,52,62,.14); }
.learning-content-intro h2 { margin: .75rem 0 0; color: #fff; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.35; }
.learning-block-kicker { display: inline-flex; align-items: center; gap: .5rem; color: #bfe9e5; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.learning-block-kicker span { color: #ffc477; }

.learning-lesson-block { padding: clamp(1.15rem, 2.5vw, 1.7rem); border: 1px solid var(--learn-line); border-radius: 23px; background: var(--lesson-paper); box-shadow: 0 10px 28px rgba(28,55,65,.05); scroll-margin-top: 1rem; }
.learning-block-heading { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1.05rem; }
.learning-block-heading h2 { margin: .12rem 0 0; color: var(--lesson-ink); font-size: 1.3rem; }
.learning-block-icon { display: grid; flex: 0 0 auto; place-items: center; width: 45px; height: 45px; border-radius: 14px; background: #e8f7f5; color: var(--lesson-teal-dark); font-weight: 950; }
.learning-block-type { color: var(--lesson-teal); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.learning-block-content, .learning-vocabulary-content, .learning-dialogue-content { color: #334f58; font-size: 1rem; line-height: 1.9; white-space: normal; }
.learning-vocabulary-content { padding: 1rem 1.1rem; border-radius: 16px; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 2; }
.learning-dialogue-content { padding: 1.05rem 1.15rem; border-left: 4px solid var(--lesson-teal); border-radius: 0 16px 16px 0; background: #f2faf9; font-weight: 650; }
.learning-block-secondary { display: flex; gap: .6rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: 14px; background: rgba(23,52,62,.045); color: var(--lesson-muted); }
.learning-block-secondary > span { color: var(--lesson-orange); font-weight: 900; }
.learning-block-secondary p { margin: 0; line-height: 1.65; }
.learning-block-vocabulary { background: linear-gradient(145deg, #fffdf9, #f6fcfb); }
.learning-block-grammar { border-color: rgba(8,127,131,.18); }
.learning-block-example { border-color: rgba(242,139,34,.24); background: linear-gradient(145deg, #fffaf2, #fff); }
.learning-block-example .learning-block-icon { background: #fff0da; color: #b86814; }
.learning-block-tip { border-color: rgba(242,139,34,.28); background: #fff8ec; }
.learning-block-tip .learning-block-icon { background: #ffe6b9; color: #9e5c12; }
.learning-block-summary { border: 0; background: linear-gradient(135deg, #087f83, #09696d); color: #fff; }
.learning-block-summary h2, .learning-block-summary .learning-block-content { color: #fff; }
.learning-block-summary .learning-block-type { color: #bceae7; }
.learning-block-summary .learning-block-icon { background: rgba(255,255,255,.15); color: #fff; }
.learning-block-audio { background: #f2f7ff; }
.learning-speech-button { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.learning-block-image-content { display: block; width: 100%; max-height: 480px; object-fit: cover; border-radius: 17px; }

.learning-lesson-rail { position: sticky; top: 1rem; display: grid; gap: .75rem; }
.learning-rail-card { padding: 1.2rem; border: 1px solid var(--learn-line); border-radius: 21px; background: #fff; box-shadow: 0 10px 28px rgba(28,55,65,.05); }
.learning-rail-eyebrow { display: block; margin-bottom: .4rem; color: var(--lesson-teal); font-size: .73rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.learning-rail-card strong { color: var(--lesson-ink); font-size: 1.35rem; }
.learning-rail-card p { margin: .65rem 0 1rem; color: var(--lesson-muted); font-size: .88rem; line-height: 1.55; }
.learning-mini-progress { height: 7px; overflow: hidden; border-radius: 99px; background: #e8efef; }
.learning-mini-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lesson-teal), #4eb9ac); }
.learning-rail-action { display: flex; align-items: center; justify-content: space-between; padding: .95rem 1.05rem; border-radius: 17px; background: var(--lesson-ink); color: #fff; text-decoration: none; font-weight: 850; }
.learning-rail-action strong { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.12); }

.learning-exercise-section { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid rgba(8,127,131,.12); border-radius: 28px; background: linear-gradient(145deg, #effaf8, #fffaf2); }
.learning-exercise-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; margin-top: 1.2rem; }
.learning-exercise-card { display: grid; grid-template-columns: 43px minmax(0,1fr) 34px; align-items: center; gap: .8rem; min-height: 108px; padding: 1rem; border: 1px solid rgba(8,127,131,.12); border-radius: 18px; background: rgba(255,255,255,.88); color: inherit; text-decoration: none; box-shadow: 0 8px 20px rgba(28,55,65,.045); transition: .2s ease; }
.learning-exercise-card:hover { transform: translateY(-3px); border-color: rgba(8,127,131,.35); box-shadow: 0 13px 25px rgba(28,55,65,.09); }
.learning-exercise-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #e4f5f2; color: var(--lesson-teal-dark); font-weight: 950; }
.learning-exercise-card.is-pronunciation .learning-exercise-number { background: #fff0d8; color: #a96216; }
.learning-exercise-type { color: var(--lesson-teal); font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.learning-exercise-card h3 { margin: .25rem 0 0; color: var(--lesson-ink); font-size: 1rem; line-height: 1.35; }

.learning-lesson-footer { display: grid; gap: 1rem; }
.learning-finish-card { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: clamp(1.3rem,3vw,2rem); border-radius: 25px; background: var(--lesson-ink); color: #fff; }
.learning-finish-card h2 { margin: .35rem 0; color: #fff; font-size: clamp(1.35rem,3vw,2rem); }
.learning-finish-card p { margin: 0; color: #bdd0d5; }
.learning-finish-card .eyebrow { color: #7dd5ca; }
.learning-finish-card form { flex: 0 0 auto; }
.learning-finish-button { display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap; background: var(--lesson-orange); }
.learning-finish-button:hover { background: #ff9b35; }
.learning-bottom-navigation { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.learning-bottom-navigation a { display: grid; gap: .25rem; min-height: 86px; padding: 1rem 1.1rem; border: 1px solid var(--learn-line); border-radius: 17px; background: #fff; color: inherit; text-decoration: none; }
.learning-bottom-navigation a.is-next { text-align: right; }
.learning-bottom-navigation span { color: var(--lesson-muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.learning-bottom-navigation strong { color: var(--lesson-ink); }

/* panneau de notes harmonisé */
.lesson-note-panel { border-left: 1px solid var(--learn-line); background: #fffdf9; }
.lesson-note-panel textarea { width: 100%; border: 1px solid var(--learn-line); border-radius: 16px; background: #fff; font: inherit; line-height: 1.65; }

@media (max-width: 900px) {
    .learning-lesson-hero { grid-template-columns: 1fr; }
    .learning-lesson-mascot { min-height: 250px; }
    .learning-lesson-mascot img { max-height: 280px; }
    .learning-lesson-layout { grid-template-columns: 1fr; }
    .learning-lesson-rail { position: static; grid-template-columns: 1fr auto; }
    .learning-rail-action { min-width: 210px; }
}

@media (max-width: 680px) {
    .learning-lesson-page { gap: .9rem; }
    .learning-lesson-hero { min-height: auto; padding: 1.15rem; border-radius: 23px; }
    .learning-lesson-hero h1 { font-size: clamp(2.05rem, 12vw, 3.2rem); }
    .learning-lesson-description { font-size: .95rem; }
    .learning-lesson-mascot { min-height: 225px; }
    .learning-lesson-mascot img { width: 82%; max-height: 230px; }
    .learning-lesson-mascot-bubble { top: 0; left: 0; max-width: 175px; font-size: .76rem; }
    .learning-lesson-toolbar { display: grid; grid-template-columns: repeat(3,1fr); padding: .65rem; }
    .learning-toolbar-label { grid-column: 1 / 4; min-width: 0; padding: .2rem .35rem .55rem; }
    .learning-lesson-toolbar .personal-action { justify-content: center; padding: .6rem .35rem; font-size: .76rem; }
    .learning-lesson-toolbar .personal-action > span:first-child { display: none; }
    .learning-lesson-rail { display: none; }
    .learning-lesson-block { padding: 1rem; border-radius: 19px; }
    .learning-block-heading { gap: .65rem; }
    .learning-block-icon { width: 39px; height: 39px; border-radius: 12px; }
    .learning-block-heading h2 { font-size: 1.12rem; }
    .learning-vocabulary-content, .learning-dialogue-content { padding: .85rem; font-size: .9rem; line-height: 1.8; overflow-wrap: anywhere; }
    .learning-exercise-section { padding: 1rem; border-radius: 22px; }
    .learning-exercise-grid { grid-template-columns: 1fr; }
    .learning-exercise-card { min-height: 96px; padding: .85rem; }
    .learning-finish-card { display: grid; padding: 1.15rem; border-radius: 21px; }
    .learning-finish-card form, .learning-finish-button { width: 100%; }
    .learning-finish-button { justify-content: center; }
    .learning-bottom-navigation { grid-template-columns: 1fr; }
    .learning-bottom-navigation a.is-next { text-align: left; }
    .learning-bottom-navigation > span:empty { display: none; }
}


/* =========================================================
   V23 — DESIGN ÉTAPE 3 : EXERCICES, EXAMENS ET RÉSULTATS
   ========================================================= */
.exercise-page-v23,
.exam-page-v23 { max-width: 1120px; margin: 0 auto; }

.exercise-hero-v23,
.exam-hero-v23 {
    position: relative; overflow: hidden; display: grid;
    grid-template-columns: minmax(0,1fr) 280px; gap: 30px; align-items: center;
    padding: 32px; margin-bottom: 24px; border: 1px solid rgba(15,118,110,.12);
    border-radius: 30px; background: linear-gradient(135deg,#f0fdfa 0%,#fff7ed 100%);
    box-shadow: 0 22px 60px rgba(15,23,42,.08);
}
.exercise-hero-copy h1,.exam-hero-copy h1 { margin: 12px 0; font-size: clamp(2rem,5vw,3.35rem); line-height: 1.02; }
.exercise-kicker-row,.exam-meta-v23,.exercise-reward-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.exercise-xp-chip,.reward-chip,.exam-meta-v23 span { padding:8px 12px; border-radius:999px; background:#fff; border:1px solid rgba(15,118,110,.13); font-weight:800; font-size:.88rem; }
.exercise-hero-mascot,.exam-hero-mascot { position:relative; min-height:230px; display:grid; place-items:center; }
.exercise-hero-mascot img,.exam-hero-mascot img { width:min(100%,245px); max-height:245px; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(15,23,42,.12)); animation:foxFloat 3.8s ease-in-out infinite; }
.exercise-hero-mascot .mascot-bubble,.exam-hero-mascot .mascot-bubble { position:absolute; top:4px; right:0; max-width:165px; padding:10px 13px; border-radius:17px 17px 17px 4px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.1); font-weight:800; font-size:.86rem; }
.exercise-hint-toggle { border:0; background:transparent; color:#0f766e; padding:0; font-weight:800; cursor:pointer; }
.exercise-hint { display:inline-block; margin:10px 0 0; padding:10px 14px; border-radius:14px; background:#fff; }
.exercise-card-v23,.exam-question-v23 { border:1px solid #e2e8f0; border-radius:28px; background:#fff; box-shadow:0 18px 50px rgba(15,23,42,.07); }
.exercise-card-v23 { padding:clamp(22px,5vw,42px); }
.exercise-question-label { color:#0f766e; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:900; }
.exercise-prompt-v23 { margin:10px 0 28px; color:#0f172a; font-size:clamp(1.25rem,3vw,1.75rem); line-height:1.45; font-weight:800; }
.answer-options-v23 { display:grid; gap:12px; }
.answer-option-v23 { display:grid; grid-template-columns:44px minmax(0,1fr) 30px; gap:14px; align-items:center; min-height:68px; padding:12px 16px; border:2px solid #e2e8f0; border-radius:18px; cursor:pointer; transition:.18s ease; }
.answer-option-v23:hover { transform:translateY(-2px); border-color:#5eead4; box-shadow:0 12px 26px rgba(15,118,110,.09); }
.answer-option-v23 input { position:absolute; opacity:0; pointer-events:none; }
.answer-letter { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#f1f5f9; color:#475569; font-weight:900; }
.answer-text { font-weight:750; }
.answer-check { opacity:0; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#0f766e; color:#fff; font-weight:900; }
.answer-option-v23:has(input:checked) { border-color:#0f766e; background:#f0fdfa; }
.answer-option-v23:has(input:checked) .answer-letter { background:#0f766e; color:#fff; }
.answer-option-v23:has(input:checked) .answer-check { opacity:1; }
.text-answer-v23 { display:grid; gap:9px; font-weight:850; }
.text-answer-v23 input { min-height:62px; padding:0 18px; border:2px solid #cbd5e1; border-radius:17px; font-size:1.08rem; }
.text-answer-v23 input:focus { outline:0; border-color:#0f766e; box-shadow:0 0 0 4px rgba(20,184,166,.13); }
.exercise-submit-v23,.exercise-actions-v23,.exam-submit-bar-v23 { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-top:28px; padding-top:22px; border-top:1px solid #e2e8f0; }
.exercise-submit-v23 span,.exam-submit-bar-v23 span { display:block; color:#64748b; font-size:.9rem; }
.exercise-result-v23 { display:grid; grid-template-columns:58px minmax(0,1fr); gap:18px; padding:22px; margin:20px 0 4px; border-radius:20px; }
.exercise-result-v23.correct { background:#ecfdf5; border:1px solid #86efac; }
.exercise-result-v23.incorrect { background:#fff7ed; border:1px solid #fdba74; }
.exercise-result-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:17px; background:#fff; font-size:1.8rem; font-weight:900; }
.exercise-result-v23 h2 { margin:0 0 7px; }
.exercise-explanation { padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.7); }

.exam-progress-shell { position:sticky; top:72px; z-index:20; padding:16px 20px; margin-bottom:22px; border:1px solid #e2e8f0; border-radius:20px; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(15,23,42,.06); }
.exam-progress-copy { display:flex; justify-content:space-between; margin-bottom:9px; font-size:.9rem; }
.exam-progress-copy span { color:#64748b; }
.progress-track { height:9px; overflow:hidden; border-radius:999px; background:#e2e8f0; }
.progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0f766e,#2dd4bf); transition:width .25s ease; }
.exam-layout-v23 { display:grid; grid-template-columns:190px minmax(0,1fr); gap:24px; align-items:start; }
.exam-nav-v23 { position:sticky; top:160px; padding:18px; border:1px solid #e2e8f0; border-radius:20px; background:#fff; }
.exam-nav-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }
.exam-nav-grid a { display:grid; place-items:center; aspect-ratio:1; border-radius:10px; background:#f1f5f9; color:#475569; font-weight:900; text-decoration:none; }
.exam-nav-grid a.is-answered { background:#ccfbf1; color:#0f766e; }
.exam-nav-v23 p { margin:0; color:#64748b; font-size:.78rem; line-height:1.45; }
.exam-questions-v23 { display:grid; gap:20px; }
.exam-question-v23 { padding:clamp(20px,4vw,32px); scroll-margin-top:155px; }
.exam-question-v23.is-answered { border-color:#99f6e4; }
.exam-question-topline { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.exam-question-number { color:#0f766e; font-weight:900; }
.exam-question-v23 h2 { margin:16px 0 5px; }
.exam-submit-bar-v23 { position:sticky; bottom:12px; z-index:25; padding:16px 18px; border:1px solid #cbd5e1; border-radius:22px; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); box-shadow:0 18px 50px rgba(15,23,42,.15); }
.exam-timer-v23.is-urgent { color:#dc2626; animation:pulseTimer 1s infinite; }

.result-hero-v23 { position:relative; overflow:hidden; min-height:260px; padding-right:min(38vw,360px)!important; border-radius:30px!important; }
.result-mascot-v23 { position:absolute; right:22px; bottom:-20px; width:min(34vw,320px); max-height:300px; object-fit:contain; filter:drop-shadow(0 18px 26px rgba(15,23,42,.14)); }
.result-summary-v23 { margin-top:22px; }
.result-answer-v23 { position:relative; overflow:hidden; border-left-width:5px; }
.result-answer-v23.correct { border-left-color:#16a34a; }
.result-answer-v23.incorrect { border-left-color:#f97316; }
.results-heading-v23 { position:relative; overflow:hidden; min-height:190px; padding-right:240px; }
.results-list-mascot { position:absolute; right:20px; bottom:-20px; width:220px; max-height:210px; object-fit:contain; }
.results-grid-v23 .card { transition:.18s ease; }
.results-grid-v23 .card:hover { transform:translateY(-4px); box-shadow:0 18px 42px rgba(15,23,42,.1); }

@keyframes foxFloat { 50% { transform:translateY(-8px) rotate(1deg); } }
@keyframes pulseTimer { 50% { opacity:.55; } }

@media (max-width: 820px) {
    .exercise-hero-v23,.exam-hero-v23 { grid-template-columns:1fr; padding:24px; }
    .exercise-hero-mascot,.exam-hero-mascot { min-height:160px; }
    .exercise-hero-mascot img,.exam-hero-mascot img { max-height:185px; }
    .exam-layout-v23 { grid-template-columns:1fr; }
    .exam-nav-v23 { position:static; }
    .exam-nav-grid { grid-template-columns:repeat(6,1fr); }
    .exam-submit-bar-v23,.exercise-submit-v23,.exercise-actions-v23 { align-items:stretch; flex-direction:column; }
    .exam-submit-bar-v23 .button,.exercise-submit-v23 .button,.exercise-actions-v23 .button { width:100%; text-align:center; }
    .result-hero-v23 { padding-right:24px!important; padding-bottom:210px!important; text-align:center; }
    .result-mascot-v23 { right:50%; transform:translateX(50%); width:230px; }
    .results-heading-v23 { padding-right:20px; padding-bottom:170px; text-align:center; }
    .results-list-mascot { right:50%; transform:translateX(50%); width:190px; }
}
@media (max-width: 520px) {
    .answer-option-v23 { grid-template-columns:38px minmax(0,1fr) 26px; padding:10px; }
    .answer-letter { width:36px; height:36px; }
    .exam-nav-grid { grid-template-columns:repeat(5,1fr); }
    .exam-progress-copy { gap:8px; flex-direction:column; }
}


/* V23 DESIGN — ÉTAPE 4 : NAVIGATION, ACCUEIL, DASHBOARD, PROFIL */
:root{--brand:#0f766e;--brand-2:#14b8a6;--brand-soft:#ccfbf1;--orange:#f97316;--ink:#16202a;--surface:#fff;--line:#e6edf2;--shadow:0 18px 50px rgba(15,118,110,.10)}
body{color:var(--ink);background:linear-gradient(180deg,#f8fbfb 0,#f6f8fb 100%)}
.app-container{min-height:70vh}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-header{position:sticky;top:0;z-index:100;padding:0;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(15,23,42,.08)}
.header-inner{width:min(1240px,calc(100% - 2rem));min-height:74px;margin:auto;display:flex;align-items:center;gap:1.5rem}
.brand-lockup{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;line-height:1}.brand-lockup>span:last-child{display:grid}.brand-lockup strong{font-size:1.08rem}.brand-lockup small{margin-top:.2rem;color:#64748b;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:white;font-size:1.25rem;font-weight:900;box-shadow:0 8px 20px rgba(15,118,110,.25)}
.main-navigation{margin-left:auto;display:flex;align-items:center;gap:.35rem}.main-navigation>a,.nav-more>summary{display:flex;align-items:center;gap:.42rem;padding:.7rem .78rem;border-radius:12px;text-decoration:none;color:#52606d;font-size:.9rem;font-weight:750;cursor:pointer;list-style:none}.main-navigation>a:hover,.main-navigation>a.active,.nav-more>summary:hover{background:#effaf8;color:var(--brand)}.nav-more{position:relative}.nav-more summary::-webkit-details-marker{display:none}.nav-dropdown{position:absolute;right:0;top:calc(100% + .65rem);width:235px;padding:.55rem;background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(15,23,42,.15);display:grid;grid-template-columns:1fr 1fr;gap:.2rem}.nav-dropdown a{padding:.65rem;border-radius:9px;text-decoration:none;font-size:.82rem;color:#475569}.nav-dropdown a:hover{background:#f0fdfa;color:var(--brand)}.profile-chip{border-left:1px solid var(--line);margin-left:.3rem}.profile-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffedd5;color:#c2410c;font-size:.78rem;font-weight:900}.language-switcher{display:flex;padding:.2rem;border-radius:10px;background:#f1f5f9}.language-switcher a{padding:.4rem .5rem;border-radius:8px;text-decoration:none;font-size:.72rem;font-weight:800}.language-switcher a.active{background:white;color:var(--brand);box-shadow:0 2px 8px rgba(15,23,42,.08)}.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:12px;background:#f1f5f9;padding:10px}.nav-toggle span:not(.sr-only){display:block;height:2px;margin:4px;background:#334155;border-radius:2px}
.home-hero{min-height:620px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:3rem;padding:4.5rem 0}.home-hero-copy{max-width:690px}.eyebrow.soft{color:var(--brand);background:#e8faf7;border-radius:999px;padding:.48rem .72rem}.home-hero h1{font-size:clamp(2.8rem,6vw,5.4rem);line-height:.98;letter-spacing:-.055em;margin:1.1rem 0 1.3rem}.home-hero p{font-size:1.17rem;line-height:1.75;color:#5d6b78;max-width:630px}.button.large{min-height:54px;padding:1rem 1.35rem;border-radius:15px}.button.compact{min-height:40px;padding:.6rem .9rem}.hero-proof{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;color:#64748b;font-size:.86rem}.hero-proof span{display:flex;gap:.4rem}.home-hero-visual{position:relative;min-height:500px;display:grid;place-items:center}.home-hero-visual img{position:relative;z-index:2;width:min(100%,470px);filter:drop-shadow(0 30px 40px rgba(15,118,110,.13));animation:foxFloat 4s ease-in-out infinite}.mascot-glow{position:absolute;width:410px;height:410px;border-radius:48% 52% 56% 44%;background:radial-gradient(circle,#ccfbf1,#f0fdfa 65%,transparent 66%);animation:softRotate 18s linear infinite}.mascot-speech{position:absolute;z-index:3;right:0;top:12%;display:grid;gap:.2rem;padding:1rem 1.2rem;background:white;border:1px solid var(--line);border-radius:18px 18px 18px 5px;box-shadow:var(--shadow)}.mascot-speech span{font-size:.82rem;color:#64748b}.mascot-speech.compact{right:auto;left:0;top:12%}.floating-card{position:absolute;z-index:3;display:grid;padding:.8rem 1rem;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.floating-card span{font-size:.75rem;color:#64748b}.card-one{left:0;bottom:20%}.card-two{right:2%;bottom:8%}.home-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0 0 4rem}.home-features article{padding:1.5rem;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.75)}.home-features h2{margin:.75rem 0 .45rem}.home-features p{margin:0;color:#64748b;line-height:1.6}.feature-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#f0fdfa;font-size:1.4rem}.home-steps{display:grid;grid-template-columns:.75fr 1.25fr;gap:2rem;padding:2rem;margin-bottom:2rem}.home-steps h2{font-size:2rem}.home-steps ol{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}.home-steps li{display:flex;gap:1rem;padding:1rem;border-radius:15px;background:#f8fafc}.home-steps li>span{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;background:var(--brand);color:white;font-weight:900}.home-steps p{margin:.25rem 0 0;color:#64748b}
.dashboard-hero{display:grid;grid-template-columns:1fr 360px;align-items:center;gap:2rem;padding:2rem 2.4rem;margin-bottom:1.4rem;border-radius:28px;background:linear-gradient(135deg,#e8faf7,#fff7ed);overflow:hidden}.dashboard-hero h1{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em;margin:.8rem 0}.dashboard-hero p{color:#5f6f7d;max-width:650px;line-height:1.65}.dashboard-mascot{position:relative;min-height:240px;display:grid;place-items:end center}.dashboard-mascot img{width:250px;max-height:260px;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(15,118,110,.12))}.dashboard-overview{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}.weekly-goal-panel{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.6rem}.progress-track.large{height:11px}.dashboard-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.mini-stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.8rem;align-items:center;padding:1.1rem;border:1px solid var(--line);border-radius:20px;background:white}.mini-stat>span{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#f8fafc;font-size:1.25rem}.mini-stat strong{font-size:1.3rem}.mini-stat small{color:#64748b}.dashboard-course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.learning-card.modern{gap:1rem;padding:1.35rem;border-radius:22px;box-shadow:0 10px 30px rgba(15,23,42,.04)}.learning-card.modern h3{margin:.25rem 0}.course-language{font-size:.8rem;color:var(--brand);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.level-badge{padding:.45rem .65rem;border-radius:999px;background:#f0fdfa;color:var(--brand)}.dashboard-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}.quick-action{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;text-decoration:none;transition:.2s}.quick-action:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.quick-action>span{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#f8fafc;font-size:1.3rem}.quick-action div{display:grid}.quick-action small{margin-top:.2rem;color:#64748b}.quick-action b{color:var(--brand)}
.profile-hero{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.5rem 2rem;margin-bottom:1.2rem;border-radius:24px;background:linear-gradient(135deg,#effcf9,#fff7ed)}.profile-hero h1{margin:.6rem 0 .4rem;font-size:2.4rem}.profile-hero p{margin:0;color:#64748b}.profile-hero img{width:170px;height:145px;object-fit:contain;object-position:top}.modern-form,.modern-summary{border-radius:24px}.modern-form{padding:1.6rem}.modern-form input,.modern-form select{border:1px solid #dbe4ea;background:#fbfdfe;border-radius:12px}.modern-form input:focus,.modern-form select:focus{outline:3px solid rgba(20,184,166,.15);border-color:var(--brand-2)}.modern-summary{position:sticky;top:95px;background:linear-gradient(180deg,#fff,#f0fdfa)}
.app-footer{margin-top:4rem;padding:3rem max(1rem,5vw) 1.5rem;background:#102a2a;color:#d7e5e5}.footer-inner{width:min(1200px,100%);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem}.footer-brand p{color:#94a9a8}.app-footer .brand-mark{box-shadow:none}.app-footer .brand-lockup small{color:#8fb1af}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.footer-links>div{display:grid;gap:.65rem}.footer-links a{color:#a9bdbc;text-decoration:none;font-size:.9rem}.footer-links a:hover{color:white}.footer-bottom{width:min(1200px,100%);margin:2rem auto 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;color:#819b99;font-size:.82rem}.mobile-tabbar{display:none}
@keyframes foxFloat{50%{transform:translateY(-10px)}}@keyframes softRotate{to{transform:rotate(360deg)}}
@media(max-width:980px){.header-inner{min-height:66px}.nav-toggle{display:block}.main-navigation{display:none;position:absolute;left:1rem;right:1rem;top:72px;padding:.7rem;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 60px rgba(15,23,42,.18);align-items:stretch;flex-direction:column}.main-navigation.is-open{display:flex}.main-navigation>a,.nav-more>summary{justify-content:flex-start}.nav-dropdown{position:static;width:auto;margin-top:.4rem;box-shadow:none}.profile-chip{border-left:0;margin-left:0}.language-switcher{align-self:flex-start}.home-hero{grid-template-columns:1fr;padding-top:2.5rem}.home-hero-copy{text-align:center;margin:auto}.home-hero-copy .actions,.hero-proof{justify-content:center}.home-hero-visual{min-height:390px}.dashboard-hero{grid-template-columns:1fr 280px}.dashboard-overview{grid-template-columns:1fr}.home-steps{grid-template-columns:1fr}}
@media(max-width:720px){body{padding-bottom:72px}.container{width:min(100% - 1.2rem,1100px);padding-top:1rem}.brand-lockup small{display:none}.home-hero{padding:2rem 0;gap:1rem}.home-hero h1{font-size:2.65rem}.home-hero p{font-size:1rem}.home-hero-visual{min-height:330px}.home-hero-visual img{width:310px}.mascot-glow{width:290px;height:290px}.mascot-speech{top:3%;right:0}.floating-card{font-size:.8rem}.card-one{bottom:15%}.home-features{grid-template-columns:1fr}.home-steps{padding:1.2rem}.dashboard-hero{grid-template-columns:1fr;padding:1.35rem;text-align:center}.dashboard-hero .button{width:100%}.dashboard-mascot{min-height:190px}.dashboard-mascot img{width:190px}.dashboard-mascot .mascot-speech{left:0;top:0;text-align:left}.weekly-goal-panel{padding:1.2rem}.dashboard-stat-grid,.dashboard-actions-grid{grid-template-columns:1fr 1fr}.mini-stat{padding:.9rem}.dashboard-course-grid{grid-template-columns:1fr}.profile-hero{padding:1.2rem}.profile-hero img{width:105px;height:100px}.profile-hero h1{font-size:1.8rem}.app-footer{padding-bottom:2rem}.footer-inner{grid-template-columns:1fr}.footer-links{grid-template-columns:1fr 1fr}.footer-bottom{display:grid;gap:.4rem}.mobile-tabbar{position:fixed;z-index:99;left:0;right:0;bottom:0;height:68px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(14px);padding-bottom:env(safe-area-inset-bottom)}.mobile-tabbar a{display:grid;place-items:center;align-content:center;gap:.2rem;text-decoration:none;color:#718096;font-size:.65rem;font-weight:800}.mobile-tabbar a span{font-size:1.15rem}.mobile-tabbar a.active{color:var(--brand)}.site-footer{margin-bottom:0}.button{width:auto}}
@media(max-width:460px){.dashboard-stat-grid,.dashboard-actions-grid{grid-template-columns:1fr}.home-hero h1{font-size:2.25rem}.hero-proof{display:grid}.home-hero-visual{min-height:300px}.mascot-speech{font-size:.8rem}.footer-links{grid-template-columns:1fr}}


/* =========================================================
   CORRECTIF V23 — ÉTAPE 4 : NAVIGATION MOBILE
   Ces règles doivent rester à la fin du fichier.
   ========================================================= */

@media (max-width: 980px) {
    .site-header.app-header {
        display: block;
        padding: 0;
        align-items: initial;
        flex-direction: initial;
    }

    .site-header.app-header .header-inner {
        position: relative;
        width: min(100% - 1rem, 1240px);
        min-height: 68px;
        gap: .75rem;
    }

    .site-header.app-header .main-navigation {
        display: none !important;
        position: absolute;
        z-index: 120;
        top: calc(100% + .45rem);
        left: 0;
        right: 0;
        width: auto;
        max-height: calc(100dvh - 92px);
        margin: 0;
        padding: .65rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: .45rem;
        border: 1px solid #dfe8e7;
        border-radius: 18px;
        background: rgba(255,255,255,.98);
        box-shadow: 0 20px 48px rgba(15,23,42,.18);
        backdrop-filter: blur(18px);
    }

    .site-header.app-header .main-navigation.is-open {
        display: grid !important;
    }

    .site-header.app-header .main-navigation > a,
    .site-header.app-header .nav-more > summary {
        min-width: 0;
        min-height: 46px;
        justify-content: flex-start;
        padding: .72rem .8rem;
        border-radius: 12px;
        background: #fff;
        border: 1px solid #edf2f1;
        font-size: .84rem;
        line-height: 1.2;
    }

    .site-header.app-header .main-navigation > a.active {
        background: #eaf8f6;
        border-color: #cdeee8;
    }

    .site-header.app-header .nav-more {
        grid-column: 1 / -1;
        width: 100%;
    }

    .site-header.app-header .nav-more > summary {
        width: 100%;
    }

    .site-header.app-header .nav-dropdown {
        position: static;
        width: 100%;
        margin: .4rem 0 0;
        padding: .4rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 13px;
        box-shadow: none;
    }

    .site-header.app-header .nav-dropdown a {
        min-width: 0;
        padding: .65rem;
        font-size: .78rem;
    }

    .site-header.app-header .profile-chip {
        margin: 0;
        border-left: 0;
    }

    .site-header.app-header .language-switcher {
        align-self: stretch;
        justify-self: stretch;
        justify-content: center;
        min-height: 46px;
        padding: .25rem;
        border: 1px solid #e3e9e8;
        background: #f4f7f7;
    }

    .site-header.app-header .language-switcher a {
        flex: 1;
        display: grid;
        place-items: center;
    }

    .site-header.app-header .nav-toggle {
        flex: 0 0 44px;
    }
}

@media (max-width: 520px) {
    .site-header.app-header .brand-lockup strong {
        font-size: 1rem;
    }

    .site-header.app-header .main-navigation {
        left: -.1rem;
        right: -.1rem;
        padding: .55rem;
        gap: .4rem;
    }

    .site-header.app-header .main-navigation > a,
    .site-header.app-header .nav-more > summary {
        padding: .68rem;
        font-size: .79rem;
    }

    .site-header.app-header .nav-dropdown {
        grid-template-columns: 1fr;
    }

    .dashboard-hero {
        overflow: hidden;
    }

    .dashboard-mascot img {
        display: block;
        width: min(210px, 76vw);
        max-height: 230px;
        object-fit: contain;
        object-position: center bottom;
    }

    .weekly-goal-panel {
        align-items: flex-start;
    }

    .weekly-goal-panel h2 {
        font-size: 1.55rem;
        line-height: 1.15;
    }
}


/* =========================================================
   V23 — ÉTAPE 5 : PAGES D'APPRENTISSAGE
   ========================================================= */

.learning-page-heading,
.learning-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.25rem, 3.5vw, 2.4rem);
    overflow: hidden;
    border: 1px solid rgba(13, 148, 136, .13);
    background:
        radial-gradient(circle at 87% 15%, rgba(45, 212, 191, .18), transparent 31%),
        radial-gradient(circle at 5% 90%, rgba(251, 146, 60, .12), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f4fcfa 100%);
}

.learning-page-heading::before,
.learning-hero::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -90px;
    bottom: -110px;
    border-radius: 50%;
    background: rgba(255,255,255,.58);
}

.learning-page-heading > *,
.learning-hero > * {
    position: relative;
    z-index: 1;
}

.learning-page-heading h1,
.learning-hero h1 {
    max-width: 760px;
    margin-bottom: .65rem;
}

.learning-page-heading p,
.learning-hero p {
    max-width: 720px;
    color: #526173;
}

.learning-heading-mascot {
    width: clamp(120px, 17vw, 205px);
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(15, 118, 110, .12));
    animation: foxLearningFloat 4.5s ease-in-out infinite;
}

.learning-heading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.learning-heading-meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .8rem;
    border: 1px solid #dcece9;
    border-radius: 999px;
    background: rgba(255,255,255,.8);
    color: #405064;
    font-size: .88rem;
}

.learning-hero-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(.7rem, 2vw, 1.4rem);
}

.learning-hero-mascot {
    width: clamp(110px, 16vw, 185px);
    max-height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 16px 22px rgba(15, 118, 110, .11));
}

.learning-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-block: 1.25rem 2rem;
}

.today-stats.learning-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.learning-stat-grid .stat-card {
    position: relative;
    min-height: 128px;
    padding: 1.15rem;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.learning-stat-grid .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 32px rgba(15,23,42,.09);
}

.learning-stat-grid .stat-card::after {
    content: "";
    position: absolute;
    width: 68px;
    height: 68px;
    right: -20px;
    bottom: -25px;
    border-radius: 50%;
    background: rgba(20,184,166,.08);
}

.learning-stat-grid .stat-value {
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    line-height: 1;
    color: #10233f;
}

.learning-section {
    margin-top: 2rem;
}

.learning-section .page-heading.compact {
    margin-bottom: 1rem;
}

.today-main-task {
    display: grid;
    gap: .8rem;
    padding: clamp(1.2rem, 3vw, 1.75rem);
    border-color: #d6ebe7;
    background: linear-gradient(135deg, #fff 0%, #f7fcfb 100%);
}

.today-main-task .button {
    width: fit-content;
}

.revision-grid,
.learning-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.learning-item-card,
.today-revision-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 250px;
    padding: 1.25rem;
    border-top: 4px solid #2bb8a8;
}

.learning-item-card .button,
.today-revision-card .button {
    margin-top: auto;
    width: fit-content;
}

.learning-reminder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-top: 2rem;
    background: linear-gradient(135deg, #fff8ee, #fff);
    border-color: #f5dfc1;
}

.learning-filter-bar {
    position: sticky;
    top: 80px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 1.25rem 0;
    padding: .65rem;
    border: 1px solid #e2e9e8;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
    backdrop-filter: blur(12px);
}

.learning-filter-bar .chip {
    min-height: 40px;
    padding: .58rem .85rem;
    border: 1px solid transparent;
    border-radius: 11px;
}

.learning-filter-bar .chip.active {
    color: #08796f;
    border-color: #c9ebe5;
    background: #eaf8f6;
}

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

.saved-content-card,
.oral-attempt-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.saved-content-card:hover,
.oral-attempt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(15,23,42,.09);
}

.saved-content-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.saved-content-icons {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: 1.2rem;
}

.personal-note-preview {
    margin: .8rem 0 0;
    padding: .9rem 1rem;
    border-left: 4px solid #f59e0b;
    border-radius: 0 12px 12px 0;
    background: #fff8e8;
    color: #5d4b2e;
}

.learning-pronunciation-page {
    display: grid;
    gap: 1rem;
}

.pronunciation-hero {
    display: grid;
    gap: .65rem;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 92% 10%, rgba(45,212,191,.16), transparent 32%),
        linear-gradient(135deg, #fff, #f5fcfb);
}

.pronunciation-workspace {
    display: grid;
    grid-template-columns: minmax(220px, .62fr) minmax(0, 1.6fr);
    align-items: start;
    gap: 1rem;
}

.pronunciation-coach {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem;
    text-align: center;
    background: linear-gradient(180deg, #effbf8, #fff);
}

.pronunciation-coach-mascot {
    width: min(220px, 90%);
    max-height: 230px;
    object-fit: contain;
    margin-bottom: .75rem;
    filter: drop-shadow(0 16px 20px rgba(15,118,110,.12));
}

.pronunciation-card {
    padding: clamp(1.1rem, 3vw, 1.7rem);
}

.pronunciation-target {
    padding: 1.15rem;
    border: 1px solid #d8ebe7;
    border-radius: 16px;
    background: #f8fcfb;
}

.pronunciation-target p {
    margin: .35rem 0 0;
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1.3;
    color: #10233f;
}

.pronunciation-listen-actions,
.pronunciation-controls,
.exercise-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1rem;
}

.microphone-button {
    min-height: 74px;
    padding: 1rem 1.3rem;
    border: 0;
    border-radius: 18px;
    color: white;
    background: linear-gradient(135deg, #0f9488, #21b8a8);
    box-shadow: 0 13px 28px rgba(15,148,136,.24);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.microphone-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 34px rgba(15,148,136,.28);
}

.microphone-icon {
    font-size: 1.45rem;
}

.pronunciation-transcript,
.pronunciation-result,
.recording-preview,
.speech-support {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #e2e9e8;
    border-radius: 14px;
    background: #fbfdfd;
}

.pronunciation-score {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pronunciation-score strong {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    color: #08796f;
    background: #e9f8f5;
    font-size: 1.35rem;
}

.oral-attempt-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
}

.oral-attempt-score {
    display: grid;
    place-items: center;
    align-content: center;
    width: 105px;
    min-height: 105px;
    padding: .65rem;
    border-radius: 50%;
    text-align: center;
    color: #08796f;
    background: #eaf8f6;
    border: 7px solid #d2f0eb;
}

.oral-attempt-score strong {
    font-size: 1.4rem;
}

.oral-attempt-content audio {
    width: min(100%, 460px);
    margin-top: .65rem;
}

.learning-review-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: clamp(1.15rem, 3vw, 1.8rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 10%, rgba(45,212,191,.15), transparent 30%),
        linear-gradient(135deg, #fff, #f5fcfb);
}

.learning-review-mascot {
    width: clamp(100px, 13vw, 160px);
    max-height: 145px;
    object-fit: contain;
}

.review-session-stats {
    display: flex;
    gap: .65rem;
}

.review-session-stats > span {
    min-width: 88px;
    padding: .7rem;
    border-radius: 13px;
    background: rgba(255,255,255,.82);
    border: 1px solid #dcebe8;
    text-align: center;
}

.vocabulary-memory-card,
.vocabulary-stat-columns > .card {
    border-color: #dfeae8;
}

.review-calendar {
    display: grid;
    grid-template-columns: repeat(10, minmax(28px, 1fr));
    gap: .45rem;
}

.review-calendar-day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eef2f2;
    font-size: .76rem;
}

.review-calendar-day.intensity-1 { background: #d7f3ee; }
.review-calendar-day.intensity-2 { background: #9de3d8; }
.review-calendar-day.intensity-3 { background: #4fc7b7; color: #073b36; }
.review-calendar-day.intensity-4 { background: #0f9488; color: white; }

@keyframes foxLearningFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

@media (max-width: 980px) {
    .learning-stat-grid,
    .today-stats.learning-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pronunciation-workspace {
        grid-template-columns: 1fr;
    }

    .pronunciation-coach {
        position: static;
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        text-align: left;
    }

    .pronunciation-coach-mascot {
        grid-row: 1 / 4;
        width: 110px;
        margin: 0;
    }

    .learning-review-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .learning-review-header .review-session-stats {
        grid-column: 1 / -1;
    }

    .saved-content-card,
    .oral-attempt-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .saved-content-card > .button,
    .oral-attempt-card > .button {
        grid-column: 2;
        width: fit-content;
    }
}

@media (max-width: 680px) {
    .learning-page-heading,
    .learning-hero {
        grid-template-columns: 1fr;
    }

    .learning-heading-mascot {
        position: absolute;
        right: -18px;
        bottom: -26px;
        width: 125px;
        opacity: .22;
    }

    .learning-hero-side {
        justify-content: space-between;
    }

    .learning-hero-mascot {
        width: 118px;
    }

    .revision-grid,
    .learning-card-grid,
    .learning-stat-grid,
    .today-stats.learning-stat-grid {
        grid-template-columns: 1fr;
    }

    .learning-stat-grid .stat-card {
        min-height: 108px;
    }

    .learning-reminder {
        align-items: flex-start;
        flex-direction: column;
    }

    .learning-filter-bar {
        top: 72px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .learning-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .saved-content-card,
    .oral-attempt-card {
        grid-template-columns: 1fr;
    }

    .saved-content-icons {
        flex-direction: row;
    }

    .saved-content-card > .button,
    .oral-attempt-card > .button {
        grid-column: auto;
        width: 100%;
    }

    .oral-attempt-score {
        width: 92px;
        min-height: 92px;
    }

    .pronunciation-coach {
        grid-template-columns: 90px minmax(0, 1fr);
        padding: 1rem;
    }

    .pronunciation-coach-mascot {
        width: 85px;
    }

    .pronunciation-listen-actions .button,
    .pronunciation-controls .button,
    .pronunciation-controls .microphone-button,
    .exercise-actions .button {
        width: 100%;
        justify-content: center;
    }

    .learning-review-header {
        grid-template-columns: 1fr;
    }

    .learning-review-mascot {
        position: absolute;
        right: -20px;
        top: 5px;
        width: 120px;
        opacity: .18;
    }

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

    .review-calendar {
        grid-template-columns: repeat(6, minmax(28px, 1fr));
    }
}


/* =========================================================
   V23 — ÉTAPE 6 : MOTIVATION, CONFIANCE ET RÉCOMPENSES
   ========================================================= */

.motivation-page-heading,
.motivation-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.4rem);
    padding: clamp(1.3rem, 3.5vw, 2.5rem);
    overflow: hidden;
    border-color: rgba(245, 158, 11, .18);
    background:
        radial-gradient(circle at 88% 14%, rgba(251,191,36,.2), transparent 29%),
        radial-gradient(circle at 5% 95%, rgba(20,184,166,.13), transparent 31%),
        linear-gradient(135deg, #fff 0%, #fffaf0 100%);
}

.motivation-page-heading::after,
.motivation-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    bottom: -125px;
    border-radius: 50%;
    background: rgba(255,255,255,.56);
}

.motivation-page-heading > *,
.motivation-hero > * {
    position: relative;
    z-index: 1;
}

.motivation-page-heading p,
.motivation-hero p {
    max-width: 720px;
    color: #566273;
}

.motivation-heading-mascot,
.motivation-hero-mascot {
    width: clamp(130px, 18vw, 220px);
    max-height: 205px;
    object-fit: contain;
    filter: drop-shadow(0 17px 25px rgba(180, 83, 9, .13));
    animation: motivationFoxFloat 4.4s ease-in-out infinite;
}

.motivation-heading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.motivation-heading-meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .58rem .82rem;
    border: 1px solid #f0dfc4;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #5b4b35;
    font-size: .88rem;
}

.motivation-hero-visual {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
}

.level-emblem {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: clamp(88px, 11vw, 126px);
    height: clamp(88px, 11vw, 126px);
    border: 9px solid #fff1c4;
    border-radius: 50%;
    color: #8a4f00;
    background: linear-gradient(145deg, #ffd86b, #ffb52e);
    box-shadow:
        0 15px 32px rgba(217,119,6,.2),
        inset 0 0 0 4px rgba(255,255,255,.5);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
}

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

.achievement-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    min-height: 220px;
    padding: 1.2rem;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.achievement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 36px rgba(15,23,42,.09);
}

.achievement-card.unlocked {
    border-color: #f1d18b;
    background:
        radial-gradient(circle at 100% 0%, rgba(251,191,36,.17), transparent 35%),
        #fff;
}

.achievement-card.locked {
    filter: saturate(.58);
    background: #f8faf9;
}

.achievement-card.locked::after {
    content: "🔒";
    position: absolute;
    right: .9rem;
    top: .85rem;
    font-size: 1rem;
    opacity: .65;
}

.achievement-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff5d8, #ffe4a3);
    box-shadow: inset 0 0 0 1px rgba(217,119,6,.12);
    font-size: 2rem;
}

.xp-history-card {
    padding: 0;
    overflow: hidden;
}

.xp-history-row {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #edf1f0;
}

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

.xp-history-row:hover {
    background: #fbfdfc;
}

.personal-rank {
    display: none;
}

.motivation-leaderboard {
    padding: .5rem;
    overflow: hidden;
}

.leaderboard-list {
    display: grid;
    gap: .35rem;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 74px;
    padding: .75rem 1rem;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: transform .18s ease, background .18s ease;
}

.leaderboard-row:hover {
    transform: translateX(3px);
    background: #f7fbfa;
}

.leaderboard-row.current-user {
    border-color: #c8ebe5;
    background: linear-gradient(90deg, #eaf9f6, #fff);
    box-shadow: inset 4px 0 0 #14a394;
}

.leaderboard-position {
    display: grid;
    place-items: center;
    min-height: 48px;
    border-radius: 13px;
    background: #f4f7f7;
    font-size: 1.25rem;
    font-weight: 900;
}

.leaderboard-row:nth-child(1) .leaderboard-position { background: #fff3bf; }
.leaderboard-row:nth-child(2) .leaderboard-position { background: #edf0f2; }
.leaderboard-row:nth-child(3) .leaderboard-position { background: #f4dfcc; }

.leaderboard-user {
    display: grid;
    gap: .2rem;
}

.motivation-device-card {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(300px, 1.2fr);
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
    padding: clamp(1.2rem, 3vw, 2rem);
    background:
        radial-gradient(circle at 10% 90%, rgba(20,184,166,.11), transparent 32%),
        #fff;
}

.motivation-device-card > p {
    padding: 1rem;
    border-radius: 15px;
    background: #f4faf9;
    color: #405064;
    font-size: 1.05rem;
}

.push-device-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.push-device-controls .button {
    justify-content: center;
}

.push-device-controls [data-push-status] {
    grid-column: 1 / -1;
    min-height: 42px;
    margin: 0;
    padding: .75rem;
    border-radius: 12px;
    background: #f7f9f9;
}

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

.certificate-summary-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.15rem;
    padding: 1.2rem;
    border-left: 5px solid #e9ad2b;
    background:
        radial-gradient(circle at 100% 0%, rgba(251,191,36,.12), transparent 25%),
        #fff;
}

.certificate-summary-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: #fff2c8;
    font-size: 2rem;
}

.certificate-summary-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.motivation-certificate-page {
    padding-bottom: 2rem;
}

.certificate-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.certificate-document {
    max-width: 980px;
    margin-inline: auto;
    padding: clamp(.65rem, 2vw, 1.3rem);
    border-radius: 24px;
    background: linear-gradient(145deg, #0d766d, #0a504b);
    box-shadow: 0 25px 65px rgba(15,23,42,.2);
}

.certificate-border {
    position: relative;
    min-height: 650px;
    padding: clamp(2rem, 6vw, 5rem);
    overflow: hidden;
    border: 3px double #d69b29;
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 15%, rgba(251,191,36,.1), transparent 23%),
        radial-gradient(circle at 88% 85%, rgba(20,184,166,.1), transparent 25%),
        #fffdf7;
}

.certificate-border::before,
.certificate-border::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px solid rgba(214,155,41,.35);
    transform: rotate(45deg);
}

.certificate-border::before { left: -100px; top: -100px; }
.certificate-border::after { right: -100px; bottom: -100px; }

.certificate-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 900;
    color: #0a6259;
}

.certificate-brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: white;
    background: linear-gradient(145deg, #16a394, #08786f);
}

.certificate-label {
    display: block;
    width: fit-content;
    margin: 2.4rem auto 1rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    color: #7b5000;
    background: #fff0bd;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.certificate-document h1,
.certificate-document h2,
.certificate-intro,
.certificate-course-details {
    text-align: center;
}

.certificate-document h1 {
    margin: .7rem 0;
    color: #14213d;
    font-family: Georgia, serif;
    font-size: clamp(2rem, 6vw, 4.2rem);
}

.certificate-document h2 {
    color: #0b756b;
}

.certificate-seal {
    display: grid;
    place-items: center;
    align-content: center;
    width: 118px;
    height: 118px;
    margin: 2rem auto;
    border: 7px double #f0b83c;
    border-radius: 50%;
    color: #7d5100;
    background: #fff4cc;
}

.certificate-seal span {
    font-size: 2rem;
}

.certificate-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.certificate-footer > div {
    padding-top: .85rem;
    border-top: 1px solid #ddc98e;
}

.certificate-verification {
    margin-top: 1.5rem;
    text-align: center;
    word-break: break-all;
    color: #657080;
    font-size: .82rem;
}

.motivation-verification-page {
    max-width: 900px;
    margin-inline: auto;
}

.verification-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .8rem;
    margin-block: 1rem;
    padding: 1.2rem;
}

.verification-form input {
    min-height: 52px;
    font-size: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.verification-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.15rem;
    padding: 1.3rem;
}

.verification-result.valid {
    border-color: #a9dfd6;
    background: linear-gradient(135deg, #effbf8, #fff);
}

.verification-result.invalid {
    border-color: #f1b4b4;
    background: linear-gradient(135deg, #fff2f2, #fff);
}

.verification-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: white;
    background: #0f9488;
    font-size: 1.7rem;
    font-weight: 900;
}

.verification-result.invalid .verification-icon {
    background: #dc4b4b;
}

.verification-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.verification-details > div {
    padding: .8rem;
    border-radius: 12px;
    background: rgba(255,255,255,.72);
}

.verification-details dt {
    color: #687386;
    font-size: .78rem;
}

.verification-details dd {
    margin: .2rem 0 0;
    font-weight: 800;
}

.motivation-feedback-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.feedback-history-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 260px;
    padding: 1.2rem;
    border-top: 4px solid #23a99b;
}

.feedback-history-card blockquote {
    margin: .4rem 0 0;
    padding: 1rem;
    border: 0;
    border-radius: 14px;
    color: #38475a;
    background: #eef9f7;
}

.feedback-history-card .muted {
    margin-top: auto;
}

.feedback-stars {
    color: #e9a51b;
    font-size: 1.2rem;
    letter-spacing: .08em;
}

@keyframes motivationFoxFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

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

    .motivation-device-card {
        grid-template-columns: 1fr;
    }

    .certificate-summary-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .certificate-summary-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .motivation-feedback-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .motivation-page-heading,
    .motivation-hero {
        grid-template-columns: 1fr;
    }

    .motivation-heading-mascot {
        position: absolute;
        right: -18px;
        bottom: -24px;
        width: 130px;
        opacity: .22;
    }

    .motivation-hero-visual {
        justify-content: space-between;
    }

    .motivation-hero-mascot {
        width: 120px;
    }

    .level-emblem {
        width: 88px;
        height: 88px;
        border-width: 6px;
    }

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

    .achievement-card {
        min-height: 0;
    }

    .leaderboard-row {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: .7rem;
        padding: .7rem;
    }

    .leaderboard-row > .xp-value {
        grid-column: 2;
    }

    .push-device-controls {
        grid-template-columns: 1fr;
    }

    .push-device-controls [data-push-status] {
        grid-column: auto;
    }

    .certificate-summary-card {
        grid-template-columns: 1fr;
    }

    .certificate-summary-actions {
        grid-column: auto;
    }

    .certificate-summary-actions .button {
        width: 100%;
        justify-content: center;
    }

    .certificate-toolbar {
        flex-direction: column;
    }

    .certificate-toolbar .button {
        width: 100%;
        justify-content: center;
    }

    .certificate-border {
        min-height: 560px;
        padding: 1.4rem;
    }

    .certificate-footer,
    .verification-details,
    .verification-form {
        grid-template-columns: 1fr;
    }

    .verification-result {
        grid-template-columns: 1fr;
    }
}

@media print {
    .site-header,
    .site-footer,
    .mobile-bottom-navigation,
    .certificate-toolbar {
        display: none !important;
    }

    body {
        background: white !important;
    }

    .main-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .certificate-document {
        max-width: none;
        padding: 0;
        background: white;
        box-shadow: none;
    }

    .certificate-border {
        min-height: 95vh;
        border-radius: 0;
    }
}


/* =========================================================
   V23 — ÉTAPE 7 : COMPTE, AUTHENTIFICATION ET SÉCURITÉ
   ========================================================= */

.account-auth-shell {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
    align-items: stretch;
    gap: 1rem;
    max-width: 1040px;
    margin: clamp(1rem, 4vw, 3.2rem) auto;
}

.account-auth-shell.compact {
    max-width: 940px;
}

.account-auth-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 570px;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    border-color: rgba(20,184,166,.17);
    color: #17324f;
    background:
        radial-gradient(circle at 90% 8%, rgba(251,146,60,.16), transparent 28%),
        radial-gradient(circle at 5% 95%, rgba(20,184,166,.18), transparent 32%),
        linear-gradient(145deg, #f1fcf9, #fffaf3);
}

.account-auth-shell.compact .account-auth-intro {
    min-height: 470px;
}

.account-auth-intro::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    bottom: -120px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
}

.account-auth-intro > * {
    position: relative;
    z-index: 1;
}

.account-auth-intro h1 {
    max-width: 510px;
    margin: .5rem 0 .8rem;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.02;
}

.account-auth-intro p {
    max-width: 560px;
    color: #526173;
    font-size: 1.03rem;
}

.account-auth-mascot {
    width: min(260px, 82%);
    max-height: 250px;
    object-fit: contain;
    align-self: center;
    margin-bottom: 1rem;
    filter: drop-shadow(0 18px 26px rgba(15,118,110,.13));
    animation: accountFoxFloat 4.5s ease-in-out infinite;
}

.account-auth-points {
    display: grid;
    gap: .65rem;
    margin-top: 1.4rem;
}

.account-auth-points span {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: .65rem .8rem;
    border: 1px solid rgba(15,148,136,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    color: #35485f;
    font-weight: 700;
}

.account-auth-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 570px;
    max-width: none;
    margin: 0;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.account-auth-shell.compact .account-auth-card {
    min-height: 470px;
}

.account-auth-card h2 {
    margin: .35rem 0 1.25rem;
    font-size: clamp(1.8rem, 4vw, 2.55rem);
}

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

.account-auth-card label,
.account-password-card label {
    display: grid;
    gap: .45rem;
    color: #334257;
    font-weight: 800;
}

.account-auth-card input,
.account-password-card input {
    min-height: 52px;
    padding: .85rem 1rem;
    border: 1px solid #dbe4e3;
    border-radius: 13px;
    background: #fbfdfd;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.account-auth-card input:focus,
.account-password-card input:focus {
    outline: none;
    border-color: #37b8aa;
    background: white;
    box-shadow: 0 0 0 4px rgba(20,184,166,.12);
}

.account-auth-submit {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    margin-top: .25rem;
}

.account-auth-link {
    width: fit-content;
    color: #0a786f;
    font-weight: 800;
}

.account-auth-switch {
    margin: 1.25rem 0 0;
    padding-top: 1.15rem;
    border-top: 1px solid #edf1f0;
    text-align: center;
    color: #687386;
}

.account-auth-switch a {
    color: #08796f;
    font-weight: 900;
}

.password-guidance {
    display: grid;
    gap: .2rem;
    padding: .8rem .9rem;
    border: 1px solid #f0dfc1;
    border-radius: 12px;
    color: #6c5432;
    background: #fff9ec;
    font-size: .86rem;
}

.account-status-shell {
    display: grid;
    place-items: center;
    min-height: min(680px, 72vh);
    padding-block: 2rem;
}

.account-status-card {
    width: min(100%, 610px);
    margin: 0;
    padding: clamp(1.5rem, 5vw, 3.2rem);
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(20,184,166,.12), transparent 30%),
        #fff;
}

.account-status-mascot {
    width: min(230px, 72%);
    max-height: 220px;
    object-fit: contain;
    margin-inline: auto;
    filter: drop-shadow(0 16px 23px rgba(15,118,110,.12));
}

.account-status-card .button {
    justify-content: center;
}

.account-page-heading {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.3rem);
    padding: clamp(1.25rem, 3.5vw, 2.4rem);
    overflow: hidden;
    border-color: rgba(30,64,175,.11);
    background:
        radial-gradient(circle at 88% 10%, rgba(59,130,246,.12), transparent 28%),
        radial-gradient(circle at 5% 90%, rgba(20,184,166,.12), transparent 31%),
        linear-gradient(135deg, #fff, #f4f9ff);
}

.account-page-heading > * {
    position: relative;
    z-index: 1;
}

.account-page-heading::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    bottom: -130px;
    border-radius: 50%;
    background: rgba(255,255,255,.54);
}

.account-heading-mascot,
.sessions-heading-mascot {
    width: clamp(120px, 17vw, 205px);
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(30,64,175,.1));
    animation: accountFoxFloat 4.5s ease-in-out infinite;
}

.account-heading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

.account-heading-meta span {
    padding: .58rem .82rem;
    border: 1px solid #d8e5f3;
    border-radius: 999px;
    color: #405570;
    background: rgba(255,255,255,.82);
    font-size: .88rem;
    font-weight: 800;
}

.account-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-block: 1.25rem;
}

.account-security-grid > .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 230px;
    padding: 1.3rem;
    overflow: hidden;
    border-top: 4px solid #2ba99c;
}

.account-security-grid > .card:nth-child(2) {
    border-top-color: #4d7fd2;
}

.account-security-grid .button {
    width: fit-content;
    margin-top: auto;
}

.verification-badge {
    width: fit-content;
    padding: .55rem .75rem;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 900;
}

.verification-badge.verified {
    color: #08776d;
    background: #e7f8f4;
}

.verification-badge.pending {
    color: #8b5c09;
    background: #fff4d6;
}

.account-password-card {
    max-width: 760px;
    margin: 1rem auto 0;
    padding: clamp(1.2rem, 4vw, 2rem);
}

.account-password-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #edf1f0;
}

.account-password-heading h2 {
    margin: .2rem 0;
}

.account-password-heading p {
    margin: 0;
    color: #687386;
}

.account-security-icon {
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: #eef5ff;
    font-size: 1.55rem;
}

.sessions-heading-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sessions-heading-actions form {
    flex: 0 0 auto;
}

.account-session-list {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.session-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 130px;
    padding: 1.15rem;
    border-left: 5px solid #d9e2e1;
}

.session-card.current {
    border-color: #14a394;
    background:
        linear-gradient(90deg, rgba(20,184,166,.08), transparent 42%),
        #fff;
}

.session-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #eff5f6;
    font-size: 1.7rem;
}

.session-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
}

.session-title-row h2 {
    margin: 0;
    font-size: 1.1rem;
}

.session-card p {
    overflow-wrap: anywhere;
}

@keyframes accountFoxFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

@media (max-width: 900px) {
    .account-auth-shell {
        grid-template-columns: 1fr;
        max-width: 680px;
    }

    .account-auth-intro,
    .account-auth-shell.compact .account-auth-intro {
        min-height: 0;
    }

    .account-auth-mascot {
        width: 170px;
        max-height: 165px;
    }

    .account-auth-card,
    .account-auth-shell.compact .account-auth-card {
        min-height: 0;
    }

    .sessions-heading-actions {
        flex-direction: column;
        align-items: flex-end;
    }

    .sessions-heading-mascot {
        width: 120px;
    }
}

@media (max-width: 680px) {
    .account-auth-shell {
        margin-top: .75rem;
    }

    .account-auth-intro {
        padding: 1.25rem;
        text-align: center;
    }

    .account-auth-intro h1 {
        font-size: 2rem;
    }

    .account-auth-points {
        text-align: left;
    }

    .account-page-heading {
        grid-template-columns: 1fr;
    }

    .account-heading-mascot {
        position: absolute;
        right: -18px;
        bottom: -24px;
        width: 125px;
        opacity: .21;
    }

    .account-security-grid {
        grid-template-columns: 1fr;
    }

    .sessions-heading-actions {
        align-items: stretch;
    }

    .sessions-heading-mascot {
        position: absolute;
        right: -15px;
        bottom: -25px;
        width: 120px;
        opacity: .18;
    }

    .sessions-heading-actions .button {
        width: 100%;
        justify-content: center;
    }

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

    .session-card form {
        grid-column: 1 / -1;
    }

    .session-card form .button {
        width: 100%;
        justify-content: center;
    }

    .account-password-heading {
        align-items: flex-start;
    }
}


/* =========================================================
   V23 — ÉTAPE 8 : PAGES PUBLIQUES, APPLICATION ET PLACEMENT
   ========================================================= */

.public-page-heading {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.3rem, 3.5vw, 2.5rem);
    overflow: hidden;
    border-color: rgba(20,184,166,.15);
    background:
        radial-gradient(circle at 89% 12%, rgba(251,146,60,.16), transparent 28%),
        radial-gradient(circle at 4% 94%, rgba(20,184,166,.17), transparent 31%),
        linear-gradient(135deg, #fff 0%, #f3fbf9 100%);
}

.public-page-heading::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -105px;
    bottom: -125px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
}

.public-page-heading > * {
    position: relative;
    z-index: 1;
}

.public-page-heading p {
    max-width: 730px;
    color: #566577;
}

.public-heading-mascot {
    width: clamp(130px, 18vw, 220px);
    max-height: 205px;
    object-fit: contain;
    filter: drop-shadow(0 18px 26px rgba(15,118,110,.13));
    animation: publicFoxFloat 4.5s ease-in-out infinite;
}

.public-heading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

.public-heading-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .52rem .78rem;
    border: 1px solid #dceae7;
    border-radius: 999px;
    color: #405064;
    background: rgba(255,255,255,.82);
    font-size: .87rem;
    font-weight: 750;
}

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

.app-install-grid.public-card-grid > .card,
.course-catalog-grid > .card,
.placement-language-grid > .card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.app-install-grid.public-card-grid > .card:hover,
.course-catalog-grid > .card:hover,
.placement-language-grid > .card:hover {
    transform: translateY(-4px);
    border-color: #bee4de;
    box-shadow: 0 18px 38px rgba(15,23,42,.09);
}

.app-install-grid .card {
    display: flex;
    flex-direction: column;
    min-height: 290px;
    padding: 1.3rem;
    border-top: 4px solid #1eaaa0;
}

.app-install-grid .card:nth-child(2) {
    border-top-color: #f1a537;
}

.app-install-grid .card:nth-child(3) {
    border-top-color: #6886d8;
}

.app-install-grid .button {
    width: fit-content;
    margin-top: auto;
}

.app-platform-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin-bottom: .75rem;
    border-radius: 19px;
    background: #edf8f6;
    font-size: 1.9rem;
}

.public-info-panel {
    margin-top: 1.25rem;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    background:
        linear-gradient(135deg, rgba(20,184,166,.06), transparent 55%),
        #fff;
}

.app-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1rem;
}

.app-feature-list > div {
    display: grid;
    gap: .25rem;
    padding: 1rem;
    border: 1px solid #e0e9e7;
    border-radius: 14px;
    background: #fafdfc;
}

.app-feature-list strong {
    color: #0b796f;
}

.course-catalog-grid {
    margin-top: 1.25rem;
}

.course-card {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    padding: 1.3rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(20,184,166,.09), transparent 30%),
        #fff;
}

.course-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}

.language-flag {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #f2f6f5;
    font-size: 1.85rem;
}

.course-card h2 {
    margin: 1rem 0 .5rem;
}

.course-card > p {
    color: #617083;
}

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

.course-meta > div {
    padding: .75rem;
    border: 1px solid #e6eceb;
    border-radius: 12px;
    background: #fafcfc;
}

.course-meta dt {
    color: #748093;
    font-size: .74rem;
}

.course-meta dd {
    margin: .2rem 0 0;
    color: #26374f;
    font-weight: 900;
}

.course-card .button {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

.placement-language-grid {
    margin-top: 1.25rem;
}

.placement-language-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 190px;
    padding: 1.25rem;
    color: inherit;
    text-decoration: none;
    border-top: 4px solid #20aa9d;
}

.placement-language-card .button {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
}

.public-feature-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.2rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    background:
        radial-gradient(circle at 95% 10%, rgba(20,184,166,.1), transparent 30%),
        #fff;
}

.placement-intro-icon {
    display: grid;
    place-items: center;
    width: 94px;
    height: 94px;
    border-radius: 24px;
    background: #eef8f6;
    font-size: 2.7rem;
}

.exam-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 1rem 0;
}

.exam-meta span {
    padding: .5rem .72rem;
    border-radius: 999px;
    color: #4c5c70;
    background: #f0f5f4;
    font-size: .85rem;
    font-weight: 800;
}

.public-history-section {
    margin-top: 2rem;
}

.placement-history-list {
    display: grid;
    gap: .75rem;
}

.placement-history-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
}

.placement-exam-page {
    display: grid;
    gap: 1rem;
}

.placement-exam-header {
    padding: clamp(1.2rem, 3vw, 1.9rem);
    background:
        radial-gradient(circle at 92% 8%, rgba(20,184,166,.13), transparent 30%),
        linear-gradient(135deg, #fff, #f6fcfa);
}

.placement-exam-form {
    display: grid;
    gap: 1rem;
}

.placement-exam-form .exam-question-card {
    border-top: 4px solid #2aa99c;
}

.public-result-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: clamp(1.3rem, 4vw, 2.5rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(251,191,36,.17), transparent 29%),
        radial-gradient(circle at 5% 92%, rgba(20,184,166,.13), transparent 31%),
        linear-gradient(135deg, #fff, #fffaf0);
}

.public-result-visual {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.public-result-mascot {
    width: clamp(120px, 17vw, 205px);
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(180,83,9,.13));
}

.placement-level-emblem {
    display: grid;
    place-items: center;
    width: 105px;
    height: 105px;
    border: 7px solid #fff0c1;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffd768, #ffb62e);
    box-shadow: 0 15px 30px rgba(217,119,6,.18);
    font-size: 2.6rem;
}

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

.placement-skill-card {
    min-height: 150px;
    padding: 1.2rem;
    border-top: 4px solid #2aa99c;
}

.public-recommendation-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.25rem;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    border-color: #cce9e4;
    background:
        linear-gradient(135deg, rgba(20,184,166,.08), transparent 55%),
        #fff;
}

.public-recommendation-card .button {
    min-width: 190px;
    justify-content: center;
}

@keyframes publicFoxFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

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

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

@media (max-width: 680px) {
    .public-page-heading,
    .public-result-hero {
        grid-template-columns: 1fr;
    }

    .public-heading-mascot {
        position: absolute;
        right: -18px;
        bottom: -24px;
        width: 125px;
        opacity: .22;
    }

    .public-card-grid,
    .placement-skill-grid,
    .app-feature-list {
        grid-template-columns: 1fr;
    }

    .course-card {
        min-height: 0;
    }

    .public-feature-card,
    .placement-history-card {
        grid-template-columns: 1fr;
    }

    .placement-intro-icon {
        width: 72px;
        height: 72px;
        font-size: 2rem;
    }

    .public-result-visual {
        justify-content: space-between;
    }

    .public-result-mascot {
        width: 125px;
    }

    .placement-level-emblem {
        width: 88px;
        height: 88px;
        font-size: 2rem;
    }

    .public-recommendation-card {
        grid-template-columns: 1fr;
    }

    .public-recommendation-card .button {
        width: 100%;
    }
}


/* =========================================================
   V23 — ÉTAPE 10 : AUDIT GLOBAL ET STABILISATION
   Ces règles finales doivent rester en fin de fichier.
   ========================================================= */

:root {
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-top: env(safe-area-inset-top, 0px);
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
audio,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #0f9488;
}

a,
button,
summary,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(14, 165, 153, .34);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.container,
.app-container,
.admin-main,
.admin-content {
    min-width: 0;
}

.card,
.auth-card,
.exam-question-card,
.exercise-card,
.module-card,
.lesson-card,
.stat-card {
    min-width: 0;
}

.card > *,
.grid > *,
[class*="-grid"] > * {
    min-width: 0;
}

h1,
h2,
h3,
h4,
p,
li,
dd,
td,
th,
blockquote {
    overflow-wrap: anywhere;
}

pre,
code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.table-wrapper,
.admin-table-wrapper,
.responsive-table,
.certificate-table,
.data-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    vertical-align: top;
}

.flash,
.alert,
.notice,
.message,
.empty-state {
    position: relative;
    border-radius: 15px;
    line-height: 1.55;
}

.flash,
.alert {
    padding: .9rem 1rem;
}

.flash-success,
.alert-success {
    color: #075f56;
    border: 1px solid #bce8df;
    background: #eaf9f6;
}

.flash-error,
.alert-error,
.alert:not([class*="-success"]):not([class*="-info"]):not([class*="-warning"]) {
    color: #8a2929;
    border: 1px solid #efc4c4;
    background: #fff1f1;
}

.flash-warning,
.alert-warning {
    color: #7a5108;
    border: 1px solid #f1ddb1;
    background: #fff8e8;
}

.flash-info,
.alert-info {
    color: #24557d;
    border: 1px solid #cbdff0;
    background: #eef7ff;
}

.empty-state {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 2rem;
    border: 1px dashed #cfdcda;
    background:
        radial-gradient(circle at 50% 0%, rgba(20,184,166,.08), transparent 40%),
        #fbfdfd;
    text-align: center;
}

.empty-state .button {
    margin-top: .75rem;
}

.button,
button.button,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    cursor: pointer;
}

.button:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.button.danger,
button.danger,
[data-danger] {
    color: #fff;
    background: linear-gradient(135deg, #d94a4a, #b72f2f);
    border-color: transparent;
}

.button.secondary {
    box-shadow: none;
}

.form-grid,
.form-row,
.filters,
.filter-bar,
.actions,
.button-row {
    min-width: 0;
}

label {
    min-width: 0;
}

select {
    text-overflow: ellipsis;
}

progress {
    width: 100%;
    accent-color: #0f9488;
}

details > summary {
    cursor: pointer;
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

dialog {
    max-width: min(92vw, 720px);
    max-height: 88vh;
    padding: 0;
    border: 0;
    border-radius: 20px;
    overflow: auto;
    box-shadow: 0 28px 80px rgba(15,23,42,.25);
}

dialog::backdrop {
    background: rgba(15,23,42,.48);
    backdrop-filter: blur(4px);
}

.connection-banner {
    position: sticky;
    top: 0;
    z-index: 300;
    padding: .65rem 1rem;
    color: #704b06;
    background: #fff2c8;
    text-align: center;
    font-weight: 800;
}

.pwa-banner {
    z-index: 280;
}

.site-footer {
    padding-bottom: calc(1.5rem + var(--app-safe-bottom));
}

.mobile-bottom-navigation {
    padding-bottom: var(--app-safe-bottom);
}

@media (max-width: 980px) {
    body {
        padding-bottom: calc(72px + var(--app-safe-bottom));
    }

    .site-header.app-header {
        padding-top: var(--app-safe-top);
    }

    .site-header.app-header .main-navigation {
        max-width: calc(100vw - 1rem);
    }

    .admin-table,
    .responsive-stack-table {
        min-width: 720px;
    }
}

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

    .page-heading,
    .card,
    .auth-card {
        border-radius: 18px;
    }

    .button-row,
    .actions,
    .form-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .button-row .button,
    .actions .button,
    .form-actions .button,
    .button-row button,
    .actions button,
    .form-actions button {
        width: 100%;
        justify-content: center;
    }

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

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

    table.compact-mobile thead {
        display: none;
    }

    table.compact-mobile tr {
        margin-bottom: .8rem;
        padding: .85rem;
        border: 1px solid #e0e8e7;
        border-radius: 14px;
        background: #fff;
    }

    table.compact-mobile td {
        padding: .4rem 0;
        border: 0;
    }

    table.compact-mobile td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .15rem;
        color: #718094;
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    dialog {
        width: calc(100vw - 1rem);
        max-width: none;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: more) {
    .card,
    .auth-card,
    input,
    select,
    textarea,
    button,
    .button {
        border-color: currentColor;
    }
}

@media print {
    .site-header,
    .site-footer,
    .mobile-bottom-navigation,
    .pwa-banner,
    .connection-banner,
    .nav-toggle,
    .button:not(.print-visible) {
        display: none !important;
    }

    body {
        padding: 0 !important;
        background: #fff !important;
    }

    .container,
    .app-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .card {
        box-shadow: none !important;
        break-inside: avoid;
    }
}


/* =========================================================
   V23.11 — EXAMEN FINAL A1
   ========================================================= */
.final-exam-prep-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
    padding: clamp(1.3rem, 4vw, 2.7rem);
    overflow: hidden;
    background: radial-gradient(circle at 90% 10%, rgba(251,191,36,.2), transparent 28%), radial-gradient(circle at 5% 92%, rgba(20,184,166,.15), transparent 30%), linear-gradient(135deg,#fff,#fffaf0);
}
.final-exam-prep-copy h1 { margin: .6rem 0; font-size: clamp(2.2rem,6vw,4.5rem); line-height: 1; }
.final-exam-prep-copy p { max-width: 760px; color:#566577; font-size:1.04rem; }
.final-exam-keyfacts { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.15rem; }
.final-exam-keyfacts span { padding:.65rem .82rem; border:1px solid #eadab9; border-radius:999px; background:rgba(255,255,255,.84); color:#5c4a31; }
.final-exam-prep-visual { display:flex; align-items:center; gap:.6rem; }
.final-exam-fox { width:clamp(150px,20vw,250px); max-height:230px; object-fit:contain; filter:drop-shadow(0 18px 25px rgba(15,118,110,.12)); }
.final-readiness-ring { --value: calc(var(--progress) * 3.6deg); display:grid; place-items:center; align-content:center; width:125px; height:125px; border-radius:50%; background:radial-gradient(circle closest-side,#fff 74%,transparent 76% 99%),conic-gradient(#0f9488 var(--value),#e5eceb 0); box-shadow:0 14px 30px rgba(15,23,42,.11); }
.final-readiness-ring strong { font-size:1.7rem; color:#0a6f67; }.final-readiness-ring span{font-size:.75rem;color:#697588;}
.final-exam-prep-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.final-readiness-card,.final-skills-preview { padding:clamp(1.2rem,3vw,1.8rem); }
.final-readiness-card { border-top:5px solid #d0d9d8; }.final-readiness-card.is-ready{border-top-color:#16a394;background:linear-gradient(135deg,#effbf8,#fff);}.final-readiness-card.is-locked{border-top-color:#e8ae3d;background:linear-gradient(135deg,#fff9e9,#fff);}
.final-start-button { margin-top:1rem; width:100%; justify-content:center; min-height:54px; }
.final-skill-preview-list { display:grid; gap:.65rem; margin-top:1rem; }.final-skill-preview-list span{padding:.8rem .9rem;border:1px solid #e1e9e7;border-radius:13px;background:#fafdfc;font-weight:750;}
.final-exam-advice { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:1rem; margin-top:1rem; padding:1.3rem; }
.final-advice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }.final-advice-grid span{padding:.75rem;border-radius:12px;background:#f6faf9;color:#405064;}
.final-attempt-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.final-attempt-card{display:grid;gap:.55rem;text-decoration:none;color:inherit;}.final-attempt-card>strong{font-size:2rem;color:#10233f;}
.exam-question-tags { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }.final-skill-chip,.final-result-label{display:inline-flex;width:fit-content;padding:.4rem .65rem;border-radius:999px;background:#eef8f6;color:#08796f;font-size:.78rem;font-weight:850;}
.final-skill-results { margin:1.2rem 0; padding:clamp(1.1rem,3vw,1.7rem); }.final-skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;}.final-skill-result{padding:1rem;border:1px solid #e1e9e7;border-radius:15px;background:#fbfdfd;}.final-skill-result>div:first-child{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;}.final-skill-result h3{margin:0;font-size:1rem;}.final-skill-result strong{font-size:1.25rem;}.final-skill-result p{margin:.55rem 0 0;font-size:.84rem;color:#657285;}.final-skill-result.is-strong{border-color:#bce5dd;background:#f2fbf9;}.final-skill-result.is-review{border-color:#eed7aa;background:#fffaf0;}
@media(max-width:820px){.final-exam-prep-hero,.final-exam-prep-layout,.final-exam-advice{grid-template-columns:1fr}.final-exam-prep-visual{justify-content:space-between}.final-attempt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.final-exam-fox{width:135px}.final-readiness-ring{width:100px;height:100px}.final-advice-grid,.final-skill-grid,.final-attempt-grid{grid-template-columns:1fr}.final-exam-keyfacts span{width:100%;border-radius:12px}}


/* =========================================================
   V23.12 — RÉVISION FINALE PERSONNALISÉE
   ========================================================= */

.final-review-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
    padding: clamp(1.3rem, 4vw, 2.7rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(45,212,191,.18), transparent 28%),
        radial-gradient(circle at 5% 92%, rgba(251,146,60,.14), transparent 30%),
        linear-gradient(135deg, #fff, #f3fcfa);
}

.final-review-hero h1 {
    max-width: 850px;
    margin: .6rem 0;
    font-size: clamp(2.05rem, 5.5vw, 4.2rem);
    line-height: 1.02;
}

.final-review-hero p {
    max-width: 780px;
    color: #566577;
    font-size: 1.03rem;
}

.final-review-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.15rem;
}

.final-review-facts span {
    padding: .65rem .82rem;
    border: 1px solid #d5e9e5;
    border-radius: 999px;
    background: rgba(255,255,255,.84);
    color: #40564f;
}

.final-review-visual {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.final-review-fox {
    width: clamp(150px, 20vw, 250px);
    max-height: 230px;
    object-fit: contain;
    filter: drop-shadow(0 18px 25px rgba(15,118,110,.13));
    animation: foxLearningFloat 4.5s ease-in-out infinite;
}

.final-review-skills {
    margin-top: 1rem;
    padding: clamp(1.1rem, 3vw, 1.7rem);
}

.final-review-list {
    display: grid;
    gap: .85rem;
}

.final-review-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem;
    border-left: 5px solid #e5aa37;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.final-review-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 32px rgba(15,23,42,.08);
}

.final-review-item.is-completed {
    border-left-color: #13a394;
    background:
        linear-gradient(90deg, rgba(20,184,166,.07), transparent 42%),
        #fff;
}

.final-review-number {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    color: #805008;
    background: #fff2cf;
    font-size: 1.15rem;
    font-weight: 900;
}

.final-review-item.is-completed .final-review-number {
    color: #08766c;
    background: #ddf5f0;
}

.final-review-content h3 {
    margin: .55rem 0 .35rem;
    font-size: 1.08rem;
}

.final-review-content p {
    margin: 0 0 .45rem;
    color: #566577;
}

.final-review-content small {
    color: #778396;
}

.final-review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.final-review-tags span {
    padding: .36rem .58rem;
    border-radius: 999px;
    color: #506075;
    background: #f0f5f4;
    font-size: .74rem;
    font-weight: 800;
}

.final-review-action {
    display: grid;
    justify-items: end;
    gap: .55rem;
}

.final-review-done {
    color: #08766c;
    font-size: .78rem;
    font-weight: 850;
    text-align: right;
}

.final-review-entry,
.final-review-next,
.final-review-empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: clamp(1.15rem, 3vw, 1.7rem);
    border-color: #cae8e2;
    background:
        radial-gradient(circle at 95% 10%, rgba(20,184,166,.10), transparent 30%),
        #fff;
}

.final-review-empty {
    min-height: 240px;
}

.final-review-empty.is-success {
    border-color: #b9e4db;
    background: linear-gradient(135deg, #effbf8, #fff);
}

.final-review-entry .button,
.final-review-next .button,
.final-review-empty .button {
    min-width: 220px;
    justify-content: center;
}

.learning-exam-card > .button + .button {
    margin-top: .55rem;
}

@media (max-width: 820px) {
    .final-review-hero,
    .final-review-entry,
    .final-review-next,
    .final-review-empty {
        grid-template-columns: 1fr;
    }

    .final-review-visual {
        justify-content: space-between;
    }

    .final-review-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .final-review-action {
        grid-column: 2;
        justify-items: start;
    }
}

@media (max-width: 600px) {
    .final-review-facts span {
        width: 100%;
        border-radius: 12px;
    }

    .final-review-fox {
        width: 135px;
    }

    .final-review-item {
        grid-template-columns: 1fr;
    }

    .final-review-number {
        width: 46px;
        height: 46px;
    }

    .final-review-action {
        grid-column: auto;
        width: 100%;
    }

    .final-review-action .button,
    .final-review-entry .button,
    .final-review-next .button,
    .final-review-empty .button {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .final-review-done {
        text-align: left;
    }
}


/* =========================================================
   V23.13 — CERTIFICAT FINAL A1
   ========================================================= */

.certificate-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .65rem;
}

.certificate-final-document .certificate-border {
    position: relative;
}

.certificate-fox {
    position: absolute;
    top: 1.3rem;
    right: 1.5rem;
    width: 125px;
    max-height: 115px;
    object-fit: contain;
    opacity: .92;
    filter: drop-shadow(0 12px 18px rgba(15,118,110,.12));
}

.certificate-score {
    display: grid;
    place-items: center;
    width: fit-content;
    min-width: 185px;
    margin: 1.5rem auto;
    padding: .9rem 1.35rem;
    border: 1px solid #ead18b;
    border-radius: 18px;
    color: #6f4a06;
    background: linear-gradient(145deg, #fff8df, #fff1b9);
    box-shadow: 0 12px 25px rgba(180,112,10,.10);
}

.certificate-score span {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.certificate-score strong {
    margin-top: .2rem;
    font-size: 2rem;
}

.certificate-final-summary {
    border-left-color: #d9a52d;
}

.certificate-final-summary strong {
    color: #8a5700;
}

.course-certificate-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem;
    margin: 1.25rem 0;
    padding: clamp(1.15rem, 3vw, 1.7rem);
    border-color: #e6cf8d;
    background:
        radial-gradient(circle at 96% 8%, rgba(251,191,36,.15), transparent 28%),
        linear-gradient(135deg, #fffdf7, #fff);
}

.course-certificate-fox {
    width: 125px;
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 13px 20px rgba(180,83,9,.11));
}

.course-certificate-banner h2 {
    margin: .25rem 0 .4rem;
}

.course-certificate-banner p {
    margin: 0;
    color: #607083;
}

.course-certificate-banner .button {
    min-width: 185px;
    justify-content: center;
}

.certificate-verification-page .verification-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 820px) {
    .certificate-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .certificate-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .certificate-toolbar .button {
        width: 100%;
        justify-content: center;
    }

    .course-certificate-banner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .course-certificate-banner .button {
        grid-column: 2;
        width: fit-content;
    }

    .certificate-verification-page .verification-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .certificate-fox {
        width: 88px;
        top: .8rem;
        right: .7rem;
        opacity: .34;
    }

    .certificate-label {
        margin-top: 3.1rem;
    }

    .course-certificate-banner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .course-certificate-fox {
        width: 115px;
        margin-inline: auto;
    }

    .course-certificate-banner .button {
        grid-column: auto;
        width: 100%;
    }

    .certificate-verification-page .verification-details {
        grid-template-columns: 1fr;
    }
}

@media print {
    .certificate-final-page {
        padding: 0;
    }

    .certificate-fox {
        opacity: .75;
    }

    .certificate-score {
        box-shadow: none;
    }
}


/* =========================================================
   V24.12 — RÉVISION FINALE A2
   ========================================================= */

.final-review-hero {
    border-top: 5px solid #14a89a;
}

.final-review-skills .final-skill-result.is-review {
    border-top-color: #e0a02c;
    background:
        linear-gradient(180deg, rgba(245,158,11,.08), transparent 55%),
        #fff;
}

.final-review-skills .final-skill-result.is-strong {
    border-top-color: #1aa795;
    background:
        linear-gradient(180deg, rgba(20,184,166,.08), transparent 55%),
        #fff;
}

.final-review-item .final-review-tags span:last-child {
    color: #0b756c;
    background: #e9f8f5;
}

.final-review-next {
    border-left: 5px solid #16a394;
}

@media (max-width: 600px) {
    .final-review-hero h1 {
        font-size: clamp(1.9rem, 9vw, 2.8rem);
    }
}


/* =========================================================
   V24.13 — CERTIFICAT FINAL MULTILEVEL A1 / A2
   ========================================================= */

.certificate-competencies {
    max-width: 760px;
    margin: 22px auto 8px;
    padding: 14px 20px;
    border: 1px solid rgba(15, 118, 110, .22);
    border-radius: 16px;
    background: rgba(240, 253, 250, .72);
    text-align: center;
}

.certificate-competencies > span {
    display: block;
    margin-bottom: 6px;
    color: #0f766e;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.certificate-competencies p {
    margin: 0;
    color: #344b49;
    line-height: 1.55;
}

.verification-competencies {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #edf9f7;
    border-left: 4px solid #159a8c;
}

.verification-competencies strong {
    color: #0b6f66;
}

.verification-competencies p {
    margin: 6px 0 0;
}

.certificate-summary-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.certificate-summary-heading h2 {
    margin: 0;
}

.certificate-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e8f8f5;
    color: #0b756c;
    font-weight: 900;
    font-size: .82rem;
    letter-spacing: .06em;
}

@media print {
    .certificate-competencies {
        background: transparent;
        border-color: #7aaea8;
    }
}


/* V24.32 — Renards contextuels */
.contextual-fox-image {
    object-fit: contain;
    transform-origin: bottom center;
    filter: drop-shadow(0 16px 24px rgba(15, 60, 67, .13));
    animation: contextualFoxFloat 4.8s ease-in-out infinite;
}

.dashboard-mascot.mascot-contextual .contextual-fox-image {
    width: min(230px, 100%);
    max-height: 245px;
}

.learning-hero-mascot.contextual-fox-image,
.motivation-heading-mascot.contextual-fox-image,
.motivation-hero-mascot.contextual-fox-image {
    max-height: 225px;
}

.learning-lesson-mascot .contextual-fox-image {
    width: min(190px, 100%);
    max-height: 205px;
}

.exercise-hero-mascot .contextual-fox-image {
    width: min(185px, 100%);
    max-height: 205px;
}

.pronunciation-coach-mascot.contextual-fox-image {
    width: min(210px, 100%);
    max-height: 225px;
}

@keyframes contextualFoxFloat {
    0%, 100% {
        transform: translateY(0) rotate(-.5deg);
    }
    50% {
        transform: translateY(-6px) rotate(.5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contextual-fox-image {
        animation: none;
    }
}

@media (max-width: 680px) {
    .dashboard-mascot.mascot-contextual .contextual-fox-image,
    .learning-hero-mascot.contextual-fox-image,
    .motivation-heading-mascot.contextual-fox-image,
    .motivation-hero-mascot.contextual-fox-image,
    .learning-lesson-mascot .contextual-fox-image,
    .exercise-hero-mascot .contextual-fox-image,
    .pronunciation-coach-mascot.contextual-fox-image {
        max-height: 165px;
    }
}

/* ==========================================================================
   V24.37 — Expérience utilisateur
   ========================================================================== */

.ux-next-action,
.ux-daily-status,
.ux-course-summary,
.ux-lesson-checklist,
.ux-pronunciation-threshold,
.ux-state-legend {
    border: 1px solid rgba(15, 118, 110, .14);
    background: linear-gradient(135deg, #ffffff 0%, #f2fbf8 100%);
    box-shadow: 0 14px 34px rgba(15, 60, 67, .07);
}

.ux-next-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 16px 0 0;
    padding: 15px 17px;
    border-radius: 20px;
}

.ux-next-action.is-priority {
    border-color: rgba(217, 119, 6, .22);
    background: linear-gradient(135deg, #fff 0%, #fff8e8 100%);
}

.ux-next-action.is-complete {
    border-color: rgba(22, 163, 74, .2);
    background: linear-gradient(135deg, #fff 0%, #effcf3 100%);
}

.ux-next-action-icon {
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    border-radius: 14px;
    background: #0f766e;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
}

.ux-next-action > div,
.ux-daily-status > div,
.ux-course-summary > div,
.ux-pronunciation-threshold > div {
    display: grid;
    gap: 3px;
}

.ux-next-action span,
.ux-daily-status small,
.ux-course-summary small,
.ux-pronunciation-threshold small,
.ux-lesson-checklist span {
    color: #64777d;
    line-height: 1.45;
}

.ux-next-action a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border-radius: 12px;
    background: #0f766e;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
}

.ux-daily-status,
.ux-course-summary {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 18px;
}

.ux-daily-status > span,
.ux-course-summary > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #0f766e;
    color: #fff;
    font-weight: 900;
}

.ux-daily-status.is-complete,
.ux-course-summary.is-complete {
    border-color: rgba(22, 163, 74, .2);
    background: linear-gradient(135deg, #fff 0%, #effcf3 100%);
}

.ux-lesson-checklist {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    padding: 16px;
    border-radius: 20px;
}

.ux-lesson-checklist-icon {
    display: grid;
    place-items: center;
    width: 44px;
    aspect-ratio: 1;
    border-radius: 14px;
    background: #dcfce7;
    color: #166534;
    font-weight: 900;
}

.ux-lesson-checklist > div {
    display: grid;
    gap: 4px;
}

.ux-lesson-checklist a {
    color: #0f766e;
    font-weight: 800;
    text-decoration: none;
}

.ux-exercise-guidance {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 15px 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f7fafc;
    color: #52666d;
    line-height: 1.5;
}

.ux-pronunciation-threshold {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
}

.ux-pronunciation-threshold > span {
    font-size: 1.45rem;
}

.ux-state-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    width: fit-content;
    margin: 18px 0;
    padding: 8px;
    border-radius: 15px;
}

.ux-state-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 10px;
    color: #607279;
    font-size: .82rem;
    font-weight: 800;
}

.ux-state-legend .is-complete {
    background: #dcfce7;
    color: #166534;
}

.ux-state-legend .is-current {
    background: #ccfbf1;
    color: #0f766e;
}

.ux-state-legend .is-upcoming {
    background: #f1f5f9;
    color: #64748b;
}

.exercise-result-v23.correct {
    box-shadow: 0 14px 30px rgba(22, 163, 74, .12);
}

.exercise-result-v23.incorrect {
    box-shadow: 0 14px 30px rgba(220, 38, 38, .09);
}

@media (max-width: 680px) {
    .ux-next-action,
    .ux-lesson-checklist {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ux-next-action a,
    .ux-lesson-checklist a {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    .ux-daily-status,
    .ux-course-summary {
        align-items: flex-start;
    }

    .ux-state-legend {
        width: 100%;
    }

    .ux-state-legend span {
        flex: 1 1 110px;
        justify-content: center;
    }

    .today-main-action,
    .learning-primary-action,
    .exercise-actions-v23 .button,
    .pronunciation-controls .button {
        min-height: 50px;
    }
}

/* ==========================================================================
   V24.38 — Recette mobile finale
   ========================================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
audio,
canvas {
    max-width: 100%;
}

button,
input,
select,
textarea,
a {
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .container,
    .app-container {
        width: min(100% - 20px, 1100px);
        padding-top: 16px;
        padding-bottom: 84px;
    }

    .card,
    .auth-card,
    .learning-item-card,
    .help-card,
    .help-feature-card,
    .vocabulary-card-v24 {
        border-radius: 18px;
    }

    .dashboard-hero,
    .today-hero,
    .learning-course-hero,
    .learning-module-hero,
    .profile-hero,
    .help-hero,
    .pronunciation-workspace,
    .vocabulary-hero-v24 {
        grid-template-columns: 1fr !important;
    }

    .dashboard-hero,
    .today-hero,
    .learning-course-hero,
    .learning-module-hero,
    .profile-hero,
    .help-hero,
    .vocabulary-hero-v24 {
        padding: 20px !important;
    }

    .dashboard-hero-copy h1,
    .today-hero h1,
    .learning-course-hero h1,
    .learning-module-hero h1,
    .profile-hero h1,
    .help-hero h1,
    .vocabulary-hero-v24 h1,
    .lesson-page-header h1,
    .exercise-header h1 {
        font-size: clamp(1.85rem, 9vw, 2.65rem) !important;
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    .dashboard-mascot,
    .learning-hero-side,
    .learning-course-hero-visual,
    .learning-module-side-card,
    .profile-hero > img,
    .help-hero-visual,
    .vocabulary-hero-visual {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }

    .dashboard-mascot img,
    .learning-hero-mascot,
    .learning-course-hero img,
    .module-context-mascot,
    .profile-hero img,
    .help-hero-visual img,
    .vocabulary-context-mascot,
    .pronunciation-coach-mascot {
        width: min(190px, 58vw) !important;
        max-height: 185px !important;
        margin-inline: auto;
    }

    .dashboard-stats,
    .today-stats,
    .learning-stat-grid,
    .vocabulary-stats-v24 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .stat-card,
    .vocabulary-stat-card {
        min-width: 0;
        padding: 14px;
    }

    .stat-value,
    .vocabulary-stat-card strong {
        font-size: 1.55rem !important;
    }

    .ux-next-action,
    .ux-lesson-checklist {
        grid-template-columns: 1fr !important;
        text-align: left;
    }

    .ux-next-action-icon,
    .ux-lesson-checklist-icon {
        justify-self: start;
    }

    .ux-next-action a,
    .ux-lesson-checklist a {
        width: 100%;
        justify-content: center;
    }

    .today-main-task-v24,
    .learning-module-card,
    .learning-course-module-card,
    .lesson-block,
    .exercise-card,
    .pronunciation-card,
    .vocabulary-add-card,
    .vocabulary-results-panel,
    .profile-form-v24,
    .help-section {
        padding: 16px !important;
    }

    .today-main-task-topline,
    .learning-course-facts,
    .learning-progress-heading,
    .learning-section-header,
    .lesson-title-row,
    .certificate-toolbar,
    .certificate-toolbar-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .learning-course-facts {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .learning-course-facts span {
        min-width: 0;
        padding: 10px;
        text-align: center;
    }

    .learning-primary-action,
    .today-main-action,
    .exercise-actions-v23 .button,
    .pronunciation-listen-actions .button,
    .pronunciation-controls .button,
    .vocabulary-hero-actions a,
    .help-hero-actions .button,
    .certificate-toolbar .button {
        width: 100% !important;
        min-height: 50px;
    }

    .learning-primary-action {
        display: grid !important;
        grid-template-columns: 1fr auto;
        text-align: left;
    }

    .learning-primary-action small {
        grid-column: 1 / -1;
    }

    .learning-module-side-card {
        margin-top: 4px;
    }

    .ux-state-legend {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .ux-state-legend span {
        justify-content: flex-start !important;
    }

    .lesson-page,
    .exercise-page,
    .pronunciation-page {
        width: 100%;
        max-width: 100%;
    }

    .lesson-navigation,
    .lesson-navigation form,
    .exercise-actions-v23,
    .pronunciation-listen-actions,
    .pronunciation-controls {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .answer-option {
        align-items: flex-start;
        min-width: 0;
        padding: 14px;
    }

    .answer-option span,
    .exercise-prompt,
    .pronunciation-target p {
        overflow-wrap: anywhere;
    }

    .pronunciation-workspace {
        display: grid;
        gap: 14px;
    }

    .pronunciation-coach {
        order: 2;
        text-align: center;
    }

    .pronunciation-card {
        order: 1;
    }

    .microphone-button {
        width: 100% !important;
        min-height: 132px;
    }

    .pronunciation-target p {
        font-size: clamp(1.25rem, 7vw, 1.85rem) !important;
    }

    .word-comparison {
        gap: 6px;
    }

    .comparison-word {
        max-width: 100%;
    }

    .vocabulary-hero-actions,
    .vocabulary-layout-v24,
    .vocabulary-filters-v24,
    .profile-form-grid,
    .help-two-columns,
    .help-feature-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .vocabulary-card-header,
    .vocabulary-card-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .vocabulary-card-actions form,
    .vocabulary-card-actions select,
    .vocabulary-card-actions button {
        width: 100%;
    }

    .profile-panel-header {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .profile-panel-badge {
        justify-self: stretch;
        text-align: center;
    }

    .help-shortcuts {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .help-shortcuts a {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .help-flow {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px;
    }

    .help-flow > b {
        transform: rotate(90deg);
        justify-self: center;
    }

    .help-coach-note {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        align-items: center;
    }

    .help-coach-note img {
        width: 82px !important;
        max-height: 92px;
    }

    .certificate-toolbar,
    .certificate-toolbar-actions {
        display: grid !important;
        gap: 9px;
        width: 100%;
    }

    .certificate-document {
        padding: 8px !important;
        overflow-x: auto;
    }

    .certificate-border {
        min-height: auto !important;
        padding: 24px 16px !important;
        border-width: 6px !important;
    }

    .certificate-brand {
        justify-content: center;
        text-align: center;
    }

    .certificate-fox {
        width: 115px !important;
        max-height: 125px;
    }

    .certificate-border h1 {
        font-size: clamp(1.8rem, 10vw, 2.8rem) !important;
        overflow-wrap: anywhere;
    }

    .certificate-border h2 {
        font-size: clamp(1.25rem, 7vw, 1.8rem) !important;
        overflow-wrap: anywhere;
    }

    .certificate-course-details,
    .certificate-competencies p,
    .certificate-verification {
        font-size: .88rem;
        line-height: 1.5;
    }

    .certificate-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .fox-coach {
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
        max-width: calc(100vw - 16px);
    }

    .fox-coach-card {
        max-width: calc(100vw - 52px) !important;
    }

    .fox-coach-card img {
        width: 76px !important;
        max-height: 90px !important;
    }

    .fox-coach-bubble {
        margin-bottom: 10px !important;
        padding: 10px 12px !important;
    }

    .fox-coach-bubble > span {
        max-width: 180px !important;
        font-size: .78rem !important;
    }
}

@media (max-width: 430px) {
    .dashboard-stats,
    .today-stats,
    .learning-stat-grid,
    .vocabulary-stats-v24 {
        grid-template-columns: 1fr !important;
    }

    .learning-course-facts {
        grid-template-columns: 1fr !important;
    }

    .goal-circle {
        width: 88px !important;
    }

    .dashboard-hero,
    .today-hero,
    .learning-course-hero,
    .learning-module-hero,
    .profile-hero,
    .help-hero,
    .vocabulary-hero-v24 {
        padding: 16px !important;
    }

    .help-coach-note {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .help-coach-note img {
        margin-inline: auto;
    }

    .certificate-label {
        font-size: .72rem;
        letter-spacing: .08em;
    }

    .certificate-score {
        padding: 13px;
    }

    .certificate-score strong {
        font-size: 2rem;
    }
}

@media (max-width: 370px) {
    .container,
    .app-container {
        width: min(100% - 14px, 1100px);
    }

    .button,
    button,
    input,
    select,
    textarea {
        font-size: .94rem;
    }

    .dashboard-hero-copy h1,
    .today-hero h1,
    .learning-course-hero h1,
    .learning-module-hero h1,
    .profile-hero h1,
    .help-hero h1,
    .vocabulary-hero-v24 h1,
    .lesson-page-header h1,
    .exercise-header h1 {
        font-size: 1.8rem !important;
    }

    .certificate-border {
        padding: 20px 12px !important;
    }
}

/* V24.75.2 — identité officielle Vulpingo */
.brand-mark-fox {
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.brand-mark-fox img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-header .brand-mark-fox {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.vulpingo-footer .brand-mark-fox {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
}

@media (max-width: 640px) {
    .site-header .brand-mark-fox {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

/* V24.76 — navigation principale */
.main-navigation {
    align-items: center;
}

.main-navigation .nav-main {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 12px;
    color: #38545a;
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.main-navigation .nav-main:hover {
    background: #edf8f5;
    color: #0f766e;
    transform: translateY(-1px);
}

.main-navigation .nav-main.active {
    background: #e7f6f2;
    color: #0d6f68;
}

.main-navigation .nav-main > span {
    display: grid;
    place-items: center;
    min-width: 20px;
    font-size: 1rem;
}

.main-navigation .nav-featured {
    border: 1px solid rgba(15, 118, 110, .13);
    box-shadow: 0 7px 17px rgba(15, 89, 82, .07);
}

.main-navigation .nav-adventures {
    background:
        linear-gradient(
            135deg,
            rgba(255, 244, 214, .96),
            rgba(238, 250, 247, .98)
        );
    color: #805116;
}

.main-navigation .nav-adventures:hover,
.main-navigation .nav-adventures.active {
    background:
        linear-gradient(
            135deg,
            #fff0c4,
            #e2f6f1
        );
    color: #70440d;
}

.main-navigation .nav-flashcards {
    background:
        linear-gradient(
            135deg,
            rgba(235, 246, 255, .98),
            rgba(238, 250, 247, .98)
        );
    color: #155a79;
}

.main-navigation .nav-flashcards:hover,
.main-navigation .nav-flashcards.active {
    background:
        linear-gradient(
            135deg,
            #deefff,
            #e2f6f1
        );
    color: #104c69;
}

.main-navigation .nav-featured small {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    color: #a35d00;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.nav-more > summary {
    min-height: 42px;
}

@media (max-width: 1120px) {
    .main-navigation .nav-main {
        padding-inline: 9px;
        font-size: .81rem;
    }

    .main-navigation .nav-featured small {
        display: none;
    }
}

@media (max-width: 920px) {
    .main-navigation {
        align-items: stretch;
    }

    .main-navigation .nav-main {
        width: 100%;
        justify-content: flex-start;
        min-height: 48px;
        padding: 11px 13px;
        border-radius: 14px;
    }

    .main-navigation .nav-featured {
        border-width: 1px;
        box-shadow: none;
    }

    .main-navigation .nav-featured small {
        display: inline-flex;
        margin-left: auto;
    }

    .nav-more {
        width: 100%;
    }

    .nav-more > summary {
        width: 100%;
        min-height: 48px;
    }
}

@media (max-width: 520px) {
    .main-navigation .nav-main {
        font-size: .9rem;
    }

    .main-navigation .nav-featured {
        min-height: 54px;
    }
}



/* V24.100 — Examens plus fiables et révisions ciblées */
.exam-progress-copy > div:first-child{display:grid;gap:2px}
.exam-progress-timer{flex:0 0 auto;align-self:center;background:#ecfdf5!important;border-color:#99f6e4!important;color:#0f766e;font-size:1rem!important}
.exam-progress-timer strong{font-variant-numeric:tabular-nums;min-width:52px;display:inline-block;text-align:center}
.exam-word-bank{display:grid;gap:9px;margin-top:12px;padding:13px;border:1px dashed #99d9cf;border-radius:15px;background:#f3fcfa}
.exam-word-bank-label{font-size:.78rem;font-weight:850;color:#0f766e;text-transform:uppercase;letter-spacing:.05em}
.exam-word-bank>div{display:flex;flex-wrap:wrap;gap:8px}
.exam-word-bank button{appearance:none;border:1px solid #cbd5e1;border-radius:999px;background:#fff;padding:7px 11px;color:#334155;font:inherit;font-size:.88rem;font-weight:750;cursor:pointer;transition:.15s ease}
.exam-word-bank button:hover{transform:translateY(-1px);border-color:#14b8a6;background:#ecfdf5;color:#0f766e}
.placement-progress-shell{margin-top:18px}
.placement-review-priorities{margin:22px 0;padding:24px}
.placement-priority-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.placement-priority-grid article{display:grid;grid-template-columns:1fr auto;gap:5px;padding:16px;border-radius:16px;background:#fff7ed;border:1px solid #fed7aa}
.placement-priority-grid article p{grid-column:1/-1;margin:0;color:#9a3412;font-size:.86rem}
.placement-review-section{margin:24px 0}
.placement-review-list{display:grid;gap:14px}
.placement-review-item{border-left:5px solid #f97316;padding:20px 22px}
.placement-review-item h3{margin:12px 0 8px}
.placement-review-item p{margin:7px 0}
@media(max-width:640px){
  .exam-progress-shell{top:64px;padding:12px 14px;border-radius:16px}
  .exam-progress-copy{flex-direction:row!important;align-items:center!important;gap:10px!important}
  .exam-progress-copy>div:first-child span{display:none}
  .exam-progress-timer{padding:7px 9px!important}
  .exam-word-bank{padding:11px}
}


/* V24.100.1 — Positionnement fiable de la barre d'examen */
:root{
  --exam-header-height:78px;
  --exam-sticky-gap:8px;
  --exam-progress-height:82px;
}

.exam-progress-shell{
  top:calc(var(--exam-header-height) + var(--exam-sticky-gap));
}

.exam-nav-v23{
  top:calc(var(--exam-header-height) + var(--exam-progress-height) + 28px);
}

.exam-question-v23{
  scroll-margin-top:calc(var(--exam-header-height) + var(--exam-progress-height) + 34px);
}

@media(max-width:640px){
  :root{
    --exam-sticky-gap:6px;
    --exam-progress-height:70px;
  }

  .exam-progress-shell{
    top:calc(var(--exam-header-height) + var(--exam-sticky-gap));
  }
}


/* V24.101.1 — Historique des résultats et correction aventures */
.results-heading-v101{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 210px;
    align-items:center;
    gap:28px;
    min-height:220px;
    margin-bottom:28px;
    padding:34px 38px;
    overflow:hidden;
    border:1px solid #e2e8f0;
    border-radius:28px;
    background:
        radial-gradient(circle at 88% 30%,rgba(253,224,71,.22),transparent 31%),
        linear-gradient(135deg,#ffffff 0%,#f0fdfa 100%);
    box-shadow:0 18px 48px rgba(15,23,42,.06);
}
.results-heading-copy-v101{position:relative;z-index:2;max-width:680px}
.results-heading-v101 h1{margin:7px 0 8px;font-size:clamp(2rem,4vw,3rem);line-height:1.05}
.results-heading-v101 p{margin:0;color:#64748b;font-size:1rem}
.results-list-mascot-v101{justify-self:end;width:190px;max-height:185px;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(15,23,42,.12))}
.results-overview-v101{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.results-overview-v101 span{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border:1px solid #dbe7e7;border-radius:999px;background:rgba(255,255,255,.9);color:#64748b;font-size:.88rem}
.results-overview-v101 strong{color:#0f172a}
.results-grid-v101{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));gap:20px;align-items:start}
.results-grid-v101.is-filtered{grid-template-columns:minmax(0,760px);justify-content:start}
.result-history-card-v101{display:flex;flex-direction:column;gap:22px;padding:24px;border:1px solid #e2e8f0;border-top:4px solid #cbd5e1;border-radius:24px;box-shadow:0 14px 38px rgba(15,23,42,.06);transition:transform .18s ease,box-shadow .18s ease}
.result-history-card-v101:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(15,23,42,.1)}
.result-history-card-v101.is-passed{border-top-color:#14b8a6}
.result-history-card-v101.is-failed{border-top-color:#fb923c}
.result-history-main-v101{display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;align-items:center}
.result-score-ring-v101{display:grid;place-content:center;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle closest-side,#fff 76%,transparent 77% 99%),conic-gradient(#14b8a6 calc(var(--score)*1%),#e2e8f0 0);text-align:center}
.result-history-card-v101.is-failed .result-score-ring-v101{background:radial-gradient(circle closest-side,#fff 76%,transparent 77% 99%),conic-gradient(#fb923c calc(var(--score)*1%),#e2e8f0 0)}
.result-score-ring-v101 strong{display:block;color:#0f172a;font-size:1.55rem;line-height:1}
.result-score-ring-v101 span{display:block;margin-top:4px;color:#64748b;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.result-history-top-v101{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.result-attempt-number-v101{color:#64748b;font-size:.82rem;font-weight:800}
.result-history-copy-v101 h2{margin:12px 0 5px;font-size:1.25rem;line-height:1.25}
.result-course-v101{margin:0;color:#64748b}
.result-meta-v101{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;color:#475569;font-size:.86rem}
.result-correction-button-v101{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;margin-left:134px}
@media(max-width:720px){
    .results-heading-v101{grid-template-columns:1fr;padding:26px 22px 190px;text-align:center}
    .results-heading-copy-v101{max-width:none}
    .results-overview-v101{justify-content:center}
    .results-list-mascot-v101{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:180px}
    .results-grid-v101,.results-grid-v101.is-filtered{grid-template-columns:1fr}
}
@media(max-width:520px){
    .result-history-main-v101{grid-template-columns:1fr}
    .result-score-ring-v101{width:96px;height:96px}
    .result-correction-button-v101{margin-left:0;width:100%;justify-content:center}
}


/* ========================================================================== 
   V24.111 — Dialogue approfondi illustré dans les leçons
   ========================================================================== */
.lesson-deep-dialogue {
    position: relative;
    overflow: hidden;
    margin: 24px 0;
    border: 1px solid rgba(15, 118, 110, .16);
    border-radius: 28px;
    background:
        radial-gradient(circle at 94% 5%, rgba(255, 209, 102, .22), transparent 28%),
        linear-gradient(145deg, rgba(239, 250, 247, .98), rgba(255, 255, 255, .98));
    box-shadow: 0 18px 45px rgba(17, 51, 58, .09);
}

.lesson-deep-dialogue-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 27px 30px 21px;
    border-bottom: 1px solid rgba(15, 118, 110, .10);
}

.lesson-deep-dialogue-header h2 {
    margin: 5px 0 5px;
    color: #123c42;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.lesson-deep-dialogue-header p {
    max-width: 720px;
    margin: 0;
    color: #60777b;
    line-height: 1.55;
}

.lesson-deep-dialogue-count {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid rgba(15, 118, 110, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #0f766e;
    font-size: .78rem;
    font-weight: 850;
}

.lesson-deep-dialogue-scene {
    display: grid;
    gap: 15px;
    padding: 27px 30px 30px;
}

.lesson-deep-dialogue-line {
    display: flex;
    align-items: flex-end;
    gap: 13px;
    width: min(780px, 92%);
}

.lesson-deep-dialogue-line.is-right {
    justify-self: end;
    flex-direction: row-reverse;
}

.lesson-character-avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: 3px solid rgba(255, 255, 255, .95);
    border-radius: 18px;
    background: linear-gradient(145deg, #dff5f0, #bfe8df);
    font-size: 1.75rem;
    box-shadow: 0 8px 20px rgba(17, 51, 58, .12);
}

.lesson-character-avatar.is-luna { background: linear-gradient(145deg, #eee8ff, #d8cdfd); }
.lesson-character-avatar.is-pippa { background: linear-gradient(145deg, #dff4ff, #c4e7f5); }
.lesson-character-avatar.is-milo { background: linear-gradient(145deg, #ffeecf, #f7d99b); }
.lesson-character-avatar.is-ruby { background: linear-gradient(145deg, #ffe5ef, #f8c5d7); }
.lesson-character-avatar.is-niko { background: linear-gradient(145deg, #f2dfcd, #ddbc9e); }
.lesson-character-avatar.is-lea { background: linear-gradient(145deg, #e8edff, #cdd8fa); }
.lesson-character-avatar.is-role { background: linear-gradient(145deg, #edf1f3, #dce5e8); }

.lesson-character-message {
    min-width: 0;
    padding: 14px 17px 15px;
    border: 1px solid rgba(15, 118, 110, .12);
    border-radius: 20px 20px 20px 6px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 24px rgba(17, 51, 58, .07);
}

.lesson-deep-dialogue-line.is-right .lesson-character-message {
    border-radius: 20px 20px 6px 20px;
    background: #e5f6f2;
}

.lesson-character-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 6px;
}

.lesson-character-meta strong {
    color: #0e5f5a;
    font-size: .82rem;
    letter-spacing: .02em;
}

.lesson-character-message p {
    margin: 0;
    color: #213e43;
    font-size: 1rem;
    line-height: 1.58;
}

.lesson-dialogue-audio {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(15, 118, 110, .10);
    cursor: pointer;
    font-size: .82rem;
    transition: transform .18s ease, background .18s ease;
}

.lesson-dialogue-audio:hover {
    transform: translateY(-1px);
    background: rgba(15, 118, 110, .18);
}

.lesson-deep-dialogue-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 30px 17px;
    border-top: 1px solid rgba(15, 118, 110, .09);
    background: rgba(255, 255, 255, .48);
}

.lesson-deep-dialogue-footer p {
    margin: 0;
    color: #64797d;
    font-size: .82rem;
    line-height: 1.45;
}

@media (max-width: 680px) {
    .lesson-deep-dialogue {
        margin: 18px 0;
        border-radius: 23px;
    }

    .lesson-deep-dialogue-header {
        display: grid;
        gap: 12px;
        padding: 22px 19px 18px;
    }

    .lesson-deep-dialogue-count {
        justify-self: start;
    }

    .lesson-deep-dialogue-scene {
        gap: 13px;
        padding: 21px 15px 23px;
    }

    .lesson-deep-dialogue-line {
        width: 97%;
        gap: 9px;
    }

    .lesson-character-avatar {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        border-radius: 15px;
        font-size: 1.4rem;
    }

    .lesson-character-message {
        padding: 12px 13px 13px;
        border-radius: 17px 17px 17px 5px;
    }

    .lesson-deep-dialogue-line.is-right .lesson-character-message {
        border-radius: 17px 17px 5px 17px;
    }

    .lesson-character-message p {
        font-size: .94rem;
    }

    .lesson-deep-dialogue-footer {
        align-items: flex-start;
        padding: 13px 18px 15px;
    }
}


/* ==========================================================================
   V24.111.1 — Lecteur fluide des dialogues approfondis
   ========================================================================== */
.lesson-dialogue-player {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 30px;
    border-bottom: 1px solid rgba(15, 118, 110, .1);
    background: rgba(255, 255, 255, .62);
}

.lesson-dialogue-player .button {
    width: auto;
    min-height: 40px;
    padding: .65rem .9rem;
    border-radius: 12px;
    font-size: .84rem;
}

.lesson-dialogue-player-status {
    margin-left: auto;
    color: #587176;
    font-size: .8rem;
    font-weight: 800;
}

.lesson-character-identity {
    display: grid;
    gap: 1px;
}

.lesson-character-identity small {
    color: #71868a;
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.2;
}

.lesson-deep-dialogue-line {
    transition:
        transform .2s ease,
        opacity .2s ease,
        filter .2s ease;
}

.lesson-deep-dialogue-scene:has(.lesson-deep-dialogue-line.is-speaking)
.lesson-deep-dialogue-line:not(.is-speaking) {
    opacity: .52;
    filter: saturate(.72);
}

.lesson-deep-dialogue-line.is-speaking {
    position: relative;
    z-index: 2;
    transform: translateY(-2px) scale(1.012);
}

.lesson-deep-dialogue-line.is-speaking .lesson-character-message {
    border-color: rgba(15, 118, 110, .42);
    box-shadow:
        0 13px 32px rgba(15, 118, 110, .16),
        0 0 0 3px rgba(15, 118, 110, .07);
}

.lesson-dialogue-spoken-word {
    margin: 0;
    padding: 1px 0;
    border-radius: 4px;
    cursor: pointer;
    transition:
        background .12s ease,
        color .12s ease,
        box-shadow .12s ease;
}

.lesson-dialogue-spoken-word.is-speaking {
    padding: 1px 3px;
    background: #ffd166;
    color: #17343a;
    box-shadow: 0 2px 8px rgba(255, 184, 0, .28);
}

.lesson-dialogue-audio {
    flex: 0 0 auto;
}

.lesson-dialogue-audio:focus-visible,
.lesson-dialogue-player .button:focus-visible {
    outline: 3px solid rgba(15, 118, 110, .25);
    outline-offset: 2px;
}

@media (max-width: 680px) {
    .lesson-dialogue-player {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 14px 15px;
    }

    .lesson-dialogue-player .button {
        width: 100%;
    }

    .lesson-dialogue-player [data-dialogue-play-all] {
        grid-column: 1 / -1;
    }

    .lesson-dialogue-player-status {
        grid-column: 1 / -1;
        margin-left: 0;
        text-align: center;
    }

    .lesson-character-identity small {
        font-size: .64rem;
    }
}


/* V24.114 — Constructeur de réponses des évaluations */
.exam-word-builder{
    display:grid;
    gap:12px;
    margin-top:12px;
    padding:14px;
    border:1px dashed #99d9cf;
    border-radius:16px;
    background:#f3fcfa;
}
.exam-word-builder-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.exam-word-builder-heading>div:first-child{
    display:grid;
    gap:2px;
}
.exam-word-builder-heading strong{
    color:#0f766e;
    font-size:.82rem;
    font-weight:850;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.exam-word-builder-heading span{
    color:#64748b;
    font-size:.83rem;
}
.exam-word-builder-tools{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
}
.exam-word-tool{
    appearance:none;
    min-height:36px;
    border:1px solid #cbd5e1;
    border-radius:11px;
    background:#fff;
    padding:7px 10px;
    color:#475569;
    font:inherit;
    font-size:.8rem;
    font-weight:800;
    cursor:pointer;
}
.exam-word-bank{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
}
.exam-word-chip{
    appearance:none;
    min-height:42px;
    border:1px solid #cbd5e1;
    border-radius:999px;
    background:#fff;
    padding:8px 13px;
    color:#334155;
    font:inherit;
    font-size:.9rem;
    font-weight:750;
    cursor:pointer;
    transition:.15s ease;
}
.exam-word-chip:hover:not(:disabled){
    transform:translateY(-1px);
    border-color:#14b8a6;
    background:#ecfdf5;
    color:#0f766e;
}
.exam-word-chip.is-used,
.exam-word-chip:disabled{
    border-color:#99d9cf;
    background:#dff7f2;
    color:#6b8f8a;
    opacity:.58;
    cursor:default;
    text-decoration:line-through;
    transform:none;
}
.text-answer-v23 input.is-touch-builder-answer{
    caret-color:transparent;
    cursor:default;
    background:#fff;
}
@media(max-width:640px){
    .exam-word-builder{
        padding:12px;
    }
    .exam-word-builder-heading{
        display:grid;
    }
    .exam-word-builder-tools{
        justify-content:flex-start;
    }
    .exam-word-chip{
        min-height:44px;
        padding:9px 14px;
    }
}

/* V24.125 — Centre « Mes erreurs » */
.mistakes-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 28px;
    background: linear-gradient(135deg, #effaf7 0%, #fff8e8 100%);
}
.mistakes-hero h1 { margin: 5px 0 8px; }
.mistakes-hero p { max-width: 720px; margin: 0; color: #587078; }
.mistakes-hero-fox { width: 130px; max-height: 130px; object-fit: contain; }
.mistakes-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.mistakes-stats article { display: grid; gap: 4px; padding: 18px; }
.mistakes-stats strong { font-size: clamp(1.55rem, 4vw, 2.15rem); color: #0f766e; }
.mistakes-stats span { color: #66777d; }
.mistakes-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 26px;
    padding: 18px;
}
.mistakes-filters label { display: grid; gap: 7px; }
.mistakes-filters label > span { font-size: .82rem; font-weight: 800; color: #536870; }
.mistakes-filters select {
    width: 100%;
    min-height: 46px;
    padding: 0 42px 0 13px;
    border: 1px solid #d9e4e6;
    border-radius: 12px;
    background: #fff;
    color: #132338;
    font: inherit;
}
.mistakes-section { margin: 28px 0; }
.mistakes-list { display: grid; gap: 13px; }
.mistake-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(170px, auto);
    align-items: center;
    gap: 18px;
    padding: 20px;
    border-left: 5px solid #e87b60;
}
.mistake-card.is-resolved { border-left-color: #52a780; opacity: .9; }
.mistake-card-status { display: grid; justify-items: center; gap: 7px; min-width: 82px; font-size: .78rem; }
.mistake-status-dot { width: 42px; height: 42px; border: 10px solid #ffe4dc; border-radius: 50%; background: #e87b60; }
.is-resolved .mistake-status-dot { border-color: #dcf4e8; background: #52a780; }
.mistake-card-main { min-width: 0; }
.mistake-card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.mistake-card-meta span { padding: 5px 9px; border-radius: 999px; background: #eef4f4; color: #51666d; font-size: .75rem; font-weight: 750; }
.mistake-card h3 { margin: 0 0 12px; font-size: 1.08rem; }
.mistake-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.mistake-answer-grid > div, .mistake-transcript { display: grid; gap: 4px; padding: 11px 13px; border-radius: 12px; background: #f5f8f8; }
.mistake-answer-grid span, .mistake-transcript span { color: #718087; font-size: .76rem; }
.mistake-explanation { margin-top: 10px; }
.mistake-explanation summary { cursor: pointer; color: #0f766e; font-weight: 800; }
.mistake-explanation p { margin: 9px 0 0; color: #5f7178; }
.mistake-card-side { display: grid; justify-items: end; gap: 8px; text-align: right; }
.mistake-card-side small { color: #7a888d; }
.mistake-count { font-weight: 850; color: #bd5d47; }
.is-resolved .mistake-count { color: #39815f; }
.mistake-score-ring { display: grid; place-items: center; align-content: center; width: 88px; height: 88px; border: 8px solid #ffe0d7; border-radius: 50%; text-align: center; }
.mistake-score-ring strong { font-size: 1.2rem; }
.mistake-score-ring span { font-size: .65rem; color: #718087; }
.mistakes-empty { display: grid; justify-items: center; padding: 38px 20px; text-align: center; }
.mistakes-empty img { width: 130px; }
@media (max-width: 850px) {
    .mistakes-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mistakes-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mistakes-filters .button { width: 100%; }
    .mistake-card { grid-template-columns: auto minmax(0, 1fr); }
    .mistake-card-side { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; text-align: left; }
    .mistake-card-side .button { justify-self: end; }
}
@media (max-width: 560px) {
    .mistakes-hero { padding: 20px; }
    .mistakes-hero-fox { width: 86px; }
    .mistakes-stats { gap: 8px; }
    .mistakes-stats article { padding: 14px; }
    .mistakes-filters { grid-template-columns: 1fr; }
    .mistake-card { grid-template-columns: 1fr; padding: 16px; }
    .mistake-card-status { grid-template-columns: auto 1fr; justify-items: start; min-width: 0; }
    .mistake-status-dot { width: 24px; height: 24px; border-width: 6px; }
    .mistake-answer-grid { grid-template-columns: 1fr; }
    .mistake-card-side { grid-column: auto; grid-template-columns: 1fr; }
    .mistake-card-side .button { width: 100%; justify-self: stretch; }
    .mistake-score-ring { width: 78px; height: 78px; }
}

/* ===== V24.123 — Classement hebdomadaire ===== */
.weekly-ranking-heading {
    overflow: hidden;
}

.weekly-ranking-heading > div:first-child {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.weekly-ranking-period-tabs {
    display: inline-flex;
    gap: .4rem;
    margin-top: 1.15rem;
    padding: .35rem;
    border: 1px solid #dfe9e7;
    border-radius: 16px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 8px 24px rgba(15,118,110,.06);
}

.weekly-ranking-period-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 42px;
    padding: .62rem .9rem;
    border-radius: 12px;
    color: #556260;
    font-weight: 800;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.weekly-ranking-period-tabs a:hover {
    transform: translateY(-1px);
    color: #0f766e;
}

.weekly-ranking-period-tabs a.active {
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14a394);
    box-shadow: 0 8px 18px rgba(15,118,110,.2);
}

.weekly-ranking-date {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    margin-top: .9rem;
    color: #60706d;
    font-size: .93rem;
}

.weekly-ranking-date span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.weekly-ranking-date span + span::before {
    content: "•";
    margin-right: .7rem;
    color: #f59e0b;
}

.weekly-personal-summary {
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) repeat(2, minmax(190px, .75fr));
    gap: 1rem;
    margin: 1rem 0;
}

.weekly-personal-main,
.weekly-personal-stat {
    min-height: 138px;
}

.weekly-personal-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    background:
        radial-gradient(circle at 88% 15%, rgba(245,158,11,.14), transparent 30%),
        linear-gradient(145deg, #f0fbf8, #fff);
}

.weekly-personal-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: linear-gradient(145deg, #fff1c9, #ffd980);
    box-shadow: inset 0 0 0 1px rgba(217,119,6,.12);
    font-size: 2rem;
}

.weekly-personal-main > div:last-child,
.weekly-personal-stat {
    display: grid;
    align-content: center;
    gap: .3rem;
}

.weekly-personal-main strong,
.weekly-personal-stat strong {
    color: #102d2a;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    line-height: 1.05;
}

.weekly-personal-main small,
.weekly-personal-stat small {
    color: #697875;
    line-height: 1.4;
}

.weekly-personal-stat {
    padding: 1.2rem;
}

.weekly-personal-stat > span {
    color: #697875;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.weekly-previous-winner {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border-color: #f6df9e;
    background: linear-gradient(90deg, #fffaf0, #fff);
}

.weekly-previous-winner > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #fff0bd;
    font-size: 1.25rem;
}

.weekly-previous-winner > div {
    display: grid;
    gap: .15rem;
}

.weekly-previous-winner small {
    color: #776e59;
}

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

.weekly-podium-card {
    position: relative;
    display: grid;
    justify-items: center;
    min-height: 238px;
    padding: 1.4rem 1rem 1.15rem;
    overflow: hidden;
    text-align: center;
    border-color: #e4ecea;
    background: linear-gradient(180deg, #fff, #fbfdfc);
}

.weekly-podium-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: #dfe8e6;
}

.weekly-podium-card.position-1 {
    min-height: 265px;
    border-color: #efd58a;
    background:
        radial-gradient(circle at 50% 15%, rgba(251,191,36,.18), transparent 32%),
        linear-gradient(180deg, #fffdf5, #fff);
    box-shadow: 0 24px 55px rgba(180,125,13,.12);
}

.weekly-podium-card.position-1::before { background: linear-gradient(90deg, #f6c843, #e9a90c); }
.weekly-podium-card.position-2::before { background: linear-gradient(90deg, #cbd5df, #8b99a8); }
.weekly-podium-card.position-3::before { background: linear-gradient(90deg, #dfa374, #b87545); }

.weekly-podium-card.current-user {
    box-shadow: inset 0 0 0 2px #14a394, 0 18px 40px rgba(15,118,110,.12);
}

.weekly-podium-medal {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: .45rem;
    border-radius: 24px;
    background: #f5f8f7;
    font-size: 2.45rem;
}

.position-1 .weekly-podium-medal {
    width: 86px;
    height: 86px;
    background: #fff2bd;
}

.weekly-podium-position {
    color: #788581;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.weekly-podium-name {
    width: 100%;
    margin-top: .28rem;
    overflow: hidden;
    color: #17312e;
    font-size: 1.15rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekly-podium-xp {
    margin-top: .55rem;
    color: #0f766e;
    font-size: clamp(1.3rem, 3vw, 1.85rem);
    font-weight: 950;
}

.weekly-podium-card small {
    margin-top: .25rem;
    color: #76827f;
}

.weekly-you-chip {
    margin-top: .7rem;
    padding: .28rem .58rem;
    border-radius: 999px;
    color: #0f766e;
    background: #dff8f2;
    font-size: .75rem;
    font-weight: 900;
}

.weekly-ranking-list-card {
    margin-top: 1rem;
}

.weekly-ranking-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem .8rem;
}

.weekly-ranking-list-heading h2 {
    margin: .15rem 0 0;
    font-size: 1.25rem;
}

.weekly-ranking-list-heading > span {
    color: #788581;
    font-size: .9rem;
    font-weight: 800;
}

.weekly-ranking-empty {
    display: grid;
    justify-items: center;
    gap: .6rem;
    margin: 1rem 0;
    padding: clamp(2rem, 7vw, 4rem) 1rem;
    text-align: center;
}

.weekly-ranking-empty > span {
    font-size: 3rem;
}

.weekly-ranking-empty h2,
.weekly-ranking-empty p {
    margin: 0;
}

.weekly-ranking-empty p {
    max-width: 560px;
    color: #687672;
}

@media (max-width: 900px) {
    .weekly-personal-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weekly-personal-main {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .weekly-ranking-heading .motivation-heading-mascot {
        opacity: .12;
    }

    .weekly-podium {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .weekly-podium-card,
    .weekly-podium-card.position-1 {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        align-items: center;
        justify-items: start;
        min-height: 0;
        padding: 1rem;
        text-align: left;
    }

    .weekly-podium-card.position-1 {
        order: -1;
    }

    .weekly-podium-medal,
    .position-1 .weekly-podium-medal {
        grid-row: 1 / span 4;
        width: 56px;
        height: 56px;
        margin: 0;
        border-radius: 18px;
        font-size: 1.75rem;
    }

    .weekly-podium-position,
    .weekly-podium-name,
    .weekly-podium-card small {
        grid-column: 2;
    }

    .weekly-podium-name {
        margin: 0;
    }

    .weekly-podium-xp {
        grid-column: 3;
        grid-row: 1 / span 3;
        margin: 0;
        font-size: 1.2rem;
        white-space: nowrap;
    }

    .weekly-you-chip {
        grid-column: 2;
        margin-top: .3rem;
    }
}

@media (max-width: 560px) {
    .weekly-ranking-period-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .weekly-ranking-period-tabs a {
        padding-inline: .6rem;
        font-size: .88rem;
    }

    .weekly-ranking-date {
        display: grid;
        gap: .35rem;
    }

    .weekly-ranking-date span + span::before {
        display: none;
    }

    .weekly-personal-summary {
        grid-template-columns: 1fr;
    }

    .weekly-personal-main {
        grid-column: auto;
        min-height: 122px;
    }

    .weekly-personal-stat {
        min-height: 112px;
    }

    .weekly-podium-card,
    .weekly-podium-card.position-1 {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .weekly-podium-medal,
    .position-1 .weekly-podium-medal {
        width: 46px;
        height: 46px;
        border-radius: 15px;
        font-size: 1.45rem;
    }

    .weekly-podium-xp {
        grid-column: 2;
        grid-row: auto;
        margin-top: .2rem;
    }

    .weekly-ranking-list-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .3rem;
    }
}


/* V24.123 — Rythme visuel dialogue → mise en pratique */
.lesson-deep-dialogue {
    margin-top: 12px;
    margin-bottom: 14px;
}

.lesson-deep-dialogue + .ux-lesson-checklist {
    margin-top: 14px;
    margin-bottom: 18px;
}

.ux-lesson-checklist + .learning-exercise-section {
    margin-top: 0;
}

@media (max-width: 680px) {
    .lesson-deep-dialogue {
        margin-top: 10px;
        margin-bottom: 12px;
    }

    .lesson-deep-dialogue + .ux-lesson-checklist {
        margin-top: 12px;
        margin-bottom: 15px;
    }
}

/* V24.140 — navigation du compte */
.profile-actions{display:flex;align-items:center;gap:9px;margin-left:.35rem;padding-left:.45rem;border-left:1px solid rgba(226,235,233,.95)}
.profile-actions .profile-chip,.profile-logout{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 13px;border:1px solid rgba(15,118,110,.14);border-radius:14px;background:#f7fbfa;color:#49666b;text-decoration:none;font-size:.84rem;font-weight:850;white-space:nowrap;transition:.18s ease;box-sizing:border-box}
.profile-actions .profile-chip{justify-content:flex-start;min-width:0}
.profile-actions .profile-chip:hover,.profile-actions .profile-chip:focus-visible,.profile-actions .profile-chip.active{border-color:#7bc8bd;background:#e9f8f4;color:#0f766e;transform:translateY(-1px)}
.profile-avatar{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#ffedd5;color:#c2410c;font-size:.78rem;font-weight:900}
.profile-actions .profile-chip span:last-child{line-height:1}
.profile-logout{justify-content:center;min-width:40px;padding-inline:14px}
.profile-logout>span:first-child{font-size:1.05rem}
.profile-logout:hover,.profile-logout:focus-visible{border-color:#7bc8bd;background:#e7f7f3;color:#0f766e;transform:translateY(-1px)}
@media(max-width:980px){.site-header.app-header .profile-actions{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:10px;margin-left:0;padding:.55rem 0 0;border-left:0;border-top:1px solid #e5eceb}.profile-actions .profile-chip,.profile-logout{width:100%;min-height:48px;padding:0 14px}.profile-actions .profile-chip{justify-content:flex-start}.profile-logout{justify-content:center}}
@media(min-width:981px){.profile-logout-label{display:none}}


/* V24.141 — filtres et outils multilingues */
.revision-language-filter,.ai-language-switcher{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0;padding:14px 16px}.ai-language-switcher>span{font-weight:900;color:#40575a}.ai-language-switcher>div{display:flex;gap:8px;flex-wrap:wrap}.ai-language-switcher a{padding:9px 13px;border:1px solid #dbe7e5;border-radius:999px;background:#fff;color:#40575a;font-weight:850;text-decoration:none}.ai-language-switcher a.is-active{border-color:#159389;background:#e8f8f4;color:#0f766e;box-shadow:0 0 0 3px rgba(21,147,137,.09)}.learning-inline-audio{margin-top:12px}.lesson-translation-popover strong{overflow-wrap:anywhere}.revision-language-filter .chip{white-space:nowrap}@media(max-width:620px){.ai-language-switcher{align-items:flex-start;flex-direction:column}.ai-language-switcher>div{display:grid;grid-template-columns:1fr 1fr;width:100%}.ai-language-switcher a{text-align:center}.revision-language-filter{overflow-x:auto;flex-wrap:nowrap;padding-bottom:9px}}


/* ===== Catalogues Aventures & Lecture V24.210b ===== */
/* stories.php — catalogue V24.210b */
.story-completed-notice{display:grid;gap:4px;padding:12px 14px;border:1px solid #b6ddcf;border-radius:16px;background:#eefbf6;color:#215f52}.story-completed-notice strong{font-size:.88rem}.story-completed-notice span{font-size:.78rem;color:#52766f}
.story-catalog-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;overflow:hidden;padding:34px 38px;border:1px solid rgba(112,86,52,.1);border-radius:34px;background:radial-gradient(circle at 88% 15%,rgba(236,198,117,.24),transparent 28%),linear-gradient(135deg,#f8f0e2,#fffaf3 45%,#eef7f5 100%);box-shadow:0 24px 60px rgba(59,46,30,.08)}
.story-catalog-hero .eyebrow.soft{color:#8a6634;background:rgba(255,255,255,.75);padding:7px 11px;border-radius:999px;font-weight:900}
.story-catalog-hero h1{margin:7px 0 10px;color:#20393f;font-size:clamp(2rem,5vw,3.3rem);line-height:1.02}
.story-catalog-hero p{max-width:700px;margin:0;color:#62777d;line-height:1.72}
.story-catalog-group{display:flex;align-items:flex-end;font-size:clamp(2.8rem,7vw,5.4rem)}
.story-catalog-group span{filter:drop-shadow(0 10px 18px rgba(76,56,29,.12))}
.story-catalog-group span+span{margin-left:-14px}
.story-language-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.story-language-tabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #e0dfd4;border-radius:999px;background:#fffdfa;color:#4a5e61;font-weight:850;text-decoration:none;box-shadow:0 5px 16px rgba(34,46,52,.04)}
.story-language-tabs a:hover{border-color:#cbb181;background:#fff7ea}
.story-language-tabs a.is-active{border-color:#b88d54;background:#fff4df;color:#7b5727;box-shadow:0 0 0 3px rgba(184,141,84,.12)}
.story-catalog-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}
.story-catalog-grid::before{content:'';position:absolute;left:0;right:0;top:98px;height:10px;border-radius:999px;background:linear-gradient(90deg,#8f6937,#b88d54,#8f6937);opacity:.15}
.story-catalog-card{position:relative;overflow:hidden;padding:0;border-radius:28px;border:1px solid rgba(108,83,52,.11);background:linear-gradient(180deg,#fffdfa,#fff);box-shadow:0 20px 46px rgba(35,45,51,.07)}
.story-catalog-card::after{content:'';position:absolute;left:18px;right:18px;top:87px;height:1px;background:rgba(95,75,45,.08)}
.story-catalog-cover{display:flex;align-items:center;gap:18px;padding:24px 25px;background:linear-gradient(135deg,#6d4c2f,#8f6937 45%,#b88d54);color:#fff}
.story-catalog-cover>span{display:grid;place-items:center;width:66px;height:66px;border-radius:20px;background:rgba(255,255,255,.12);font-size:2.4rem}
.story-catalog-cover div{display:grid;gap:4px}.story-catalog-cover small{color:#f9e3bd;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.story-catalog-cover strong{font-size:1.45rem;line-height:1.15}
.story-catalog-content{display:grid;gap:13px;padding:24px}.story-catalog-content h2,.story-coming-soon h2{margin:0}.story-catalog-content p,.story-coming-soon p{margin:0;color:#687b80;line-height:1.62}
.story-mode-actions{display:grid;grid-template-columns:1fr;gap:9px}.story-mode-actions .button{text-align:center;justify-content:center}.story-interactive-button{min-height:52px;font-size:1rem}
.story-catalog-level{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;width:fit-content;max-width:100%;padding:8px 11px;border:1px solid #eadbb8;border-radius:13px;background:#fff7e8;color:#6a5630;font-size:.78rem;font-weight:800}.story-catalog-level strong{padding:4px 8px;border-radius:999px;background:#7f5c2c;color:#fff;font-size:.76rem}
.story-catalog-meta{display:flex;flex-wrap:wrap;gap:8px}.story-catalog-meta span{padding:7px 10px;border-radius:999px;background:#f7f4ed;color:#6c797c;font-size:.76rem;font-weight:800}
.story-coming-soon{display:flex;align-items:center;gap:18px;margin-top:20px;padding:22px;border-radius:22px}.story-coming-icon{font-size:2.2rem}.story-catalog-empty{grid-column:1/-1}
@media (max-width:760px){.story-mode-actions{grid-template-columns:1fr}.story-mode-actions .button:last-child{grid-column:auto}.story-catalog-hero{padding:25px 21px}.story-catalog-group{display:none}.story-catalog-grid{grid-template-columns:1fr}.story-catalog-grid::before{display:none}}

.reading-library-feature{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:stretch;margin-top:22px;padding:0;overflow:hidden;border-radius:28px;border:1px solid rgba(113,80,37,.13);background:linear-gradient(145deg,#fffaf0,#fff)}
.reading-library-cover{display:grid;place-items:center;align-content:center;gap:10px;min-height:270px;padding:30px;text-align:center;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.2),transparent 30%),linear-gradient(145deg,#173f58,#0f766e 55%,#0b4f55);color:#fff}
.reading-library-cover span{font-size:5.5rem;filter:drop-shadow(0 14px 18px rgba(0,0,0,.18))}.reading-library-cover strong{max-width:220px;font-family:Georgia,serif;font-size:1.55rem;line-height:1.2}.reading-library-cover small{color:#cce8e4;font-weight:800}
.reading-library-content{display:grid;align-content:center;gap:12px;padding:30px 32px}.reading-library-content h2{margin:0;color:#243a40;font-size:clamp(1.6rem,3vw,2.4rem)}.reading-library-content p{max-width:720px;margin:0;color:#687b80;line-height:1.65}.reading-library-meta{display:flex;flex-wrap:wrap;gap:8px}.reading-library-meta span{padding:7px 10px;border-radius:999px;background:#f5efe4;color:#755a32;font-size:.78rem;font-weight:850}.reading-library-actions{margin-top:4px}
@media(max-width:760px){.reading-library-feature{grid-template-columns:1fr}.reading-library-cover{min-height:210px}.reading-library-content{padding:24px 21px}.reading-library-actions .button{width:100%;justify-content:center}}

/* reading.php — catalogue V24.210b */
.reading-library-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;padding:34px 36px;border:1px solid rgba(21,147,137,.16);border-radius:30px;overflow:hidden;background:radial-gradient(circle at 88% 4%,rgba(255,209,102,.28),transparent 34%),linear-gradient(135deg,#effaf7 0%,#fffaf0 100%);box-shadow:0 18px 45px rgba(37,79,83,.08)}
.reading-library-hero:after{content:'📚';position:absolute;right:20px;bottom:-34px;font-size:8.5rem;opacity:.05;transform:rotate(-10deg)}
.reading-library-hero h1{max-width:760px;margin:.32rem 0 .7rem;color:#173f45;font-size:clamp(2rem,4.8vw,3.35rem);line-height:1.02}.reading-library-hero p{max-width:760px;margin:0;color:#61777c;line-height:1.68}.reading-library-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.reading-library-hero-meta span{padding:7px 11px;border:1px solid rgba(21,147,137,.11);border-radius:999px;background:rgba(255,255,255,.8);color:#456267;font-size:.78rem;font-weight:850}.reading-library-cast{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,58px);gap:8px}.reading-library-cast span{display:grid;place-items:center;width:58px;height:58px;border:3px solid #fff;border-radius:19px;background:#fff;box-shadow:0 8px 20px rgba(27,70,75,.12);font-size:2rem}
.reading-level-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.reading-level-tabs a{padding:10px 16px;border:1px solid #d9e6e3;border-radius:999px;background:#fff;color:#51696d;font-size:.86rem;font-weight:850;text-decoration:none;transition:.18s}.reading-level-tabs a:hover{border-color:#8ccfc5;transform:translateY(-1px)}.reading-level-tabs a.is-active{border-color:#159389;background:#e7f8f4;color:#087568;box-shadow:0 0 0 3px rgba(21,147,137,.09)}
.reading-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.reading-book-card{position:relative;display:grid;grid-template-columns:156px minmax(0,1fr);min-height:286px;overflow:hidden;padding:0;border:1px solid #dfeceb;border-radius:30px;background:linear-gradient(180deg,#fffdfa,#fff);box-shadow:0 14px 38px rgba(35,73,78,.08);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.reading-book-card:hover{border-color:#b7ddd6;box-shadow:0 22px 52px rgba(35,73,78,.12);transform:translateY(-4px)}
.reading-book-cover{position:relative;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(155deg,#1d6771,#17485d)}
.reading-book-spine{position:absolute;left:0;top:0;bottom:0;width:18px;background:linear-gradient(180deg,#0d3644,#173f52);box-shadow:inset -1px 0 0 rgba(255,255,255,.08)}
.reading-book-front{position:relative;display:flex;min-height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 14px 16px;border-radius:26px;background:radial-gradient(circle at 22% 12%,rgba(255,255,255,.28),transparent 22%),linear-gradient(160deg,#1c7783,#15556b);color:#fff;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 14px 28px rgba(6,34,40,.18)}
.reading-book-front small{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.13);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.reading-book-cover-icon{display:grid;place-items:center;width:84px;height:84px;border-radius:26px;background:rgba(255,255,255,.14);font-size:3.9rem;box-shadow:0 12px 18px rgba(0,0,0,.12)}.reading-book-front strong{font-size:1.2rem;line-height:1.16}.reading-book-front em{font-style:normal;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.14);font-size:.76rem;font-weight:850}
.reading-book-content{display:flex;min-width:0;flex-direction:column;padding:22px 22px 20px}.reading-book-labels{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:#667b80;font-size:.72rem;font-weight:850}.reading-book-labels span{padding:5px 8px;border-radius:999px;background:#f4f8f7}.reading-book-labels .badge{background:#e4f7f2;color:#0f766e}.reading-book-content h2{margin:12px 0 6px;color:#173f45;font-size:1.65rem;line-height:1.12}.reading-book-content>p{display:-webkit-box;overflow:hidden;margin:0;color:#667b80;line-height:1.56;-webkit-box-orient:vertical;-webkit-line-clamp:2}.reading-book-characters{display:flex;margin-top:14px}.reading-book-characters span{display:grid;place-items:center;width:35px;height:35px;margin-right:-6px;border:3px solid #fff;border-radius:50%;background:#eff7f5;box-shadow:0 3px 9px rgba(33,75,80,.08);font-size:1.25rem}.reading-book-focus{display:grid;gap:4px;margin-top:14px;padding:11px 13px;border:1px solid #e4efec;border-radius:16px;background:#f9fcfb}.reading-book-focus strong{color:#1a4f55;font-size:.82rem}.reading-book-focus span{color:#667b80;font-size:.86rem;line-height:1.45}.reading-book-actions{display:grid;grid-template-columns:.78fr 1.22fr;gap:8px;margin-top:auto;padding-top:16px}.reading-book-actions .button{min-height:44px;justify-content:center;padding:10px 11px;text-align:center;font-size:.84rem}.reading-book-actions .button.secondary{background:#f2f7f6;color:#31575c}
.empty-state{grid-column:1/-1;padding:34px;text-align:center}
@media(max-width:900px){.reading-library-grid{grid-template-columns:1fr}.reading-book-card{min-height:255px}}
@media(max-width:650px){.reading-library-hero{grid-template-columns:1fr;padding:24px 18px}.reading-library-cast{grid-template-columns:repeat(6,42px);justify-content:start}.reading-library-cast span{width:42px;height:42px;border-radius:13px;font-size:1.5rem}.reading-level-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.reading-level-tabs a{flex:0 0 auto}.reading-library-grid{gap:15px}.reading-book-card{grid-template-columns:102px minmax(0,1fr);min-height:224px;border-radius:22px}.reading-book-cover{padding:10px}.reading-book-front{padding:12px 8px;border-radius:18px}.reading-book-cover-icon{width:60px;height:60px;border-radius:18px;font-size:2.8rem}.reading-book-front strong{font-size:.95rem}.reading-book-front small,.reading-book-front em{font-size:.58rem}.reading-book-content{padding:16px 14px}.reading-book-content h2{margin-top:10px;font-size:1.2rem}.reading-book-content>p{font-size:.88rem}.reading-book-labels span:nth-child(3){display:none}.reading-book-actions{grid-template-columns:1fr}.reading-book-actions .button{min-height:40px}.reading-book-actions .button.secondary{display:none}}
@media(max-width:400px){.reading-book-card{grid-template-columns:88px minmax(0,1fr)}.reading-book-cover-icon{width:52px;height:52px;font-size:2.35rem}.reading-book-content{padding-left:12px}.reading-book-actions .button{font-size:.78rem}}

.reading-language-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 10px}.reading-language-tabs a{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border:1px solid #d9e6e3;border-radius:999px;background:#fff;color:#51696d;font-size:.86rem;font-weight:850;text-decoration:none}.reading-language-tabs a:hover{border-color:#8ccfc5}.reading-language-tabs a.is-active{border-color:#159389;background:#e7f8f4;color:#087568;box-shadow:0 0 0 3px rgba(21,147,137,.09)}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 2px 18px;color:#66797d}.catalog-toolbar p{margin:0}.catalog-toolbar span{font-size:.85rem;font-weight:800}.catalog-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:28px 0 8px}.catalog-pagination>div{display:flex;gap:7px}.catalog-pagination a{display:grid;place-items:center;min-width:42px;height:42px;padding:0 13px;border:1px solid #d9e4e2;border-radius:13px;background:#fff;color:#31565b;font-weight:900;text-decoration:none}.catalog-pagination a:hover{border-color:#8ccfc5;background:#f2fbf9}.catalog-pagination a.is-active{border-color:#159389;background:#159389;color:#fff}.reading-book-actions{grid-template-columns:1fr}.reading-book-card{min-height:270px}.reading-book-focus{display:none}
@media(max-width:650px){.reading-library-hero{border-radius:24px}.reading-language-tabs,.reading-level-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.reading-language-tabs a,.reading-level-tabs a{flex:0 0 auto}.catalog-toolbar{align-items:flex-start;flex-direction:column;gap:4px}.catalog-pagination{justify-content:center;flex-wrap:wrap}.catalog-pagination>div{order:3;width:100%;justify-content:center}.catalog-pagination>a{flex:1}.reading-book-card{grid-template-columns:92px minmax(0,1fr);min-height:205px}.reading-book-content{padding:15px 13px}.reading-book-content h2{font-size:1.12rem}.reading-book-characters{display:none}}


/* Correctifs de robustesse : styles externes compatibles CSP */
.story-catalog-hero,
.reading-library-hero { margin-top: 8px; }
.story-language-tabs,
.reading-language-tabs,
.reading-level-tabs { position: relative; z-index: 2; }
.story-catalog-grid,
.reading-library-grid { align-items: stretch; }
.story-catalog-card,
.reading-book-card { height: 100%; }
.catalog-toolbar { padding: 0 2px; }

@media (max-width: 650px) {
  .story-catalog-hero h1,
  .reading-library-hero h1 { font-size: 2rem; }
  .story-catalog-hero p,
  .reading-library-hero p { font-size: .95rem; }
  .story-language-tabs,
  .reading-language-tabs,
  .reading-level-tabs {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .story-language-tabs::-webkit-scrollbar,
  .reading-language-tabs::-webkit-scrollbar,
  .reading-level-tabs::-webkit-scrollbar { display: none; }
}


/* V24.285 — associations compactes en deux colonnes sur mobile */
@media (max-width: 650px) {
    .matching-exercise .matching-columns {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 7px !important;
        align-items: start;
    }
    .matching-exercise .matching-column {
        min-width: 0;
        padding: 7px !important;
        gap: 6px !important;
        border-radius: 13px;
    }
    .matching-exercise .matching-column > strong {
        font-size: .68rem;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .matching-exercise .matching-chip {
        width: 100%;
        min-height: 40px;
        padding: 7px 5px !important;
        border-radius: 9px;
        font-size: .72rem !important;
        line-height: 1.2;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

/* V24.291 — menu Plus réorganisé */
.nav-more .nav-dropdown{width:300px;grid-template-columns:1fr;gap:8px;padding:10px}.nav-dropdown-group{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding-top:8px;border-top:1px solid #edf2f1}.nav-dropdown-group:first-child{padding-top:0;border-top:0}.nav-dropdown-label{grid-column:1/-1;padding:3px 7px;color:#8a9a9e;font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.nav-dropdown-group a{display:flex;align-items:center;gap:7px;min-width:0}.nav-dropdown-group a>span{width:19px;text-align:center;flex:none}.nav-dropdown-group--learn a{background:#f5fbf9;color:#135f5a;font-weight:850}.nav-dropdown-group--learn a:hover{background:#e6f7f2}.nav-dropdown-group a.active{background:#eaf8f4;color:#0f766e;font-weight:850}@media(max-width:980px){.nav-more .nav-dropdown{width:auto}.nav-dropdown-group{grid-template-columns:1fr 1fr}}@media(max-width:540px){.nav-dropdown-group{grid-template-columns:1fr}.nav-dropdown-label{grid-column:1}}


/* V24.293 — Grammaire pédagogique structurée */
.learning-grammar-v2 { display: grid; gap: 1rem; }
.learning-grammar-v2 .learning-block-heading { margin-bottom: .15rem; }
.learning-grammar-explanation,
.learning-grammar-target {
    padding: 1rem 1.1rem;
    border-radius: 17px;
}
.learning-grammar-explanation {
    background: #f7faf9;
    border: 1px solid rgba(23,52,62,.08);
}
.learning-grammar-target {
    background: linear-gradient(145deg, #eefaf8, #fff);
    border: 1px solid rgba(8,127,131,.16);
}
.learning-grammar-label {
    display: inline-block;
    margin-bottom: .55rem;
    color: var(--lesson-teal-dark);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.learning-grammar-target-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .6rem;
}
.learning-grammar-target-head small { color: var(--lesson-muted); }
.learning-grammar-examples { display: grid; gap: .65rem; }
.learning-grammar-example {
    display: grid;
    grid-template-columns: minmax(0,1fr) 42px;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(8,127,131,.12);
    color: var(--lesson-ink);
    font-weight: 750;
    line-height: 1.55;
}
.learning-example-audio {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: #e6f6f3;
    cursor: pointer;
    font-size: 1rem;
}
.learning-example-audio.is-speaking { background: #16343e; color: #fff; }
@media (max-width: 640px) {
    .learning-grammar-target-head { display: block; }
    .learning-grammar-target-head small { display: block; margin-top: .15rem; }
}


/* V24.295 — Traduction + audio dans les exemples de grammaire */
.learning-grammar-example-text .lesson-translatable-word {
    cursor: pointer;
    text-decoration: underline dotted rgba(8,127,131,.36);
    text-underline-offset: 3px;
}
.learning-grammar-example-text .lesson-translatable-word:hover,
.learning-grammar-example-text .lesson-translatable-word:focus {
    color: var(--lesson-teal-dark);
    text-decoration-color: currentColor;
}


/* Public beta notice */
.open-beta-banner {
    border-bottom: 1px solid rgba(15, 118, 110, .16);
    background: rgba(240, 253, 250, .96);
}
.open-beta-banner-inner {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 0;
    font-size: .86rem;
    color: #315b57;
}
.open-beta-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.open-beta-banner a {
    color: #0f766e;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}
.open-beta-banner a:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .open-beta-banner-inner {
        width: min(100% - 24px, 1180px);
        justify-content: flex-start;
        gap: 6px 9px;
        font-size: .78rem;
        line-height: 1.35;
    }
    .open-beta-banner-inner > span:not(.open-beta-badge) {
        flex: 1 1 210px;
    }
}

/* V24.401 — navigation desktop allégée : 5 entrées + menus secondaires */
@media (min-width: 981px) {
    .site-header.app-header .header-inner {
        min-height: 74px;
        gap: 18px;
    }

    .site-header.app-header .brand {
        flex: 0 0 auto;
    }

    .site-header.app-header .main-navigation {
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        min-width: 0;
    }

    .site-header.app-header .main-navigation > .nav-main,
    .site-header.app-header .nav-more > summary {
        min-height: 44px;
        padding: 0 13px;
        border: 1px solid transparent;
        border-radius: 14px;
        white-space: nowrap;
    }

    .site-header.app-header .main-navigation > .nav-main > span {
        font-size: 1rem;
    }

    .site-header.app-header .nav-more > summary {
        gap: 5px;
        color: #52666a;
    }

    .site-header.app-header .nav-more[open] > summary,
    .site-header.app-header .nav-account[open] > summary {
        background: #effaf8;
        color: var(--brand);
    }

    .site-header.app-header .nav-account {
        position: relative;
        flex: 0 0 auto;
        margin-left: 3px;
    }

    .site-header.app-header .nav-account > summary {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 9px 5px 6px;
        border: 1px solid #dbe8e5;
        border-radius: 14px;
        background: #fff;
        color: #40585c;
        cursor: pointer;
        list-style: none;
        font-size: .84rem;
        font-weight: 850;
        transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .site-header.app-header .nav-account > summary::-webkit-details-marker {
        display: none;
    }

    .site-header.app-header .nav-account > summary:hover {
        border-color: #bcded8;
        background: #f7fcfb;
        box-shadow: 0 7px 20px rgba(15, 118, 110, .07);
    }

    .site-header.app-header .nav-account.active > summary {
        border-color: #aad8d1;
        background: #effaf8;
        color: var(--brand);
    }

    .site-header.app-header .nav-account .profile-avatar {
        width: 31px;
        height: 31px;
        flex: 0 0 31px;
    }

    .site-header.app-header .nav-account-chevron {
        margin-left: -2px;
        font-size: .72rem;
        opacity: .72;
    }

    .site-header.app-header .nav-account-dropdown {
        position: absolute;
        z-index: 80;
        right: 0;
        top: calc(100% + 10px);
        width: 220px;
        display: grid;
        gap: 3px;
        padding: 8px;
        border: 1px solid #dce9e6;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 20px 50px rgba(15, 23, 42, .14);
    }

        .site-header.app-header .nav-account-dropdown a,
    .site-header.app-header .nav-account-dropdown button {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        min-height: 40px;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #486064;
        cursor: pointer;
        font: inherit;
        font-size: .82rem;
        font-weight: 750;
        text-align: left;
        text-decoration: none;
    }

    .site-header.app-header .nav-account-logout-form {
        margin: 0;
    }

    .site-header.app-header .nav-account-dropdown a:hover,
    .site-header.app-header .nav-account-dropdown a.active,
    .site-header.app-header .nav-account-dropdown button:hover {
        background: #eef9f6;
        color: #0f766e;
    }

    .site-header.app-header .nav-account-dropdown a > span,
    .site-header.app-header .nav-account-dropdown button > span {
        width: 20px;
        text-align: center;
    }

    .site-header.app-header .nav-account-dropdown .nav-account-logout {
        margin-top: 3px;
        border-top: 1px solid #edf2f1;
        border-radius: 0 0 10px 10px;
        color: #7b5555;
    }

    .site-header.app-header .nav-account-dropdown .nav-account-logout:hover {
        background: #fff6f6;
        color: #a33f3f;
    }

    .site-header.app-header .nav-more .nav-dropdown {
        right: 0;
    }
}

/* Le menu compte reste propre dans le menu hamburger / tablette. */
@media (max-width: 980px) {
    .site-header.app-header .nav-account {
        width: 100%;
    }

    .site-header.app-header .nav-account > summary {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 8px 10px;
        border-radius: 12px;
        cursor: pointer;
        list-style: none;
        color: #40585c;
        font-weight: 850;
    }

    .site-header.app-header .nav-account > summary::-webkit-details-marker {
        display: none;
    }

    .site-header.app-header .nav-account-chevron {
        margin-left: auto;
    }

    .site-header.app-header .nav-account-dropdown {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        padding: 7px 5px 2px;
    }

    .site-header.app-header .nav-account-dropdown a,
    .site-header.app-header .nav-account-dropdown button {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 42px;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: #f7faf9;
        color: #486064;
        cursor: pointer;
        font: inherit;
        text-align: left;
        text-decoration: none;
        font-size: .8rem;
        font-weight: 750;
    }

    .site-header.app-header .nav-account-dropdown a.active {
        background: #eaf8f4;
        color: #0f766e;
    }
}

@media (max-width: 540px) {
    .site-header.app-header .nav-account-dropdown {
        grid-template-columns: 1fr;
    }
}


/* SEO Vulpingo — portes d'entrée publiques langues / fonctions */
.seo-feature-page{display:grid;gap:22px}
.seo-feature-breadcrumb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:#718387;font-size:.82rem}
.seo-feature-breadcrumb a{color:#477d76;text-decoration:none}
.seo-feature-hero{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:28px;align-items:center;padding:34px}
.seo-feature-hero h1{max-width:820px;margin:.4rem 0 .8rem;font-size:clamp(2rem,4vw,3.25rem);line-height:1.08}
.seo-feature-hero p{max-width:760px;color:#61757a;font-size:1.02rem;line-height:1.7}
.seo-feature-icon{display:grid;place-items:center;min-height:150px;border-radius:28px;background:linear-gradient(145deg,#eef9f6,#f8fbfa);font-size:5.4rem}
.seo-feature-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.seo-feature-benefits article{padding:24px}
.seo-feature-benefits h2{margin:0 0 10px;font-size:1.05rem}
.seo-feature-benefits p{margin:0;color:#667a7e;line-height:1.6}
.seo-feature-languages,.seo-feature-next{padding:28px}
.seo-feature-languages h2,.seo-feature-next h2{margin:.35rem 0 .55rem}
.seo-feature-languages>div:first-child p{color:#687b80}
.seo-feature-language-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.seo-feature-language-grid a{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:14px;border:1px solid #e1ebe9;border-radius:14px;background:#fbfdfc;color:#29474d;text-decoration:none}
.seo-feature-language-grid a>span{grid-row:1/3;font-size:1.55rem}
.seo-feature-language-grid strong{font-size:.9rem}
.seo-feature-language-grid small{color:#718387;font-size:.72rem}
.seo-feature-next{display:flex;justify-content:space-between;gap:20px;align-items:center}
.seo-feature-next>div:last-child{display:flex;gap:8px;flex-wrap:wrap}
.seo-feature-next a{padding:9px 12px;border:1px solid #dce9e6;border-radius:999px;color:#376c65;text-decoration:none;font-size:.82rem;font-weight:750}
.language-seo-tools{margin-top:22px;padding:26px}
.language-seo-tools-head h2{margin:.35rem 0 .45rem}
.language-seo-tools-head p{margin:0;color:#687b80}
.language-seo-tools-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.language-seo-tools-grid a{display:grid;gap:5px;padding:16px;border:1px solid #e1ebe9;border-radius:15px;background:#fbfdfc;color:#29474d;text-decoration:none}
.language-seo-tools-grid a>span{font-size:1.45rem}
.language-seo-tools-grid strong{font-size:.9rem}
.language-seo-tools-grid small{color:#718387;font-size:.72rem;line-height:1.4}
@media(max-width:850px){
  .seo-feature-hero{grid-template-columns:1fr}.seo-feature-icon{min-height:110px}
  .seo-feature-benefits{grid-template-columns:1fr}
  .seo-feature-language-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .language-seo-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seo-feature-next{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
  .seo-feature-hero,.seo-feature-languages,.seo-feature-next,.language-seo-tools{padding:20px 15px}
  .seo-feature-language-grid,.language-seo-tools-grid{grid-template-columns:1fr}
}


/* V24.400 — Footer extracted from inline markup for browser caching */
.vulpingo-footer {
    margin-top: 56px;
    padding: 48px 24px 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(20, 184, 166, .12),
            transparent 26%
        ),
        #0b2c2d;
    color: #d8e8e6;
}

.vulpingo-footer-inner {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.05fr)
        repeat(3, minmax(150px, .82fr))
        minmax(220px, 1.05fr);
    gap: 28px;
    align-items: start;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.vulpingo-footer-brand {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 12px;
    padding-top: 0;
}

.vulpingo-footer-brand .brand {
    width: fit-content;
    justify-content: flex-start;
    color: #fff;
    text-align: left;
}

.vulpingo-footer-brand p {
    max-width: 265px;
    margin: 0;
    color: #a9c4c1;
    font-size: .9rem;
    line-height: 1.55;
    text-align: left;
}

.vulpingo-footer-signature {
    color: #6fa9a3;
    font-size: .73rem;
    font-weight: 750;
    text-align: left;
}

.vulpingo-footer-column {
    display: grid;
    align-content: start;
    gap: 8px;
}

.vulpingo-footer-column > strong {
    display: flex;
    align-items: center;
    min-height: 36px;
    margin: 0 0 7px;
    color: #fff;
    font-size: .92rem;
    line-height: 1.2;
}

.vulpingo-footer-column > a {
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b9d0cd;
    cursor: pointer;
    font: inherit;
    font-size: .88rem;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
    transition:
        color .18s ease,
        transform .18s ease;
}

.vulpingo-footer-column > a:hover {
    color: #fff;
    transform: translateX(3px);
    text-decoration: none;
}

.vulpingo-footer-projects {
    gap: 12px;
}

.vulpingo-footer-projects .vulpingo-project-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
}

.vulpingo-footer-projects .vulpingo-project-link:hover {
    transform: translateY(-2px);
    border-color: rgba(45, 212, 191, .25);
    background: rgba(255, 255, 255, .065);
}

.vulpingo-project-link span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.vulpingo-project-link b {
    color: #fff;
    font-size: .88rem;
}

.vulpingo-project-link small {
    color: #8fafab;
    font-size: .7rem;
    line-height: 1.3;
}

.vulpingo-project-link i {
    margin-left: auto;
    color: #5fd8cb;
    font-style: normal;
    font-size: 1rem;
}

.vulpingo-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: min(1180px, 100%);
    margin: 36px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #7fa29f;
    font-size: .78rem;
}

.vulpingo-footer-bottom > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.vulpingo-footer-bottom a {
    color: #9dbbb7;
    text-decoration: none;
}

.vulpingo-footer-bottom a:hover {
    color: #fff;
}

@media (max-width: 1120px) {
    .vulpingo-footer-inner {
        grid-template-columns: minmax(260px, 1.25fr) repeat(2, 1fr);
    }

    .vulpingo-footer-projects {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .vulpingo-footer {
        padding: 36px 20px 92px;
    }

    .vulpingo-footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 22px;
    }

    .vulpingo-footer-brand,
    .vulpingo-footer-projects {
        grid-column: 1 / -1;
    }

    .vulpingo-footer-brand p {
        max-width: none;
    }

    .vulpingo-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .vulpingo-footer-bottom > div {
        justify-content: flex-start;
    }
}

@media (max-width: 470px) {
    .vulpingo-footer-inner {
        grid-template-columns: 1fr;
    }

    .vulpingo-footer-brand,
    .vulpingo-footer-projects {
        grid-column: auto;
    }

    .vulpingo-footer-projects .vulpingo-project-link {
        width: 100%;
    }
}

@media (min-width: 1121px) {
    .vulpingo-footer-brand .brand-lockup span:last-child {
        align-items: flex-start;
        text-align: left;
    }

    .vulpingo-footer-projects {
        min-width: 0;
    }
}


.vulpingo-footer-brand .brand-lockup {
    min-height: 36px;
    margin: 0;
}

.vulpingo-footer-brand .brand-lockup strong {
    line-height: 1.05;
}

.vulpingo-footer-column,
.vulpingo-footer-brand {
    padding-top: 0;
}


/* ==========================================================================
   V24.42 — Dashboard / Aujourd’hui
   ========================================================================== */

.ux-next-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 18px 0 20px;
    padding: 16px 18px;
    border: 1px solid rgba(15, 118, 110, .16);
    border-radius: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #f5fbf9 100%);
    box-shadow: 0 14px 32px rgba(15, 60, 67, .06);
}

.ux-next-action-status {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: #e8f7f3;
    flex: 0 0 auto;
}

.ux-next-action-icon {
    color: #0f766e;
    font-size: 1.55rem;
    font-weight: 900;
}

.ux-next-action-content {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ux-next-action-kicker {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ux-next-action-content strong {
    color: #102a33;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.15;
}

.ux-next-action-description {
    color: #697c81;
    line-height: 1.45;
}

.ux-next-action-side {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ux-next-action-highlight {
    display: grid;
    gap: 2px;
    min-width: 110px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f3f8f7;
    text-align: center;
}

.ux-next-action-highlight small {
    color: #75878b;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ux-next-action-highlight strong {
    color: #102a33;
    font-size: 1.15rem;
}

.ux-next-action-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 16px;
    background: #0f8b82;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(15, 139, 130, .24);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ux-next-action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(15, 139, 130, .28);
}

.ux-next-action-button b {
    font-size: 1rem;
}

.dashboard-overview-redesigned {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: stretch;
}

.weekly-goal-panel {
    padding: 24px;
    border-radius: 26px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fcfb 100%);
    box-shadow: 0 18px 42px rgba(15, 60, 67, .07);
}

.weekly-goal-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
}

.weekly-goal-copy {
    display: grid;
    gap: 12px;
}

.weekly-goal-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.weekly-goal-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eef8f6;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 850;
}

.weekly-goal-panel h2 {
    margin: 0;
    color: #102a33;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    line-height: 1.1;
}

.weekly-goal-text {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
}

.weekly-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #6b7e83;
    font-size: .88rem;
    font-weight: 700;
}

.goal-circle-wrap {
    display: grid;
    place-items: center;
}

.goal-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 148px;
    height: 148px;
    padding: 18px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, #fff 70%, transparent 71% 100%),
        conic-gradient(#0f1c3f calc(var(--progress) * 1%), #dde7e8 0);
    box-shadow: inset 0 0 0 10px rgba(255,255,255,.45);
    text-align: center;
}

.goal-circle strong {
    color: #0f1c3f;
    font-size: 2.05rem;
    line-height: .95;
}

.goal-circle small {
    display: block;
    max-width: 88px;
    color: #64787d;
    font-size: .72rem;
    line-height: 1.15;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

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

.mini-stat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
    box-shadow: 0 16px 36px rgba(15, 60, 67, .06);
}

.mini-stat-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #f7f3eb;
    font-size: 1.3rem;
}

.mini-stat-body {
    display: grid;
    gap: 3px;
}

.mini-stat strong {
    color: #102a33;
    font-size: 2rem;
    line-height: 1;
}

.mini-stat small {
    color: #6e8186;
    font-size: .92rem;
    font-weight: 700;
}

.mini-stat em {
    color: #90a2a7;
    font-size: .8rem;
    font-style: normal;
    line-height: 1.35;
}

.mini-stat-streak .mini-stat-icon { background: #fff1e6; }
.mini-stat-xp .mini-stat-icon { background: #eef4ff; }
.mini-stat-level .mini-stat-icon { background: #f7efe4; }
.mini-stat-revisions .mini-stat-icon { background: #eef8f6; }

@media (max-width: 920px) {
    .ux-next-action {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .ux-next-action-status {
        width: 52px;
        height: 52px;
    }

    .ux-next-action-side {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .dashboard-overview-redesigned {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .weekly-goal-panel {
        padding: 20px;
    }

    .weekly-goal-main {
        grid-template-columns: 1fr;
    }

    .weekly-progress-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .ux-next-action-side {
        flex-direction: column;
        align-items: stretch;
    }

    .ux-next-action-highlight,
    .ux-next-action-button {
        width: 100%;
    }
}

.dashboard-learning-section {

    display: grid;
    gap: 22px;
}

.dashboard-learning-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 25px 28px;
    border: 1px solid rgba(15, 118, 110, .15);
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 92% 14%,
            rgba(45, 212, 191, .20),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3fbf9 58%,
            #edf9f6 100%
        );
    box-shadow: 0 18px 45px rgba(15, 60, 67, .08);
}

.dashboard-learning-header::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -56px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .42);
    pointer-events: none;
}

.dashboard-learning-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.dashboard-learning-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: #dff5f1;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .08);
    font-size: 1.65rem;
}

.dashboard-learning-heading .eyebrow {
    color: #0f766e;
}

.dashboard-learning-heading h2 {
    margin: 4px 0 6px;
    color: #102a33;
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    line-height: 1.08;
}

.dashboard-learning-heading p {
    max-width: 560px;
    margin: 0;
    color: #61737a;
    line-height: 1.55;
}

.dashboard-catalog-link {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 18px;
    min-width: 205px;
    padding: 13px 14px 13px 18px;
    border: 1px solid rgba(15, 118, 110, .13);
    border-radius: 18px;
    background: rgba(255, 255, 255, .84);
    color: #102a33;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 60, 67, .07);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.dashboard-catalog-link span {
    display: grid;
    gap: 2px;
    font-weight: 800;
}

.dashboard-catalog-link small {
    color: #0f766e;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.dashboard-catalog-link strong {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 13px;
    background: #0f766e;
    color: #fff;
    font-size: 1.1rem;
    transition: transform .18s ease;
}

.dashboard-catalog-link:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, .3);
    box-shadow: 0 14px 30px rgba(15, 60, 67, .11);
}

.dashboard-catalog-link:hover strong {
    transform: translateX(3px);
}

@media (max-width: 720px) {
    .dashboard-learning-header {
        align-items: stretch;
        flex-direction: column;
        padding: 21px;
        border-radius: 22px;
    }

    .dashboard-learning-heading {
        align-items: flex-start;
    }

    .dashboard-learning-icon {
        width: 52px;
        height: 52px;
        border-radius: 17px;
        font-size: 1.4rem;
    }

    .dashboard-catalog-link {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .dashboard-learning-heading {
        gap: 13px;
    }

    .dashboard-learning-heading p {
        font-size: .92rem;
    }
}

.dashboard-featured-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.dashboard-featured-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 23px;
    overflow: hidden;
    border: 1px solid rgba(15, 118, 110, .13);
    border-radius: 24px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 16px 38px rgba(15, 60, 67, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}

.dashboard-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px rgba(15, 60, 67, .13);
}

.dashboard-featured-conjugation {
    background: linear-gradient(135deg, #f3efff 0%, #eefaf7 100%);
    border-color: rgba(111, 78, 170, .16);
}

.dashboard-featured-adventure {
    background: linear-gradient(135deg, #fff5d8, #edf9f6);
}

.dashboard-featured-flashcards {
    background: linear-gradient(135deg, #eaf5ff, #edf9f6);
}

.dashboard-featured-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
    font-size: 2rem;
}

.dashboard-featured-card h2 {
    margin: 4px 0 7px;
    color: #15383e;
}

.dashboard-featured-card p {
    margin: 0;
    color: #60757a;
    line-height: 1.55;
}

.dashboard-featured-card small {
    display: inline-block;
    margin-top: 10px;
    color: #0f766e;
    font-weight: 800;
}

.dashboard-featured-card > b {
    font-size: 1.5rem;
}

@media (max-width: 780px) {
    .dashboard-featured-tools {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .dashboard-featured-card {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 18px;
    }

    .dashboard-featured-card > b {
        display: none;
    }

    .dashboard-featured-icon {
        width: 52px;
        height: 52px;
        border-radius: 17px;
        font-size: 1.6rem;
    }
}


.dashboard-featured-reading {
    background: linear-gradient(135deg, #fff8e8 0%, #eefaf7 100%);
    border-color: rgba(195, 139, 40, .18);
}
.dashboard-featured-reading .dashboard-featured-icon {
    background: rgba(255, 255, 255, .72);
}

.dashboard-today-focus {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin: 18px 0 20px;
    padding: 20px;
    border: 1px solid rgba(15, 118, 110, .16);
    border-left: 7px solid #0f8b82;
    border-radius: 26px;
    background: linear-gradient(135deg, #fff 0%, #f3fbf9 100%);
    box-shadow: 0 16px 38px rgba(15, 60, 67, .08);
}

.dashboard-today-focus.is-priority {
    border-color: rgba(217, 119, 6, .2);
    border-left-color: #d97706;
    background: linear-gradient(135deg, #fff 0%, #fff8e8 100%);
}

.dashboard-today-focus.is-complete {
    border-color: rgba(22, 163, 74, .2);
    border-left-color: #16a34a;
    background: linear-gradient(135deg, #fff 0%, #effcf3 100%);
}

.dashboard-today-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, #fff 69%, transparent 70% 100%),
        conic-gradient(#0f8b82 calc(var(--progress) * 1%), #dfe9e8 0);
    box-shadow: 0 8px 20px rgba(15, 118, 110, .10);
}

.dashboard-today-progress strong {
    color: #102a33;
    font-size: 1.65rem;
    line-height: 1;
}

.dashboard-today-progress small {
    margin-top: 5px;
    color: #718287;
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dashboard-today-copy {
    min-width: 0;
}

.dashboard-today-kicker {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-today-copy h2 {
    margin: 5px 0 7px;
    color: #102a33;
    font-size: clamp(1.35rem, 2.8vw, 1.9rem);
    line-height: 1.08;
}

.dashboard-today-copy p {
    margin: 0;
    color: #64777d;
    line-height: 1.5;
}

.dashboard-today-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 11px;
    color: #66787d;
    font-size: .82rem;
}

.dashboard-today-meta b {
    color: #102a33;
}

.dashboard-daily-track {
    max-width: 620px;
    margin-top: 11px;
}

.dashboard-today-actions {
    display: grid;
    gap: 8px;
    min-width: 190px;
}

.dashboard-today-primary,
.dashboard-today-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 11px 15px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 850;
}

.dashboard-today-primary {
    background: #0f8b82;
    color: #fff;
    box-shadow: 0 10px 22px rgba(15, 139, 130, .22);
}

.dashboard-today-secondary {
    border: 1px solid #dceae8;
    background: rgba(255,255,255,.78);
    color: #466268;
    font-size: .83rem;
}

.dashboard-week-strip {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 118, 110, .10);
}

.dashboard-week-day {
    display: grid;
    place-items: center;
    gap: 3px;
    width: 38px;
    min-width: 38px;
    height: 48px;
    border: 1px solid #e3eceb;
    border-radius: 12px;
    background: rgba(255,255,255,.7);
    color: #9aa9ac;
}

.dashboard-week-day small {
    font-size: .64rem;
    font-weight: 900;
}

.dashboard-week-day b {
    font-size: .82rem;
}

.dashboard-week-day.is-active {
    border-color: rgba(15, 139, 130, .2);
    background: #eaf8f5;
    color: #0f766e;
}

.dashboard-week-day.is-today {
    box-shadow: inset 0 0 0 2px rgba(108, 76, 241, .16);
}

.dashboard-week-strip em {
    margin-left: 6px;
    color: #718287;
    font-size: .78rem;
    font-style: normal;
}

@media (max-width: 860px) {
    .dashboard-today-focus {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dashboard-today-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .dashboard-today-focus {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
        border-left-width: 5px;
        border-radius: 22px;
    }

    .dashboard-today-progress {
        width: 92px;
        height: 92px;
    }

    .dashboard-today-progress strong {
        font-size: 1.4rem;
    }

    .dashboard-today-actions {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .dashboard-week-strip {
        overflow-x: auto;
        margin-inline: -2px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .dashboard-week-strip::-webkit-scrollbar {
        display: none;
    }

    .dashboard-week-strip em {
        min-width: 180px;
    }
}


.today-recommended {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(15, 118, 110, .16);
    border-left: 6px solid #0f8b82;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff 0%, #f3fbf9 100%);
    box-shadow: 0 12px 30px rgba(15, 60, 67, .06);
}

.today-recommended.is-revision {
    border-color: rgba(217, 119, 6, .2);
    border-left-color: #d97706;
    background: linear-gradient(135deg, #fff 0%, #fff8e8 100%);
}

.today-recommended.is-complete {
    border-color: rgba(22, 163, 74, .2);
    border-left-color: #16a34a;
    background: linear-gradient(135deg, #fff 0%, #effcf3 100%);
}

.today-recommended-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #e8f7f3;
    color: #0f766e;
    font-size: 1.25rem;
    font-weight: 900;
}

.today-recommended h2 {
    margin: 3px 0 5px;
    color: #102a33;
    font-size: 1.2rem;
}

.today-recommended p {
    margin: 0;
    color: #64777d;
    line-height: 1.45;
}

.today-recommended > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #0f8b82;
    color: #fff;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 9px 20px rgba(15, 139, 130, .18);
}

@media (max-width: 680px) {
    .today-recommended {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 14px;
    }

    .today-recommended > a {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   V24.450 — Prononciation & audio
   -------------------------------------------------------------------------- */
.recording-status {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
    padding: .8rem 1rem;
    border: 1px solid #f2c7c7;
    border-radius: 14px;
    background: #fff8f8;
}

.recording-status[hidden] {
    display: none;
}

.recording-timer {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.microphone-button.is-recording {
    background: linear-gradient(135deg, #bd3434, #df5656);
    box-shadow: 0 13px 28px rgba(189, 52, 52, .24);
}

.microphone-button.is-recording .microphone-icon {
    animation: pronunciationMicPulse 1.15s ease-in-out infinite;
}

.pronunciation-listen-actions .button.is-speaking,
.recording-preview .button.is-speaking {
    outline: 3px solid rgba(15, 148, 136, .16);
}

.pronunciation-validation-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.pronunciation-validation-modal[hidden] {
    display: none;
}

.pronunciation-validation-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 35, .58);
    backdrop-filter: blur(5px);
}

.pronunciation-validation-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    max-height: min(760px, calc(100dvh - 36px));
    overflow: auto;
    overscroll-behavior: contain;
    padding: 30px 24px 24px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(8, 34, 39, .28);
    text-align: center;
}

.pronunciation-validation-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: #edf5f3;
    color: #40565a;
    font-size: 1.45rem;
    cursor: pointer;
}

.pronunciation-validation-fox {
    width: 112px;
    height: 112px;
    object-fit: contain;
    margin-bottom: 8px;
}

.pronunciation-validation-dialog h2 {
    margin: 8px 0 10px;
}

.pronunciation-validation-dialog p {
    margin: 0 auto 20px;
    color: #60757a;
    line-height: 1.55;
}

.pronunciation-validation-audio {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
    padding: 16px;
    border: 1px solid #dfe9e7;
    border-radius: 18px;
    background: #f7fbfa;
    text-align: left;
}

.pronunciation-validation-audio[hidden] {
    display: none;
}

.pronunciation-validation-audio audio {
    display: block;
    width: 100%;
    min-height: 44px;
}

.pronunciation-validation-actions {
    display: grid;
    gap: 10px;
}

body.pronunciation-modal-open {
    overflow: hidden;
}

.pronunciation-session-complete {
    display: grid;
    width: 100%;
    gap: 7px;
    padding: 16px;
    border: 1px solid #bfe4dc;
    border-radius: 16px;
    background: #effaf7;
}

.pronunciation-session-complete > strong {
    font-size: 1.05rem;
}

.pronunciation-session-complete > span {
    color: #63777c;
}

.pronunciation-session-complete > div {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 6px;
}

.oral-attempt-score.is-manual {
    border-radius: 24px;
    background: #f3f7ff;
    border-color: #dce7fa;
    color: #315b8c;
}

.oral-attempt-score.is-manual strong {
    font-size: 1.05rem;
}

@keyframes pronunciationMicPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
}

@media (max-width: 720px) {
    .recording-status {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .recording-timer {
        width: 100%;
        margin-left: 1.7rem;
    }

    .pronunciation-validation-dialog {
        padding: 24px 16px 18px;
        border-radius: 22px;
    }

    .pronunciation-validation-actions .button,
    .pronunciation-session-complete .button {
        width: 100%;
        min-height: 50px;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .microphone-button.is-recording .microphone-icon {
        animation: none;
    }
}


/* V24.480 — IA conversationnelle */
.ai-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 30px 34px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 85% 10%, rgba(255, 209, 102, .27), transparent 35%),
        linear-gradient(135deg, #0d766f, #0d4d53);
    color: #fff;
}
.ai-hero-copy { max-width: 700px; }
.ai-hero h1 { margin: 7px 0 10px; color: #fff; font-size: clamp(2rem, 5vw, 3.25rem); }
.ai-hero p { margin: 0; color: #d6efeb; line-height: 1.65; }
.ai-hero-mascot { width: min(220px, 30vw); max-height: 190px; object-fit: contain; }
.ai-usage-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }
.ai-usage-pills span { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.12); color: #e8f8f5; font-size: .82rem; }
.ai-usage-pills strong { color: #fff; }
.ai-blocked-card, .ai-intro-card, .ai-information { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 26px; border-radius: 25px; }
.ai-blocked-icon { font-size: 2.3rem; }
.ai-blocked-card h2, .ai-intro-card h2, .ai-information h2 { margin: 5px 0 7px; }
.ai-blocked-card p, .ai-intro-card p, .ai-information p { margin: 0; color: #64777d; line-height: 1.6; }
.ai-daily-limit { display: grid; min-width: 170px; padding: 16px; border-radius: 19px; background: #edf9f6; text-align: center; }
.ai-daily-limit strong { color: #0f766e; font-size: 2rem; }
.ai-daily-limit span { color: #66807f; font-size: .8rem; }
.ai-scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 20px 0; }
.ai-scenario-card { display: grid; align-content: start; gap: 9px; padding: 23px; border-radius: 24px; }
.ai-scenario-card h3 { margin: 0; color: #102f35; font-size: 1.25rem; }
.ai-scenario-card p { min-height: 72px; margin: 0; color: #687b80; line-height: 1.5; }
.ai-scenario-card .button { margin-top: auto; }
.ai-scenario-card form { display: grid; }
.ai-scenario-card form + form { margin-top: 2px; }
.ai-scenario-card .button.secondary { width: 100%; }
.ai-message-listen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 6px 9px;
    border: 0;
    border-radius: 10px;
    background: #eef8f6;
    color: #0f766e;
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    font-weight: 850;
}
.ai-message-listen:hover { background: #dff2ed; }
.ai-history-section { margin-top: 24px; }
.ai-history-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.ai-history-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
}
.ai-history-card > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.ai-history-card small { color: #0f766e; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.ai-history-card strong { color: #102f35; }
.ai-history-card em { color: #7a8b8f; font-size: .76rem; font-style: normal; }
.ai-history-card b { margin-left: auto; }
.ai-history-icon { display: grid; flex: 0 0 auto; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: #eef8f6; font-size: 1.3rem; }

.ai-scenario-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 4px; border-radius: 19px; background: #eef8f6; font-size: 1.65rem; }
.ai-day-limit { padding: 18px; text-align: center; }
.ai-chat-layout { display: grid; grid-template-columns: minmax(230px,.7fr) minmax(0,2fr); gap: 18px; align-items: start; }
.ai-chat-sidebar { position: sticky; top: 18px; display: grid; gap: 10px; padding: 23px; border-radius: 24px; }
.ai-chat-sidebar h2 { margin: 0; }
.ai-chat-sidebar p { margin: 0; color: #687b80; line-height: 1.55; }
.ai-back-link { color: #0f766e; font-weight: 800; text-decoration: none; }
.ai-session-meter { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 13px; border-radius: 16px; background: #eff8f6; }
.ai-session-meter strong { color: #0f766e; font-size: 1.3rem; }
.ai-privacy-note { padding-top: 12px; border-top: 1px solid #e7eeee; font-size: .78rem; }
.ai-chat-panel { overflow: hidden; padding: 0; border-radius: 26px; }
.ai-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 22px; border-bottom: 1px solid #e7eeee; }
.ai-chat-header h2 { margin: 4px 0 0; }
.ai-messages { display: grid; gap: 16px; min-height: 370px; max-height: 600px; overflow-y: auto; padding: 22px; background: #f7fbfa; }
.ai-message { display: flex; gap: 11px; max-width: 84%; }
.ai-message.user { justify-self: end; flex-direction: row-reverse; }
.ai-message-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: #fff; box-shadow: 0 5px 14px rgba(15,60,67,.08); font-weight: 900; }
.ai-message-body { padding: 13px 15px; border-radius: 7px 18px 18px; background: #fff; box-shadow: 0 8px 20px rgba(15,60,67,.06); }
.ai-message.user .ai-message-body { border-radius: 18px 7px 18px 18px; background: #0f766e; color: #fff; }
.ai-message-body strong { font-size: .75rem; }
.ai-message-body p { margin: 5px 0 0; line-height: 1.55; }
.ai-correction { margin-top: 10px; padding: 9px 10px; border-radius: 12px; background: #fff8df; color: #665323; font-size: .83rem; line-height: 1.45; }
.ai-correction span { display: block; margin-bottom: 3px; color: #9a7013; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.ai-typing { padding: 10px 22px; color: #6b7e82; font-size: .84rem; }
.ai-typing span { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; background: #0f766e; animation: aiTyping .9s infinite alternate; }
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
.ai-composer { display: grid; gap: 9px; padding: 20px 22px; border-top: 1px solid #e7eeee; }
.ai-composer label { color: #102f35; font-weight: 850; }
.ai-composer textarea { width: 100%; resize: vertical; }
.ai-composer-actions { display: flex; align-items: center; gap: 10px; }
.ai-composer-actions [data-ai-send] { margin-left: auto; }
.ai-status { color: #6c7e82; font-size: .8rem; }
.ai-limit-message { margin: 0 22px 20px; padding: 14px; border-radius: 15px; background: #fff6df; color: #795d1d; text-align: center; }
.ai-information { margin-top: 20px; }
@keyframes aiTyping { to { transform: translateY(-4px); opacity: .45; } }
@media (max-width: 900px) {
    .ai-scenario-grid,
    .ai-history-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ai-chat-layout { grid-template-columns: 1fr; }
    .ai-chat-sidebar { position: static; }
}
@media (max-width: 620px) {
    .ai-hero { padding: 25px 20px; }
    .ai-hero-mascot { display: none; }
    .ai-intro-card, .ai-information, .ai-blocked-card { align-items: flex-start; flex-direction: column; }
    .ai-daily-limit { width: 100%; }
    .ai-scenario-grid,
    .ai-history-grid { grid-template-columns: 1fr; }
    .ai-scenario-card p { min-height: 0; }
    .ai-message { max-width: 95%; }
    .ai-chat-header { align-items: flex-start; flex-direction: column; }
    .ai-composer-actions { align-items: stretch; flex-direction: column; }
    .ai-composer-actions [data-ai-send] { width: 100%; margin-left: 0; }
}

/* V24.480 — IA pédagogique adaptative */
.ai-level-card {
    display: grid;
    gap: 3px;
    margin-top: 4px;
    padding: 13px 14px;
    border: 1px solid #dceeea;
    border-radius: 17px;
    background: linear-gradient(135deg, #f2fbf8, #fffdf4);
}
.ai-level-card span { color: #61797b; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.ai-level-card strong { color: #0f766e; }
.ai-level-card small { color: #738488; font-size: .76rem; }
.ai-selected-level {
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef8f6;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 850;
}
.ai-composer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #6e8084;
    font-size: .76rem;
}
.ai-composer-meta strong { color: #0f766e; }
.ai-composer-meta [data-ai-character-count] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ai-composer-meta [data-ai-character-count].is-near-limit { color: #9a7013; font-weight: 850; }
@media (max-width: 620px) {
    .ai-composer-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
}