@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700;900&family=Lato:wght@300;400;700&family=Cinzel:wght@600&family=Merriweather:wght@300;400;700&family=Oswald:wght@400;600&family=Bebas+Neue&family=Abril+Fatface&family=Crimson+Text:wght@400;600&family=Nunito:wght@400;600;700&family=Source+Serif+Pro:wght@300;400;600&family=Open+Sans:wght@300;400;600;700&display=swap');

/* ── CSS VARIABLES (overridden by theme inline style) ── */
.qm-story-wrap {
    --qm-bg:        #0f0e17;
    --qm-surface:   #1a1928;
    --qm-accent:    #e8c547;
    --qm-accent2:   #ff6b6b;
    --qm-text:      #fffffe;
    --qm-text-mute: #a7a9be;
    --qm-radius:    14px;
    --qm-font-head: 'Playfair Display', Georgia, serif;
    --qm-font-body: 'Lato', system-ui, sans-serif;
}

/* ── WRAPPER ── */
.qm-story-wrap {
    background: var(--qm-bg);
    width: 100%;
    font-family: var(--qm-font-body);
    color: var(--qm-text);
    padding: 0 0 40px;
    box-sizing: border-box;
}

/* ── STAGE ── */
.qm-stage {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 16px;
    box-sizing: border-box;
}
@media (max-width: 480px) {
    .qm-stage { padding: 20px 10px; }
}

/* ── LOADER INITIAL ── */
.qm-loader-init {
    display: flex; justify-content: center; align-items: center;
    min-height: 300px;
}
.qm-spin {
    display: inline-block; width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: var(--qm-accent);
    border-radius: 50%;
    animation: qm-spin .8s linear infinite;
}
@keyframes qm-spin { to { transform: rotate(360deg); } }

/* ── SCORE BAR ── */
.qm-score-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 32px; padding: 10px 18px;
    background: rgba(255,255,255,.05);
    border-radius: var(--qm-radius);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 13px; color: var(--qm-text-mute);
}
.qm-score-val {
    color: var(--qm-accent); font-weight: 700; font-size: 16px;
    transition: transform .3s;
}
.qm-score-val.pulse { animation: qm-pulse .4s ease; }
@keyframes qm-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

/* ── NODE CARD ── */
.qm-node-card {
    background: var(--qm-surface);
    border-radius: var(--qm-radius);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.4);
    animation: qm-enter .45s cubic-bezier(.22,.61,.36,1);
}
@keyframes qm-enter {
    from { opacity:0; transform: translateY(24px) scale(.98); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

/* ── NODE CONTENT ── */
.qm-node-content {
    padding: 32px clamp(16px, 5%, 40px) 24px;
    box-sizing: border-box;
    width: 100%;
}
@media (max-width:480px) { .qm-node-content { padding: 20px 16px 16px; } }

.qm-node-title {
    font-family: var(--qm-font-head);
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 700; line-height: 1.2;
    color: var(--qm-text);
    margin: 0 0 20px;
}

.qm-node-body {
    font-size: 16px; line-height: 1.8;
    color: var(--qm-text-mute);
    margin-bottom: 24px;
    white-space: pre-wrap;   /* conserve les retours de ligne */
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* Si le contenu vient de l'éditeur WP (avec balises <p>), désactiver pre-wrap */
.qm-node-body p,
.qm-node-body ul,
.qm-node-body ol,
.qm-node-body blockquote { white-space: normal; }
.qm-node-body p  { margin: 0 0 14px; }
.qm-node-body h2,.qm-node-body h3,.qm-node-body h4 {
    font-family: var(--qm-font-head); color: var(--qm-text); white-space: normal;
}
.qm-node-body a { color: var(--qm-accent); }
.qm-node-body img { max-width:100%; height:auto; border-radius: calc(var(--qm-radius)/2); display:block; }

/* ── MÉDIAS ── */
.qm-media-block { margin: 20px 0; }
.qm-media-block figure { margin: 0 0 12px; }
.qm-media-block figure img {
    width: 100%; border-radius: var(--qm-radius);
    display: block;
}
.qm-media-block figcaption {
    font-size: 12px; color: var(--qm-text-mute);
    text-align: center; margin-top: 6px; font-style: italic;
}
.qm-media-block video,
.qm-media-block audio {
    width: 100%; border-radius: var(--qm-radius);
    display: block; margin-bottom: 12px;
    background: #000;
}
.qm-media-block audio { background: rgba(255,255,255,.05); }

/* ── DIVIDER ── */
.qm-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.08);
    margin: 8px 0 0;
}

/* ── CHOICES ── */
.qm-choices-wrap {
    padding: 0 clamp(16px, 5%, 40px) 32px;
    box-sizing: border-box;
    width: 100%;
}
@media (max-width:480px) { .qm-choices-wrap { padding: 0 16px 24px; } }

.qm-choices-label {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--qm-text-mute);
    margin-bottom: 14px;
}

