/* ============================================================
   Quizzz Music — Rital2 / chat-real-time
   Mise en page compacte calquée sur le format validé chez Alain.
   Tout est strictement ciblé par body.quizzz-music-mode.
   ============================================================ */
#quizzz-music-panel {
    display: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    color: #f7f8ff;
    font-family: Arial, Helvetica, sans-serif;
}

body.quizzz-music-mode #quizzz-music-panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

body.quizzz-music-mode #messages,
body.quizzz-music-mode #camera-container,
body.quizzz-music-mode #other-cameras-container,
body.quizzz-music-mode #video-container,
body.quizzz-music-mode #karaotube-panel,
body.quizzz-music-mode #quiz-gamebar {
    display: none !important;
}

body.quizzz-music-mode #main-chat {
    min-height: 0;
    overflow: hidden;
}

/* On garde uniquement la barre micro/cam/volume en bas du chat. */
body.quizzz-music-mode #message-input-container {
    display: block !important;
    flex: 0 0 auto !important;
    padding: 3px 5px !important;
    min-height: 0 !important;
}
body.quizzz-music-mode #message-input-container #karaotube-mic-panel,
body.quizzz-music-mode #message-input-container #chat-top-tools-fold-toggle,
body.quizzz-music-mode #message-input-container #formatting-tools,
body.quizzz-music-mode #message-input-container #send-button-container,
body.quizzz-music-mode #message-input-container #emoji-picker,
body.quizzz-music-mode #message-input-container #sticker-picker,
body.quizzz-music-mode #message-input-container #gif-picker,
body.quizzz-music-mode #message-input-container #chat-font-decrease,
body.quizzz-music-mode #message-input-container #chat-font-increase,
body.quizzz-music-mode #message-input-container .chat-controls-sep {
    display: none !important;
}
body.quizzz-music-mode #message-input-container #chat-font-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 34px !important;
}

/* ---------- Coquille générale ---------- */
.qzm-shell {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 42px 5px minmax(0, 1fr);
    gap: 5px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid rgba(78, 211, 225, .24);
    border-radius: 9px;
    background:
        radial-gradient(circle at 20% 0%, rgba(53, 84, 156, .20), transparent 30%),
        linear-gradient(145deg, rgba(22, 27, 55, .99), rgba(12, 15, 35, .99));
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .34), 0 4px 16px rgba(0, 0, 0, .22);
}

