:root {
    --primary: #4f46e5;
    --primary-light: #6366f1;
    --primary-bg: #eef2ff;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #111827;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8ecff 50%, #f5f0ff 100%);
    min-height: 100vh;
    margin: 0;
    padding-top: 90px; /* Compenser le header fixe avec logo */
}

.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Header */
.page-header {
    text-align: center;
    margin-bottom: 2rem;
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-500);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.2s;
}
.back-link:hover {
    color: var(--primary);
}

.badge-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.badge-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}
.badge-info {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}
.badge-purple {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: white;
}

.page-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 0.5rem;
}
.page-header p {
    color: var(--gray-500);
    font-size: 1.05rem;
    margin: 0;
}

/* Main Grid */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 580px;
    gap: 1.5rem;
    align-items: start;
}
@media screen and (max-width: 1250px) {
    .main-grid {
        grid-template-columns: 1fr;
    }
}

/* Cards */
.card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.card-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}
.card-header i {
    color: var(--primary);
    font-size: 1.1rem;
}
.card-body {
    padding: 1.5rem;
}

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--gray-100);
    padding: 0 1.5rem;
    gap: 0;
    overflow-x: auto;
}
.tab {
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    white-space: nowrap;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    font-size: 0.95rem;
}
.tab:hover {
    color: var(--primary);
}
.tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.tab-content {
    display: none;
    padding: 1.5rem;
}
.tab-content.active {
    display: block;
}

/* Form Sections */
.form-section {
    margin-bottom: 1.75rem;
}
.form-section:last-child {
    margin-bottom: 0;
}
.form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

/* Button Groups */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.btn-group-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}
@media screen and (max-width: 480px) {
    .btn-group-5 {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .btn-group-5 .btn-select {
        flex: 1 1 calc(20% - 0.4rem);
        min-width: 3.2rem;
        padding: 0.6rem 0.4rem;
        font-size: 0.85rem;
    }
}
.btn-group-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.btn-select {
    padding: 0.7rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.6rem;
    background: white;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    font-size: 0.95rem;
}
.btn-select:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}
.btn-select.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Generate buttons container */
.generate-buttons-container {
    display: flex;
    gap: 0.75rem;
}
.generate-buttons-container .btn-generate {
    flex: 1;
    margin: 0;
}
.btn-multiniveau {
    background: linear-gradient(135deg, #10b981 0%, #22c55e 33%, #f59e0b 66%, #ef4444 100%);
}

/* Mobile responsive */
@media screen and (max-width: 480px) {
    .page-container {
        padding: 1rem;
    }
    .page-header h1 {
        font-size: 1.5rem;
    }
    .badge-row {
        gap: 0.5rem;
    }
    .badge {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
    .card-header {
        padding: 1rem;
    }
    .card-body {
        padding: 1rem;
    }
    .btn-group-5 {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .btn-group-5 .btn-select {
        flex: 1 1 calc(20% - 0.4rem);
        min-width: 3.2rem;
        padding: 0.6rem 0.4rem;
        font-size: 0.85rem;
    }
    .btn-group-3 {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .generate-buttons-container {
        flex-direction: column;
    }
    .generate-buttons-container .btn-generate {
        font-size: 0.9rem;
        padding: 0.8rem 1rem;
    }
    .theme-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .theme-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
        gap: 0.5rem;
    }
    .theme-dot {
        width: 14px;
        height: 14px;
    }
    .options-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .operations-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
    }
    .operations-grid .btn-select {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    .section-label {
        font-size: 0.75rem;
    }
}

/* Periodes scolaires : 6 colonnes par defaut, 3x2 sur mobile etroit
           pour eviter le debordement du dernier bouton (P5 📍) */
.periode-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}
.periode-grid .periode-btn {
    min-width: 0;
    padding: 0.4rem 0.2rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
@media screen and (max-width: 480px) {
    .periode-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.btn-select-outline {
    padding: 0.6rem 0.9rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}
.btn-select-outline i {
    color: var(--gray-400);
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
}
.btn-select-outline:hover {
    border-color: var(--primary);
}
.btn-select-outline.active {
    background: var(--primary-bg);
    border-color: var(--primary);
    color: var(--primary);
}
.btn-select-outline.active i {
    color: var(--primary);
}
.btn-select-outline.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Types Grid */
/* Réserve l'espace avant que JS ne rende les boutons de types (anti-CLS).
           CE1 P5 (défaut en mai-juin) = 7 catégories × ~165px ≈ 1150px.
           On prend 1200px pour couvrir les niveaux avec le plus de catégories. */
#typesContainer {
    min-height: 1200px;
}
.types-category {
    margin-bottom: 1.25rem;
}
.types-category:last-child {
    margin-bottom: 0;
}
.types-category-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--gray-200);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

/* Difficulty buttons */
.btn-difficulty {
    padding: 0.75rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.6rem;
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.btn-difficulty:hover {
    border-color: var(--primary-light);
}
.btn-difficulty.active {
    background: var(--primary-bg);
    border-color: var(--primary);
}
.btn-difficulty .emoji {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}
.btn-difficulty .label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-700);
}
.btn-difficulty.active .label {
    color: var(--primary);
}

/* Slider */
.slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.slider-container input[type='range'] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--gray-200);
    -webkit-appearance: none;
    outline: 2px solid transparent;
}
.slider-container input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
}
.slider-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    min-width: 50px;
    text-align: center;
}

