/**
 * previewStyles.css
 * Styles pour le mode prévisualisation du générateur de code GIFT
 * 
 * Ce fichier contient tous les styles nécessaires pour transformer l'interface
 * du générateur de code GIFT en mode prévisualisation.
 */

/* Bouton de prévisualisation — 2ᵉ élément de la pile fixe haut-droite, SOUS le
   bouton Aide. Largeur FIXE (identique à .help-btn) : le libellé bascule entre
   « Prévisualiser » et « Éditer » sans faire varier la largeur (chantier n°10). */
.preview-btn {
    position: fixed;
    right: 12px;
    top: 56px; /* sous .help-btn (12px + 36px de haut + 8px de gouttière) */
    width: 150px;
    box-sizing: border-box;
    height: 36px;
    border-radius: 18px;
    background-color: #2da288;
    color: white;
    border: none;
    font-weight: bold;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1000;
}

.preview-btn:hover {
    background-color: #259678;
    transform: scale(1.05);
}

.preview-btn.active-preview {
    background-color: #ae2585; /* Couleur rose quand actif (mode édition) */
}

.preview-btn.active-preview:hover {
    background-color: #9e1575;
}

.preview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    font-size: 16px;
}

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

/* Cacher les éléments en mode prévisualisation */
.preview-hidden {
    display: none !important;
}

.preview-hidden-field {
    display: none !important;
}

/* Styles généraux pour les éléments en prévisualisation */
.preview-display {
    margin-bottom: 9px;
}

/* Neutraliser les marges des blocs (<p>, etc.) produits par le RTE : sinon
   chaque réponse/énoncé gagne ~1 ligne de marge → preview trop haute. */
.preview-question-text > p:first-child,
.preview-option-text > p,
.preview-option-feedback > p,
.preview-general-feedback p,
.preview-combined-content p {
    margin: 0;
}
.preview-question-text > p { margin: 0.2em 0; }

/* Identifiant de question — coin HAUT-DROIT du cadre (position absolue). Les
   flèches ↑/↓ et le sélecteur de banque sont masqués en preview → plus de
   chevauchement (chantier n°9). L'ID est complet (avec la banque). */
.preview-id {
    position: absolute;
    top: 12px;
    right: 14px;
    margin: 0;
    font-family: ui-monospace, Consolas, monospace;
    background-color: #eef2f5;
    border: 1px solid #dbe3ea;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.82em;
    color: #4a5b6b;
    white-space: nowrap;
}

/* En-tête de question avec type à côté. padding-right réserve la place de l'ID
   absolu (le type peut passer à la ligne sous le numéro si besoin). */
.preview-header-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    padding-right: 150px;
}

.preview-question-number {
    margin: 0;
    padding: 0;
    color: #2c3e50;
}

/* Étiquette de type : pastille à fond CLAIR et texte FONCÉ (contraste inversé),
   teintée selon la parité du cadre de question (turquoise/rose), réglée plus bas. */
.preview-question-type {
    color: #1c6b58;             /* défaut (questions impaires) */
    background-color: #d3efec;
    font-size: 0.85em;
    font-weight: 700;
    margin-left: 0;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
}

/* Accord avec la couleur du cadre (cf. .question-odd / .question-even). */
body.preview-mode .question-odd .preview-question-type {
    background-color: #d3efec; /* turquoise très clair */
    color: #1c6b58;            /* turquoise foncé */
}
body.preview-mode .question-even .preview-question-type {
    background-color: #f8dde9; /* rose très clair */
    color: #8e1e6c;            /* rose foncé */
}

/* Texte de la question — mis en valeur : police plus grande + fond très
   légèrement teinté selon la parité (réglé plus bas). Reste épuré (teinte douce). */
.preview-question-text {
    font-size: 1.2em;
    margin-bottom: 12px;
    line-height: 1.5;
    color: #1f2d3a;
    padding: 10px 14px;
    border-radius: 6px;
    background-color: #f4f6f8; /* teinte affinée par parité plus bas */
}

/* Média en preview */
.preview-media {
    margin-bottom: 14px;
}
.preview-media-img {
    max-width: 100%;
    max-height: 280px;
    border: 1px solid #d6e9e4;
    border-radius: 6px;
    display: block;
}
.preview-media-note {
    display: inline-block;
    font-style: italic;
    color: #555;
    background-color: #f3f3f3;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.92em;
}