/* ---------- Bandeau supérieur façon Alain ---------- */
.qzm-topbar {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 7px;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(44, 48, 83, .95), rgba(31, 35, 67, .95));
    border: 1px solid rgba(255,255,255,.08);
}
.qzm-brand {
    flex: 1 1 auto;
    min-width: 205px;
    line-height: 1;
    overflow: hidden;
}
.qzm-brand strong {
    display: block;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: .6px;
    font-weight: 1000;
    color: #fff;
    text-shadow: 0 1px 2px #000;
}
.qzm-brand span {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    line-height: 10px;
    color: #b8bfd3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qzm-toolbar {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
.qzm-field {
    display: block;
    min-width: 0;
}
.qzm-field > span { display: none; }
.qzm-field select {
    height: 28px;
    min-width: 0;
    padding: 2px 20px 2px 7px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    background: #10162f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    outline: none;
}
#qzm-rounds { width: 80px; }
#qzm-seconds { width: 72px; }
#qzm-style { width: 105px; }
#qzm-mode { width: 110px; }

.qzm-btn {
    height: 28px;
    min-width: 0;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    background: linear-gradient(#313c5c, #202944);
    color: #fff;
    font-weight: 900;
    font-size: 10px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 1px rgba(255,255,255,.07);
}
.qzm-btn:hover:not(:disabled) { filter: brightness(1.14); }
.qzm-btn:disabled { opacity: .42; cursor: not-allowed; }
.qzm-btn.qzm-primary { background: linear-gradient(#9d8651, #6c5a32); }
.qzm-btn.qzm-warn { background: linear-gradient(#6e7fe7, #4c5fc4); }
.qzm-btn.qzm-danger { background: linear-gradient(#d85668, #a33446); }
.qzm-btn.qzm-join { background: linear-gradient(#5ecb94, #2b9765); color: #07180e; }
.qzm-btn.qzm-leave { background: linear-gradient(#656b89, #3e435d); }
.qzm-btn.qzm-audio-needed {
    animation: qzmPulseAudio 1s ease-in-out infinite alternate;
    border-color: #ffd166;
}
@keyframes qzmPulseAudio {
    from { box-shadow: 0 0 0 rgba(255,209,102,0); }
    to { box-shadow: 0 0 13px rgba(255,209,102,.7); }
}

.qzm-top-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 0 8px;
    align-items: center;
}
.qzm-top-progress i {
    display: block;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #305485, #2782b9);
    box-shadow: 0 0 4px rgba(49,145,213,.2);
}

/* ---------- Zone principale : grande colonne + colonne droite ---------- */
.qzm-workspace {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 2.28fr) minmax(265px, 1fr);
    gap: 6px;
    overflow: hidden;
}

.qzm-game-column {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 152px minmax(92px, 1fr) 68px 88px;
    gap: 6px;
    overflow: hidden;
}

/* ---------- Platine compacte ---------- */
.qzm-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 166px;
    gap: 7px;
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(27,32,65,.92), rgba(25,29,58,.96));
}

.qzm-turntable {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.035);
    background:
        linear-gradient(90deg, rgba(255,255,255,.018), transparent 24%),
        linear-gradient(145deg, #171d3b 0%, #11162f 58%, #151a36 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,.32);
}
.qzm-turntable::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255,255,255,.025);
    border-radius: 6px;
    pointer-events: none;
}

.qzm-vinyl-wrap {
    position: absolute;
    z-index: 2;
    left: 22px;
    top: 50%;
    width: 116px;
    height: 116px;
    transform: translateY(-50%);
}
.qzm-record-stack::before,
.qzm-record-stack::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 5px;
    top: 7px;
    width: 106px;
    height: 106px;
    border-radius: 50%;
    background: #090a0e;
    border: 1px solid #25283a;
    opacity: .55;
}
.qzm-record-stack::before { transform: translateY(4px); }
.qzm-record-stack::after { transform: translateY(8px); }
.qzm-vinyl {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #d9e5f0 0 2.7%, #7aa1bb 3% 7%, #f0f3f5 7.3% 18%, #0c0e15 18.5% 21%, transparent 21.5%),
        repeating-radial-gradient(circle at 50% 50%, #171923 0 2px, #08090d 3px 5px, #11131c 6px 7px);
    border: 2px solid #05060a;
    box-shadow: 0 5px 14px rgba(0,0,0,.7), inset 0 0 11px rgba(255,255,255,.05);
}
.qzm-vinyl::after {
    content: '';
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), rgba(123,172,207,.25) 42%, rgba(34,47,82,.6) 44%, rgba(18,21,38,.75));
    border: 1px solid rgba(255,255,255,.18);
}
.qzm-stage.is-playing .qzm-vinyl { animation: qzmSpin 2.25s linear infinite; }
@keyframes qzmSpin { to { transform: rotate(360deg); } }

/* Bras court, horizontal/diagonal comme sur la version Alain. */
.qzm-tonearm-base {
    position: absolute;
    z-index: 6;
    left: 194px;
    top: 35px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, #bfc8dc 0 25%, #7c8496 28% 52%, #242a3d 56% 100%);
    border: 1px solid rgba(255,255,255,.36);
    box-shadow: 0 2px 4px #000;
}
.qzm-tonearm {
    position: absolute;
    z-index: 5;
    left: 139px;
    top: 21px;
    width: 72px;
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(#f2f3f5, #9da6bc 55%, #727b90);
    transform-origin: 100% 50%;
    transform: rotate(17deg);
    transition: transform .45s ease, top .45s ease;
    box-shadow: 0 1px 3px #000;
}
.qzm-tonearm::before {
    content: '';
    position: absolute;
    left: -10px;
    top: -2px;
    width: 14px;
    height: 9px;
    border-radius: 2px;
    background: #d3a74a;
    box-shadow: 0 1px 2px #000;
}
.qzm-stage.is-playing .qzm-tonearm {
    top: 28px;
    transform: rotate(23deg);
}

.qzm-deck-controls {
    position: absolute;
    z-index: 4;
    left: 151px;
    top: 58px;
    width: 66px;
    height: 75px;
    display: block;
    color: #ccd4e6;
    font-size: 7px;
    text-transform: uppercase;
}
.qzm-deck-control {
    position: absolute;
    display: block;
    text-align: center;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    line-height: 1.15;
}
.qzm-deck-start { left: 2px; top: 0; width: 25px; }
.qzm-deck-rpm { right: 1px; top: 0; width: 20px; }
.qzm-deck-rpm b { display: inline-block; margin-top: 3px; color: #fff; font-size: 8px; }
.qzm-deck-pitch {
    left: 23px;
    top: 42px;
    width: 26px;
    padding-top: 9px;
    border-top: 5px solid #a9b1c2;
}
.qzm-power-dot {
    position: absolute;
    left: 30px;
    bottom: 4px;
    color: #ff4c64;
    font-size: 10px;
    line-height: 1;
}
.qzm-deck-power {
    position: absolute;
    left: 22px;
    bottom: -4px;
    font-size: 6px;
    color: #8993aa;
}

.qzm-cover-wrap {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
}
.qzm-cover {
    width: 100%;
    height: 116px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,.22);
    background:
        radial-gradient(circle at 48% 23%, rgba(82,203,228,.35), transparent 24%),
        linear-gradient(145deg, #243252, #11162c 56%, #302044);
    box-shadow: 0 5px 14px rgba(0,0,0,.45);
}
.qzm-cover::before {
    content: '33T';
    position: absolute;
    z-index: 2;
    top: 5px;
    left: 6px;
    font-size: 8px;
    font-weight: 900;
    color: rgba(255,255,255,.53);
    letter-spacing: .8px;
}
.qzm-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.qzm-cover.is-reveal img { display: block; }
.qzm-cover-reflection {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px;
    font-weight: 1000;
    letter-spacing: .7px;
    color: #eefcff;
    text-shadow: 0 2px 8px #000;
}
.qzm-cover.is-reveal .qzm-cover-reflection { display: none; }
#qzm-reveal-label {
    min-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 8px;
    line-height: 9px;
    color: #d9bf77;
    font-weight: 800;
}

/* ---------- Grande zone calme centrale ---------- */
.qzm-middle-panel {
    position: relative;
    min-height: 0;
    overflow: hidden;
    padding: 7px 9px 17px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.055);
    background: linear-gradient(180deg, rgba(27,31,65,.85), rgba(23,27,58,.9));
}
#qzm-message {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    color: #fff;
    white-space: normal;
}
.qzm-round-track {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 34px;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 3px;
}
.qzm-round-track i {
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, #2087c5, #2aa6e8);
    box-shadow: 0 0 3px rgba(36,159,221,.25);
}

/* ---------- Question / indice ---------- */
.qzm-question-box {
    min-height: 0;
    overflow: hidden;
    padding: 7px 9px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.055);
    background: linear-gradient(180deg, rgba(28,32,68,.94), rgba(22,26,57,.96));
    text-align: left;
}
.qzm-question-kicker {
    margin-bottom: 2px;
    font-size: 8px;
    line-height: 9px;
    font-weight: 1000;
    color: #d7a94c;
    letter-spacing: .6px;
}
#qzm-question {
    font-size: 12px;
    line-height: 15px;
    font-weight: 1000;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#qzm-hint {
    margin-top: 1px;
    font-size: 10px;
    line-height: 13px;
    font-weight: 700;
    color: #82d8e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 4 réponses toujours visibles ---------- */
.qzm-answers {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
}
.qzm-answer {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 5px 9px 5px 36px;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid rgba(95,133,185,.24);
    background: linear-gradient(145deg, #252544, #1a1d38);
    color: #f7f7ff;
    text-align: left;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
.qzm-answer:hover:not(:disabled) {
    border-color: #5bd9e8;
    background: linear-gradient(145deg, #303052, #202544);
}
.qzm-answer:disabled { cursor: default; opacity: .68; }
.qzm-answer-letter {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: #d3a94f;
    color: #1a1820;
    font-size: 11px;
    font-weight: 1000;
}
.qzm-answer-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qzm-answer.is-selected { outline: 2px solid #58d9e9; opacity: 1; }
.qzm-answer.is-correct { border-color: #56e27f; background: linear-gradient(145deg, #1f6037, #143b27); opacity: 1; }
.qzm-answer.is-wrong-selected { border-color: #ff6878; background: linear-gradient(145deg, #662a34, #3e1820); opacity: 1; }

/* ---------- Colonne droite ---------- */
.qzm-side {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 122px 102px minmax(0, 1fr);
    gap: 6px;
    overflow: hidden;
}

.qzm-statusbar {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
}
.qzm-status-item {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.045);
    background: linear-gradient(180deg, rgba(15,20,50,.94), rgba(10,15,39,.96));
}
.qzm-status-item em {
    display: block;
    margin-bottom: 2px;
    font-style: normal;
    font-size: 7px;
    line-height: 8px;
    font-weight: 1000;
    letter-spacing: .7px;
    color: #7482a9;
}
.qzm-status-item b {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 15px;
    font-weight: 1000;
    color: #d7e7ff;
}
.qzm-stats-hidden { display: none !important; }

.qzm-side-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.055);
    background: linear-gradient(180deg, rgba(19,24,56,.95), rgba(13,18,46,.97));
}
.qzm-side-title {
    flex: 0 0 auto;
    min-height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 7px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,.045);
    font-size: 8px;
    line-height: 10px;
    font-weight: 1000;
    letter-spacing: .4px;
    color: #d7a94c;
}
.qzm-participant-pill { color: #37d48b; font-size: 10px; }
.qzm-participant-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    padding: 3px 6px 2px;
}
.qzm-participant-actions .qzm-btn {
    flex: 1 1 0;
    width: auto;
    height: 24px;
    font-size: 9px;
}
.qzm-participant-actions .qzm-btn[hidden] { display: none !important; }
.qzm-owner-line {
    flex: 0 0 auto;
    padding: 0 7px 2px;
    font-size: 8px;
    line-height: 10px;
    color: #94a0bd;
}
.qzm-owner-line b { color: #d7e7ff; }
.qzm-side-scroll {
    min-height: 0;
    overflow-y: auto;
    padding: 3px 6px 5px;
}
.qzm-person-row,
.qzm-score-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
    padding: 4px 5px;
    margin-bottom: 3px;
    border-radius: 5px;
    background: rgba(255,255,255,.035);
    font-size: 9px;
}
.qzm-person-row b,
.qzm-score-row b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qzm-score-row .qzm-rank { color: #d7a94c; margin-right: 4px; }
.qzm-empty {
    padding: 5px;
    color: #7f8ba8;
    font-size: 8px;
    text-align: left;
    font-style: italic;
}

/* ---------- Retour individuel de manche ---------- */
#qzm-round-feedback {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0,0,0,.20);
}
#qzm-round-feedback.show { display: flex; animation: qzmFeedbackIn .22s ease-out; }
@keyframes qzmFeedbackIn {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
}
.qzm-feedback-card {
    min-width: 210px;
    max-width: 76%;
    padding: 11px 15px;
    border-radius: 12px;
    text-align: center;
    background: rgba(8,10,16,.95);
    border: 2px solid #58d9e9;
    box-shadow: 0 0 30px rgba(0,0,0,.75);
}
.qzm-feedback-icon { font-size: 40px; line-height: 1; }
.qzm-feedback-title { margin-top: 4px; font-size: 20px; font-weight: 1000; }
.qzm-feedback-sub { margin-top: 3px; font-size: 11px; color: #d8e0ea; }
#qzm-round-feedback.correct .qzm-feedback-title { color: #68ee8a; }
#qzm-round-feedback.wrong .qzm-feedback-title { color: #ff7f8b; }

/* ---------- Egaliseur latéral : uniquement dans Quizzz Music ---------- */
#quizzz-music-sidebar-eq { display: none; }
body.quizzz-music-mode #music-player-container #radio-player-compact,
body.quizzz-music-mode #music-player-container #karaotube-mini-chat,
body.quizzz-music-mode #music-player-container #musicdiscu-equalizer-panel {
    display: none !important;
}
body.quizzz-music-mode #quizzz-music-sidebar-eq {
    display: flex !important;
    flex-direction: column;
    gap: 7px;
    padding: 8px;
    min-height: 126px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid rgba(73,214,232,.35);
    background: linear-gradient(155deg, #121b31, #080c16);
    color: #e9fbff;
}
#quizzz-music-sidebar-eq .qzm-side-eq-title {
    font-weight: 900;
    font-size: 12px;
    color: #75e2ef;
    text-align: center;
}
#quizzz-music-sidebar-eq .qzm-side-bars {
    flex: 1;
    min-height: 67px;
    display: flex;
    align-items: end;
    gap: 3px;
}
#quizzz-music-sidebar-eq .qzm-side-bars span {
    flex: 1 1 0;
    min-width: 2px;
    height: 18%;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(to top, #23c483, #f5d547 72%, #f45d5d);
    transform-origin: bottom;
}
body.qzm-audio-playing #quizzz-music-sidebar-eq .qzm-side-bars span {
    animation: qzmBar .52s ease-in-out infinite alternate;
}
#quizzz-music-sidebar-eq .qzm-side-bars span:nth-child(2) { animation-delay: -.17s; }
#quizzz-music-sidebar-eq .qzm-side-bars span:nth-child(3) { animation-delay: -.31s; }
#quizzz-music-sidebar-eq .qzm-side-bars span:nth-child(4) { animation-delay: -.08s; }
#quizzz-music-sidebar-eq .qzm-side-bars span:nth-child(5) { animation-delay: -.42s; }
#quizzz-music-sidebar-eq .qzm-side-bars span:nth-child(6) { animation-delay: -.22s; }
#quizzz-music-sidebar-eq .qzm-side-bars span:nth-child(7) { animation-delay: -.36s; }
#quizzz-music-sidebar-eq .qzm-side-eq-status {
    text-align: center;
    font-size: 10px;
    color: #c5d1dc;
}
@keyframes qzmBar { from { height: 16%; } to { height: 96%; } }

