/* =================================================================
   JIFUNZE SWAHILI — Design system
   ================================================================= 
   Aesthetic : "Warm editorial East African"
   - Typography : Fraunces (display, serif) + DM Sans (body)
   - Colors    : Deep teal (Indian Ocean) + warm terracotta (savanna sunset)
   - Texture   : Subtle organic, paper-like, generous whitespace
   - Mobile-first, progressive enhancement
   ================================================================= */


/* =================================================================
   1. DESIGN TOKENS (CSS variables)
   ================================================================= */
:root {
    /* === Colors === */
    --color-ink:           #1a1410;          /* Quasi noir avec note brune */
    --color-ink-soft:      #3d342c;
    --color-ink-muted:     #6b5d52;
    --color-ink-subtle:    #9e8f82;

    --color-cream:         #fdf8f3;          /* Background principal */
    --color-cream-soft:    #f5ecde;
    --color-cream-deep:    #ebe0cb;

    --color-paper:         #ffffff;
    --color-paper-tint:    #faf4ea;

    --color-teal:          #0f766e;          /* Primary - profondeur océan */
    --color-teal-dark:     #115e59;
    --color-teal-light:    #14b8a6;
    --color-teal-pale:     #ccfbf1;

    --color-terracotta:    #c2410c;          /* Accent - terre, coucher de soleil */
    --color-terracotta-dark: #9a3412;
    --color-terracotta-light: #f97316;
    --color-terracotta-pale: #fed7aa;

    --color-success:       #15803d;
    --color-error:         #b91c1c;
    --color-warning:       #b45309;
    --color-info:          #1d4ed8;

    /* === Typography === */
    --font-display:   'Fraunces', Georgia, serif;
    --font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;

    /* Type scale (modular, base 16px) */
    --text-xs:    0.75rem;     /* 12px */
    --text-sm:    0.875rem;    /* 14px */
    --text-base:  1rem;        /* 16px */
    --text-lg:    1.125rem;    /* 18px */
    --text-xl:    1.25rem;     /* 20px */
    --text-2xl:   1.5rem;      /* 24px */
    --text-3xl:   1.875rem;    /* 30px */
    --text-4xl:   2.25rem;     /* 36px */
    --text-5xl:   3rem;        /* 48px */
    --text-6xl:   3.75rem;     /* 60px */

    /* === Spacing (4px scale) === */
    --space-1:   0.25rem;    /* 4px */
    --space-2:   0.5rem;     /* 8px */
    --space-3:   0.75rem;    /* 12px */
    --space-4:   1rem;       /* 16px */
    --space-5:   1.25rem;    /* 20px */
    --space-6:   1.5rem;     /* 24px */
    --space-8:   2rem;       /* 32px */
    --space-10:  2.5rem;     /* 40px */
    --space-12:  3rem;       /* 48px */
    --space-16:  4rem;       /* 64px */
    --space-20:  5rem;       /* 80px */
    --space-24:  6rem;       /* 96px */

    /* === Borders & radius === */
    --radius-sm:    0.375rem;
    --radius-md:    0.625rem;
    --radius-lg:    1rem;
    --radius-xl:    1.5rem;
    --radius-2xl:   2rem;
    --radius-full:  9999px;

    --border-width: 1px;
    --border-color: rgba(26, 20, 16, 0.08);
    --border-color-strong: rgba(26, 20, 16, 0.16);

    /* === Shadows (warm undertone, not pure black) === */
    --shadow-xs:   0 1px 2px rgba(26, 20, 16, 0.04);
    --shadow-sm:   0 2px 4px rgba(26, 20, 16, 0.06), 0 1px 2px rgba(26, 20, 16, 0.04);
    --shadow-md:   0 4px 12px rgba(26, 20, 16, 0.08), 0 2px 4px rgba(26, 20, 16, 0.04);
    --shadow-lg:   0 10px 30px rgba(26, 20, 16, 0.10), 0 4px 6px rgba(26, 20, 16, 0.05);
    --shadow-xl:   0 20px 50px rgba(26, 20, 16, 0.12), 0 8px 16px rgba(26, 20, 16, 0.06);

    /* === Transitions === */
    --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:    220ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === Layout === */
    --container-max:   1200px;
    --topbar-height:   64px;
}


/* =================================================================
   2. RESET & BASE
   ================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-cream);
    min-height: 100vh;
    /* Texture papier subtile (radial gradient pour donner du relief) */
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(194, 65, 12, 0.025) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(15, 118, 110, 0.025) 0%, transparent 50%);
    background-attachment: fixed;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

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

button {
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: var(--color-teal);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-teal-dark);
}

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-ink);
}

p {
    margin: 0;
}


/* =================================================================
   3. LAYOUT
   ================================================================= */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

@media (min-width: 768px) {
    .container { padding: var(--space-8) var(--space-6); }
}

@media (min-width: 1024px) {
    .container { padding: var(--space-10) var(--space-8); }
}

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

.section {
    margin-bottom: var(--space-12);
}

.section-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.section-title__hint {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-muted);
    background: var(--color-cream-deep);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}


/* =================================================================
   4. TOPBAR (header navigation)
   ================================================================= */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--topbar-height);
    background: rgba(253, 248, 243, 0.85);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--border-color);
}

.topbar__inner {
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .topbar__inner { padding: 0 var(--space-6); gap: var(--space-6); }
}

.topbar__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--color-ink);
    letter-spacing: -0.02em;
}

.topbar__logo:hover {
    color: var(--color-teal);
}

.topbar__logo-icon {
    font-size: 1.5em;
    line-height: 1;
}

.topbar__nav {
    display: none;
    flex: 1;
    gap: var(--space-1);
}

@media (min-width: 1024px) {
    .topbar__nav { display: flex; }
}

.topbar__link {
    color: var(--color-ink-soft);
    font-weight: 500;
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.topbar__link:hover {
    color: var(--color-teal);
    background: var(--color-teal-pale);
}

.topbar__link--admin {
    color: var(--color-terracotta);
}

.topbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Sélecteur de langue */
.lang-switcher {
    display: flex;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    padding: 2px;
}

.lang-switcher__btn {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-ink-muted);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.lang-switcher__btn.is-active {
    background: var(--color-ink);
    color: var(--color-cream);
}

.lang-switcher__btn:hover:not(.is-active) {
    color: var(--color-ink);
}

/* Menu utilisateur */
.user-menu {
    position: relative;
}

.user-menu__btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    transition: background var(--transition-fast);
}

.user-menu__btn:hover { background: var(--color-cream-soft); }

.user-menu__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-teal), var(--color-teal-dark));
    color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-sm);
}

.user-menu__name {
    display: none;
    font-size: var(--text-sm);
    font-weight: 500;
}

@media (min-width: 640px) {
    .user-menu__name { display: inline; }
}

.user-menu__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    z-index: 100;
    animation: dropdown-in var(--transition-base);
}

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.user-menu__item {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.user-menu__item:hover {
    background: var(--color-cream-soft);
    color: var(--color-ink);
}

.user-menu__item--danger { color: var(--color-terracotta); }
.user-menu__item--danger:hover { background: var(--color-terracotta-pale); color: var(--color-terracotta-dark); }

.user-menu__sep {
    height: 1px;
    background: var(--border-color);
    border: none;
    margin: var(--space-1) 0;
}


/* =================================================================
   5. BUTTONS
   ================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}

.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--primary {
    background: var(--color-ink);
    color: var(--color-cream);
}

.btn--primary:hover {
    background: var(--color-teal-dark);
    color: var(--color-cream);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn--secondary {
    background: var(--color-terracotta);
    color: var(--color-cream);
}

.btn--secondary:hover {
    background: var(--color-terracotta-dark);
    color: var(--color-cream);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--outline {
    background: transparent;
    border-color: var(--color-ink);
    color: var(--color-ink);
}

.btn--outline:hover {
    background: var(--color-ink);
    color: var(--color-cream);
}

.btn--ghost {
    background: transparent;
    color: var(--color-ink-soft);
}

.btn--ghost:hover {
    background: var(--color-cream-deep);
    color: var(--color-ink);
}

.btn--sm  { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.btn--lg  { padding: var(--space-4) var(--space-6); font-size: var(--text-base); }
.btn--block { display: flex; width: 100%; }


/* =================================================================
   6. FORMS
   ================================================================= */
.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-soft);
    letter-spacing: 0.01em;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-ink);
    background: var(--color-paper);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    outline: 1px solid var(--border-color);
    outline-offset: -1px;
    transition: all var(--transition-fast);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
    outline-color: var(--border-color-strong);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-teal);
    outline-color: var(--color-teal);
    outline-offset: -1px;
}

.form-input::placeholder { color: var(--color-ink-subtle); }

.form-hint {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

.form-group--checkbox {
    margin-bottom: var(--space-6);
}

.form-checkbox {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-teal);
    flex-shrink: 0;
}

.form-checkbox a { font-weight: 600; }


/* =================================================================
   7. AUTH PAGES (login, register)
   ================================================================= */
.page-auth {
    background: var(--color-cream);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    /* Motif organique en arrière-plan */
    background-image: 
        radial-gradient(ellipse at top left, var(--color-terracotta-pale) 0%, transparent 40%),
        radial-gradient(ellipse at bottom right, var(--color-teal-pale) 0%, transparent 50%);
}

.page-auth .main { display: contents; }

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--color-paper);
    border-radius: var(--radius-2xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--shadow-xl);
    position: relative;
}

.auth-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--color-terracotta-pale), transparent 50%, var(--color-teal-pale));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.auth-card__brand {
    text-align: center;
    margin-bottom: var(--space-8);
}

.auth-card__brand-icon {
    font-size: 3rem;
    line-height: 1;
}

.auth-card__brand-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-top: var(--space-3);
    letter-spacing: -0.03em;
}

.auth-card__brand-tagline {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    font-style: italic;
}

.auth-card__title {
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: var(--space-6);
}

.auth-card__errors {
    background: rgba(185, 28, 28, 0.08);
    border-left: 3px solid var(--color-error);
    color: var(--color-error);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
}

.auth-card__errors p:not(:last-child) {
    margin-bottom: var(--space-1);
}

.auth-card__divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-6) 0;
}

.auth-card__alt {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.auth-card__alt p { margin-bottom: var(--space-2); }

.auth-card__link {
    font-weight: 600;
    color: var(--color-teal);
}

.auth-card__link--muted {
    color: var(--color-ink-muted);
    text-decoration: underline;
    text-decoration-color: var(--border-color-strong);
    text-underline-offset: 3px;
}


/* =================================================================
   8. DASHBOARD (index.php)
   ================================================================= */

/* Hero */
.hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-color);
}

@media (min-width: 768px) {
    .hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-8);
    }
}

.hero__greeting { flex: 1; }

.hero__wave {
    font-size: var(--text-3xl);
    display: inline-block;
    animation: wave 2.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

@keyframes wave {
    0%, 60%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(14deg); }
    50% { transform: rotate(-4deg); }
}

.hero__title {
    font-size: var(--text-3xl);
    margin-top: var(--space-3);
    font-weight: 600;
}

@media (min-width: 768px) {
    .hero__title { font-size: var(--text-4xl); }
}

.hero__name {
    color: var(--color-teal);
    font-style: italic;
}

.hero__subtitle {
    margin-top: var(--space-3);
    font-size: var(--text-lg);
    color: var(--color-ink-muted);
}

.hero__subtitle strong {
    color: var(--color-terracotta);
    font-weight: 600;
}

.hero__streak {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-paper);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    min-width: 140px;
}

.streak-flame { font-size: var(--text-4xl); }

.streak-number {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1;
}

.streak-label {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-align: center;
    margin-top: var(--space-1);
}

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
    }
}

.stat-card {
    background: var(--color-paper);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-card__icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.stat-card__value {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1;
    color: var(--color-ink);
    letter-spacing: -0.04em;
}

.stat-card__label {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.stat-card--primary {
    background: var(--color-ink);
    color: var(--color-cream);
}
.stat-card--primary .stat-card__value { color: var(--color-cream); }
.stat-card--primary .stat-card__label { color: var(--color-cream-soft); }

.stat-card--accent {
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-terracotta-dark));
    color: var(--color-cream);
}
.stat-card--accent .stat-card__value { color: var(--color-cream); }
.stat-card--accent .stat-card__label { color: var(--color-cream-soft); }

/* CTA Card (révisions du jour) */
.cta-card {
    background: linear-gradient(135deg, var(--color-teal), var(--color-teal-dark));
    color: var(--color-cream);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-bottom: var(--space-10);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.cta-card__content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.cta-card__badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.cta-card__title {
    font-size: var(--text-3xl);
    color: var(--color-cream);
    margin-bottom: var(--space-2);
    font-weight: 700;
}

.cta-card__text {
    color: rgba(253, 248, 243, 0.85);
    font-size: var(--text-base);
    margin-bottom: var(--space-5);
}

.cta-card .btn--primary {
    background: var(--color-cream);
    color: var(--color-teal-dark);
}

.cta-card .btn--primary:hover {
    background: var(--color-terracotta-pale);
    color: var(--color-terracotta-dark);
}

.cta-card__visual {
    display: none;
    flex-shrink: 0;
    width: 180px;
    color: var(--color-cream);
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .cta-card__visual { display: block; }
}

/* Onboarding cards */
.onboarding-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .onboarding-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

.onboarding-card {
    display: block;
    background: var(--color-paper);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    border: 1px solid var(--border-color);
}

.onboarding-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-teal-pale);
    color: var(--color-ink);
}

.onboarding-card__emoji {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-3);
    line-height: 1;
}

.onboarding-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.onboarding-card p {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.onboarding-card__time {
    display: inline-block;
    font-size: var(--text-xs);
    color: var(--color-ink-subtle);
    font-weight: 500;
    background: var(--color-cream-deep);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.onboarding-card--accent {
    background: linear-gradient(135deg, var(--color-terracotta-pale), var(--color-paper));
}

/* Module grid */
.module-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .module-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .module-grid { grid-template-columns: repeat(3, 1fr); }
}

.module-card {
    display: flex;
    flex-direction: column;
    background: var(--color-paper);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    border: 1px solid var(--border-color);
    min-height: 180px;
}

.module-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-ink);
    border-color: var(--color-teal-pale);
}

.module-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.module-card__icon { font-size: var(--text-2xl); }

.module-card__level {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-teal);
    background: var(--color-teal-pale);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.module-card__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    font-weight: 600;
    line-height: 1.3;
}

.module-card__desc {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: var(--space-4);
    flex: 1;
}

.module-card__meta,
.module-card__progress,
.module-card__time {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

.module-card__progress {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--color-teal);
}

/* Progress bar */
.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: var(--space-3) 0 var(--space-2);
}

