/* =======================================================================
    0. VARIABLES GLOBALES — Z-INDEX & BACKDROPS
   ======================================================================= */
:root {
    /* Navigation globale */
    --z-banner: 900;
    --z-dropdown: 1000;
    --z-toast: 1050;
    --z-header: 1100;

    /* Sidebar (panneau d'activité) */
    --z-sidebar-overlay: 2000;
    --z-sidebar: 2050;

    /* FAB flottant (Caramelia) — au-dessus du chrome de l'app, sous les modales */
    --z-fab: 2500;

    /* Modales principales (une seule visible à la fois) */
    --z-modal: 3000;

    /* Éléments au-dessus des modales */
    --z-modal-confirm: 4000;
    --z-fullscreen: 5000;
    --z-popover: 6000;

    /* Backdrops standardisés */
    --backdrop-light: rgba(0, 0, 0, 0.4);
    --backdrop-dark: rgba(0, 0, 0, 0.6);
}

/* =======================================================================
    0b. CLASSES UTILITAIRES
   ======================================================================= */
.hidden {
    display: none;
}

/* Accessible : caché visuellement, visible par les lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible uniquement au focus clavier (skip link) */
.sr-only-focusable:focus {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    width: auto;
    height: auto;
    padding: 10px 24px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: #007AFF;
    color: #fff;
    font-size: 0.95em;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-decoration: none;
}

/* =======================================================================
   1. STYLES DE BASE ET RÉINITIALISATION
   ======================================================================= */
html {
    overflow-y: scroll;
    /* Affiche la scrollbar en permanence pour éviter les sauts de page */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #F5F5F7;
    /* Fond gris clair Apple */
    color: #1d1d1f;
    /* Gris foncé pour le texte */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

#main-content {
    flex: 1 0 auto;
}


/* =======================================================================
   2. EN-TÊTE ET BARRE D'APPLICATION
   ======================================================================= */
.app-bar {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 5px 20px;
    /* Padding vertical réduit */
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    /* Au-dessus du bandeau d'urgence et du dropdown */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    height: 50px;
    /* Taille du logo augmentée */
    width: auto;
}

.title-container {
    display: flex;
    flex-direction: column;
}

.app-bar h1 {
    margin: 0;
    font-size: 1.5em;
    /* Taille du titre principal */
    font-weight: 600;
    color: #1d1d1f;
}

.subtitle {
    margin: 0;
    font-size: 0.8em;
    /* Taille du sous-titre */
    font-weight: 400;
    color: #6e6e73;
    /* Gris plus doux pour le sous-titre */
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =======================================================================
   3. SÉLECTEUR DE LANGUE
   ======================================================================= */
.language-switcher {
    position: relative;
    display: inline-block;
}


.language-dropdown {
    display: none;
    position: absolute;
    right: 0;
    background-color: #ffffff;
    min-width: 200px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: var(--z-dropdown);
    list-style: none;
    padding: 0;
    border-radius: 8px;
}

.language-dropdown li button {
    color: black;
    padding: 12px 16px;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.language-dropdown li button .flag-icon {
    font-size: 1.2em;
    /* Ajustement de la taille pour les icônes SVG */
    width: 1.33333333em;
    line-height: 1em;
}

.language-dropdown li button.active {
    font-weight: bold;
    color: #007AFF;
}

.language-dropdown li button.active::after {
    content: '✔';
    position: absolute;
    right: 15px;
    color: #007AFF;
}

.language-dropdown li button:hover {
    background-color: #f1f1f1;
}

.language-switcher.open .language-dropdown {
    display: block;
}


/* =======================================================================
   4. BARRE LATÉRALE / MODALE D'ACTIVITÉ
   ======================================================================= */
/* Module Sidebar - base */
#module-sidebar {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90vw;
    /* Largeur de 90% de la vue */
    max-width: 1400px;
    /* Limite la largeur maximale */
    background-color: #F5F5F7;
    border-radius: 1.25rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.15);
    z-index: var(--z-sidebar);
    display: none;
    flex-direction: column;
    overflow: visible;
    padding: 1.25rem;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, height 0.5s ease-in-out;
}

#module-sidebar.open {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* .sidebar .close-btn hérite désormais du style de base */

.sidebar .close-btn:hover {
    color: #1d1d1f;
}

.sidebar h2 {
    margin-top: 0;
    /* Ajusté car le padding est maintenant interne */
    font-size: 1.5em;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 20px;
}

.sidebar ol,
.info-card ol {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Espace entre les points */
}

.sidebar li,
.info-card li {
    font-size: 1.1em;
    color: #333;
}

.sidebar li::marker,
.info-card li::marker {
    font-weight: bold;
    color: #007AFF;
}

/* L'overlay est de nouveau nécessaire pour l'arrière-plan */
#sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--backdrop-light);
    z-index: var(--z-sidebar-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

#sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* =======================================================================
   5. MISE EN PAGE PRINCIPALE (CONTENEUR, CARTES)
   ======================================================================= */
.info-card,
.prompt-generator,
.module-container {
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 0;
    /* Retiré pour permettre au bandeau de toucher les bords */
    margin-bottom: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* overflow: hidden; */
    /* Important pour les coins arrondis du conteneur, mais empêche les dropdowns de déborder */
}

.prompt-generator {
    margin-top: 0;
    overflow: hidden;
    border-top: none;
}

.info-card h2 {
    margin-top: 0;
    font-size: 1.5em;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 20px;
}

/* Section "Comment utiliser" */

/* =======================================================================
   6. GÉNÉRATEUR DE PROMPT ET MODES
   ======================================================================= */
.prompt-generator {
    display: flex;
    flex-direction: column;
    /* Le gap est géré par les marges internes maintenant */
}

/* Design "intégré" pour les onglets de mode */
.mode-tabs {
    display: flex;
    width: 100%;
    background-color: #F5F5F7;
    /* Même fond que la page — évite le liseré blanc entre le trait bleu et le fond */
    border-bottom: 1px solid #e5e5e5;
    /* Séparateur subtil */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.mode-tab {
    flex: 1;
    /* Chaque onglet prend 50% de la largeur */
    padding: 12px 20px;
    /* Padding vertical réduit */
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 1.1em;
    font-weight: 500;
    color: #6e6e73;
    /* Couleur du texte inactif */
    text-align: center;
    transition: all 0.3s ease;
    border-top: 3px solid #F5F5F7;
    /* Liseret invisible par défaut (même couleur que le fond page) */
}

.mode-tab:first-child {
    border-top-left-radius: 20px;
}

.mode-tab:last-child {
    border-top-right-radius: 20px;
}

.mode-tab:hover {
    background-color: #EDEDF0;
    /* Léger feedback au survol */
    border-top-color: #EDEDF0;
    /* Liseret invisible au survol (même couleur que le fond au survol) */
}

.mode-tab.active {
    color: #0071EB;
    /* Texte bleu pour l'actif — ratio 4.6:1 WCAG AA */
    font-weight: 600;
    background-color: #ffffff;
    /* Se fond avec le reste de la carte */
    border-top: 3px solid #0071EB;
}

/* Champs communs (qui, quoi) - toujours visibles */
.common-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Champs avancés - masqués par défaut (mode rapide) */
.advanced-fields {
    display: none;
}

/* Champs avancés - affichés en mode avancé (même layout que .common-fields) */
.advanced-fields.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.advanced-fields textarea {
    min-height: 60px;
    resize: vertical;
}

/* Champ avec icône Font Awesome en préfixe (qui, quoi, niveau, nombreQuestions).
   Repris du pattern Amande pour symétrie visuelle entre les deux apps. */
.input-icon-wrapper {
    position: relative;
}
.input-icon-wrapper > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    pointer-events: none;
    font-size: 0.85em;
    opacity: 0.7;
}
/* Sélecteur explicitement plus spécifique que `.prompt-generator input[type="text"]`
   (qui réinitialise `padding` en shorthand) — sinon le padding-left est écrasé.
   `padding-right` réserve la place du bouton micro à droite. */
.prompt-generator .input-icon-wrapper input[type="text"] {
    padding-left: 38px;
    padding-right: 40px;
}
.prompt-generator .input-icon-wrapper input[type="number"] {
    padding-left: 38px;
}

/* ============================================================
 * Bouton micro intégré dans les champs (qui, quoi, niveau).
 * Réutilise les classes Caramelia (.caramelia-mic-btn, .caramelia-recording)
 * pour bénéficier du même pipeline d'enregistrement (voice.js) et des
 * mêmes animations (pulse rouge, vagues sur canvas). La classe additionnelle
 * .pg-mic-btn n'ajoute QUE le repositionnement et l'ajustement de taille
 * pour s'intégrer discrètement dans un input du prompt-generator.
 * ============================================================ */
.input-icon-wrapper .pg-mic-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    /* Taille plus discrète que le 32px par défaut de Caramelia. */
    width: 28px;
    height: 28px;
    font-size: 12px;
    /* Au-dessus de l'overlay d'enregistrement (qui couvre l'input) pour
       rester cliquable et permettre l'arrêt de la dictée. */
    z-index: 2;
    /* Palette gris-bleu froid en harmonie avec le bleu d'accent #007AFF
       du formulaire — le doré reste l'apanage du bouton micro de Caramelia. */
    color: #5f7382;
}
/* Aucun scale sur hover/active/recording : le micro étant positionné exactement
   sous le ✓ (tous deux à right:5px), il réapparaît sous le curseur après
   transcription — un scale(1.05) en hover déclencherait alors un « rebond »
   parasite. On verrouille donc le transform à translateY(-50%) dans tous les
   états (nécessaire pour neutraliser le `transform: scale(1.05)` hérité de
   `.caramelia-mic-btn:hover`). Le changement de fond suffit comme feedback. */
.input-icon-wrapper .pg-mic-btn:hover,
.input-icon-wrapper .pg-mic-btn:active,
.input-icon-wrapper .pg-mic-btn.caramelia-mic-btn--recording,
.input-icon-wrapper .pg-mic-btn.caramelia-mic-btn--recording:hover,
.input-icon-wrapper .pg-mic-btn.caramelia-mic-btn--loading {
    transform: translateY(-50%);
}
.input-icon-wrapper .pg-mic-btn:hover {
    background: #eef2f6;
    color: #3d5366;
}
/* État transcription en cours : spinner en gris-bleu (pas en doré).
   On annule l'animation héritée de `.caramelia-mic-btn--loading` (qui applique
   `transform: rotate(360deg)` sur le bouton et écrase donc notre
   `translateY(-50%)`, ce qui faisait « tomber » le bouton). À la place, on fait
   tourner l'icône `<i>` à l'intérieur : le bouton reste statique. */
.input-icon-wrapper .pg-mic-btn.caramelia-mic-btn--loading {
    background: #eef2f6;
    color: #3d5366;
    animation: none;
}
.input-icon-wrapper .pg-mic-btn.caramelia-mic-btn--loading > i {
    display: inline-block;
    animation: caramelia-mic-spin 1s linear infinite;
}

/* Pendant l'enregistrement : on masque l'icône de gauche et l'input
   (visibility, pas display, pour préserver la place). L'overlay
   .caramelia-recording, déjà mis en position:absolute;inset:0 par les styles
   Caramelia, est rétréci à droite pour laisser le micro cliquable.
   On reporte la bordure et le fond du champ sur le wrapper pour que le
   contour reste visible — via box-shadow inset plutôt que border, pour
   ne PAS modifier la hauteur du wrapper (border ajouterait 2px). */
.input-icon-wrapper.caramelia-input-slot--recording {
    box-shadow: inset 0 0 0 1px #dcdcdc;
    border-radius: 12px;
    background-color: #fcfcfc;
}
.input-icon-wrapper.caramelia-input-slot--recording > input,
.input-icon-wrapper.caramelia-input-slot--recording > i {
    visibility: hidden;
    pointer-events: none;
}
/* IMPORTANT : .caramelia-recording (base Caramelia) déclare width:100%;height:100%
   ce qui, combiné à position:absolute + inset, fait déborder l'overlay. On force
   width/height à auto pour que `inset` contrôle seul les dimensions, et
   box-sizing:border-box pour intégrer le padding latéral existant. */
.input-icon-wrapper.caramelia-input-slot--recording > .caramelia-recording {
    inset: 0 40px 0 14px; /* 40px : place du micro à droite ; 14px : marge gauche cohérente */
    width: auto;
    height: auto;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/* Timer en gris-bleu (cohérent avec le micro), pas en doré Caramelia. */
.input-icon-wrapper .caramelia-recording__time {
    color: #3d5366;
}

/* ============================================================
 * Boutons « ✕ annuler » et « ✓ valider » — pattern ChatGPT.
 * Visibles UNIQUEMENT pendant l'enregistrement ; masquent le micro principal.
 * ============================================================ */
.input-icon-wrapper .pg-mic-cancel-btn,
.input-icon-wrapper .pg-mic-confirm-btn {
    display: none; /* caché par défaut, révélé en état recording */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    padding: 0;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 3; /* au-dessus du canvas d'enregistrement */
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.input-icon-wrapper .pg-mic-cancel-btn {
    right: 36px;
    background: transparent;
    color: #5f7382;
}
.input-icon-wrapper .pg-mic-confirm-btn {
    right: 5px;
    background: #3d5366;
    color: #fff;
}
/* Pas de scale sur hover/active : on garde uniquement le feedback de fond. */
.input-icon-wrapper .pg-mic-cancel-btn:hover {
    background: #eef2f6;
    color: #3d5366;
}
.input-icon-wrapper .pg-mic-confirm-btn:hover {
    background: #2c3e50;
}

/* En enregistrement : on cache le micro principal et on révèle ✕/✓ */
.input-icon-wrapper.caramelia-input-slot--recording .pg-mic-btn {
    display: none;
}
.input-icon-wrapper.caramelia-input-slot--recording .pg-mic-cancel-btn,
.input-icon-wrapper.caramelia-input-slot--recording .pg-mic-confirm-btn {
    display: inline-flex;
}

/* L'overlay d'enregistrement doit maintenant laisser la place à DEUX boutons
   à droite (✕ + ✓) au lieu d'un seul micro. ~67px total au lieu de 40px. */
.input-icon-wrapper.caramelia-input-slot--recording > .caramelia-recording {
    inset: 0 67px 0 14px;
}

/* Petite bulle d'erreur ephemère (permission refusée, transcription vide,
   trop court, etc.) — disparaît automatiquement après quelques secondes. */
.prompt-mic-error {
    position: absolute;
    left: 14px;
    bottom: -22px;
    font-size: 0.75em;
    color: #C0392B;
    pointer-events: none;
    background: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    z-index: 3;
}

.prompt-generator input[type="text"],
.prompt-generator input[type="number"] {
    padding: 12px 15px;
    /* Padding réduit */
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
    background-color: #fcfcfc;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.prompt-generator input[type="text"]:focus,
.prompt-generator input[type="number"]:focus {
    outline: none;
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35);
}

/* Neutralise le fond bleu/jaune appliqué par le navigateur lors du remplissage automatique */
.prompt-generator input:-webkit-autofill,
.prompt-generator input:-webkit-autofill:hover,
.prompt-generator input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fcfcfc inset;
    -webkit-text-fill-color: #1d1d1f;
    transition: background-color 5000s ease-in-out 0s;
}

.prompt-form-container {
    padding: 20px 25px;
    /* Padding réduit */
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Espacement réduit */
}


.prompt-generator button#generateBtn {
    padding: 15px;
    background-color: #007AFF;
    color: white;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.2);
    width: 100%;
}

.prompt-generator button#generateBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.3);
}

/* =======================================================================
   7. BARRE DE FILTRES ET GRILLE DE MODULES
   ======================================================================= */

/* --- Barre de filtres (chips) --- */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 6px;
    margin-bottom: 30px;
    padding: 8px 0;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.filter-separator {
    width: 3px;
    height: 20px;
    background-color: #e8e8ed;
    border-radius: 2px;
    margin: 0 8px;
    flex-shrink: 0;
}

/* --- Chip de base --- */
.filter-chip {
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    line-height: 1.2;
}

.filter-chip:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

/* --- Chips activité (gris/bleu) --- */
.filter-chip--activity {
    background: #f5f5f7;
    color: #58585b;
    border: 1px solid #e0e0e0;
}

.filter-chip--activity:hover {
    color: #1d1d1f;
    border-color: #c0c0c0;
}

.filter-chip--activity.active {
    background: #0055B3;
    color: white;
    border-color: transparent;
}

/* --- Chip H5P (bleu) --- */
.filter-chip--h5p {
    background: transparent;
    border: 1.5px solid #0862C4;
    color: #0862C4;
}

.filter-chip--h5p:hover {
    background: rgba(8, 98, 196, 0.08);
}

.filter-chip--h5p.active {
    background: linear-gradient(135deg, #0659B8, #0976E7);
    color: white;
    border-color: transparent;
}

/* --- Chip Éléa (violet) --- */
.filter-chip--elea {
    background: transparent;
    border: 1.5px solid #9E3884;
    color: #9E3884;
}

.filter-chip--elea:hover {
    background: rgba(158, 56, 132, 0.08);
}

.filter-chip--elea.active {
    background: linear-gradient(135deg, #32038D, #B9459B);
    color: white;
    border-color: transparent;
}

/* --- Chip Magistère (bleu foncé) --- */
.filter-chip--magistere {
    background: transparent;
    border: 1.5px solid #064CA4;
    color: #064CA4;
}

.filter-chip--magistere:hover {
    background: rgba(6, 76, 164, 0.08);
}

.filter-chip--magistere.active {
    background: linear-gradient(135deg, #043A7D, #064CA4);
    color: white;
    border-color: transparent;
}

/* --- Chip Moodle (orange, pour les langues hors FR) --- */
.filter-chip--moodle {
    background: transparent;
    border: 1.5px solid #8F4800;
    color: #8F4800;
}

.filter-chip--moodle:hover {
    background: rgba(143, 72, 0, 0.08);
}

.filter-chip--moodle.active {
    background: linear-gradient(135deg, #E06A00, #F98012);
    color: white;
    border-color: transparent;
}

/* --- Responsive barre de filtres --- */
@media (max-width: 768px) {
    .filter-bar {
        padding: 6px 4px;
        flex-direction: column;
        align-items: stretch;
    }

    .filter-separator {
        display: none;
    }

    .filter-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        padding-bottom: 2px;
        max-width: 100%;
        mask-image: linear-gradient(to right, black calc(100% - 30px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 30px), transparent 100%);
    }

    .filter-group::-webkit-scrollbar {
        display: none;
    }
}

/* --- Grille d'activités --- */
.activity-grid {
    display: grid;
}

/* Grille des modules */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
}

.h5p-tile {
    background-color: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    text-align: center;
    padding: 20px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 165px;
    position: relative;
}

.h5p-tile:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 122, 255, 0.3);
}

