/* =========================================================================
   Quiz Coucoucircus — habillage v2
   Palette : accent vert #65ff9f, fonds sombres #1a1a1a / #1f1f1f
   ========================================================================= */
:root {
    --quiz-accent: #65ff9f;
    --quiz-accent-dim: #3fbf78;
    --quiz-bg: #141414;
    --quiz-panel: #1f1f1f;
    --quiz-panel-2: #262626;
    --quiz-border: #333;
    --quiz-text: #f2f2f2;
    --quiz-muted: #9aa0a6;
    --quiz-good: #65ff9f;
    --quiz-bad: #ff5d6c;
    --quiz-radius: 14px;
}

.quiz-body {
    background: var(--quiz-bg);
    color: var(--quiz-text);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    min-height: 100vh;
}

/* ---- En-tête ---- */
.quiz-header {
    background: var(--quiz-panel);
    border-bottom: 1px solid var(--quiz-border);
    padding: 14px 16px 10px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.quiz-header-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    max-width: 820px;
    margin: 0 auto;
}
.quiz-title {
    margin: 0;
    font-size: 22px;
    color: var(--quiz-accent);
    letter-spacing: .3px;
}
.quiz-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.quiz-scoreboard {
    max-width: 820px;
    margin: 10px auto 0;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 15px;
    color: var(--quiz-muted);
}
.quiz-scoreboard b { color: var(--quiz-text); font-size: 18px; }
.quiz-streak b { color: var(--quiz-accent); }
.quiz-best { margin-left: auto; }

/* ---- Boutons génériques ---- */
.quiz-btn {
    font: inherit;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    cursor: pointer;
    transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
}
.quiz-btn:active { transform: translateY(1px); }
.quiz-btn-ghost {
    background: var(--quiz-panel-2);
    color: var(--quiz-text);
    border: 1px solid var(--quiz-border);
}
.quiz-btn-ghost:hover { background: #303030; }
.quiz-btn-primary {
    background: var(--quiz-accent);
    color: #05210f;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(101, 255, 159, .25);
}
.quiz-btn-primary:hover { background: #7bffad; }

/* ---- Carte question ---- */
.quiz-main { padding: 26px 16px 80px; }
.quiz-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--quiz-panel);
    border: 1px solid var(--quiz-border);
    border-radius: var(--quiz-radius);
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.quiz-intro {
    min-height: 18px;
    margin: 0 0 6px;
    color: var(--quiz-accent-dim);
    font-style: italic;
    font-size: 14px;
}
.quiz-question {
    margin: 0 0 22px;
    font-size: 22px;
    line-height: 1.35;
    color: var(--quiz-text);
}
.quiz-lyrics { color: var(--quiz-accent); font-style: italic; }
.quiz-media-img {
    max-width: 100%;
    max-height: 300px;
    margin-top: 12px;
    border-radius: 10px;
    border: 1px solid var(--quiz-border);
}

/* ---- Choix de réponse ---- */
.quiz-choices { display: grid; gap: 12px; }
@media (min-width: 560px) {
    .quiz-choices { grid-template-columns: 1fr 1fr; }
    .quiz-choices-tf { grid-template-columns: 1fr 1fr; max-width: 340px; margin: 0 auto; }
}
.quiz-choice {
    font: inherit;
    font-size: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--quiz-border);
    background: var(--quiz-panel-2);
    color: var(--quiz-text);
    cursor: pointer;
    text-align: center;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.quiz-choice:hover:not(:disabled) { background: #313131; border-color: #4a4a4a; }
.quiz-choice:active { transform: translateY(1px); }
.quiz-choice:disabled { cursor: default; opacity: .95; }
.quiz-choice.is-correct {
    background: rgba(101, 255, 159, .16);
    border-color: var(--quiz-good);
    color: var(--quiz-good);
    font-weight: 700;
}
.quiz-choice.is-correct::after { content: " ✓"; }
.quiz-choice.is-wrong {
    background: rgba(255, 93, 108, .16);
    border-color: var(--quiz-bad);
    color: var(--quiz-bad);
}
.quiz-choice.is-wrong::after { content: " ✗"; }

/* ---- Retour / feedback ---- */
.quiz-feedback {
    min-height: 26px;
    margin: 20px 0 4px;
    font-size: 17px;
    font-weight: 600;
}
.quiz-feedback a { color: var(--quiz-accent); text-decoration: underline; }
.quiz-feedback.is-correct { color: var(--quiz-good); }
.quiz-feedback.is-wrong { color: var(--quiz-bad); }
.quiz-react { opacity: .95; }
.quiz-streak-msg { margin-top: 6px; font-size: 14px; color: var(--quiz-accent); font-weight: 700; }
#quiz-next { margin-top: 18px; }

/* ---- Panneau d'options ---- */
.quiz-options {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: min(300px, calc(100vw - 32px));
    background: var(--quiz-panel);
    border: 1px solid var(--quiz-accent);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    z-index: 40;
    overflow: hidden;
}
.quiz-options-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--quiz-accent);
    color: #05210f;
    font-weight: 700;
    padding: 10px 14px;
}
.quiz-options-close {
    background: none; border: none; color: #05210f;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.quiz-options-body { padding: 14px; max-height: min(60vh, 420px); overflow-y: auto; }
.quiz-options-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--quiz-muted);
    margin: 4px 0 8px;
}
.quiz-seg { display: flex; gap: 6px; margin-bottom: 16px; }
.quiz-seg-btn {
    flex: 1;
    font: inherit;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid var(--quiz-border);
    background: var(--quiz-panel-2);
    color: var(--quiz-text);
    cursor: pointer;
}
.quiz-seg-btn.active {
    background: var(--quiz-accent);
    color: #05210f;
    border-color: var(--quiz-accent);
    font-weight: 700;
}
.quiz-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.quiz-toggle input { accent-color: var(--quiz-accent); width: 16px; height: 16px; }

/* ---- Retour en haut ---- */
.quiz-scrolltop {
    position: fixed;
    bottom: 16px;
    left: 16px;
    width: 42px; height: 42px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--quiz-panel-2);
    color: var(--quiz-text);
    font-size: 20px;
    cursor: pointer;
    z-index: 40;
}
.quiz-scrolltop:hover { background: var(--quiz-accent); color: #05210f; }

@media (max-width: 480px) {
    .quiz-title { font-size: 18px; }
    .quiz-question { font-size: 19px; }
    .quiz-card { padding: 22px 16px; }
}