.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal), var(--color-teal-light));
    border-radius: inherit;
    transition: width var(--transition-slow);
}

/* Badges grid */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .badges-grid { grid-template-columns: repeat(4, 1fr); }
}

.badge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.badge-card__icon {
    font-size: var(--text-3xl);
    line-height: 1;
}

.badge-card__name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-ink-soft);
}

/* Quick actions */
.quick-actions__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .quick-actions__grid { grid-template-columns: repeat(6, 1fr); }
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    color: var(--color-ink-soft);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-base);
    text-align: center;
}

.quick-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-teal);
}

.quick-action__icon { font-size: var(--text-2xl); }

.quick-action__label {
    font-size: var(--text-xs);
    font-weight: 600;
}


/* =================================================================
   9. FLASH MESSAGES
   ================================================================= */
.flashes {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
    margin-top: var(--space-4);
}

.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    border-left: 3px solid;
    animation: flash-in 300ms ease-out;
}

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.flash--success {
    background: rgba(21, 128, 61, 0.08);
    color: var(--color-success);
    border-color: var(--color-success);
}

.flash--error {
    background: rgba(185, 28, 28, 0.08);
    color: var(--color-error);
    border-color: var(--color-error);
}

.flash--warning {
    background: rgba(180, 83, 9, 0.08);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.flash--info {
    background: rgba(29, 78, 216, 0.08);
    color: var(--color-info);
    border-color: var(--color-info);
}


/* =================================================================
   10. FOOTER
   ================================================================= */
.footer {
    background: var(--color-ink);
    color: var(--color-cream-soft);
    padding: var(--space-12) 0 var(--space-8);
    margin-top: var(--space-20);
}

.footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 0 var(--space-6);
    }
}

.footer__brand strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-cream);
    margin-bottom: var(--space-1);
}

.footer__tagline {
    font-size: var(--text-sm);
    color: var(--color-ink-subtle);
    font-style: italic;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    justify-content: center;
}

.footer__link {
    color: var(--color-cream-soft);
    font-size: var(--text-sm);
    font-weight: 500;
}

.footer__link:hover { color: var(--color-terracotta-light); }

.footer__meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-ink-subtle);
}


/* =================================================================
   11. UTILITIES
   ================================================================= */
.text-center { text-align: center; }
.text-muted  { color: var(--color-ink-muted); }
.text-sm     { font-size: var(--text-sm); }
.text-lg     { font-size: var(--text-lg); }
.mt-4        { margin-top: var(--space-4); }
.mb-4        { margin-bottom: var(--space-4); }
.hidden      { display: none !important; }

/* Préfère les motions réduites */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =================================================================
   12. PAGE HEADER (titres de page)
   ================================================================= */
.page-header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.page-header__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-2);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.page-header__subtitle {
    font-size: var(--text-lg);
    color: var(--color-ink-muted);
    max-width: 60ch;
}


/* =================================================================
   13. DICTIONNAIRE
   ================================================================= */

/* Barre de recherche */
.dict-search {
    margin-bottom: var(--space-6);
}

.dict-search__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-paper);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dict-search__bar:focus-within {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 4px var(--color-teal-pale);
}

.dict-search__icon {
    font-size: var(--text-lg);
    color: var(--color-ink-muted);
}

.dict-search__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-base);
    padding: var(--space-2) 0;
    font-family: var(--font-body);
}

.dict-search__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    color: var(--color-ink-muted);
    background: var(--color-cream-deep);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.dict-search__clear:hover {
    background: var(--color-terracotta);
    color: var(--color-cream);
}

/* Filtres */
.dict-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.form-select--inline {
    width: auto;
    min-width: 140px;
    flex: 0 0 auto;
}

/* Compteur résultats */
.dict-results__meta {
    margin-bottom: var(--space-5);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.dict-results__meta strong {
    color: var(--color-ink);
}

/* Grille de mots */
.word-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
    .word-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .word-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Word card */
.word-card {
    display: flex;
    flex-direction: column;
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: all var(--transition-base);
    position: relative;
}

.word-card:hover {
    border-color: var(--color-teal-pale);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.word-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-3);
}

.word-card__meta {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.word-card__level {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-teal-pale);
    color: var(--color-teal-dark);
}
.word-card__level.level-a1 { background: #d1fae5; color: #166534; }
.word-card__level.level-a2 { background: #cffafe; color: #155e75; }
.word-card__level.level-b1 { background: #fef3c7; color: #92400e; }
.word-card__level.level-b2 { background: #fed7aa; color: #9a3412; }
.word-card__level.level-c1 { background: #fce7f3; color: #9d174d; }

.word-card__cat {
    font-size: var(--text-xl);
    line-height: 1;
}

.word-card__learning {
    font-size: var(--text-lg);
    line-height: 1;
}

.word-card__main {
    margin-bottom: var(--space-3);
}

.word-card__sw {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-ink);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.word-card__speak {
    font-size: 0.85em;
    padding: var(--space-1);
    border-radius: var(--radius-full);
    opacity: 0.5;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    cursor: pointer;
}

.word-card__speak:hover {
    opacity: 1;
    background: var(--color-teal-pale);
}

.word-card__fr {
    font-size: var(--text-lg);
    color: var(--color-ink-soft);
    font-style: italic;
}

.word-card__tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.tag {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-cream-deep);
    color: var(--color-ink-muted);
}

.tag--class { 
    background: rgba(15, 118, 110, 0.08);
    color: var(--color-teal-dark);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.tag--type {
    background: rgba(194, 65, 12, 0.08);
    color: var(--color-terracotta-dark);
}

.word-card__example {
    padding: var(--space-3);
    background: var(--color-cream-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    border-left: 3px solid var(--color-teal-pale);
}

.word-card__example-sw {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--color-ink);
    font-style: italic;
    margin-bottom: var(--space-1);
}

.word-card__example-fr {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.word-card__note {
    font-size: var(--text-xs);
    color: var(--color-ink-soft);
    background: var(--color-cream);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.word-card__actions {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.word-card__learn-btn {
    background: var(--color-teal-pale);
    color: var(--color-teal-dark);
    transition: all var(--transition-fast);
}

.word-card__learn-btn:hover {
    background: var(--color-teal);
    color: var(--color-cream);
}

.word-card__status {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-success);
    padding: var(--space-2) var(--space-3);
    background: rgba(21, 128, 61, 0.1);
    border-radius: var(--radius-md);
}


/* =================================================================
   14. PAGINATION
   ================================================================= */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-10) 0;
    padding: var(--space-5);
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--color-ink-soft);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.pagination__link:hover {
    background: var(--color-teal);
    color: var(--color-cream);
    border-color: var(--color-teal);
}

.pagination__info {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.pagination__info strong {
    color: var(--color-ink);
    font-size: var(--text-base);
}


/* =================================================================
   15. EMPTY STATE
   ================================================================= */
.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-4);
    color: var(--color-ink-muted);
}

.empty-state__icon {
    font-size: var(--text-6xl);
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.empty-state__title {
    font-size: var(--text-2xl);
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}

.empty-state__text {
    margin-bottom: var(--space-6);
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
}


/* =================================================================
   16. PAGES D'ERREUR (404, 403, 500)
   ================================================================= */
.page-error .main {
    min-height: calc(100vh - var(--topbar-height) - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-page {
    text-align: center;
    padding: var(--space-16) var(--space-4);
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.error-page__code {
    font-family: var(--font-display);
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-terracotta);
    letter-spacing: -0.05em;
    margin-bottom: var(--space-4);
    text-shadow: 4px 4px 0 var(--color-terracotta-pale);
}

.error-page__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
    color: var(--color-ink);
}

.error-page__text {
    font-size: var(--text-lg);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-8);
    line-height: 1.6;
}

.error-page__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.error-page__decoration {
    position: absolute;
    bottom: -40px;
    right: -20px;
    font-size: 6rem;
    opacity: 0.15;
    pointer-events: none;
    transform: rotate(-15deg);
}


/* =================================================================
   17. BACK-OFFICE ADMIN
   ================================================================= */

/* En-tête admin */
.page-admin {
    background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-cream-soft) 100%);
}

.admin-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-ink);
    color: var(--color-cream);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 2px solid var(--color-ink);
    flex-wrap: wrap;
}

.admin-header__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Liens rapides */
.admin-quick {
    margin-bottom: var(--space-10);
}

.admin-quick__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .admin-quick__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .admin-quick__grid { grid-template-columns: repeat(3, 1fr); }
}

.admin-link {
    display: flex;
    flex-direction: column;
    background: var(--color-paper);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    color: var(--color-ink);
    transition: all var(--transition-base);
    position: relative;
}

.admin-link:hover {
    border-color: var(--color-teal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-ink);
}

.admin-link--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.admin-link--disabled::after {
    content: 'Bientôt';
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-ink-subtle);
    background: var(--color-cream-deep);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.admin-link__icon {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

.admin-link__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.admin-link__desc {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-3);
}

.admin-link__count {
    margin-top: auto;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Section générique */
.admin-section {
    margin-bottom: var(--space-10);
}

/* Charts */
.admin-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 768px) {
    .admin-charts { grid-template-columns: repeat(2, 1fr); }
}

.chart-card {
    background: var(--color-paper);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.chart-card__title {
    font-size: var(--text-base);
    color: var(--color-ink-soft);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chart-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.chart-bar {
    display: grid;
    grid-template-columns: 90px 1fr 60px;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.chart-bar__label {
    color: var(--color-ink-soft);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-bar__track {
    height: 10px;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.chart-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal), var(--color-teal-light));
    border-radius: inherit;
    transition: width var(--transition-slow);
}

.chart-bar__fill--accent {
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-terracotta-light));
}

.chart-bar__value {
    text-align: right;
    font-weight: 600;
    color: var(--color-ink);
}

/* Filtres admin */
.admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.admin-filters .form-input {
    flex: 1;
    min-width: 200px;
}

.admin-results-info {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-4);
}

/* Tableau admin */
.admin-table-wrap {
    overflow-x: auto;
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.admin-table th,
.admin-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.admin-table th {
    background: var(--color-cream-soft);
    font-weight: 600;
    color: var(--color-ink-soft);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    z-index: 1;
}

.admin-table tbody tr {
    transition: background var(--transition-fast);
}

.admin-table tbody tr:hover {
    background: var(--color-cream-soft);
}

.admin-table tr.is-inactive {
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.02);
}

.admin-table .col-id {
    width: 60px;
    color: var(--color-ink-muted);
}

.admin-table .col-actions {
    width: 100px;
    text-align: right;
    white-space: nowrap;
}

.admin-table .col-actions .btn {
    margin-left: 2px;
    padding: var(--space-1) var(--space-2);
}

/* Tags */
.tag--level {
    background: var(--color-teal-pale);
    color: var(--color-teal-dark);
    font-weight: 700;
    font-size: 0.7rem;
}

.tag--admin {
    background: var(--color-terracotta);
    color: var(--color-cream);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}

.tag--me {
    background: var(--color-ink);
    color: var(--color-cream);
    font-weight: 700;
    font-size: 0.65rem;
}

/* Status */
.status {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
}

.status--ok { 
    background: rgba(21, 128, 61, 0.12); 
    color: var(--color-success); 
}

.status--ko { 
    background: rgba(185, 28, 28, 0.12); 
    color: var(--color-error); 
}

/* Formulaire admin */
.admin-form {
    background: var(--color-paper);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
}

.admin-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

@media (min-width: 1024px) {
    .admin-form__grid {
        grid-template-columns: 2fr 1fr;
        gap: var(--space-8);
    }
}

.admin-form__main {
    min-width: 0;
}

.admin-form__side {
    padding: var(--space-5);
    background: var(--color-cream-soft);
    border-radius: var(--radius-md);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .form-row { grid-template-columns: 1fr 1fr; }
}

.admin-form__actions {
    display: flex;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

/* Bouton danger */
.btn--danger {
    background: var(--color-error);
    color: var(--color-cream);
    margin-left: auto;
}

.btn--danger:hover {
    background: #991b1b;
    color: var(--color-cream);
}


/* =================================================================
   18. PAGE RÉVISION SRS
   ================================================================= */

/* Empty states (pas de cartes, ou tout révisé) */
.review-empty {
    text-align: center;
    padding: var(--space-16) var(--space-4);
    max-width: 600px;
    margin: 0 auto;
}

.review-empty__icon {
    font-size: 5rem;
    margin-bottom: var(--space-4);
}

.review-empty__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
    color: var(--color-ink);
}

.review-empty__text {
    color: var(--color-ink-muted);
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.review-empty__hint {
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-ink-subtle);
    font-style: italic;
}

.review-empty--done {
    background: linear-gradient(135deg, var(--color-teal-pale), var(--color-terracotta-pale));
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
}

.review-empty__stats {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin: var(--space-6) 0;
}

.review-empty__stats div {
    text-align: center;
}

.review-empty__stats strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    color: var(--color-teal);
    font-weight: 700;
}

.review-empty__stats small {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.review-empty__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* Header de session de révision */
.review-header {
    position: sticky;
    top: var(--topbar-height);
    z-index: 10;
    background: var(--color-cream);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-color);
}

.review-header__back {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-muted);
    font-size: var(--text-lg);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.review-header__back:hover {
    background: var(--color-terracotta);
    color: var(--color-cream);
}

.review-header__progress {
    flex: 1;
    min-width: 0;
}

.review-progress {
    height: 8px;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.review-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal), var(--color-teal-light));
    border-radius: inherit;
    transition: width var(--transition-slow);
}

.review-header__count {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-weight: 600;
}

.review-header__streak {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--color-terracotta);
}

/* Zone principale */
.review-main {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-4) 0;
}

.review-loading {
    text-align: center;
    padding: var(--space-16);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-cream-deep);
    border-top-color: var(--color-teal);
    border-radius: 50%;
    margin: 0 auto var(--space-4);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Flip card (la carte de révision) */
.flip-card {
    background: var(--color-paper);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8) var(--space-6);
    margin-bottom: var(--space-6);
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border: 1px solid var(--border-color);
    animation: cardEnter 0.3s ease-out;
}

@keyframes cardEnter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.flip-card__face {
    text-align: center;
    position: relative;
}

.flip-card__level {
    position: absolute;
    top: -8px;
    left: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}