.h5p-tile:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

.h5p-tile img {
    max-width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 15px;
}

.h5p-tile .tile-text {
    display: flex;
    flex-direction: column;
}

.h5p-tile .tile-name-fr {
    font-weight: 600;
    font-size: 1em;
    color: #1d1d1f;
}

.h5p-tile .tile-name-en {
    font-size: 0.85em;
    color: #58585b;
}

/* =======================================================================
   8. ÉLÉMENTS DE FORMULAIRE (TEXTAREA, BOUTONS)
   ======================================================================= */
.module-container h3,
.h5p-content-container h3 {
    margin-top: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #1C1C1E;
    margin-bottom: 15px;
}

textarea {
    width: 100%;
    min-height: 12.5rem;
    /* Plus grand */
    resize: none;
    /* Permet uniquement le redimensionnement vertical */
    padding: 1.25rem;
    /* Plus aéré */
    border: 1px solid #e5e5e5;
    border-radius: 0.75rem;
    box-sizing: border-box;
    font-family: "SF Mono", "Menlo", "Monaco", monospace;
    font-size: 1em;
    margin-bottom: 20px;
    background-color: #FFFFFF;
    /* Fond blanc par défaut (éditable) */
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

textarea:focus {
    outline: none;
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

textarea[readonly] {
    background-color: #F5F5F7;
    /* Gris pâle pour le mode lecture seule */
    color: #1d1d1f;
    cursor: default;
}

textarea::placeholder {
    color: #a0a0a0;
    /* Placeholder plus lisible */
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.copy-btn,
.action-btn {
    padding: 12px 20px;
    border: none;
    background-color: #e9e9ed;
    color: #1C1C1E;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.95em;
    font-weight: 500;
    flex: 1;
    /* Tous les boutons d'action se partagent l'espace */
}

.copy-btn:hover,
.action-btn:hover {
    background-color: #dcdce1;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Animation unifiée pour le groupe de boutons de génération */
.generation-button-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.generation-button-group .action-btn:hover {
    transform: none;
    box-shadow: none;
}

/* Conteneur de contenu H5P (remplace la modale) */
/* NOUVELLE STRUCTURE DE LA MODALE */
.modal-header-group {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
    padding: 0.625rem 1.25rem;
    position: relative;
    z-index: 10;
    /* z-index élevé pour être au-dessus du contenu */
}

/* Bouton de fermeture — style de base partagé */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: #aaa;
    transition: color 0.3s;
}

.modal-header-actions .close-btn {
    display: none;
}

@media (max-width: 768px) {
    .modal-header-actions .close-btn {
        display: block;
    }
}

/* (dédupliqué) styles déjà couverts par .close-btn et la règle responsive ci‑dessus */


.modal-title-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top-controls-container {
    margin-left: auto;
    position: relative;
    z-index: 3;
    /* Au-dessus du wrapper tuto */
}

.modal-title-icon {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

.modal-title {
    margin: 0;
    font-size: 1.6em;
    font-weight: 600;
}

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

.top-controls-container {
    display: flex;
    align-items: center;
    gap: 20px;
}


.tuto-controls-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    /* Évite que la description longue ne colle au toggle Simple/Avancé */
    padding: 1rem 0;
    animation: fadeIn 0.3s ease-in-out;
    position: relative;
    z-index: 2;
    /* En dessous du conteneur des boutons */
}

.modal-tuto-content {
    flex-grow: 1;
    /* min-width:0 indispensable : sans lui, cet item flex (flex-grow:1) ne rétrécit pas sous la
       taille de son contenu (min-width:auto par défaut) et la description longue déborde jusqu'au
       bord, par-dessus la colonne du toggle Simple/Avancé. Avec, le texte revient à la ligne AVANT
       le toggle (cf. commentaire de .mode-switch-container « la description se replie avant lui »). */
    min-width: 0;
}

.modal-tuto-content p {
    margin: 0;
    color: #6e6e73;
}

.modal-main-content {
    display: flex;
    gap: 1.25rem;
    flex-grow: 1;
    overflow: hidden;
    /* Empêche le débordement des enfants */
    max-height: 0;
    opacity: 0;
    transform: translateY(-20px);
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out, margin-top 0.5s ease-in-out;
    margin-top: 0;
    min-height: 0;
    /* Correction pour le flexbox shrink */
    position: relative;
    /* Crée un contexte de superposition */
    z-index: 1;
    /* Doit être en dessous de l'en-tête */
}

#module-sidebar.advanced-view {
    height: 95vh;
    overflow-y: auto;
}

#module-sidebar.advanced-view .modal-main-content {
    max-height: 1000px;
    /* Valeur suffisamment grande */
    opacity: 1;
    transform: translateY(0);
    margin-top: 1rem;
    overflow: visible;
    /* Permet au dropdown modèle LLM de déborder vers le haut */
}


.modal-panels-container {
    display: flex;
    gap: 20px;
    flex-grow: 1;
    overflow-y: auto;
    /* Permet le défilement vertical */
}

.modal-panel {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.07);
    width: 50%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Stratégie pour empêcher le débordement du contenu flex */
    padding: 1rem 1.25rem;
    gap: 1rem;
    /* Ajoute de l'espace entre les enfants flex */
}

.modal-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne */
}

.modal-panel h3 {
    margin-top: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #1C1C1E;
    margin-bottom: 0;
    /* Ajusté */
}


/* La classe .active sur les tuiles est maintenant gérée par JS pour le panneau latéral,
   mais on peut garder un style pour indiquer la sélection. */
.h5p-tile.active {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 122, 255, 0.2);
    border: 1px solid #007AFF;
}

.h5p-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    /* Espacement réduit avec le sous-titre */
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.h5p-content-header h2 {
    margin: 0;
    font-size: 2.2em;
    /* Plus gros et gras */
    font-weight: 700;
    color: #1C1C1E;
}


.h5p-content-description {
    font-size: 1.2em;
    color: #6c6c70;
    /* Gris doux */
    margin-bottom: 40px;
    /* Espacement généreux */
    max-width: 80ch;
    /* Limite la largeur pour la lisibilité */
}

/* Blocs de contenu dans le panneau */
.h5p-prompt-block,
.h5p-processor {
    background-color: #FAFAFA;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    position: relative;
    /* Nécessaire pour positionner le spinner à l'intérieur */
}

.h5p-processor {
    margin-top: 0;
    /* Remplacé par le margin-bottom du bloc précédent */
    padding-top: 25px;
}

.h5p-processor h3 {
    margin-top: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #1C1C1E;
}

.h5p-processor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.h5p-processor-header h3 {
    margin: 0;
}

.llm-generation-controls {
    display: flex;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    overflow: hidden;
    background-color: #3b82f6;
}

.llm-generation-controls .action-btn {
    background-color: transparent !important;
    /* Force la transparence pour outrepasser les autres règles */
    transition: none;
    border-radius: 0;
}

.llm-generation-controls .action-btn:hover {
    transform: none;
    box-shadow: none;
}

.model-selector-container {
    display: flex;
}

.llm-generation-controls .model-selector-btn {
    border-left: 1px solid #2563eb;
    padding: 0 10px;
    min-width: 44px;
}

.library-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #6e6e73;
}

.library-toggle input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.download-btn {
    display: block;
    /* Prend toute la largeur */
    width: 100%;
    padding: 20px;
    background-color: #007AFF;
    /* Bleu profond */
    color: white;
    border: none;
    border-radius: 20px;
    /* Coins plus arrondis */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
    margin-top: 15px;
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.2);
}

.download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.3);
    background-color: #0071e3;
}

/* =======================================================================
   9. FOOTER
   ======================================================================= */
.footer {
    background-color: #ffffff;
    padding: 10px 30px;
    font-size: 0.9em;
    color: #8e8e93;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
    text-align: center;
    width: 100%;
    min-height: 60px;
    box-sizing: border-box;
}

.footer a,
.footer button {
    color: #555;
    text-decoration: none;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Espace entre l'icône et le texte */
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.footer a:hover,
.footer button:hover {
    color: #007AFF;
    text-decoration: none;
}

/* =======================================================================
   10. STYLES RESPONSIVES
   ======================================================================= */
@media (max-width: 768px) {
    .header-right {
        gap: 8px;
        justify-content: flex-end;
        flex-grow: 1;
    }

    /* Réduire légèrement le padding des boutons */
    .language-btn,
    .help-btn,
    .notification-btn {
        padding: 0 8px;
    }

    .subtitle {
        display: none;
    }

    .app-bar h1 {
        font-size: 1.2em;
    }

    .logo {
        height: 35px;
    }

    .footer {
        flex-direction: row;
        column-gap: 20px;
        row-gap: 8px;
        padding: 10px 20px;
    }

    /* Masque les labels sauf version et auteurs */
    .footer a:not(.footer-author):not(.footer-version) span,
    .footer button span {
        display: none;
    }

    .footer a,
    .footer button {
        font-size: 1.1em;
    }

    /* Saut de ligne entre ligne 1 (icônes) et ligne 2 (auteurs) */
    .footer::before {
        content: '';
        order: 1;
        flex-basis: 100%;
        height: 1px;
        background: #e5e5ea;
    }

    .footer-author {
        order: 2;
        font-size: 0.9em;
    }

    /* Module Sidebar - responsive (<=768px), ajustements de dimension */
    #module-sidebar {
        width: 95vw;
        padding: 1rem;
    }

    #module-sidebar.menu-open {
        height: 97vh;
        max-height: 97vh;
        overflow-y: auto;
        --llm-selector-max-height: calc(97vh - 12rem);
    }

    #module-sidebar.advanced-view {
        height: 97vh;
    }

    .modal-main-content {
        flex-direction: column;
        overflow-y: auto;
    }

    #module-sidebar:not(.advanced-view) .modal-main-content {
        display: none;
    }

    #module-sidebar.advanced-view .modal-main-content {
        display: flex;
    }

    .modal-panel {
        width: 100%;
    }
}

/* Optimisation pour très petits écrans */
@media (max-width: 480px) {
    .header-right {
        /* Espacement resserré : 5 boutons icône doivent tenir sans scroll horizontal */
        gap: 2px;
    }

    /* Masquer UNIQUEMENT les textes des boutons - garder toutes les icônes visibles */
    .language-btn span:not(.fi),
    .help-btn span:not(.fas),
    .notification-btn>span[data-key],
    #tchap-button span,
    #sucrerie-button span {
        display: none !important;
    }

    /* Ajuster les boutons pour qu'ils soient compacts et faciles à toucher.
       min-width 40px (au lieu de 44) : avec 5 boutons le header tient sans
       scroll horizontal jusqu'à 360px de large tout en restant tactile. */
    .language-btn,
    .help-btn,
    .notification-btn,
    #tchap-button,
    #sucrerie-button {
        padding: 6px;
        height: auto;
        min-width: 40px;
        min-height: 44px;
    }

    /* Les badges et indicateurs de notification restent visibles */
    .notification-badge,
    .error-indicator {
        display: block;
    }

    .header-left {
        gap: 8px;
    }

    /* Garder les icônes Tchap et Sucrerie compactes mais visibles */
    .tchap-icon {
        width: 16px;
        height: 16px;
    }

    .sucrerie-icon {
        width: 20px;
        height: 20px;
    }
}


.toolbar-btn i {
    font-size: 20px;
    margin-bottom: 2px;
}


@media (min-width: 769px) {
    .modal-header {
        justify-content: space-between;
    }
}

/* =======================================================================
   11. MODALE (MENTIONS LÉGALES, AIDE)
   ======================================================================= */
.modal {
    display: none;
    position: fixed;
    z-index: var(--z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--backdrop-dark);
}

.modal-content {
    background-color: #F5F5F7;
    margin: 5% auto;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 1200px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    animation: slideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #1d1d1f;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 20px;
    padding: 15px 0;
    background-color: #FFFFFF;
    color: #1d1d1f;
    border-bottom: 1px solid #e5e5e5;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 600;
}

.close-modal-btn {
    color: #8e8e93;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: #1d1d1f;
    text-decoration: none;
}

.modal-body {
    padding: 30px;
    line-height: 1.6;
}



@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: scale(0.95);
        opacity: 0.5;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}



/* =======================================================================
   12. ANIMATION DE CHARGEMENT
   ======================================================================= */
.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Styles pour les boutons de langue, d'aide et de notifications inspirés de LinkedIn */
.language-btn,
.help-btn,
.notification-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: #666666;
    padding: 0 12px;
    height: 52px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: color 0.2s, background-color 0.3s;
}

.language-btn:hover,
.help-btn:hover,
.notification-btn:hover {
    color: #000000;
}

.language-btn .fi,
.help-btn .fas,
.notification-btn .fas {
    font-size: 20px;
    line-height: 1;
}

/* Hauteur d'icône uniforme pour aligner les boutons du header */
.help-btn .fas,
.help-btn .tchap-icon,
.help-btn .sucrerie-icon,
.language-btn .fi,
.notification-btn .fas {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

.language-btn span,
.help-btn span,
.notification-btn>span[data-key] {
    display: block;
}


.language-btn .fi {
    font-size: 18px;
}

/* =======================================================================
   12.bis CENTRE DE NOTIFICATIONS
   ======================================================================= */
.notification-center {
    position: relative;
    display: inline-block;
}

.notification-btn {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #007AFF;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-badge:empty,
.notification-badge[data-count="0"] {
    display: none;
}

.error-indicator {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    background: #FF3B30;
    border-radius: 50%;
    display: none;
}

.notification-btn.has-error .error-indicator {
    display: block;
}

.notification-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    margin-top: 16px;
    /* Simule la marge par défaut des ul (1em) pour l'alignement */
    right: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: var(--z-dropdown);
    padding: 12px;
}

.notification-center.open .notification-dropdown {
    display: block;
}

@media (max-width: 499px) {
    .notification-dropdown {
        width: calc(100vw - 24px);
        right: 12px;
        left: auto;
    }
}

/* Dropdown header */
.notification-dropdown__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.notification-dropdown__title {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.notification-dropdown__download-all {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1.5px solid #007AFF;
    color: #007AFF;
    cursor: pointer;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.notification-dropdown__download-all:hover {
    background: #007AFF;
    color: #fff;
}

/* Notification list container */
.notification-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Empty state */
.notification-empty {
    text-align: center;
    color: #6e6e73;
    font-size: 14px;
    padding: 24px 12px;
}

.notification-list:not(:empty)+.notification-empty {
    display: none;
}

/* Notification item */
.notification-item {
    background: #F5F5F7;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 2px solid #007AFF;
}

.notification-item.error {
    background: #FFF5F5;
    border-left: 2px solid #FF3B30;
}

.notification-item.error .notification-item__title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.notification-item.error .notification-item__header,
.notification-item.type-alert .notification-item__header {
    align-items: flex-start;
}

.notification-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Default for single line, overridden for specific types above */
    gap: 8px;
}

.notification-item__title {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    overflow: hidden;
    white-space: normal;
    /* Allow wrap by default */
    word-break: break-word;
}

/* Activity generations: Maintain truncation as requested */
.notification-item.type-h5p .notification-item__title,
.notification-item.type-mbz .notification-item__title,
.notification-item.type-html .notification-item__title,
.notification-item.type-xml .notification-item__title,
.notification-item.type-gift .notification-item__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: center;
}

.notification-item__title .fas {
    color: #FF3B30;
}

.notification-item__close {
    background: none;
    border: none;
    color: #6e6e73;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.notification-item__close:hover {
    color: #1d1d1f;
}

.notification-item__time {
    font-size: 11px;
    font-weight: 500;
    color: #8e8e93;
    margin-left: auto;
    white-space: nowrap;
}

.notification-item__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.notification-item__filename {
    font-size: 12px;
    color: #48484a;
    font-weight: 500;
    display: block;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-item__error {
    font-size: 13px;
    color: #FF3B30;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-weight: 500;
    line-height: 1.4;
    max-width: 100%;
}

.notification-item__btn {
    padding: 8px 16px;
    background: #007AFF;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: auto;
}

.notification-item__btn:hover {
    background: #0056b3;
}

@media (max-width: 499px) {
    .notification-item__btn {
        width: 100%;
        min-height: 44px;
    }
}

/* Bouton "Détails" pour les erreurs (EPIC 5.1) */
.notification-item__details-btn {
    padding: 6px 12px;
    background: #8E8E93;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.notification-item__details-btn:hover {
    background: #636366;
}

.notification-item__details-btn i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

/* Conteneur pour le message technique */
.notification-item__technical-details {
    margin-top: 8px;
    padding: 10px;
    background: #f5f5f5;
    border-left: 3px solid #FF3B30;
    border-radius: 4px;
}

.notification-item__technical-details pre {
    margin: 0;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 12px;
    color: #1d1d1f;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    line-height: 1.4;
}

/* =======================================================================
   13. BARRE D'OUTILS FLOTTANTE
   ======================================================================= */
.prompt-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.textarea-container {
    position: relative;
    flex: 1;
    display: flex;
    min-height: 0;
}

.textarea-container textarea {
    flex: 1;
    margin-bottom: 0;
    /* L'espacement est géré par le gap du parent */
    min-height: 0;
    /* Hauteur minimale pour le mode smartphone */
}

.floating-toolbar {
    display: flex;
    gap: 1rem;
    z-index: 5;
    align-self: flex-start;
    opacity: 1;
    visibility: visible;
    background-color: transparent;
    padding: 0;
    justify-content: space-around;
    /* Répartir l'espace */
    width: 100%;
}

.toolbar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem;
    font-size: 0.75rem;
    /* Taille de police pour le texte */
    color: #6e6e73;
    /* Couleur de texte grise */
    transition: color 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Icône au-dessus du texte */
    align-items: center;
    gap: 0.25rem;
    /* Espace entre l'icône et le texte */
    flex: 1;
    /* Pour que les boutons occupent l'espace */
    text-align: center;
}

.toolbar-btn-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    /* S'assurer que le span prend toute la largeur du bouton */
}

