/* ============================================
   LIVE QUIZ — Design System v4.1
   Theme: Light Premium with Optional Dark Mode
   Layout: Vertical 3-step flow
   ============================================ */

@import "fonts.css";

/* ---------- CSS Custom Properties ---------- */
:root {
    /* Core palette */
    --primary: #1155D6;
    --primary-light: #4d80e8;
    --primary-dark: #0d44b5;
    --primary-glow: rgba(17, 85, 214, 0.22);
    --accent: #0ea5a0;
    --accent-light: #38bdf8;
    /* Accent lisible en texte (5,4:1 sur blanc), fond et filet teintés :
       bibliothèque partagée (v7.8.9) */
    --accent-text: #0f766e;
    --accent-soft: rgba(14, 165, 160, 0.09);
    --accent-line: rgba(14, 165, 160, 0.4);

    /* Backgrounds */
    --bg-page: #f0f2f8;
    --bg-card: #ffffff;
    --bg-card-hover: #fafbff;
    --bg-subtle: #f7f8fc;
    --bg-input: #f4f5fa;

    /* Text */
    --text-primary: #1a1a2e;
    --text-secondary: #334155;
    --text-muted: #475569;
    /* Darkened for 4.5:1 contrast against #f0f2f8 */
    --text-on-primary: #ffffff;

    /* Borders & shadows */
    --border: #dce3f0;
    --border-focus: var(--primary);
    --shadow-sm: 0 2px 8px rgba(17, 85, 214, 0.06);
    --shadow-md: 0 4px 20px rgba(17, 85, 214, 0.08);
    --shadow-lg: 0 8px 40px rgba(17, 85, 214, 0.12);
    --shadow-glow: 0 0 30px rgba(17, 85, 214, 0.18);

    /* Status */
    --success: #00b894;
    --success-bg: #e6f9f3;
    --error: #d63031;
    --error-bg: #fde8e8;
    --warning: #f39c12;
    --warning-bg: #fef9e7;

    /* Radius & spacing */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    /* Forme des boutons à libellé : pilule à rayon complet */
    --radius-pill: 999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
    --bg-page: #0f172a;
    --bg-card: rgba(30, 41, 59, 0.85);
    --bg-card-hover: rgba(51, 65, 85, 0.9);
    --bg-subtle: rgba(51, 65, 85, 0.5);
    --bg-input: rgba(15, 23, 42, 0.6);

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    /* Lightened for contrast against dark backgrounds */

    --border: rgba(17, 85, 214, 0.18);
    --border-focus: var(--primary-light);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(17, 85, 214, 0.35);

    --success-bg: rgba(0, 184, 148, 0.15);
    --error-bg: rgba(214, 48, 49, 0.15);
    --warning-bg: rgba(243, 156, 18, 0.15);

    --accent-text: #5eead4;
    --accent-soft: rgba(94, 234, 212, 0.1);
    --accent-line: rgba(94, 234, 212, 0.35);
}

[data-theme="dark"] .step-card {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(17, 85, 214, 0.15);
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Header ---------- */
.app-header {
    width: 100%;
    padding: 14px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
    gap: 8px;
}

/* Header Stepper */
.header-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-left: 30px;
}

.stepper-step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.stepper-num {
    color: var(--primary);
    font-weight: 800;
    font-size: 1.1rem;
}

.stepper-dot {
    color: var(--border);
    font-size: 1.4rem;
    line-height: 1;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
}

.header-logo-wrapper {
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-logo-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
}

.header-brand span {
    font-size: 1.35rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Phrase d'accroche : séparée de la marque par un filet vertical. Sous 1150px
   elle bascule sur une 2e ligne du header (voir media queries) plutôt que de
   disparaître. Le display: flex sert au centrage dans cet état enroulé. */
.header-tagline {
    display: flex;
    align-items: center;
    margin: 0 0 0 16px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-secondary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.header-link:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(17, 85, 214, 0.06);
    transform: translateY(-1px);
}

/* Align lang-switcher button with header links */
.header-actions .language-switcher .language-btn {
    height: 38px;
    padding: 0 12px;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
}

.header-actions .language-switcher .language-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(17, 85, 214, 0.06);
    transform: translateY(-1px);
}

.header-link i {
    font-size: 0.85rem;
}

/* Accès joueur — Accent button (non-blue) */
.header-link-eleve {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.3);
    font-weight: 700;
}

.header-link-eleve:hover {
    background: linear-gradient(135deg, #047857, #059669);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.45);
    transform: translateY(-2px);
}

/* Theme toggle */
.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1rem;
    transition: all var(--transition-fast);
    padding: 0;
    margin: 0;
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(17, 85, 214, 0.06);
    transform: translateY(-1px);
}

/* ---------- Thème visuel (v8.3.6) ----------
   Bouton à côté de la bascule clair/sombre (en-tête), et son double flottant
   pendant la session. Un thème actif colore le bouton : c'est lui qui dit
   pourquoi l'interface a changé d'allure. Menu construit par
   VisualThemePicker (index.js). */
.visual-theme-btn {
    font-family: inherit;
}

/* L'icône ne sert qu'en en-tête étroit, quand le mot est masqué (≤ 768 px). */
.visual-theme-btn-icon {
    display: none;
}

.visual-theme-btn.is-themed {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
}

.visual-theme-btn.is-themed:hover {
    color: #ffffff;
}

.floating-music-btn.floating-theme-btn {
    bottom: 88px;
    right: 24px;
    width: auto;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 700;
}

.visual-theme-popover {
    position: fixed;
    z-index: 10050;
    width: 300px;
    max-width: calc(100vw - 16px);
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-theme="dark"] .visual-theme-popover {
    background: var(--bg-page);
}

.visual-theme-popover[hidden] {
    display: none;
}

.visual-theme-title {
    margin: 2px 6px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.visual-theme-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.visual-theme-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.visual-theme-item:hover,
.visual-theme-item:focus-visible {
    background: var(--bg-subtle);
    border-color: var(--border);
    outline: none;
}

.visual-theme-item:focus-visible {
    box-shadow: 0 0 0 2px var(--primary);
}

.visual-theme-item[aria-checked="true"] {
    border-color: var(--primary);
}

.visual-theme-item-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--primary);
    font-size: 1rem;
}

.visual-theme-item-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.visual-theme-item-text strong {
    font-size: 0.92rem;
}

.visual-theme-item-text small {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.visual-theme-item-check {
    color: var(--primary);
    visibility: hidden;
}

.visual-theme-item[aria-checked="true"] .visual-theme-item-check {
    visibility: visible;
}

.visual-theme-note {
    margin: 8px 6px 2px;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* ---------- Main Container ---------- */
.main-container {
    width: 90%;
    max-width: 1400px;
    padding: 30px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    margin: 0 auto;
}

/* ---------- Step Cards ---------- */
.step-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 28px 32px;
    position: relative;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    opacity: 0;
    width: 100%;
    overflow: visible;
}

/* Ensure the questions step sits above step 2/3 so dropdown menus are not clipped */
#step-questions {
    z-index: 2;
}


.step-card:not(.reveal) {
    animation: fadeSlideIn 0.5s ease forwards;
}

.step-card:nth-child(1):not(.reveal) {
    animation-delay: 0.05s;
}

.step-card:nth-child(2):not(.reveal) {
    animation-delay: 0.15s;
}

.step-card:nth-child(3):not(.reveal) {
    animation-delay: 0.25s;
}

/* Scroll Reveal classes */
.step-card.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.step-card.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.step-card:hover {
    box-shadow: var(--shadow-lg);
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step header with number badge */
/* `nowrap` : la colonne d'onglets doit RÉTRÉCIR, pas passer à la ligne — un
   repli lui rendrait la rangée que son installation dans l'en-tête fait
   justement économiser. Le repli n'a lieu que sous 700 px, où la media query
   repasse en `wrap`. */
.step-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
    margin-bottom: 22px;
}

/* Pastille, titre et accroche empilés et calés au bord gauche de la carte,
   donc alignés avec le contenu en dessous. Alignement déclaré explicitement
   pour ne dépendre d'aucune valeur héritée. */
.step-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
}

.step-number {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 4px 12px var(--primary-glow);
    margin-bottom: 6px;
}

.step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
}

.step-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 500;
    text-align: left;
}

/* ---------- Step 1: 2-Column Question Layout ---------- */

/* Column label banners */
.q-col-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: -4px;
}

.q-col-label-manual {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.q-col-label-ai {
    background: linear-gradient(135deg, rgba(17, 85, 214, 0.12), rgba(45, 114, 232, 0.08));
    color: var(--primary);
    border: 1px solid rgba(17, 85, 214, 0.2);
}

[data-theme="dark"] .q-col-label-manual {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
}

.step1-tab-inner {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    align-items: stretch;
}

.step1-tab-inner>.q-block:first-child {
    flex: 1;
    /* 50/50 split with the documents column */
    height: auto;
}

.step1-tab-inner>.q-block:last-child {
    flex: 1;
    /* 50/50 split with the form column */
    height: auto;
}

/* Le corps de la colonne IA s'étire sur toute la hauteur de la carte
   (align-items: stretch) pour que le vide sous le formulaire, quand la colonne
   Documents est plus haute, soit exploitable. Ce vide est aujourd'hui absorbé
   par la passerelle « IA externe » (margin-top: auto, voir .source-switch-note)
   qui vient se coller en bas ; le justify-content: center ne s'applique donc
   que si cette passerelle disparaît du bloc. */
.step1-tab-inner>.q-block-ai {
    align-items: stretch;
}

.step1-tab-inner>.q-block-ai>.q-block-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Retain separator inside merged block if needed */
.q-block-sep {
    border-top: 1px solid var(--border);
    margin: 14px 0;
}

/* Bank select row */
.bank-select-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bank-select-row>label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.bank-select-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.bank-select {
    flex: 1;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.88rem;
    background: var(--bg-card);
    /* Changed from bg-input */
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-fast);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23334155' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C2.185 5.355 2.403 5 2.768 5h10.464c.365 0 .583.355.317.658l-4.796 5.482a.5.5 0 0 1-.74 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 30px;
}

.bank-select:hover {
    border-color: var(--primary);
    background-color: var(--bg-subtle);
}