.flip-card__level.level-a1 { background: #d1fae5; color: #166534; }
.flip-card__level.level-a2 { background: #cffafe; color: #155e75; }
.flip-card__level.level-b1 { background: #fef3c7; color: #92400e; }
.flip-card__level.level-b2 { background: #fed7aa; color: #9a3412; }
.flip-card__level.level-c1 { background: #fce7f3; color: #9d174d; }

.flip-card__speak {
    position: absolute;
    top: -8px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    font-size: var(--text-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.flip-card__speak:hover {
    background: var(--color-teal);
    color: white;
}

.flip-card__word {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    margin: var(--space-6) 0 var(--space-3);
    color: var(--color-ink);
    letter-spacing: -0.02em;
}

.flip-card__class {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-teal);
    margin-bottom: var(--space-6);
}

.flip-card__hint {
    color: var(--color-ink-muted);
    font-style: italic;
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
}

.flip-card__reveal {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.flip-card__reveal kbd {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-family: var(--font-mono);
}

.flip-card__word-back-sw {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--color-ink-muted);
    margin-bottom: var(--space-3);
    font-style: italic;
}

.flip-card__sep {
    width: 60px;
    height: 2px;
    background: var(--color-teal-pale);
    border: none;
    margin: var(--space-4) auto;
}

.flip-card__word-fr {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-5);
    letter-spacing: -0.02em;
}

.flip-card__example {
    margin: var(--space-5) auto;
    padding: var(--space-4);
    background: var(--color-cream-soft);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-teal-pale);
    max-width: 500px;
    text-align: left;
}

.flip-card__example-sw {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-ink);
    margin-bottom: var(--space-1);
}

.flip-card__example-fr {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.flip-card__note {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-cream);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    text-align: left;
    line-height: 1.5;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Boutons d'évaluation */
.review-rating {
    text-align: center;
    animation: ratingEnter 0.4s ease-out 0.1s both;
}

@keyframes ratingEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.review-rating__hint {
    color: var(--color-ink-muted);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.review-rating__buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .review-rating__buttons {
        grid-template-columns: repeat(4, 1fr);
    }
}

.rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
    background: var(--color-paper);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.rating-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.rating-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rating-btn__emoji {
    font-size: var(--text-2xl);
    line-height: 1;
}

.rating-btn__label {
    font-weight: 600;
    font-size: var(--text-sm);
}

.rating-btn__interval {
    font-size: 0.7rem;
    color: var(--color-ink-muted);
}

.rating-btn kbd {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    background: var(--color-cream-deep);
    color: var(--color-ink-muted);
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
}

.rating-btn--again:hover  { border-color: #b91c1c; background: rgba(185, 28, 28, 0.05); }
.rating-btn--hard:hover   { border-color: #d97706; background: rgba(217, 119, 6, 0.05); }
.rating-btn--good:hover   { border-color: var(--color-teal); background: rgba(15, 118, 110, 0.05); }
.rating-btn--easy:hover   { border-color: #15803d; background: rgba(21, 128, 61, 0.05); }

/* Écran final */
.review-done {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    background: linear-gradient(135deg, var(--color-teal-pale), var(--color-terracotta-pale));
    border-radius: var(--radius-2xl);
    max-width: 600px;
    margin: var(--space-8) auto;
    animation: doneEnter 0.5s ease-out;
}

@keyframes doneEnter {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

.review-done__emoji {
    font-size: 5rem;
    margin-bottom: var(--space-3);
    animation: bounce 1s ease-out;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.review-done__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-6);
}

.review-done__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.review-done__stats .stat {
    background: var(--color-paper);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.review-done__stats .stat__value {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-teal);
    line-height: 1;
}

.review-done__stats .stat__label {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-top: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.review-done__hint {
    color: var(--color-ink-soft);
    margin-bottom: var(--space-5);
    font-style: italic;
}

.review-done__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}


/* =================================================================
   19. DIALOGUES (liste + lecteur)
   ================================================================= */

/* Container narrow pour le lecteur */
.container--narrow {
    max-width: 760px;
}

/* ===================================================
   LISTE DES DIALOGUES
   =================================================== */

/* Stats user */
.dialogues-stats {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--color-teal-pale), var(--color-cream));
    border-radius: var(--radius-lg);
}

.dialogues-stats__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.dialogues-stats__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    line-height: 1;
}

.dialogues-stats__label {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

/* Filtres */
.dialogues-filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dialogues-filters__label {
    font-weight: 600;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}

/* Liste */
.dialogue-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dialogue-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    text-decoration: none;
    color: var(--color-ink);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.dialogue-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-teal-pale);
    color: var(--color-ink);
}

.dialogue-card.is-practiced {
    border-left: 4px solid var(--color-success);
}

.dialogue-card__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: var(--color-cream-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-3xl);
}

.dialogue-card__main {
    flex: 1;
    min-width: 0;
}

.dialogue-card__head {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}

.dialogue-card__level {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.dialogue-card__done {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-success);
    background: rgba(21, 128, 61, 0.1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.dialogue-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

.dialogue-card__context {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.dialogue-card__meta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

.dialogue-card__xp { color: var(--color-terracotta-dark); font-weight: 600; }

.dialogue-card__arrow {
    flex-shrink: 0;
    font-size: var(--text-2xl);
    color: var(--color-ink-subtle);
    transition: transform var(--transition-fast);
}

.dialogue-card:hover .dialogue-card__arrow {
    transform: translateX(4px);
    color: var(--color-teal);
}

/* ===================================================
   LECTEUR DE DIALOGUE
   =================================================== */

.dialogue-header {
    background: var(--color-paper);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.dialogue-header__back {
    display: inline-block;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    text-decoration: none;
}

.dialogue-header__back:hover { color: var(--color-teal); }

.dialogue-header__main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.dialogue-header__cat {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.dialogue-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
    color: var(--color-ink);
}

.dialogue-title__sw {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-teal);
    margin-bottom: var(--space-4);
}

.dialogue-context {
    background: var(--color-cream-soft);
    border-left: 3px solid var(--color-teal);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
    font-size: var(--text-sm);
}

.dialogue-context p { color: var(--color-ink-soft); line-height: 1.5; }
.dialogue-context__sw { 
    font-style: italic; 
    color: var(--color-teal-dark); 
    margin-top: var(--space-2); 
}

.dialogue-roles {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

.dialogue-role {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-cream-soft);
    border-radius: var(--radius-md);
    flex: 1;
}

.dialogue-role__letter {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
    color: white;
}

.dialogue-role--a .dialogue-role__letter { background: var(--color-teal); }
.dialogue-role--b .dialogue-role__letter { background: var(--color-terracotta); }

.dialogue-role__name {
    font-weight: 600;
    font-size: var(--text-sm);
}

/* Contrôles */
.dialogue-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-3);
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: var(--topbar-height);
    z-index: 5;
}

.mode-tabs {
    display: flex;
    background: var(--color-cream-deep);
    border-radius: var(--radius-md);
    padding: 2px;
    gap: 2px;
}

.mode-tab {
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mode-tab.is-active {
    background: var(--color-ink);
    color: var(--color-cream);
}

.dialogue-controls__actions {
    display: flex;
    gap: var(--space-2);
}

.dialogue-controls__actions button[aria-pressed="false"] {
    opacity: 0.6;
}

/* Scène (chat bubbles) */
.dialogue-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.bubble {
    display: flex;
    gap: var(--space-3);
    max-width: 90%;
    cursor: pointer;
    transition: opacity var(--transition-base);
}

.bubble--a { align-self: flex-start; }
.bubble--b { align-self: flex-end; flex-direction: row-reverse; }

.bubble__avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-1);
}

.bubble__letter {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.bubble--a .bubble__letter { background: var(--color-teal); }
.bubble--b .bubble__letter { background: var(--color-terracotta); }

.bubble__name {
    font-size: 0.65rem;
    color: var(--color-ink-muted);
    text-align: center;
    max-width: 60px;
    line-height: 1.2;
}

.bubble__content {
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    position: relative;
    transition: all var(--transition-base);
}

.bubble--a .bubble__content {
    border-top-left-radius: var(--space-1);
    background: linear-gradient(180deg, var(--color-paper), var(--color-cream));
}

.bubble--b .bubble__content {
    border-top-right-radius: var(--space-1);
    background: linear-gradient(180deg, var(--color-paper), #fff7ed);
}

.bubble.is-seen .bubble__content {
    opacity: 0.75;
}

.bubble.is-playing .bubble__content {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-pale);
    transform: scale(1.02);
}

.bubble__speak {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    cursor: pointer;
    font-size: var(--text-base);
    opacity: 0.6;
    transition: all var(--transition-fast);
}

.bubble__speak:hover {
    opacity: 1;
    background: var(--color-teal);
    color: white;
}

.bubble__sw {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1.4;
    padding-right: var(--space-8);
    margin-bottom: var(--space-2);
    transition: opacity var(--transition-base), filter var(--transition-base);
}

.bubble__sw.is-hidden {
    filter: blur(8px);
    user-select: none;
}

.bubble__fr {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    font-style: italic;
}

body.hide-fr .bubble__fr { display: none; }

.bubble__note {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-cream-soft);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--color-ink-soft);
    line-height: 1.5;
}

.bubble__my-turn {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-terracotta);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
    transition: all var(--transition-fast);
}

.bubble__my-turn small {
    display: block;
    opacity: 0.85;
    font-size: 0.7rem;
    margin-top: 2px;
    font-weight: 400;
}

.bubble__my-turn:hover {
    background: var(--color-terracotta-dark);
}

/* Bouton fin de dialogue */
.dialogue-finish {
    text-align: center;
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--color-cream-soft), var(--color-cream));
    border-radius: var(--radius-xl);
}

.dialogue-finish .btn { min-width: 280px; }
.dialogue-finish .btn small { 
    display: inline-block; 
    margin-left: var(--space-2); 
    opacity: 0.85; 
    font-weight: 400; 
}

.dialogue-finish__hint {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-3);
}

.btn--success {
    background: var(--color-success);
    color: white;
}

/* Historique */
.dialogue-history {
    background: var(--color-paper);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-top: var(--space-6);
}

.dialogue-history h3 {
    margin-bottom: var(--space-4);
    font-size: var(--text-lg);
    color: var(--color-ink);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.history-table th,
.history-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.history-table th {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* =================================================================
   20. PROFIL UTILISATEUR
   ================================================================= */

.profile-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: linear-gradient(135deg, var(--color-teal), var(--color-teal-dark));
    color: var(--color-cream);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-lg);
}

.profile-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.profile-card__info { flex: 1; min-width: 0; }

.profile-card__name {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
    color: var(--color-cream);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.profile-card__email {
    font-size: var(--text-sm);
    color: rgba(253, 248, 243, 0.85);
    margin-bottom: var(--space-2);
}

.profile-card__since {
    font-size: var(--text-xs);
    color: rgba(253, 248, 243, 0.7);
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
    .profile-stats { grid-template-columns: repeat(4, 1fr); }
}

.profile-stat {
    background: var(--color-paper);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.profile-stat__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1;
}

.profile-stat__label {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-top: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Sections de profil */
.profile-section {
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.profile-section__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.profile-section--danger {
    border-left: 4px solid var(--color-terracotta);
}

.profile-form__actions {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

.badge-card small {
    display: block;
    font-size: 0.65rem;
    color: var(--color-ink-muted);
    margin-top: var(--space-1);
}


/* =================================================================
   21. STATISTIQUES
   ================================================================= */

/* Graphique d'activité 7 jours */
.activity-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
    background: var(--color-paper);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    height: 220px;
}

.activity-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.activity-bar__value {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-teal-dark);
    min-height: 1.2em;
}

.activity-bar__track {
    flex: 1;
    width: 100%;
    max-width: 60px;
    background: var(--color-cream-deep);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    position: relative;
    min-height: 4px;
}

.activity-bar__fill {
    width: 100%;
    background: linear-gradient(180deg, var(--color-teal-light), var(--color-teal));
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    min-height: 4px;
    transition: height var(--transition-slow);
}

.activity-bar__label {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-weight: 600;
}

/* Mastery bars (niveau de maîtrise des mots) */
.mastery-bars {
    background: var(--color-paper);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mastery-bar {
    display: grid;
    grid-template-columns: 40px 120px 1fr 60px;
    align-items: center;
    gap: var(--space-3);
}

.mastery-bar__icon { font-size: var(--text-xl); }

.mastery-bar__label {
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    font-weight: 500;
}

.mastery-bar__track {
    height: 14px;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mastery-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal), var(--color-teal-light));
    transition: width var(--transition-slow);
}

.mastery-bar__count {
    text-align: right;
    font-weight: 600;
    color: var(--color-ink);
    font-size: var(--text-sm);
}

/* CTA hint */
.section-title__hint--cta {
    background: var(--color-terracotta);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.section-title__hint--cta:hover {
    background: var(--color-terracotta-dark);
    transform: translateY(-1px);
}

/* Accuracy ring */
.accuracy-card {
    background: var(--color-paper);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.accuracy-card__ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        var(--color-teal) 0% calc(var(--pct) * 1%), 
        var(--color-cream-deep) calc(var(--pct) * 1%) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.accuracy-card__ring-inner {
    width: 110px;
    height: 110px;
    background: var(--color-paper);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accuracy-card__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-teal-dark);
}

.accuracy-card__details {
    flex: 1;
    min-width: 200px;
}

.accuracy-card__details p {
    margin-bottom: var(--space-2);
    color: var(--color-ink-soft);
}

.text-success { color: var(--color-success); }

/* Mots difficiles */
.hardest-words {
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.hardest-word {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    gap: var(--space-3);
    flex-wrap: wrap;
}

.hardest-word:last-child { border-bottom: none; }

.hardest-word__main strong {
    font-family: var(--font-display);
    color: var(--color-ink);
}

.hardest-word__main em {
    color: var(--color-ink-muted);
    font-style: italic;
    margin-left: var(--space-2);
}

.hardest-word__stats {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.hardest-word__accuracy {
    font-weight: 700;
    color: var(--color-warning);
    font-family: var(--font-mono);
}

.hardest-word__accuracy.is-low { color: var(--color-error); }

.hardest-word__attempts {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
}

.dialogue-card--compact .dialogue-card__icon { display: none; }


/* =================================================================
   22. SETTINGS
   ================================================================= */

.settings-form { /* hérite des styles forms */ }

.settings-section {
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.settings-section__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    color: var(--color-ink);
}

.settings-section__hint {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-4);
}

.settings-section--info {
    background: var(--color-cream-soft);
    box-shadow: none;
    border: 1px dashed var(--border-color-strong);
}

/* Range + Number combined input */
.form-input-with-range {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.form-input-with-range input[type="range"] {
    flex: 1;
    accent-color: var(--color-teal);
}

.form-input--small {
    width: 80px;
    text-align: center;
}

.form-input-with-range span {
    font-weight: 600;
    color: var(--color-ink-muted);
}

/* Radio group */
.settings-radio-group {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.settings-radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-cream-soft);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
}

.settings-radio:hover {
    background: var(--color-cream-deep);
}

.settings-radio input[type="radio"] {
    accent-color: var(--color-teal);
}

.settings-radio:has(input:checked) {
    background: var(--color-teal-pale);
    border-color: var(--color-teal);
}

/* Toggle switch */
.settings-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    cursor: pointer;
}

.settings-toggle input[type="checkbox"] {
    display: none;
}

.settings-toggle__switch {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 28px;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}

.settings-toggle__switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.settings-toggle input:checked + .settings-toggle__switch {
    background: var(--color-teal);
}

.settings-toggle input:checked + .settings-toggle__switch::after {
    transform: translateX(20px);
}

.settings-toggle__label strong {
    display: block;
    color: var(--color-ink);
    margin-bottom: var(--space-1);
}

.settings-toggle__label small {
    display: block;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Form actions de settings */
.settings-form__actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

/* Info dictionary list */
.settings-info {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-2) var(--space-4);
}

.settings-info dt {
    font-weight: 600;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}

.settings-info dd {
    color: var(--color-ink);
    font-size: var(--text-sm);
}


/* =================================================================
   23. TUTEUR IA — CHAT
   ================================================================= */

/* Intro de section */
.section-intro {
    color: var(--color-ink-muted);
    margin-bottom: var(--space-5);
    max-width: 70ch;
    line-height: 1.6;
}

/* Grille de scénarios */
.scenario-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 768px) { .scenario-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .scenario-grid { grid-template-columns: repeat(3, 1fr); } }

.scenario-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    cursor: pointer;
    transition: all var(--transition-base);
    font: inherit;
    color: inherit;
    width: 100%;
}