.toolbar-btn i {
    font-size: 18px;
    /* Taille de l'icône */
    margin-bottom: 2px;
    /* Petit espace sous l'icône */
}

.toolbar-btn:hover {
    color: #007AFF;
    background-color: #f0f0f0;
    /* Léger fond gris au survol */
    border-radius: 8px;
    /* Coins arrondis pour le fond */
}

/* Debug JSON toggle - état brut (source IA) */
.toolbar-btn.debug-active-raw {
    color: #ff7a18 !important;
    background: rgba(255, 122, 24, 0.15) !important;
    border-radius: 8px;
    outline: 2px solid #ff7a18;
}

/* Debug JSON toggle - état diff */
.toolbar-btn.debug-active-diff {
    color: #7c4dff !important;
    background: rgba(124, 77, 255, 0.15) !important;
    border-radius: 8px;
    outline: 2px solid #7c4dff;
}

/* Debug JSON toggle - état corrigé (final) */
.toolbar-btn.debug-active-healed {
    color: #4caf50 !important;
    background: rgba(76, 175, 80, 0.15) !important;
    border-radius: 8px;
    outline: 2px solid #4caf50;
}

/* Panel de diff debug — même layout que la textarea qu'il remplace */
.debug-diff-panel {
    display: none;
    /* Même layout que .textarea-container textarea */
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    overflow-y: auto;
    /* Apparence spécifique diff */
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 1rem;
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: 8px;
    box-sizing: border-box;
}

.debug-diff-panel .diff-header {
    font-weight: 600;
    color: #cba6f7;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(205, 214, 244, 0.15);
    font-size: 0.85rem;
}

.debug-diff-panel .diff-empty {
    color: #a6adc8;
    font-style: italic;
    padding: 2rem 0;
    text-align: center;
}

.debug-diff-panel .diff-line {
    padding: 3px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}

.debug-diff-panel .diff-added {
    background: rgba(166, 227, 161, 0.1);
}

.debug-diff-panel .diff-removed {
    background: rgba(243, 139, 168, 0.1);
}

/* Bloc de modification (deux lignes groupées) */
.debug-diff-panel .diff-block {
    border-radius: 4px;
    margin-bottom: 4px;
    border-left: 3px solid #fab387;
    padding-left: 4px;
}

.debug-diff-panel .diff-block .diff-line {
    margin-bottom: 0;
    border-radius: 0;
}

.debug-diff-panel .diff-mod-old {
    background: rgba(243, 139, 168, 0.1);
}

.debug-diff-panel .diff-mod-new {
    background: rgba(166, 227, 161, 0.1);
}

.debug-diff-panel .diff-symbol {
    font-weight: 700;
    width: 1.2em;
    display: inline-block;
}

.diff-added .diff-symbol,
.diff-mod-new .diff-symbol { color: #a6e3a1; }
.diff-removed .diff-symbol,
.diff-mod-old .diff-symbol { color: #f38ba8; }

.debug-diff-panel .diff-path {
    color: #89b4fa;
    margin-right: 0.5em;
}

.debug-diff-panel .diff-val {
    color: #a6adc8;
}

.debug-diff-panel .diff-old {
    color: #f38ba8;
}

.debug-diff-panel .diff-new {
    color: #a6e3a1;
}

/* Debug diff panel responsive */
@media (max-width: 768px) {
    .debug-diff-panel {
        font-size: 0.7rem;
        padding: 0.5rem;
        line-height: 1.4;
    }
    .debug-diff-panel .diff-header {
        font-size: 0.75rem;
    }
    .debug-diff-panel .diff-line {
        padding: 2px 4px;
    }
}

/* Style pour les infobulles (supprimé car le texte est maintenant visible) */
.toolbar-btn::after,
.toolbar-btn::before {
    display: none !important;
}

/* Style pour le mode plein écran */
/* Superposition pour le mode plein écran */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
    padding: 0;
    /* Retiré pour que l'overlay prenne tout l'écran */
    box-sizing: border-box;
}

.textarea-fullscreen {
    width: 85vw;
    /* Occupe 85% de la largeur de la fenêtre */
    height: 85vh;
    /* Occupe 85% de la hauteur de la fenêtre */
    resize: none;
    /* Empêcher le redimensionnement en plein écran */
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.2em;
    line-height: 1.6;
    padding: 1.25rem;
    /* Ajout d'un padding interne */
    box-sizing: border-box;
}


.mode-switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    /* Le toggle garde sa taille : la description se replie avant lui */
}

.switch-label {
    font-size: 0.9em;
    color: #6e6e73;
}

.switch {
    position: relative;
    display: inline-block;
    width: 3.75rem;
    height: 2.125rem;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.625rem;
    width: 1.625rem;
    left: 0.25rem;
    bottom: 0.25rem;
    background-color: white;
    transition: .4s;
}

input:focus-visible+.slider {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

input:checked+.slider {
    background-color: #007AFF;
}

input:checked+.slider:before {
    transform: translateX(1.625rem);
}

.slider.round {
    border-radius: 2.125rem;
}

.slider.round:before {
    border-radius: 50%;
}

/* Styles pour le conteneur de la modale en plein écran */
.fullscreen-modal-container {
    width: 85vw;
    height: 85vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    /* Ajout d'un fond pour la visibilité */
    border-radius: 0.75rem;
    overflow: hidden;
    /* Pour que le textarea ne dépasse pas */
}

.fullscreen-modal-container .unified-rag-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* La barre d'outils en plein écran */
.fullscreen-modal-container .floating-toolbar {
    flex-shrink: 0;
    /* Empêche la barre d'outils de se réduire */
    padding: 0.625rem 1rem;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    justify-content: flex-start;
    /* Aligner à gauche */
}

/* Le textarea en plein écran prend le reste de la place */
.fullscreen-modal-container .textarea-fullscreen {
    flex-grow: 1;
    border: none;
    /* Supprimer les bordures inutiles */
    border-radius: 0;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
}

/* Diff panel en plein écran — même layout que .textarea-fullscreen */
.fullscreen-modal-container .debug-diff-panel {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
}

/* Animation de chargement "Caramel" */
#caramel-animation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.85) 0%,
            /* Centre très sombre */
            rgba(0, 0, 0, 0.6) 35%,
            /* Transition progressive */
            rgba(0, 0, 0, 0.25) 65%,
            /* Plus clair vers les bords */
            rgba(0, 0, 0, 0.1) 100%
            /* Bords presque transparents */
        );
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
    flex-direction: column;
    transition: opacity 300ms ease;
}

/* Fondu de sortie : l'overlay s'efface pendant que la modale de résultat
   apparaît par-dessus (fadeScaleIn 300ms), pour un enchaînement sans flash. */
#caramel-animation-overlay.closing {
    opacity: 0;
    pointer-events: none;
}

.marmite {
    width: 200px;
    height: 150px;
    position: relative;
    filter: drop-shadow(-10px 10px 8px rgba(0, 0, 0, 0.3));
    /* Ombre portée pour l'effet cartoon */
    animation: shake 0.5s infinite;
    /* Ajout de l'animation de tremblement */
}

.marmite::before {
    /* Corps de la casserole */
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8B4513 25%, #A0522D 25%, #A0522D 50%, #8B4513 50%, #8B4513 75%, #A0522D 75%, #A0522D 100%);
    background-size: 80px 80px;
    border-radius: 10px 10px 80px 80px;
    border: 6px solid #000;
    box-sizing: border-box;
    z-index: 1;
}

.marmite::after {
    /* Anse de la casserole */
    content: '';
    position: absolute;
    top: 20px;
    right: -40px;
    width: 80px;
    height: 40px;
    border: 6px solid #000;
    border-radius: 20px;
    background-color: #A0522D;
    z-index: 0;
}

.marmite-content {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 80%;
    background: #D2691E;
    /* Couleur caramel */
    border-radius: 0 0 60px 60px;
    overflow: hidden;
    z-index: 2;
    animation: bubble 2s infinite ease-in-out, caramelize 10s linear forwards;
    /* Combinaison des animations */
}

.marmite-content::before {
    /* Brillance sur le caramel */
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

#recipe-steps {
    margin-top: 20px;
    color: white;
    font-size: 1.2em;
    text-align: center;
    height: 50px;
}

/* Jauge de progression de la génération par lots (« plan + remplissage »).
   Élément STABLE, distinct de #recipe-steps : la barre se remplit selon la proportion
   de questions générées (démarre amorcée à ~10 %), avec une brillance qui balaie en
   continu pour signaler l'activité même pendant qu'un lot cuit. */
#caramel-batch-gauge {
    margin-top: 4px;
    width: 300px;
    max-width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#caramel-batch-gauge[hidden] {
    display: none;
}

.caramel-gauge__track {
    width: 100%;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.45);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.caramel-gauge__fill {
    position: relative;
    height: 100%;
    width: 10%;
    border-radius: 8px;
    background: linear-gradient(90deg, #C97B30 0%, #E8A23D 50%, #F6C667 100%);
    box-shadow: 0 0 8px rgba(246, 198, 103, 0.6);
    overflow: hidden;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.caramel-gauge__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(-100%);
    animation: caramelGaugeShine 1.8s ease-in-out infinite;
}

@keyframes caramelGaugeShine {
    0% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(260%); }
}

.caramel-gauge__label {
    color: #fff;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .caramel-gauge__fill::after { animation: none; }
    .caramel-gauge__fill { transition: none; }
}

/* Modale de résultat post-génération — harmonisée avec preview-modal */
.generation-result-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--backdrop-light);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
}

.generation-result-modal.hidden {
    display: none;
}

.generation-result-modal__card {
    background: #F5F5F7;
    border-radius: 1.25rem;
    padding: 2.5rem 3rem 2rem;
    max-width: 720px;
    width: 92%;
    text-align: center;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.generation-result-modal__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.generation-result-modal__logo {
    height: 52px;
    width: auto;
    flex-shrink: 0;
}

.generation-result-modal__title {
    font-size: 1.6em;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    text-align: left;
}

.generation-result-modal__activity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.generation-result-modal__icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.generation-result-modal__name {
    font-size: 1.15em;
    font-weight: 500;
    color: #6e6e73;
}

.generation-result-modal__actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.generation-result-modal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.9rem 1.75rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

/* Largeurs égales : le wrapper et le bouton secondaire font exactement 50/50 */
.generation-result-modal__actions > .generation-result-modal__download-wrapper,
.generation-result-modal__actions > .generation-result-modal__btn--secondary {
    flex: 0 0 calc(50% - 6px);
    width: calc(50% - 6px);
    min-width: 0;
    box-sizing: border-box;
}

.generation-result-modal__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.generation-result-modal__btn--primary {
    background-color: #007AFF;
    color: #ffffff;
}

.generation-result-modal__btn--primary:hover {
    background-color: #0056b3;
}

.generation-result-modal__btn--secondary {
    background-color: #ffffff;
    color: #1d1d1f;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.07);
}

.generation-result-modal__btn--secondary:hover {
    background-color: #f0f0f2;
}

.generation-result-modal__continue {
    display: inline-block;
    color: #86868b;
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-top: -0.25rem;
}

.generation-result-modal__continue:hover {
    color: #1d1d1f;
}

.generation-result-modal__continue .fa-arrow-right {
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.generation-result-modal__continue:hover .fa-arrow-right {
    transform: translateX(3px);
}

.generation-result-modal.entering .generation-result-modal__card {
    animation: fadeScaleIn 300ms ease both;
}

@keyframes fadeScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Wrapper du bouton télécharger + dropdown */
.generation-result-modal__download-wrapper {
    position: relative;
    display: flex;
    border-radius: 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.generation-result-modal__download-wrapper .generation-result-modal__btn--primary {
    flex: 1;
}

.generation-result-modal__download-wrapper.has-dropdown .generation-result-modal__btn--primary {
    border-radius: 0.75rem 0 0 0.75rem;
}

/* Chevron : même fond, aucune bordure visible, un seul bloc */
.generation-result-modal__dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    flex-shrink: 0;
    border: none;
    background-color: #007AFF;
    color: #ffffff;
    border-radius: 0 0.75rem 0.75rem 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.85em;
}

/* Hover synchronisé sur tout le wrapper = un seul bouton */
.generation-result-modal__download-wrapper.has-dropdown:hover .generation-result-modal__btn--primary,
.generation-result-modal__download-wrapper.has-dropdown:hover .generation-result-modal__dropdown-toggle {
    background-color: #0056b3;
}

.generation-result-modal__download-wrapper.has-dropdown:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Désactiver le hover individuel des pièces quand elles sont dans le wrapper */
.generation-result-modal__download-wrapper.has-dropdown .generation-result-modal__btn--primary:hover,
.generation-result-modal__download-wrapper.has-dropdown .generation-result-modal__dropdown-toggle:hover {
    transform: none;
    box-shadow: none;
}

/* Dropdown de formats alternatifs */
.generation-result-modal__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10;
    overflow: hidden;
}

.generation-result-modal__dropdown.hidden {
    display: none;
}

.generation-result-modal__dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0.7rem 1.25rem;
    border: none;
    background: transparent;
    color: #1d1d1f;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: left;
}

.generation-result-modal__dropdown-item:hover {
    background-color: #f0f7ff;
    color: #007AFF;
}

.generation-result-modal__dropdown-item + .generation-result-modal__dropdown-item {
    border-top: 1px solid #f0f0f2;
}

.generation-result-modal__dropdown-item i {
    font-size: 0.85em;
    opacity: 0.7;
}


@keyframes bubble {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.05);
    }
}

@keyframes caramelize {
    0% {
        background-color: #FFD700;
    }

    /* Or clair (sucre) */
    50% {
        background-color: #DAA520;
    }

    /* Or plus foncé */
    100% {
        background-color: #D2691E;
    }

    /* Caramel ambré */
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    75% {
        transform: translateX(2px);
    }
}

.sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: yellow;
    border-radius: 50%;
    animation: sparkle-anim 1s ease-out infinite;
    opacity: 0;
}

@keyframes sparkle-anim {
    0% {
        transform: translateY(0) scale(0);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-80px) scale(1.5);
        opacity: 0;
    }
}

.bubble {
    position: absolute;
    background: rgba(255, 204, 102, 0.6);
    border-radius: 50%;
    animation: bubble-rise 2s ease-in-out infinite;
}

@keyframes bubble-rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) scale(0);
        opacity: 0;
    }
}

/* =======================================================================
   14. UPLOAD PDF ET OCR (RAG)
   ======================================================================= */
.file-upload-container {
    grid-column: 1 / -1;
    margin-top: 10px;
    border: 2px dashed #dcdcdc;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    background-color: #fcfcfc;
    transition: border-color 0.3s, background-color 0.3s;
}

.file-upload-container:hover {
    border-color: #007AFF;
    background-color: #f5faff;
}

.file-upload-label {
    cursor: pointer;
    color: #007AFF;
    font-weight: 500;
}

input[type="file"] {
    display: none;
}

#ocr-status {
    margin-top: 15px;
    font-style: italic;
    color: #6e6e73;
}

/* Vide (état par défaut), il ne doit pas peser dans le centrage vertical du
   bloc dépôt : sans cette règle, sa marge de 15px tire le contenu vers le haut
   et laisse un vide sous « Choisissez un fichier ». La marge revient dès qu'un
   statut de traitement s'affiche. */
#ocr-status:empty {
    margin-top: 0;
}

/* Bouton « Arrêter » : pilule discrète à bordure légère, sémantique stop
   (vire au rouge au survol). Remplace l'ancien lien texte brut. */
.ocr-cancel-btn {
    display: none;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 12px;
    border: 1px solid #e0e0e3;
    border-radius: 999px;
    background: #fff;
    color: #6e6e73;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.ocr-cancel-btn:hover {
    color: #d93025;
    border-color: rgba(217, 48, 37, 0.4);
    background: rgba(217, 48, 37, 0.06);
}

/* Spécificité renforcée : sans .drag-drop-area en tête, la règle générale
   « .drag-drop-area .drag-drop-content i { margin-bottom: 8px } » (pictogramme
   nuage) gagne au départage et surélève la croix. On neutralise toute marge et
   on centre la croix sur la même médiane que le libellé. */
.drag-drop-area .drag-drop-content .ocr-cancel-btn i {
    display: flex;
    align-items: center;
    font-size: 10px;
    line-height: 1.4;
    color: inherit;
    margin: 0;
}

#ocr-output-container {
    grid-column: 1 / -1;
    position: relative;
    margin-top: 10px;
}

.ocr-output-header {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 5px 10px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e5e5e5;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.ocr-output-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: #6e6e73;
    transition: color 0.2s;
}

.ocr-output-header button:hover {
    color: #007AFF;
}

#ocr-output {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 0;
    height: 200px;
}

#ocr-output-container:fullscreen {
    padding: 20px;
    background-color: #F5F5F7;
    display: flex;
    flex-direction: column;
}

#ocr-output-container:fullscreen #ocr-output {
    height: 100%;
    flex-grow: 1;
}

/* =======================================================================
   15. STYLES POUR L'INTERRUPTEUR RAG
   ======================================================================= */

#rag-section-container {
    grid-column: 1 / -1;
    margin-top: 10px;
}