.bank-select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Q-Block Cards */
.q-block {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.q-block:hover {
    border-color: rgba(17, 85, 214, 0.3);
    box-shadow: var(--shadow-sm);
}

.q-block-clickable {
    cursor: pointer;
    align-items: center;
}

.q-block-clickable:hover {
    background: rgba(17, 85, 214, 0.04);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.q-block-ai {
    background: linear-gradient(135deg, rgba(17, 85, 214, 0.06), rgba(14, 165, 160, 0.04));
    border-color: rgba(17, 85, 214, 0.2);
}

.q-block-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.q-block-body {
    flex: 1;
    min-width: 0;
}

.q-block-body h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.q-block-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.q-block-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: center;
}

.q-block-arrow {
    color: var(--text-muted);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.q-block-clickable:hover .q-block-arrow {
    color: var(--primary);
    transform: translateX(3px);
}

/* Bank buttons grid */
.bank-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bank-btn {
    padding: 7px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.bank-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(17, 85, 214, 0.04);
}

/* Small button variant */
.btn-sm {
    padding: 7px 14px;
    font-size: 0.82rem;
}

/* AI Form Stacked (2-row layout): theme on top, fields+button on bottom */
.ai-form-stacked {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.ai-form-stacked .ai-field {
    min-width: unset;
    flex: unset;
    width: 100%;
}

.ai-form-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.ai-form-row .ai-field-sm {
    flex: 1;
    min-width: 80px;
}

/* Thème field gets priority space */
.ai-field-theme {
    flex: 3 !important;
    min-width: 200px;
}

.ai-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.ai-field input,
.ai-field select {
    width: 100%;
    padding: 10px 12px;
    background: #ffffff;
    border: 1.5px solid rgba(17, 85, 214, 0.15);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1a202c;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.dark-mode .ai-field input,
.dark-mode .ai-field select {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(17, 85, 214, 0.4);
    color: #e2e8f0;
}

.ai-field input:focus,
.ai-field select:focus {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--primary-glow);
    outline: none;
}

.dark-mode .ai-field input:focus,
.dark-mode .ai-field select:focus {
    background: rgba(0, 0, 0, 0.3);
}

/* Full-width generate button (sits below fields row) */
.btn-generate-full {
    width: 100%;
    padding: 11px 20px;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 14px var(--primary-glow);
    transition: all var(--transition-fast);
    margin-top: 4px;
}

.btn-generate-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px var(--primary-glow);
}

.btn-generate-full:active {
    transform: translateY(0);
}

/* AI Form Inline (kept for potential other uses) */
.ai-form-inline {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ai-field {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-field label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ai-field input,
.ai-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.88rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-fast);
}

.ai-field input:focus,
.ai-field select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--bg-card);
}

.ai-field-sm {
    flex: 0 0 80px;
    min-width: 70px;
}

/* Thème field: emphasized so the eye is drawn there first */
.ai-field-theme label {
    font-size: 0.85rem;
    color: var(--primary);
    text-transform: none;
    letter-spacing: normal;
}

.ai-field-theme label i {
    margin-right: 2px;
}

.ai-field-theme input {
    border-left: 3px solid var(--primary);
}

.btn-generate-inline {
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    width: auto;
    transition: all var(--transition-fast);
    margin: 0;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 12px var(--primary-glow);
    flex-shrink: 0;
}

.btn-generate-inline:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow);
}

.spinner {
    width: 16px;
    height: 16px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

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

#albert-error {
    color: var(--error);
    font-size: 0.82rem;
    margin-top: 8px;
}

/* AI Prompt Modal Actions */
.ai-prompt-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.ai-send-group-modal {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-send-group-modal label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.ai-send-group-modal select {
    padding: 7px 12px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

/* Scroll-Snap Reveal Animations */
.step-card.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.step-card.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Keep step-card base animation for non-reveal cards */
.step-card:not(.reveal) {
    animation: fadeSlideIn 0.5s ease forwards;
    opacity: 0;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    font-family: 'Inter', sans-serif;
    width: auto;
    margin: 0;
}

.btn-action-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    box-shadow: 0 4px 12px var(--primary-glow);
}

.btn-action-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-action-secondary {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-action-secondary:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(17, 85, 214, 0.06);
    transform: translateY(-1px);
}

/* "Consulter sources" mis en valeur (même logique que .ai-field-theme : accent
   de couleur + bordure gauche pour attirer l'œil en premier sur cette action). */
.btn-consult-sources {
    background: rgba(17, 85, 214, 0.06);
    color: var(--primary);
    border: 1.5px solid rgba(17, 85, 214, 0.25);
    border-left: 3px solid var(--primary);
    font-weight: 700;
}

[data-theme="dark"] .btn-consult-sources {
    background: rgba(17, 85, 214, 0.14);
    border-color: rgba(17, 85, 214, 0.4);
}

.btn-consult-sources:hover {
    background: rgba(17, 85, 214, 0.12);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-glow);
}

/* Custom Dropdown for Banks */
.bank-dropdown-container {
    position: relative;
    display: inline-block;
}

.bank-dropdown-list {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 640px;
    max-width: calc(100vw - 24px);
    max-height: min(720px, calc(100vh - 140px));
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--transition-base);
}

.bank-dropdown-list.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.bank-dropdown-filters {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    z-index: 1;
}