/* ---------- Fin de partie ---------- */
.qzm-final-overlay {
    position: fixed;
    z-index: 2147483500;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: rgba(0,0,0,.68);
}
.qzm-final-card {
    width: min(520px, 94vw);
    max-height: 84vh;
    overflow: auto;
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(150deg, #17203a, #0d1020 60%, #2a1835);
    border: 2px solid #69deeb;
    box-shadow: 0 18px 70px rgba(0,0,0,.75), 0 0 28px rgba(64,210,229,.18);
    color: #fff;
    text-align: center;
}
.qzm-final-trophy { font-size: 52px; line-height: 1; }
.qzm-final-title { margin: 6px 0 2px; font-size: 25px; font-weight: 1000; color: #ffe16b; }
.qzm-final-sub { color: #dce9f1; font-size: 13px; }
.qzm-final-ranking { margin-top: 10px; text-align: left; }
.qzm-final-ranking-row {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    gap: 6px;
    padding: 6px 8px;
    margin: 3px 0;
    border-radius: 6px;
    background: rgba(255,255,255,.055);
    font-size: 12px;
}
.qzm-final-close {
    margin-top: 11px;
    height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 900;
    background: #5ad7e8;
    color: #071116;
}

/* ---------- Écrans PC un peu moins hauts ---------- */
@media (min-width: 981px) and (max-height: 760px) {
    .qzm-shell { grid-template-rows: 39px 4px minmax(0, 1fr); padding: 5px; gap: 4px; }
    .qzm-topbar { padding: 3px 6px; }
    .qzm-brand strong { font-size: 16px; }
    .qzm-brand span { font-size: 8px; margin-top: 2px; }
    .qzm-field select, .qzm-btn { height: 25px; font-size: 9px; }
    .qzm-game-column { grid-template-rows: 140px minmax(70px, 1fr) 62px 78px; gap: 5px; }
    .qzm-stage { grid-template-columns: minmax(0, 1fr) 151px; padding: 5px; }
    .qzm-vinyl-wrap { width: 106px; height: 106px; }
    .qzm-record-stack::before, .qzm-record-stack::after { width: 96px; height: 96px; }
    .qzm-cover { height: 106px; }
    .qzm-side { grid-template-rows: 112px 92px minmax(0, 1fr); gap: 5px; }
}

/* ---------- Tablette / téléphone ---------- */
@media (max-width: 980px) {
    body.quizzz-music-mode #quizzz-music-panel { overflow: auto; }
    .qzm-shell {
        height: auto;
        min-height: 100%;
        overflow: visible;
        grid-template-rows: auto 5px auto;
    }
    .qzm-topbar { align-items: flex-start; flex-direction: column; }
    .qzm-brand { width: 100%; }
    .qzm-toolbar { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
    #qzm-rounds, #qzm-seconds, #qzm-style, #qzm-mode { width: 100%; }
    .qzm-workspace { grid-template-columns: 1fr; overflow: visible; }
    .qzm-game-column { grid-template-rows: 160px 150px 72px 104px; }
    .qzm-side { grid-template-columns: 1fr 1fr; grid-template-rows: 126px minmax(120px, auto); }
    .qzm-statusbar { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .qzm-shell { padding: 4px; gap: 4px; border-radius: 7px; }
    .qzm-toolbar { grid-template-columns: 1fr 1fr; gap: 4px; }
    .qzm-field select, .qzm-btn { width: 100%; height: 31px; font-size: 10px; }
    .qzm-game-column { grid-template-rows: 150px 130px 76px auto; }
    .qzm-stage { grid-template-columns: minmax(0,1fr) 118px; }
    .qzm-vinyl-wrap { left: 10px; width: 104px; height: 104px; }
    .qzm-tonearm { left: 117px; width: 62px; }
    .qzm-tonearm-base { left: 169px; }
    .qzm-deck-controls { left: 126px; }
    .qzm-cover { height: 104px; }
    .qzm-cover-reflection { font-size: 13px; }
    .qzm-answers { grid-template-columns: 1fr; grid-template-rows: repeat(4, 46px); }
    .qzm-answer { min-height: 46px; font-size: 11px; }
    .qzm-side { grid-template-columns: 1fr; grid-template-rows: 132px 115px 160px; }
}

/* ============================================================
   Ajustement PC 23/08/2026 — lisibilité + 4 réponses visibles
   Ne modifie pas les dispositions tablette / téléphone.
   ============================================================ */
@media (min-width: 981px) {
    /* La barre micro/cam est positionnée en absolu dans chat-real-time.
       On lui réserve sa place afin que les réponses C et D ne passent plus dessous. */
    body.quizzz-music-mode #quizzz-music-panel {
        margin-bottom: 40px;
    }

    .qzm-brand span {
        font-size: 10px;
        line-height: 11px;
    }

    .qzm-field select {
        font-size: 12px;
        font-weight: 800;
    }

    .qzm-btn {
        font-size: 12px;
    }

    .qzm-deck-controls { font-size: 8px; }
    .qzm-deck-rpm b { font-size: 9px; }
    .qzm-deck-power { font-size: 7px; }

    #qzm-reveal-label {
        font-size: 10px;
        line-height: 11px;
    }

    #qzm-message {
        font-size: 13px;
        line-height: 1.25;
    }

    .qzm-question-kicker {
        font-size: 10px;
        line-height: 11px;
    }

    #qzm-question {
        font-size: 14px;
        line-height: 16px;
    }

    #qzm-hint {
        font-size: 12px;
        line-height: 14px;
        font-weight: 800;
    }

    .qzm-answer {
        font-size: 13px;
    }

    .qzm-answer-letter {
        font-size: 12px;
    }

    .qzm-status-item em {
        font-size: 9px;
        line-height: 10px;
    }

    .qzm-side-title {
        font-size: 10px;
        line-height: 11px;
    }

    .qzm-participant-pill { font-size: 12px; }

    .qzm-participant-actions .qzm-btn {
        height: 25px;
        font-size: 10px;
    }

    .qzm-owner-line {
        font-size: 10px;
        line-height: 11px;
    }

    .qzm-person-row,
    .qzm-score-row {
        font-size: 11px;
    }

    .qzm-empty {
        font-size: 10px;
    }
}