.scenario-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-teal-pale);
}

.scenario-card:disabled {
    opacity: 0.7;
    cursor: wait;
}

.scenario-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.scenario-card__level {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.scenario-card__xp {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-terracotta);
    background: var(--color-terracotta-pale);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.scenario-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.scenario-card__title-sw {
    font-style: italic;
    color: var(--color-teal);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.scenario-card__desc {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: var(--space-4);
    flex: 1;
}

.scenario-card__cta {
    align-self: flex-start;
    padding: var(--space-2) var(--space-4);
    background: var(--color-ink);
    color: var(--color-cream);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.scenario-card:hover .scenario-card__cta {
    background: var(--color-teal);
}

/* Historique chat */
.chat-history {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

@media (min-width: 768px) { .chat-history { grid-template-columns: repeat(2, 1fr); } }

.chat-history-card {
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-decoration: none;
    color: var(--color-ink);
    transition: all var(--transition-base);
}

.chat-history-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-ink);
}

.chat-history-card__head {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.chat-history-card__mode,
.chat-header__mode {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.mode-guided      { background: rgba(15, 118, 110, 0.1); color: var(--color-teal-dark); }
.mode-free_themed { background: rgba(194, 65, 12, 0.1); color: var(--color-terracotta-dark); }
.mode-coach       { background: rgba(180, 83, 9, 0.1); color: var(--color-warning); }

.chat-history-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.chat-history-card__meta {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ===========================================
   CHAT LIVE
   =========================================== */

.page-chat--active .container {
    padding-bottom: 160px;  /* place pour l'input fixe */
}

.chat-header {
    background: var(--color-paper);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    position: sticky;
    top: var(--topbar-height);
    z-index: 5;
    background: rgba(253, 248, 243, 0.95);
    backdrop-filter: blur(12px);
}

.chat-header__back {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}

.chat-header__back:hover { color: var(--color-teal); }

.chat-header__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.chat-header__title h1 {
    font-size: var(--text-base);
    margin: 0;
    font-weight: 600;
}

/* Stage : zone de messages */
.chat-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    min-height: 60vh;
}

/* Message individuel */
.chat-msg {
    display: flex;
    gap: var(--space-3);
    max-width: 85%;
    animation: msgEnter 0.3s ease-out;
}

@keyframes msgEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg--assistant { align-self: flex-start; }

.chat-msg__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    background: var(--color-cream-deep);
}

.chat-msg--user .chat-msg__avatar {
    background: var(--color-teal);
}

.chat-msg--assistant .chat-msg__avatar {
    background: var(--color-terracotta-pale);
}

.chat-msg__content {
    position: relative;
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    min-width: 80px;
}

.chat-msg--user .chat-msg__content {
    background: var(--color-teal);
    color: var(--color-cream);
    border-color: var(--color-teal);
    border-top-right-radius: var(--space-1);
}

.chat-msg--assistant .chat-msg__content {
    background: linear-gradient(180deg, var(--color-paper), var(--color-cream));
    border-top-left-radius: var(--space-1);
}

.chat-msg__body {
    font-size: var(--text-base);
    line-height: 1.6;
    word-wrap: break-word;
}

.chat-msg__body strong { font-weight: 600; }
.chat-msg__body ul { margin: var(--space-2) 0; padding-left: var(--space-5); }
.chat-msg__body li { margin-bottom: var(--space-1); }

.chat-msg--user .chat-msg__body { color: var(--color-cream); }

.chat-msg__speak {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    width: 28px;
    height: 28px;
    border: none;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: var(--text-sm);
    opacity: 0.6;
    transition: all var(--transition-fast);
}

.chat-msg__speak:hover {
    opacity: 1;
    background: var(--color-teal);
    color: white;
}

.chat-msg__time {
    display: block;
    font-size: 0.65rem;
    color: var(--color-ink-muted);
    margin-top: var(--space-1);
    text-align: right;
}

.chat-msg--user .chat-msg__time { color: rgba(253, 248, 243, 0.7); }

/* Correction (intégrée dans un message) */
.chat-correction {
    background: var(--color-terracotta-pale);
    border-left: 3px solid var(--color-terracotta);
    padding: var(--space-3);
    margin: var(--space-3) 0;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-ink);
}

.chat-correction strong { color: var(--color-terracotta-dark); }

/* Scène (multi-perso) */
.chat-scene {
    display: inline-block;
    background: var(--color-ink);
    color: var(--color-cream);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    letter-spacing: 0.03em;
}

/* Indicateur "Claude réfléchit" */
.chat-typing .chat-msg__content {
    padding: var(--space-3) var(--space-4);
}

.chat-typing__dots {
    display: flex;
    gap: var(--space-1);
}

.chat-typing__dots span {
    width: 8px;
    height: 8px;
    background: var(--color-ink-muted);
    border-radius: 50%;
    animation: typing 1.2s infinite ease-in-out;
}

.chat-typing__dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* Input de chat (sticky bottom) */
.chat-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-paper);
    border-top: 1px solid var(--border-color);
    padding: var(--space-3) var(--space-4);
    display: flex;
    gap: var(--space-2);
    z-index: 20;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}

.chat-input textarea {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    resize: none;
    line-height: 1.5;
    background: var(--color-cream-soft);
    transition: border-color var(--transition-fast);
    outline: none;
    min-height: 48px;
    max-height: 160px;
}

.chat-input textarea:focus {
    border-color: var(--color-teal);
    background: var(--color-paper);
}

.chat-input button {
    align-self: flex-end;
    height: 48px;
}

.chat-input__hint {
    position: fixed;
    bottom: 76px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.7rem;
    color: var(--color-ink-subtle);
    padding: 2px;
    pointer-events: none;
}

@media (max-width: 640px) {
    .chat-input__hint { display: none; }
}


/* =================================================================
   23. CHAT TUTEUR IA
   ================================================================= */

/* Grille des scénarios */
.scenario-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .scenario-grid { grid-template-columns: repeat(2, 1fr); }
}

.scenario-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    transition: all var(--transition-base);
    width: 100%;
    font-family: inherit;
}

.scenario-card:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-teal-pale);
}

.scenario-card.is-loading {
    opacity: 0.6;
    cursor: wait;
}

.scenario-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.scenario-card__xp {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-terracotta-dark);
    background: var(--color-terracotta-pale);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.scenario-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--color-ink);
}

.scenario-card__title-sw {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-teal);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.scenario-card__desc {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    line-height: 1.5;
    margin-bottom: var(--space-3);
}

.scenario-card__mode {
    margin-top: auto;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Liste des conversations récentes */
.conv-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.conv-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--color-ink);
    text-decoration: none;
    transition: all var(--transition-fast);
    gap: var(--space-3);
}

.conv-card:hover {
    border-color: var(--color-teal-pale);
    background: var(--color-cream-soft);
    color: var(--color-ink);
}

.conv-card.is-ended {
    opacity: 0.75;
}

.conv-card__main {
    flex: 1;
    min-width: 0;
}

.conv-card__main strong { display: block; margin-bottom: 2px; }
.conv-card__main small  { color: var(--color-ink-muted); font-size: var(--text-xs); }

/* ===== Chat conversation ===== */

.page-chat {
    background: var(--color-cream-soft);
}

.chat-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: var(--topbar-height);
    z-index: 5;
}

.chat-header__back {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-muted);
    text-decoration: none;
    flex-shrink: 0;
}

.chat-header__back:hover { background: var(--color-terracotta); color: white; }

.chat-header__main {
    flex: 1;
    min-width: 0;
}

.chat-header__title {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0;
}

.chat-header__meta {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

.chat-main {
    background: var(--color-paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: calc(100vh - 280px);
    scroll-behavior: smooth;
}

/* Bulles de message */
.chat-msg {
    display: flex;
    gap: var(--space-3);
    max-width: 90%;
    animation: msgIn 0.3s ease-out;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg--user .chat-msg__body {
    background: var(--color-teal);
    color: var(--color-cream);
    border-radius: var(--radius-lg) var(--radius-lg) var(--space-1) var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    line-height: 1.5;
}

.chat-msg--assistant {
    align-self: flex-start;
}

.chat-msg__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-terracotta-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.chat-msg--assistant .chat-msg__body {
    background: var(--color-cream-soft);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--space-1);
    padding: var(--space-4);
    max-width: 100%;
}

/* Sections d'un message assistant */
.chat-msg__sw {
    position: relative;
    margin-bottom: var(--space-2);
}

.chat-msg__sw p {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-ink);
    line-height: 1.5;
    padding-right: var(--space-8);
    margin: 0;
}

.chat-msg__speak {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-paper);
    cursor: pointer;
    opacity: 0.6;
    transition: all var(--transition-fast);
}

.chat-msg__speak:hover {
    opacity: 1;
    background: var(--color-teal);
    color: white;
}

.chat-msg__fr {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    font-style: italic;
    padding-top: var(--space-2);
    border-top: 1px dashed var(--border-color);
    margin-top: var(--space-2);
}

.chat-msg__corrections {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(217, 119, 6, 0.08);
    border-left: 3px solid #d97706;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.chat-msg__corrections strong {
    color: #92400e;
    display: block;
    margin-bottom: var(--space-2);
}

.chat-msg__corrections div {
    color: var(--color-ink-soft);
    line-height: 1.5;
}

.chat-msg__hint {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: rgba(15, 118, 110, 0.08);
    border-left: 3px solid var(--color-teal);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
}

.chat-msg--error .chat-msg__body {
    background: rgba(185, 28, 28, 0.08);
    color: var(--color-error);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

/* Typing indicator */
.chat-typing__body {
    padding: var(--space-4) !important;
    display: flex;
    gap: 4px;
    align-items: center;
}

.chat-typing__body span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-ink-muted);
    animation: typingDot 1.4s infinite;
}

.chat-typing__body span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing__body span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* Formulaire d'envoi */
.chat-input-form {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    border-top: 1px solid var(--border-color);
    background: var(--color-paper);
}

.chat-input-form textarea {
    flex: 1;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-base);
    resize: none;
    transition: border-color var(--transition-fast);
}

.chat-input-form textarea:focus {
    outline: none;
    border-color: var(--color-teal);
}

.chat-input-form button {
    align-self: stretch;
    white-space: nowrap;
}

.chat-ended {
    padding: var(--space-5);
    text-align: center;
    color: var(--color-ink-muted);
    border-top: 1px solid var(--border-color);
}

.chat-ended a { font-weight: 600; }



/* =================================================================
   23. CHAT / TUTEUR IA
   ================================================================= */

/* === Conversation libre === */
.chat-free {
    background: linear-gradient(135deg, var(--color-teal-pale), var(--color-cream));
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

.chat-free__form {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.chat-free__form input { flex: 1; }

/* === Grille des scénarios === */
.scenario-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .scenario-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .scenario-grid { grid-template-columns: repeat(3, 1fr); }
}

.scenario-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-paper);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: inherit;
    color: var(--color-ink);
    width: 100%;
    position: relative;
}

.scenario-card:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-teal);
}

.scenario-card:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.scenario-card.is-recommended {
    border-color: var(--color-terracotta);
    background: linear-gradient(180deg, #fff7ed, var(--color-paper));
}

.scenario-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.scenario-card__mode {
    font-size: var(--text-xl);
    line-height: 1;
}

.scenario-card__level {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.scenario-card__badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-terracotta-dark);
    background: var(--color-terracotta-pale);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    margin-left: auto;
}

.scenario-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

.scenario-card__title-sw {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-teal);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.scenario-card__desc {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    flex: 1;
    margin-bottom: var(--space-3);
}

.scenario-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scenario-card__xp {
    color: var(--color-terracotta-dark);
    font-weight: 700;
    font-size: var(--text-sm);
}

.scenario-card__loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    font-weight: 600;
}

/* === Liste des conversations === */
.conv-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.conv-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--color-ink);
    text-decoration: none;
    transition: all var(--transition-base);
}

.conv-item:hover {
    transform: translateX(4px);
    border-color: var(--color-teal-pale);
    color: var(--color-ink);
}

.conv-item.is-active {
    border-left: 4px solid var(--color-teal);
}

.conv-item.is-ended {
    opacity: 0.7;
}

.conv-item__icon {
    font-size: var(--text-2xl);
    flex-shrink: 0;
}

.conv-item__main { flex: 1; min-width: 0; }

.conv-item__title {
    font-weight: 600;
    margin-bottom: var(--space-1);
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.conv-item__meta {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

.conv-item__arrow {
    color: var(--color-ink-subtle);
    font-size: var(--text-lg);
    flex-shrink: 0;
}


/* === INTERFACE DE CHAT ACTIVE === */

.page-chat--active .footer { display: none; }

.chat-interface {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-height));
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-paper);
}