.bank-filter-search {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.bank-filter-search:focus {
    border-color: var(--primary);
    outline: none;
}

.bank-filter-row {
    display: flex;
    gap: 6px;
}

.bank-filter-select {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.78rem;
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.bank-filter-select:focus {
    border-color: var(--primary);
    outline: none;
}

/* .bank-dropdown-items n'a volontairement aucun style : le défilement est géré
   par .bank-dropdown-list (parent) et la barre de filtres reste collée en haut
   grâce à position: sticky. (Ruleset vide supprimé — signalé par le validateur
   CSS ; ne pas le réintroduire, ce commentaire le remplace.) */

.bank-dropdown-empty {
    padding: 16px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.bank-dropdown-item {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.bank-dropdown-item:last-child {
    border-bottom: none;
}

.bank-dropdown-item:hover {
    background: var(--bg-subtle);
}

.bank-dropdown-item-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.bank-dropdown-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.bank-dropdown-badge {
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.bank-dropdown-badge-subject {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    text-transform: none;
    font-weight: 700;
    margin-right: auto;
}

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

.badge-college {
    background: #e0f2fe;
    color: #0369a1;
}

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

.badge-superieur {
    background: #ede9fe;
    color: #5b21b6;
}

.badge-autre {
    background: #f3f4f6;
    color: #374151;
}

[data-theme="dark"] .badge-primaire {
    background: rgba(22, 101, 52, 0.2);
}

[data-theme="dark"] .badge-college {
    background: rgba(3, 105, 161, 0.2);
}

[data-theme="dark"] .badge-lycee {
    background: rgba(146, 64, 14, 0.2);
}

[data-theme="dark"] .badge-superieur {
    background: rgba(91, 33, 182, 0.2);
}

[data-theme="dark"] .badge-autre {
    background: rgba(55, 65, 81, 0.2);
}

/* Bank dropdown: bottom-sheet on mobile */
@media (max-width: 600px) {
    .bank-dropdown-list {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
        transform: translateY(10px);
        z-index: 10001;
    }

    .bank-dropdown-list.show {
        transform: translateY(0);
    }

    .bank-dropdown-item-meta {
        flex-wrap: wrap;
    }
}

/* Questions Table */
.questions-section {
    margin-top: 4px;
}

.questions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.questions-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.questions-header .q-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    margin-left: 8px;
}

/* Scroll wrapper pour la banque de questions */
.q-table-scroll {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
}

.q-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.q-table thead {
    background: var(--bg-subtle);
}

.q-table th {
    text-align: left;
    padding: 12px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
}

.q-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.q-table tbody tr:last-child td {
    border-bottom: none;
}

.q-table tbody tr:hover {
    background: var(--bg-subtle);
}

.q-table input,
.q-table textarea {
    width: 100%;
    padding: 7px 10px;
    margin: 0;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.84rem;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

.q-table textarea {
    resize: none;
    overflow-y: hidden;
    line-height: 1.4;
    min-height: 38px;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.q-table input:focus,
.q-table textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--bg-card);
}

.q-table .input-correct {
    border-color: var(--success);
    background: var(--success-bg);
}

.q-table .input-correct:focus {
    box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.15);
}

.q-table .input-wrong {
    border-color: #ff7675;
}

.q-table .input-duration {
    border-color: var(--warning);
    background: var(--warning-bg);
    width: 100%;
    max-width: 65px;
    text-align: center;
}

/* Drag handle colonne */
.q-table .drag-handle {
    color: var(--text-muted);
    cursor: grab;
    text-align: center;
    font-size: 0.85rem;
    padding: 8px 4px;
    user-select: none;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.q-table tr:hover .drag-handle {
    opacity: 1;
}

/* Bouton édition */
.btn-edit-q {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 3px;
    width: auto;
    margin: 0;
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.btn-edit-q:hover {
    background: var(--bg-subtle);
    transform: scale(1.15);
}

/* Couleurs des en-têtes selon le type de colonne */
.q-table th.th-correct {
    color: var(--success);
}

.q-table th.th-wrong {
    color: #e17055;
}


.btn-delete-q {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 3px;
    width: auto;
    margin: 0;
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.btn-delete-q:hover {
    color: var(--error);
    background: var(--error-bg);
    transform: scale(1.15);
}

.empty-table-msg {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 30px;
}

/* ---------- Onglets d'étape (source des questions / mode de jeu) ----------
   Composant partagé par l'étape 1 et l'étape 2, logé à DROITE de l'en-tête
   d'étape (`.step-tabs`) : il tient dans la hauteur du bloc titre + accroche,
   et ne coûte donc aucune rangée. C'est aussi pourquoi ce n'est plus un onglet
   « raccordé au panneau du dessous » (bandeau à coins hauts arrondis + bord
   inférieur commun) mais un **contrôle segmenté** autonome, à coins arrondis
   sur les quatre côtés. */
/* `flex: 0 1 540px` : la colonne vise 540 px et peut rétrécir si le titre a
   besoin de place, mais ne s'étire pas au-delà. `align-items: stretch` fait
   occuper toute cette largeur à la barre — combiné au `flex: 1 1 0` des
   onglets, les deux segments sont de largeur égale (et généreuse) plutôt que
   collés à droite au ras de leur libellé. */
.step-tabs {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 1 540px;
    min-width: 0;
}

.mode-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

/* Ligne de description sous la barre d'onglets : une phrase sur le mode/la
   source survolé(e), à défaut sur celui/celle qui est actif(ve). */
.tabs-desc {
    margin: 0;
    padding: 8px 4px 0;
    text-align: right;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted);
    min-height: 1.4em;
    transition: color var(--transition-fast);
}

.mode-tabs::-webkit-scrollbar {
    display: none;
}

.mode-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.mode-tab:not(.active):hover {
    color: var(--text-primary);
    background: rgba(127, 127, 127, 0.12);
}

.mode-tab.active {
    color: var(--primary);
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

/* Pastille d'onglet (étapes 1 et 2) : grise au repos, couleur principale
   active. Dedans, une icône FontAwesome (étape 1) ou un pictogramme SVG
   .lq-glyph (étape 2, v8.3.6) — l'un comme l'autre suivent le thème. */
.mode-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: var(--text-muted);
    color: var(--bg-card);
    font-size: 0.85rem;
    opacity: 0.55;
    transition: background-color 0.25s ease, opacity 0.25s ease;
}

.mode-tab.active .mode-tab-icon {
    background: var(--primary);
    opacity: 1;
}

.mode-tab:not(.active):hover .mode-tab-icon {
    opacity: 0.8;
}

/* Pictogrammes des modes de jeu (v8.3.6) : sprite <symbol> en tête
   d'index.html, dessiné en currentColor. Remplacent les vignettes PNG, qui
   restaient bleues quel que soit le thème. */
.lq-glyph {
    display: block;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

.mode-tab-icon .lq-glyph {
    width: 18px;
    height: 18px;
}

.source-card-icon .lq-glyph {
    width: 32px;
    height: 32px;
}

.mode-tab-label {
    white-space: nowrap;
}

@media (max-width: 700px) {
    /* Plus la place de tenir à droite du titre : la colonne d'onglets repasse
       sous l'en-tête, sur toute la largeur. Le partage à parts égales des
       onglets vient de la règle de base (`.mode-tab { flex: 1 1 0 }`). */
    .step-header {
        flex-wrap: wrap;
    }

    .step-tabs {
        margin-left: 0;
        flex: 1 1 100%;
    }

    .mode-tabs {
        gap: 4px;
        padding: 4px;
    }

    .mode-tab {
        padding: 9px 8px;
        font-size: 0.82rem;
        gap: 7px;
    }

    .mode-tab-label {
        white-space: normal;
    }

    .mode-tab-icon {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }

    .tabs-desc {
        text-align: left;
        padding-top: 9px;
        font-size: 0.83rem;
    }
}

/* Tab content visibility */
.mode-tab-content {
    display: none;
    animation: fadeTabIn 0.3s ease;
}

.mode-tab-content.active {
    display: block;
}

@keyframes fadeTabIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Écran d'entrée à deux blocs (étapes 1 ET 2) ----------
   `#source-picker` (IA souveraine / Mes questions) et `#mode-picker`
   (Classique / Scan papier) partagent ce composant. Choisir un bloc le masque
   et révèle la barre d'onglets correspondante dans l'en-tête d'étape.

   Grid (et non flex) : les colonnes `1fr` sont égales par construction et les
   items s'étirent sur la hauteur de la ligne — les cartes gardent donc
   exactement la même taille quel que soit le volume de texte de leur
   description. `auto-fit` bascule seul sur une colonne sous ~516 px. */
.source-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    max-width: 856px;
    margin: 0 auto 20px;
}

/* Largeur/hauteur pilotées par la grille parente (pas de flex/max-width ici,
   sinon les cartes reprennent des tailles différentes). C'est un <button> et
   non un <div> : cliquable au clavier et annoncé comme tel. */
.source-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 24px 16px;
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
    box-shadow: var(--shadow-sm);
    font-family: inherit;
}

.source-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: scale(1.02);
}

.source-card-icon {
    font-size: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.source-card-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.source-card-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

[data-theme="dark"] .source-card {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Mode de jeu mémorisé (#mode-picker) : liseré bleu discret pour signaler, dès
   l'arrivée sur la page, lequel des deux blocs sera repris. Volontairement plus
   léger que le survol — c'est un repère, pas une sélection en cours : bordure
   1 px en bleu semi-transparent, sans halo. Absent tant qu'aucun mode n'a été
   choisi (markRememberedMode). */
.source-card.is-remembered,
[data-theme="dark"] .source-card.is-remembered {
    border-color: rgba(17, 85, 214, 0.4);
}

/* Passerelle discrète depuis « IA souveraine » vers « IA externe ».
   Vit au bas de la colonne IA (et non plus en pleine largeur sous les deux
   colonnes) : centrée, et le libellé passe au-dessus du bouton dès que la
   colonne est trop étroite pour les tenir côte à côte. */
.source-switch-note {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 18px;
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}

/* Colonnes côte à côte : la passerelle est poussée tout en bas de la colonne
   IA, ce qui comble le vide laissé sous le bouton « Générer » quand la colonne
   Documents est plus haute. En dessous de 768px les colonnes s'empilent : le
   margin-top: 16px ci-dessus reprend la main. */
@media (min-width: 769px) {
    .step1-tab-inner>.q-block-ai>.q-block-body>.source-switch-note {
        margin-top: auto;
    }
}

.source-switch-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Source detail panels */
.source-panel {
    animation: fadeTabIn 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Retour depuis une sous-page (ex : IA externe → IA souveraine) */
.source-subpanel-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.source-subpanel-back:hover {
    color: var(--primary);
}

/* ---------- Options Accordion ---------- */
.options-accordion {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    margin-top: 16px;
    overflow: visible;
    /* les tooltips des option-cards doivent pouvoir dépasser */
}

.options-accordion summary {
    padding: 18px 24px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
    border-radius: var(--radius-md);
}

.options-accordion summary::-webkit-details-marker {
    display: none;
}

.options-accordion summary::before {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform var(--transition-base);
}

.options-accordion[open] summary::before {
    transform: rotate(180deg);
}

.options-accordion summary:hover {
    color: var(--primary);
    background: rgba(0, 113, 227, 0.04);
}

.options-accordion .options-grid {
    padding: 50px 12px 18px;
    /* padding-top réservé à l'espace des tooltips */
}

/* ---------- Bloc d'options toujours visible (v6.8) ----------
   Les options de jeu vivaient dans un <details> replié : personne ne les
   ouvrait. Même habillage que l'accordéon, mais dépliées en permanence — les
   tuiles ont été réduites en contrepartie (voir .option-card). */
.options-block {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    margin-top: 16px;
    overflow: visible;
    /* les tooltips des option-cards doivent pouvoir dépasser */
}

/* Pas de bandeau de titre : les options étant dépliées et surmontées de la
   ligne de description du mode, un en-tête « OPTIONS » ne coûtait que de la
   hauteur. Les infobulles de la 1re rangée s'ouvrent hors du bloc (tous les
   ancêtres sont en overflow visible), plus besoin de leur réserver la place. */
.options-block .options-grid {
    padding: 14px 12px 16px;
}

/* Dark mode adjustments for new components */
[data-theme="dark"] .options-accordion,
[data-theme="dark"] .options-block {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Option input number (for scan config) */
.option-input-number {
    width: 70px;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.option-input-number:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--bg-card);
}

/* Scan Card Configuration Panel */
.scan-card-config {
    margin-top: 20px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
}

/* Dans l'accordéon de l'étape 2 : pas de boîte dans la boîte */
.options-accordion>.scan-card-config {
    margin-top: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 24px 20px;
}

.scan-card-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.scan-card-config-header h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.scan-card-config-header h4 i {
    color: var(--primary);
}

/* Bouton « Imprimer les cartes » : aligné sur la hauteur du champ numérique voisin */
.btn-action.btn-scan-print {
    padding: 6px 14px;
    font-size: 0.82rem;
}

.scan-card-config-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.scan-active-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    padding: 4px 12px;
    background: var(--primary-glow);
    border-radius: var(--radius-pill);
}

.scan-card-grid-config {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}

.scan-card-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    transition: all 0.2s ease;
    cursor: pointer;
}

.scan-card-chip:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.scan-card-chip.inactive {
    opacity: 0.4;
    background: var(--bg-subtle);
}

.scan-card-chip.inactive .scan-card-name-input {
    pointer-events: none;
}

.scan-card-chip-num {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.scan-card-chip.inactive .scan-card-chip-num {
    background: var(--border);
    color: var(--text-muted);
}

.scan-card-chip-toggle {
    display: none;
}

.scan-card-name-input {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.scan-card-name-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.scan-card-name-input::placeholder {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.75rem;
}

@media (max-width: 600px) {
    .scan-card-grid-config {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .scan-card-config-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .scan-card-config-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .scan-card-config-actions .option-input-group {
        justify-content: space-between;
        width: 100%;
    }

    .scan-card-config-actions > div:not(.option-input-group) {
        display: flex;
        gap: 8px;
        width: 100%;
    }

    .scan-card-config-actions > div:not(.option-input-group) button {
        flex: 1;
        justify-content: center;
    }

    .scan-active-count {
        text-align: center;
        align-self: center;
    }
}

/* Tournament placeholder */
.tournament-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.placeholder-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.tournament-placeholder h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.tournament-placeholder p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Scan Lobby */
.scan-session-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 10px 0 20px;
    flex-wrap: wrap;
}

.scan-session-code {
    font-size: 1rem;
    color: var(--text-secondary);
}

.scan-session-code strong {
    color: var(--primary);
    letter-spacing: 2px;
    font-size: 1.15rem;
}

.scan-session-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.status-waiting {
    background: var(--warning);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.status-active {
    background: var(--success);
    animation: statusPulse 1.2s ease-in-out infinite;
}

.status-dot.status-ended {
    background: var(--text-muted);
}

@keyframes statusPulse {

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

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* Plus large que le .card standard (900px) : les deux voies caméra tiennent
   côte à côte au lieu de s'empiler. */
#screen-scan-lobby {
    max-width: 1100px;
}

.scan-lobby-info {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 24px;
}

.scan-lobby-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scan-lobby-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
}

.scan-lobby-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Scan Steps Grid */
.scan-steps-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.scan-step-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: all var(--transition-base);
}

.scan-step-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.scan-step-number {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 4px 12px var(--primary-glow);
}

.scan-step-body {
    flex: 1;
}

.scan-step-body h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.scan-step-body p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
}

.scan-step-qr-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.qr-container {
    display: flex;
    justify-content: center;
}

@media (max-width: 600px) {
    .scan-steps-grid {
        gap: 12px;
    }

    .scan-step-card {
        padding: 16px;
    }
}

/* Les blocs d'étapes sont du texte de consigne : centré, il se lit mal et les
   pictogrammes se détachent sur leur propre ligne. Alignement à gauche. */
.scan-step-body,
.scan-step-body h3,
.scan-step-body p {
    text-align: left;
}

.scan-step-body h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Session scan : guidage d'appairage (v7.6) ----------
   Deux chemins existent pour la caméra (téléphone OU webcam du PC) et les
   confondre ouvrait DEUX scanners, dont le second éjectait le premier
   (bug v7.2). Ils sont donc présentés comme des options exclusives, la voie
   téléphone étant mise en avant. */
.scan-step-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 0 !important;
    font-size: 0.8rem !important;
    color: var(--text-muted);
    line-height: 1.45;
}

.scan-step-note i { margin-top: 2px; color: var(--primary); }

.scan-step-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 0 !important;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--warning-bg);
    border: 1px solid var(--warning);
    color: var(--text-secondary);
    font-size: 0.82rem !important;
    line-height: 1.45;
}

.scan-step-warning i { margin-top: 2px; color: var(--warning); }

.scan-camera-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 6px;
}

.scan-camera-option {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Les textes de consigne restent alignés à gauche et en pleine largeur ;
   seuls le QR code et le bouton d'action se centrent (align-items du parent). */
.scan-camera-option-head,
.scan-camera-option > p,
.scan-camera-option .scan-step-note {
    align-self: stretch;
    text-align: left;
}

.scan-camera-option p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 12px;
}

.scan-camera-option-primary {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.scan-camera-option-alt { background: var(--bg-subtle); }

.scan-camera-option-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.scan-camera-option-head i { color: var(--primary); }

.scan-camera-badge {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--success-bg);
    color: #00795f;
}

.scan-camera-qr-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.scan-launch-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.scan-launch-note i { margin-top: 2px; color: var(--warning); }

/* ---------- Effectif ajustable depuis l'écran de session ----------
   Corriger l'effectif imposait de fermer la session et de tout recommencer.
   Il devient modifiable ici, quiz lancé compris. */
.scan-roster-adjust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    margin-bottom: 18px;
    background: var(--bg-subtle);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
}