.rag-section-header {
    margin-bottom: 5px;
}

.rag-toggle-container {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 12px;
}

.rag-title {
    margin: 0;
    text-align: right;
    flex-grow: 1;
}

.rag-content-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rag-top-row {
    display: flex;
    gap: 15px;
}

.unified-rag-area,
.drag-drop-area {
    flex: 1 1 50%;
    /* Base de 50%, peut grandir et rétrécir */
    box-sizing: border-box;
    /* S'assure que le padding/border est inclus dans la largeur */
}

.rag-content-area.fullscreen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rag-content-area.fullscreen .unified-rag-area {
    flex-grow: 1;
}

.unified-rag-area {
    position: relative;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    /* Hauteur minimale pour l'ensemble */
}

.unified-rag-area.fullscreen {
    height: 100%;
    width: 100%;
    border: none;
}

.unified-rag-area.fullscreen #ocr-output {
    flex-grow: 1;
    height: auto;
    /* Permet au flex-grow de fonctionner */
    max-height: none;
    /* Supprime la limite de hauteur en plein écran */
}

#ocr-output {
    flex-grow: 1;
    resize: none !important;
    padding: 20px;
    border: none;
    border-radius: 0;
    font-family: "SF Mono", "Menlo", "Monaco", monospace;
    font-size: 1em;
    background-color: #FFFFFF;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    transition: background-color 0.3s ease;
}

#ocr-output[contenteditable="false"],
#ocr-output.locked {
    background-color: #F5F5F7;
    cursor: default;
}

#ocr-output:focus {
    outline: 2px solid #007AFF;
    outline-offset: -2px;
}

#ocr-output:empty:before {
    content: attr(data-placeholder);
    color: #a0a0a0;
    pointer-events: none;
}

#ocr-output mark {
    padding: 2px 0;
    border-radius: 3px;
}

.unified-rag-area .floating-toolbar {
    background-color: #f8f8f8;
    border-bottom: 1px solid #e5e5e5;
    padding: 5px;
    justify-content: flex-end;
}

.unified-rag-area textarea {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    min-height: 7.5rem;
    flex-grow: 1;
}

.drag-drop-area {
    padding: 12px;
    text-align: center;
    background-color: #fcfcfc;
    transition: background-color 0.3s;
    border: 2px dashed #dcdcdc;
    border-radius: 12px;
    /* Split vertical : le dépôt de fichiers occupe tout l'espace, la ligne
       d'import par lien ne prend que sa hauteur naturelle (input). On répartit
       l'espace existant sans augmenter la hauteur globale. */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Bloc dépôt de fichiers : absorbe tout l'espace restant, contenu centré.
   position:relative → ancre l'overlay de statut d'import. */
.drag-drop-area .drag-drop-content {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Statut d'import (« Décodage… », « Transcription… » + bouton Arrêter) :
   affiché en OVERLAY absolu centré sur la zone de dépôt, hors du flux. Il ne
   pousse donc plus le séparateur, la ligne URL ni le hint → aucun décalage de
   mise en page (anti-FOUC) et le statut dispose de toute la largeur. Invisible
   au repos (piloté par .is-busy depuis ocr.js). */
.drag-drop-area .drag-drop-status {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(252, 252, 252, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.drag-drop-area .drag-drop-status.is-busy {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Dans l'overlay, le statut n'a plus de marge de flux (il est centré). */
.drag-drop-area .drag-drop-status #ocr-status {
    margin-top: 0;
}

/* Resserre légèrement le bloc texte (icône + libellés) pour un meilleur centrage. */
.drag-drop-area .drag-drop-content i {
    margin-bottom: 8px;
}

.drag-drop-area .drag-drop-content p {
    margin: 3px 0;
}

/* Séparateur « ou un lien web » : trait de chaque côté d'un libellé centré.
   Clarifie que le lien est une SOURCE alternative au fichier (pas un 2e « ou »). */
.drag-drop-area .url-import-divider {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 4px;
    color: #8a8a8e;
    font-size: 0.78em;
    text-transform: lowercase;
}

.drag-drop-area .url-import-divider::before,
.drag-drop-area .url-import-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px dashed #dcdcdc;
}

/* Ligne d'import par lien : hauteur minimale (juste l'input). */
.drag-drop-area .url-import-row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Indication de délai, toujours visible : aucune apparition/disparition
   dynamique → pas de décalage de mise en page (anti-FOUC). */
.drag-drop-area .url-import-hint {
    flex: 0 0 auto;
    margin: 0;
    text-align: center;
    color: #a0a0a5;
    font-size: 0.72em;
    line-height: 1.3;
}

.url-import-icon {
    flex: 0 0 auto;
    color: #007AFF;
    font-size: 0.95em;
}

.url-import-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font-size: 0.85em;
    background-color: #fff;
    transition: border-color 0.2s;
}

.url-import-input:focus {
    outline: 2px solid #007AFF;
    outline-offset: -2px;
    border-color: #007AFF;
}

.url-import-input:disabled {
    background-color: #f5f5f7;
    cursor: default;
}

.url-import-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: none;
    border-radius: 8px;
    background-color: #007AFF;
    color: #fff;
    font-weight: 500;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Icône à largeur fixe : le swap +→spinner ne change pas la largeur du bouton
   (anti-FOUC : le bouton ne bouge pas pendant le chargement). */
.url-import-btn i {
    width: 1em;
    text-align: center;
}

.url-import-btn:hover {
    background-color: #0066d6;
}

.url-import-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.drag-drop-area.drag-over {
    background-color: #f5faff;
}

.drag-drop-content i {
    font-size: 2em;
    color: #007AFF;
    margin-bottom: 10px;
}

.drag-drop-content p {
    margin: 5px 0;
    color: #6e6e73;
}

.file-upload-label {
    cursor: pointer;
    color: #007AFF;
    font-weight: 500;
    text-decoration: underline;
}

.rag-toggle-container {
    grid-column: 1 / -1;
    display: flex;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    background-color: #fcfcfc;
    transition: border-color 0.3s, background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.drag-drop-area.drag-over {
    border-color: #007AFF;
    background-color: #f5faff;
}

.drag-drop-content i {
    font-size: 3em;
    color: #007AFF;
    margin-bottom: 15px;
}

.drag-drop-content p {
    margin: 5px 0;
    color: #6e6e73;
}

.file-upload-label {
    cursor: pointer;
    color: #007AFF;
    font-weight: 500;
    text-decoration: underline;
}

.rag-toggle-container {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 12px;
}

.rag-toggle-label {
    font-weight: 500;
    color: #1d1d1f;
}

.rag-title {
    grid-column: 1 / -1;
    font-size: 1.1em;
    font-weight: 500;
    color: #1d1d1f;
    margin-bottom: 10px;
    text-align: center;
}

.rag-note {
    grid-column: 1 / -1;
    font-size: 0.9em;
    color: #6e6e73;
    margin-top: -10px;
    margin-bottom: 10px;
    text-align: center;
}

/* Styles pour l'infobulle */
[data-tooltip-key] {
    position: relative;
}

[data-tooltip-key]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    white-space: pre-wrap;
    width: max-content;
    max-width: 300px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
}

[data-tooltip-key]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* =======================================================================
   16. SIMULATEUR ELEA TEST
   ======================================================================= */
.elea-test-simulator {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1d1d1f;
    max-width: 1200px;
    /* Standardisé */
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f7;
    border-radius: 12px;
}

.elea-test-header {
    background-color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.elea-test-title-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

/* Edit button in footer styling */
.preview-modal__edit-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.preview-modal__edit-btn i {
    font-size: 1em;
}

/* Secondary Button Style (Harmonized with primary-btn but distinct) */
.secondary-btn {
    background-color: rgba(0, 122, 255, 0.1);
    color: #007AFF;
    border: 1px solid rgba(0, 122, 255, 0.2);
}

.secondary-btn:hover {
    background-color: rgba(0, 122, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 122, 255, 0.15);
}

.elea-test-nav-arrows {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.elea-nav-arrow {
    background: #f5f5f7;
    border: 1px solid #d1d1d6;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #1d1d1f;
}

.elea-nav-arrow:hover {
    background: #007AFF;
    border-color: #007AFF;
    color: white;
}

.elea-nav-arrow i {
    font-size: 0.9em;
}


.elea-test-icon {
    color: #007AFF;
    font-size: 1.25em;
}

.elea-test-title {
    font-size: 1.15em;
    font-weight: 600;
}

.elea-test-desc {
    color: #6e6e73;
    font-size: 0.92em;
    margin-bottom: 10px;
}

.elea-test-progress {
    font-size: 0.9em;
    font-weight: 500;
    color: #86868b;
    text-align: right;
}

.elea-test-card {
    background-color: #fff;
    padding: 18px 24px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
}

.elea-question-header {
    margin-bottom: 15px;
}

.elea-question-name {
    font-size: 0.85em;
    text-transform: uppercase;
    color: #86868b;
    margin-bottom: 5px;
    font-weight: 600;
}

.elea-question-text {
    font-size: 1.05em;
    line-height: 1.45;
}

.elea-answer-zone {
    margin-bottom: 20px;
}

/* Options Lists (Multichoice, TrueFalse) */
.elea-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.elea-option-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.elea-option-item:hover {
    border-color: #007AFF;
    background-color: #f5faff;
}

.elea-option-item.selected {
    border-color: #007AFF;
    background-color: #eef7ff;
}

.elea-option-item.disabled {
    cursor: default;
    pointer-events: none;
}

.elea-option-item.should-be-selected {
    border-color: #34c759;
    background-color: #e8f8ec;
}

.elea-option-item.wrong-selection {
    border-color: #ff3b30;
    background-color: #fff2f2;
}

.elea-opt-icon {
    font-size: 1.2em;
    color: #007AFF;
    display: flex;
    align-items: center;
}

.elea-option-item.selected .elea-opt-icon {
    color: #007AFF;
}

.elea-option-item.should-be-selected .elea-opt-icon {
    color: #34c759;
}

.elea-option-item.wrong-selection .elea-opt-icon {
    color: #ff3b30;
}

/* Matching */
.elea-matching-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.elea-matching-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
}

.elea-matching-label {
    flex: 1;
    min-width: 200px;
}

.elea-select {
    padding: 8px;
    border: 1px solid #d1d1d6;
    border-radius: 6px;
    background-color: #fff;
    font-size: 0.95em;
    min-width: 150px;
}

/* Input (Numerical, ShortAnswer) */
.elea-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.elea-input {
    padding: 10px 15px;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    font-size: 1em;
    width: 100%;
    max-width: 400px;
}

.elea-unit {
    font-weight: 500;
    color: #6e6e73;
}

/* Cloze */
.elea-cloze-text {
    line-height: 2;
}

.elea-cloze-input,
.elea-cloze-select {
    margin: 0 5px;
    padding: 4px 8px;
    border: 1px solid #d1d1d6;
    border-radius: 4px;
}

/* Feedback Section */
.elea-feedback {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.elea-feedback.correct {
    background-color: #e8f8ec;
    border: 1px solid #34c759;
}

.elea-feedback.incorrect {
    background-color: #fff2f2;
    border: 1px solid #ff3b30;
}

.elea-feedback.hint {
    background-color: #fff8e1;
    border: 1px solid #f9a825;
}

.elea-feedback.partial {
    background-color: #fff3e0;
    border: 1px solid #ff9800;
}

.elea-feedback-icon {
    font-size: 1.5em;
}

.elea-feedback.correct .elea-feedback-icon {
    color: #34c759;
}

.elea-feedback.incorrect .elea-feedback-icon {
    color: #ff3b30;
}

.elea-feedback.hint .elea-feedback-icon {
    color: #f9a825;
}

.elea-feedback.partial .elea-feedback-icon {
    color: #ff9800;
}

.elea-feedback-content {
    flex: 1;
}

.elea-feedback-title {
    font-weight: 600;
    margin-bottom: 5px;
}

/* Footer & Buttons */
.elea-test-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
}

.elea-btn {
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-size: 0.95em;
    transition: background-color 0.2s;
}

.elea-btn.primary {
    background-color: #007AFF;
    color: white;
}

.elea-btn.primary:hover {
    background-color: #0062cc;
}

.elea-btn.secondary {
    background-color: #e5e5ea;
    color: #1d1d1f;
}

.elea-btn.secondary:hover {
    background-color: #d1d1d6;
}

/* Screen End */
.elea-test-end {
    text-align: center;
    padding: 40px;
}

.elea-test-end-icon {
    font-size: 4em;
    color: #007AFF;
    margin-bottom: 20px;
}

.elea-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

[data-tooltip-key]::before {
    content: '';
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    margin-bottom: -6px;
    /* Position the arrow correctly */
}

[data-tooltip-key]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Adjust after pseudo-element to be above the arrow */
[data-tooltip-key]::after {
    bottom: calc(125% + 6px);
}

/* =======================================================================
   17. STYLES POUR LES BOUTONS DE LA MODALE
   ======================================================================= */

.modal-panel-footer {
    margin-top: auto;
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.action-buttons-group {
    display: flex;
    gap: 0.625rem;
    flex-grow: 1;
    width: 100%;
}

.generation-button-group {
    gap: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1rem;
    /* Appliquer le radius au conteneur pour l'ombre */
}




.action-btn.secondary-btn {
    background-color: #FFFFFF;
    color: #007AFF;
    border: 1px solid #007AFF;
}

.action-btn.secondary-btn:hover {
    background-color: #f0f8ff;
}

.action-btn.primary-btn {
    background-color: #007AFF;
    color: white;
    border: none;
}

.action-btn.primary-btn:hover {
    background-color: #0056b3;
}

.generation-button-group:hover .action-btn.primary-btn {
    background-color: #0056b3;
}


/* Assurer la même hauteur pour tous les boutons */
.modal-panel-footer .action-btn {
    padding: 1rem;
    font-size: 1.1em;
    font-weight: 500;
    border-radius: 1rem;
    text-align: center;
    flex-grow: 1;
}

.main-action-button {
    flex-grow: 1;
    display: flex;
}

.main-action-button .action-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%;
}

.more-actions-button {
    position: relative;
    display: flex;
    margin-left: -1px;
    /* Superposition pour joindre les boutons */
}

.more-actions-button .dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.more-actions-button .dropdown-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    list-style: none;
    padding: 5px 0;
    margin: 0 0 5px 0;
    min-width: 150px;
    z-index: var(--z-dropdown);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.more-actions-button .dropdown-menu.show {
    display: block;
}

.more-actions-button .dropdown-menu li a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.more-actions-button .dropdown-menu li a:hover {
    background-color: #f5f5f5;
}

/* Style spécifique pour le bouton Copier dans la modale */
.toolbar-btn.copy-prompt-btn {
    background-color: transparent;
    /* Fond transparent par défaut */
    color: #6e6e73;
    /* Texte gris comme les autres boutons de la barre d'outils */
    border-radius: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.toolbar-btn.copy-prompt-btn:hover {
    background-color: #f0f0f0;
    /* Léger fond gris au survol */
    color: #007AFF;
}

/* Style pour le bouton Copier lorsqu'il est cliqué (succès) */
.toolbar-btn.copy-prompt-btn.copied {
    background-color: #007AFF;
    /* Fond bleu */
    color: white;
    /* Texte blanc */
}


/* Style pour l'icône Tchap */
#tchap-button {
    text-decoration: none;
}

.tchap-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Style pour l'icône Sucrerie — mini-tuile d'application (le SVG porte déjà ses coins arrondis) */
#sucrerie-button {
    text-decoration: none;
}

.sucrerie-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 5px;
    /* Discrète mise en avant façon tuile ; le fond rose du logo est fixe (indépendant du thème) */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s;
}

#sucrerie-button:hover .sucrerie-icon {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}




.expand-button-container {
    text-align: center;
    margin-top: 10px;
}

.expand-btn {
    background-color: #e9e9ed;
    color: #007AFF;
    border: 1px solid #007AFF;
    padding: 8px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9em;
    font-weight: 500;
}

.expand-btn:hover {
    background-color: #f0f8ff;
}

/* Améliorations responsives pour les modales */
@media (max-width: 768px) {
    .rag-top-row {
        flex-direction: column;
    }

    .unified-rag-area,
    .drag-drop-area {
        flex-basis: 100%;
        /* Prend toute la largeur sur les petits écrans */
    }

    .rag-content-area {
        grid-template-columns: 1fr;
    }

    .modal-header {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .modal-title-container {
        order: 1;
    }

    .top-controls-container {
        margin-left: 0;
        order: 2;
    }

    .tuto-controls-wrapper {
        flex-direction: column;
        align-items: center;
        /* Centrer le switch */
        gap: 15px;
        width: 100%;
    }

    .modal-tuto-content {
        text-align: center;
    }

    /* Module Sidebar - responsive (<=768px), gestion du défilement */
    #module-sidebar {
        overflow-y: auto;
        /* Activer le défilement sur toute la modale */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        /* Empêche le défilement de l'arrière-plan */
    }

    .modal-main-content {
        overflow: visible !important;
        /* Forcer la désactivation du défilement sur ce conteneur */
    }
}

.hidden {
    display: none;
}

/* PDF Tags and Character Counter */
#pdf-tags-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    justify-content: flex-start;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background-color: #f9f9f9;

}

.pdf-tag {
    display: flex;
    align-items: center;
    background-color: #e0e0e0;
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    /* Augmentation de la largeur maximale */
}

.pdf-tag .filename {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 8px;
}

.rag-tags-tuto {
    font-size: 0.9em;
    color: #6e6e73;
    text-align: center;
    margin: 0 0 0 0;
}

.pdf-tag .color-picker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    /* Empêche le rétrécissement de la bulle */
}

.pdf-tag .color-picker::-webkit-color-swatch {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ccc;
}

.pdf-tag .color-picker::-moz-color-swatch {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ccc;
}

.pdf-tag .remove-tag-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    margin-left: 5px;
    line-height: 1;
}