.chat-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-paper);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.chat-header__back {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    color: var(--color-ink-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    font-size: var(--text-sm);
}

.chat-header__back:hover {
    background: var(--color-cream-soft);
    color: var(--color-ink);
}

.chat-header__back span {
    display: none;
}

@media (min-width: 640px) {
    .chat-header__back span { display: inline; }
}

.chat-header__title {
    flex: 1;
    min-width: 0;
}

.chat-header__title h1 {
    font-size: var(--text-lg);
    margin: 0;
    line-height: 1.2;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-header__title small {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
}

/* Zone des messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    scroll-behavior: smooth;
}

.chat-empty {
    text-align: center;
    padding: var(--space-12);
    color: var(--color-ink-muted);
}

.chat-empty__icon {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.chat-msg {
    display: flex;
    animation: msgIn 0.3s ease-out;
    max-width: 85%;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg--assistant {
    align-self: flex-start;
}

.chat-msg__bubble {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    position: relative;
    max-width: 100%;
    word-wrap: break-word;
}

.chat-msg--user .chat-msg__bubble {
    background: var(--color-ink);
    color: var(--color-cream);
    border-bottom-right-radius: var(--space-1);
}

.chat-msg--assistant .chat-msg__bubble {
    background: var(--color-cream-soft);
    color: var(--color-ink);
    border-bottom-left-radius: var(--space-1);
    padding-right: var(--space-10);
}

.chat-msg__content {
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Style spécial pour les notes [entre crochets] : italique + couleur */
.chat-msg--assistant .chat-msg__content {
    /* Le contenu peut contenir des [notes en français] - on peut les styler via JS si besoin */
}

.chat-msg__speak {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-full);
    background: rgba(15, 118, 110, 0.15);
    cursor: pointer;
    font-size: var(--text-sm);
    opacity: 0.7;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-msg__speak:hover {
    opacity: 1;
    background: var(--color-teal);
    color: white;
    transform: scale(1.1);
}

/* Animation thinking */
.chat-msg--thinking .chat-msg__bubble {
    padding: var(--space-4);
}

.chat-thinking-dots {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.chat-thinking-dots span {
    width: 8px;
    height: 8px;
    background: var(--color-teal);
    border-radius: 50%;
    animation: dotPulse 1.4s infinite ease-in-out both;
}

.chat-thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.chat-thinking-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes dotPulse {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* Input zone */
.chat-input {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-paper);
    border-top: 1px solid var(--border-color);
}

.chat-input textarea {
    flex: 1;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-base);
    resize: none;
    min-height: 48px;
    max-height: 200px;
    line-height: 1.4;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.chat-input textarea:focus {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-pale);
}

.chat-input textarea:disabled {
    background: var(--color-cream-soft);
    cursor: not-allowed;
}

#btn-send {
    flex-shrink: 0;
    padding: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    font-size: var(--text-lg);
    align-self: flex-end;
}

.chat-input__hint {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-ink-subtle);
    padding: var(--space-2) var(--space-4);
    background: var(--color-paper);
    margin: 0;
    border-top: 1px solid var(--border-color);
}

.chat-input__hint kbd {
    font-family: var(--font-mono);
    background: var(--color-cream-deep);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
}

.chat-ended {
    text-align: center;
    padding: var(--space-6);
    background: var(--color-cream-soft);
    border-top: 1px solid var(--border-color);
}

.chat-ended p {
    margin-bottom: var(--space-3);
    color: var(--color-ink-muted);
}


/* =================================================================
   24. APPRENDRE (learn.php + module.php)
   ================================================================= */

/* === Stats globales === */
.learn-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    background: var(--color-paper);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
    align-items: center;
}

@media (max-width: 640px) {
    .learn-stats { grid-template-columns: 1fr 1fr; }
    .learn-stat__progress { grid-column: 1 / -1; }
}

.learn-stat {
    text-align: center;
}

.learn-stat__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    line-height: 1;
}

.learn-stat__label {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-top: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.learn-stat__progress {
    text-align: center;
}

.learn-stat__progress small {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

.progress-bar--lg { height: 10px; }

/* === Filtres de niveau === */
.level-filters {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.level-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-paper);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--color-ink-soft);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.level-filter:hover {
    border-color: var(--color-teal);
    color: var(--color-teal);
}

.level-filter.is-active {
    background: var(--color-ink);
    color: var(--color-cream);
    border-color: var(--color-ink);
}

.level-filter__count {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
}

.level-filter:not(.is-active) .level-filter__count {
    background: var(--color-cream-deep);
    color: var(--color-ink-muted);
}

/* === Section par niveau === */
.level-section {
    margin-bottom: var(--space-12);
}

.level-section__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--border-color);
}

.level-section__title {
    font-size: var(--text-2xl);
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.level-section__icon { font-size: var(--text-2xl); }

.level-section__count {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-muted);
    background: var(--color-cream-deep);
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
}

/* === Tuile de module === */
.module-path {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .module-path { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .module-path { grid-template-columns: repeat(3, 1fr); }
}

.module-tile {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--module-color, var(--color-teal));
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    color: var(--color-ink);
    text-decoration: none;
    transition: all var(--transition-base);
    position: relative;
}

.module-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-ink);
}

.module-tile.status-completed,
.module-tile.status-mastered {
    background: linear-gradient(135deg, var(--color-paper) 60%, #d1fae5 100%);
}

.module-tile.status-locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.module-tile__number {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-ink-subtle);
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 2px;
}

.module-tile__icon {
    font-size: var(--text-3xl);
    line-height: 1;
    flex-shrink: 0;
}

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

.module-tile__title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

.module-tile__desc {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.module-tile__progress {
    margin: var(--space-2) 0;
}

.module-tile__progress small {
    display: block;
    text-align: right;
    font-size: 0.65rem;
    color: var(--color-teal);
    font-weight: 600;
    margin-top: 2px;
}

.module-tile__foot {
    display: flex;
    gap: var(--space-3);
    font-size: 0.7rem;
    color: var(--color-ink-muted);
    margin-top: var(--space-2);
}

.module-tile__xp {
    color: var(--color-terracotta-dark);
    font-weight: 600;
}

.module-tile__status {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    font-size: var(--text-base);
}


/* =================================================================
   25. MODULE.PHP (détail d'un module)
   ================================================================= */

.module-header {
    background: var(--color-paper);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border-top: 6px solid var(--module-color, var(--color-teal));
}

.module-header__back {
    display: inline-block;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    text-decoration: none;
}

.module-header__back:hover { color: var(--color-teal); }

.module-header__meta {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--space-4);
}

.module-header__number {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    font-weight: 600;
}

.module-header__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.module-header__icon {
    font-size: var(--text-4xl);
    line-height: 1;
}

.module-header__title-sw {
    font-family: var(--font-display);
    color: var(--color-teal);
    font-style: italic;
    margin-bottom: var(--space-4);
}

.module-header__desc {
    color: var(--color-ink-soft);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.module-objectives {
    background: var(--color-cream-soft);
    border-left: 3px solid var(--color-terracotta);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
}

.module-objectives h3 {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
    color: var(--color-ink);
}

.module-objectives p {
    color: var(--color-ink-soft);
    line-height: 1.5;
    font-size: var(--text-sm);
}

.module-header__meta-row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

.module-header__progress {
    margin-top: var(--space-4);
}

.module-header__progress small {
    display: block;
    text-align: right;
    font-size: var(--text-xs);
    color: var(--color-teal);
    font-weight: 600;
    margin-top: var(--space-2);
}

/* === Leçons réelles === */
.lesson-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.lesson-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    color: var(--color-ink);
    text-decoration: none;
    transition: all var(--transition-base);
}

.lesson-item:hover {
    transform: translateX(4px);
    border-color: var(--color-teal-pale);
    color: var(--color-ink);
}

.lesson-item__number {
    width: 40px;
    height: 40px;
    background: var(--color-cream-soft);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-ink-muted);
    flex-shrink: 0;
}

.lesson-item.status-completed .lesson-item__number,
.lesson-item.status-mastered .lesson-item__number {
    background: var(--color-success);
    color: white;
}

.lesson-item__body { flex: 1; min-width: 0; }

.lesson-item__title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.lesson-type-badge {
    font-size: 0.65rem;
    font-weight: 600;
    background: var(--color-cream-deep);
    color: var(--color-ink-muted);
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lesson-item__desc {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.lesson-item__meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

.lesson-item__arrow {
    color: var(--color-ink-subtle);
    font-size: var(--text-lg);
    flex-shrink: 0;
}

/* === Leçons virtuelles (auto-générées) === */
.virtual-lesson-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.virtual-lesson {
    display: flex;
    gap: var(--space-4);
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    transition: all var(--transition-base);
}

.virtual-lesson:hover {
    border-color: var(--color-teal-pale);
    box-shadow: var(--shadow-sm);
}

.virtual-lesson__number {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-ink-subtle);
    flex-shrink: 0;
    min-width: 40px;
}

.virtual-lesson__icon {
    font-size: var(--text-3xl);
    line-height: 1;
    flex-shrink: 0;
}

.virtual-lesson__body { flex: 1; min-width: 0; }

.virtual-lesson__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.virtual-lesson__count {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    background: var(--color-teal-pale);
    color: var(--color-teal-dark);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.virtual-lesson__desc {
    color: var(--color-ink-muted);
    line-height: 1.5;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.virtual-lesson__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.virtual-lesson__xp {
    color: var(--color-terracotta-dark);
    font-weight: 600;
    font-size: var(--text-sm);
}

/* === Grammaire intégrée === */
.grammar-topics {
    margin: var(--space-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.grammar-topic {
    background: var(--color-cream-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition: all var(--transition-fast);
}

.grammar-topic[open] {
    background: var(--color-paper);
    box-shadow: var(--shadow-sm);
}

.grammar-topic summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.grammar-topic summary::-webkit-details-marker { display: none; }

.grammar-topic summary::before {
    content: '▶';
    font-size: 0.6em;
    color: var(--color-ink-muted);
    margin-right: var(--space-2);
    transition: transform var(--transition-fast);
    display: inline-block;
}

.grammar-topic[open] summary::before {
    transform: rotate(90deg);
}

.grammar-topic summary small {
    color: var(--color-ink-muted);
    font-weight: 400;
}

.grammar-topic__body {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}

.grammar-topic__body p {
    color: var(--color-ink-soft);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.grammar-examples h4 {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
    color: var(--color-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.grammar-example {
    background: var(--color-cream);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    border-left: 3px solid var(--color-teal-pale);
}

.grammar-example strong {
    font-family: var(--font-display);
    display: block;
    margin-bottom: var(--space-1);
}

.grammar-example em {
    color: var(--color-ink-muted);
    font-style: italic;
    display: block;
    font-size: var(--text-sm);
}

.grammar-example small {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-ink-soft);
    font-size: var(--text-xs);
}

/* === Bouton "Module complété" === */
.module-complete {
    background: linear-gradient(135deg, var(--color-cream-soft), var(--color-cream));
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    text-align: center;
    margin-top: var(--space-8);
}

.module-complete p {
    margin-bottom: var(--space-4);
    color: var(--color-ink-soft);
    line-height: 1.5;
}

.module-complete .btn small {
    display: inline-block;
    margin-left: var(--space-2);
    opacity: 0.85;
    font-weight: 400;
}

.module-already-done {
    padding: var(--space-3) var(--space-5);
    background: var(--color-success);
    color: white;
    border-radius: var(--radius-md);
    display: inline-block;
    font-weight: 600;
}


/* =================================================================
   26. LESSON.PHP (lecteur de leçon slide par slide)
   ================================================================= */

body.page-lesson {
    background: var(--color-cream);
}

body.page-lesson .footer { display: none; }

.lesson-player {
    max-width: 720px;
    margin: 0 auto;
    min-height: calc(100vh - var(--topbar-height));
    display: flex;
    flex-direction: column;
}

/* === Header sticky avec progress bar === */
.lesson-player__header {
    position: sticky;
    top: var(--topbar-height);
    z-index: 20;
    background: var(--color-cream);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
}

.lesson-player__back {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-muted);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.lesson-player__back:hover {
    background: var(--color-terracotta);
    color: white;
}

.lesson-player__progress {
    flex: 1;
    min-width: 0;
}

.lesson-progress {
    height: 8px;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.lesson-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal), var(--color-teal-light));
    border-radius: inherit;
    transition: width var(--transition-slow);
}

.lesson-player__count {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-weight: 600;
}

.lesson-player__xp {
    flex-shrink: 0;
    background: var(--color-terracotta-pale);
    color: var(--color-terracotta-dark);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
}

/* === Conteneur main === */
.lesson-player__main {
    flex: 1;
    padding: 0 var(--space-4) var(--space-8);
}

/* === SLIDE générique === */
.lesson-slide {
    background: var(--color-paper);
    border-radius: var(--radius-2xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-sm);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.4s ease-out;
    border: 1px solid var(--border-color);
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.lesson-slide__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.lesson-slide__type-badge {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal);
    background: var(--color-teal-pale);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    letter-spacing: 0.05em;
}

.lesson-slide__counter {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-weight: 600;
}

/* === SLIDE INTRO === */
.lesson-slide--intro,
.lesson-slide--complete {
    text-align: center;
    justify-content: center;
}

.lesson-slide__icon {
    font-size: 4rem;
    margin-bottom: var(--space-4);
    line-height: 1;
}

.lesson-slide__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--color-ink);
}

.lesson-slide__title-sw {
    font-family: var(--font-display);
    color: var(--color-teal);
    font-style: italic;
    margin-bottom: var(--space-4);
    font-size: var(--text-lg);
}

.lesson-slide__intro-text {
    color: var(--color-ink-soft);
    line-height: 1.6;
    margin-bottom: var(--space-6);
    font-size: var(--text-base);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.lesson-intro-meta {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.lesson-intro-meta__item {
    text-align: center;
    background: var(--color-cream-soft);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    min-width: 90px;
}

.lesson-intro-meta__value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    line-height: 1;
}

.lesson-intro-meta__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lesson-slide__hint {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    font-style: italic;
}

.lesson-cta {
    align-self: center;
    margin-top: var(--space-3);
    min-width: 180px;
}

/* === SLIDE VOCABULAIRE / VERBE === */
.slide-vocab,
.slide-verb {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--space-6) 0;
}

.slide-vocab__speak {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    cursor: pointer;
    font-size: var(--text-lg);
    transition: all var(--transition-fast);
}

.slide-vocab__speak:hover {
    background: var(--color-teal);
    color: white;
    transform: scale(1.1);
}

.slide-vocab__word-sw {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.slide-vocab__ipa {
    font-family: var(--font-mono);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-3);
    font-size: var(--text-base);
}

.slide-vocab__type {
    font-size: var(--text-sm);
    color: var(--color-teal);
    text-transform: lowercase;
    margin-bottom: var(--space-4);
    font-weight: 500;
}

.slide-divider {
    width: 80px;
    height: 2px;
    background: var(--color-teal-pale);
    border: none;
    margin: var(--space-4) auto;
}

.slide-vocab__word-fr {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-5);
    letter-spacing: -0.02em;
}

.slide-verb__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-ink-muted);
    margin-bottom: var(--space-1);
    font-weight: 600;
}

.slide-verb__root {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

/* === Bloc exemple === */
.slide-example {
    background: var(--color-cream-soft);
    border-left: 3px solid var(--color-teal-pale);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    text-align: left;
    margin: var(--space-4) auto;
    max-width: 500px;
}

.slide-example__sw {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-ink);
    margin-bottom: var(--space-1);
    line-height: 1.5;
}

.slide-example__fr {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.slide-note {
    background: var(--color-cream);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: var(--space-3) auto 0;
    max-width: 500px;
    text-align: left;
}

/* === SLIDE PHRASE === */
.slide-phrase {
    text-align: center;
    padding: var(--space-6) 0;
    position: relative;
}

.slide-phrase__sw {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-style: italic;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

.slide-phrase__fr {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-ink);
    margin-bottom: var(--space-4);
}

.slide-phrase__ctx {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    max-width: 500px;
    margin: 0 auto;
}

/* === SLIDE DIALOGUE (aperçu) === */
.slide-dialogue {
    text-align: center;
    padding: var(--space-6) 0;
}

.slide-dialogue h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.slide-dialogue__roles {
    background: var(--color-cream-soft);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
    color: var(--color-ink-soft);
}

/* === SLIDE GRAMMAIRE === */
.slide-grammar {
    padding: var(--space-4) 0;
}

.slide-grammar h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
    color: var(--color-ink);
}

.slide-grammar__summary {
    color: var(--color-teal);
    font-style: italic;
    margin-bottom: var(--space-4);
    font-size: var(--text-lg);
}

.slide-grammar__explanation {
    background: var(--color-cream-soft);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-ink-soft);
    line-height: 1.7;
    margin-bottom: var(--space-5);
}