.scan-roster-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.scan-roster-head i { color: var(--primary); }

.scan-roster-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scan-roster-step {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.scan-roster-step:hover { border-color: var(--primary); color: var(--primary); }

.scan-roster-input {
    width: 90px;
    height: 44px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 0;
}

.scan-roster-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.45;
    max-width: 520px;
    margin: 0;
}


/* ---------- Step 2: Options ----------
   `auto-fit` plutôt qu'un nombre de colonnes figé : les options étant désormais
   dépliées en permanence, la grille se resserre d'elle-même sur les écrans
   étroits sans média query, et remplit la largeur sur les grands. */
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
    overflow: visible;
    /* permet aux tooltips de dépasser la grille */
}

.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
    height: 96px;
    /* Force tous les boutons à la même taille */
    text-align: center;
    box-sizing: border-box;
    overflow: visible;
    /* tooltips must not be clipped */
}

.option-card:hover {
    border-color: var(--primary);
    background: rgba(17, 85, 214, 0.04);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.option-card.active {
    border-color: var(--primary);
    background: rgba(17, 85, 214, 0.06);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ---------- Tooltips sur les option-cards ---------- */
.option-card[data-tooltip] {
    position: relative;
}

.option-card[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 260px;
    padding: 9px 12px;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #1a1a2e);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.45;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    white-space: pre-line;
    text-align: left;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Petite flèche pointant vers le bas */
.option-card[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: var(--border, #e2e8f0);
    pointer-events: none;
    z-index: 101;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.option-card[data-tooltip]:hover::before,
.option-card[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.option-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.option-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.option-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    display: block;
    width: 100%;
    word-wrap: break-word;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    margin-top: auto;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d0d5e0;
    border-radius: 22px;
    transition: all var(--transition-fast);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked+.toggle-slider {
    background: var(--primary);
}

.toggle-switch input:checked+.toggle-slider::before {
    transform: translateX(18px);
}

/* ---------- Step 3: Launch ---------- */
.launch-section {
    text-align: left;
    padding: 10px 0;
}

.launch-section p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 24px;
    max-width: 600px;
    font-weight: 500;
}

.btn-launch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 48px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 6px 25px var(--primary-glow);
    width: auto;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow: hidden;
}

.btn-launch::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
}

.btn-launch:hover::before {
    left: 100%;
}

.btn-launch:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(17, 85, 214, 0.35);
}

.btn-launch:active {
    transform: translateY(-1px);
}

.btn-launch i {
    font-size: 1.3rem;
}

/* ---------- Other Screens (game, lobby, etc.) ---------- */
/* Keep .card system for non-home screens */
.card {
    background: var(--bg-card);
    width: 100%;
    max-width: 900px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    padding: 30px;
    text-align: center;
    display: none;
    margin: 30px auto;
}

.card.active {
    display: block;
}

/* Hide home screen via card system but show via custom layout */
#screen-home {
    max-width: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    margin: 0;
}

#screen-home.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

h1 {
    color: var(--primary);
    margin: 0 0 10px 0;
    font-weight: 800;
    font-size: 1.6rem;
}

.subtitle {
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

/* General input styles */
input,
textarea {
    font-family: 'Inter', sans-serif;
}

/* General button styles */
button {
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

button:hover {
    transform: translateY(-2px);
}

.btn-host {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 1.05rem;
    font-weight: 700;
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 0 4px 15px var(--primary-glow);
}

.btn-host:hover {
    box-shadow: 0 6px 25px var(--primary-glow);
}

.btn-close {
    background: var(--error);
    width: auto;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    float: right;
    border: none;
    color: white;
    border-radius: var(--radius-pill);
}

.btn-export {
    background: var(--text-primary);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    margin-bottom: 10px;
}

/* Player Grid */
.player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 20px;
    max-height: 300px;
    overflow-y: auto;
}

.player-badge {
    background: var(--bg-subtle);
    padding: 10px 35px 10px 15px;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 2px solid transparent;
    position: relative;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.player-badge.ready {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success);
}

.badge-delete {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
}

.badge-delete:hover {
    color: var(--error);
}

/* Badge « en ligne » (membres d'une équipe dans le lobby) : la croix devient un
   enfant flex normal → bien alignée, plus de padding réservé pour l'absolu. */
.player-badge--inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px;
    padding: 6px 10px;
    font-size: 0.85rem;
    white-space: normal;
}
.player-badge--inline .badge-delete {
    position: static;
    transform: none;
    margin-left: 2px;
    color: var(--error);
}

/* Timer */
.timer-bar {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    margin: 20px 0;
    overflow: hidden;
    position: relative;
}

.timer-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--primary-light));
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 4px;
    transition: width 0.1s linear;
}

/* Image container */
.q-image-container {
    margin: 15px 0;
    display: none;
}

.q-image {
    max-width: 100%;
    max-height: 250px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Tabs */
.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.tab-btn {
    background: var(--bg-subtle);
    color: var(--text-muted);
    flex: 1;
    padding: 10px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.92rem;
    transition: all var(--transition-fast);
    border: 1px solid var(--border);
}

.tab-btn:hover {
    background: rgba(17, 85, 214, 0.06);
}

.tab-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Ranking */
.ranking-list {
    position: relative;
    min-height: 200px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg-card);
    transition: height 0.5s ease;
}

.ranking-item {
    position: absolute;
    width: 100%;
    height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, border-color 0.4s ease;
    box-sizing: border-box;
}

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

.ranking-item:hover {
    background: var(--bg-subtle);
}

.rank-1 {
    background: #fff8e1 !important;
    color: #d35400;
    box-shadow: inset 4px 0 0 #f39c12;
}

/* Results */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    text-align: left;
}