/* Tables Selection */
.tables-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}
.table-btn {
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s;
}
.table-btn:hover {
    border-color: var(--primary-light);
}
.table-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.tables-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.tables-actions button {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.4rem;
    background: var(--gray-50);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s;
}
.tables-actions button:hover {
    background: var(--gray-100);
}

/* Mode Toggle (Simple / Personnalisé) */
.mode-toggle {
    display: flex;
    background: var(--gray-100);
    border-radius: 0.5rem;
    padding: 4px;
    margin-bottom: 1rem;
}
.mode-toggle button {
    flex: 1;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
}
.mode-toggle button.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.mode-toggle button i {
    margin-right: 6px;
}

/* Multi-types selection */
.multi-types-container {
    display: none;
}
.multi-types-container.active {
    display: block;
}
.multi-type-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    transition: all 0.2s;
}
.multi-type-item:hover {
    border-color: var(--primary-light);
}
.multi-type-item.selected {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(99, 102, 241, 0.05));
    border-color: var(--primary);
}
.multi-type-item .type-check {
    width: 22px;
    height: 22px;
    border: 2px solid var(--gray-300);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.multi-type-item.selected .type-check {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.multi-type-item .type-check i {
    font-size: 12px;
    opacity: 0;
}
.multi-type-item.selected .type-check i {
    opacity: 1;
}
.multi-type-item .type-info {
    flex: 1;
}
.multi-type-item .type-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-800);
}
.multi-type-item .type-count {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.multi-type-item .type-count button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: white;
    font-size: 1rem;
    font-weight: bold;
    color: var(--gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.multi-type-item .type-count button:hover {
    background: var(--gray-100);
}
.multi-type-item .type-count input {
    width: 40px;
    height: 28px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
}
.multi-type-item:not(.selected) .type-count {
    opacity: 0.4;
    pointer-events: none;
}
.multi-type-item.disabled {
    opacity: 0.4;
    pointer-events: none;
    background: var(--gray-100);
    border-color: var(--gray-200);
}
.multi-type-item.disabled .type-name {
    color: var(--gray-400);
}
.multi-types-incompatible-notice {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #92400e;
    display: none;
}
.multi-types-incompatible-notice.visible {
    display: block;
}
.multi-types-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--primary);
    border-radius: 0.5rem;
    color: white;
    font-weight: 600;
    margin-top: 0.75rem;
}
.multi-types-total .total-number {
    font-size: 1.25rem;
    font-weight: 800;
}
.category-header-multi {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 1rem 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gray-200);
}
.category-header-multi:first-child {
    margin-top: 0;
}

/* Text Input */
.text-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.6rem;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s;
}
.text-input:focus {
    outline: 2px solid transparent;
    border-color: var(--primary);
}
.text-input::placeholder {
    color: var(--gray-400);
}

/* Checkboxes */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-700);
}
.checkbox-label input[type='checkbox'] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Theme & Layout Selection */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.theme-btn {
    padding: 0.6rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-700);
}
.theme-btn:hover {
    border-color: var(--gray-300);
}
.theme-btn.active {
    border-color: var(--primary);
    background: var(--primary-bg);
}
.theme-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Generate Button */
.btn-generate {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    margin-top: 1.5rem;
}
.btn-generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
}

/* Preview Card */
.preview-card {
    position: sticky;
    top: 1.5rem;
}
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-refresh {
    padding: 0.5rem 1rem;
    background: var(--gray-100);
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s;
}
.btn-refresh:hover {
    background: var(--gray-200);
}