/* Options de réponse */
.preview-options {
    margin-bottom: 10px;
}

/* Titre de section « Réponses » — discret, en capitales. */
.preview-options-title, .preview-feedback-title {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: #8a98a5;
}

.preview-options-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Liste épurée : AUCUNE boîte autour des réponses. Une simple ligne
   « marque + texte », séparée par un filet fin. Charte chantier n°10 :
   bonne réponse en BLEU, mauvaise en ROUGE (porté par la marque ✓/✗). */
.preview-option {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 5px 2px;
    background: none;
    border: none;
    border-bottom: 1px solid #eef1f4;
}
.preview-options-list .preview-option:last-child {
    border-bottom: none;
}

/* La bonne réponse se distingue par le gras + une teinte bleue (pas de fond). */
.preview-option-correct .preview-option-text {
    font-weight: 700;
    color: #005EB8;
}

/* Marque de validité (✓ ou ✗) : glyphe coloré, sans pastille ni fond. */
.preview-validity-icon {
    flex-shrink: 0;
    display: inline-block;
    width: 1.1em;
    margin-right: 9px;
    font-weight: 700;
    font-size: 0.95em;
    text-align: center;
}

.preview-option-correct .preview-validity-icon {
    color: #005EB8;
}

.preview-option-incorrect .preview-validity-icon {
    color: #c62828;
}

/* Texte de l'option */
.preview-option-text {
    flex-grow: 1;
    line-height: 1.4;
    color: #1f2d3a;
}

/* Pondération — texte discret, sans pastille. */
.preview-option-weight {
    flex-shrink: 0;
    margin-left: 10px;
    font-weight: 600;
    color: #8a98a5;
    font-size: 0.82em;
    white-space: nowrap;
}

.preview-option-correct .preview-option-weight {
    color: #005EB8;
}

.preview-option-incorrect .preview-option-weight {
    color: #c62828;
}

/* Informations supplémentaires pour les options — texte discret, sans pastille. */
.preview-option-case {
    display: inline-block;
    margin-left: 10px;
    font-style: italic;
    color: #8a98a5;
    font-size: 0.85em;
}

.preview-option-margin {
    display: inline-block;
    margin-left: 5px;
    font-style: italic;
    color: #666;
}

/* Feedback d'une option — épuré : texte en retrait, sans cadre ni fond ni
   préfixe (la flèche « ↳ » a été retirée à la demande de l'utilisateur). */
.preview-option-feedback {
    width: 100%;
    margin-top: 1px;
    margin-left: 27px; /* aligné sous le texte de l'option */
    color: #6b7884;
    font-size: 0.86em;
    line-height: 1.35;
    font-style: italic;
}

/* Styles spécifiques pour questions Vrai/Faux — en ligne, sans filet de
   séparation (les deux options sont côte à côte). */
.preview-tf-options {
    display: flex;
    flex-direction: row;
    gap: 28px;
}

.preview-tf-options .preview-option {
    flex: 0 0 auto;
    padding: 5px 2px;
    border-bottom: none;
}

/* Styles spécifiques pour questions numériques */
.preview-num-options .preview-option {
    padding: 5px 2px;
    border-bottom: none;
}

/* Feedback général — épuré : un titre discret en capitales + le texte, séparé
   du bloc précédent par un filet fin. Sans fond ni encadré. */
.preview-feedback,
.preview-general-feedback {
    margin-top: 12px;
    padding-top: 9px;
    border-top: 2px solid #d6dde3; /* couleur affinée par parité plus bas */
    font-size: 0.95em;
    line-height: 1.45;
    color: #2f3d4a;
}
.preview-general-feedback > strong {
    display: block;
    font-weight: 700;
    font-size: 0.72em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a98a5;
    margin-bottom: 3px;
}

.preview-feedback-content {
    line-height: 1.4;
}

/* Feedback combiné (QCM/QCU) — lecture seule. Épuré : pas de boîtes ; chaque
   ligne = une étiquette colorée discrète + le texte. */