/* Sur les écrans PC peu hauts comme la capture envoyée :
   on prend la place nécessaire dans la grande zone centrale, pas sur les réponses. */
@media (min-width: 981px) and (max-height: 760px) {
    .qzm-field select,
    .qzm-btn {
        height: 27px;
        font-size: 11px;
    }

    .qzm-game-column {
        grid-template-rows: 140px minmax(52px, 1fr) 66px 86px;
    }
}

/* ============================================================
   Ajustement PC 23/08/2026 D — LISIBILITÉ FORTE + PLATINE AGRANDIE
   Demande Rital2 : conserver la disposition validée, agrandir tous
   les textes/menus et remettre le bras réellement sur le vinyle.
   Strictement limité au mode Quizzz Music sur PC.
   ============================================================ */
@media (min-width: 981px) {
    /* Un peu plus de hauteur au bandeau pour que les contrôles respirent. */
    .qzm-shell {
        grid-template-rows: 48px 5px minmax(0, 1fr);
    }

    .qzm-topbar {
        gap: 8px;
        padding: 5px 8px;
    }

    .qzm-brand {
        min-width: 190px;
    }

    .qzm-brand strong {
        font-size: 20px;
        line-height: 21px;
    }

    .qzm-brand span {
        margin-top: 2px;
        font-size: 11px;
        line-height: 12px;
        font-weight: 700;
    }

    .qzm-toolbar {
        gap: 6px;
    }

    /* Menus nettement plus grands et assez larges pour ne plus couper les libellés. */
    .qzm-field select {
        height: 34px;
        padding: 3px 25px 3px 9px;
        border-radius: 7px;
        font-size: 14px;
        line-height: 18px;
        font-weight: 900;
    }
    #qzm-rounds  { width: 108px; }
    #qzm-seconds { width: 92px; }
    #qzm-style   { width: 142px; }
    #qzm-mode    { width: 132px; }

    .qzm-btn {
        height: 34px;
        padding: 0 11px;
        border-radius: 7px;
        font-size: 14px;
        line-height: 18px;
        font-weight: 1000;
    }

    /* La grande zone centrale cède de la place à la platine et aux réponses,
       sans changer l'ordre ni la disposition générale. */
    .qzm-game-column {
        grid-template-rows: 184px minmax(34px, 1fr) 76px 108px;
        gap: 6px;
    }

    /* Platine plus grande. */
    .qzm-stage {
        grid-template-columns: minmax(0, 1fr) 182px;
        gap: 8px;
        padding: 7px;
    }

    .qzm-vinyl-wrap {
        left: 25px;
        top: 50%;
        width: 150px;
        height: 150px;
    }
    .qzm-record-stack::before,
    .qzm-record-stack::after {
        left: 6px;
        top: 8px;
        width: 138px;
        height: 138px;
    }

    /* Bras : pivot à droite et tube incliné VERS LE BAS sur le disque.
       L'angle négatif est volontaire : avec le pivot à droite, il fait
       descendre la cellule vers les sillons au lieu de la faire monter. */
    .qzm-tonearm-base {
        left: 246px;
        top: 26px;
        width: 20px;
        height: 20px;
    }
    .qzm-tonearm {
        left: 133px;
        top: 33px;
        width: 123px;
        height: 7px;
        border-radius: 5px;
        transform-origin: 100% 50%;
        transform: rotate(-15deg);
    }
    .qzm-tonearm::before {
        left: -13px;
        top: -2px;
        width: 17px;
        height: 11px;
        border-radius: 3px;
    }
    .qzm-stage.is-playing .qzm-tonearm {
        top: 33px;
        transform: rotate(-25deg);
    }

    /* Commandes de la platine plus grosses et replacées sous le bras. */
    .qzm-deck-controls {
        left: 184px;
        top: 69px;
        width: 82px;
        height: 88px;
        font-size: 10px;
    }
    .qzm-deck-start { left: 0; top: 0; width: 34px; }
    .qzm-deck-rpm { right: 0; top: 0; width: 28px; }
    .qzm-deck-rpm b { margin-top: 3px; font-size: 11px; }
    .qzm-deck-pitch {
        left: 29px;
        top: 51px;
        width: 34px;
        padding-top: 10px;
        border-top-width: 6px;
    }
    .qzm-power-dot {
        left: 38px;
        bottom: 3px;
        font-size: 12px;
    }
    .qzm-deck-power {
        left: 29px;
        bottom: -5px;
        font-size: 8px;
    }

    .qzm-cover {
        height: 145px;
    }
    .qzm-cover::before {
        top: 6px;
        left: 7px;
        font-size: 10px;
    }
    .qzm-cover-reflection {
        font-size: 19px;
        line-height: 22px;
    }
    #qzm-reveal-label {
        min-height: 20px;
        font-size: 11px;
        line-height: 12px;
    }

    /* Texte de déroulement. */
    #qzm-message {
        font-size: 15px;
        line-height: 18px;
    }

    /* Question et indice. */
    .qzm-question-box {
        padding: 8px 10px;
    }
    .qzm-question-kicker {
        margin-bottom: 3px;
        font-size: 11px;
        line-height: 12px;
    }
    #qzm-question {
        font-size: 16px;
        line-height: 19px;
    }
    #qzm-hint {
        margin-top: 2px;
        font-size: 13px;
        line-height: 16px;
        font-weight: 900;
    }

    /* Réponses A/B/C/D : texte et pastille beaucoup plus lisibles. */
    .qzm-answers {
        gap: 6px;
    }
    .qzm-answer {
        padding: 7px 11px 7px 45px;
        border-radius: 8px;
        font-size: 16px;
        line-height: 19px;
        font-weight: 1000;
    }
    .qzm-answer-letter {
        left: 9px;
        width: 28px;
        height: 28px;
        border-radius: 7px;
        font-size: 15px;
    }

    /* Colonne droite : compteurs, titres, participants et classement. */
    .qzm-side {
        grid-template-rows: 140px 122px minmax(0, 1fr);
        gap: 6px;
    }
    .qzm-status-item {
        padding: 6px 8px;
    }
    .qzm-status-item em {
        margin-bottom: 3px;
        font-size: 10px;
        line-height: 11px;
        letter-spacing: .55px;
    }
    .qzm-status-item b {
        font-size: 17px;
        line-height: 19px;
    }

    .qzm-side-title {
        min-height: 31px;
        padding: 5px 8px;
        font-size: 12px;
        line-height: 14px;
    }
    .qzm-participant-pill {
        font-size: 14px;
    }
    .qzm-participant-actions {
        gap: 5px;
        padding: 4px 7px 3px;
    }
    .qzm-participant-actions .qzm-btn {
        height: 31px;
        font-size: 13px;
    }
    .qzm-owner-line {
        padding: 1px 8px 3px;
        font-size: 11px;
        line-height: 13px;
    }
    .qzm-person-row,
    .qzm-score-row {
        padding: 5px 6px;
        font-size: 12px;
        line-height: 15px;
    }
    .qzm-empty {
        padding: 6px;
        font-size: 11px;
        line-height: 14px;
    }
}