.preview-fiche {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 0.6rem;
    padding: 1.25rem;
    min-height: 450px;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.preview-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--theme-accent, #e0f2fe) 0%, #ffffff 100%);
    margin: -1.25rem -1.25rem 1rem -1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: 2px solid var(--theme-primary, var(--primary));
}
.preview-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
}
.preview-titre-wrapper {
    flex: 1;
    border-left: 3px solid var(--theme-primary, var(--primary));
    padding-left: 0.75rem;
}
.preview-titre h3 {
    color: var(--theme-primary, var(--primary));
    font-size: 1rem;
    margin: 0 0 0.15rem;
    font-weight: 700;
}
.preview-titre .subtitle {
    font-size: 0.75rem;
    color: var(--theme-secondary, #666);
    font-weight: 500;
}
.preview-titre .badge-difficulte {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    margin-left: 0.3rem;
}
.preview-score-box {
    background: var(--theme-primary, var(--primary));
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
}
.preview-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--gray-600);
    background: var(--theme-accent, #e0f2fe);
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
}
.preview-info .label {
    color: var(--theme-secondary, var(--primary));
    font-weight: 600;
}
.preview-consigne {
    background: var(--theme-accent, #eef2ff);
    border-left: 3px solid var(--theme-primary, #4f46e5);
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    font-style: italic;
    border-radius: 0 6px 6px 0;
    color: #374151;
}
.preview-score {
    border: 2px solid var(--primary);
    border-radius: 0.4rem;
    padding: 0.25rem 0.6rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-bg);
    font-size: 0.85rem;
}
.preview-exercices-grid {
    display: grid;
    gap: 0.4rem;
}
.preview-exercices-grid.cols-1 {
    grid-template-columns: 1fr;
}
.preview-exercices-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.preview-exercices-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.preview-exercices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
}
.preview-exercice {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    background: #fafafa;
    border: 1px solid var(--theme-accent, #e0f2fe);
    border-left: 3px solid var(--theme-primary, var(--primary));
    border-radius: 4px;
    min-width: 0;
    overflow: hidden;
}
.preview-exercice > span:not(.num):not(.line) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preview-exercice .num {
    font-weight: 700;
    color: var(--theme-primary, var(--primary));
    min-width: 20px;
    flex-shrink: 0;
}
.preview-exercice .line {
    flex: 1;
    border-bottom: 1px dotted var(--theme-secondary, var(--gray-300));
    min-width: 30px;
    max-width: 70px;
}

/* Adaptation des colonnes */
.preview-exercices-grid.cols-2 .preview-exercice,
.preview-exercices-grid.cols-3 .preview-exercice {
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
}
.preview-exercices-grid.cols-3 .preview-exercice {
    font-size: 0.7rem;
}
.preview-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--gray-500);
}

.preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    color: var(--gray-500);
}
.preview-loading i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Additions posées preview */
.preview-exercices-poses {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}
.operation-posee-preview {
    display: inline-block;
}
.operation-posee-preview table {
    border-collapse: collapse;
}
.operation-posee-preview td {
    width: 18px;
    height: 20px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}
.operation-posee-preview .retenue td {
    height: 14px;
    font-size: 8px;
    color: #6b7280;
}
.operation-posee-preview .ligne-nombre td {
    border: 1px solid #ddd;
}
.operation-posee-preview .ligne-nombre td.vide {
    border: none;
}
.operation-posee-preview .signe {
    border: none !important;
    font-weight: bold;
    color: var(--primary);
}
.operation-posee-preview .ligne-separation td {
    border-top: 2px solid #333;
    height: 2px;
    padding: 0;
}
.operation-posee-preview .ligne-resultat td {
    border: 1px solid #ddd;
    height: 22px;
    background: #f9f9f9;
}
.operation-posee-preview .ligne-intermediaire td {
    border: 1px solid #ddd;
    height: 20px;
    background: #fafafa;
}
.operation-posee-preview .ligne-intermediaire td.vide {
    border: none;
    background: none;
}
.operation-posee-preview.multiplication-multi {
    margin-bottom: 10px;
}
.division-posee-preview {
    display: inline-block;
    margin: 5px 10px;
}
.division-posee-preview table {
    border-collapse: collapse;
}
.division-posee-preview .dividende-cell {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    text-align: right;
    min-width: 50px;
}
.division-posee-preview .separation-cell {
    border-left: 2px solid #333;
    width: 2px;
}
.division-posee-preview .diviseur-cell {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border-bottom: 2px solid #333;
    min-width: 30px;
    text-align: center;
}
.division-posee-preview .calcul-cell {
    padding: 3px 10px;
    min-height: 18px;
    border-bottom: 1px dotted #ccc;
}
.division-posee-preview .quotient-cell {
    padding: 4px 10px;
    font-size: 11px;
    min-width: 30px;
    min-height: 18px;
}
.division-posee-preview .vide-cell {
    padding: 3px 10px;
}

