/*
 * Fichier : site_v3/public/static/css/frac_mobile_v3.css
 *
 * Pages Fractions « classiques » de la V3 (Calculer, Simplifier,
 * Équivalentes, Comparer, Multiplier, Diviser, Notion de quotient) : leur
 * habillage mobile venait de la v2 (titre en capitales, barre continue,
 * bouton « VALIDER », correction dans le clavier). Ces règles les alignent
 * sur les pages V3 (Reconnaître, Quotient, Équations) sans toucher au code
 * partagé avec la v2 : tout est sous body.fm-v3 (classe posée par
 * frac_mobile_v3.js) et ne vaut que sur mobile.
 */
body.fm-v3 {
    --fm-ac: var(--accent, var(--frac-accent, #6366f1));
    --fm-ac-dark: color-mix(in srgb, var(--fm-ac) 72%, #0f172a);
    --fm-ac-soft: color-mix(in srgb, var(--fm-ac) 14%, transparent);
    --fm-ac-mid: color-mix(in srgb, var(--fm-ac) 28%, transparent);
    --fm-ac-line: color-mix(in srgb, var(--fm-ac) 30%, #ffffff);
    --fm-ac-light: color-mix(in srgb, var(--fm-ac) 55%, #ffffff);
}

@media (max-width: 991.98px) {
    /* ── Haut : progression en segments + pastille du score ── */
    body.fm-v3 .modern-header {
        flex-direction: row !important; align-items: center !important; gap: 10px !important;
        padding: calc(10px + env(safe-area-inset-top, 20px)) 16px 10px !important;
        background: transparent !important; border: 0 !important; box-shadow: none !important;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    }
    body.fm-v3 .modern-header .slim-hdr-left,
    body.fm-v3 .modern-header .header-progress-bar { display: none !important; }
    body.fm-v3 .modern-header .slim-hdr-row { order: 2; flex: 0 0 auto; }
    body.fm-v3 #headerScoreText {
        font-size: .72rem; font-weight: 800; color: var(--fm-ac-dark); background: #fff;
        border: 1px solid var(--fm-ac-line); border-radius: 999px; padding: 4px 11px; white-space: nowrap;
    }
    body.fm-v3 .fm-progress { order: 1; flex: 1; display: flex; gap: 4px; min-width: 0; }
    body.fm-v3 .fm-seg { flex: 1; height: 5px; border-radius: 99px; background: var(--fm-ac-soft); position: relative; overflow: hidden; transition: background .25s; }
    body.fm-v3 .fm-seg.seg-current { background: var(--fm-ac-mid); }
    body.fm-v3 .fm-seg.seg-current::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--fm-ac); animation: fmSegPulse 1.3s ease-in-out infinite; }
    body.fm-v3 .fm-seg.seg-correct { background: #22c55e; }
    body.fm-v3 .fm-seg.seg-partial { background: #f59e0b; }
    body.fm-v3 .fm-seg.seg-wrong { background: #ef4444; }
    body.fm-v3 .fm-seg.seg-correct::after, body.fm-v3 .fm-seg.seg-partial::after, body.fm-v3 .fm-seg.seg-wrong::after { display: none; }
    @keyframes fmSegPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

    /* ── Carte : pas de cadre autour de la réponse, cases comme Reconnaître ── */
    body.fm-v3 .response-head { display: none !important; }
    body.fm-v3 .swiper-slide .response-block,
    body.fm-v3 .swiper-slide .exo-card.wrong .response-block,
    body.fm-v3 .swiper-slide .exo-card.correct .response-block {
        background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
    }
    body.fm-v3 .swiper-slide .fraction-stack,
    body.fm-v3 .swiper-slide .exo-card.wrong .fraction-stack,
    body.fm-v3 .swiper-slide .exo-card.correct .fraction-stack {
        width: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 auto !important;
        background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important;
        display: inline-flex !important; flex-direction: column; align-items: center; gap: 6px;
    }
    body.fm-v3 .swiper-slide .fraction-answer-shell { display: flex; justify-content: center; }
    body.fm-v3 .swiper-slide .fraction-slot {
        width: 132px; min-height: 52px; padding: 0 !important; display: flex; align-items: center; justify-content: center;
        background: #fff; border: 2px solid #e2e8f0; border-radius: 14px; transition: border-color .2s, box-shadow .2s;
    }
    body.fm-v3 .swiper-slide .fraction-slot-label { display: none !important; }
    body.fm-v3 .swiper-slide .fraction-slot .fraction-input { text-align: center; font-size: 1.35rem !important; font-weight: 800; background: transparent !important; border: 0 !important; box-shadow: none !important; width: 100%; }
    body.fm-v3 .swiper-slide .fraction-slot:has(.mobile-input-active) { border-color: var(--fm-ac); box-shadow: 0 0 0 4px var(--fm-ac-soft); }
    body.fm-v3 .swiper-slide .fraction-bar,
    body.fm-v3 .swiper-slide .exo-card.wrong .fraction-bar,
    body.fm-v3 .swiper-slide .fraction-stack.has-active-field .fraction-bar { width: 150px !important; height: 3px !important; border-radius: 2px; background: #0f172a !important; margin: 0 !important; }
    body.fm-v3 .swiper-slide .exo-card.wrong .fraction-slot { border-color: #fca5a5; background: #fff5f5; }
    body.fm-v3 .swiper-slide .exo-card.correct .fraction-slot { border-color: #86efac; background: #f0fdf4; }
    body.fm-v3 .swiper-slide .exo-card.partial .fraction-slot { border-color: #fcd34d; background: #fffbeb; }

    /* ── Clavier : même rendu que les pages V3 ── */
    body.fm-v3 .virtual-keyboard {
        background: rgba(255,255,255,.96) !important; border-top: 1px solid rgba(148,163,184,.18) !important;
        box-shadow: 0 -14px 34px rgba(15,23,42,.14) !important;
        backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
    }
    body.fm-v3 .vk-key {
        background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; font-weight: 700; color: #1e293b;
        box-shadow: 0 12px 20px -18px rgba(15,23,42,.65); touch-action: manipulation;
    }
    body.fm-v3 .vk-key:active { transform: scale(.97); box-shadow: none; background: #f8fafc; }
    body.fm-v3 .vk-delete { background: #fee2e2 !important; color: #ef4444 !important; border-color: #fecaca !important; }
    body.fm-v3 .vk-clear { background: #e2e8f0 !important; color: #475569 !important; border-color: #cbd5e1 !important; font-size: 1rem !important; }
    body.fm-v3 .vk-switch { background: var(--fm-ac-soft) !important; color: var(--fm-ac-dark) !important; border-color: var(--fm-ac-line) !important; }
    /* Valider : ✓ seul, dans la couleur de la page. */
    body.fm-v3 .vk-key.vk-submit {
        font-size: 0 !important; letter-spacing: 0; text-transform: none;
        background: linear-gradient(135deg, var(--fm-ac-light) 0%, var(--fm-ac-dark) 100%) !important;
        border-color: var(--fm-ac-dark) !important; color: #fff !important; box-shadow: 0 10px 18px -10px var(--fm-ac) !important;
    }
    body.fm-v3 .vk-key.vk-submit i { font-size: 1.35rem !important; margin: 0 !important; }
    /* Cases NUM / DEN au-dessus du clavier. */
    body.fm-v3 .vk-field-btn { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; box-shadow: none !important; }
    body.fm-v3 .vk-field-btn.active { border-color: var(--fm-ac) !important; background: var(--fm-ac-soft) !important; box-shadow: 0 0 0 3px var(--fm-ac-soft) !important; }
    body.fm-v3 .vk-field-btn .vk-field-lbl { color: #94a3b8 !important; }
    body.fm-v3 .vk-field-btn.active .vk-field-lbl, body.fm-v3 .vk-field-btn.active .vk-field-val { color: var(--fm-ac-dark) !important; }
    body.fm-v3 .vk-frac-line { background: #cbd5e1 !important; }

    /* Le panneau de détail du clavier est remplacé par la feuille du bas :
       le clavier reste visible derrière. */
    body.fm-v3 #vkDetailPanel { display: none !important; }
    body.fm-v3 #vkDetailBack { display: none !important; }
    body.fm-v3.fm-detail-open #vkGrid { display: grid !important; }
}

/* ── Feuille Indice / Méthode / Correction (comme les pages V3) ── */
.fm-help-sheet { border-radius: 24px 24px 0 0; height: auto !important; max-height: 78dvh !important; z-index: 10520 !important; border-top: 1px solid #e2e8f0; box-shadow: 0 -18px 45px rgba(15,23,42,.16); }
.fm-help-sheet .lab-corr-handle { padding: 12px 0 8px; display: flex; justify-content: center; cursor: grab; }
.fm-help-sheet .lab-corr-handle-bar { width: 44px; height: 5px; border-radius: 99px; background: #e2e8f0; }
.fm-help-sheet .offcanvas-body { padding: 4px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fm-help-sheet #vkDetailLabel { font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--fm-ac-dark, #4338ca); margin: 6px 0 12px; }
.fm-help-sheet #vkDetailBody { max-height: none !important; overflow: visible !important; font-size: .95rem; line-height: 1.55; color: #1e293b; }
.fm-help-sheet #vkDetailBody .hint-box,
.fm-help-sheet #vkDetailBody .method-box,
.fm-help-sheet #vkDetailBody .correction-box { padding: 12px 14px !important; border-radius: 12px !important; font-size: .95rem !important; }
.fm-help-sheet #vkDetailBody .math-correction { font-size: 1rem !important; overflow-x: auto; }
.fm-help-sheet #vkDetailBody .vk-detail-next-btn,
.fm-help-sheet #vkDetailBody .vk-detail-finish-btn { margin-top: 14px; padding: 12px; border-radius: 14px; font-size: .95rem; }