.pdf-tag .remove-tag-btn:hover {
    color: #333;
}

.char-counter {
    position: absolute;
    bottom: 10px;
    right: 18px;
    font-size: 12px;
    color: #666;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
}

.char-counter.warning {
    color: #e67e22;
    font-weight: bold;
}

.char-counter.error {
    color: #e74c3c;
    font-weight: bold;
}

.ia-guidance-text {
    font-size: 0.9em;
    color: #6e6e73;
    line-height: 1.4;
    margin: 0;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* Limite le texte à 3 lignes */
    line-clamp: 3;
    /* Propriété standard */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.2em;
    /* Environ 3 lignes (3 * 1.4em) */
}

.ia-guidance-text .fa-info-circle {
    margin-right: 0.3em;
    color: #007AFF;
}

/* ========================================
   Notification Toast Popup
   ======================================== */

.notification-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 300px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-left: 2px solid #007AFF;
    padding: 12px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-toast.error {
    border-left-color: #FF3B30;
    background: #FFF5F5;
    min-height: fit-content;
    height: auto;
}

.notification-toast.error .notification-toast__title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.notification-toast.error .notification-toast__header,
.notification-toast.type-alert .notification-toast__header {
    align-items: flex-start;
}

.notification-toast__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.notification-toast__title {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    flex: 1;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    overflow: hidden;
    white-space: normal;
    /* Allow wrap by default */
    word-break: break-word;
}

/* Activity generations: Maintain truncation as requested */
.notification-toast.type-h5p .notification-toast__title,
.notification-toast.type-mbz .notification-toast__title,
.notification-toast.type-html .notification-toast__title,
.notification-toast.type-xml .notification-toast__title,
.notification-toast.type-gift .notification-toast__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: center;
}

.notification-toast__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.notification-toast__error {
    font-size: 13px;
    color: #FF3B30;
    margin: 4px 0 0 0;
    line-height: 1.4;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

.notification-toast__close {
    background: none;
    border: none;
    color: #6e6e73;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.notification-toast__close:hover {
    color: #1d1d1f;
}

.notification-toast__close:focus {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
    border-radius: 2px;
}

.notification-toast__time {
    font-size: 11px;
    font-weight: 500;
    color: #8e8e93;
    margin-left: auto;
    white-space: nowrap;
}

.notification-toast__btn {
    margin-top: 4px;
    padding: 8px 16px;
    background: #007AFF;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
}

.notification-toast__btn:hover {
    background: #0056b3;
}

.notification-toast__btn:focus {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 499px) {
    .notification-toast {
        right: 12px;
        left: 12px;
        width: auto;
    }

    .notification-toast__btn {
        min-height: 44px;
    }

    .notification-toast__close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Toast Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes flyToBell {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--bell-offset-x, 0), var(--bell-offset-y, 0)) scale(0.1);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

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

.notification-toast.entering {
    animation: slideInRight 0.3s ease-out;
}

.notification-toast.exiting {
    animation: flyToBell 0.4s ease-in forwards;
}

.notification-badge.incrementing {
    animation: pulse 0.2s ease-out;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .notification-toast,
    .notification-badge {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .notification-toast.entering,
    .notification-toast.exiting {
        animation: none !important;
    }

    #caramel-animation-overlay {
        transition: none !important;
    }
}

/* ========================= PREVIEW MODAL ========================= */

/* Overlay */
.preview-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--backdrop-light);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    /* Même padding que la modale de génération */
    transition: opacity 300ms ease;
}

/* Modal container - harmonisé avec la modale de génération */
.preview-modal {
    background: #F5F5F7;
    /* Fond gris comme la modale de génération */
    border-radius: 1.25rem;
    /* Même border-radius que la modale de génération */
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.15);
    /* Même ombre que la modale de génération */
    width: 90vw;
    /* Même largeur que la modale de génération */
    max-width: 1400px;
    /* Même max-width que la modale de génération */
    height: 95vh;
    /* Même hauteur que la modale de génération en mode avancé */
    display: flex;
    flex-direction: column;
    z-index: 2100;
    /* Local au stacking context de .preview-modal-overlay */
    transition: opacity 300ms ease, transform 300ms ease;
    padding: 1.25rem;
    /* Même padding que la modale de génération */
    box-sizing: border-box;
    gap: 1rem;
    /* Espace entre header, content et footer */
}


/* Header - tuile blanche sur fond gris */
.preview-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
    /* gap: 1rem; -- conflict with absolute centering if space is tight, managed by max-width */
    position: relative;
    /* Necessary for absolute centering of title */
    z-index: 3000;
}

.preview-modal__header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    /* Keep above title if overlap */
}

.preview-modal__nav-indicator {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    min-width: 45px;
    text-align: center;
}

.preview-modal__header-title-wrapper {
    /* Absolute centering to be perfectly centered on the parent div */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: visible;
    max-width: 65%;
    /* Prevent overlap with side controls */
}

.preview-modal__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.preview-modal__title {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

/* Hide edit button when in edit mode */
.preview-modal__edit-btn.hidden {
    display: none;
}

.preview-modal__close {
    background: none;
    border: none;
    font-size: 20px;
    color: #86868b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 150ms ease;
    flex-shrink: 0;
}

.preview-modal__close:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Content - tuile blanche avec scroll interne */
.preview-modal__content {
    flex: 1;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.07);
    padding: 1.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    transition: border-radius 0.2s ease;
    z-index: 10;
}

.preview-modal__content.has-warning {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Warning Banner - merged with content */
.preview-modal__warning {
    background: #ffffff;
    padding: 0.75rem 1.25rem;
    color: #6e6e73;
    font-size: 13px;
    font-style: italic;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.07);
    margin-top: -1rem;
    /* Pull up to merge with content gap */
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /* Subtle separator */
}

/* Style de la scrollbar pour Chrome/Safari */
.preview-modal__content::-webkit-scrollbar {
    width: 8px;
}

.preview-modal__content::-webkit-scrollbar-track {
    background: transparent;
}

.preview-modal__content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.preview-modal__content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.preview-modal__preview {
    background: transparent;
    /* Pas de fond car déjà sur fond blanc */
    border-radius: 0;
    padding: 0;
    text-align: center;
    min-height: 400px;
    /* Hauteur minimale pour les activités */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Force la largeur à 100% */
    flex: 1;
    /* Prend tout l'espace disponible */
    position: relative;
    /* Nécessaire pour positionner le bouton plein écran */
}

/* Bouton plein écran pour le contenu de la modale */
.preview-modal__fullscreen-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 100;
    /* Au-dessus du contenu mais en dessous des overlays */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.preview-modal__fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

.preview-modal__fullscreen-btn:active {
    transform: scale(0.95);
}

.preview-modal__fullscreen-btn i {
    transition: transform 0.2s ease;
}

.preview-modal__fullscreen-btn--integrated {
    position: relative;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    font-size: 14px;
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.preview-modal__fullscreen-btn--integrated:hover {
    background: #e0e0e0;
    color: #000;
}

/* Style du conteneur en mode plein écran */
.preview-modal__preview:fullscreen {
    background: white !important;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.preview-modal__preview:-webkit-full-screen {
    background: white !important;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.preview-modal__preview:-moz-full-screen {
    background: white !important;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.preview-modal__preview:-ms-fullscreen {
    background: white !important;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

/* Forcer le fond blanc pour tous les simulateurs en mode plein écran */
.preview-modal__preview:fullscreen .millionnaire-simulator,
.preview-modal__preview:fullscreen .matching-simulator,
.preview-modal__preview:fullscreen .glossary-simulator,
.preview-modal__preview:fullscreen .qcm-simulator,
.preview-modal__preview:fullscreen .elea-test-simulator,
.preview-modal__preview:fullscreen .elea-page-simulator,
.preview-modal__preview:fullscreen .devoir-simulator,
.preview-modal__preview:-webkit-full-screen .millionnaire-simulator,
.preview-modal__preview:-webkit-full-screen .matching-simulator,
.preview-modal__preview:-webkit-full-screen .glossary-simulator,
.preview-modal__preview:-webkit-full-screen .qcm-simulator,
.preview-modal__preview:-webkit-full-screen .elea-test-simulator,
.preview-modal__preview:-webkit-full-screen .elea-page-simulator,
.preview-modal__preview:-webkit-full-screen .devoir-simulator,
.preview-modal__preview:-moz-full-screen .millionnaire-simulator,
.preview-modal__preview:-moz-full-screen .matching-simulator,
.preview-modal__preview:-moz-full-screen .glossary-simulator,
.preview-modal__preview:-moz-full-screen .qcm-simulator,
.preview-modal__preview:-moz-full-screen .elea-test-simulator,
.preview-modal__preview:-moz-full-screen .elea-page-simulator,
.preview-modal__preview:-moz-full-screen .devoir-simulator {
    background: white !important;
}

/* Ajuster le bouton en mode plein écran */
.preview-modal__preview:fullscreen .preview-modal__fullscreen-btn,
.preview-modal__preview:-webkit-full-screen .preview-modal__fullscreen-btn,
.preview-modal__preview:-moz-full-screen .preview-modal__fullscreen-btn,
.preview-modal__preview:-ms-fullscreen .preview-modal__fullscreen-btn {
    top: 24px;
    right: 24px;
}

.preview-modal__placeholder {
    color: #86868b;
    font-size: 16px;
    font-style: italic;
}





/* Footer Layout adjustments */
.preview-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 1rem;
    min-height: 4.75rem;
    padding: 0.75rem 1.25rem;
    position: relative;
    z-index: 11;
    overflow: visible;
}

.preview-modal__footer-left,
.preview-modal__footer-right {
    display: flex;
    align-items: center;
    gap: 24px;
    overflow: visible;
}

/* Download Group */
.preview-modal__download-group {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #eff1f5;
    padding: 6px 6px 6px 20px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.02);
    flex-wrap: wrap;
    overflow: visible;
}

.preview-modal__download-label {
    font-size: 15px;
    color: #1d1d1f;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.preview-modal__download-group .separator {
    display: none;
}

.preview-modal__download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #007AFF;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 200ms ease;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.preview-modal__download-btn:hover {
    background: #006ce6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.35);
}

/* État « génération en cours » : seul l'icône devient un spinner, le bouton garde
   sa taille (l'icône fa-circle-notch a le même gabarit que fa-download). */
.preview-modal__download-btn.is-loading {
    cursor: progress;
}

.preview-modal__download-btn.is-loading:hover {
    transform: none;
}

/* Secondary download buttons (inverted colors) */
/* Cible les boutons dans les wrappers qui suivent le premier wrapper */
.preview-modal__download-wrapper ~ .preview-modal__download-wrapper .preview-modal__download-btn {
    background: #ffffff;
    color: #007AFF;
    border: 1.5px solid #007AFF;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);
}

.preview-modal__download-wrapper ~ .preview-modal__download-wrapper .preview-modal__download-btn:hover {
    background: #f0f7ff;
    color: #006ce6;
    border-color: #006ce6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
}

/* Download button wrapper (bouton + aide) */
.preview-modal__download-wrapper {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
    overflow: visible;
}

/* Bouton d'aide contextuel */
.preview-modal__help-btn {
    background: transparent;
    border: none;
    color: #007AFF;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 1rem;
    opacity: 0.65;
    transition: opacity 0.2s, transform 0.15s;
    border-radius: 6px;
    position: relative;
    /* Pour positionner le popover */
}

.preview-modal__help-btn:hover {
    opacity: 1;
    background: rgba(0, 122, 255, 0.08);
}

/* Quand le popover est ouvert, garder l'opacité à 1 même sans hover */
.preview-modal__help-btn:has(.help-popover) {
    opacity: 1;
}

.preview-modal__help-btn:focus {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

/* Help Popover - curseur normal (hérité du bouton sinon) */
.help-popover,
.help-popover * {
    cursor: default;
}

.help-popover a {
    cursor: pointer;
}

.help-popover__close {
    cursor: pointer;
}

/* === Aide « Quelles images utiliser ? » — pastilles de formats (Image interactive) === */
.img-help-body .img-help-formats {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}
.img-help-formats__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.img-help-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #3a3a3c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Formats convertis automatiquement (HEIC/HEIF/TIFF) — accent bleu + icône ↻ */
.img-help-pill--converted {
    background: rgba(37, 99, 235, 0.07);
    border-color: rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
}
.img-help-pill--converted i {
    font-size: 10px;
    opacity: 0.85;
}
.img-help-formats__note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #8e8e93;
}

/* Help Popover - backdrop flou */
.help-popover__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--z-popover);
}

/* Help Popover - centré en fixed */
.help-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 16px;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.16),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: calc(var(--z-popover) + 1);
    width: 85vw;
    max-width: 1100px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: none;
    text-align: left;
}

/* Groupe de boutons header */
.help-popover__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Bouton zoom */
.help-popover__zoom {
    background: rgba(0, 0, 0, 0.04);
    border: none;
    color: #8e8e93;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}

.help-popover__zoom:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
}

/* Responsive mobile */
@media (max-width: 767px) {
    .help-popover {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: 80vh;
    }
}

/* Header avec bande colorée */
.help-popover__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f5;
    background: linear-gradient(135deg, #f0f5ff 0%, #f8f9ff 100%);
    flex-shrink: 0;
}

.help-popover__title {
    font-weight: 700;
    font-size: 17px;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.help-popover__close {
    background: rgba(0, 0, 0, 0.04);
    border: none;
    color: #8e8e93;
    cursor: pointer;
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.help-popover__close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
}

/* Corps du popover */
.help-popover__content {
    padding: 22px 28px 28px;
    overflow-y: auto;
    flex: 1;
    font-size: 15.5px;
    line-height: 1.75;
    color: #3a3a3c;
}

/* Paragraphes d'intro */
.help-popover__content > p {
    margin: 0 0 12px;
    color: #555;
}

/* Listes numérotées stylisées */
.help-popover__content ol {
    list-style: none;
    counter-reset: popover-step;
    padding-left: 0;
    margin: 4px 0 0;
}

.help-popover__content ol > li {
    counter-increment: popover-step;
    position: relative;
    padding-left: 32px;
    margin-bottom: 14px;
}

.help-popover__content ol > li::before {
    content: counter(popover-step);
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    background: #007AFF;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Listes à puces (sous-listes) */
.help-popover__content ul {
    padding-left: 18px;
    margin: 6px 0;
}

.help-popover__content ul > li {
    margin-bottom: 4px;
    padding-left: 0;
}

.help-popover__content ul > li::before {
    content: none;
}

.help-popover__content li > p {
    margin: 0 0 6px;
}

/* Mots importants */
.help-popover__content strong {
    color: #007AFF;
    font-weight: 600;
}

/* Liens */
.help-popover__content a {
    color: #007AFF;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 122, 255, 0.25);
    transition: border-color 0.15s;
}

.help-popover__content a:hover {
    border-bottom-color: #007AFF;
}

/* Figures / captures d'écran */
.help-popover__content figure {
    margin: 10px 0;
    padding: 0;
}

.help-popover__content figure img {
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    max-width: 100%;
    height: auto;
}

.help-popover__content figcaption {
    text-align: center;
    font-size: 12px;
    color: #8e8e93;
    margin-top: 6px;
    font-style: italic;
}

/* Scrollbar fine */
.help-popover__content::-webkit-scrollbar {
    width: 5px;
}

.help-popover__content::-webkit-scrollbar-track {
    background: transparent;
}

.help-popover__content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

.help-popover__content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.22);
}


/* Platform badges (header) */
.preview-modal__platforms-list {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    margin-left: 4px;
}

.platform-badge {
    background: transparent;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1.5px solid;
    line-height: 1.4;
}

.platform-badge--elea {
    border-color: #B9459B;
    color: #B9459B;
}

.platform-badge--magistere {
    border-color: #064CA4;
    color: #064CA4;
}

.platform-badge--moodle {
    border-color: #F98012;
    color: #F98012;
}

/* Navigation moved to header, styles kept for buttons */

.preview-modal__nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    color: #007AFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 150ms ease, opacity 150ms ease;
}

.preview-modal__nav-btn:hover:not(:disabled) {
    background: #f5f5f5;
}