/* Fractions preview */
.fraction-preview {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 3px;
    font-size: 11px;
    line-height: 1.1;
}
.fraction-preview .numerateur {
    border-bottom: 1.5px solid #333;
    padding: 0 4px 2px;
    min-width: 14px;
    text-align: center;
}
.fraction-preview .denominateur {
    padding: 2px 4px 0;
    min-width: 14px;
    text-align: center;
}
.fraction-preview.fraction-vide {
    margin-left: 2px;
}
.fraction-preview.fraction-vide .numerateur,
.fraction-preview.fraction-vide .denominateur {
    min-width: 16px;
    color: #6b7280;
}
.preview-exercice-fraction {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}
.preview-exercice-fraction > span:not(.num):not(.line) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preview-exercice-fraction .num {
    flex-shrink: 0;
}
.preview-exercice-fraction .operateur {
    font-weight: 600;
    color: var(--theme-primary, #4f46e5);
    font-size: 14px;
}
.preview-exercice-fraction .line {
    flex: 0 0 auto;
    width: 25px;
    height: 1px;
    background: repeating-linear-gradient(90deg, #ccc, #ccc 4px, transparent 4px, transparent 8px);
}

/* Adaptation des colonnes pour les fractions */
.preview-exercices-grid.cols-2 .preview-exercice-fraction,
.preview-exercices-grid.cols-3 .preview-exercice-fraction {
    font-size: 0.7rem;
}
.preview-exercices-grid.cols-3 .preview-exercice-fraction .fraction-preview {
    font-size: 9px;
}
.preview-exercices-grid.cols-2 .preview-exercice-fraction .fraction-preview,
.preview-exercices-grid.cols-3 .preview-exercice-fraction .fraction-preview {
    margin: 0 2px;
}

/* Number input for nb_fiches */
.nb-fiches-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nb-fiches-input button {
    width: 36px;
    height: 36px;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s;
}
.nb-fiches-input button:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.nb-fiches-input input {
    width: 50px;
    text-align: center;
    padding: 0.5rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
}
.nb-fiches-input input:focus {
    outline: 2px solid transparent;
    border-color: var(--primary);
}

/* Helpers */
.hidden {
    display: none !important;
}
.mt-3 {
    margin-top: 1rem;
}
.text-sm {
    font-size: 0.85rem;
}
.text-gray {
    color: var(--gray-500);
}

/* Panneau Copies par niveau */
.copies-helper-panel {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}
.copies-helper-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.copies-helper-icon {
    font-size: 2rem;
    line-height: 1;
}
.copies-helper-header h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-900);
}
.copies-helper-header p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-500);
}
.copies-helper-selects {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.copies-select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    min-width: 180px;
}
.copies-select:focus {
    outline: 2px solid transparent;
    border-color: var(--primary);
}
.level-stats-container {
    margin-top: 1rem;
}
.level-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
    .level-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.level-stat-card {
    padding: 1rem;
    border-radius: 0.75rem;
    text-align: center;
    border: 2px solid transparent;
}
.level-stat-card .level-name {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
.level-stat-card .level-stars {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}
.level-stat-card .level-count {
    font-size: 1.75rem;
    font-weight: 700;
}
.level-stat-card .level-label {
    font-size: 0.8rem;
    color: var(--gray-500);
}
.level-stats-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
    gap: 0.5rem;
}
#totalStudentsStats {
    font-weight: 600;
    color: var(--gray-700);
}
.link-to-students {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}
.link-to-students:hover {
    background-color: var(--primary-bg);
}

/* ===== DARK MODE ===== */
[data-theme='dark'] .page-container {
    background: linear-gradient(135deg, #0f172a 0%, #1a1f35 100%) !important;
}
[data-theme='dark'] .card {
    background: #1e293b !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}
[data-theme='dark'] .card-title,
[data-theme='dark'] .section-title {
    color: #e2e8f0 !important;
    border-bottom-color: #334155 !important;
}
[data-theme='dark'] label {
    color: #cbd5e1 !important;
}
[data-theme='dark'] input[type='text'],
[data-theme='dark'] input[type='number'],
[data-theme='dark'] select,
[data-theme='dark'] textarea {
    background: #243044 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-theme='dark'] .option-btn,
[data-theme='dark'] .choice-btn {
    background: #243044 !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme='dark'] .option-btn:hover,
[data-theme='dark'] .choice-btn:hover {
    background: #2d3d55 !important;
}
[data-theme='dark'] .option-btn.selected,
[data-theme='dark'] .choice-btn.selected,
[data-theme='dark'] .option-btn.active,
[data-theme='dark'] .choice-btn.active {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: #6366f1 !important;
    color: #a5b4fc !important;
}
[data-theme='dark'] .alert-info,
[data-theme='dark'] .info-box {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}
[data-theme='dark'] .stat-card {
    background: #243044 !important;
}
[data-theme='dark'] .stat-value {
    color: #f1f5f9 !important;
}
[data-theme='dark'] .stat-label {
    color: #94a3b8 !important;
}
[data-theme='dark'] .level-stat-card {
    background: #243044 !important;
    border-color: #334155 !important;
}
[data-theme='dark'] .level-stat-card:hover {
    border-color: #a5b4fc !important;
}
[data-theme='dark'] .level-name {
    color: #cbd5e1 !important;
}