.slide-grammar__explanation strong {
    color: var(--color-teal-dark);
    font-weight: 700;
}

.slide-grammar__examples h3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
    color: var(--color-ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slide-grammar__examples .grammar-example {
    background: var(--color-cream);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
}

.slide-grammar__examples .grammar-example strong {
    font-family: var(--font-display);
    display: block;
    margin: var(--space-1) 0;
}

/* === Navigation bottom === */
.lesson-slide__nav {
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.lesson-slide__nav .btn { min-width: 100px; }
.lesson-slide__nav .btn-add-srs { flex: 1; max-width: 200px; }

.btn--success { background: var(--color-success); color: white; }

/* === Slide final === */
.lesson-complete-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    flex-wrap: wrap;
}

.lesson-complete-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* Responsive */
@media (max-width: 600px) {
    .lesson-slide {
        padding: var(--space-5) var(--space-4);
    }
    .lesson-slide__nav .btn {
        flex: 1;
        min-width: auto;
        font-size: var(--text-sm);
    }
}


/* =================================================================
   27. EXERCISE.PHP (exercices interactifs)
   ================================================================= */

body.page-exercise {
    background: var(--color-cream);
}

body.page-exercise .footer { display: none; }

.exercise-player {
    max-width: 700px;
    margin: 0 auto;
    min-height: calc(100vh - var(--topbar-height));
    display: flex;
    flex-direction: column;
}

/* === Header sticky === */
.exercise-header {
    position: sticky;
    top: var(--topbar-height);
    z-index: 20;
    background: var(--color-cream);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-5);
}

.exercise-header__back {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-muted);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.exercise-header__back:hover {
    background: var(--color-terracotta);
    color: white;
}

.exercise-header__progress {
    flex: 1;
    min-width: 0;
}

.exercise-progress {
    height: 8px;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.exercise-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-terracotta-dark));
    border-radius: inherit;
    transition: width var(--transition-slow);
}

.exercise-header__count {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-weight: 600;
}

.exercise-header__score { flex-shrink: 0; }

.ex-hearts {
    font-size: var(--text-lg);
    letter-spacing: -2px;
}

/* === Main === */
.exercise-main {
    flex: 1;
    padding: 0 var(--space-4) var(--space-8);
}

/* === Card commune === */
.exercise-card {
    background: var(--color-paper);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    min-height: 450px;
    display: flex;
    flex-direction: column;
    animation: cardSlide 0.4s ease-out;
    border: 1px solid var(--border-color);
}

@keyframes cardSlide {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

.exercise-card__icon {
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: var(--space-3);
    line-height: 1;
}

.exercise-card__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
    text-align: center;
    color: var(--color-ink);
}

.exercise-card__intro {
    text-align: center;
    color: var(--color-teal);
    font-style: italic;
    margin-bottom: var(--space-4);
    font-family: var(--font-display);
}

.exercise-card__hint {
    color: var(--color-ink-soft);
    line-height: 1.6;
    margin-bottom: var(--space-5);
    text-align: center;
    font-size: var(--text-sm);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.exercise-card--intro,
.exercise-card--complete {
    justify-content: center;
}

.exercise-card--intro .btn,
.exercise-card--complete .btn {
    align-self: center;
}

/* === Question card === */
.exercise-card__head {
    margin-bottom: var(--space-4);
    text-align: center;
}

.exercise-card__type-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-terracotta-dark);
    background: var(--color-terracotta-pale);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.exercise-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) 0;
}

.exercise-card__foot {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

.exercise-card__foot .btn {
    width: 100%;
    margin-top: var(--space-3);
}

/* === Question text === */
.ex-question-text {
    text-align: center;
    margin-bottom: var(--space-5);
    position: relative;
}

.ex-question-text h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ex-translation {
    color: var(--color-ink-muted);
    font-style: italic;
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

.ex-tts {
    position: absolute;
    top: -8px;
    right: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    cursor: pointer;
    font-size: var(--text-lg);
    transition: all var(--transition-fast);
}

.ex-tts:hover {
    background: var(--color-teal);
    color: white;
    transform: scale(1.1);
}

.ex-instruction {
    text-align: center;
    color: var(--color-ink-muted);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

/* === QCM options === */
.ex-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ex-option {
    padding: var(--space-4) var(--space-5);
    background: var(--color-paper);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-ink);
    text-align: left;
    transition: all var(--transition-fast);
    line-height: 1.4;
}

.ex-option:hover:not(:disabled) {
    border-color: var(--color-teal);
    background: var(--color-teal-pale);
    transform: translateY(-1px);
}

.ex-option.is-selected {
    border-color: var(--color-teal);
    background: var(--color-teal-pale);
    font-weight: 600;
}

.ex-option.is-correct {
    border-color: var(--color-success);
    background: #d1fae5;
    color: #065f46;
    font-weight: 600;
}

.ex-option.is-wrong {
    border-color: var(--color-error);
    background: #fee2e2;
    color: #991b1b;
}

.ex-option:disabled {
    cursor: default;
}

/* === Input === */
.ex-input-wrap {
    margin-top: var(--space-3);
}

.ex-input {
    width: 100%;
    padding: var(--space-4);
    border: 2px solid var(--border-color-strong);
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    text-align: center;
    outline: none;
    transition: all var(--transition-fast);
}

.ex-input:focus {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 4px var(--color-teal-pale);
}

.ex-input:disabled {
    background: var(--color-cream-soft);
}

.ex-hint {
    display: block;
    margin-top: var(--space-2);
    text-align: center;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

/* === Listen card === */
.ex-listen-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.ex-big-tts {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-teal), var(--color-teal-dark));
    color: white;
    border: none;
    font-size: 3rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    gap: var(--space-1);
}

.ex-big-tts small {
    font-size: 0.7rem;
    opacity: 0.85;
    font-weight: 400;
}

.ex-big-tts:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.ex-big-tts:active {
    transform: scale(0.98);
}

.ex-translation-toggle {
    text-align: center;
    margin-top: var(--space-2);
}

.ex-translation-toggle summary {
    cursor: pointer;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    list-style: none;
}

.ex-translation-toggle summary::before {
    content: '💡 ';
}

.ex-translation-toggle p {
    margin-top: var(--space-2);
    color: var(--color-ink-soft);
    font-style: italic;
}

/* === Matching === */
.ex-matching {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.ex-matching__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ex-match-item {
    padding: var(--space-3);
    background: var(--color-paper);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm);
    text-align: center;
    transition: all var(--transition-fast);
}

.ex-match-item:hover:not(:disabled) {
    border-color: var(--color-teal);
    transform: scale(1.02);
}

.ex-match-item.is-selected {
    border-color: var(--color-teal);
    background: var(--color-teal-pale);
}

.ex-match-item.is-matched {
    border-color: var(--color-success);
    background: #d1fae5;
    color: #065f46;
    opacity: 0.7;
}

.ex-match-item.is-wrong {
    border-color: var(--color-error);
    background: #fee2e2;
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.ex-match-item:disabled {
    cursor: default;
}

.ex-match-status {
    text-align: center;
    margin-top: var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* === Feedback === */
.exercise-feedback {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: var(--text-base);
    line-height: 1.5;
    animation: feedbackIn 0.3s ease-out;
}

@keyframes feedbackIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.exercise-feedback.is-correct {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid var(--color-success);
}

.exercise-feedback.is-wrong {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid var(--color-error);
}

.exercise-feedback em {
    font-style: italic;
    font-weight: 600;
    color: inherit;
}

/* === Écran final === */
.exercise-final-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin: var(--space-5) 0;
    flex-wrap: wrap;
}

.ex-stat {
    text-align: center;
    background: var(--color-cream-soft);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    min-width: 100px;
}

.ex-stat__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    line-height: 1;
}

.ex-stat__label {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.exercise-final-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

/* Responsive */
@media (max-width: 600px) {
    .exercise-card { padding: var(--space-5) var(--space-4); }
    .ex-matching { gap: var(--space-2); }
    .ex-match-item { font-size: 0.85rem; padding: var(--space-2); }
    .ex-big-tts { width: 100px; height: 100px; font-size: 2.5rem; }
}


/* =================================================================
   28. MODULE VISUEL — discover.php et discover_theme.php
   ================================================================= */

/* === Page discover.php (liste thèmes) === */
body.page-discover .container { max-width: 1100px; }

.discover-stats {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    margin: var(--space-5) 0;
    flex-wrap: wrap;
}

.discover-stat {
    background: var(--color-paper);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    min-width: 100px;
}

.discover-stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    line-height: 1;
}

.discover-stat__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-1);
}

.discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.discover-card {
    --theme-color: var(--color-teal);
    background: var(--color-paper);
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-color);
    padding: var(--space-5);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all var(--transition-base);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.discover-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--theme-color);
}

.discover-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--theme-color);
}

.discover-card.is-mastered {
    background: linear-gradient(135deg, #d1fae5, var(--color-paper));
}

.discover-card__icon {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: var(--space-3);
    margin-top: var(--space-2);
}

.discover-card__body {
    flex: 1;
}

.discover-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 0 var(--space-1);
    color: var(--color-ink);
}

.discover-card__sw {
    font-style: italic;
    color: var(--theme-color);
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
}

.discover-card__count {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin: 0;
}

.discover-card__foot {
    margin-top: var(--space-3);
    width: 100%;
}

.discover-badge {
    display: inline-block;
    background: var(--color-cream-deep);
    color: var(--color-ink-soft);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

.discover-badge--mastered {
    background: #d1fae5;
    color: #065f46;
}

.discover-badge--started {
    background: #fef3c7;
    color: #92400e;
}


/* === Page discover_theme.php (apprentissage) === */
body.page-discover-theme {
    background: var(--color-cream);
}

body.page-discover-theme .footer { display: none; }

.discover-player {
    --theme-color: var(--color-teal);
    max-width: 720px;
    margin: 0 auto;
    min-height: calc(100vh - var(--topbar-height));
    display: flex;
    flex-direction: column;
}

.discover-header {
    position: sticky;
    top: var(--topbar-height);
    z-index: 20;
    background: var(--color-cream);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-4);
}

.discover-header__back {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-muted);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.discover-header__back:hover {
    background: var(--color-terracotta);
    color: white;
}

.discover-header__progress {
    flex: 1;
    min-width: 0;
}

.discover-progress {
    height: 8px;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.discover-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-color, var(--color-teal)), var(--color-terracotta));
    border-radius: inherit;
    transition: width 0.5s ease;
}

.discover-header__info {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-weight: 600;
}

.dp-hearts {
    font-size: var(--text-lg);
    letter-spacing: -2px;
}

.discover-main {
    flex: 1;
    padding: 0 var(--space-4) var(--space-8);
}

/* Card commune */
.discover-card.discover-card--intro,
.discover-card.discover-card--content,
.discover-card.discover-card--complete {
    background: var(--color-paper);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--border-color);
    cursor: default;
    animation: cardSlide 0.4s ease-out;
}

.discover-card--intro::before,
.discover-card--content::before,
.discover-card--complete::before {
    display: none;
}

.discover-card__subtitle {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--theme-color, var(--color-teal));
    font-size: var(--text-xl);
    margin: 0 0 var(--space-3);
}

.discover-card__hint {
    color: var(--color-ink-soft);
    line-height: 1.6;
    max-width: 480px;
}

.discover-phases-list {
    text-align: left;
    background: var(--color-cream-soft);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    margin: var(--space-4) 0;
    max-width: 480px;
}

.discover-phases-list li {
    margin: var(--space-2) 0;
    list-style: none;
    line-height: 1.4;
}

.discover-best-score {
    background: #fef3c7;
    color: #92400e;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.discover-card__body {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.discover-card__foot {
    width: 100%;
    margin-top: var(--space-4);
}

.discover-card__foot .btn {
    width: 100%;
    margin-top: var(--space-3);
}

/* === Image emoji === */
.dp-image {
    width: 200px;
    height: 200px;
    object-fit: contain;
    margin: var(--space-3) auto;
    display: block;
}

.dp-image--small { width: 120px; height: 120px; }
.dp-image--medium { width: 160px; height: 160px; }
.dp-image--placeholder {
    background: var(--color-cream-deep);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--color-ink-muted);
}

/* === Discovery / Repetition === */
.dp-discovery, .dp-repetition {
    text-align: center;
}

.dp-word-block {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
    margin: var(--space-3) 0;
}

.dp-word-sw {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-ink);
    letter-spacing: -0.02em;
}

.dp-word-fr {
    font-style: italic;
    color: var(--color-ink-muted);
    font-size: var(--text-lg);
    margin: 0;
}

.dp-tts {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-cream-deep);
    border: none;
    cursor: pointer;
    font-size: var(--text-lg);
    transition: all var(--transition-fast);
}

.dp-tts:hover {
    background: var(--color-teal);
    color: white;
    transform: scale(1.1);
}

.dp-big-tts {
    background: linear-gradient(135deg, var(--theme-color, var(--color-teal)), var(--color-teal-dark));
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-size: var(--text-2xl);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    margin: var(--space-3) 0;
    font-family: var(--font-display);
}