/* Écrans PC peu hauts (comme la capture 1920x~650 utile) :
   on conserve toutes les grosses polices et on récupère la place uniquement
   dans la grande zone centrale, afin de garder A/B/C/D entièrement visibles. */
@media (min-width: 981px) and (max-height: 760px) {
    .qzm-shell {
        grid-template-rows: 46px 4px minmax(0, 1fr);
        padding: 5px;
        gap: 4px;
    }
    .qzm-field select,
    .qzm-btn {
        height: 32px;
        font-size: 13px;
    }
    .qzm-game-column {
        grid-template-rows: 176px minmax(28px, 1fr) 72px 104px;
        gap: 5px;
    }
    .qzm-stage {
        grid-template-columns: minmax(0, 1fr) 174px;
        padding: 6px;
    }
    .qzm-vinyl-wrap {
        width: 142px;
        height: 142px;
    }
    .qzm-record-stack::before,
    .qzm-record-stack::after {
        width: 130px;
        height: 130px;
    }
    .qzm-cover { height: 137px; }
    .qzm-side {
        grid-template-rows: 134px 116px minmax(0, 1fr);
        gap: 5px;
    }
    .qzm-answer {
        font-size: 15px;
    }
}

/* Garde-fou pour PC moins larges : même lisibilité, contrôles légèrement
   resserrés pour éviter tout retour à la ligne du bandeau. */