.qm-choices-list {
    display: flex; flex-direction: column; gap: 10px;
}

.qm-choice-btn {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--qm-radius);
    padding: 14px 18px 14px 18px;
    font-family: var(--qm-font-body);
    font-size: 15px; font-weight: 400;
    color: var(--qm-text);
    text-align: left; cursor: pointer;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    position: relative;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.qm-choice-btn::before {
    content: '➤';
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--qm-accent); opacity: 0;
    transition: opacity .2s, left .25s;
    font-size: 12px;
}
.qm-choice-btn:hover {
    background: rgba(255,255,255,.08);
    border-color: var(--qm-accent);
    color: var(--qm-accent);
    padding-left: 36px;
}
.qm-choice-btn:hover::before { opacity:1; left:14px; }
.qm-choice-btn:active { transform: scale(.99); }
.qm-choice-btn.chosen {
    background: var(--qm-accent);
    border-color: var(--qm-accent);
    color: #1a1a2e;
    font-weight: 700;
}
.qm-choice-btn:disabled { opacity:.5; cursor:default; pointer-events:none; }

/* Media dans un choix */
.qm-choice-media { margin-bottom: 10px; }
.qm-choice-media img {
    max-width: 100%; max-height: 120px;
    border-radius: calc(var(--qm-radius)/2);
    display: block;
}
.qm-choice-media audio,
.qm-choice-media video {
    width: 100%; margin-top: 6px;
    border-radius: calc(var(--qm-radius)/2);
}

/* ── RÉSULTAT FINAL ── */
.qm-result-card {
    text-align: center; padding: 48px 40px;
}
.qm-result-icon { font-size: 64px; animation: qm-bounce .7s ease; margin-bottom: 8px; }
@keyframes qm-bounce {
    0%,100% { transform:translateY(0); }
    40%      { transform:translateY(-18px); }
    70%      { transform:translateY(-6px); }
}
.qm-result-score-display {
    font-size: 14px; color: var(--qm-text-mute);
    margin-bottom: 20px;
}
.qm-result-score-display strong {
    color: var(--qm-accent); font-size: 22px;
}
.qm-result-title {
    font-family: var(--qm-font-head);
    font-size: clamp(26px, 5vw, 42px); font-weight: 700;
    color: var(--qm-text); margin: 0 0 20px; line-height: 1.2;
}
.qm-result-body {
    font-size: 17px; line-height: 1.8;
    color: var(--qm-text-mute);
    max-width: 560px; margin: 0 auto 32px;
}
.qm-result-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--qm-accent);
    color: #1a1a2e; text-decoration: none;
    padding: 16px 32px; border-radius: var(--qm-radius);
    font-weight: 700; font-size: 16px;
    transition: all .2s;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    margin-bottom: 24px;
}
.qm-result-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.qm-restart-btn {
    display: block; margin: 0 auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--qm-radius);
    padding: 10px 22px;
    font-family: var(--qm-font-body);
    font-size: 14px; color: var(--qm-text-mute);
    cursor: pointer; transition: all .2s;
}
.qm-restart-btn:hover { border-color: var(--qm-accent2); color: var(--qm-accent2); }

/* ── TRANSITION OVERLAY ── */
.qm-transition {
    position: fixed; inset: 0;
    background: var(--qm-bg);
    z-index: 9999; pointer-events: none;
    opacity: 0; transition: opacity .3s;
}
.qm-transition.active { opacity: 1; pointer-events: all; }

/* ── ICÔNE IMAGE (résultat) ── */
.qm-result-icon-img img {
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    margin: 0 auto 8px;
    display: block;
    animation: qm-bounce .7s ease;
}
.qm-icon-img {
    max-width: 28px;
    max-height: 28px;
    vertical-align: middle;
    object-fit: contain;
}
.qm-end-label {
    color: var(--qm-text-mute);
    font-size: 14px;
    margin: 0;
}

/* ── ERROR ── */
.qm-error-msg {
    background: rgba(239,68,68,.1); border: 1px solid #ef4444;
    border-radius: var(--qm-radius); padding: 16px 20px;
    color: #fca5a5; font-size: 14px; margin-top: 20px;
}

/* ══ GROUPE ════════════════════════════════════════════════════════════ */

/* ── Tableau de bord ── */
.qmg-dashboard { padding: 8px 0; }

.qmg-intro {
    font-size: 16px; line-height: 1.7;
    color: var(--qm-text-mute);
    margin-bottom: 24px;
    padding: 20px 24px;
    background: rgba(255,255,255,.04);
    border-radius: var(--qm-radius);
    border-left: 3px solid var(--qm-accent);
}