.dp-big-tts:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
}

.dp-big-tts__word {
    font-weight: 700;
}

.dp-instruction {
    color: var(--color-ink-soft);
    font-size: var(--text-base);
    margin: var(--space-2) 0;
}

.dp-rep-hint {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-3);
}

/* === Quiz options === */
.dp-options {
    width: 100%;
    margin-top: var(--space-3);
}

.dp-options--vertical {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dp-options--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.dp-option {
    padding: var(--space-3) var(--space-4);
    background: var(--color-paper);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-ink);
    transition: all var(--transition-fast);
}

.dp-option:hover:not(:disabled) {
    border-color: var(--theme-color, var(--color-teal));
    background: var(--color-teal-pale);
    transform: translateY(-1px);
}

.dp-option.is-correct {
    border-color: var(--color-success);
    background: #d1fae5;
    color: #065f46;
    font-weight: 700;
}

.dp-option.is-wrong {
    border-color: var(--color-error);
    background: #fee2e2;
}

.dp-option--image {
    padding: var(--space-3);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-option--image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.dp-option:disabled { cursor: default; }

/* === Feedback === */
.discover-feedback {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    width: 100%;
    text-align: center;
    line-height: 1.5;
    animation: feedbackIn 0.3s ease-out;
}

.discover-feedback.is-correct {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid var(--color-success);
}

.discover-feedback.is-wrong {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid var(--color-error);
}

/* === Écran final === */
.discover-final-stats {
    display: flex;
    gap: var(--space-4);
    margin: var(--space-4) 0;
    justify-content: center;
    flex-wrap: wrap;
}

.dp-stat {
    background: var(--color-cream-soft);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    min-width: 90px;
    text-align: center;
}

.dp-stat__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--theme-color, var(--color-teal-dark));
    line-height: 1;
}

.dp-stat__label {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    margin-top: var(--space-1);
}

.discover-final-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

/* Responsive */
@media (max-width: 600px) {
    .dp-word-sw { font-size: 2rem; }
    .dp-image { width: 160px; height: 160px; }
    .dp-image--small { width: 100px; height: 100px; }
    .discover-card.discover-card--intro,
    .discover-card.discover-card--content,
    .discover-card.discover-card--complete { padding: var(--space-4); }
    .discover-grid { grid-template-columns: 1fr; }
    .dp-options--grid { gap: var(--space-2); }
}


/* =================================================================
   29. STATUS BADGE (✅ Fait, 🔄 Refaire)
   ================================================================= */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    color: var(--color-ink-soft);
    margin-right: 0.5rem;
}

.status-badge--done {
    background: #d1fae5;
    color: #065f46;
}

.status-badge--in-progress {
    background: #fef3c7;
    color: #92400e;
}

.virtual-lesson__status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}


/* === Status hint sur cartes discover (libellé "Refaire") === */
.discover-card__action-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.discover-card.is-mastered .discover-card__action-hint {
    color: #15803d;
}


/* =================================================================
   30. EXERCICES GRAMMAIRE — grammar_exercise.php (Phase 5)
   ================================================================= */

body.page-grammar-exercise {
    background: var(--color-cream);
}
body.page-grammar-exercise .footer { display: none; }

/* === Container principal === */
.exercise-player {
    max-width: 760px;
    margin: 0 auto;
    min-height: calc(100vh - var(--topbar-height));
    display: flex;
    flex-direction: column;
}

/* === Header sticky === */
.exercise-header {
    position: sticky;
    top: var(--topbar-height);
    z-index: 20;
    background: var(--color-cream);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-4);
}

.exercise-header__back {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-muted);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.exercise-header__back:hover {
    background: var(--color-terracotta);
    color: white;
    transform: scale(1.05);
}

.exercise-header__progress { flex: 1; min-width: 0; }

.exercise-progress {
    height: 8px;
    background: var(--color-cream-deep);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.exercise-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal), var(--color-terracotta));
    border-radius: inherit;
    transition: width 0.5s ease;
}

.exercise-header__info {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-weight: 600;
}

.exercise-main {
    flex: 1;
    padding: 0 var(--space-4) var(--space-8);
}

/* === Card commune === */
.exercise-card--intro,
.exercise-card--content,
.exercise-card--complete {
    background: var(--color-paper);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--border-color);
    animation: cardSlide 0.4s ease-out;
}

@keyframes cardSlide {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.exercise-card__icon { line-height: 1; margin-bottom: var(--space-3); }

.exercise-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xl);
}

.exercise-card__subtitle {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-teal-dark);
    font-size: var(--text-lg);
    margin: 0 0 var(--space-3);
    max-width: 560px;
}

.exercise-card__hint {
    color: var(--color-ink-soft);
    line-height: 1.6;
    max-width: 480px;
    margin: var(--space-3) 0;
}

/* === Intro spécifique === */
.exercise-intro-info {
    display: flex;
    gap: var(--space-4);
    margin: var(--space-4) 0;
    flex-wrap: wrap;
    justify-content: center;
}

.exercise-stat {
    background: var(--color-cream-soft);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    min-width: 100px;
    text-align: center;
}

.exercise-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    line-height: 1;
}

.exercise-stat span {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-1);
}

/* === Card content (exercice en cours) === */
.exercise-card--content {
    position: relative;
    align-items: stretch;
    text-align: left;
}

.exercise-card__type-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    background: var(--color-cream-deep);
    color: var(--color-ink-soft);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
}

.exercise-card__body {
    flex: 1;
    width: 100%;
    padding-top: var(--space-3);
}

.exercise-card__foot {
    width: 100%;
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.exercise-card__foot .btn { width: 100%; }

/* Prompts et phrases */
.exercise-prompt {
    color: var(--color-ink-soft);
    font-size: var(--text-base);
    margin: 0 0 var(--space-3);
    line-height: 1.5;
}

/* === TYPE 1 : MATCHING === */
.match-game__prompt {
    color: var(--color-ink-soft);
    margin: 0 0 var(--space-4);
    font-size: var(--text-base);
}

.match-game__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

.match-game__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.match-item {
    background: var(--color-paper);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-ink);
    transition: all var(--transition-fast);
    text-align: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-item--sw {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-cream-soft), var(--color-paper));
}

.match-item:hover:not(:disabled) {
    border-color: var(--color-teal);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.match-item.is-selected {
    border-color: var(--color-teal-dark);
    background: var(--color-teal-pale);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.match-item.is-matched {
    cursor: default;
    font-weight: 700;
}

.match-item:disabled { cursor: default; }

.match-game__hint {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-align: center;
    margin: var(--space-3) 0 0;
    font-style: italic;
}

/* === TYPE 2 : COMPLETION === */
.completion-sentence {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-ink);
    text-align: center;
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--color-cream-soft), var(--color-paper));
    border-radius: var(--radius-lg);
    margin: var(--space-3) 0;
    line-height: 1.4;
}

.completion-translation {
    color: var(--color-ink-soft);
    font-size: var(--text-base);
    text-align: center;
    font-style: italic;
    margin: var(--space-2) 0 var(--space-4);
}

.completion-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.completion-opt {
    padding: var(--space-3) var(--space-4);
    background: var(--color-paper);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-ink);
    transition: all var(--transition-fast);
}

.completion-opt:hover:not(:disabled) {
    border-color: var(--color-teal);
    background: var(--color-teal-pale);
    transform: translateY(-1px);
}

.completion-opt.is-selected {
    border-color: var(--color-teal-dark);
    background: var(--color-teal-pale);
    font-weight: 700;
}

.completion-opt.is-correct {
    border-color: var(--color-success);
    background: #d1fae5;
    color: #065f46;
    font-weight: 700;
}

.completion-opt.is-wrong {
    border-color: var(--color-error);
    background: #fee2e2;
    color: #991b1b;
}

.completion-opt:disabled { cursor: default; }

/* === TYPE 3 : CONJUGATION === */
.conjug-context {
    background: var(--color-cream-soft);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    margin: var(--space-3) 0;
    border-left: 4px solid var(--color-teal);
}

.conjug-context p {
    margin: var(--space-1) 0;
    color: var(--color-ink-soft);
    font-size: var(--text-base);
}

.conjug-context strong {
    color: var(--color-ink);
    font-weight: 700;
}

.conjug-original {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--color-teal-dark) !important;
}

.conjug-input {
    margin: var(--space-4) 0;
}

.conjug-input label {
    display: block;
    color: var(--color-ink-soft);
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.conjug-input input,
.subst-input input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xl);
    font-family: var(--font-display);
    font-weight: 600;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--color-paper);
    color: var(--color-ink);
    text-align: center;
    transition: all var(--transition-fast);
}

.conjug-input input:focus,
.subst-input input:focus {
    outline: none;
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.conjug-input input.is-correct,
.subst-input input.is-correct {
    border-color: var(--color-success);
    background: #d1fae5;
    color: #065f46;
}

.conjug-input input.is-wrong,
.subst-input input.is-wrong {
    border-color: var(--color-error);
    background: #fee2e2;
    color: #991b1b;
}

.conjug-hint, .conjug-target-translation {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin: var(--space-2) 0;
    text-align: center;
}

.conjug-target-translation {
    background: var(--color-cream-deep);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-ink-soft);
}

/* === TYPE 4 : SUBSTITUTION === */
.subst-original {
    background: var(--color-cream-soft);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    margin: var(--space-3) 0;
    border-left: 4px solid var(--color-terracotta);
}

.subst-orig-sentence {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 var(--space-1);
}

.subst-orig-translation {
    color: var(--color-ink-soft);
    font-style: italic;
    font-size: var(--text-sm);
    margin: 0;
}

.subst-arrow {
    text-align: center;
    color: var(--color-terracotta);
    font-weight: 600;
    font-size: var(--text-base);
    margin: var(--space-3) 0;
    padding: var(--space-2);
}

.subst-arrow strong {
    background: var(--color-terracotta);
    color: white;
    padding: 2px 12px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-style: italic;
}

.subst-input {
    margin: var(--space-3) 0;
}

.subst-input label {
    display: block;
    color: var(--color-ink-soft);
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

/* === TYPE 5 : BINARY === */
.binary-sentence {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-ink);
    text-align: center;
    padding: var(--space-4) var(--space-3);
    background: linear-gradient(135deg, var(--color-cream-soft), var(--color-paper));
    border-radius: var(--radius-lg);
    margin: var(--space-3) 0;
    border: 1px solid var(--border-color);
}

.binary-translation {
    color: var(--color-ink-soft);
    font-size: var(--text-base);
    text-align: center;
    font-style: italic;
    margin: var(--space-2) 0 var(--space-4);
}

.binary-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.binary-opt {
    padding: var(--space-4);
    background: var(--color-paper);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-ink);
    transition: all var(--transition-fast);
    min-height: 80px;
}

.binary-opt:hover:not(:disabled) {
    border-color: var(--color-teal);
    background: var(--color-teal-pale);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.binary-opt.is-selected {
    border-color: var(--color-teal-dark);
    background: var(--color-teal-pale);
}

.binary-opt.is-correct {
    border-color: var(--color-success);
    background: #d1fae5;
    color: #065f46;
}

.binary-opt.is-wrong {
    border-color: var(--color-error);
    background: #fee2e2;
    color: #991b1b;
}

.binary-opt:disabled { cursor: default; }

/* === Feedback + explication === */
.exercise-feedback {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    width: 100%;
    text-align: center;
    line-height: 1.5;
    animation: feedbackIn 0.3s ease-out;
}

@keyframes feedbackIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.exercise-feedback.is-correct {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid var(--color-success);
}

.exercise-feedback.is-wrong {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid var(--color-error);
}

.exercise-explanation {
    background: linear-gradient(135deg, var(--color-cream-soft), var(--color-paper));
    border-left: 4px solid var(--color-teal);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-ink-soft);
    line-height: 1.5;
    font-size: var(--text-sm);
    animation: feedbackIn 0.4s ease-out;
}

/* === Écran final === */
.exercise-final-stats {
    display: flex;
    gap: var(--space-4);
    margin: var(--space-4) 0;
    justify-content: center;
    flex-wrap: wrap;
}

.ex-stat {
    background: var(--color-cream-soft);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    min-width: 90px;
    text-align: center;
}

.ex-stat__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    line-height: 1;
}

.ex-stat__label {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    margin-top: var(--space-1);
}

.exercise-final-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

/* === Responsive === */
@media (max-width: 600px) {
    .exercise-card--intro,
    .exercise-card--content,
    .exercise-card--complete { padding: var(--space-4); }
    
    .completion-sentence,
    .binary-sentence { font-size: var(--text-xl); }
    
    .conjug-input input,
    .subst-input input { font-size: var(--text-base); }
    
    .completion-options,
    .binary-options { grid-template-columns: 1fr; }
    
    .match-game__columns { gap: var(--space-2); }
    
    .match-item { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
}


/* =================================================================
   31. PAGE GRAMMAIRE — /grammar.php
   ================================================================= */

body.page-grammar .container { max-width: 1100px; }

.grammar-stats {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    margin: var(--space-5) 0;
    flex-wrap: wrap;
}

.grammar-stat {
    background: var(--color-paper);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    min-width: 120px;
}

.grammar-stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    line-height: 1;
}

.grammar-stat__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-1);
}

/* Grille des topics */
.grammar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.grammar-card {
    --topic-color: var(--color-teal);
    background: var(--color-paper);
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-color);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.grammar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--topic-color);
}

.grammar-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--topic-color);
}

.grammar-card.is-mastered {
    background: linear-gradient(135deg, #f0fdf4, var(--color-paper));
}

.grammar-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.grammar-card__icon {
    font-size: 3rem;
    line-height: 1;
}

.grammar-card__level {
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    background: var(--color-cream-deep);
    color: var(--color-ink-soft);
}

.grammar-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    line-height: 1.2;
}

.grammar-card__summary {
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0 0 var(--space-3);
    flex: 1;
}

.grammar-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-color);
}

.grammar-card__count {
    font-weight: 600;
}

.grammar-card__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.grammar-card__cta {
    width: 100%;
    justify-content: center;
}

/* Section aide */
.grammar-help {
    background: linear-gradient(135deg, var(--color-cream-soft), var(--color-paper));
    border-left: 4px solid var(--color-teal);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
}

.grammar-help h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-teal-dark);
    margin: 0 0 var(--space-2);
}

.grammar-help p {
    color: var(--color-ink-soft);
    line-height: 1.6;
    margin: var(--space-2) 0;
    font-size: var(--text-sm);
}

@media (max-width: 600px) {
    .grammar-grid { grid-template-columns: 1fr; }
    .grammar-card__icon { font-size: 2.5rem; }
}