@media (min-width: 981px) and (max-width: 1450px) {
    .qzm-brand { min-width: 155px; }
    .qzm-brand strong { font-size: 18px; }
    #qzm-rounds  { width: 98px; }
    #qzm-seconds { width: 84px; }
    #qzm-style   { width: 126px; }
    #qzm-mode    { width: 118px; }
    .qzm-field select,
    .qzm-btn { font-size: 12px; }
    .qzm-btn { padding-left: 8px; padding-right: 8px; }
}

/* ============================================================
   Ajustement PC 23/08/2026 E — POLICES + MENUS XL
   Demande Rital2 : NE PLUS TOUCHER à la platine, au bras, au vinyle
   ni à RÉFLEXION. Agrandir uniquement les menus/boutons et les textes.
   Ce bloc est volontairement placé en DERNIER pour primer sur les
   garde-fous de hauteur/largeur précédents.
   ============================================================ */
@media (min-width: 981px) {
    /* Bandeau supérieur : plus haut pour accueillir les grosses polices. */
    .qzm-shell {
        grid-template-rows: 58px 5px minmax(0, 1fr);
    }
    .qzm-topbar {
        gap: 6px;
        padding: 6px 8px;
    }
    .qzm-brand {
        min-width: 176px;
    }
    .qzm-brand strong {
        font-size: 22px;
        line-height: 23px;
    }
    .qzm-brand span {
        margin-top: 2px;
        font-size: 14px;
        line-height: 15px;
    }
    .qzm-toolbar {
        gap: 6px;
        flex-wrap: nowrap;
    }

    /* Menus du haut : +6 px environ et largeur suffisante. */
    .qzm-field select {
        height: 42px;
        padding: 4px 30px 4px 11px;
        border-radius: 8px;
        font-size: 20px;
        line-height: 24px;
        font-weight: 900;
    }
    #qzm-rounds  { width: 135px; }
    #qzm-seconds { width: 116px; }
    #qzm-style   { width: 182px; }
    #qzm-mode    { width: 160px; }

    /* Lancer / Pause / Arrêter / Activer le son. */
    .qzm-btn {
        height: 42px;
        padding: 0 12px;
        border-radius: 8px;
        font-size: 19px;
        line-height: 23px;
        font-weight: 1000;
        white-space: nowrap;
    }

    /* On prend l'espace supplémentaire UNIQUEMENT dans la grande zone vide.
       La platine reste strictement à ses coordonnées actuelles. */
    .qzm-game-column {
        grid-template-rows: 184px minmax(20px, 1fr) 86px 126px;
        gap: 6px;
    }

    /* Message de déroulement / résultat. */
    #qzm-message {
        font-size: 20px;
        line-height: 24px;
        font-weight: 900;
    }

    /* Question, catégorie et indice. */
    .qzm-question-box {
        padding: 8px 11px;
    }
    .qzm-question-kicker {
        margin-bottom: 3px;
        font-size: 16px;
        line-height: 18px;
        font-weight: 1000;
    }
    #qzm-question {
        font-size: 22px;
        line-height: 25px;
        font-weight: 1000;
    }
    #qzm-hint {
        margin-top: 3px;
        font-size: 18px;
        line-height: 21px;
        font-weight: 1000;
    }

    /* A/B/C/D : beaucoup plus gros, toujours sur deux lignes. */
    .qzm-answers {
        gap: 7px;
    }
    .qzm-answer {
        padding: 9px 13px 9px 53px;
        border-radius: 9px;
        font-size: 22px;
        line-height: 25px;
        font-weight: 1000;
    }
    .qzm-answer-letter {
        left: 10px;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 20px;
        line-height: 34px;
    }
    .qzm-answer-text {
        font-size: inherit;
        line-height: inherit;
    }

    /* Compteurs à droite : labels et chiffres nettement plus lisibles. */
    .qzm-side {
        grid-template-rows: 154px 140px minmax(0, 1fr);
        gap: 6px;
    }
    .qzm-status-item {
        padding: 6px 9px;
    }
    .qzm-status-item em {
        margin-bottom: 3px;
        font-size: 16px;
        line-height: 18px;
        letter-spacing: .25px;
        font-weight: 1000;
    }
    .qzm-status-item b {
        font-size: 23px;
        line-height: 25px;
        font-weight: 1000;
    }

    /* Joueurs inscrits / Je participe / Lanceur / Classement. */
    .qzm-side-title {
        min-height: 38px;
        padding: 7px 9px;
        font-size: 17px;
        line-height: 20px;
        font-weight: 1000;
    }
    .qzm-participant-pill {
        font-size: 19px;
        line-height: 22px;
        font-weight: 1000;
    }
    .qzm-participant-actions {
        gap: 6px;
        padding: 5px 8px 4px;
    }
    .qzm-participant-actions .qzm-btn {
        height: 38px;
        font-size: 18px;
        line-height: 21px;
    }
    .qzm-owner-line {
        padding: 3px 9px 5px;
        font-size: 16px;
        line-height: 19px;
        font-weight: 800;
    }
    .qzm-person-row,
    .qzm-score-row {
        padding: 7px 8px;
        font-size: 17px;
        line-height: 20px;
        font-weight: 900;
    }
    .qzm-empty {
        padding: 7px 8px;
        font-size: 16px;
        line-height: 19px;
    }
}