.result-item {
    padding: 16px 18px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    position: relative;
    font-weight: 700;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.result-item.correct {
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: white;
    opacity: 1;
    border: none;
}

.result-item.incorrect {
    background: linear-gradient(135deg, #d63031, #e17055);
    color: white;
    opacity: 0.75;
}

.result-count {
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    min-width: 24px;
    text-align: center;
    font-size: 0.9rem;
}

.logo-in-game {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 54px;
    height: 54px;
    z-index: 100;
    overflow: hidden;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.logo-in-game img {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 1;
}

/* Floating room code */
.floating-room-code {
    position: fixed;
    bottom: 12px;
    left: 12px;
    background: var(--text-primary);
    color: white;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: var(--shadow-md);
    z-index: 9999;
    letter-spacing: 1px;
    display: none;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--border);
    align-items: center;
    gap: 8px;
}

.floating-room-code:hover {
    background: var(--primary);
    border-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.floating-room-code i {
    font-size: 1rem;
    color: var(--accent-light);
}

/* MathJax */
.mjx-chtml {
    font-size: 1.2em !important;
}

.hidden {
    display: none !important;
}

/* File drop */
.file-drop {
    border: 3px dashed var(--border);
    padding: 30px;
    color: var(--text-muted);
    cursor: pointer;
    margin-bottom: 15px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.file-drop:hover,
.file-drop.dragover {
    background: var(--bg-subtle);
    border-color: var(--primary);
    color: var(--primary);
}

/* Launch Section */
.launch-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 10px 0;
    gap: 16px;
}

.launch-section p {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0;
}

/* ---------- Footer ----------
   Le composant vit désormais dans assets/css/footer.css, partagé par toutes
   les pages de contenu (v7). Les règles qui se trouvaient ici en dupliquaient
   la moitié et ne s'appliquaient qu'à index.html. */

/* ---------- Responsive ---------- */
@media (max-width: 1150px) {
    /* Sous cette largeur, marque + accroche + 4 actions ne tiennent plus sur
       une ligne. Plutôt que de masquer l'accroche, on la renvoie sur une 2e
       ligne du header (celui-ci est déjà en flex-wrap) : elle reste visible
       quelle que soit la largeur. Même mécanique que .header-stepper. */
    .header-tagline {
        order: 3;
        width: 100%;
        margin: 2px 0 0;
        padding: 6px 0 0;
        border-left: none;
        border-top: 1px solid var(--border);
        justify-content: center;
        text-align: center;
    }
}

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

    .header-stepper {
        order: 3;
        width: 100%;
        justify-content: center;
        padding-top: 4px;
    }
}

@media (max-width: 768px) {
    .main-container {
        width: 95%;
        padding: 20px 14px 30px;
        gap: 20px;
    }

    .step-card {
        padding: 22px 18px;
    }

    .ai-form-inline {
        flex-direction: column;
    }

    .ai-field,
    .ai-field-sm {
        flex: unset;
        min-width: unset;
        width: 100%;
    }

    .btn-generate-inline {
        width: 100%;
        justify-content: center;
    }

    /* Deux colonnes plutôt qu'une : les options sont dépliées en permanence,
       une colonne unique donnerait 8 tuiles à faire défiler. */
    .options-grid {
        grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    }

    .btn-action {
        justify-content: center;
    }

    .header-actions .header-link span {
        display: none;
    }

    .header-actions .visual-theme-btn-icon {
        display: inline;
    }

    .header-stepper {
        display: none;
    }

    .app-header {
        padding: 12px 16px;
    }

    .q-table {
        font-size: 0.78rem;
        min-width: 700px;
    }

    .q-table th,
    .q-table td {
        padding: 6px 4px;
    }

    .q-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Visual scroll hint: subtle gradient fade on right edge */
        background:
            linear-gradient(to right, var(--bg-card) 20px, transparent),
            linear-gradient(to left, var(--bg-card) 20px, transparent),
            linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent),
            linear-gradient(to left, rgba(0,0,0,0.08) 1px, transparent);
        background-position: left, right, left, right;
        background-size: 40px 100%, 40px 100%, 1px 100%, 1px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local, scroll, scroll;
    }

    .btn-launch {
        width: 100%;
        padding: 16px 24px;
    }

    .ai-prompt-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-send-group-modal {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .step-header {
        gap: 10px;
    }

    .logo-in-game {
        width: 36px;
        height: 36px;
        top: 12px;
        left: 12px;
        border-radius: 8px;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .step-title {
        font-size: 1.05rem;
    }

    .header-brand img {
        width: 34px;
        height: 34px;
    }

    .header-brand span {
        font-size: 1.15rem;
    }

    /* Header sticky : on limite la hauteur mangée par l'accroche sur 2 lignes. */
    .header-tagline {
        font-size: 0.72rem;
    }

    .q-block {
        padding: 14px;
    }

    .q-block-icon {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }
}

/* ---------- AI Form Select ---------- */
.ai-form .form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    background: #ffffff;
    color: #1a1a2e;
    outline: none;
    transition: all var(--transition-fast);
    margin: 0;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    appearance: auto;
}

.ai-form .form-group select:focus {
    border-color: rgba(255, 255, 255, 0.9);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

/* ---------- Join Link Display (Lobby) ---------- */
.join-link-display {
    text-align: center;
    margin: 10px auto 0;
    padding: 12px 20px;
    max-width: 500px;
}

/* ---------- Edit Button ---------- */
.btn-edit-q {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 6px;
    width: auto;
    margin: 0 2px;
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.btn-edit-q:hover {
    color: var(--primary);
    background: rgba(17, 85, 214, 0.08);
    transform: scale(1.15);
}

/* ---------- Edit Modal ---------- */
.edit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

/* Dialogues qui s'ouvrent PAR-DESSUS une autre fenêtre (confirmation,
   information, choix d'import) : déclarés plus haut dans index.html que
   « Ma bibliothèque » ou « Mes classes », ils passaient dessous à z-index égal
   — la poubelle d'un quiz du Nuage ouvrait une confirmation invisible. Sous
   le toast (20000), qui doit rester lisible par-dessus tout. */
#confirm-modal,
#alert-modal,
#import-mode-modal,
#download-format-modal {
    z-index: 10100;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.edit-modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 600px;
    animation: slideUp 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

#preview-all-modal .edit-modal {
    max-width: 850px;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- RAG auto-generate offer modal ---------- */
.rag-autogen-icon {
    font-size: 2.6rem;
    color: var(--primary);
    margin-bottom: 14px;
    animation: autogenBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes autogenBounce {
    0% {
        transform: scale(0.3) rotate(-15deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.15) rotate(6deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.rag-autogen-footer {
    flex-direction: column;
    align-items: stretch;
}

.rag-autogen-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
}

/* ---------- Animated Podium ---------- */
.podium-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 15px;
    height: 300px;
    margin: 40px auto;
    padding: 0 20px;
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
}

.podium-name {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 5px;
    text-align: center;
    word-break: break-all;
}

.podium-score {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.podium-bar {
    width: 100%;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 15px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.9);
    animation: growUp 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: bottom;
    transform: scaleY(0);
}

.place-1 .podium-bar {
    height: 200px;
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    box-shadow: 0 -5px 20px rgba(241, 196, 15, 0.5);
    animation-delay: 1.6s;
}

.place-2 .podium-bar {
    height: 140px;
    background: linear-gradient(135deg, #bdc3c7, #95a5a6);
    animation-delay: 0.8s;
}

.place-3 .podium-bar {
    height: 100px;
    background: linear-gradient(135deg, #e67e22, #d35400);
    animation-delay: 0s;
}

.place-1 {
    order: 2;
    z-index: 3;
}

.place-2 {
    order: 1;
    z-index: 2;
}

.place-3 {
    order: 3;
    z-index: 1;
}

@keyframes growUp {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}

.edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
}

.edit-modal-header h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.edit-modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all var(--transition-fast);
    margin: 0;
}

.edit-modal-close:hover {
    background: var(--error-bg);
    color: var(--error);
}



.edit-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-field label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.edit-field input,
.edit-field textarea,
.classes-save-row input,
.nuage-picker-new input,
.img-search-bar input {
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-fast);
    resize: vertical;
    width: 100%;
    margin: 0;
}

.edit-field input:focus,
.edit-field textarea:focus,
.classes-save-row input:focus,
.nuage-picker-new input:focus,
.img-search-bar input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--bg-card);
}

.edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

/* Nouvelles classes UX pour les modales */
.edit-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.edit-section:last-child {
    margin-bottom: 0;
}

.edit-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.edit-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.answer-correct textarea {
    border-color: var(--success) !important;
    background-color: rgba(46, 204, 113, 0.05) !important;
}

.answer-correct label {
    color: var(--success) !important;
}

.answer-wrong textarea {
    background-color: var(--bg-card);
}

.small-field {
    max-width: 140px;
}

.edit-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
}

/* ---------------------------------------------------------------
   Bibliothèque de quiz (modale #quiz-library-modal, v7)
   Ces classes étaient référencées par renderSavedQuizzes() depuis
   plusieurs versions sans qu'aucune règle ne leur corresponde.
   --------------------------------------------------------------- */
.library-desc {
    margin: 0 0 16px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.library-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md, 12px);
}

.library-empty i {
    font-size: 1.8rem;
    opacity: 0.45;
    margin-bottom: 10px;
    display: block;
}

.library-empty p {
    margin: 0;
    font-size: 0.9rem;
}

.library-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.saved-quiz-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.saved-quiz-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.saved-quiz-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.saved-quiz-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    overflow-wrap: anywhere;
}

.saved-quiz-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.saved-quiz-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Sous 560 px, la ligne passe en deux rangées plutôt que d'écraser le nom. */
@media (max-width: 560px) {
    .saved-quiz-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .saved-quiz-actions {
        justify-content: flex-end;
    }
}

/* ---------------------------------------------------------------
   Bibliothèque privée — Nuage (v8.0.2)
   Bloc « Mon Nuage » en tête de #quiz-library-modal, puis la liste
   « Ce navigateur ». Couleurs : jetons uniquement (clair et sombre).
   --------------------------------------------------------------- */
.library-modal .edit-modal-body {
    gap: 22px;
}

/* « Télécharger » (v8.3.4) : bouton secondaire du pied, sans le survol rouge
   de « Fermer » (rien n'est annulé ni effacé). */
.library-modal .library-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-color: var(--primary);
    color: var(--primary);
}

.library-modal .library-download:hover {
    border-color: var(--primary-dark);
    color: var(--primary-dark);
    background: var(--bg-subtle);
}

[data-theme="dark"] .library-modal .library-download,
[data-theme="dark"] .library-modal .library-download:hover {
    border-color: var(--primary-light);
    color: var(--primary-light);
}

.library-section-title,
.nuage-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.library-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.library-section-title i {
    color: var(--text-muted);
}

.library-local .library-desc {
    margin-bottom: 12px;
}

.nuage-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
}

.nuage-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.nuage-logo {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--accent-text);
    color: var(--text-on-primary);
    font-size: 1.15rem;
}

[data-theme="dark"] .nuage-logo {
    color: var(--bg-page);
}

.nuage-head-text {
    min-width: 0;
}

