/* ================================================================
   MathClair — fractions.css
   CSS partagé entre toutes les pages d'exercices fractions.
   Accent : indigo site (#6366f1 / #4f46e5)
   ================================================================ */

@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700,800,900&display=swap');

/* ---- Variables ---- */
:root {
    --frac-accent:       #6366f1;
    --frac-accent-dark:  #4f46e5;
    --frac-accent-soft:  #eef2ff;
    --frac-accent-wash:  rgba(99, 102, 241, 0.12);
    --frac-bg:           #f8fafc;
    --frac-text:         #1e293b;
    --frac-text-sub:     #64748b;
    --frac-border:       #e2e8f0;
    --mobile-header-h:   88px;
    --nav-h:             64px;
    --vk-height:         0px;
    --safe-top:          env(safe-area-inset-top, 0px);
    --safe-bottom:       env(safe-area-inset-bottom, 0px);
}

/* ---- Base ---- */
html { height: 100%; background: var(--frac-bg); }
body {
    min-height: 100vh;
    background: var(--frac-bg);
    color: var(--frac-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---- Breakpoints ---- */
@media (min-width: 992px) {
    body {
        padding-top: 80px;
        background-image: radial-gradient(#dbe3ee 1px, transparent 1px);
        background-size: 24px 24px;
    }
    .frac-mobile-only, .virtual-keyboard, #emptyState { display: none !important; }
    .exo-card { min-height: 320px; }
}
@media (max-width: 991.98px) {
    .frac-desktop-only { display: none !important; }
    body { padding-top: 0 !important; }
}

/* ================================================================
   DESKTOP TOOLBAR
   ================================================================ */
.frac-toolbar { padding: 0.8rem 0 1.2rem; margin-bottom: 2rem; }
.frac-toolbar-shell {
    background: linear-gradient(135deg, var(--frac-accent-soft) 0%, #f0f0ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.1);
}
.frac-toolbar-title   { margin: 0; font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.frac-toolbar-subtitle { margin: 3px 0 0; font-size: 0.82rem; color: var(--frac-text-sub); }
.frac-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #c7d2fe;
    background: var(--frac-accent-soft);
    color: var(--frac-accent-dark);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.2s ease;
}
.frac-back-btn:hover { background: #e0e7ff; color: #312e81; transform: translateY(-1px); }

/* ---- Form inputs ---- */
.tool-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    display: block;
    margin-bottom: 6px;
}
.input-custom {
    border: 1px solid var(--frac-border);
    border-radius: 12px;
    padding: 0 12px;
    height: 42px;
    font-weight: 600;
    color: #334155;
    width: 100%;
    font-size: 0.9rem;
    background: #fff;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.input-custom:focus {
    border-color: var(--frac-accent);
    box-shadow: 0 0 0 4px var(--frac-accent-wash);
    outline: none;
}
.btn-generate {
    background: linear-gradient(135deg, var(--frac-accent) 0%, var(--frac-accent-dark) 100%);
    color: #fff;
    border: none;
    font-weight: 700;
    border-radius: 12px;
    height: 42px;
    width: 100%;
    transition: all 0.2s;
    box-shadow: 0 8px 14px rgba(99, 102, 241, 0.28);
}
.btn-generate:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(99, 102, 241, 0.35); }

/* ================================================================
   START CARD (état initial mobile)
   ================================================================ */
.start-card {
    background: #fff;
    border-radius: 22px;
    padding: 2.4rem 1.8rem;
    max-width: 560px;
    margin: 3rem auto 1rem;
    text-align: center;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12);
    border: 1px solid var(--frac-border);
    position: relative;
    overflow: hidden;
}
.start-card-ornament {
    position: absolute;
    inset: -40px auto auto -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--frac-accent-wash) 0%, transparent 70%);
    pointer-events: none;
}
.icon-circle {
    width: 78px; height: 78px;
    background: var(--frac-accent-soft);
    color: var(--frac-accent-dark);
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.1rem;
}
.start-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--frac-accent-soft);
    border: 1px solid #c7d2fe;
    color: var(--frac-accent-dark);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.start-preview-card {
    margin: 0 0 16px;
    padding: 14px;
    border-radius: 18px;
    background: var(--frac-accent-soft);
    border: 1px solid #c7d2fe;
}
.start-preview-label {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 10px;
}
.start-preview-fraction {
    width: 108px; margin: 0 auto 10px; padding: 10px 0 8px;
    display: grid; grid-template-rows: auto 3px auto; gap: 6px;
}
.preview-slot {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 26px; border-radius: 12px; background: #fff;
    color: #475569; font-size: 0.82rem; font-weight: 800; text-transform: uppercase;
}
.preview-bar { width: 76px; height: 3px; margin: 0 auto; border-radius: 999px; background: #0f172a; }
.start-preview-note { font-size: 0.8rem; color: var(--frac-text-sub); line-height: 1.4; }

.mobile-preset-block { margin-bottom: 14px; }
.mobile-preset-title { font-size: 0.78rem; font-weight: 800; color: #475569; margin-bottom: 10px; }
.mobile-preset-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mobile-preset-row.compact { justify-content: flex-start; }
.mobile-preset-chip {
    border: 1px solid #c7d2fe;
    background: var(--frac-accent-soft);
    color: var(--frac-accent);
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.82rem; font-weight: 800;
    transition: all 0.2s ease;
}
.mobile-preset-chip.active {
    background: var(--frac-accent); color: #fff; border-color: var(--frac-accent);
    box-shadow: 0 10px 18px -14px rgba(99, 102, 241, 0.8);
}
.mobile-preset-chip:active { transform: scale(0.97); }
.start-meta-row {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.start-meta-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-radius: 999px;
    background: #f8fafc; border: 1px solid var(--frac-border);
    color: #475569; font-size: 0.76rem; font-weight: 700;
}
.mobile-launch-btn {
    background: linear-gradient(135deg, var(--frac-accent) 0%, var(--frac-accent-dark) 100%);
    border: none; border-radius: 16px; color: #fff; font-weight: 700;
    padding: 0.95rem 1rem; width: 100%;
    box-shadow: 0 14px 24px -16px rgba(99, 102, 241, 0.8);
}

/* ================================================================
   EXERCISE CARD
   ================================================================ */
@keyframes cardAppear {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card-appear { opacity: 0; animation: cardAppear 0.4s ease-out forwards; }

.exo-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -2px rgba(0,0,0,.03);
    display: flex; flex-direction: column;
    overflow: hidden; position: relative;
}
.exo-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: var(--frac-accent); opacity: 0.85;
}
.exo-card.correct  { background: #f0fdf4; border-color: #bbf7d0; }
.exo-card.correct::before  { background: #22c55e; }
.exo-card.partial  { border-color: #f59e0b; background: #fffef7; }
.exo-card.partial::before  { background: #f59e0b; }
.exo-card.wrong    { border-color: #ef4444; background: #fff5f5; }
.exo-card.wrong::before    { background: #ef4444; }

/* ---- Statement panel ---- */
.statement-panel {
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--frac-accent-soft) 0%, #f5f7ff 100%);
    padding: 0.8rem;
    margin-bottom: 0.95rem;
}
.statement-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800;
    color: var(--frac-accent-dark); background: #fff; border: 1px solid #c7d2fe;
    border-radius: 999px; padding: 4px 10px; margin-bottom: 8px;
}
.statement-math-shell {
    background: #fff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 0.7rem 0.65rem;
}
.statement-math {
    font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 800; color: #0f172a;
    margin: 0; line-height: 1.25; text-align: center;
}
.math-display-scroll {
    overflow-x: auto; overflow-y: hidden; white-space: nowrap; max-width: 100%;
    padding-bottom: 5px; -webkit-overflow-scrolling: touch;
    touch-action: pan-x; overscroll-behavior-x: contain; text-align: left;
}
.math-display-scroll mjx-container[display="true"] {
    display: inline-block !important; min-width: max-content; margin: 0 !important;
}

/* ---- Fraction input stack ---- */
.fraction-answer-shell {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 0.25rem;
}
.response-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px;
}
.response-title   { font-size: 0.92rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
.response-subtitle { font-size: 0.76rem; color: var(--frac-text-sub); font-weight: 600; }

.fraction-stack {
    position: relative;
    width: min(220px, 58vw); min-width: 150px;
    background: #fff; border: 1px solid #c7d2fe; border-radius: 16px;
    padding: 8px 12px 9px;
    display: grid; grid-template-rows: auto 3px auto; gap: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px rgba(99,102,241,.06);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.fraction-stack:focus-within,
.fraction-stack.has-active-field {
    border-color: var(--frac-accent);
    box-shadow: 0 0 0 4px var(--frac-accent-wash);
    transform: translateY(-1px);
}
.fraction-slot {
    display: flex; align-items: center; justify-content: center;
    min-height: 34px; position: relative; flex-direction: column; gap: 1px;
}
.fraction-slot-label {
    font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: #94a3b8; line-height: 1; user-select: none;
}
.fraction-slot.top    { padding-bottom: 2px; }
.fraction-slot.bottom { padding-top: 2px; }
.fraction-bar {
    height: 2px; width: 72%; margin: 0 auto; border-radius: 999px;
    background: #0f172a; opacity: 0.72; transition: background 0.2s;
}
.fraction-stack:focus-within .fraction-bar,
.fraction-stack.has-active-field .fraction-bar { background: var(--frac-accent); opacity: 1; }
.fraction-input {
    width: 100%; border: none; background: transparent; text-align: center;
    font-size: 1.24rem; font-weight: 800; color: #0f172a; line-height: 1.1; padding: 2px 4px; outline: none;
}
.fraction-input::placeholder { color: #94a3b8; font-weight: 700; }
.fraction-note { margin-top: 6px; font-size: 0.76rem; color: var(--frac-text-sub); }

/* ---- Check button ---- */
.btn-check-custom {
    border: 2px solid #c7d2fe; border-radius: 12px;
    background: var(--frac-accent); color: #fff; font-size: 1.2rem;
    padding: 0 18px; min-height: 78px; transition: all 0.2s;
}
.btn-check-custom:hover, .btn-check-custom:focus, .btn-check-custom:active {
    background: var(--frac-accent-dark); color: #fff; border-color: #a5b4fc;
}

/* ---- Correction / hint ---- */
.correction-box {
    background: #f8fafc; border-left: 4px solid #64748b; border-radius: 12px;
    padding: 0.85rem; margin-top: 4px; text-align: left; font-size: 0.95rem; color: #334155;
}
.hint-box {
    background: var(--frac-accent-soft); border-left: 4px solid var(--frac-accent);
    border-radius: 12px; padding: 0.75rem; color: #312e81; font-size: 0.9rem;
}
.shake { animation: shake 0.5s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-5px); }
    75%       { transform: translateX(5px); }
}

/* ---- Feedback badges ---- */
.feedback-badge {
    border-radius: 999px; padding: 8px 12px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.feedback-badge.feedback-empty   { background: #f8fafc; color: #475569; border-color: var(--frac-border); }
.feedback-badge.feedback-correct { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.feedback-badge.feedback-partial { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.feedback-badge.feedback-error   { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* ---- Action buttons (indice / méthode / correction) ----
   Identité visuelle unique pour tout le module fractions : rectangulaire
   (coins legerement arrondis), pas de pilule. Les !important neutralisent
   les classes utilitaires Bootstrap (rounded-pill, btn-outline-*) encore
   presentes dans le HTML genere par certaines pages. */
.action-buttons-wrapper .btn {
    min-height: 42px !important;
    border-radius: 10px !important;
    padding: 0 18px !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    box-shadow: none !important;
    border-width: 1px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.action-buttons-wrapper .btn-hint {
    background: var(--frac-accent-soft) !important; border-color: #c7d2fe !important; color: var(--frac-accent-dark) !important;
}
.action-buttons-wrapper .btn-method,
.action-buttons-wrapper .btn-show-method {
    background: #eef2ff !important; border-color: #c7d2fe !important; color: #4338ca !important;
}
.action-buttons-wrapper .btn-method:hover,
.action-buttons-wrapper .btn-show-method:hover {
    background: #e0e7ff !important; border-color: #a5b4fc !important;
}
.action-buttons-wrapper .btn-giveup,
.action-buttons-wrapper .btn-show-corr {
    background: #fef2f2 !important; border-color: #fecaca !important; color: #b91c1c !important;
}
.action-buttons-wrapper .btn-giveup:hover,
.action-buttons-wrapper .btn-show-corr:hover {
    background: #fee2e2 !important; border-color: #fca5a5 !important;
}

/* ================================================================
   SCORE FOOTER + FAB (desktop uniquement)
   ================================================================ */
.score-footer {
    position: fixed; bottom: 20px; right: 25px;
    min-width: 220px; background: rgba(255,255,255,.97);
    border: 1px solid var(--frac-border); border-radius: 16px;
    padding: 10px 20px; box-shadow: 0 10px 30px rgba(0,0,0,.1);
    display: none; align-items: center; gap: 15px; z-index: 1050;
}
.progress-bar-custom { flex-grow: 1; height: 8px; background: #f1f5f9; border-radius: 10px; overflow: hidden; width: 100px; }
.progress-fill       { height: 100%; background: linear-gradient(90deg, #10b981 0%, #34d399 18%, #818cf8 55%, #6366f1 100%); width: 0%; transition: width 0.3s; }
.score-icon          { font-size: 1.4rem; color: var(--frac-accent); }

.fab-reload {
    position: fixed; bottom: 30px; left: 30px; z-index: 1060;
    width: 60px; height: 60px; border-radius: 20px;
    background: var(--frac-accent); color: #fff; border: none;
    box-shadow: 0 10px 25px rgba(99, 102, 241, .36);
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
    cursor: pointer; transition: all 0.3s; opacity: 0; transform: scale(0.8); pointer-events: none;
}
.fab-reload.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.fab-reload:hover   { background: var(--frac-accent-dark); transform: scale(1.1) rotate(180deg); }

/* ================================================================
   MOBILE HEADER
   ================================================================ */
.modern-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1040;
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(148,163,184,.14);
    padding: 10px 14px calc(10px + var(--safe-top));
    display: flex; align-items: center; gap: 12px; min-height: 68px;
    box-shadow: 0 10px 28px -24px rgba(15,23,42,.4);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.mobile-header-btn {
    width: 40px; height: 40px; border-radius: 14px;
    border: 1px solid rgba(99,102,241,.1); background: rgba(99,102,241,.08);
    color: var(--frac-accent); display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; flex-shrink: 0; transition: transform 0.2s, background 0.2s;
}
.mobile-header-btn:active { transform: scale(0.97); }
.mobile-header-actions { display: flex; align-items: center; gap: 8px; }
.header-progress-container { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.header-score-text {
    font-size: 0.72rem; font-weight: 800; color: #94a3b8;
    text-transform: uppercase; display: flex; justify-content: space-between; letter-spacing: 0.06em;
}
.header-score-value { color: var(--frac-accent); }
.header-progress-bar { height: 9px; background: #e2e8f0; border-radius: 999px; overflow: hidden; width: 100%; margin-top: 4px; }
.header-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 18%, #818cf8 55%, #6366f1 100%);
    width: 0%; transition: width 0.4s; border-radius: inherit;
}

/* ================================================================
   MOBILE SETTINGS SHEET (offcanvas bottom)
   ================================================================ */
.mobile-settings-sheet {
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%) !important;
    border-radius: 24px 24px 0 0; height: auto !important;
    max-height: calc(100dvh - var(--safe-top) - 10px);
    z-index: 10500 !important; border-top: 1px solid #c7d2fe;
    box-shadow: 0 -18px 45px rgba(15,23,42,.16); touch-action: pan-y;
}
.offcanvas-backdrop { z-index: 10490 !important; backdrop-filter: blur(2px); }
.mobile-settings-sheet .offcanvas-body { padding: 0 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
.sheet-grab-area { padding: 8px 0 6px; cursor: grab; }
.sheet-handle    { width: 56px; height: 6px; background: #c7d2fe; border-radius: 100px; margin: 0 auto; }
.mobile-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mobile-sheet-title    { font-size: 1.05rem; font-weight: 800; margin: 0; color: #0f172a; }
.mobile-sheet-subtitle { font-size: 0.8rem; color: var(--frac-text-sub); margin: 2px 0 0; }
.mobile-setting-card {
    background: #fff; border: 1px solid #c7d2fe; border-radius: 18px;
    padding: 14px; margin-bottom: 12px; box-shadow: 0 14px 26px -24px rgba(99,102,241,.3);
}
.mobile-label {
    font-size: 0.7rem; letter-spacing: 0.07em; margin-bottom: 6px;
    display: inline-block; text-transform: uppercase; font-weight: 700; color: var(--frac-text-sub);
}
.input-mobile {
    background: var(--frac-accent-soft); border: 1px solid #c7d2fe;
    padding: 12px; border-radius: 12px; font-size: 0.96rem; width: 100%;
    font-weight: 600; color: #1e293b;
}
.btn-mobile-apply {
    width: 100%; padding: 0.9rem 1rem; border-radius: 14px; border: none;
    background: linear-gradient(135deg, var(--frac-accent) 0%, var(--frac-accent-dark) 100%);
    color: #fff; font-weight: 700; box-shadow: 0 10px 18px -12px rgba(99,102,241,.7);
}

/* ================================================================
   VIRTUAL KEYBOARD
   ================================================================ */
.virtual-keyboard {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: rgba(255,255,255,.96);
    border-top: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 -14px 34px rgba(15,23,42,.14);
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 10px;
    transform: translateY(100%); visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
}
.virtual-keyboard.active { transform: translateY(0); visibility: visible; }
.vk-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vk-target-wrap    { display: flex; flex-direction: column; min-width: 0; }
.vk-target-kicker  { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; color: #94a3b8; }
.vk-target-label   { font-size: 0.98rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
.vk-close-btn {
    width: 36px; height: 36px; border-radius: 12px;
    border: 1px solid #c7d2fe; background: var(--frac-accent-soft);
    color: var(--frac-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vk-fixed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vk-key {
    background: #fff; border: 1px solid var(--frac-border); border-radius: 16px;
    height: 54px; font-size: 1.15rem; font-weight: 700; color: #1e293b;
    box-shadow: 0 12px 20px -18px rgba(15,23,42,.65); touch-action: manipulation;
}
.vk-key:active  { transform: scale(0.97); box-shadow: none; background: #f8fafc; }
.vk-delete      { background: #fee2e2; color: #ef4444; border-color: #fecaca; }
.vk-clear       { background: #e2e8f0; color: #475569; border-color: #cbd5e1; font-size: 1rem; }
.vk-switch      { background: var(--frac-accent-soft); color: var(--frac-accent-dark); border-color: #c7d2fe; }
.vk-submit {
    background: linear-gradient(135deg, var(--frac-accent) 0%, var(--frac-accent-dark) 100%);
    color: #fff; border-color: var(--frac-accent);
    box-shadow: 0 16px 24px -18px rgba(99,102,241,.9);
    font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ================================================================
   MOBILE — overrides
   ================================================================ */
@media (max-width: 991.98px) {
    html, body { height: 100%; overflow: hidden; position: relative; }
    body {
        background:
            radial-gradient(circle at top right, rgba(99,102,241,.12) 0%, transparent 32%),
            linear-gradient(180deg, #f0f1ff 0%, #f8faff 26%, #f8fafc 100%);
    }

    .container.flex-grow-1 {
        padding-top: var(--mobile-header-h) !important;
        padding-left: 14px; padding-right: 14px; padding-bottom: 0 !important;
        height: calc(100dvh - var(--mobile-header-h) - var(--nav-h));
        overflow: hidden;
        transition: height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), padding-top 0.22s ease;
    }
    body.keyboard-open .container.flex-grow-1 {
        padding-top: var(--mobile-header-h) !important;
        height: calc(100dvh - var(--mobile-header-h) - var(--vk-height));
    }

    #exercises { gap: 0 !important; margin: 0 !important; height: 100%; }

    /* Swiper */
    .swiper { width: 100%; height: 100%; padding-bottom: calc(16px + env(safe-area-inset-bottom)); overflow: visible; }
    .swiper-slide {
        width: min(94vw, 560px); height: 100%; overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; opacity: 0.4; transition: opacity 0.28s, transform 0.28s;
        display: flex !important; align-items: flex-start; justify-content: center;
        padding: 0 0 calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box;
    }
    .swiper-slide-active { opacity: 1; z-index: 10; }
    .swiper-slide .exo-card {
        margin: 0 auto; width: 100%; height: auto !important;
        border-radius: 28px; border: 1px solid rgba(255,255,255,.82);
        background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 24px 38px -28px rgba(15,23,42,.32); padding: 1.05rem 0.95rem 0.95rem !important;
    }
    .swiper-slide .exo-card::before {
        height: 4px; background: linear-gradient(90deg, var(--frac-accent) 0%, #818cf8 100%);
    }
    .swiper-slide .exo-card .statement-panel {
        margin-bottom: 0.85rem !important; border-radius: 20px;
    }
    body.keyboard-open .swiper { padding-bottom: 8px; }
    body.keyboard-open .swiper-slide { opacity: 1; align-items: flex-start; }
    body.keyboard-open .swiper-slide .exo-card {
        max-height: calc(100dvh - var(--mobile-header-h) - var(--vk-height) - 16px); overflow-y: auto;
    }
    .swiper-pagination { bottom: 0 !important; }
    .swiper-pagination-bullet { background: #cbd5e1; opacity: 1; }
    .swiper-pagination-bullet-active { background: var(--frac-accent); width: 18px; border-radius: 10px; }

    /* Fraction stack mobile */
    .fraction-stack { width: min(216px, 56vw); min-width: 140px; border-color: #c7d2fe; }
    .fraction-stack:focus-within, .fraction-stack.has-active-field {
        border-color: var(--frac-accent); box-shadow: 0 0 0 5px var(--frac-accent-wash);
    }
    .fraction-note {
        margin-top: 10px; padding: 10px 12px; border-radius: 14px;
        background: var(--frac-accent-soft); border: 1px solid #c7d2fe; font-size: 0.78rem; text-align: center;
    }
    .btn-check-custom {
        min-height: 84px; min-width: 72px; padding: 0 16px; border-radius: 20px;
        border-color: #c7d2fe;
        background: linear-gradient(135deg, var(--frac-accent) 0%, var(--frac-accent-dark) 100%);
        box-shadow: 0 16px 24px -20px rgba(99,102,241,.9);
    }
    .correction-box, .hint-box { border-radius: 18px; padding: 0.9rem 0.95rem; }
    .start-card {
        margin: 0.8rem auto 0.9rem; padding: 1.45rem 1rem 1rem; border-radius: 28px;
        background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,.8); box-shadow: 0 24px 36px -28px rgba(15,23,42,.32);
    }

    .score-footer { display: none !important; }
    .fab-reload   { display: none !important; }

    /* ---- Bottom nav (exercise pages) ---- */
    .bottom-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 1040;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 6px 8px max(8px, env(safe-area-inset-bottom));
        background: rgba(255,255,255,.97);
        border-top: 1px solid rgba(148,163,184,.18);
        box-shadow: 0 -8px 24px -16px rgba(15,23,42,.18);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
    .bottom-nav .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 7px 4px;
        border-radius: 12px;
        text-decoration: none;
        color: #94a3b8;
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .01em;
        transition: color .2s, background .2s;
    }
    .bottom-nav .nav-item i { font-size: 1.18rem; color: inherit; }
    .bottom-nav .nav-item.active { color: var(--frac-accent); background: rgba(99,102,241,.08); }
    .bottom-nav .nav-item:active { transform: scale(.97); }
}

/* ---------------------------------------------------------------
   Panel latéral desktop — Indice / Correction à droite de l'énoncé
   --------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Le container s'anime pour s'élargir quand le panel s'ouvre */
    #exercises {
        transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Réduction du margin-top pour que la carte ne soit pas trop basse */
    body #exercises { margin-top: 0.75rem !important; }

    /* Le host (.col) devient une ligne flex : carte + panel côte à côte */
    .col.card-appear {
        display: flex !important;
        align-items: flex-start;
        gap: 1.5rem;
    }
    /* La carte remplit l'espace disponible */
    .col.card-appear .exo-card {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Masquage des cartes non-actives */
    .col.card-appear.desk-hidden { display: none !important; }

    /* Panel : caché par défaut (max-width: 0), s'anime à l'ouverture */
    .exo-side-panel {
        flex: 0 0 auto;
        width: 340px;
        max-width: 0;
        overflow: hidden;
        opacity: 0;
        border-radius: 16px;
        align-self: flex-start;
        transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.22s ease 0.06s;
    }
    .col.card-appear.side-open .exo-side-panel {
        max-width: 340px;
        opacity: 1;
    }

    /* Contenu intérieur — largeur fixe pour éviter le reflow pendant l'animation */
    .exo-side-inner {
        width: 340px;
        padding: 1.25rem;
        background: #f8fafc;
        border: 1.5px solid #e2e8f0;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        box-sizing: border-box;
    }

    .exo-side-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .exo-side-title {
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #94a3b8;
    }
    .exo-side-close {
        width: 26px; height: 26px;
        display: flex; align-items: center; justify-content: center;
        border: none;
        background: #e2e8f0;
        border-radius: 50%;
        color: #64748b;
        font-size: 0.7rem;
        cursor: pointer;
        transition: background 0.12s;
        padding: 0;
    }
    .exo-side-close:hover { background: #cbd5e1; color: #1e293b; }

    .exo-side-body {
        font-size: 0.9rem;
        color: #1e293b;
        line-height: 1.6;
        flex: 1;
    }
    .exo-side-body .hint-box {
        background: #fffbeb;
        border: 1.5px solid #fde68a;
        border-radius: 10px;
        padding: 0.8rem 1rem;
        color: #78350f;
        font-size: 0.88rem;
    }
    .exo-side-body .correction-box {
        background: #fff;
        border: 1.5px solid #fecaca;
        border-radius: 10px;
        padding: 0.8rem 1rem;
    }
    .exo-side-body .math-correction {
        font-size: 0.88rem;
        overflow-x: auto;
    }

    /* Navigation précédent / suivant — #v2Nav — styles déjà en PHP, on ajuste */
    #v2Nav {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Sur écrans larges, le container s'étend pour révéler le panel sans écraser la carte */
@media (min-width: 1200px) {
    #exercises:has(.col.card-appear:not(.desk-hidden).side-open) {
        max-width: 1060px !important;
    }
    #exercises:has(.col.card-appear:not(.desk-hidden).side-open) ~ #v2Nav {
        max-width: 1060px;
    }
}