/* Sur PC peu haut : conserver les grosses polices demandées.
   Seule la grande zone centrale se comprime davantage. */
@media (min-width: 981px) and (max-height: 760px) {
    .qzm-shell {
        grid-template-rows: 56px 4px minmax(0, 1fr);
        padding: 5px;
        gap: 4px;
    }
    .qzm-field select {
        height: 40px;
        font-size: 19px;
    }
    .qzm-btn {
        height: 40px;
        font-size: 18px;
    }
    .qzm-game-column {
        grid-template-rows: 176px minmax(12px, 1fr) 84px 122px;
        gap: 5px;
    }
    .qzm-side {
        grid-template-rows: 150px 136px minmax(0, 1fr);
        gap: 5px;
    }
    .qzm-answer {
        font-size: 21px;
        line-height: 24px;
    }
}

/* Écrans PC plus étroits : on réduit uniquement les largeurs, PAS les polices. */
@media (min-width: 981px) and (max-width: 1450px) {
    .qzm-brand { min-width: 150px; }
    #qzm-rounds  { width: 122px; }
    #qzm-seconds { width: 108px; }
    #qzm-style   { width: 166px; }
    #qzm-mode    { width: 148px; }
    .qzm-btn { padding-left: 9px; padding-right: 9px; }
}