.preview-combined-feedback {
    margin-top: 12px;
    padding-top: 9px;
    border-top: 2px solid #d6dde3; /* couleur affinée par parité plus bas */
}
.preview-combined-title {
    font-weight: 700;
    font-size: 0.72em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a98a5;
    margin-bottom: 5px;
}
.preview-combined-item {
    padding: 2px 0;
    margin-bottom: 2px;
    background: none;
    font-size: 0.92em;
    line-height: 1.4;
}
.preview-combined-label {
    display: inline-block;
    font-weight: 700;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 0.5em;
}
.preview-combined-content { color: #2f3d4a; }
.preview-combined-ok      .preview-combined-label { color: #005EB8; }
.preview-combined-partial .preview-combined-label { color: #c47f00; }
.preview-combined-ko      .preview-combined-label { color: #c62828; }

/* Style pour les éléments manquants */
.preview-missing {
    color: #e74c3c;
    font-style: italic;
}

/* Styles pour le mode prévisualisation général */
body.preview-mode .question-container {
    position: relative;
    transition: all 0.3s ease;
}

/* Épure : cartes quasi blanches, identité de parité portée par un FIN accent
   latéral (au lieu d'un aplat de couleur sur toute la carte). */
body.preview-mode .question-container {
    background-color: #ffffff;
    border: 1px solid #e7ecf0;
    border-left-width: 3px;
}
body.preview-mode .question-odd {
    border-left-color: #2da288; /* turquoise CNED */
}
body.preview-mode .question-even {
    border-left-color: #ae2585; /* rose CNED */
}

/* Filets de séparation teintés selon la parité de la question (vert/rose) et
   plus visibles : filet fin entre réponses, filet plus marqué (2px) avant les
   sections de rétroaction. */
body.preview-mode .question-odd .preview-option {
    border-bottom-color: rgba(45, 162, 136, 0.30);
}
body.preview-mode .question-even .preview-option {
    border-bottom-color: rgba(174, 37, 133, 0.26);
}
body.preview-mode .question-odd .preview-general-feedback,
body.preview-mode .question-odd .preview-combined-feedback {
    border-top-color: rgba(45, 162, 136, 0.55);
}
body.preview-mode .question-even .preview-general-feedback,
body.preview-mode .question-even .preview-combined-feedback {
    border-top-color: rgba(174, 37, 133, 0.50);
}

/* Fond de l'énoncé teinté très légèrement selon la parité (mise en valeur). */
body.preview-mode .question-odd .preview-question-text {
    background-color: rgba(45, 162, 136, 0.10);
}
body.preview-mode .question-even .preview-question-text {
    background-color: rgba(174, 37, 133, 0.08);
}

/* Optimisations pour petits écrans */
@media (max-width: 768px) {
    .preview-btn {
        padding: 0 10px;
        height: 32px;
        font-size: 13px;
        right: 8px;
        top: 48px; /* sous .help-btn en version compacte (8 + 32 + 8) */
        width: 130px;
    }
    
    .preview-tf-options {
        flex-direction: column;
        gap: 10px;
    }
    
    .preview-id {
        top: 8px;
        right: 8px;
        font-size: 0.75em;
        padding: 2px 7px;
    }
    .preview-header-container {
        padding-right: 96px;
    }

    .preview-option {
        flex-wrap: wrap;
    }
    
    .preview-option-weight,
    .preview-option-case {
        margin-left: 36px;
        margin-top: 5px;
    }
    
    .preview-header-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .preview-question-type {
        margin-left: 0;
        margin-top: 5px;
        font-size: 0.9em;
    }
    
    .preview-option-feedback {
        margin-left: 0;
        width: 100%;
    }
}

/* ── Nom de banque en prévisualisation ────────────────────────────────────────
   Le champ est mis en lecture seule par JS (previewMode.js), mais son apparence
   de champ de saisie (bordure, fond blanc, anneau de focus) laissait croire
   qu'il restait modifiable et permettait de le focaliser. On le rend ici inerte
   et présenté comme un simple texte : ni bordure, ni fond, non focalisable. */
.preview-readonly-bankname {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding-left: 0;
    cursor: default;
    pointer-events: none; /* empêche clic/focus → aucune interaction possible */
}