.nuage-sub {
    margin: 3px 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.nuage-login,
.nuage-connected {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-nuage-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 12px 18px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--text-on-primary);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-nuage-flow:hover:not(:disabled) {
    background: var(--primary-dark);
    box-shadow: var(--shadow-glow);
}

.btn-nuage-flow:focus-visible {
    outline: 3px solid var(--primary-glow);
    outline-offset: 2px;
}

.btn-nuage-flow:disabled {
    cursor: progress;
    opacity: 0.85;
}

.btn-nuage-flow.is-waiting i {
    animation: nuage-pulse 1.4s ease-in-out infinite;
}

@keyframes nuage-pulse {
    50% { opacity: 0.35; }
}

.nuage-hint,
.nuage-privacy,
.nuage-field-help {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.nuage-hint {
    text-align: center;
}

.nuage-privacy a {
    color: var(--accent-text);
    font-weight: 600;
}

.nuage-field-help mark {
    padding: 0 1px;
    border-radius: 4px;
    background: var(--warning-bg);
    color: var(--text-primary);
    font-weight: 700;
}

.nuage-flow-info {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.nuage-flow-info p {
    margin: 0;
}

.nuage-flow-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.nuage-stay {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.nuage-stay input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.nuage-manual {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.nuage-manual summary {
    padding: 10px 12px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
}

.nuage-manual[open] {
    padding-bottom: 12px;
}

.nuage-manual[open] summary {
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.nuage-manual > :not(summary) {
    margin-left: 12px;
    margin-right: 12px;
}

.nuage-manual .edit-field,
.nuage-manual .edit-row-2 {
    margin-bottom: 10px;
}

.nuage-steps {
    margin-top: 0;
    margin-bottom: 12px;
    padding-left: 20px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.nuage-error {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    background: var(--error-bg);
    color: var(--error);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.45;
}

[data-theme="dark"] .nuage-error {
    color: #fca5a5;
}

.nuage-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
}

.nuage-account {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.nuage-account i {
    color: var(--accent-text);
}

.nuage-account-server {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.nuage-toolbar-actions {
    display: flex;
    gap: 6px;
}

.nuage-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.nuage-link-btn:hover {
    background: var(--bg-card);
    border-color: var(--border);
}

.nuage-status {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.nuage-status.is-busy::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    border: 2px solid var(--accent-line);
    border-top-color: var(--accent-text);
    border-radius: 50%;
    animation: nuage-spin 0.8s linear infinite;
}

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

.nuage-status.is-error {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    background: var(--error-bg);
    color: var(--error);
    font-weight: 600;
}

[data-theme="dark"] .nuage-status.is-error {
    color: #fca5a5;
}

.nuage-panel .library-empty {
    background: var(--bg-card);
}

.btn-nuage-send {
    background: none;
    border: none;
    color: var(--accent-text);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 6px;
    width: auto;
    margin: 0;
    border-radius: 6px;
    transition: background var(--transition-fast);
}

.btn-nuage-send:hover {
    background: var(--accent-soft);
}

/* Destination de l'enregistrement (modale « Sauvegarder le quiz ») */
.save-dest {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.save-dest legend {
    width: 100%;
    margin-bottom: 8px;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
}

.save-dest-option {
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.save-dest-option:has(input:checked) {
    border-color: var(--primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.save-dest-option input {
    width: auto;
    margin: 0;
    accent-color: var(--primary);
}

/* Emplacement du dossier « Live Quiz » (v8.3.7) : ligne « Dossier : … » des
   trois fenêtres du Nuage, puis sélecteur de dossiers de « Ma bibliothèque ».
   Jetons uniquement (clair et sombre). */
.nuage-folder-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-secondary);
}

.nuage-folder-line > i {
    color: var(--accent-text);
}

.nuage-folder-path {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.nuage-folder-line .nuage-link-btn {
    margin-left: auto;
}

.nuage-folder-line .nuage-find-btn {
    margin-left: auto;
}

.nuage-find-btn + .nuage-link-btn {
    margin-left: 0;
}

.nuage-find-result {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
}

.nuage-find-result p {
    margin: 0;
}

.nuage-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.nuage-picker-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
}

.nuage-picker-help,
.nuage-picker-target {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.nuage-picker-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.nuage-picker-crumbs button {
    width: auto;
    margin: 0;
    padding: 2px 6px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--accent-text);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.nuage-picker-crumbs button[aria-current] {
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
    cursor: default;
}

.nuage-picker-list {
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.nuage-picker-list li + li {
    border-top: 1px solid var(--border);
}

.nuage-picker-note {
    padding: 8px 12px;
    font-size: 0.84rem;
    font-style: italic;
    color: var(--text-muted);
}

.nuage-picker-folder {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.nuage-picker-folder i {
    color: var(--accent-text);
}

.nuage-picker-folder:hover,
.nuage-picker-folder:focus-visible {
    background: var(--accent-soft);
}

.nuage-picker-new {
    display: flex;
    gap: 8px;
}

.nuage-picker-new input {
    flex: 1;
    min-width: 0;
    width: auto;
}

.nuage-picker-new .btn-action {
    flex-shrink: 0;
}

.nuage-picker-move {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--text-primary);
    cursor: pointer;
}

.nuage-picker-move input {
    flex-shrink: 0;
    margin-top: 2px;
}

.nuage-picker-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Mes classes (v8.3.1, modale #nuage-classes-modal, mode cartes) : réutilise
   le bloc .nuage-panel ; seul l'enregistrement de la classe en cours est propre. */
.classes-save {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.classes-save label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.classes-save-row {
    display: flex;
    gap: 8px;
}

.classes-save-row input {
    flex: 1;
    min-width: 0;
    width: auto;
}

.classes-save-row .btn-action {
    flex-shrink: 0;
}

.classes-save .classes-active-only {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.classes-active-only input {
    width: auto;
    margin: 0;
}

.classes-active-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.classes-summary {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.classes-load-hint {
    margin: 0;
}

/* ---- Résultats dans le Nuage (v8.3.3) ---- */
.btn-export.btn-results-nuage,
.btn-action.btn-results-nuage {
    /* Teinte fixe, comme le bouton PDF rouge voisin : --accent-text s'éclaircit
       en thème sombre et le texte blanc n'y serait plus lisible. */
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border: none;
}

.results-kinds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 2px 0 6px;
    font-size: 0.88rem;
}

.results-kinds-label {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.results-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-primary);
}

.results-kind input {
    width: auto;
    margin: 0;
}

.results-kind i {
    color: var(--accent-text);
}

#results-save-btn {
    align-self: flex-start;
}

.results-done {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--success-bg);
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.results-done > i {
    color: var(--success);
    margin-top: 3px;
}

.results-done p {
    margin: 0 0 4px;
    word-break: break-word;
}

.results-done a {
    color: var(--accent-text);
    font-weight: 700;
}

@media (max-width: 480px) {
    .classes-save-row {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-nuage-flow.is-waiting i,
    .nuage-status.is-busy::before {
        animation: none;
    }
}

.btn-modal-cancel {
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    width: auto;
    margin: 0;
}

.btn-modal-cancel:hover {
    border-color: var(--error);
    color: var(--error);
}

.btn-modal-save {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px var(--primary-glow);
    font-family: 'Inter', sans-serif;
    width: auto;
    margin: 0;
}

.btn-modal-save:hover {
    box-shadow: 0 6px 20px var(--primary-glow);
}

@media (max-width: 600px) {

    .edit-row,
    .edit-grid-2x2,
    .edit-row-2 {
        grid-template-columns: 1fr;
    }

    .edit-modal {
        max-width: 100%;
        max-height: 95vh;
        border-radius: var(--radius-md);
    }

    .edit-modal-overlay {
        padding: 8px;
    }

    .edit-modal-body {
        padding: 16px 14px;
    }

    .edit-modal-footer {
        padding: 12px 14px;
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .edit-modal-footer .btn-modal-cancel,
    .edit-modal-footer .btn-modal-save {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
        text-align: center;
    }
}

/* ---------- Toast Notification ---------- */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text-primary);
    color: white;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    max-width: 90vw;
    text-align: center;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Draggable Table Rows ---------- */
.q-table tbody tr[draggable="true"] {
    transition: border-top 0.1s;
}

.drag-handle {
    cursor: grab;
    color: #b2bec3;
    text-align: center;
    font-size: 1.1rem;
    padding: 0 8px;
    transition: color 0.2s, background 0.2s;
    border-radius: 4px;
}

.drag-handle:hover {
    color: var(--primary);
    background: rgba(17, 85, 214, 0.1);
}

.drag-handle:active {
    cursor: grabbing;
}

/* Media Queries for step 1 tabs */
@media (max-width: 768px) {
    .step1-tab-inner {
        flex-direction: column;
    }
}

/* ---------- Floating Music Button ---------- */
.floating-music-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid var(--border);
    transition: all 0.3s ease;
    z-index: 1000;
}

.floating-music-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);
    color: var(--primary);
    border-color: var(--primary);
}

.floating-music-btn.music-active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 20px var(--primary-glow);
    animation: musicPulse 2s ease-in-out infinite;
}

.floating-music-btn.music-active:hover {
    color: white;
    transform: scale(1.1);
    animation: none;
}

@keyframes musicPulse {

    0%,
    100% {
        box-shadow: 0 4px 20px var(--primary-glow);
    }

    50% {
        box-shadow: 0 4px 30px rgba(17, 85, 214, 0.4);
    }
}

/* =============================================
   GAME CONTROLS BAR
   ============================================= */
.game-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: fit-content;
    margin: 0 auto 20px auto;
    box-shadow: var(--shadow-sm);
}

.game-controls-group {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    position: relative;
}

.game-controls-group:not(:last-child) {
    border-right: 1px solid var(--border);
    padding-right: 14px;
}

.game-controls-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    position: absolute;
    top: -4px;
    left: 8px;
    background: var(--surface);
    padding: 0 4px;
    line-height: 1;
}

.btn-game-control {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-game-control:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.btn-game-control:active {
    transform: translateY(0);
}

.btn-game-control i {
    font-size: 0.75rem;
}

/* Skip button — amber */
.btn-game-skip {
    border-color: #f0932b;
    color: #f0932b;
}

.btn-game-skip:hover {
    background: #f0932b;
    color: white;
    border-color: #f0932b;
    box-shadow: 0 2px 8px rgba(240, 147, 43, 0.3);
}

/* +10s / -10s — bleu (ajustement du minuteur en direct) */
.btn-game-time {
    border-color: var(--primary);
    color: var(--primary);
    min-width: 66px;
}

.btn-game-time:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--primary-glow);
}

/* Clore la question — vert (issue positive : on passe aux résultats). */
.btn-game-end {
    border-color: #00b894;
    color: #00b894;
}

.btn-game-end:hover {
    background: #00b894;
    color: #fff;
    border-color: #00b894;
    box-shadow: 0 2px 8px rgba(0, 184, 148, 0.3);
}

/* Stop button — red */
.btn-game-stop {
    border-color: #e74c3c;
    color: #e74c3c;
}

.btn-game-stop:hover {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

/* Toggle button — purple */
.btn-game-toggle {
    border-color: #6c5ce7;
    color: #6c5ce7;
}

.btn-game-toggle:hover {
    background: #6c5ce7;
    color: white;
    border-color: #6c5ce7;
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
}

/* Responsive: stack groups on small screens */
@media (max-width: 700px) {
    .game-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .game-controls-group {
        justify-content: center;
        border-right: none !important;
        padding-right: 8px !important;
        border-bottom: 1px solid var(--border);
        padding-bottom: 10px;
    }

    .game-controls-group:last-child {
        border-bottom: none;
        padding-bottom: 4px;
    }
}

/* --- Answer Image Support --- */
.btn-img-toggle {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
    line-height: 1;
    vertical-align: middle;
}

.btn-img-toggle:hover {
    background: var(--primary);
    color: white;
}

.ans-img-input {
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    transition: all var(--transition-fast);
}

.ans-img-input:focus {
    border-color: var(--primary);
    border-style: solid;
    background: white;
    outline: none;
}

/* --- Final Banner Animation --- */
@keyframes slideUpBanner {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.final-banner-anim {
    animation: slideUpBanner 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ==========================================
   RAG & OCR STYLES
   ========================================== */

.rag-drag-drop {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 20px 10px;
    text-align: center;
    background: rgba(100, 116, 139, 0.05);
    /* very subtle */
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.rag-drag-drop:hover,
.rag-drag-drop.dragover {
    border-color: var(--primary);
    background: rgba(17, 85, 214, 0.05);
}

.unified-rag-area {
    position: relative;
}

.floating-toolbar {
    position: absolute;
    top: 10px;
    right: 15px;
    display: flex;
    gap: 8px;
    background: var(--bg-card);
    padding: 4px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.toolbar-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.toolbar-btn:hover {
    background: var(--bg-subtle);
    color: var(--primary);
}

#ocr-output:empty:before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    font-style: italic;
    display: block;
}

.doc-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doc-tag .doc-tag-close {
    margin-left: 8px;
    cursor: pointer;
    opacity: 0.8;
}

.doc-tag .doc-tag-close:hover {
    opacity: 1;
}

.ocr-status {
    margin-top: 10px;
    min-height: 18px;
}

/* Fullscreen OCR */
.unified-rag-area.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: var(--bg-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.unified-rag-area.fullscreen #ocr-output {
    flex: 1;
    max-height: none;
}

/* =============================================
   PREVIEW ALL QUESTIONS MODAL
   ============================================= */
#preview-all-modal .edit-modal {
    max-width: 900px;
    width: 95%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

#preview-all-modal .edit-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 20px 24px;
    gap: 16px;
}

.preview-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.preview-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-left-color: var(--primary-light);
    transform: translateX(2px);
}

.preview-card.highlight-new {
    border-left-color: var(--success);
    animation: pulseNewCard 1.5s ease-in-out;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.04), transparent);
}

@keyframes pulseNewCard {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.3);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(46, 204, 113, 0);
    }

    100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
}

.preview-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.preview-card-number {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-card-badge-new {
    background: var(--success);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.preview-card-actions {
    display: flex;
    gap: 6px;
}

.preview-card-actions button {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    padding: 0;
    margin: 0;
    color: var(--text-secondary);
}

.preview-card-actions button:hover {
    transform: scale(1.1);
}

.preview-card-actions .btn-preview-edit:hover {
    background: rgba(17, 85, 214, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.preview-card-actions .btn-preview-delete:hover {
    background: var(--error-bg);
    border-color: var(--error);
    color: var(--error);
}

.preview-card-question {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 14px;
}

.preview-card-image {
    text-align: center;
    margin-bottom: 12px;
}

.preview-card-image img {
    max-width: 100%;
    max-height: 180px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    border: 1px solid var(--border);
}

.preview-card-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.preview-card-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    border: 1.5px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.preview-card-option.correct {
    border-color: var(--success);
    background: rgba(46, 204, 113, 0.08);
    color: var(--success);
    font-weight: 700;
}

.preview-card-option.correct .preview-option-letter {
    background: var(--success);
    color: white;
}

.preview-card-option.wrong {
    opacity: 0.75;
}

.preview-option-letter {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    background: var(--bg-subtle);
    color: var(--text-muted);
    flex-shrink: 0;
}

.preview-option-text {
    flex: 1;
    word-break: break-word;
}

.preview-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.preview-empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
}

.preview-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

.preview-empty-state p {
    font-size: 1rem;
    font-weight: 500;
}

/* Preview modal header count */
.preview-modal-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: auto;
    padding-right: 12px;
}

/* Slideshow navigation */
.preview-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.preview-nav-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.preview-pagination {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--bg-subtle);
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    min-width: 140px;
    text-align: center;
}

.preview-slide {
    display: none;
    width: 100%;
}

.preview-slide.active {
    display: block;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---- Intro slide (shown after AI generation) ---- */
.preview-slide-intro .preview-intro-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 40px;
    cursor: pointer;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 2px dashed var(--primary);
    transition: all 0.3s ease;
    user-select: none;
    min-height: 340px;
}

.preview-slide-intro .preview-intro-card:hover {
    background: rgba(17, 85, 214, 0.04);
    border-style: solid;
    box-shadow: 0 8px 30px rgba(17, 85, 214, 0.12);
    transform: translateY(-2px);
}

.preview-intro-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 16px;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.1) rotate(8deg); opacity: 0.8; }
}

.preview-intro-count {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.preview-intro-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.preview-intro-arrow {
    font-size: 3.5rem;
    color: var(--primary);
    line-height: 1;
    animation: bounceRight 1.2s ease-in-out infinite;
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(10px); opacity: 0.7; }
}

/* Redesigning the preview card to look like the projector */
.preview-slide .preview-card {
    background: var(--bg-card);
    border: 1px solid var(--border) !important;
    padding: 40px;
    box-shadow: none !important;
    cursor: default;
    transition: none;
    text-align: center;
    transform: none !important;
    /* Prevent shaking from global hover */
}

.preview-slide .preview-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.preview-slide .preview-card-question {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 30px;
    color: var(--text-primary);
    line-height: 1.2;
}

.preview-slide .preview-card-image {
    margin: 0 auto 30px;
    max-width: 600px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.preview-slide .preview-card-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.preview-slide .preview-card-option {
    padding: 24px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    border: 3px solid transparent;
}

.preview-slide .preview-option-letter {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
}

/* Option colors (Projector style) */
.preview-slide .preview-card-option.wrong {
    background: var(--bg-subtle);
    color: var(--text-primary);
    border-color: var(--border);
    opacity: 1;
}

.preview-slide .preview-card-option.correct {
    background: #30D158;
    color: white;
    border-color: #30D158;
    box-shadow: 0 10px 20px rgba(48, 209, 88, 0.2);
}

.preview-slide .preview-card-option:nth-child(1) .preview-option-letter {
    background: #3b82f6;
    color: white;
}

.preview-slide .preview-card-option:nth-child(2) .preview-option-letter {
    background: #f97316;
    color: white;
}

.preview-slide .preview-card-option:nth-child(3) .preview-option-letter {
    background: #a855f7;
    color: white;
}

.preview-slide .preview-card-option:nth-child(4) .preview-option-letter {
    background: #14b8a6;
    color: white;
}

.preview-slide .preview-card-option.correct .preview-option-letter {
    background: rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 600px) {
    .preview-card-options {
        grid-template-columns: 1fr;
    }

    #preview-all-modal .edit-modal {
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: var(--radius-md);
    }

    #preview-all-modal .edit-modal-body {
        padding: 12px 14px;
    }

    .preview-card {
        padding: 14px 16px;
    }

    /* Override projector-style preview for mobile */
    .preview-slide .preview-card {
        padding: 16px;
    }

    .preview-slide .preview-card-question {
        font-size: 1.15rem;
        margin-bottom: 16px;
    }

    .preview-slide .preview-card-options {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
    }

    .preview-slide .preview-card-option {
        padding: 10px 8px;
        font-size: 0.82rem;
        border-radius: 10px;
        gap: 8px;
        border-width: 2px;
    }

    .preview-slide .preview-option-letter {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .preview-slide .preview-option-text {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Preview navigation footer on mobile */
    .preview-modal-footer {
        flex-direction: column;
        padding: 12px 14px;
        gap: 10px;
    }

    .preview-nav-controls {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .preview-pagination {
        min-width: unset;
        font-size: 0.85rem;
        padding: 4px 10px;
    }

    .preview-modal-footer .btn-modal-save {
        width: 100%;
    }

    /* Banque de questions standalone mobile styles */
    .bank-section-standalone {
        padding: 18px 16px;
        margin-bottom: 16px;
        border-radius: var(--radius-md);
    }

    .bank-section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .bank-section-title {
        justify-content: flex-start;
    }

    .bank-section-actions {
        justify-content: space-between;
        gap: 8px;
    }

    .bank-section-actions .btn-action {
        flex: 1 1 calc(50% - 4px);
        font-size: 0.8rem;
        padding: 8px 10px;
        justify-content: center;
    }

    /* Step 1 CSV action buttons 2x2 grid */
    .q-block-actions > .btn-action,
    .q-block-actions > .bank-dropdown-container {
        flex: 1 1 calc(50% - 4px);
    }

    .q-block-actions .bank-dropdown-container .btn-action {
        width: 100%;
        justify-content: center;
    }

    .lib-card-actions > .btn-action {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }
}

/* =============================================
   STANDALONE BANK SECTION
   ============================================= */
.bank-section-standalone {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: 28px 30px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(17, 85, 214, 0.06);
    position: relative;
    overflow: hidden;
    animation: fadeSlideIn 0.5s ease forwards;
    opacity: 0;
}

.bank-section-standalone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), transparent);
    opacity: 0.6;
}

[data-theme="dark"] .bank-section-standalone {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: var(--primary);
}

.bank-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.bank-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bank-section-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px var(--primary-glow);
}

.bank-section-title h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.bank-section-title .q-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    margin-left: 4px;
    box-shadow: 0 2px 6px var(--primary-glow);
}