.qmg-stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.qmg-story-card {
    background: rgba(255,255,255,.04);
    border: 2px solid rgba(255,255,255,.1);
    border-radius: var(--qm-radius);
    padding: 20px 16px;
    font-family: var(--qm-font-body);
    color: var(--qm-text);
    cursor: pointer;
    text-align: center;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.qmg-story-card:hover {
    border-color: var(--qm-accent);
    background: rgba(255,255,255,.08);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.qmg-story-card.qmg-done {
    border-color: #10b981;
    background: rgba(16,185,129,.08);
}
.qmg-story-card-status {
    font-size: 28px; line-height: 1;
}
.qmg-story-card-title {
    font-size: 15px; font-weight: 600; line-height: 1.3;
    color: var(--qm-text);
}
.qmg-story-card-score {
    font-size: 13px; font-weight: 700;
    color: #10b981;
    background: rgba(16,185,129,.15);
    padding: 2px 10px; border-radius: 20px;
}

.qmg-remaining {
    text-align: center; font-size: 13px;
    color: var(--qm-text-mute); margin: 8px 0 0;
}

.qmg-final-wrap {
    text-align: center; margin-top: 16px;
}
.qmg-final-btn {
    background: linear-gradient(135deg, var(--qm-accent), var(--qm-accent2));
    color: #1a1a2e;
    border: none; border-radius: var(--qm-radius);
    padding: 16px 36px;
    font-family: var(--qm-font-body);
    font-size: 17px; font-weight: 800;
    cursor: pointer;
    transition: all .25s; box-shadow: 0 4px 20px rgba(0,0,0,.3);
    animation: qm-pulse-soft 2s ease infinite;
}
@keyframes qm-pulse-soft {
    0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.3); }
    50%      { box-shadow: 0 6px 30px rgba(232,197,71,.4); }
}
.qmg-final-btn:hover { transform: translateY(-2px) scale(1.02); }

/* ── Barre retour ── */
.qmg-back-bar {
    padding: 12px 24px 0;
}
.qmg-back-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    padding: 6px 14px;
    font-family: var(--qm-font-body);
    font-size: 13px; color: var(--qm-text-mute);
    cursor: pointer; transition: all .2s;
}
.qmg-back-btn:hover { border-color: var(--qm-accent); color: var(--qm-accent); }

/* ── Actions résultat parcours ── */
.qmg-result-actions {
    display: flex; gap: 12px; justify-content: center;
    flex-wrap: wrap; margin-top: 20px;
}
.qmg-result-actions .qm-result-cta { margin-bottom: 0; }

/* ── Résultats finaux groupe ── */
.qmg-final-results .qm-result-card { text-align: left; }
.qmg-final-results .qm-result-icon,
.qmg-final-results .qm-result-title,
.qmg-final-results .qm-result-score-display { text-align: center; }

.qmg-per-story-results {
    display: flex; flex-direction: column; gap: 12px;
    margin: 24px 0; max-width: 640px; margin-left: auto; margin-right: auto;
}

.qmg-story-result {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--qm-radius);
    padding: 16px 20px;
}
.qmg-story-result-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; gap: 10px;
}
.qmg-story-result-title {
    font-family: var(--qm-font-head);
    font-size: 17px; font-weight: 700; color: var(--qm-text);
}
.qmg-story-feedback {
    font-size: 14px; line-height: 1.6; color: var(--qm-text-mute);
}
.qmg-story-feedback p { margin: 0 0 6px; }
.qmg-feedback-score {
    color: var(--qm-accent);
    background: rgba(232,197,71,.08);
    border-left: 2px solid var(--qm-accent);
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    margin-top: 8px;
}

.qmg-global-result {
    max-width: 640px; margin: 0 auto 24px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--qm-accent);
    border-radius: var(--qm-radius);
    padding: 24px;
}
.qmg-global-title {
    font-family: var(--qm-font-head);
    font-size: 22px; font-weight: 700;
    color: var(--qm-accent); margin: 0 0 14px;
    text-align: center;
}
.qmg-restart-all-btn {
    display: block; margin: 0 auto;
}
.qmg-final-icon-img {
    max-width: 100px; max-height: 100px;
    object-fit: contain; display: block;
    margin: 0 auto 8px;
}

/* ── Scores section admin ── */
.qm-sf-list { display: flex; flex-direction: column; gap: 6px; }
.qm-sf-row  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Auto-navigation indicator ── */
.qmg-auto-notice {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: var(--qm-accent);
    padding: 10px;
    animation: qm-pulse-soft 1s ease infinite;
}

/* ══ BARRE DE PROGRESSION ═══════════════════════════════════════════════ */
.qm-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 0 2px;
}
.qm-progress-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,.12);
    border-radius: 20px;
    overflow: hidden;
}
.qm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--qm-accent), var(--qm-accent2));
    border-radius: 20px;
    transition: width .5s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}
.qm-progress-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--qm-text-mute);
    white-space: nowrap;
    min-width: 36px;
    text-align: right;
}