.preview-modal__nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.preview-modal__nav-btn:focus {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

.preview-modal__nav-indicator {
    font-size: 14px;
    color: #86868b;
    min-width: 50px;
    text-align: center;
}

/* Animations */
@keyframes modalOpen {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalClose {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

.preview-modal-overlay.opening .preview-modal {
    animation: modalOpen 300ms ease;
}

.preview-modal-overlay.closing {
    opacity: 0;
}

.preview-modal-overlay.closing .preview-modal {
    animation: modalClose 300ms ease forwards;
}

/* Écrans moyens (600px - 767px) - Ajustement progressif */
@media (max-width: 767px) and (min-width: 600px) {
    .preview-modal__download-group {
        padding: 8px 12px;
    }

    .preview-modal__download-btn {
        font-size: 13px;
        padding: 8px 16px;
    }
}

/* Mobile styles (<768px) - Maintien du design tuile blanche sur fond gris */
@media (max-width: 767px) {
    .preview-modal-overlay {
        padding: 0;
    }

    .preview-modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        /* Pas de border-radius en plein écran */
        padding: 0.75rem;
        /* Padding réduit sur mobile */
        gap: 0.75rem;
        /* Gap réduit sur mobile */
    }

    .preview-modal__header {
        position: sticky;
        top: 0;
        z-index: 3000;
        border-radius: 0.75rem;
        padding: 0.6rem 0.75rem;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    /* Titre sur sa propre ligne, centré */
    .preview-modal__header-title-wrapper {
        position: static;
        transform: none;
        left: auto;
        max-width: 100%;
        flex: 1 1 100%;
        order: 1;
        justify-content: center;
    }

    .preview-modal__header-nav {
        flex: 0 0 auto;
    }

    .preview-modal__close {
        flex: 0 0 auto;
    }

    .preview-modal__title {
        font-size: 16px;
    }

    .preview-modal__icon {
        width: 24px;
        height: 24px;
    }

    .preview-modal__content {
        padding: 1rem;
        /* Padding réduit sur mobile */
        border-radius: 0.75rem;
        /* Border-radius légèrement réduit sur mobile */
    }

    .preview-modal__footer {
        position: sticky;
        bottom: 0;
        z-index: 11;
        border-radius: 0.75rem;
        /* Border-radius légèrement réduit sur mobile */
        flex-direction: column;
        gap: 0.75rem;
        /* Gap réduit sur mobile */
        padding: 0.75rem 1rem;
        /* Padding réduit sur mobile */
    }

    .preview-modal__download {
        width: 100%;
        justify-content: center;
    }

    .preview-modal__nav {
        width: 100%;
        justify-content: center;
    }

    .preview-modal__preview {
        min-height: 300px;
        /* Hauteur minimale réduite sur mobile */
    }

    .preview-modal__download-group {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        width: 100%;
    }

    .preview-modal__download-label {
        text-align: center;
    }

    .preview-modal__download-btn {
        width: 100%;
        justify-content: center;
    }

    .preview-modal__footer-left,
    .preview-modal__footer-right {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .preview-modal__edit-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Très petits écrans (<400px) - Optimisations supplémentaires */
@media (max-width: 399px) {
    .preview-modal {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .preview-modal__header {
        padding: 0.5rem 0.6rem;
        gap: 0.3rem;
    }

    .preview-modal__nav-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .preview-modal__nav-indicator {
        font-size: 12px;
        min-width: 35px;
    }

    .preview-modal__title {
        font-size: 14px;
    }

    .preview-modal__icon {
        width: 20px;
        height: 20px;
    }

    .preview-modal__header-title-wrapper {
        gap: 6px;
    }

    /* Masquer les badges sur très petit écran */
    .preview-modal__platforms-list {
        display: none;
    }

    .preview-modal__close {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .preview-modal__download-group {
        padding: 10px;
        gap: 10px;
    }

    .preview-modal__download-label {
        font-size: 14px;
    }

    .preview-modal__download-btn {
        font-size: 12px;
        padding: 10px 16px;
    }

    .preview-modal__footer {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
}

/* Tablette styles (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .preview-modal {
        width: 95vw;
        /* Légèrement plus large sur tablette */
        height: 90vh;
        /* Légèrement plus bas sur tablette */
    }

    .preview-modal__content {
        padding: 1rem;
        /* Padding légèrement réduit sur tablette */
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .preview-modal-overlay,
    .preview-modal {
        transition: opacity 150ms ease;
        animation: none;
    }

    .preview-modal-overlay.opening .preview-modal,
    .preview-modal-overlay.closing .preview-modal {
        animation: none;
    }
}

/* =======================================================================
   16. H5P PREVIEW STYLES
   ======================================================================= */
.preview-modal__loader,
.preview-modal__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #86868b;
    font-size: 16px;
    text-align: center;
}

.preview-modal__loader i {
    font-size: 32px;
    color: #007AFF;
}

.preview-modal__error i {
    font-size: 32px;
    color: #FF3B30;
}

/* Conteneur H5P - force la pleine largeur */
.preview-modal__h5p-container {
    width: 100% !important;
    /* Force la largeur à 100% */
    max-width: 100% !important;
    /* Empêche tout max-width */
    height: auto;
    min-height: 400px;
    margin: 0 auto;
}

/* Vidéo interactive — réserve 16/9 PENDANT le chargement (classe posée puis RETIRÉE par
   h5p-manager._releaseIVReserveWhenSized dès que le resizer h5p pose la vraie hauteur).
   But : la vidéo apparaît directement au bon format au lieu d'être « trop courte » puis de
   s'étirer. Surtout NE PAS laisser cette réserve active après coup (rognerait le lecteur :
   cf. tentative revertée 2026-06-13). min-height = simple plancher de repli pour les rares
   navigateurs sans aspect-ratio (toujours ≤ la hauteur 16/9 d'une modale large). */
.preview-modal__h5p-container.h5p-preview--iv-loading {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 320px;
}
.preview-modal__h5p-container.h5p-preview--iv-loading .h5p-iframe-wrapper,
.preview-modal__h5p-container.h5p-preview--iv-loading .h5p-iframe {
    height: 100% !important;
    min-height: 0 !important;
}

/* Modificateur pour le conteneur parent lorsqu'il contient du H5P */
.preview-modal__preview--h5p {
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    overflow: auto;
    /* Permet le scroll si le contenu dépasse, nécessaire pour H5P */
    min-height: 400px;
    /* Hauteur minimale pour les activités */
    position: relative;
    /* Nécessaire pour le positionnement correct des éléments H5P */
}

/* Modificateur pour le conteneur parent lorsqu'il contient un simulateur Éléa */
.preview-modal__preview--simulator {
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    overflow: auto;
    /* Permet le scroll si le contenu dépasse */
    min-height: 400px;
    /* Hauteur minimale pour les activités */
    position: relative;
    /* Nécessaire pour le positionnement correct */
    align-items: flex-start !important;
    /* Alignement en haut pour les simulateurs */
    justify-content: flex-start !important;
}

/* Assurer que l'iframe H5P peut grandir et occupe toute la largeur */
.preview-modal__preview--h5p .h5p-iframe-wrapper {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.h5p-iframe-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    /* Force la pleine largeur */
    height: 100%;
    border: none;
    background-color: transparent;
}

/* Fix CSS pour le mode plein écran H5P */
.h5p-container.h5p-fullscreen {
    height: 100% !important;
    z-index: var(--z-fullscreen) !important;
    overflow-y: auto !important;
    /* Permet le scroll vertical si le contenu est trop grand */
}

.h5p-container.h5p-fullscreen .h5p-iframe-wrapper,
.preview-modal__preview--h5p .h5p-container.h5p-fullscreen .h5p-iframe-wrapper {
    height: 100% !important;
    /* Force la hauteur en plein écran */
    width: 100% !important;
}

.h5p-iframe {
    width: 100% !important;
    max-width: 100% !important;
    /* Force la pleine largeur */
    height: 100%;
    border: none;
    display: block;
}

/* Force tous les contenus H5P à prendre la pleine largeur disponible */
.preview-modal__content .h5p-container,
.preview-modal__content .h5p-content,
.preview-modal__content .h5peditor-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* =======================================================================
   SIMULATEURS ÉLÉA DANS LA MODALE DE PRÉVISUALISATION
   ======================================================================= */

/* Homogénéisation des simulateurs dans la modale avec le style H5P */
.preview-modal__preview--simulator .millionnaire-simulator,
.preview-modal__preview--simulator .matching-simulator,
.preview-modal__preview--simulator .glossary-simulator,
.preview-modal__preview--simulator .qcm-simulator,
.preview-modal__preview--simulator .elea-test-simulator,
.preview-modal__preview--simulator .devoir-simulator {
    background: transparent !important;
    /* Fond transparent pour s'intégrer dans la tuile blanche de la modale */
    padding: 0 !important;
    /* Pas de padding supplémentaire, la modale gère déjà le padding */
    border-radius: 0 !important;
    /* Pas de border-radius, la modale gère déjà les coins arrondis */
    max-width: 100% !important;
    /* Pleine largeur disponible dans la modale */
    width: 100% !important;
}

/* Les wrappers internes des simulateurs conservent leur padding pour l'espacement du contenu */
.preview-modal__preview--simulator .millionnaire-wrapper,
.preview-modal__preview--simulator .matching-wrapper,
.preview-modal__preview--simulator .glossary-wrapper,
.preview-modal__preview--simulator .qcm-wrapper {
    padding: 20px;
    /* Padding interne pour l'espacement du contenu */
}

/* Ajustement spécifique pour le simulateur Test Éléa */
.preview-modal__preview--simulator .elea-test-simulator {
    padding: 0 !important;
    margin: 0 !important;
}

/* Les éléments enfants du test éléa (header, card) gardent leur styling mais s'adaptent */
.preview-modal__preview--simulator .elea-test-header,
.preview-modal__preview--simulator .elea-test-card {
    margin: 10px 15px;
    /* Marges latérales pour éviter que le contenu touche les bords */
}

/* ==========================================================================
   MILLIONNAIRE SIMULATOR
   ========================================================================== */

.millionnaire-simulator {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    background: #fff;
    border-radius: 4px;
    /* Moodle style usually square-ish */
    padding: 20px;
}

.millionnaire-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Header */
.millionnaire-header {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.millionnaire-nav-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.millionnaire-nav-tabs span.active {
    font-weight: bold;
    color: #4a148c;
    /* Purple deep */
    border-bottom: 2px solid #4a148c;
    padding-bottom: 4px;
}

.millionnaire-intro {
    font-size: 1rem;
    color: #333;
    margin: 0;
}

/* Game Area */
.millionnaire-game-area {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .millionnaire-game-area {
        flex-direction: column;
    }
}

/* Question Column (Left) */
.millionnaire-question-col {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}



.millionnaire-question-box {
    text-align: left;
    font-size: 1.25rem;
    /* ~20px */
    font-weight: bold;
    color: #4a148c;
    /* Purple title color from screenshot */
    margin-bottom: 10px;
    font-style: italic;
}

.question-label {
    /* "Question 1 :" part */
    color: #4a148c;
    margin-right: 5px;
}

/* Answers Grid */
.millionnaire-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.millionnaire-answer-btn {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    color: #333;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.millionnaire-answer-btn:hover:not(:disabled) {
    background-color: #f8f9fa;
    border-color: #aaa;
}

/* Feedback States */
.millionnaire-answer-btn.correct {
    background-color: #d1e7dd;
    /* Light green */
    border-color: #badbcc;
    color: #0f5132;
    /* Dark green text */
    position: relative;
}

.millionnaire-answer-btn.wrong {
    background-color: #f8d7da;
    /* Light red */
    border-color: #f5c6cb;
    color: #842029;
    /* Dark red text */
    position: relative;
}

/* Action Bar */
.millionnaire-action-bar {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.millionnaire-next-btn,
.millionnaire-restart-btn {
    background-color: #1a1a5e;
    /* Dark button */
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.millionnaire-restart-btn:hover,
.millionnaire-next-btn:hover {
    background-color: #2a2a7a;
}

/* Pyramid Column (Right) */
.millionnaire-pyramid-col {
    flex: 1;
    min-width: 180px;
}

.millionnaire-pyramid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.millionnaire-level {
    background-color: #fff3cd;
    /* Pale yellow */
    color: #333;
    padding: 10px 15px;
    border-radius: 20px;
    /* Rounded pill shape */
    text-align: right;
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.millionnaire-level.current {
    background-color: #ffc107;
    /* Vivid yellow/gold */
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* End Screen */
.millionnaire-end-screen {
    text-align: center;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.millionnaire-end-content h2 {
    font-size: 2rem;
    color: #333;
    margin: 0;
}

.millionnaire-final-score {
    background-color: #ffc107;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

/* Warning */
.simulator-warning {
    margin-top: 30px;
    padding: 10px;
    background: #e7f1ff;
    border-left: 4px solid #0d6efd;
    color: #084298;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
}

/* ==========================================================================
   MATCHING SIMULATOR
   ========================================================================== */

.matching-simulator {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    padding: 15px;
    /* Reduced padding */
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
}

.matching-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Reduced gap */
}

.matching-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    text-align: left;
}

.matching-nav-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.matching-nav-tabs span.active {
    font-weight: bold;
    color: #4a148c;
    /* Theme purple */
    border-bottom: 2px solid #4a148c;
    padding-bottom: 4px;
    font-size: 0.95rem;
}

.matching-intro {
    font-size: 0.92rem;
    color: #666;
    line-height: 1.4;
    max-width: 100%;
    margin: 0;
}

/* Game Area */
.matching-game-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 200px;
    /* Reduced min-height */
}

/* 1. Matched List (Top) */
.matching-matched-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.matching-fused-row {
    display: flex;
    align-items: center;
    background: #e9ecef;
    /* Slightly lighter gray */
    border-radius: 40px;
    /* More distinct rounded pill shape */
    padding: 8px 18px;
    /* Compact padding */
    gap: 12px;
    min-height: 48px;
    /* Reduced fixed height */
    width: 100%;
    color: #5e358e;
    font-weight: 600;
    font-size: 1rem;
    justify-content: space-between;
    transition: all 0.2s ease;
    animation: fadeInSlideUp 0.3s ease-out;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
}

/* Internal Fused Layout */
.fused-left {
    flex: 1;
    text-align: center;
    padding-right: 15px;
    border-right: 2px solid rgba(0, 0, 0, 0.05);
    /* Thicker but lighter separator */
    display: flex;
    align-items: center;
    justify-content: center;
}

.fused-right {
    flex: 1;
    text-align: center;
    padding-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fused-actions {
    margin-left: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 0;
}

.unlink-btn {
    background: #fff;
    /* White background for button */
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.unlink-btn:hover {
    background-color: #f8d7da;
    /* Red tint on hover for destructive action */
    color: #dc3545;
    border-color: #dc3545;
}

/* Validation Feedback for Fused Rows */
.matching-fused-row.correct {
    background-color: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
}

.matching-fused-row.wrong {
    background-color: #f8d7da;
    color: #842029;
    border-color: #f5c6cb;
}

/* 2. Unmatched Pools (Bottom) */
.matching-pools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 20px;
    /* Reduced gap */
    align-items: start;
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    /* Visual separator */
}

@media (max-width: 800px) {
    .matching-pools {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        gap: 20px;
    }
}

.matching-pool {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.matching-pool-item {
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 10px;
    min-height: 60px;
    /* Enforce uniform height - reduced */
    height: 100%;
    /* Fill grid cell */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    font-size: 0.95rem;
    color: #495057;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    user-select: none;
}

.matching-pool-item:hover {
    background-color: #f8f9fa;
    border-color: #aeb5bd;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.matching-pool-item.selected {
    border-color: #6f42c1;
    /* Purple */
    background-color: #f3e5f5;
    /* Light purple */
    color: #4a148c;
    box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.25);
    font-weight: 500;
}

.matching-pool-item.disabled {
    cursor: default;
    opacity: 0.5;
    background-color: #e9ecef;
    box-shadow: none;
    transform: none;
}

.matching-all-paired-msg {
    text-align: center;
    color: #adb5bd;
    font-style: italic;
    font-size: 0.9rem;
    margin: 20px 0;
}

/* Action Bar */
.matching-action-bar {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-top: 10px;
}

.matching-check-btn,
.matching-restart-btn {
    background-color: #0d6efd;
    /* Bootstrap blue */
    color: #fff;
    border: none;
    border-radius: 50px;
    /* Pill button */
    padding: 10px 40px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
    transition: all 0.2s;
}

.matching-check-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

.matching-check-btn:hover:not(:disabled),
.matching-restart-btn:hover {
    background-color: #0b5ed7;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(13, 110, 253, 0.25);
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ==========================================================================
   GLOSSARY SIMULATOR
   ========================================================================== */

.glossary-simulator {
    width: 100%;
    max-width: 1200px;
    /* Standardisé */
    margin: 0 auto;
    background: #fff;
    padding: 15px;
    /* Compact padding */
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
}

.glossary-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.glossary-header {
    margin-bottom: 10px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

.glossary-header h2 {
    font-size: 1.3rem;
    /* Smaller title */
    color: #333;
    margin: 0;
}

/* Compact Entries Layout */
.glossary-entries-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* Masonry-like grid */
    gap: 15px;
}

.glossary-entry-compact {
    background: #fdfdfd;
    border: 1px solid #e9ecef;
    border-left: 3px solid #0f6cbf;
    /* Moodle Blue accent */
    border-radius: 4px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.glossary-entry-compact:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.glossary-term {
    font-size: 1rem;
    font-weight: 700;
    color: #0f6cbf;
    margin-bottom: 2px;
}

.glossary-def {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555;
    background: #fff;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #f1f1f1;
}

.glossary-def strong {
    font-weight: 700;
    color: #333;
}

.glossary-def em {
    font-style: italic;
    color: #444;
}

.glossary-no-results {
    grid-column: 1 / -1;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 20px;
}

/* =======================================================================
   16. SIMULATEUR: QCM ÉLÉA (Moodle)
   ======================================================================= */

.qcm-simulator {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    background: #fff;
    max-width: 1200px;
    /* Ajouté pour être cohérent avec matching-simulator */
    margin: 0 auto;
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.qcm-wrapper {
    /* Retiré max-width ici car il est géré par qcm-simulator */
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.qcm-header {
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
}

.qcm-nav-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 8px;
}

.qcm-nav-tabs span.active {
    font-weight: bold;
    color: #5b2e90;
    /* Theme purple */
    border-bottom: 2px solid #5b2e90;
    padding-bottom: 4px;
    font-size: 0.95rem;
}

.qcm-top-nav {
    display: flex;
    gap: 30px;
    font-size: 0.95em;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.qcm-nav-item {
    cursor: pointer;
    position: relative;
    padding-bottom: 15px;
}

.qcm-nav-item.active {
    color: #5b2e90;
    border-bottom: 3px solid #5b2e90;
    margin-bottom: -17px;
    /* Alignement avec la bordure du header */
    background: #fff;
    /* Cache la bordure dessous */
    z-index: 1;
}

.qcm-header-text {
    margin-bottom: 20px;
    font-size: 1.1em;
    color: #666;
    /* Slightly lighter for instruction */
}

/* Titre principal supprimé au profit de qcm-nav-tabs mais on garde la classe au cas où */
.qcm-activity-title {
    display: none;
}

.qcm-question-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Label Question : "Question 1 :" en violet + italique + gras */
/* Label Question : "Question 1 :" en violet + italique + gras */
.qcm-question-label {
    font-size: 1.1em;
    color: #000;
    margin-bottom: 4px;
    font-weight: 400;
    font-style: normal;
}

.qcm-q-num {
    color: #57068c;
    /* Violet foncé */
    margin-right: 5px;
    font-weight: 700;
    font-style: italic;
}

/* Liste des réponses */
.qcm-answers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qcm-answer-card {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.1s ease;
    min-height: 40px;
}

/* État Hover - Exclure .selected pour éviter le conflit visuel */
.qcm-answer-card:not(.disabled):not(.correct):not(.wrong):not(.selected):hover {
    border-color: #aaa;
    background: #fcfcfc;
}

/* État Active (Clic) pour feedback immédiat */
.qcm-answer-card:not(.disabled):not(.correct):not(.wrong):active {
    background: #e9e9ed;
    border-color: #aaa;
    transform: scale(0.995);
    /* Léger effet de pression */
}

/* État Selected (avant validation) - Bordure violette + fond grisé léger */
.qcm-answer-card.selected {
    background: #e9e9ed;
    /* Gris souris select */
    border: 1px solid #aaa;
}

/* État Validé Correct */
.qcm-answer-card.correct {
    background: #a3eeb1;
    /* Vert très clair */
    border-color: #8bdc9a;
    cursor: default;
}

/* État Validé Faux */
.qcm-answer-card.wrong {
    background: #eea3a3;
    /* Rouge très clair */
    border-color: #dc8b8b;
    cursor: default;
}

/* État Validé Désactivé (les autres rep) */
.qcm-answer-card.disabled {
    cursor: default;
    opacity: 1;
    /* On laisse opaque pour lire */
}

.qcm-ans-icon {
    font-size: 1.5em;
}

.qcm-answer-card.correct .qcm-ans-icon {
    color: #000;
}

.qcm-answer-card.wrong .qcm-ans-icon {
    color: #000;
}

/* Feedback Text */
.qcm-feedback-text {
    font-size: 1.05em;
    margin-top: 8px;
}

/* Boutons */
.qcm-action-bar {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 6px;
}

.qcm-btn {
    background-color: #1a0dab;
    background: #1d0e4a;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.3s;
}

.qcm-btn:hover {
    background-color: #311b70;
}

.qcm-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Écran de fin */
.qcm-end-screen {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
}

.qcm-result-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    gap: 15px;
    text-align: center;
}

.qcm-score-line {
    font-size: 1.3em;
    font-weight: 600;
    color: #000;
}

.qcm-score-info {
    font-size: 1.1em;
    color: #000;
    margin-bottom: 20px;
}

/* =======================================================================
   9. PAGE SIMULATOR
   ======================================================================= */
.elea-page-simulator {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    background: #fff;
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.elea-page-main-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.elea-page-main-header h1 {
    font-size: 2.5em;
    color: #2c3e50;
    margin-bottom: 10px;
}

.elea-page-intro {
    font-size: 1.2em;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
}

.elea-page-block {
    margin-bottom: 30px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */
}

/* Specific Block Styles */
.elea-hero-header {
    background: #2c3e50;
    color: white;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
}

.elea-hero-header h2 {
    margin: 0;
    font-size: 2em;
    color: white !important;
}

.elea-hero-subtitle {
    margin-top: 10px;
    font-size: 1.2em;
    opacity: 0.9;
}

.elea-callouts .elea-callout {
    padding: 15px;
    border-left: 5px solid #3498db;
    background: #f0f8ff;
    margin-bottom: 10px;
}

.elea-callout.type-alerte {
    border-color: #e74c3c;
    background: #fdedec;
}

.elea-callout.type-objectif {
    border-color: #27ae60;
    background: #eafaf1;
}

.elea-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.elea-table th,
.elea-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.elea-table th {
    background: #f9f9f9;
    font-weight: bold;
}

.elea-definition-box {
    border: 2px solid #27ae60;
    padding: 20px;
    border-radius: 8px;
    background: #f9fffb;
}

.elea-definition-box h4 {
    margin-top: 0;
    color: #27ae60;
}

.elea-summary {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
}

.elea-summary ul {
    list-style: none;
    padding: 0;
}

.elea-summary li {
    margin-bottom: 5px;
}

.elea-summary a {
    text-decoration: none;
    color: #2980b9;
}

.elea-summary a:hover {
    text-decoration: underline;
}

.elea-generic-block-content {
    background: #fafafa;
    border: 1px dashed #ccc;
    padding: 10px;
    font-size: 0.9em;
}

.elea-block-type-label {
    font-size: 0.8em;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: bold;
}

/* =======================================================================
   15. PREVIEW MODAL NAVIGATION HISTORY
   ======================================================================= */

/* Navigation Indicator Wrapper */
.preview-modal__nav-wrapper {
    position: relative;
    display: inline-block;
}

.preview-modal__nav-indicator {
    cursor: pointer;
    /* Add padding for easier clicking */
    padding: 6px 10px;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
    user-select: none;
    display: flex;
    /* Pour centrer le texte si besoin, ou alignement */
    align-items: center;
    gap: 5px;
}

/* Ajout d'une petite icône chevron pour indiquer que c'est cliquable */
.preview-modal__nav-indicator::after {
    content: '\f078';
    /* fa-chevron-down */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.8em;
    opacity: 0.5;
    margin-left: 4px;
}

.preview-modal__nav-indicator:hover {
    background-color: #f5f5f7;
    color: #1d1d1f;
}

/* History Dropdown */
.preview-modal__nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 16px;
    /* Modifier cette valeur pour décaler le menu vers le bas ou le haut */
    margin-left: 42px;
    /* Modifier cette valeur pour décaler le menu vers la droite ou la gauche */
    width: 280px;
    max-height: 300px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 4000;
    /* Above modal content */
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 6px;
    /* Custom Scrollbar for dropdown */
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.preview-modal__nav-dropdown::-webkit-scrollbar {
    width: 6px;
}

.preview-modal__nav-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.preview-modal__nav-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}


.preview-modal__nav-wrapper.open .preview-modal__nav-dropdown {
    display: block;
    animation: fadeInDropdown 0.2s ease-out;
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Dropdown Items */
.preview-modal__history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.1s;
    text-align: left;
    margin-bottom: 2px;
}

.preview-modal__history-item:hover {
    background-color: #f5f5f7;
}

.preview-modal__history-item.active {
    background-color: #e3f2fd;
    /* Light blue */
}

.preview-modal__history-item.active .preview-modal__history-title {
    color: #007AFF;
    font-weight: 600;
}

.preview-modal__history-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.preview-modal__history-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    gap: 2px;
}

.preview-modal__history-title {
    font-size: 13px;
    color: #1d1d1f;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-modal__history-time {
    font-size: 11px;
    color: #8e8e93;
}

/* =======================================================================
   SIMULATEUR DEVOIR (Grille d'évaluation critériée)
   ======================================================================= */

.devoir-simulator {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    background: #fff;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.devoir-header {
    margin-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}

.devoir-nav-tabs {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 8px;
}

.devoir-nav-tabs span.active {
    font-weight: bold;
    color: #1a3a6b;
    border-bottom: 2px solid #1a3a6b;
    padding-bottom: 4px;
    font-size: 1.1rem;
    flex: 1;
}

.devoir-description {
    color: #666;
    font-style: italic;
    font-size: 0.9rem;
    margin: 4px 0 0 0;
    line-height: 1.4;
}

.devoir-table-wrapper {
    overflow-x: auto;
    flex: 1;
}

.devoir-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    line-height: 1.45;
}

.devoir-table td {
    border: 1px solid #d9d9d9;
    padding: 10px 12px;
    vertical-align: top;
}

.devoir-td-criterion {
    font-weight: 700;
    color: #1a3a6b;
    background: #f5f7fa;
    width: 18%;
    min-width: 130px;
    font-size: 0.9rem;
}

.devoir-td-level {
    background: #fff;
}

.devoir-td-empty {
    background: #fafafa;
}

.devoir-level-definition {
    margin-bottom: 6px;
    color: #333;
}

.devoir-level-score {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5b7a9d;
    margin-top: 4px;
}

.devoir-total {
    margin-top: 14px;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.92rem;
    color: #1a3a6b;
    background: #f0f4f8;
    border-radius: 6px;
    text-align: right;
}

/* Responsive : scroll horizontal sur petits écrans */
@media (max-width: 640px) {
    .devoir-table {
        font-size: 0.82rem;
    }

    .devoir-td-criterion {
        min-width: 100px;
    }
}

/* ============================================================
   Vidéo interactive — champ URL + badge d'état + aide
   (injecté dans .modal-tuto-content quand requiresVideoUrl)
   ============================================================ */
.video-url-section {
    margin-top: 0.65rem;
    position: relative; /* ancre la sous-ligne .video-url-msg, sortie du flux (cf. plus bas) */
}

.video-url-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

/* Le champ est un conteneur stylé comme un input : il PORTE l'état (couleur bord/fond via
   data-state sur .video-url-section). C'est lui qui « valide » visuellement — plus de boîte
   d'état séparée qui agrandit le cadre. */
.video-url-field {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.7rem;
    min-height: 44px;
    border: 1.5px solid #c4cdd9;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.video-url-field:focus-within {
    border-color: #1768c4;
    box-shadow: 0 0 0 3px rgba(23, 104, 196, 0.15);
}

.video-url-field__icon {
    flex: 0 0 auto;
    color: #8a97a6;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.video-url-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.55rem 0;
    font-size: 0.92rem;
    color: #1d2733;
    outline: none;
}

.video-url-input::placeholder { color: #9aa7b5; }

/* Indicateur d'état à droite du champ (spinner / ✓ / ⚠) — contenu injecté par le JS. */
.video-url-field__status {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.video-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid #e0a800;
    border-top-color: transparent;
    border-radius: 50%;
    animation: video-spin 0.7s linear infinite;
}

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

/* --- Transcription en cours : jauge intégrée AU CHAMP du lien + voile flou par-dessus l'URL ---
   La barre se remplit DANS la div du lien ; un voile (backdrop-filter) masque l'URL et affiche
   « Transcription en cours… n/t » avec un bouton pour arrêter. Plus de barre séparée en dessous. */
.video-url-field__progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(224, 168, 0, 0.28), rgba(224, 168, 0, 0.5));
    transition: width 0.35s ease;
}
/* Indéterminée (1 seul appel : avancement inconnu) → bande qui glisse. */
.video-url-field__progress--indet {
    width: 36%;
    background: linear-gradient(90deg, rgba(224, 168, 0, 0), rgba(224, 168, 0, 0.5), rgba(224, 168, 0, 0));
    animation: video-field-progress-indet 1.2s ease-in-out infinite;
}
@keyframes video-field-progress-indet {
    0%   { left: -36%; }
    100% { left: 100%; }
}
/* Le contenu réel du champ (icône, saisie, statut, « Voir ») passe AU-DESSUS de la jauge. */
.video-url-field > .video-url-field__icon,
.video-url-field > .video-url-input,
.video-url-field > .video-url-field__status,
.video-url-field > .video-url-field__go,
.video-url-field > .video-url-field__action { position: relative; z-index: 1; }

/* Voile flou par-dessus le lien : masque l'URL et porte le libellé + le bouton stop. */
.video-url-field__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center; /* libellé centré dans la div */
    padding: 0 2.6rem; /* marge symétrique : laisse la place au bouton stop sans décentrer le texte */
    border-radius: 9px;
    /* Voile ambre QUASI OPAQUE pendant la récupération de transcription (Tube/YouTube/PodEduc) :
       il doit masquer franchement l'URL en dessous (cf. retour auteur « quasi pas transparent »). */
    background: rgba(255, 216, 112, 0.97);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}
.video-url-field__overlay[hidden] { display: none; }
.video-url-field__overlay-label {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1d2733; /* noir lisible par-dessus le flou */
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.video-url-field__overlay-label > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.video-url-field__stop {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: rgba(217, 83, 79, 0.16);
    color: #c0392b;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s;
}
.video-url-field__stop:hover { background: rgba(217, 83, 79, 0.3); }

/* === Image interactive : champ d'upload de l'image de fond (réutilise .video-url-field*). === */
.img-bg-pick {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    padding: 0;
}
.img-bg-pick__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.img-bg-thumb {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 5px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.img-bg-field--drag { outline: 2px dashed var(--primary-color, #e8821e); outline-offset: 2px; }
/* Bouton « retirer l'image » (✕) : nuance rouge pour le distinguer du « relancer la détection » (↻, bleu). */
.img-bg-clear { background: rgba(220, 53, 69, 0.12); color: #c0392b; }
.img-bg-clear:hover { background: rgba(220, 53, 69, 0.22); }

/* Jauge de progression de la transcription (dans la sous-ligne .video-url-msg). */
.video-progress-wrap { display: flex; flex-direction: column; gap: 0.32rem; }
.video-progress-label { font-size: 0.82rem; color: #8a6100; }
.video-progress {
    position: relative;
    display: block;
    height: 6px;
    border-radius: 4px;
    background: #f0e2bf;
    overflow: hidden;
}
.video-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    background: #e0a800;
    border-radius: 4px;
    transition: width 0.35s ease;
}
/* Indéterminée (1 seul appel : on ne connaît pas l'avancement) → barre qui glisse. */
.video-progress--indet .video-progress__fill {
    width: 40%;
    animation: video-progress-indet 1.1s ease-in-out infinite;
}
@keyframes video-progress-indet {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* Couleurs d'état du champ (le « passe au vert quand c'est bon »). */
.video-url-section[data-state="checking"] .video-url-field { border-color: #e0a800; background: #fff1cc; }
.video-url-section[data-state="checking"] .video-url-field__icon { color: #b07e00; }

.video-url-section[data-state="ready"] .video-url-field { border-color: #1e9e54; background: #edf9f1; }
.video-url-section[data-state="ready"] .video-url-field__icon { color: #1e9e54; }
.video-url-section[data-state="ready"] .video-url-field__status { color: #1e9e54; }

.video-url-section[data-state="error"] .video-url-field { border-color: #d9534f; background: #fdf3f2; }
.video-url-section[data-state="error"] .video-url-field__icon { color: #d9534f; }
.video-url-section[data-state="error"] .video-url-field__status { color: #d9534f; }

.video-url-section[data-state="manual"] .video-url-field { border-color: #e0a800; background: #fffaf0; }
.video-url-section[data-state="manual"] .video-url-field__icon { color: #b07e00; }
.video-url-section[data-state="manual"] .video-url-field__status { color: #e0a800; }

/* Bouton discret « Voir » DANS le champ (n'apparaît qu'une fois la transcription prête).
   Volontairement peu saillant : il ne doit pas concurrencer « Générer en un clic ». */
.video-url-field__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: none;
    background: rgba(30, 158, 84, 0.13);
    color: #137a40;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.28rem 0.6rem;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.video-url-field__action:hover { background: rgba(30, 158, 84, 0.22); }
.video-url-field__action[hidden] { display: none; }

/* Bouton « valider le lien » (flèche) DANS le champ : même gabarit que le bouton stop, à la même
   place, mais bleu (action). Rend visible le collage-auto/Entrée pour qui ne les devine pas.
   Volontairement discret : il ne doit pas concurrencer « Générer en un clic ». */
.video-url-field__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: rgba(45, 110, 200, 0.14);
    color: #2563b0;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s;
}
.video-url-field__go:hover { background: rgba(45, 110, 200, 0.26); }
.video-url-field__go[hidden] { display: none; }

/* Bouton d'aide « ? » — même hauteur que le champ, aligné à droite. */
.video-help-btn {
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    border: 1.5px solid #c4cdd9;
    border-radius: 10px;
    background: #fff;
    color: #1768c4;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.video-help-btn:hover { background: #eef4fb; border-color: #1768c4; }

/* Sous-ligne discrète : masquée sur le chemin heureux (champ vert), visible en attente / erreur
   / collage. Une simple ligne de texte — pas une boîte qui déforme le cadre. */
/* Sortie du flux (absolue, juste sous le champ) : apparaître/disparaître ne décale RIEN, et sur le
   chemin heureux (lien valide) il n'y a aucune bande vide réservée — le message se loge dans la zone
   blanche déjà présente sous le champ (l'éditeur en dessous est replié tant qu'on n'a pas généré). */
.video-url-msg {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #55606c;
}
.video-url-msg[hidden] { display: none; }
.video-url-section[data-state="checking"] .video-url-msg { color: #8a6100; }
.video-url-section[data-state="error"] .video-url-msg { color: #a3302c; }
.video-url-section[data-state="manual"] .video-url-msg { color: #8a6100; }

.video-url-msg__action {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #1768c4;
    text-decoration: underline;
    cursor: pointer;
}
.video-url-msg__action:hover { color: #0d4f99; }

/* ============================================================
   Popover vidéo compact — aide « ? » + « Voir / coller » la transcription
   (réutilise le langage visuel du help-popover, en plus petit)
   ============================================================ */
.video-popover__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--z-popover);
}

.video-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 560px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.16),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: calc(var(--z-popover) + 1);
    overflow: hidden;
    text-align: left;
}

/* Variante large : double panneau « lecture timée | collage ». Plus haute aussi (max-height relevée)
   pour éviter le scroll sur petit écran — le contenu fixe (info + astuce + boutons) tient sans déborder. */
.video-popover--wide { width: min(96vw, 1040px); max-height: 94vh; }

.video-popover__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid #f0f0f5;
    background: linear-gradient(135deg, #f0f5ff 0%, #f8f9ff 100%);
    flex-shrink: 0;
}

.video-popover__title {
    font-weight: 700;
    font-size: 16px;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
}
.video-popover__title i { color: #1768c4; }

.video-popover__close {
    background: rgba(0, 0, 0, 0.04);
    border: none;
    color: #8e8e93;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.video-popover__close:hover { background: rgba(0, 0, 0, 0.08); color: #1d1d1f; }

.video-popover__body {
    padding: 16px 18px;
    overflow: auto;
}

/* Aide : intro + liste des plateformes avec puces d'état */
.video-help-body__intro { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.5; color: #3a4654; }
.video-help-body__platforms {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.video-help-body__platforms li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    background: #fafcfe;
}
.video-help-body__platforms .vplat-name { font-size: 0.85rem; color: #2b3642; }
.vplat-chip {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.vplat-chip--ok { background: #e7f6ec; color: #137a40; }
.vplat-chip--soon { background: #fff3e0; color: #8a5300; }
.vplat-chip--beta { background: #eef0f5; color: #55606c; }
.video-help-body__steps { margin: 0; font-size: 0.82rem; line-height: 1.5; color: #55606c; }

/* Transcription : lecture (read-only) timée + collage manuel.
   Double panneau « lecture | collage » côte à côte (variante --split), empilé sur petit écran. */
.video-transcript-body--split {
    display: flex;
    gap: 18px;
    align-items: stretch;
}
.video-transcript-body--split .video-transcript-panel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
@media (max-width: 720px) {
    .video-transcript-body--split { flex-direction: column; }
}

.video-transcript-body__info { margin: 0 0 0.5rem; font-size: 0.85rem; color: #137a40; font-weight: 600; }
/* Astuce pédagogique (encadré ambre discret) : un découpage temporel propre = des questions mieux placées. */
.video-transcript-body__pedago {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0 0 0.2rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6a5a13;
    background: #fff8e1;
    border: 1px solid #f4e3a8;
    border-radius: 8px;
}
.video-transcript-body__pedago .fa-lightbulb { color: #e0a106; margin-top: 0.12rem; flex: 0 0 auto; }
.video-transcript-body__text {
    max-height: 52vh;
    overflow: auto;
    padding: 0.7rem 0.8rem;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    background: #fafcfe;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #2b3642;
}
.video-transcript-body--split .video-transcript-panel--view .video-transcript-body__text { flex: 1 1 auto; }

/* Une ligne par passage : repère temporel `m:ss` + texte qui revient à la ligne. */
.vtx-line { display: flex; gap: 10px; margin: 0 0 6px; align-items: baseline; }
.vtx-line:last-child { margin-bottom: 0; }
.vtx-time {
    flex: 0 0 auto;
    min-width: 40px;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1768c4;
}
.vtx-text { flex: 1 1 auto; min-width: 0; }

.video-transcript-body__label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #2b3642;
}
.video-popover .video-paste-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.7rem;
    border: 1px solid #c4cdd9;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
}
.video-popover .video-paste-input:focus {
    outline: none;
    border-color: #1768c4;
    box-shadow: 0 0 0 3px rgba(23, 104, 196, 0.15);
}
.video-popover .video-paste-btn { margin-top: 0.6rem; }

/* Transcription : champ UNIQUE éditable (lecture + correction au même endroit), grand et responsive,
   bouton « Utiliser » compact aligné à droite. */
.video-popover .video-transcript-edit {
    min-height: 46vh;
    max-height: 62vh;
    font-size: 0.9rem;
    line-height: 1.55;
}
.video-transcript-body__info--paste { color: #2b3642; font-weight: 600; }
.video-transcript-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.7rem;
}
.video-popover .video-transcript-actions .video-paste-btn {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    border-radius: 8px;
}

/* ===== Transcription synchronisée : 2 panneaux (transcription éditable | lecteur) ===== */
.video-transcript-2pane {
    display: flex;
    gap: 16px;
    align-items: stretch;
    height: 66vh;
    margin-top: 0.7rem;
}
.vt-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.vt-right {
    flex: 0 0 42%;
    max-width: 42%;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
/* Transcription éditable : une ligne par passage, ligne courante surlignée, défilement interne. */
.vt-edit {
    position: relative;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 0.6rem;
    border: 1px solid #c4cdd9;
    border-radius: 8px;
    background: #fff;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #2b3642;
    white-space: pre-wrap;
    word-break: break-word;
}
.vt-edit:focus { outline: none; border-color: #1768c4; box-shadow: 0 0 0 3px rgba(23, 104, 196, 0.15); }
.vt-row { padding: 2px 6px 2px 10px; border-radius: 5px; scroll-margin: 40% 0; transition: background 0.12s; }
.vt-row.is-active {
    background: #d4e8ff;
    box-shadow: inset 4px 0 0 #1768c4;
    font-weight: 600;
    color: #0f4c8f;
}
/* Lecteur figé (16:9) à droite ; la transcription défile, lui non. */
.vt-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 0;
}
.vt-player video,
.vt-player iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Boutons « Ajouter une ligne » et « Recaler sur la vidéo » : sur une même rangée, largeurs égales.
   (« Recaler » est contextuel → masqué quand le suivi est actif, « Ajouter » prend alors toute la largeur.) */
.vt-actions {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.vt-add-line,
.vt-resume {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
}
/* Bouton « Recaler sur la vidéo » : contextuel (visible seulement quand le suivi est figé), mis en avant. */
.vt-resume {
    background: #eaf3ff;
    color: #1768c4;
    font-weight: 600;
}
.vt-resume:hover { background: #d4e8ff; }
.vt-resume[hidden] { display: none; }
/* Bouton « Valider » : action principale, sous le lecteur, pleine largeur du panneau droit. */
.vt-right .vt-validate {
    flex: 0 0 auto;
    align-self: stretch;
    justify-content: center;
    margin-top: 0.9rem; /* détache nettement l'action principale du bouton « + Ajouter une ligne » */
    padding: 0.6rem 1rem;
}

/* Placeholder de l'éditeur vide (transcription à bâtir à la main). */
.vt-edit:empty::before {
    content: attr(data-placeholder);
    color: #9aa5b1;
    font-style: italic;
    pointer-events: none;
}
.video-transcript-body--sync .video-transcript-actions { margin-top: 0.6rem; }

/* Empilé sur écran étroit : lecteur au-dessus, transcription en dessous. */
@media (max-width: 860px) {
    .video-transcript-2pane { flex-direction: column-reverse; height: auto; }
    .vt-right { flex-basis: auto; max-width: none; }
    .vt-edit { max-height: 38vh; }
}

/* Boutons de génération verrouillés tant qu'aucune transcription n'est récupérée */
.action-btn.is-disabled-gate,
.action-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Tout le groupe de génération grisé en bloc (bouton « Générer » + flèche modèle) tant que
   la transcription n'est pas prête. Dès qu'elle l'est, le groupe repasse au bleu. */
.generation-button-group.gen-gated {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.35);
}

/* ============================================================
   Éditeur Vidéo interactive — panneau lecteur + capture
   ============================================================ */
.iv-editor-panel {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    background: #f7fafd;
}

.iv-editor-novideo {
    margin: 0;
    font-size: 0.85rem;
    color: #8a5300;
}

/* Segmented Plan / Live */
.iv-modebar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.iv-seg {
    display: inline-flex;
    background: #eef1f5;
    border: 1px solid #e0e4ea;
    border-radius: 9px;
    padding: 3px;
    gap: 3px;
}
.iv-modebtn {
    border: none;
    background: none;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;            /* sans ça l'icône FA se décale verticalement vs le texte */
    color: #55606c;
    cursor: pointer;
    display: inline-flex;
    gap: 7px;
    align-items: center;
}
.iv-modebtn i { font-size: 0.9em; line-height: 1; }
.iv-modebtn span { line-height: 1; }
.iv-modebtn.is-active {
    background: #fff;
    color: #1768c4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.iv-modehint {
    font-size: 0.75rem;
    color: #55606c;
}

/* Mode Live : lecteur + timeline. Le conteneur média est 16:9, hauteur plafonnée à ~26vh et centré,
   pour ne JAMAIS déborder sur l'éditeur (même en hauteur basse). Couvre l'iframe YouTube ET la
   <video> PeerTube/PodEduc (les deux remplissent la boîte). */
.iv-live {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
/* `display:flex` ci-dessus bat l'attribut `[hidden]` (UA) → on le rétablit explicitement,
   sinon le bloc Live reste visible en mode Plan. */
.iv-live[hidden] { display: none; }
.iv-editor-media {
    position: relative;
    width: 100%;
    max-width: calc(26vh * 16 / 9);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.iv-editor-media iframe,
.iv-editor-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain;
    display: block;
}

.iv-live-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.iv-live-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1768c4;
    min-width: 3.4em;
    text-align: center;
    font-size: 0.9rem;
}
.iv-live-timeline {
    position: relative;
    flex: 1;
    height: 14px;
    border-radius: 7px;
    background: #dde6f1;
    cursor: pointer;
}
.iv-live-playhead {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: #0b3d7a;
    border-radius: 2px;
    left: 0;
    pointer-events: none;
}
.iv-live-mk {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid #1768c4;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.1s ease;
}
.iv-live-mk:hover { transform: translate(-50%, -50%) scale(1.25); }
.iv-live-mk.is-active {
    background: #1768c4;
    box-shadow: 0 0 0 3px rgba(23, 104, 196, 0.22);
}
/* Repère « Résumé final » : carré vert en BOUT de timeline (drapeau à damier). */
.iv-live-mk--summary {
    width: 17px;
    height: 17px;
    left: 100%;
    border-radius: 5px;
    background: #1c8a43;
    border-color: #1c8a43;
    color: #fff;
    transform: translate(-100%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}
.iv-live-mk--summary:hover { transform: translate(-100%, -50%) scale(1.2); }
.iv-live-mk--summary.is-active {
    background: #14702f;
    box-shadow: 0 0 0 3px rgba(28, 138, 67, 0.28);
}

.iv-live-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.7rem;
}
.iv-live-actions .iv-live-capture {
    flex: 0 0 auto;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    border-radius: 8px;
}
/* « Suivre la lecture » : bouton-bascule (pill) — bleu actif, gris inactif. */
.iv-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    color: #1768c4;
    background: #eaf2fc;
    border: 1px solid #cfe0f5;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
}
.iv-follow-btn i { line-height: 1; font-size: 0.95em; }
.iv-follow-btn:not(.is-on) {
    color: #6b7480;
    background: #f1f2f5;
    border-color: #e0e2e8;
}

/* Mode Live = CÔTE-À-CÔTE : le lecteur (panneau) passe en colonne GAUCHE à largeur fixe, l'éditeur
   à DROITE n'affiche que le détail (nav masquée) → on édite la question en regard de la vidéo.
   La classe `iv-mode-live` est posée sur le PARENT (persistante) → survit aux re-rendus. */
.preview-modal__content--editor.iv-mode-live {
    flex-direction: row !important;
    gap: 14px;
    align-items: stretch;
}
.iv-mode-live .iv-editor-panel {
    flex: 0 0 360px;
    align-self: stretch;
    margin: 0;
    overflow-y: auto;   /* en hauteur basse, la colonne gauche scrolle plutôt que de déborder */
}
.iv-mode-live .preview-modal__preview--editor {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}
.iv-mode-live .iv-editor-media { max-width: 100%; }   /* le média remplit la colonne gauche */
.iv-mode-live .json-editor__nav { display: none; }
.iv-mode-live .json-editor__body { grid-template-columns: 1fr; }

/* Repli empilé (vidéo au-dessus) seulement sur écran VRAIMENT étroit (mobile portrait, donc haut) :
   le côte-à-côte ne stacke pas la hauteur → il reste préférable tant qu'il y a ~760px de large
   (vidéo 360 + éditeur ~360). En dessous, on empile et on borne le média à 26vh. */
@media (max-width: 760px) {
    /* En empilé sur écran court, on SCROLLE le contenu plutôt que d'écraser l'éditeur : le panneau
       garde sa hauteur naturelle et l'éditeur garde une hauteur minimale utilisable (détail lisible). */
    .preview-modal__content--editor.iv-mode-live {
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    .iv-mode-live .iv-editor-panel { flex: 0 0 auto; align-self: auto; }
    .iv-mode-live .preview-modal__preview--editor { flex: 0 0 auto; min-height: 360px; }
    .iv-mode-live .iv-editor-media { max-width: calc(26vh * 16 / 9); }
}

/* ============================================================
   Éditeur Image interactive — image de fond + points déplaçables
   Miroir du panneau Vidéo interactive (.iv-*). Cf. CLAUDE.md item 7.
   ============================================================ */
.ih-editor-panel {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    background: #f7fafd;
}
.ih-editor-noimage {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: #8a5300;
}

/* Segmented Plan / Sur l'image */
.ih-modebar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.ih-seg {
    display: inline-flex;
    background: #eef1f5;
    border: 1px solid #e0e4ea;
    border-radius: 9px;
    padding: 3px;
    gap: 3px;
}
.ih-modebtn {
    border: none;
    background: none;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    color: #55606c;
    cursor: pointer;
    display: inline-flex;
    gap: 7px;
    align-items: center;
}
.ih-modebtn i { font-size: 0.9em; line-height: 1; }
.ih-modebtn span { line-height: 1; }
.ih-modebtn.is-active {
    background: #fff;
    color: #1768c4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.ih-modehint {
    font-size: 0.75rem;
    color: #55606c;
}

/* Mode « Sur l'image » : barre d'outils + image annotable */
.ih-live {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 0;
}
.ih-live[hidden] { display: none; }

.ih-live-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.7rem;
}
.ih-add-point {
    flex: 0 0 auto;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    border-radius: 8px;
}
/* Mode « placement armé » : le bouton devient « Annuler » (rouge). */
.ih-add-point.is-active {
    background: #fdecef;
    color: #b3261e;
    border-color: #f3c2c7;
}
.ih-live-hint { font-size: 0.78rem; color: #55606c; }
.ih-live-hint.is-armed { color: #1768c4; font-weight: 600; }

.ih-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 8px;
    background: #eef2f7;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
}
.ih-stage[hidden] { display: none; }
.ih-stage.is-placing,
.ih-stage.is-placing .ih-stage-wrap { cursor: crosshair; }

/* Le wrap se dimensionne EXACTEMENT à l'image rendue (inline-block, line-height:0) → les % des
   marqueurs (inset:0) tombent au pixel près sur l'image, comme le player H5P. */
.ih-stage-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
}
.ih-stage-img {
    display: block;
    max-width: 100%;
    max-height: 62vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    user-select: none;
    -webkit-user-drag: none;
}
.ih-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Marqueur = pastille numérotée colorée par globalColor (--ih-color), centrée sur la position. */
.ih-mk {
    position: absolute;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 13px;
    background: var(--ih-color, #981d99);
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    transition: box-shadow 0.12s ease, transform 0.04s ease;
}
.ih-mk:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.45); }
.ih-mk:focus-visible { outline: none; box-shadow: 0 0 0 3px #1768c4; }
.ih-mk.is-active { box-shadow: 0 0 0 3px rgba(23, 104, 196, 0.85), 0 1px 6px rgba(0, 0, 0, 0.5); z-index: 3; }
.ih-mk.is-dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.08); z-index: 4; }
.ih-mk-num { pointer-events: none; }
.ih-mk-del {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d6332b;
    color: #fff;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.ih-mk-del:hover { background: #b3261e; }

/* Variante « zone à taille réelle » (questions hotspot Find the Hotspot / Find Multiple Hotspots) :
   le marqueur devient une ellipse (ou un rectangle selon `figure`) semi-transparente aux dimensions
   réelles width/height (% de l'image), positionnée par son CENTRE. La couleur (--ih-color) reste
   vert = zone correcte / rouge = leurre ; la pastille classique reste le rendu d'Image interactive. */
.ih-mk--zone {
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--ih-color, #981d99);
    background: rgba(120, 120, 120, 0.28); /* repli si color-mix indisponible */
    background: color-mix(in srgb, var(--ih-color, #981d99) 30%, transparent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.ih-mk--zone.ih-mk--rect { border-radius: 6px; }
.ih-mk--zone .ih-mk-num {
    background: var(--ih-color, #981d99);
    border-radius: 10px;
    padding: 2px 7px;
    font-size: 0.75rem;
}
/* Pas d'agrandissement au glissement : la taille de la zone est signifiante. */
.ih-mk--zone.is-dragging { transform: translate(-50%, -50%); }
/* Poignée de redimensionnement (bas-droite), visible au survol ou sur la zone active. */
.ih-mk-rsz {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #fff;
    border: 2px solid var(--ih-color, #981d99);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: nwse-resize;
    touch-action: none;
    display: none;
}
.ih-mk--zone.is-active .ih-mk-rsz,
.ih-mk--zone:hover .ih-mk-rsz { display: block; }
.ih-mk--zone.is-resizing { cursor: nwse-resize; }

/* Mode « Sur l'image » = CÔTE-À-CÔTE : l'image (panneau) prend la GRANDE colonne gauche, l'éditeur à
   DROITE n'affiche que le détail du point (nav masquée), à largeur fixe. La classe `ih-mode-live` est
   posée sur le PARENT (persistante) → survit aux re-rendus. */
.preview-modal__content--editor.ih-mode-live {
    flex-direction: row !important;
    gap: 14px;
    align-items: stretch;
}
/* Colonne gauche = bloc DÉFILANT (comme le panneau Vidéo interactive) : si l'image + la barre d'outils
   dépassent la hauteur de la modale, la colonne scrolle verticalement → l'utilisateur atteint le bas de
   l'image. SURTOUT PAS de `display:flex` ici : en flex-colonne les enfants se compriment (flex-shrink:1)
   pour tenir dans la colonne et l'image est tronquée au lieu de déclencher le scroll. overflow-x: hidden
   + image max-width:100% empêchent tout débordement horizontal ; l'image est plafonnée à 62vh. */
.ih-mode-live .ih-editor-panel {
    flex: 1 1 auto;
    align-self: stretch;
    margin: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.ih-mode-live .preview-modal__preview--editor {
    flex: 0 0 360px;
    min-width: 0;
    overflow-y: auto;
}
.ih-mode-live .json-editor__nav { display: none; }
.ih-mode-live .json-editor__body { grid-template-columns: 1fr; }

/* Écran étroit : on empile (image au-dessus du formulaire) et on borne la hauteur de l'image. */
@media (max-width: 760px) {
    .preview-modal__content--editor.ih-mode-live {
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    .ih-mode-live .ih-editor-panel { flex: 0 0 auto; align-self: auto; }
    .ih-mode-live .preview-modal__preview--editor { flex: 0 0 auto; min-height: 320px; }
    .ih-stage-img { max-height: 46vh; }
}