.bank-section-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.bank-section-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
}

.bank-section-empty i {
    font-size: 2rem;
    margin-bottom: 10px;
    opacity: 0.3;
    display: block;
}

.bank-section-empty p {
    font-size: 0.9rem;
    margin: 0;
}

/* Bouton Visualiser — couleur distinctive */
.btn-action-visualize {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.btn-action-visualize:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
    color: white;
    border: none;
    background: linear-gradient(135deg, #6d28d9, #7c3aed);
}

[data-theme="dark"] .btn-action-visualize {
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

/* =============================================
   BIBLIOTHÈQUE PARTAGÉE (v7.8.9)
   Bloc de droite de « Mes questions », bouton « Partager » de la banque et
   modale #share-library-modal (appel en cours → formulaire → résultat).
   Couleurs : jetons uniquement (--accent-text/-soft/-line pour la teinte
   « partage »), redéfinis par [data-theme="dark"].
   ============================================= */

/* Teinte accent : se distingue de « Sauvegarder » (fichier local) sans
   rivaliser avec le violet d'« Aperçu élève ». */
.btn-action-share {
    background: var(--accent-soft);
    color: var(--accent-text);
    border: 1px solid var(--accent-line);
}

.btn-action-share:hover {
    border-color: var(--accent-text);
    box-shadow: 0 4px 12px var(--accent-soft);
    transform: translateY(-1px);
}

/* Bloc « Bibliothèques » (v8.3), à droite de « Mes questions » : deux cartes
   empilées. « Ma bibliothèque » (Nuage + ce navigateur, pour soi) garde la
   teinte primaire ; « Bibliothèque partagée » (pour tous) la teinte accent,
   celle de « Partager » et de la page bibliotheque.html. */
.q-block-libraries>.q-block-body {
    display: flex;
    flex-direction: column;
}

.lib-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* Centrée comme « Mes questions » : icône dans le titre, description, puis
   boutons. */
.lib-card {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    text-align: center;
    transition: border-color var(--transition-fast);
}

.lib-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 4px 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.lib-card-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.85rem;
}

.lib-card-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.lib-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.lib-card-private:hover {
    border-color: var(--primary);
}

.lib-card-private .lib-card-icon {
    background: var(--primary-glow);
    color: var(--primary);
}

[data-theme="dark"] .lib-card-private .lib-card-icon {
    color: var(--primary-light);
}

.lib-card-shared {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}

.lib-card-shared:hover {
    border-color: var(--accent-text);
}

.lib-card-shared .lib-card-icon {
    background: var(--bg-card);
    border: 1px solid var(--accent-line);
    color: var(--accent-text);
}

.shared-library-empty {
    margin: 0;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--text-muted);
}

/* « Mes questions » en liste verticale (v8.3.1) : cinq boutons centrés sur deux
   ou trois rangées laissaient le bas du bloc vide face aux deux cartes des
   bibliothèques. Créer / importer d'abord, puis fichiers et banques après un
   filet. */
.q-block-actions.man-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    max-width: 340px;
    margin: 10px auto 0;
}

.q-block-actions.man-actions>.btn-action,
.q-block-actions.man-actions>.bank-dropdown-container,
.q-block-actions.man-actions>.bank-dropdown-container>.btn-action {
    flex: none;
    width: 100%;
}

/* Icônes en colonne : les libellés s'alignent comme dans un menu. */
.q-block-actions.man-actions .btn-action {
    justify-content: flex-start;
    text-align: left;
    padding-left: 18px;
}

.q-block-actions.man-actions .btn-action>i:first-child {
    width: 1.1em;
    flex-shrink: 0;
    text-align: center;
}

.btn-caret {
    margin-left: auto;
    font-size: 0.7rem;
}

.man-actions-sep {
    display: block;
    height: 1px;
    margin: 4px 12px;
    background: var(--border);
}

/* Étape 1, colonne de gauche resserrée (v8.3.1) sur « Questions » (1/3 – 2/3)
   et « IA souveraine » (2/5 – 3/5) : à parts égales, le bloc de gauche
   (« Mes questions », formulaire IA) restait à moitié vide face aux
   bibliothèques et aux documents sources. Le formulaire IA garde 2/5 : à 1/3,
   « Générer avec l'IA souveraine Albert » passait sur deux lignes. Pas sur la
   sous-page « IA externe », dont la colonne de gauche est déjà la plus haute.
   Sous 1200 px la colonne étroite tomberait sous 280 px de contenu : on garde
   le 50/50 (puis l'empilement sous 768 px). */