/* =================================================================
   32. WIDGET COACH PERSONNEL (Dashboard)
   ================================================================= */

.coach-widget {
    background: linear-gradient(135deg, var(--color-teal-pale), var(--color-cream-soft));
    border: 1px solid var(--color-teal);
    border-left: 6px solid var(--color-teal-dark);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0 var(--space-5);
    box-shadow: var(--shadow-sm);
    animation: cardSlide 0.4s ease-out;
}

.coach-widget__loader {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--color-ink-soft);
    font-style: italic;
}

.coach-widget__icon { font-size: 2rem; animation: pulse 2s infinite; }

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

.coach-widget__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.coach-widget__tip-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.coach-widget__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    margin: 0;
    line-height: 1.2;
}

.coach-widget__message {
    color: var(--color-ink);
    line-height: 1.55;
    margin: var(--space-2) 0 var(--space-3);
    font-size: var(--text-base);
}

.coach-widget__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.coach-widget__chat {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-teal);
    animation: cardSlide 0.3s ease-out;
}

.coach-widget__chat-input {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.coach-widget__chat-input input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--color-paper);
    font-family: inherit;
    font-size: var(--text-sm);
}

.coach-widget__chat-input input:focus {
    outline: none;
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.coach-widget__chat-response {
    background: var(--color-paper);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    color: var(--color-ink);
    line-height: 1.6;
    font-size: var(--text-sm);
    border: 1px solid var(--border-color);
}

@media (max-width: 600px) {
    .coach-widget__actions { flex-direction: column; align-items: stretch; }
    .coach-widget__chat-input { flex-direction: column; }
}


/* =================================================================
   33. MISSION KIGOSI (page /kigosi.php)
   ================================================================= */

.page-kigosi .container--narrow { max-width: 900px; }

/* --- Hero mission --- */
.kigosi-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #f1f5f9;
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-4);
    margin: var(--space-4) 0;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.kigosi-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(217, 119, 6, 0.15), transparent 60%);
    pointer-events: none;
}

.kigosi-hero--urgent {
    background: linear-gradient(135deg, #7c2d12, #991b1b);
    animation: urgentPulse 3s ease-in-out infinite;
}

@keyframes urgentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50%      { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
}

.kigosi-hero__visual {
    font-size: 4rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.kigosi-hero__content { flex: 1; }

.kigosi-hero__title {
    font-family: var(--font-display);
    font-size: 2rem;
    margin: 0 0 var(--space-1);
    color: #f8fafc;
    letter-spacing: -0.5px;
}

.kigosi-hero__subtitle {
    color: #cbd5e1;
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
}

.kigosi-hero__sprint {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    display: inline-block;
}

.kigosi-sprint__countdown {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.kigosi-sprint__days {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: #fbbf24;
    line-height: 1;
}

.kigosi-sprint__label {
    color: #e2e8f0;
    font-size: var(--text-sm);
}

.kigosi-sprint__date {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: #94a3b8;
}

/* --- Barre de préparation globale --- */
.kigosi-readiness {
    background: var(--color-paper);
    border: 2px solid var(--color-teal);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.kigosi-readiness__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
}

.kigosi-readiness__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin: 0;
    color: var(--color-teal-dark);
}

.kigosi-readiness__value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-teal-dark);
}

.kigosi-readiness__bar {
    height: 14px;
    background: var(--color-cream-soft);
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.kigosi-readiness__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal-dark), #d97706);
    border-radius: 7px;
    transition: width 0.6s ease-out;
}

.kigosi-readiness__hint {
    margin: 0;
    font-style: italic;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}

/* --- Sprint card --- */
.kigosi-sprint-card, .kigosi-sprint-active {
    background: var(--color-cream-soft);
    border: 1px dashed var(--color-teal);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.kigosi-sprint-card h3 {
    margin-top: 0;
    color: var(--color-teal-dark);
}

.kigosi-sprint-form {
    display: flex;
    gap: var(--space-3);
    align-items: end;
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.kigosi-sprint-form label {
    flex: 1;
    min-width: 200px;
}

.kigosi-sprint-form input[type="date"] {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: inherit;
    margin-top: var(--space-1);
}

/* --- Sections du parcours --- */
.kigosi-sections h2 {
    font-family: var(--font-display);
    margin: var(--space-5) 0 var(--space-3);
    color: var(--color-ink);
}

.kigosi-section {
    --section-color: #0f766e;
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-left: 6px solid var(--section-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.kigosi-section:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.kigosi-section.is-priority {
    background: linear-gradient(135deg, var(--color-cream-soft), #fffbeb);
    border-left-width: 8px;
}

.kigosi-section__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-2);
}

.kigosi-section__icon {
    font-size: 2.5rem;
    line-height: 1;
}

.kigosi-section__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin: 0;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.kigosi-section__badge {
    background: var(--color-terracotta);
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kigosi-section__desc {
    margin: 4px 0 0;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}

.kigosi-section__progress {
    text-align: right;
}

.kigosi-section__percent {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--section-color);
    line-height: 1;
}

.kigosi-section__status {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.kigosi-section__status.ready { background: #d1fae5; color: #065f46; }
.kigosi-section__status.in-progress { background: #fef3c7; color: #92400e; }
.kigosi-section__status.todo { background: #fee2e2; color: #991b1b; }

.kigosi-section__bar {
    height: 6px;
    background: var(--color-cream-soft);
    border-radius: 3px;
    overflow: hidden;
    margin: var(--space-2) 0 var(--space-3);
}

.kigosi-section__bar-fill {
    height: 100%;
    background: var(--section-color);
    transition: width 0.6s ease-out;
}

.kigosi-section__topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.kigosi-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-cream-soft);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-ink);
    font-size: var(--text-sm);
    transition: all 0.2s;
}

.kigosi-topic:hover {
    background: var(--section-color);
    color: white;
    border-color: var(--section-color);
    transform: translateY(-2px);
}

.kigosi-topic__icon { font-size: 1.1em; }

/* --- Coach IA Mission --- */
.kigosi-coach {
    background: linear-gradient(135deg, var(--color-teal-pale), var(--color-cream-soft));
    border: 2px solid var(--color-teal);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin: var(--space-5) 0;
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.kigosi-coach__visual {
    font-size: 4rem;
    line-height: 1;
    flex-shrink: 0;
    animation: pulse 2.5s ease-in-out infinite;
}

.kigosi-coach__content h2 {
    font-family: var(--font-display);
    margin: 0 0 var(--space-2);
    color: var(--color-teal-dark);
}

.kigosi-coach__content p {
    margin: 0 0 var(--space-3);
    color: var(--color-ink);
    line-height: 1.6;
}

/* --- Tips --- */
.kigosi-tips {
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}

.kigosi-tips h3 {
    font-family: var(--font-display);
    margin: 0 0 var(--space-3);
    color: var(--color-ink);
}

.kigosi-tips ul {
    margin: 0;
    padding-left: var(--space-4);
    line-height: 1.8;
    color: var(--color-ink-soft);
}

.kigosi-tips li {
    margin-bottom: var(--space-1);
}

.kigosi-tips strong {
    color: var(--color-ink);
}

/* --- Responsive --- */
@media (max-width: 700px) {
    .kigosi-hero {
        flex-direction: column;
        text-align: center;
    }
    .kigosi-hero__visual { font-size: 3rem; }
    .kigosi-hero__title { font-size: 1.5rem; }
    
    .kigosi-section__head {
        grid-template-columns: auto 1fr;
    }
    .kigosi-section__progress {
        grid-column: 1 / -1;
        text-align: left;
    }
    
    .kigosi-coach {
        flex-direction: column;
        text-align: center;
    }
    
    .kigosi-sprint-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Featured quick action (Mission Kigosi) */
.quick-action--featured {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
    border: none !important;
    position: relative;
}

.quick-action--featured .quick-action__label,
.quick-action--featured .quick-action__icon {
    color: white !important;
}

.quick-action--featured::after {
    content: '⭐';
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.75rem;
}


/* =================================================================
   34. DASHBOARD PRO (stats.php)
   ================================================================= */

/* --- Progression CECR --- */
.cecr-progress {
    background: linear-gradient(135deg, var(--color-teal-pale), var(--color-cream-soft));
    border: 2px solid var(--color-teal);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}

.cecr-progress__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.cecr-progress__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin: 0;
    color: var(--color-teal-dark);
}

.cecr-progress__current {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cecr-progress__current-label {
    font-size: var(--text-xs);
    color: var(--color-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cecr-progress__current-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-teal-dark);
    line-height: 1;
}

/* Échelle de niveaux */
.cecr-progress__ladder {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    margin: var(--space-3) 0;
    position: relative;
}

.cecr-progress__ladder::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: var(--color-cream-soft);
    z-index: 0;
}

.cecr-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.cecr-step__circle {
    width: 44px;
    height: 44px;
    line-height: 44px;
    margin: 0 auto var(--space-1);
    background: var(--color-cream-soft);
    color: var(--color-ink-soft);
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-base);
    border: 2px solid var(--color-cream-soft);
    transition: all 0.3s;
}

.cecr-step.is-past .cecr-step__circle {
    background: var(--color-teal);
    color: white;
    border-color: var(--color-teal-dark);
}

.cecr-step.is-current .cecr-step__circle {
    background: var(--color-terracotta);
    color: white;
    border-color: var(--color-terracotta);
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.cecr-step.is-next .cecr-step__circle {
    border-color: var(--color-terracotta);
    border-style: dashed;
}

.cecr-step__label {
    font-weight: 600;
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.cecr-step__xp {
    font-size: 0.7rem;
    color: var(--color-ink-soft);
}

/* Progression dans le niveau */
.cecr-progress__within {
    background: var(--color-paper);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-3);
}

.cecr-progress__within-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-1);
    font-weight: 600;
    color: var(--color-ink);
}

.cecr-progress__bar {
    height: 10px;
    background: var(--color-cream-soft);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.cecr-progress__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal-dark), var(--color-terracotta));
    border-radius: 5px;
    transition: width 0.8s ease-out;
}

.cecr-progress__hint {
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Prédiction */
.cecr-prediction {
    display: flex;
    gap: var(--space-3);
    background: rgba(217, 119, 6, 0.08);
    border-left: 4px solid var(--color-terracotta);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-3);
}

.cecr-prediction__icon {
    font-size: 2rem;
    line-height: 1;
}

.cecr-prediction__title {
    margin: 0 0 var(--space-1);
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.cecr-prediction__forecast {
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.cecr-prediction__nohint {
    margin-top: var(--space-3);
    color: var(--color-ink-soft);
    font-style: italic;
    font-size: var(--text-sm);
    text-align: center;
}

/* --- Courbe XP 30 jours --- */
.xp-curve {
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}

.xp-curve__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.xp-curve__title {
    margin: 0;
    font-family: var(--font-display);
    color: var(--color-ink);
    font-size: var(--text-xl);
}

.xp-curve__summary {
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    display: flex;
    gap: var(--space-1);
    align-items: baseline;
}

.xp-curve__svg {
    width: 100%;
    height: 200px;
    display: block;
}

.xp-curve__xaxis {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-1);
    color: var(--color-ink-soft);
    font-size: var(--text-xs);
}

.xp-curve__empty {
    color: var(--color-ink-soft);
    text-align: center;
    padding: var(--space-4);
    margin: 0;
    font-style: italic;
}

/* --- Heatmap --- */
.heatmap-section {
    margin: var(--space-5) 0;
}

.heatmap {
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
}

.heatmap__days-labels {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 2px;
    height: calc(7 * 14px + 6 * 2px);
    font-size: 0.65rem;
    color: var(--color-ink-soft);
    text-align: center;
    line-height: 14px;
    margin-bottom: var(--space-1);
    float: left;
    margin-right: 4px;
}

.heatmap__grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 14px);
    gap: 2px;
    overflow-x: auto;
}

.heatmap__cell {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: var(--color-cream-soft);
    transition: transform 0.15s;
    cursor: default;
}

.heatmap__cell:hover {
    transform: scale(1.4);
    outline: 1px solid var(--color-ink);
}

.heatmap__cell--empty { background: transparent; }
.heatmap__cell--lvl0  { background: #e5e5e5; }
.heatmap__cell--lvl1  { background: #9ae6b4; }
.heatmap__cell--lvl2  { background: #48bb78; }
.heatmap__cell--lvl3  { background: #2f855a; }
.heatmap__cell--lvl4  { background: #1c4532; }

.heatmap__legend {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-ink-soft);
    clear: both;
}

.heatmap__legend .heatmap__cell { cursor: default; }

/* --- Modules progress --- */
.modules-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-2);
}

.module-progress-card {
    display: block;
    background: var(--color-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    color: var(--color-ink);
    transition: all 0.2s;
}

.module-progress-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-teal);
}

.module-progress-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.module-progress-card__icon { font-size: 1.5rem; }
.module-progress-card__level {
    font-size: 0.7rem;
    background: var(--color-teal);
    color: white;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 700;
}
.module-progress-card__status { margin-left: auto; font-size: 0.9rem; }

.module-progress-card__title {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

.module-progress-card__bar {
    height: 4px;
    background: var(--color-cream-soft);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.module-progress-card__bar-fill {
    height: 100%;
    background: var(--color-teal);
    transition: width 0.6s;
}

.module-progress-card__meta {
    font-size: var(--text-xs);
    color: var(--color-ink-soft);
    display: flex;
    gap: 4px;
}

/* --- Mini stat cards (conversations) --- */
.conv-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
}

.stat-card--mini {
    padding: var(--space-2);
    text-align: center;
}

.stat-card--mini .stat-card__value {
    font-size: 1.5rem;
    margin-bottom: 2px;
}

.stat-card--mini .stat-card__label {
    font-size: var(--text-xs);
}

/* --- Recommandation coach --- */
.coach-recommend {
    background: linear-gradient(135deg, var(--color-cream-soft), var(--color-teal-pale));
    border: 1px solid var(--color-teal);
    border-left: 6px solid var(--color-teal-dark);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.coach-recommend__icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.coach-recommend__title {
    font-family: var(--font-display);
    margin: 0 0 var(--space-1);
    color: var(--color-teal-dark);
    font-size: var(--text-lg);
}

.coach-recommend__message {
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    line-height: 1.5;
}

/* --- Responsive --- */
@media (max-width: 700px) {
    .cecr-progress__ladder {
        grid-template-columns: repeat(5, 1fr);
    }
    .cecr-step__circle {
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 0.85rem;
    }
    .cecr-step__xp { display: none; }
    
    .xp-curve__svg { height: 140px; }
    
    .heatmap__days-labels { font-size: 0.55rem; }
    
    .coach-recommend { flex-direction: column; }
}