/*
 * Fichier : site_v3/public/static/css/v3_litt.css
 *
 * Habillage V3 commun aux exerciseurs de calcul littéral issus de la V2
 * (Réduire, Développer, Factoriser, Simplifier, Mélange, Programmes de calcul,
 * Évaluer). Chargé en dernier dans <head> : il passe après les styles de la page.
 *
 * 1. Plus de pastilles « Question n » ni « Faux / Correction / Parfait / Vide ? »
 *    (reliquats V2) : la case colorée et la barre de progression suffisent.
 *
 * 2. Clavier mobile (#virtualKeyboard.vk-litt) sur le modèle de la page
 *    Équations : grandes touches grises sur 4 colonnes, ⌫ en haut à droite,
 *    « 0 · Effacer · ✓ » en bas ; les lettres (#vkVarRow) au-dessus et une
 *    ligne ( ) ^ × en plus ; à droite une colonne d'aides (Méthode,
 *    Correction) de la largeur d'une touche, grisées tant qu'elles ne
 *    servent pas.
 *    Le JS des pages ne change pas : il montre/cache les aides par
 *    style.visibility et remplit #vkVarRow.
 */

/* ---- 1. Pastilles V2 ---- */
.exo-card > .d-flex.justify-content-between:first-child { display: none !important; }
.exo-card .feedback-badge { display: none !important; }
.exo-card .exponent-hint { font-size: .8rem !important; color: #94a3b8 !important; text-align: center; }
.exo-card .exponent-hint code { color: #64748b; background: #f1f5f9; padding: 1px 5px; border-radius: 5px; }

/* ---- 2. Clavier mobile ---- */
@media (max-width: 991.98px) {
    #virtualKeyboard.vk-litt.active {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) calc((100% - 32px) / 5);
        gap: 8px !important;
        /* La barre du bas gère déjà la zone de l'iPhone : pas de marge en plus. */
        padding: 10px 10px 10px !important;
    }
    #virtualKeyboard.vk-litt.vk-litt-noaids.active { grid-template-columns: minmax(0, 1fr); }

    .vk-litt .vk-litt-keys { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .vk-litt #vkVarRow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .vk-litt #vkVarRow:has(> :nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .vk-litt #vkVarRow:empty { display: none; }
    .vk-litt .vk-fixed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }

    .vk-litt .vk-key {
        height: 54px !important; margin: 0 !important; width: auto !important; padding: 0 !important;
        border-radius: 16px !important; font-size: 1.28rem !important; font-weight: 700;
        transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
    }
    .vk-litt .vk-key:not(.vk-submit) {
        color: #1e293b; background: #f8fafc; border: 1px solid #e2e8f0;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px -10px rgba(15,23,42,.35);
    }
    .vk-litt .vk-key:active { transform: scale(.92); box-shadow: none; }
    .vk-litt .vk-key.vk-var {
        height: 46px !important; background: #eef2ff; border-color: #c7d2fe; color: #4338ca;
        font-family: "KaTeX_Main", "Times New Roman", serif; font-style: italic; font-size: 1.4rem !important;
    }
    .vk-litt .vk-var sup { position: relative; top: -.45em; vertical-align: baseline; line-height: 0; font-style: normal; font-size: .65em; }
    .vk-litt .vk-key.vk-op { color: #4338ca; }
    .vk-litt .vk-delete { background: #fee2e2 !important; border-color: #fecaca !important; color: #ef4444 !important; }
    .vk-litt .vk-clear { background: #e2e8f0 !important; border-color: #cbd5e1 !important; color: #475569 !important; font-size: 1rem !important; }
    .vk-litt .vk-submit { color: #fff !important; border: none !important; font-size: 1.35rem !important; text-transform: none !important; letter-spacing: 0 !important; }

    .vk-litt .vk-litt-aids { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .vk-litt .vk-litt-aids > .vk-key {
        flex: 1 1 0; height: auto !important; min-height: 0 !important;
        visibility: visible !important; font-size: 1.15rem !important;
    }
    .vk-litt .vk-litt-aids > .vk-key.vk-act-meth { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }
    .vk-litt .vk-litt-aids > .vk-key.vk-act-corr { background: #fff5f5; border-color: #fecaca; color: #b91c1c; }
    .vk-litt .vk-litt-aids > .vk-key:not([style*="visible"]) { opacity: .32; pointer-events: none; box-shadow: none; }
}