@media (min-width: 1200px) {
    .step1-tab-inner--split>.q-block:first-child {
        flex: 1 1 0;
        min-width: 0;
    }

    .step1-tab-inner--split>.q-block:last-child {
        flex: 2 1 0;
        min-width: 0;
    }

    .step1-tab-inner--split>.q-block-ai:first-child {
        flex-grow: 2;
    }

    .step1-tab-inner--split>.q-block-ai+.q-block:last-child {
        flex-grow: 3;
    }

    /* Le thème prend toute la ligne, nombre et niveau se partagent la
       suivante (sinon « Nb questions » se coupe et le thème est illisible). */
    .step1-tab-inner--split .ai-form-row>.ai-field-theme {
        flex: 1 1 100% !important;
    }

    /* Les deux bibliothèques côte à côte, étirées jusqu'au bas du bloc. Les
       cartes partagent les rangées titre / description / boutons (subgrid) :
       les boutons restent alignés même quand une description fait une ligne
       de plus. Sans subgrid, chaque carte s'empile simplement. */
    .step1-tab-inner--split>.q-block-libraries {
        align-items: stretch;
    }

    .step1-tab-inner--split .lib-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 1fr;
        gap: 0 10px;
        flex: 1;
    }

    .step1-tab-inner--split .lib-card {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        align-content: start;
    }

    .step1-tab-inner--split .lib-card-actions {
        align-content: flex-start;
    }
}

/* 80 % de la largeur de l'écran : le formulaire place description et objectifs,
   puis e-mail et signature, côte à côte (.edit-row-2) et tient sans défiler. */
.share-modal {
    max-width: 80vw;
}

@media (max-width: 760px) {
    .share-modal {
        max-width: 100%;
    }
}

/* La boîte de dialogue reçoit le focus pendant les appels (lecteurs d'écran) :
   ce n'est pas un contrôle, pas d'anneau de focus autour de toute la modale. */
.share-modal:focus {
    outline: none;
}

/* 1. Appel en cours */
.share-busy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 8px;
    text-align: center;
}

.share-spinner {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.share-busy-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.share-busy-hint {
    max-width: 420px;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Le compteur garde sa hauteur : le texte au-dessus ne saute pas à 1 s. */
.share-busy-elapsed {
    min-height: 1.2em;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* 2. Formulaire */
.share-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.share-form select {
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.share-form select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--bg-card);
}

/* La liste déroulante native ne sait pas peindre un fond translucide : en
   thème sombre, ses options prennent le fond opaque de la page. */
.share-form option,
.share-form optgroup {
    background: var(--bg-page);
    color: var(--text-primary);
}

.share-form .edit-field input[aria-invalid="true"] {
    border-color: var(--error);
}

.share-field-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.share-field-error {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--error);
}

.share-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    line-height: 1.45;
}

.share-notice i {
    margin-top: 2px;
}

.share-notice p {
    margin: 0;
}

.share-notice--info {
    background: var(--bg-subtle);
    border-left: 4px solid var(--primary);
    color: var(--text-secondary);
}

.share-notice--warn {
    background: var(--warning-bg);
    border-left: 4px solid var(--warning);
    color: var(--text-primary);
}

/* Motif rédigé par l'IA : cité, jamais interprété comme du HTML. */
.share-notice blockquote,
.share-quote blockquote {
    margin: 6px 0 0;
    padding: 6px 10px;
    border-left: 3px solid var(--border);
    font-style: italic;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.share-levels {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.share-levels legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Les groupes (cycles, BTS, Licence…) se rangent côte à côte quand la modale
   est large, et l'un sous l'autre sinon. */
#share-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}

.share-level-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}

.share-level-group-label {
    flex: 0 0 84px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}

.share-level-chips {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.share-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.share-chip:hover {
    border-color: var(--primary);
}

.share-chip:focus-within {
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.share-chip:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-glow);
    color: var(--text-primary);
}

.share-chip input {
    margin: 0;
    accent-color: var(--primary);
}

/* Avertissement RGPD obligatoire, au-dessus du bouton « Publier ». */
.share-rgpd {
    padding: 14px 16px;
    border: 1px solid var(--accent-line);
    border-left: 4px solid var(--accent-text);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.share-rgpd p {
    margin: 0 0 8px;
}

.share-rgpd-title {
    font-weight: 800;
    color: var(--text-primary);
}

.share-rgpd-mail a {
    font-weight: 700;
    color: var(--accent-text);
    overflow-wrap: anywhere;
}

.share-rgpd-ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
}

.share-rgpd-ack input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--primary);
}

a.btn-modal-save {
    text-decoration: none;
}

.share-result-ref code.share-key {
    color: var(--accent-text);
}

.share-legal {
    margin: 2px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.share-legal a {
    color: var(--primary);
}

[data-theme="dark"] .share-legal a {
    color: var(--primary-light);
}

/* 3. Résultat */
.share-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 4px 4px;
    text-align: center;
}

.share-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 4px;
    border-radius: 50%;
    font-size: 1.9rem;
}

.share-result-icon--success {
    background: var(--success-bg);
    color: var(--success);
}

.share-result-icon--pending {
    background: var(--accent-soft);
    color: var(--accent-text);
}

.share-result-icon--error {
    background: var(--error-bg);
    color: var(--error);
}

/* Titre focalisé par le script (lecteurs d'écran), pas un contrôle. */
.share-result-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    outline: none;
}

.share-result-msg {
    max-width: 460px;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.share-quote {
    width: 100%;
    max-width: 480px;
    margin-top: 6px;
    text-align: left;
}

.share-quote-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.share-result-ref {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.share-result-ref code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    user-select: all;
}

.share-result-ref small {
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* Clé affichée une seule fois : la consigne de la garder se lit en premier. */
.share-result-ref small.share-key-hint {
    margin-top: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-text);
}

.share-result-ref small a {
    font-weight: 700;
    color: var(--primary);
    overflow-wrap: anywhere;
}

[data-theme="dark"] .share-result-ref small a {
    color: var(--primary-light);
}

.share-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 12px;
    border: 1.5px solid var(--accent-line);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.share-copy-btn:hover,
.share-copy-btn:focus-visible {
    border-color: var(--accent-text);
}

.share-modal-footer {
    flex-wrap: wrap;
}

.share-modal-footer button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 600px) {
    .share-modal-footer > button {
        flex: 1 1 100%;
        justify-content: center;
    }

    .share-level-group-label {
        flex-basis: 100%;
    }
}

/* QR Code containers for scan readability (especially in dark mode) */
#qrcode, #modalQrCodeContainer {
    background: #ffffff !important;
    padding: 15px;
    border-radius: var(--radius-md);
    width: fit-content;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-sm);
    border: 3px solid #ffffff; /* White quiet zone border */
    transition: transform var(--transition-fast);
}

#qrcode:hover, #modalQrCodeContainer:hover {
    transform: scale(1.02);
}

#qrcode img, #qrcode canvas,
#modalQrCodeContainer img, #modalQrCodeContainer canvas {
    display: block;
    max-width: 100%;
}

/* =============================================
   ACCESSIBILITÉ — Mouvement réduit
   Respecte le réglage système « réduire les animations » : neutralise
   transitions/animations (podium, confettis, classement glissant, scroll-reveal…)
   pour les personnes sensibles au mouvement (troubles vestibulaires).
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .step-card.reveal { opacity: 1 !important; transform: none !important; }
}
/* ---------------------------------------------------------------
   Recherche d'images (v8.3.3) — fenêtre #image-search-modal, bouton
   « Rechercher » des champs image de l'éditeur, crédit sous les images.
   Logique : section « RECHERCHE D'IMAGES » de index.js.
   --------------------------------------------------------------- */
.edit-field .img-field-row {
    display: flex;
    gap: 8px;
}

.edit-field .img-field-row input {
    flex: 1;
    min-width: 0;
    width: auto;
}

.btn-img-search {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1.5px solid var(--accent-line);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    width: auto;
    margin: 0;
}

.btn-img-search:hover {
    background: var(--bg-card);
}

.edit-field .img-credit-input {
    margin-top: 8px;
    font-size: 0.82rem;
    padding: 7px 12px;
}

.q-image-credit {
    margin: 4px auto 0;
    max-width: 640px;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-muted);
    text-align: center;
    overflow-wrap: anywhere;
}

/* Au-dessus des fenêtres d'édition (10000), sous les dialogues de
   confirmation (10100) : on l'ouvre depuis l'éditeur d'une question. */
.edit-modal-overlay.image-search-overlay {
    z-index: 10050;
}

.edit-modal.image-search-modal {
    max-width: 860px;
}

.img-wizard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}

.img-wizard-step {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--accent-text);
}

.img-wizard-question {
    margin: 0;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.img-wizard-current {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.img-wizard-current img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
}

.img-wizard-current-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.img-wizard-current-text small {
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.img-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.img-search-bar input {
    flex: 1;
    min-width: 0;
    width: auto;
}

.img-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.img-source-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    margin: 0;
}

.img-source-tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.img-source-count {
    font-size: 0.75rem;
    opacity: 0.85;
}

.img-status {
    padding: 6px 0;
    font-size: 0.86rem;
    color: var(--text-secondary);
}

.img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    padding: 3px;
}

/* Fond blanc dans les deux thèmes : pictogrammes et dessins sont souvent
   transparents, illisibles sur fond sombre. */
.img-result {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 4px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    width: auto;
    margin: 0;
}

.img-result img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.img-result:hover {
    border-color: var(--accent-line);
}

.img-result.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.img-result:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.img-selected {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}

.img-selected img {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
}

.img-selected-info {
    min-width: 0;
    font-size: 0.85rem;
}

.img-selected-info p {
    margin: 0 0 3px;
    overflow-wrap: anywhere;
}

.img-selected-title {
    font-weight: 700;
    color: var(--text-primary);
}

.img-selected-credit {
    color: var(--text-secondary);
}

.img-selected-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.img-selected-links a {
    color: var(--accent-text);
    font-weight: 600;
}

.img-tip {
    margin: 10px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.img-search-footer {
    flex-wrap: wrap;
}

.img-wizard-nav {
    display: inline-flex;
    gap: 8px;
    margin-right: auto;
}

@media (max-width: 480px) {
    .edit-field .img-field-row {
        flex-direction: column;
    }

    .btn-img-search {
        padding: 9px 14px;
        justify-content: center;
    }

    .img-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        max-height: 260px;
    }

    .img-wizard-nav {
        width: 100%;
    }

    .img-wizard-nav .btn-modal-cancel {
        flex: 1;
    }

    /* L'action principale d'abord : en bas de pile, elle passait sous le pli. */
    .img-search-footer #img-use-btn {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .img-search-footer > .btn-modal-cancel {
        width: 100%;
    }
}