/* ================================================================
   RITAL2 — correction ciblée 2026-08-23
   Compteurs de droite : plus de hauteur uniquement pour empêcher
   MANCHES / TEMPS / RÉPONSES / PHASE / BONNES RÉPONSES / ERREURS
   de se chevaucher avec les grosses polices validées.
   ================================================================ */
@media (min-width: 981px) {
    .qzm-side {
        grid-template-rows: 196px 140px minmax(0, 1fr);
    }

    .qzm-statusbar {
        grid-template-rows: repeat(3, minmax(60px, 1fr));
        row-gap: 5px;
    }

    .qzm-status-item {
        min-height: 60px;
        padding-top: 6px;
        padding-bottom: 6px;
        justify-content: center;
    }
}

@media (min-width: 981px) and (max-height: 760px) {
    .qzm-side {
        grid-template-rows: 196px 136px minmax(0, 1fr);
    }
}

/* ================================================================
   RITAL2 — correction ciblée 2026-08-23
   Joueurs inscrits : afficher toute la liste sans scrollbar locale.
   La carte s'agrandit selon le nombre de joueurs et le classement
   se place automatiquement juste en dessous.
   ================================================================ */
@media (min-width: 981px) {
    .qzm-side {
        grid-template-rows: 196px auto minmax(0, 1fr);
    }

    .qzm-participants-card {
        overflow: visible;
    }

    .qzm-participants-card #qzm-participants-list {
        flex: 0 0 auto;
        height: auto;
        max-height: none;
        overflow-y: visible;
        overflow-x: hidden;
    }
}

@media (min-width: 981px) and (max-height: 760px) {
    .qzm-side {
        grid-template-rows: 196px auto minmax(0, 1fr);
    }
}

/* ================================================================
   RITAL2 — correction téléphone 2026-08-23
   Réduire UNIQUEMENT la grande zone centrale de déroulement sur GSM
   afin de faire remonter la question et les 4 réponses A/B/C/D.
   Aucun impact sur la version PC (>= 981px).
   ================================================================ */
@media (max-width: 700px) {
    /* Avant : 150px 130px 76px auto.
       On conserve platine, question et réponses telles quelles ; seule
       la zone du message ("lanceur a quitté...", etc.) est raccourcie. */
    .qzm-game-column {
        grid-template-rows: 150px 72px 76px auto;
    }

    .qzm-middle-panel {
        min-height: 72px;
        max-height: 72px;
        padding-top: 6px;
        padding-bottom: 8px;
    }
}

/* ================================================================
   RITAL2 — RESPONSIVE TÉLÉPHONE FINAL 2026-08-23
   Correction strictement mobile : garantir l'affichage des 4 réponses.
   Aucun impact PC/tablette large.
   ================================================================ */
@media (max-width: 700px) {
    /* Le panneau Quizzz Music reste scrollable sur la hauteur du téléphone. */
    body.quizzz-music-mode #quizzz-music-panel {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Ne plus laisser la colonne de jeu couper les boutons B/C/D. */
    .qzm-game-column {
        height: auto !important;
        min-height: 414px !important;
        overflow: visible !important;
        grid-template-rows: 150px 64px 72px 116px !important;
        gap: 5px !important;
    }

    /* Le message central reste compact pour laisser la priorité aux réponses. */
    .qzm-middle-panel {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        overflow: hidden !important;
        padding: 6px 10px 7px !important;
        box-sizing: border-box !important;
    }

    /* Question compacte mais entièrement lisible. */
    .qzm-question-box {
        min-height: 72px !important;
        height: 72px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 4 réponses visibles en 2 x 2 sur GSM au lieu d'une longue colonne. */
    .qzm-answers {
        min-height: 116px !important;
        height: 116px !important;
        overflow: visible !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: 55px 55px !important;
        gap: 6px !important;
    }

    .qzm-answer {
        min-width: 0 !important;
        min-height: 55px !important;
        height: 55px !important;
        padding: 7px 8px 7px 42px !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        line-height: 17px !important;
        overflow: hidden !important;
    }

    .qzm-answer-letter {
        left: 8px !important;
        width: 27px !important;
        height: 27px !important;
        font-size: 15px !important;
        line-height: 27px !important;
    }

    .qzm-answer-text {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* La colonne statistiques commence seulement après les 4 réponses. */
    .qzm-side {
        margin-top: 2px !important;
    }
}