/* ── Hero ── */
.hero-exercices {
    background: linear-gradient(rgba(0,0,0,0.68), rgba(0,0,0,0.68)),
                url('../img/quiz.jpg') center/cover no-repeat;
    padding: clamp(60px,10vw,100px) 0; text-align:center;
}
.hero-exercices h1 { font-size:clamp(1.8rem,5vw,3.2rem); font-weight:700; color:#fff; }
.hero-exercices p  { font-size:clamp(1rem,2vw,1.2rem); color:#cbd5e1; }

.exo-theme-label {
    font-size:.8rem; color:#64748b; margin:-10px 0 16px;
    display:flex; align-items:center; gap:6px;
}
.exo-theme-label::before {
    content:''; display:inline-block; width:8px; height:8px;
    border-radius:50%; background:#f87171;
}
html.theme-light .exo-theme-label { color:#94a3b8; }

/* ── Barre de progression ── */
.exo-progress-wrap {
    display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.exo-progress-bar {
    flex:1; height:8px; background:rgba(255,255,255,.1);
    border-radius:20px; overflow:hidden;
}
.exo-progress-fill {
    height:100%; background:linear-gradient(90deg,#dc2626,#f87171);
    border-radius:20px; transition:width .35s ease;
}
.exo-progress-label {
    font-size:.78rem; color:#94a3b8; white-space:nowrap; font-weight:600;
}
html.theme-light .exo-progress-bar { background:rgba(0,0,0,.1); }

/* ── Écran de fin ── */
.exo-fin {
    display:none; text-align:center;
    border-top:1px solid rgba(255,255,255,.08);
    padding:28px 16px 8px; margin-top:20px;
    animation: fadeInUp .4s ease both;
}
.exo-fin.visible { display:block; }

@keyframes fadeInUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}

.exo-fin-header {
    font-size:1.5rem; font-weight:800; color:#f1f5f9; margin-bottom:4px;
}
.exo-fin-emoji {
    font-size:3rem; line-height:1; margin-bottom:8px;
    display:block;
}

/* Cercle de score */
.exo-fin-circle {
    width:120px; height:120px; border-radius:50%;
    background:conic-gradient(#f87171 0% var(--pct), rgba(255,255,255,.08) var(--pct) 100%);
    display:flex; align-items:center; justify-content:center;
    margin:20px auto 16px; position:relative;
}
.exo-fin-circle::before {
    content:''; position:absolute; inset:10px;
    border-radius:50%; background:#1e293b;
}
.exo-fin-circle-text {
    position:relative; z-index:1; font-size:1.5rem;
    font-weight:900; color:#f87171; line-height:1;
}
.exo-fin-circle-sub {
    position:relative; z-index:1; font-size:.7rem;
    color:#94a3b8; display:block; margin-top:2px;
}

/* Étoiles */
.exo-fin-stars {
    font-size:1.8rem; letter-spacing:4px; margin-bottom:6px;
}
.star-on  { color:#fbbf24; }
.star-off { color:rgba(255,255,255,.15); }

/* Résumé chiffré */
.exo-fin-detail {
    display:flex; justify-content:center; gap:32px;
    margin:16px 0 20px; flex-wrap:wrap;
}
.fin-stat {
    display:flex; flex-direction:column; align-items:center; gap:4px;
}
.fin-stat-val {
    font-size:1.6rem; font-weight:900; line-height:1;
}
.fin-stat-val.correct  { color:#86efac; }
.fin-stat-val.wrong    { color:#fca5a5; }
.fin-stat-val.pct      { color:#f87171; }
.fin-stat-label { font-size:.72rem; color:#64748b; text-transform:uppercase; letter-spacing:.05em; }

.exo-fin-message {
    color:#94a3b8; font-size:.95rem; font-style:italic; margin-bottom:24px;
}

.btn-recommencer {
    background:#dc2626; border:none; border-radius:12px; color:#fff;
    font-size:.95rem; font-weight:700; padding:11px 28px; cursor:pointer;
    transition:background .18s;
}
.btn-recommencer:hover { background:#b91c1c; }

/* light mode */
html.theme-light .exo-fin { border-color:#e2e8f0; }
html.theme-light .exo-fin-header { color:#1e293b; }
html.theme-light .exo-fin-circle::before { background:#fff; }
html.theme-light .star-off { color:rgba(0,0,0,.1); }

/* ── Sections de niveau ── */
.niveau-section { margin-bottom:64px; }
.niveau-titre {
    font-size:clamp(1.1rem,2.5vw,1.5rem); font-weight:700;
    border-left:5px solid #dc2626; padding-left:16px;
    margin:0 0 28px; color:#fff; display:flex; align-items:center; gap:12px;
}
.badge-niveau {
    font-size:.72rem; padding:4px 12px; border-radius:20px; font-weight:700;
}
.badge-facile      { background:#16a34a; color:#fff; }
.badge-intermediaire { background:#d97706; color:#fff; }
.badge-difficile   { background:#dc2626; color:#fff; }

/* ── Carte d'exercice ── */
.exo-card {
    background:#1e293b; border-radius:18px; padding:28px 24px;
    border:1px solid rgba(255,255,255,.07);
    margin-bottom:24px;
}
.exo-card h3 {
    font-size:1rem; font-weight:700; color:#f87171;
    margin-bottom:18px; display:flex; align-items:center; gap:8px;
}
.exo-question {
    font-size:clamp(1.6rem,5vw,3rem); font-weight:700; color:#f1f5f9;
    text-align:center; margin:16px 0 24px;
    font-family:'Noto Sans JP', sans-serif;
    min-height:80px; display:flex; align-items:center; justify-content:center;
}
.exo-options {
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px;
}
@media(max-width:500px){ .exo-options { grid-template-columns:1fr; } }

.btn-option {
    background:#0f172a; border:2px solid rgba(255,255,255,.12);
    border-radius:12px; color:#f1f5f9; padding:12px 16px;
    font-size:.95rem; cursor:pointer; transition:all .18s;
    text-align:center; font-family:'Noto Sans JP', sans-serif;
}
.btn-option:hover:not(:disabled) { border-color:#f87171; color:#f87171; background:#1e293b; }
.btn-option.correct  { border-color:#16a34a !important; background:#14532d !important; color:#86efac !important; }
.btn-option.wrong    { border-color:#dc2626 !important; background:#450a0a !important; color:#fca5a5 !important; }
.btn-option:disabled { cursor:default; opacity:.8; }

/* ── Feedback ── */
.exo-feedback {
    text-align:center; font-size:.95rem; font-weight:600;
    min-height:28px; margin-bottom:12px;
}
.exo-feedback.ok  { color:#86efac; }
.exo-feedback.ko  { color:#fca5a5; }

/* ── Score ── */
.exo-score {
    display:flex; align-items:center; justify-content:space-between;
    font-size:.85rem; color:#94a3b8; margin-top:12px; flex-wrap:wrap; gap:8px;
}
.score-val { color:#f87171; font-weight:700; font-size:1rem; }

/* ── Bouton rejouer ── */
.btn-rejouer {
    background:rgba(220,38,38,.18); border:1px solid rgba(220,38,38,.45);
    border-radius:20px; color:#f87171; font-size:.85rem; font-weight:600;
    padding:7px 20px; cursor:pointer; transition:background .18s;
}
.btn-rejouer:hover { background:rgba(220,38,38,.32); }

/* ── Phrases à trous ── */
.trou-phrase {
    font-size:clamp(1rem,2.5vw,1.3rem); color:#f1f5f9; text-align:center;
    margin:12px 0 20px; font-family:'Noto Sans JP', sans-serif; line-height:2;
}
.trou-input {
    background:#0f172a; border:2px solid rgba(255,255,255,.2);
    border-radius:8px; color:#f1f5f9; padding:6px 14px;
    font-size:1.1rem; text-align:center; width:90px;
    font-family:'Noto Sans JP', sans-serif; outline:none;
    transition:border-color .18s;
}
.trou-input:focus { border-color:#f87171; }
.trou-input.correct { border-color:#16a34a; background:#14532d; color:#86efac; }
.trou-input.wrong   { border-color:#dc2626; background:#450a0a; color:#fca5a5; }

.trou-choix { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:16px; }
.btn-trou {
    background:#0f172a; border:2px solid rgba(255,255,255,.15);
    border-radius:10px; color:#f87171; padding:8px 18px;
    font-size:1rem; cursor:pointer; font-family:'Noto Sans JP', sans-serif;
    transition:all .18s;
}
.btn-trou:hover:not(:disabled) { border-color:#f87171; background:#1e293b; }
.btn-trou:disabled { opacity:.4; cursor:default; }

/* ── Audio ── */
.audio-btn-exo {
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:rgba(220,38,38,.18); border:1px solid rgba(220,38,38,.45);
    border-radius:30px; color:#f87171; font-size:1rem; font-weight:600;
    padding:12px 32px; cursor:pointer; margin:0 auto 24px;
    transition:background .18s;
}
.audio-btn-exo:hover { background:rgba(220,38,38,.32); }
.audio-btn-exo i { font-size:1.4rem; }

/* ── Reconstituer phrase (drag) ── */
.mots-source, .mots-cible {
    display:flex; flex-wrap:wrap; gap:10px;
    min-height:56px; padding:10px; border-radius:12px;
    margin-bottom:12px;
}
.mots-source { background:#0f172a; border:2px dashed rgba(255,255,255,.12); }
.mots-cible  { background:#0f172a; border:2px dashed rgba(248,113,113,.3); justify-content:center; }
.mot-pill {
    background:#1e293b; border:1.5px solid rgba(248,113,113,.4);
    border-radius:8px; color:#f1f5f9; padding:8px 14px;
    font-size:.95rem; cursor:pointer; font-family:'Noto Sans JP', sans-serif;
    transition:all .15s; user-select:none;
}
.mot-pill:hover { border-color:#f87171; color:#f87171; }
.mot-pill.placed { background:#1e293b; border-color:#f87171; }
.label-zone { font-size:.78rem; color:#64748b; margin-bottom:4px; }

.btn-valider {
    background:#dc2626; border:none; border-radius:12px; color:#fff;
    font-size:.95rem; font-weight:700; padding:11px 28px; cursor:pointer;
    transition:background .18s; margin-top:4px;
}
.btn-valider:hover { background:#b91c1c; }

/* ── Light mode ── */
html.theme-light .exo-card       { background:#fff; border-color:#e2e8f0; }
html.theme-light .exo-question   { color:#1e293b; }
html.theme-light .btn-option     { background:#f8fafc; border-color:#cbd5e1; color:#1e293b; }
html.theme-light .btn-option:hover:not(:disabled) { border-color:#dc2626; color:#dc2626; background:#fff; }
html.theme-light .trou-input     { background:#f8fafc; border-color:#cbd5e1; color:#1e293b; }
html.theme-light .btn-trou       { background:#f8fafc; border-color:#cbd5e1; color:#dc2626; }
html.theme-light .mots-source,
html.theme-light .mots-cible     { background:#f8fafc; }
html.theme-light .mot-pill       { background:#fff; color:#1e293b; }
html.theme-light .niveau-titre   { color:#1e293b; }
html.theme-light .exo-progress-bar { background:rgba(0,0,0,.1); }
html.theme-light .exo-fin         { color:#1e293b; }
html.theme-light .exo-fin-message { color:#64748b; }