:root {
    color-scheme:light;
    --primary-color:#BDBDD9;
    --secondary-color:black;
    --text-color:#333;
    --label-color:black;
    --label-bg-color:#7f8c8d;
    --sublabel-color:#102a43;
    --sublabel-bg-color:#f0f4f8;
    --bg:#f8f8f8;
    --bg-article:#fff;
    --bg-writing-example:#ffffff;
    --sidebar-bg:#EDEDED;
    --bg-mark:yellow;
    --link-color:#3498db;
    --hover-color:#555;
    --search-color:black;
    --border-color:#ddd;
    --shadow-color:rgba(0, 0, 0, 0.2);
    --feedback-color:#7f8c8d;
    --reset-bg:#D6D6D6;
    --reset-bg-hover:white;
    --o-bg:#f8f9fa;
    --o-hover-bg:#E0E0E0;
    --o-hover:black;
    --o-selected-bg:#6c757d;
    --o-correct-bg:#28a745;
    --o-incorrect-bg:#dc3545;
    --o-correct-missed-bg:#a8e6a3;
    --bg-ligne-header:#E8E8E8;
    --doc-bg:#EBEBF5;
    --doc-border:#bbb;
    --bullet-bg:#007bff;
    --bullet-text:#fff;
    --search-bg:rgba(255, 255, 255, 0.85);
    --search-box-bg:rgba(255, 255, 255, 0.95);
    --search-border:var(--border-color);
    --search-shadow:rgba(0, 0, 0, 0.15);
    --enex-text:#4241AB;
    --frex-text:#55615E;
    --content-bg:#F5F5F5;
    --accordion-bg:#e0e0e0;
    --link-bg:#3498db;
    --link-bga:white;
    --link-bgah:#3498db;
    --sentence-bg:#fafafa;
    --question-bg:#f5f5f5;
    --writing-border:#28a745;
    --ipa-symbol-color:#2a9d8f;
    --ipa-example-color:#2a9d8f;
    --exercise-bg:#f8f9fa;
    --exercise-border:#dee2e6;
    --input-bg:#ffffff;
    --input-border:#ced4da;
    --input-focus:#2a9d8f;
    --button-bg:#2a9d8f;
    --button-hover:#238276;
    --word-btn-bg:#e9ecef;
    --word-btn-hover:#dee2e6;
    --word-btn-selected:#2a9d8f;
    --word-btn-correct:#2d7a2d;
    --word-btn-incorrect:#c92a2a;
    --word-btn-missed:#3498db}
.theme-toggle {
    cursor:pointer;
    font-size:1.3rem;
    background:0 0;
    border:none;
    color:var(--text-color);
    padding:5px 10px}
.enex {
    color:var(--enex-text);
    font-weight:700}
.frex {
    color:var(--frex-text);
    font-weight:700}
.chapter-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 20px;
    background-color:var(--bg)}
.chapter-header h1 {
    margin:0;
    font-size:1.5rem;
    color:var(--text-color)}
.container {
    display:flex;
    align-items:stretch;
    background-color:var(--content-bg)}
.content {
    flex:1;
    padding:10px;
    box-sizing:border-box;
    overflow:visible;
    background-color:var(--content-bg)}
.sidebar {
    width:220px;
    background-color:var(--sidebar-bg);
    color:var(--text-color);
    padding:20px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    box-shadow:2px 0 5px var(--shadow-color);
    transition:background-color .5s,color .5s;
    z-index:1000;
    box-sizing:border-box}
.sidebar a {
    color:var(--text-color);
    text-decoration:none;
    display:block;
    padding:8px 12px;
    border-radius:4px;
    transition:background-color .3s ease,color .3s ease,font-weight .3s ease;
    font-weight:400;
    word-wrap:break-word;
    overflow-wrap:break-word}
.sidebar a.active,.sidebar a:hover {
    background-color:var(--link-bg);
    color:#fff;
    font-weight:700;
    border-radius:8px}
.sidebar ul {
    list-style:none;
    padding-left:0;
    margin-left:0}
.btn-container {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:20px 0;
    width:100%}
.btn {
    display:inline-block;
    padding:10px 20px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
    background-color:var(--link-bg);
    color:#fff;
    font-weight:700}
.btn:hover {
    background-color:var(--link-bga);
    color:var(--link-bgah)}
.icon-btn {
    width:32px;
    height:32px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    position:relative;
    transition:background-color .3s ease,color .3s ease;
    background-color:var(--link-bg);
    color:#fff;
    font-weight:700}
.icon-btn:hover {
    background-color:var(--link-bga);
    color:var(--link-bgah)}
.icon-btn.prev::before {
    content:"▲"}
.icon-btn.next::before {
    content:"▼"}
.accordion {
    background-color:var(--accordion-bg);
    color:var(--text-color);
    cursor:pointer;
    padding:16px;
    width:100%;
    border:none;
    text-align:left;
    outline:0;
    font-size:1.15em;
    font-weight:700;
    transition:background-color .3s ease,color .3s ease;
    margin-top:10px;
    border-radius:8px;
    box-shadow:0 1px 3px var(--shadow-color)}
.accordion.active,.accordion:hover {
    background-color:var(--primary-color);
    color:#fff}
.panel {
    max-height:0;
    overflow:hidden;
    padding:0 12px;
    margin-top:6px;
    background-color:var(--bg-article);
    border-radius:8px;
    box-sizing:border-box}
.panel,.panel li,.panel p {
    text-align:justify;
    line-height:1.1}
.search-container {
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border-radius:6px;
    background-color:var(--search-bg);
    backdrop-filter:blur(8px);
    width:100%;
    box-sizing:border-box;
    margin:0 auto;
    position:relative;
    z-index:100;
    box-shadow:0 2px 8px var(--search-shadow)}
.search-container.sticky-controls {
    background-color:transparent;
    position:fixed;
    top:30px;
    left:50%;
    transform:translateX(-50%);
    width:auto;
    max-width:600px;
    min-width:300px;
    border:1px solid var(--search-border);
    border-radius:8px;
    padding:12px 18px;
    z-index:2000;
    box-shadow:0 4px 16px var(--search-shadow);
    animation:slideInDesktop .3s ease-out}
.search-box {
    flex:1;
    min-width:150px;
    padding:8px 12px;
    border:1px solid var(--search-border);
    border-radius:6px;
    font-size:1rem;
    color:var(--text-color);
    background-color:var(--search-box-bg);
    transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.search-box:focus {
    outline:0;
    border-color:var(--primary-color);
    box-shadow:0 0 5px var(--primary-color)}
.search-controls {
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0}
#search-count {
    font-weight:600;
    color:var(--text-color);
    min-width:30px;
    text-align:center}
p.q {
    font-weight:600;
    margin:10px 0 4px 0;
    line-height:1.1}
p.o {
    display:block;
    margin:.4em 0;
    padding:8px 12px;
    cursor:pointer;
    border-radius:6px;
    line-height:1.3;
    transition:background-color .3s ease,color .3s ease;
    background-color:var(--o-bg);
    color:var(--text-color)}
p.o:hover {
    background-color:var(--o-hover-bg);
    color:var(--o-hover)}
p.o.correct {
    background-color:var(--o-correct-bg);
    color:#fff;
    font-weight:700}
p.o.incorrect {
    background-color:var(--o-incorrect-bg);
    color:#fff;
    font-weight:700}
p.o.selected {
    background-color:var(--o-selected-bg);
    color:#fff;
    font-weight:700}
p.o.correct-missed {
    background-color:var(--o-correct-missed-bg);
    color:var(--text-color);
    font-weight:700}
.section audio {
    width:100%;
    max-width:500px;
    margin:1em auto;
    display:block}
.video-container {
    width:100%;
    margin:1em 0}
.video-container video {
    width:100%;
    aspect-ratio:16/9;
    border-radius:8px;
    box-shadow:0 1px 3px var(--shadow-color);
    display:block;
    object-fit:cover}
.accordion+.panel img,.panel img {
    width:100%;
    max-width:500px;
    height:auto;
    display:block;
    margin:10px auto;
    border-radius:8px;
    box-shadow:0 4px 8px rgba(0,0,0,.1);
    object-fit:cover;
    transition:transform .3s ease,box-shadow .3s ease;
    cursor:pointer}
.accordion+.panel img:hover,.panel img:hover {
    transform:scale(1.05);
    box-shadow:0 6px 14px rgba(0,0,0,.15)}
mark {
    background-color:var(--bg-mark);
    color:var(--text-color);
    transition:background-color .5s ease,color .5s ease;
    padding:0 2px}
.doc,.transcript {
    background-color:var(--doc-bg);
    font-size:.9rem;
    padding:15px 20px;
    border-radius:6px;
    
    margin:15px 0;
    white-space:normal;
    overflow-x:auto;
    color:var(--text-color)}
.label {
    font-weight:700;
    display:block;
    margin:15px 0 5px 0;
    color:var(--text-color)}
.writing {
    background-color:var(--bg-writing-example);
    
    padding:20px 25px;
    border-radius:10px;
    margin:20px 0;
    line-height:1.6;
    font-size:.95rem;
    font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
    box-shadow:0 4px 12px var(--shadow-color);
    transition:transform .2s ease,box-shadow .2s ease;
    overflow-x:auto;
    white-space:pre-wrap;
    color:var(--text-color)}
.writing:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 16px var(--shadow-color)}
ul.tirets {
    list-style-type:none;
    padding-left:20px;
    margin:10px 0}
ul.tirets li::marker {
    content:"– ";
    color:var(--text-color);
    font-weight:700}
.no-bullet {
    list-style:none}
.bullet {
    display:inline-block;
    width:20px;
    height:20px;
    border:2px solid #333;
    border-radius:50%;
    text-align:center;
    line-height:18px;
    font-weight:700;
    margin:0 4px;
    font-size:14px;
    background-color:var(--bullet-bg);
    color:var(--bullet-text);
    border-color:var(--bullet-bg)}
.sentence {
    display:block;
    width:fit-content;
    margin:0 auto 10px auto;
    text-align:center;
    font-size:1em;
    background:var(--sentence-bg);
    color:var(--text-color);
    padding:5px;
    border:1px solid var(--border-color);
    border-radius:8px;
    white-space:pre-wrap;
    box-shadow:0 2px 5px var(--shadow-color);
    max-width:90%;
    transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.question {
    background:var(--question-bg);
    color:var(--text-color);
    border:1px solid var(--border-color);
    border-radius:8px;
    margin-bottom:15px;
    padding:15px;
    text-align:justify;
    transition:background-color .3s ease,color .3s ease,border-color .3s ease}
p {
    margin:0;
    padding-bottom:10px;
    text-align:justify}
.table-scroll {
    width:fit-content;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-left:auto;
    margin-right:auto}
.table,.table-2cols,.table-3cols,.table-4cols,.table-7cols {
    background-color:var(--bg-article);
    display:grid;
    width:fit-content;
    max-width:100%;
    margin:1.2em 0;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 1px 3px var(--shadow-color)}
.table,.table-2cols {
    grid-template-columns:minmax(100px,max-content) minmax(200px,max-content)}
.table-3cols {
    grid-template-columns:minmax(100px,max-content) minmax(120px,max-content) minmax(200px,max-content)}
.table-4cols {
    grid-template-columns:minmax(80px,max-content) minmax(80px,max-content) minmax(100px,max-content) minmax(150px,max-content)}
.table-7cols {
    grid-template-columns:minmax(80px,max-content) minmax(100px,max-content) minmax(100px,max-content) minmax(120px,max-content) minmax(140px,max-content) minmax(160px,max-content) minmax(200px,max-content)}
.ligne-header {
    display:contents}
.ligne-header>* {
    background-color:var(--bg-ligne-header);
    color:var(--label-color);
    font-weight:700;
    padding:12px}
.ligne {
    display:contents}
.ligne>.col {
    padding:5px;
    color:var(--text-color);
    line-height:1.4;
    background-color:var(--bg-article);
    border-bottom:1px solid var(--border-color);
    transition:background-color .3s ease}
.ligne:last-child>.col {
    border-bottom:none}
.ligne:hover>.col {
    background-color:var(--sublabel-bg-color)}
.table .ligne:nth-child(even)>.col,.table-2cols .ligne:nth-child(even)>.col,.table-3cols .ligne:nth-child(even)>.col {
    background-color:rgba(0,0,0,.03)}
.drop-enabled .options-container {
    display:flex;
    flex-direction:column;
    max-height:200px;
    overflow-y:auto;
    margin-bottom:.4em;
    gap:.25em}
.drop-enabled .options-container .o {
    display:block;
    padding:4px 8px;
    border-radius:4px;
    cursor:grab;
    background-color:var(--o-bg);
    transition:background-color .25s ease;
    line-height:1.15;
    margin:0;
    color:var(--text-color)}
.drop-enabled .options-container .o:hover {
    background-color:var(--o-hover-bg)}
.drop-enabled .dropzone {
    border:2px solid var(--border-color);
    min-height:55px;
    padding:6px;
    border-radius:4px;
    background-color:var(--dropzone-bg);
    margin-top:.3em;
    transition:background-color .3s,border-color .3s}
.drop-enabled .dropzone ul {
    list-style:none;
    padding:0;
    margin:0}
.drop-enabled .dropzone li {
    margin-bottom:.3em}
.drop-enabled .feedbk {
    margin-top:.3em;
    font-weight:600;
    color:var(--feedback-blue);
    font-size:.95rem}
.drop-enabled .dropzone .o.correct {
    background-color:#28a745;
    color:#fff;
    font-weight:700}
.drop-enabled .dropzone .o.incorrect {
    background-color:#dc3545;
    color:#fff;
    font-weight:700}
.drop-enabled .dropzone .o.correct-missed {
    background-color:#a8e6a3;
    color:#000;
    font-weight:700;
    opacity:.85;
    position:relative;
    padding-left:70px}
.drop-enabled .dropzone .o.correct-missed::before {
    content:"missed";
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);
    background-color:#28a745;
    color:#fff;
    font-size:.7em;
    font-weight:700;
    padding:2px 6px;
    border-radius:3px;
    white-space:nowrap}
#reset-all-btn {
    padding:6px 14px;
    font-size:.95rem;
    border:1px solid var(--border-color);
    background:var(--reset-bg);
    border-radius:4px;
    cursor:pointer;
    margin:1em auto;
    color:var(--text-color);
    transition:background-color .3s,color .3s,border-color .3s;
    display:block}
#reset-all-btn:hover {
    background:var(--reset-bg-hover)}
@keyframes slideIn {
    from {
    opacity:0;
    transform:translateY(-10px)}
to {
    opacity:1;
    transform:translateY(0)}
}
@keyframes slideInDesktop {
    from {
    opacity:0;
    transform:translate(-50%,-10px)}
to {
    opacity:1;
    transform:translateX(-50%)}
}
@media (max-width:850px) {
    .table,.table-2cols {
    grid-template-columns:minmax(80px,max-content) minmax(150px,max-content)}
.table-3cols {
    grid-template-columns:minmax(70px,max-content) minmax(90px,max-content) minmax(150px,max-content)}
.table-4cols {
    grid-template-columns:minmax(60px,max-content) minmax(70px,max-content) minmax(100px,max-content) minmax(130px,max-content)}
.table-7cols {
    grid-template-columns:minmax(50px,max-content) minmax(70px,max-content) minmax(70px,max-content) minmax(80px,max-content) minmax(100px,max-content) minmax(120px,max-content) minmax(150px,max-content)}
}
@media (max-width:768px) {
    .search-container {
    position:relative;
    width:100%;
    padding:8px 12px;
    box-sizing:border-box;
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:6px;
    margin:0 auto}
.search-container.sticky-controls {
    position:fixed;
    top:20px;
    left:10px;
    right:10px;
    width:auto;
    min-width:0;
    max-width:none;
    margin:0;
    z-index:2000;
    padding:10px 15px;
    background:rgba(var(--bg-color-rgb),.95);
    backdrop-filter:blur(10px);
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    animation:slideIn .3s ease-out;
    transform:none}
.search-box {
    width:100%;
    min-width:0;
    flex:1;
    font-size:.9rem}
.search-controls {
    display:flex;
    align-items:center;
    gap:5px;
    flex-shrink:0}
.icon-btn {
    width:28px;
    height:28px;
    font-size:14px;
    padding:0}
#search-count {
    font-size:.8rem;
    min-width:24px;
    text-align:center}
.chapter-header {
    flex-direction:column;
    align-items:flex-start;
    gap:10px}
.container {
    flex-direction:column}
.sidebar {
    width:100%;
    max-height:200px;
    overflow-y:auto;
    position:relative;
    z-index:1000;
    height:auto;
    padding:15px}
.sidebar a {
    padding:6px 10px;
    font-size:.95rem}
main {
    padding:10px;
    margin:0;
    overflow:visible}
}
@media (max-width:600px) {
    .search-container {
    padding:6px 10px;
    gap:6px}
.search-box {
    font-size:.85rem;
    padding:6px 10px}
.icon-btn {
    width:24px;
    height:24px;
    font-size:12px}
#search-count {
    font-size:.7rem;
    min-width:20px}
.sidebar {
    font-size:.9rem;
    padding:10px}
.btn {
    font-size:12px;
    padding:6px 12px}
p.o,p.q {
    font-size:.95rem}
.accordion+.panel .video-container {
    margin:.5em 0}
.accordion+.panel .video-container video {
    width:100%;
    height:auto}
.table-scroll {
    width:100%}
.table-2cols {
    width:100%;
    grid-template-columns:minmax(100px,1fr) minmax(150px,1fr)}
.table,.table-3cols,.table-4cols,.table-7cols {
    width:100%;
    min-width:max-content}
.table .col,.table-2cols .col,.table-3cols .col,.table-4cols .col,.table-7cols .col {
    text-align:left;
    text-align:start}
}
.quiz-wrapper {
    background-color:#fff;
    border-radius:8px;
    padding:20px;
    transition:background-color .3s ease}
.quiz-question {
    background-color:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:6px;
    padding:15px;
    margin-bottom:20px;
    transition:background-color .3s ease,border-color .3s ease,opacity .3s ease;
    max-width:500px}
.quiz-question.disabled {
    pointer-events:none}
.quiz-title {
    color:#111827;
    font-weight:600;
    margin-bottom:12px;
    line-height:1.4;
    transition:color .3s ease}
.quiz-options {
    display:flex;
    flex-direction:column;
    gap:10px}
.quiz-option-label {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 14px;
    background-color:#fff;
    border:2px solid #d1d5db;
    border-radius:6px;
    cursor:pointer;
    transition:all .3s ease;
    position:relative}
.quiz-option-label::before {
    content:attr(data-letter);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:26px;
    height:26px;
    border-radius:50%;
    background-color:#e5e7eb;
    color:#374151;
    font-weight:700;
    font-size:.85rem;
    transition:all .3s ease;
    flex-shrink:0;
    margin-top:2px}
.quiz-option-label:hover {
    background-color:#f3f4f6;
    border-color:#9ca3af;
    transform:translateX(4px)}
.quiz-option-label input[type=radio] {
    position:absolute;
    opacity:0;
    width:0;
    height:0;
    pointer-events:none}
.quiz-option-label span {
    flex:1;
    color:#1f2937;
    line-height:1.5;
    transition:color .3s ease}
.quiz-option-label:has(input:checked) {
    background-color:#dbeafe;
    border-color:#2563eb}
.quiz-option-label:has(input:checked)::before {
    background-color:#2563eb;
    color:#fff}
.quiz-option-label:has(input:checked) span {
    color:#1e40af;
    font-weight:600}
.quiz-feedback {
    margin-top:12px;
    padding:0;
    border-radius:6px;
    line-height:1.5;
    transition:all .3s ease;
    background-color:transparent;
    color:#6b7280}
.quiz-feedback:empty {
    display:none}
.quiz-feedback.correct {
    padding:12px;
    background-color:#d1fae5;
    color:#065f46;
    border:1px solid #a7f3d0;
    display:block}
.quiz-feedback.incorrect {
    padding:12px;
    background-color:#fee2e2;
    color:#991b1b;
    border:1px solid #fecaca;
    display:block}
.quiz-reset,.quiz-submit {
    padding:12px 28px;
    border:none;
    border-radius:6px;
    font-weight:600;
    font-size:1rem;
    cursor:pointer;
    transition:all .3s ease;
    margin-right:12px;
    margin-top:20px}
.quiz-submit {
    background-color:#2563eb;
    color:#fff}
.quiz-submit:hover {
    background-color:#1d4ed8;
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(37,99,235,.3)}
.quiz-reset {
    background-color:#6b7280;
    color:#fff}
.quiz-reset:hover {
    background-color:#4b5563;
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,.2)}
@keyframes scoreShine {
    0%,100% {
    box-shadow:0 4px 15px rgba(37,99,235,.3),inset 0 1px 0 rgba(255,255,255,.8),0 2px 8px rgba(0,0,0,.1)}
50% {
    box-shadow:0 4px 15px rgba(37,99,235,.3),inset 0 1px 0 rgba(255,255,255,.8),0 0 25px 5px rgba(37,99,235,.2)}
}
.quiz-score {
    display:inline-block;
    padding:12px 24px;
    background-color:#eef2ff;
    color:#3730a3;
    border:1px solid #c7d2fe;
    border-radius:6px;
    font-weight:600;
    font-size:1rem;
    margin-left:12px;
    margin-top:20px;
    transition:all .3s ease;
    vertical-align:top;
    box-shadow:none;
    text-align:center;
    letter-spacing:normal;
    position:relative;
    overflow:hidden}
.quiz-score::before {
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
    transform:rotate(45deg);
    transition:all .5s ease}
.quiz-score:hover {
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 6px 25px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px rgba(0,0,0,.15);
    border-color:#1d4ed8;
    background:linear-gradient(135deg,#1e40af 0,#2563eb 50%,#3b82f6 100%);
    animation:scoreShine 2s ease-in-out infinite}
.quiz-score:hover::before {
    left:100%}
.quiz-score-text {
    position:relative;
    z-index:1;
    text-shadow:0 1px 3px rgba(0,0,0,.2);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.quiz-question.disabled .quiz-option-label {
    cursor:not-allowed}
.quiz-question.disabled .quiz-option-label:hover {
    transform:none}
@media (max-width:768px) {
    .quiz-wrapper {
    padding:15px}
.quiz-question {
    padding:12px}
.quiz-option-label {
    padding:10px 12px;
    gap:10px}
.quiz-option-label::before {
    min-width:24px;
    height:24px;
    font-size:.8rem}
.quiz-reset,.quiz-submit {
    padding:10px 20px;
    font-size:.95rem;
    margin-right:8px;
    width:100%;
    margin-top:15px}
.quiz-score {
    padding:14px 24px;
    font-size:1.15rem;
    margin-left:0;
    margin-right:0;
    margin-top:15px;
    display:block;
    text-align:center;
    width:100%;
    box-sizing:border-box}
}
@media (max-width:480px) {
    .quiz-wrapper {
    padding:12px}
.quiz-title {
    font-size:.95rem}
.quiz-option-label {
    padding:8px 10px}
.quiz-option-label span {
    font-size:.9rem}
.quiz-reset,.quiz-submit {
    font-size:.9rem;
    padding:8px 16px}
.quiz-score {
    padding:12px 20px;
    font-size:1.05rem}
}

/* ═══════════════════════════════════════════════════════════════════
   TOEIC iBT — Présentation chapters (light mode)
   Composants utilisés dans les pages de présentation
═══════════════════════════════════════════════════════════════════ */

/* ── Variables TOEIC mappées sur les variables chapter ────────── */
:root {
    --toeic-blue:        #1f7cff;
    --toeic-blue-dark:   #1260d4;
    --toeic-blue-light:  #e8f1ff;
    --toeic-blue-mid:    #c2d9ff;
    --toeic-orange:      #ff8c00;
    --toeic-orange-light:#fff3e0;
    --toeic-green:       #10b981;
    --toeic-green-light: #d1fae5;
    --toeic-red:         #ef4444;
    --toeic-red-light:   #fee2e2;
    --toeic-teal:        #06b6d4;
    --toeic-surface:     #ffffff;
    --toeic-surface-2:   #f8faff;
    --toeic-border:      #e2e8f8;
    --toeic-border-strong:#c5d0f0;
    --toeic-text:        #1a2340;
    --toeic-text-2:      #4a5578;
    --toeic-text-3:      #8892b0;
    --toeic-radius:      12px;
    --toeic-radius-sm:   6px;
    --toeic-shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --toeic-shadow:      0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    --toeic-transition:  0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --toeic-font-mono:   'DM Mono', 'Fira Code', monospace}

/* ── Instruction / label ─────────────────────────────────────── */
.toeic-instruction {
    font-size: .93rem; color: var(--toeic-text-2); font-style: italic;
    margin: 0 0 10px 0; padding: 0; line-height: 1.5}

/* ── Bloc question ─────────────────────────────────────────────── */
.toeic-question {
    background: var(--toeic-surface);
    border: 1.5px solid var(--toeic-border);
    border-radius: var(--toeic-radius);
    margin-bottom: 16px;
    padding: 18px 22px;
    transition: border-color var(--toeic-transition), box-shadow var(--toeic-transition);
    box-shadow: var(--toeic-shadow-sm)}
.toeic-question:hover {
    border-color: var(--toeic-blue-mid);
    box-shadow: var(--toeic-shadow)}
.toeic-question-prompt {
    font-weight: 600; font-size: .97rem;
    color: var(--toeic-text); margin: 0 0 12px 0;
    padding: 0; text-align: left; line-height: 1.5}
.toeic-question-num {
    display: inline-block; background: #1a2340; color: #fff;
    font-size: .72rem; font-weight: 700; font-family: var(--toeic-font-mono);
    padding: 2px 7px; border-radius: 10px; margin-right: 6px;
    vertical-align: middle; letter-spacing: .3px}
.toeic-question label {
    position: relative; display: flex; align-items: center;
    gap: 10px; cursor: pointer; padding: 8px 12px;
    margin-bottom: 0; border-radius: var(--toeic-radius-sm);
    font-weight: 400; font-size: .95rem; color: var(--toeic-text-2);
    transition: background var(--toeic-transition), color var(--toeic-transition);
    line-height: 1.45}
.toeic-question label:hover {
    background: var(--toeic-blue-light); color: var(--toeic-blue)}
.toeic-question input[type=radio],
.toeic-question input[type=checkbox] {
    position: absolute; opacity: 0; pointer-events: none}
.toeic-question label .option-letter {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 22px; height: 22px; min-width: 22px;
    border-radius: 50%; border: 2px solid var(--toeic-blue);
    background: var(--toeic-surface); color: var(--toeic-blue);
    font-weight: 700; font-size: .75em; font-family: var(--toeic-font-mono);
    overflow: hidden; white-space: nowrap;
    transition: all var(--toeic-transition)}
.toeic-question label:has(input[type=radio]:checked),
.toeic-question label:has(input[type=checkbox]:checked) {
    background: var(--toeic-blue-light); color: var(--toeic-blue); font-weight: 600}
.toeic-question label:has(input[type=radio]:checked) .option-letter,
.toeic-question label:has(input[type=checkbox]:checked) .option-letter {
    background: var(--toeic-blue); border-color: var(--toeic-blue);
    color: #fff; transform: scale(1.12)}

/* ── Source text (email, notice, passage) ──────────────────────── */
.toeic-source-text {
    background: var(--toeic-surface-2);
    border: 1px solid var(--toeic-text);
    border-radius: var(--toeic-radius);
    padding: 16px 20px; margin-bottom: 20px;
    font-size: .95rem; line-height: 1.6; color: var(--toeic-text);
    white-space: pre-line; text-align: justify}
.toeic-source-text:has(.toeic-email-headers) { white-space: normal}
.toeic-source-title {
    display: block; font-size: .72rem; font-weight: 700;
    letter-spacing: 1.2px; color: var(--toeic-text); text-transform: uppercase;
    margin: 0 0 8px 0; font-family: var(--toeic-font-mono);
    line-height: 1;          /* pas de hauteur de ligne fantôme */
    white-space: normal;     /* annule pre-line hérité du parent */
}
.toeic-email-headers {
    display: flex; flex-direction: column; gap: 2px;
    border-bottom: 1px solid var(--toeic-border);
    padding-bottom: 10px; margin-bottom: 12px;
    font-size: .88rem; color: var(--toeic-text-2)}

/* ── Transcript body ───────────────────────────────────────────── */
.toeic-transcript-body {
    background: var(--toeic-surface-2); border: 1px solid var(--toeic-border);
    border-radius: var(--toeic-radius-sm); padding: 10px 14px;
    font-size: .88rem; color: var(--toeic-text-2);
    line-height: 1.6; margin-bottom: 10px; white-space: pre-wrap}
.toeic-transcript-always { display: block !important; margin-bottom: 12px}

/* ── Fill-in the words — lettre par lettre ─────────────────────── */
.toeic-blank-group { display: inline; white-space: nowrap}
.toeic-blank-num {
    font-family: var(--toeic-font-mono); font-size: .62em; font-weight: 700;
    color: var(--toeic-blue); vertical-align: super; margin-right: 1px;
    letter-spacing: 0; line-height: 1; user-select: none}
.toeic-letter-boxes {
    display: inline-flex; vertical-align: middle; margin: 0 4px;
    border: 2px solid var(--toeic-blue);
    border-radius: 4px; overflow: hidden}
.toeic-letter-box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: none; border-left: 1px solid var(--toeic-blue-mid);
    background: transparent; color: var(--toeic-blue-dark, #1260d4);
    font-family: var(--toeic-font-mono); font-weight: 700;
    font-size: .93em; text-align: center; padding: 0; outline: none;
    transition: background var(--toeic-transition), color var(--toeic-transition);
    caret-color: var(--toeic-blue); border-radius: 0;
    cursor: text; user-select: none; line-height: 26px}
.toeic-letter-box:first-child { border-left: none}
.toeic-letter-box:focus { background: var(--toeic-orange-light); color: #b45309}
.toeic-letter-boxes:focus-within {
    border-color: var(--toeic-orange);
    box-shadow: 0 0 0 2px var(--toeic-orange-light)}
.toeic-letter-box.filled { background: var(--toeic-blue-light)}

/* ── Textarea & word count ─────────────────────────────────────── */
.toeic-textarea {
    width: 100%; box-sizing: border-box; font-size: 1em;
    padding: 14px 16px; border: 1.5px solid var(--toeic-border);
    border-radius: var(--toeic-radius); resize: vertical; margin-bottom: 6px;
    background: var(--toeic-surface-2); color: var(--toeic-text);
    transition: border-color var(--toeic-transition); line-height: 1.65}
.toeic-textarea:focus {
    outline: none; border-color: var(--toeic-blue);
    box-shadow: 0 0 0 3px rgba(31,124,255,.12); background: var(--toeic-surface)}
.toeic-word-count {
    font-size: .82em; color: var(--toeic-text-3); text-align: right;
    margin-bottom: 16px; font-family: var(--toeic-font-mono)}
.toeic-word-count.warn { color: var(--toeic-orange)}
.toeic-word-count.ok   { color: var(--toeic-green)}

/* ── Context sentence (Build a Sentence) ──────────────────────── */
.toeic-context {
    font-size: .93rem; color: var(--toeic-text-2); font-style: italic;
    margin: 0 0 10px 0; padding: 0}

/* ── Discussion posts ─────────────────────────────────────────── */
.toeic-discussion-posts {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px}
.toeic-post { display: flex; align-items: flex-start; gap: 10px}
.toeic-post.professor .toeic-post-bubble { border-left-color: var(--toeic-blue)}
.toeic-post-avatar {
    flex-shrink: 0;
    margin-top: 2px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--toeic-surface-2)}
.toeic-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block}
.toeic-post-bubble {
    background: var(--toeic-surface-2); border: 1px solid var(--toeic-border);
    
    border-radius: 0 var(--toeic-radius) var(--toeic-radius) var(--toeic-radius);
    padding: 10px 14px; font-size: .93rem; line-height: 1.6;
    color: var(--toeic-text); flex: 1}
.toeic-post-speaker {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--toeic-text-3); margin-bottom: 4px;
    font-family: var(--toeic-font-mono)}
.toeic-post-avatar img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: top center;
    display: block;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important}

/* ── Build-a-sentence (drag-and-drop) ─────────────────────────── */
.bs-hint { font-size: .82rem; color: var(--toeic-text-3); margin: 0 0 10px}
.bs-frame {
    background: var(--toeic-surface-2); border: 1.5px solid var(--toeic-border);
    border-radius: var(--toeic-radius); padding: 16px 20px;
    font-size: 1.05rem; line-height: 3.6; color: var(--toeic-text); margin-bottom: 12px}
.bs-gap {
    display: inline-flex; align-items: center; gap: 4px;
    vertical-align: middle; margin: 0 3px}
.bs-slot {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 72px; height: 34px;
    border-bottom: 2.5px solid var(--toeic-blue);
    background: rgba(31,124,255,.07); border-radius: 4px 4px 0 0;
    padding: 0 6px; cursor: default; font-size: .88rem;
    transition: background .12s, border-color .12s;
    white-space: nowrap; vertical-align: middle}
.bs-slot.bs-slot-over { background: var(--toeic-blue-light); border-bottom-color: var(--toeic-blue); border-bottom-width: 3px}
.bs-slot.bs-slot-full { background: var(--toeic-blue); border-bottom-color: var(--toeic-blue); gap: 5px; padding: 0 6px 0 10px}
.bs-slot-txt { color: #fff; font-weight: 600; font-size: .88rem; cursor: grab; user-select: none}
.bs-slot-txt:active { cursor: grabbing}
.bs-slot-rm {
    color: rgba(255,255,255,.8); font-size: .82rem; cursor: pointer;
    padding: 1px 3px; border-radius: 50%; transition: background .12s; pointer-events: all}
.bs-slot-rm:hover { background: rgba(255,255,255,.25); color: #fff}
.toeic-wordbank {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
    background: var(--toeic-surface-2); border: 1px dashed var(--toeic-border-strong);
    border-radius: var(--toeic-radius); margin-top: 8px; transition: background .12s}
.toeic-wordbank.bs-bank-over { background: var(--toeic-blue-light)}
.toeic-word-chip {
    display: inline-block; padding: 5px 12px;
    background: var(--toeic-surface); border: 1.5px solid var(--toeic-blue-mid);
    border-radius: 20px; font-size: .88rem; font-weight: 600;
    color: var(--toeic-blue-dark, #1260d4); cursor: grab; user-select: none;
    transition: all .12s; box-shadow: var(--toeic-shadow-sm)}
.toeic-word-chip:hover:not(.used) {
    background: var(--toeic-blue-light); border-color: var(--toeic-blue);
    transform: translateY(-1px); box-shadow: var(--toeic-shadow)}
.toeic-word-chip:active { cursor: grabbing}
.toeic-word-chip.used { opacity: .32; cursor: default; pointer-events: none}

/* ── Bouton de soumission TOEIC ────────────────────────────────── */
.btn-toeic-submit {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 11px 28px;
    background: #1a2340; color: #fff;
    border: none; border-radius: 8px; font-weight: 700;
    font-size: .95rem; cursor: pointer; letter-spacing: .3px;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    text-decoration: none}
.btn-toeic-submit:hover {
    background: #1f7cff; transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31,124,255,.35)}
.btn-toeic-submit.btn-start {
    font-size: 1.05rem; padding: 14px 36px;
    background: #1f7cff}
.btn-toeic-submit.btn-start:hover {
    background: #1260d4; transform: translateY(-2px)}

/* ── Bouton Check answers + feedback : bloc autonome espacé ──── */
.toeic-check-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px; margin: 20px 0 0 0}
.btn-check-mcq, .btn-check-fill, .btn-check-bs {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 22px; background: #1a2340; color: #fff; border: none;
    border-radius: 6px; font-weight: 700; font-size: .9rem;
    cursor: pointer; transition: background .2s, transform .15s;
    flex-shrink: 0}
.btn-check-mcq:hover, .btn-check-fill:hover, .btn-check-bs:hover {
    background: #1f7cff; transform: translateY(-1px)}
.btn-reset-mode {
    background: #4b5563 !important}
.btn-reset-mode:hover {
    background: #6b7280 !important}

/* ── MCQ / fill feedback ───────────────────────────────────────── */
.mcq-feedback, .fill-feedback {
    display: none;                          /* JS met display:block  */
    width: fit-content;
    font-weight: 700; font-size: .92rem;
    padding: 7px 14px; border-radius: var(--toeic-radius-sm);
    
    background: var(--toeic-blue-light);
    color: var(--toeic-blue);
    margin: 10px 0 4px 0;
    animation: feedbackIn .2s ease-out}
@keyframes feedbackIn {
    from { opacity: 0; transform: translateY(-4px)}
    to   { opacity: 1; transform: translateY(0)}
}

/* ── Source text fill-in (Complete the Words) ─────────────────── */
.toeic-source-text.toeic-fill-para {
    line-height: 2.6; background: var(--toeic-surface);
    border: 1.5px solid var(--toeic-border);
    margin-bottom: 0;                       /* la .toeic-check-row gère l'espace */
}

/* ── États lettre par lettre après correction ─────────────────── */
.toeic-letter-box.correct {
    background: var(--toeic-green-light) !important;
    border-color: transparent !important;
    color: #065f46 !important}
.toeic-letter-box.incorrect {
    background: var(--toeic-red-light) !important;
    border-color: transparent !important;
    color: #991b1b !important}
/* Bordure du groupe selon résultat global */
.toeic-letter-boxes.group-correct {
    border-color: var(--toeic-green) !important;
    box-shadow: 0 0 0 2px rgba(16,185,129,.18)}
.toeic-letter-boxes.group-incorrect {
    border-color: var(--toeic-red) !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,.15)}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .bs-frame { font-size: .95rem; line-height: 3.2; padding: 12px 14px}
    .toeic-question { padding: 14px 16px}
    .toeic-source-text { padding: 12px 14px; font-size: .9rem}
    .toeic-discussion-posts .toeic-post-avatar { width: 32px; font-size: 1.5rem}
}

/* ── Fill-in passage : line-height étendu pour les cases lettres ── */
.toeic-source-text.toeic-fill-mode {
    line-height: 2.6;
    white-space: normal}

/* ── Lecteur audio custom (toeic-player) ─────────────────────── */
.toeic-player {
    display: flex; align-items: center; gap: 10px;
    background: var(--toeic-surface-2);
    border: 1.5px solid var(--toeic-border);
    border-radius: var(--toeic-radius-sm);
    padding: 8px 12px;
    margin: 6px 0}
.toeic-player-btn {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--toeic-blue);
    color: #fff;
    font-size: .85rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, transform .15s}
.toeic-player-btn:hover { background: var(--toeic-blue-dark); transform: scale(1.08)}
.toeic-player-label {
    font-size: .82rem; font-weight: 600;
    color: var(--toeic-text-2);
    white-space: nowrap}
.toeic-player-bar {
    flex: 1; height: 4px;
    background: var(--toeic-border-strong);
    border-radius: 2px; overflow: hidden;
    cursor: pointer}
.toeic-player-progress {
    height: 100%; width: 0%;
    background: var(--toeic-blue);
    border-radius: 2px;
    transition: width .1s linear}
.toeic-player-time {
    font-size: .75rem; color: var(--toeic-text-3);
    font-family: var(--toeic-font-mono);
    white-space: nowrap}

/* ── Transcript accordéon ────────────────────────────────────── */
.toeic-transcript {
    margin-top: 4px}
.toeic-transcript summary {
    cursor: pointer;
    font-size: .8rem; font-weight: 600;
    color: var(--toeic-blue);
    list-style: none;
    display: inline-flex; align-items: center; gap: 4px}
.toeic-transcript summary::-webkit-details-marker { display: none}
.toeic-transcript summary::before {
    content: '▶';
    font-size: .6rem;
    transition: transform .2s;
    display: inline-block}
.toeic-transcript[open] summary::before { transform: rotate(90deg)}
.toeic-transcript-body {
    margin-top: 6px;
    padding: 10px 14px;
    background: var(--toeic-surface-2);
    border: 1px solid var(--toeic-border);
    border-radius: var(--toeic-radius-sm);
    font-size: .88rem; line-height: 1.6;
    color: var(--toeic-text-2);
    white-space: normal;
    margin-bottom: 6px}
.toeic-transcript-body p { padding-bottom: 0; margin: 0 0 .3rem}
.toeic-transcript-body p:last-child { margin-bottom: 0}

/* ── Blocs Q/R interview ─────────────────────────────────────── */
.toeic-interview-item {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--toeic-border)}
.toeic-interview-item:last-of-type { border-bottom: none}
.toeic-interview-role {
    font-size: .72rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--toeic-text-3);
    margin-bottom: 4px}

/* ── Badge Q1/Q2… dans le lecteur ───────────────────────────── */
.toeic-player-qnum {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #1a2340;
    color: #fff;
    font-size: .75rem; font-weight: 700;
    font-family: var(--toeic-font-mono)}

/* ═══════════════════════════════════════════════════════════════════
   Rubric tables + lr-sentence-text — variables light
═══════════════════════════════════════════════════════════════════ */
:root {
    --rubric-label-bg:      #f8faff;
    --rubric-label-text:    #1a2340;
    --rubric-label-border:  #e2e8f8;
    --rubric-label-sub:     #6b7280;
    --rubric-th-label-bg:   #1a2340;
    --rubric-th-label-text: #fff;
    --rubric-th-label-border: #2d3a5a;
    --rubric-green-bg:      #d1fae5;
    --rubric-green-text:    #065f46;
    --rubric-green-border:  #10b981;
    --rubric-green-th-bg:   #059669;
    --rubric-orange-bg:     #fef3c7;
    --rubric-orange-text:   #92400e;
    --rubric-orange-border: #fbbf24;
    --rubric-orange-th-bg:  #d97706;
    --rubric-red-bg:        #fee2e2;
    --rubric-red-text:      #991b1b;
    --rubric-red-border:    #ef4444;
    --rubric-red-th-bg:     #b91c1c;
    --rubric-gray-bg:       #f3f4f6;
    --rubric-gray-text:     #374151;
    --rubric-gray-border:   #9ca3af;
    --rubric-gray-th-bg:    #6b7280}

/* ── lr-sentence-text ─────────────────────────────────────────── */
.lr-sentence-text {
    margin-top: .5rem;
    background: var(--rubric-label-bg);
    border: 1px solid var(--rubric-label-border);
    
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rubric-label-text)}

/* ── Rubric table headers ─────────────────────────────────────── */
.rubric-th {
    width: 20%; padding: 5px 8px; color: #fff; font-weight: 800;
    text-align: center; border: 1px solid}
.rubric-th-label {
    background: var(--rubric-th-label-bg);
    color: var(--rubric-th-label-text) !important;
    font-weight: 700 !important;
    text-align: left !important;
    border-color: var(--rubric-th-label-border) !important}
.rubric-th-green  { background: var(--rubric-green-th-bg);  border-color: var(--rubric-green-border)}
.rubric-th-orange { background: var(--rubric-orange-th-bg); border-color: var(--rubric-orange-border)}
.rubric-th-red    { background: var(--rubric-red-th-bg);    border-color: var(--rubric-red-border)}
.rubric-th-gray   { background: var(--rubric-gray-th-bg);   border-color: var(--rubric-gray-border)}

/* ── Rubric table cells ───────────────────────────────────────── */
.rubric-td {
    padding: 6px 8px; vertical-align: top;
    text-align: left; line-height: 1.3; border: 1px solid}
.rubric-td-label {
    background: var(--rubric-label-bg);
    color: var(--rubric-label-text);
    border-color: var(--rubric-label-border);
    font-weight: 700}
.rubric-td-sub {
    font-weight: 400;
    color: var(--rubric-label-sub);
    font-size: .72rem}
.rubric-td-green  { background: var(--rubric-green-bg);  color: var(--rubric-green-text);  border-color: var(--rubric-green-border)}
.rubric-td-orange { background: var(--rubric-orange-bg); color: var(--rubric-orange-text); border-color: var(--rubric-orange-border)}
.rubric-td-red    { background: var(--rubric-red-bg);    color: var(--rubric-red-text);    border-color: var(--rubric-red-border)}
.rubric-td-gray   { background: var(--rubric-gray-bg);   color: var(--rubric-gray-text);   border-color: var(--rubric-gray-border)}

/* ── Build-a-Sentence slot states (light) ──────────────────────── */
:root {
    --bs-correct-bg:      #d1fae5;
    --bs-correct-text:    #065f46;
    --bs-correct-border:  #10b981;
    --bs-incorrect-bg:    #fee2e2;
    --bs-incorrect-text:  #991b1b;
    --bs-incorrect-border:#ef4444;
    --bs-missed-bg:       #fee2e2;
    --bs-missed-text:     #991b1b;
    --bs-missed-border:   #ef4444}

/* ── Study tips ───────────────────────────────────────────────── */
.study-tip { color: #6b7280}
.study-tip strong { color: #374151}
/* ── Suffix guide (Task 1 – Complete the Words) ───────────────── */
.suffix-guide {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .6rem 1rem;
    margin: 1rem 0;
    background: var(--bg-article)}
.suffix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin: .4rem 0 .6rem}
.suffix-table th,
.suffix-table td {
    border: 1px solid var(--border-color);
    padding: .3rem .6rem;
    text-align: left;
    color: var(--text-color)}
.suffix-table th {
    background: var(--bg-ligne-header);
    font-weight: 600}
.suffix-table code {
    background: var(--sublabel-bg-color);
    color: var(--sublabel-color);
    padding: .1rem .3rem;
    border-radius: 3px;
    font-size: .85rem}
.suffix-warning {
    font-size: .83rem;
    color: var(--feedback-color);
    margin: .3rem 0 .5rem;
    line-height: 1.5}


/* ===================================================================
 * MODE SOMBRE DES COMPOSANTS .toeic-* (fusionné depuis
 * chapter-toeic-ibt-dark.css, scopé sous body.dark-mode).
 * Permet de supprimer le swap de fichier CSS : un seul fichier gère
 * clair + sombre. @keyframes du dark renommés en *-dark.
 * =================================================================== */
html body.dark-mode{color-scheme:dark;
    --primary-color:#7f8c8d;
    --secondary-color:#A1A1A1;
    --text-color:#f0f0f0;
    --label-color:#d9e2ec;
    --label-bg-color:#243b53;
    --sublabel-color:#d9e2ec;
    --sublabel-bg-color:#243b53;
    --bg:#121212;
    --bg-article:#222;
    --bg-writing-example:#2a2a2a;
    --sidebar-bg:#2B2A2A;
    --bg-mark:#FFFDB5;
    --link-color:#2c3e50;
    --hover-color:#555;
    --search-color:white;
    --border-color:#444;
    --shadow-color:rgba(0, 0, 0, 0.4);
    --feedback-color:#7f8c8d;
    --reset-bg:black;
    --reset-bg-hover:#404040;
    --o-bg:#2a2a2a;
    --o-hover-bg:#3a3a3a;
    --o-hover:white;
    --o-selected-bg:#555;
    --o-correct-bg:#1f7a31;
    --o-incorrect-bg:#922626;
    --o-correct-missed-bg:#3f7f3f;
    --bg-ligne-header:#545454;
    --doc-bg:#222;
    --doc-border:#555;
    --bullet-bg:#555;
    --bullet-text:#f0f0f0;
    --search-bg:rgba(34, 34, 34, 0.85);
    --search-box-bg:rgba(40, 40, 40, 0.95);
    --search-border:var(--border-color);
    --search-shadow:rgba(0, 0, 0, 0.6);
    --enex-text:#8A88FF;
    --frex-text:#A7C4BC;
    --content-bg:black;
    --accordion-bg:#4F4F4F;
    --link-bg:#2c3e50;
    --link-bga:gray;
    --link-bgah:white;
    --sentence-bg:#2a2a2a;
    --question-bg:#1a1a1a;
    --writing-border:#555;
    --ipa-symbol-color:#d3d3d3;
    --ipa-example-color:#d3d3d3;
    --exercise-bg:#2d3748;
    --exercise-border:#4a5568;
    --input-bg:#1a202c;
    --input-border:#4a5568;
    --input-focus:#63b3a8;
    --button-bg:#2a9d8f;
    --button-hover:#238276;
    --word-btn-bg:#4a5568;
    --word-btn-hover:#718096;
    --word-btn-selected:#2a9d8f;
    --word-btn-correct:#48bb78;
    --word-btn-incorrect:#f56565;
    --word-btn-missed:#2980b9}
body.dark-mode .enex{color:var(--enex-text);
    font-weight:700}
body.dark-mode .frex{color:var(--frex-text);
    font-weight:700}
body.dark-mode .theme-toggle{cursor:pointer;
    font-size:1.3rem;
    background:0 0;
    border:none;
    color:var(--text-color);
    padding:5px 10px}
body.dark-mode .chapter-header{display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 20px;
    background-color:var(--bg)}
body.dark-mode .chapter-header h1{margin:0;
    font-size:1.5rem;
    color:var(--text-color)}
body.dark-mode .container{display:flex;
    align-items:stretch;
    background-color:var(--content-bg)}
body.dark-mode .content{flex:1;
    padding:10px;
    box-sizing:border-box;
    overflow:visible;
    background-color:var(--content-bg)}
body.dark-mode .sidebar{width:220px;
    background-color:var(--sidebar-bg);
    color:var(--text-color);
    padding:20px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    box-shadow:2px 0 5px var(--shadow-color);
    transition:background-color .5s,color .5s;
    z-index:1000;
    box-sizing:border-box}
body.dark-mode .sidebar a{color:var(--text-color);
    text-decoration:none;
    display:block;
    padding:8px 12px;
    border-radius:4px;
    transition:background-color .3s ease,color .3s ease,font-weight .3s ease;
    font-weight:400;
    word-wrap:break-word;
    overflow-wrap:break-word}
body.dark-mode .sidebar a.active, body.dark-mode .sidebar a:hover{background-color:var(--link-bg);
    color:#fff;
    font-weight:700;
    border-radius:8px}
body.dark-mode .sidebar ul{list-style:none;
    padding-left:0;
    margin-left:0}
body.dark-mode .btn-container{display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:20px 0;
    width:100%}
body.dark-mode .btn{display:inline-block;
    padding:10px 20px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
    background-color:var(--link-bg);
    color:#fff;
    font-weight:700}
body.dark-mode .btn:hover{background-color:var(--link-bga);
    color:var(--link-bgah)}
body.dark-mode .icon-btn{width:32px;
    height:32px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    position:relative;
    transition:background-color .3s ease,color .3s ease;
    background-color:var(--link-bg);
    color:#fff;
    font-weight:700}
body.dark-mode .icon-btn:hover{background-color:var(--link-bga);
    color:var(--link-bgah)}
body.dark-mode .icon-btn.prev::before{content:"▲"}
body.dark-mode .icon-btn.next::before{content:"▼"}
body.dark-mode .accordion{background-color:var(--accordion-bg);
    color:var(--text-color);
    cursor:pointer;
    padding:16px;
    width:100%;
    border:none;
    text-align:left;
    outline:0;
    font-size:1.15em;
    font-weight:700;
    transition:background-color .3s ease,color .3s ease;
    margin-top:10px;
    border-radius:8px;
    box-shadow:0 1px 3px var(--shadow-color)}
body.dark-mode .accordion.active, body.dark-mode .accordion:hover{background-color:var(--primary-color);
    color:#fff}
body.dark-mode .panel{max-height:0;
    overflow:hidden;
    padding:0 12px;
    margin-top:6px;
    background-color:var(--bg-article);
    border-radius:8px;
    box-sizing:border-box}
body.dark-mode .panel, body.dark-mode .panel li, body.dark-mode .panel p{text-align:justify;
    line-height:1.1}
body.dark-mode .search-container{display:flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border-radius:6px;
    background-color:var(--search-bg);
    backdrop-filter:blur(8px);
    width:100%;
    box-sizing:border-box;
    margin:0 auto;
    position:relative;
    z-index:100;
    box-shadow:0 2px 8px var(--search-shadow)}
body.dark-mode .search-container.sticky-controls{background-color:transparent;
    position:fixed;
    top:30px;
    left:50%;
    transform:translateX(-50%);
    width:auto;
    max-width:600px;
    min-width:300px;
    border:1px solid var(--search-border);
    border-radius:8px;
    padding:12px 18px;
    z-index:2000;
    box-shadow:0 4px 16px var(--search-shadow);
    animation:slideInDesktop-dark .3s ease-out}
body.dark-mode .search-box{flex:1;
    min-width:150px;
    padding:8px 12px;
    border:1px solid var(--search-border);
    border-radius:6px;
    font-size:1rem;
    color:var(--text-color);
    background-color:var(--search-box-bg);
    transition:background-color .3s ease,color .3s ease,border-color .3s ease}
body.dark-mode .search-box:focus{outline:0;
    border-color:var(--primary-color);
    box-shadow:0 0 5px var(--primary-color)}
body.dark-mode .search-controls{display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0}
body.dark-mode #search-count{font-weight:600;
    color:var(--text-color);
    min-width:30px;
    text-align:center}
body.dark-mode p.q{font-weight:600;
    margin:10px 0 4px 0;
    line-height:1.1}
body.dark-mode p.o{display:block;
    margin:.4em 0;
    padding:8px 12px;
    cursor:pointer;
    border-radius:6px;
    line-height:1.3;
    transition:background-color .3s ease,color .3s ease;
    background-color:var(--o-bg);
    color:var(--text-color)}
body.dark-mode p.o:hover{background-color:var(--o-hover-bg);
    color:var(--o-hover)}
body.dark-mode p.o.correct{background-color:var(--o-correct-bg);
    color:#fff;
    font-weight:700}
body.dark-mode p.o.incorrect{background-color:var(--o-incorrect-bg);
    color:#fff;
    font-weight:700}
body.dark-mode p.o.selected{background-color:var(--o-selected-bg);
    color:#fff;
    font-weight:700}
body.dark-mode p.o.correct-missed{background-color:var(--o-correct-missed-bg);
    color:var(--text-color);
    font-weight:700}
body.dark-mode .section audio{width:100%;
    max-width:500px;
    margin:1em auto;
    display:block}
body.dark-mode .video-container{width:100%;
    margin:1em 0}
body.dark-mode .video-container video{width:100%;
    aspect-ratio:16/9;
    border-radius:8px;
    box-shadow:0 1px 3px var(--shadow-color);
    display:block;
    object-fit:cover}
body.dark-mode .accordion+.panel img, body.dark-mode .panel img{width:100%;
    max-width:500px;
    height:auto;
    display:block;
    margin:10px auto;
    border-radius:8px;
    box-shadow:0 4px 8px rgba(0,0,0,.1);
    object-fit:cover;
    transition:transform .3s ease,box-shadow .3s ease;
    cursor:pointer}
body.dark-mode .accordion+.panel img:hover, body.dark-mode .panel img:hover{transform:scale(1.05);
    box-shadow:0 6px 14px rgba(0,0,0,.15)}
body.dark-mode mark{background-color:var(--bg-mark);
    color:#000;
    transition:background-color .5s ease,color .5s ease;
    padding:0 2px}
body.dark-mode .doc, body.dark-mode .transcript{background-color:var(--doc-bg);
    font-size:.9rem;
    padding:15px 20px;
    border-radius:6px;
    
    margin:15px 0;
    white-space:normal;
    overflow-x:auto;
    color:var(--text-color)}
body.dark-mode .label{font-weight:700;
    display:block;
    margin:15px 0 5px 0;
    color:var(--text-color)}
body.dark-mode .writing{background-color:var(--bg-writing-example);
    
    padding:20px 25px;
    border-radius:10px;
    margin:20px 0;
    line-height:1.6;
    font-size:.95rem;
    font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
    box-shadow:0 4px 12px var(--shadow-color);
    transition:transform .2s ease,box-shadow .2s ease;
    overflow-x:auto;
    white-space:pre-wrap;
    color:var(--text-color)}
body.dark-mode .writing:hover{transform:translateY(-2px);
    box-shadow:0 6px 16px var(--shadow-color)}
body.dark-mode ul.tirets{list-style-type:none;
    padding-left:20px;
    margin:10px 0}
body.dark-mode ul.tirets li::marker{content:"– ";
    color:var(--text-color);
    font-weight:700}
body.dark-mode .no-bullet{list-style:none}
body.dark-mode .bullet{display:inline-block;
    width:20px;
    height:20px;
    border:2px solid #333;
    border-radius:50%;
    text-align:center;
    line-height:18px;
    font-weight:700;
    margin:0 4px;
    font-size:14px;
    background-color:var(--bullet-bg);
    color:var(--bullet-text);
    border-color:var(--bullet-bg)}
body.dark-mode .sentence{display:block;
    width:fit-content;
    margin:0 auto 10px auto;
    text-align:center;
    font-size:1em;
    background:var(--sentence-bg);
    color:var(--text-color);
    padding:5px;
    border:1px solid var(--border-color);
    border-radius:8px;
    white-space:pre-wrap;
    box-shadow:0 2px 5px var(--shadow-color);
    max-width:90%;
    transition:background-color .3s ease,color .3s ease,border-color .3s ease}
body.dark-mode .question{background:var(--question-bg);
    color:var(--text-color);
    border:1px solid var(--border-color);
    border-radius:8px;
    margin-bottom:15px;
    padding:15px;
    text-align:justify;
    transition:background-color .3s ease,color .3s ease,border-color .3s ease}
body.dark-mode p{margin:0;
    padding-bottom:10px;
    text-align:justify}
body.dark-mode .table-scroll{width:fit-content;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-left:auto;
    margin-right:auto}
body.dark-mode .table, body.dark-mode .table-2cols, body.dark-mode .table-3cols, body.dark-mode .table-4cols, body.dark-mode .table-7cols{background-color:var(--bg-article);
    display:grid;
    width:fit-content;
    max-width:100%;
    margin:1.2em 0;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 1px 3px var(--shadow-color)}
body.dark-mode .table, body.dark-mode .table-2cols{grid-template-columns:minmax(100px,max-content) minmax(200px,max-content)}
body.dark-mode .table-3cols{grid-template-columns:minmax(100px,max-content) minmax(120px,max-content) minmax(200px,max-content)}
body.dark-mode .table-4cols{grid-template-columns:minmax(80px,max-content) minmax(80px,max-content) minmax(100px,max-content) minmax(150px,max-content)}
body.dark-mode .table-7cols{grid-template-columns:minmax(80px,max-content) minmax(100px,max-content) minmax(100px,max-content) minmax(120px,max-content) minmax(140px,max-content) minmax(160px,max-content) minmax(200px,max-content)}
body.dark-mode .ligne-header{display:contents}
body.dark-mode .ligne-header>*{background-color:var(--bg-ligne-header);
    color:var(--label-color);
    font-weight:700;
    padding:12px}
body.dark-mode .ligne{display:contents}
body.dark-mode .ligne>.col{padding:5px;
    color:var(--text-color);
    line-height:1.4;
    background-color:var(--bg-article);
    border-bottom:1px solid var(--border-color);
    transition:background-color .3s ease}
body.dark-mode .ligne:last-child>.col{border-bottom:none}
body.dark-mode .ligne:hover>.col{background-color:var(--sublabel-bg-color)}
body.dark-mode .table .ligne:nth-child(even)>.col, body.dark-mode .table-2cols .ligne:nth-child(even)>.col, body.dark-mode .table-3cols .ligne:nth-child(even)>.col{background-color:rgba(255,255,255,.03)}
body.dark-mode .drop-enabled .options-container{display:flex;
    flex-direction:column;
    max-height:200px;
    overflow-y:auto;
    margin-bottom:.4em;
    gap:.25em}
body.dark-mode .drop-enabled .options-container .o{display:block;
    padding:4px 8px;
    border-radius:4px;
    cursor:grab;
    background-color:var(--o-bg);
    transition:background-color .25s ease;
    line-height:1.15;
    margin:0;
    color:var(--text-color)}
body.dark-mode .drop-enabled .options-container .o:hover{background-color:var(--o-hover-bg)}
body.dark-mode .drop-enabled .dropzone{border:2px solid var(--border-color);
    min-height:55px;
    padding:6px;
    border-radius:4px;
    background-color:var(--dropzone-bg);
    margin-top:.3em;
    transition:background-color .3s,border-color .3s}
body.dark-mode .drop-enabled .dropzone ul{list-style:none;
    padding:0;
    margin:0}
body.dark-mode .drop-enabled .dropzone li{margin-bottom:.3em}
body.dark-mode .drop-enabled .feedbk{margin-top:.3em;
    font-weight:600;
    color:var(--feedback-blue);
    font-size:.95rem}
body.dark-mode .drop-enabled .dropzone .o.correct{background-color:#28a745;
    color:#fff;
    font-weight:700}
body.dark-mode .drop-enabled .dropzone .o.incorrect{background-color:#dc3545;
    color:#fff;
    font-weight:700}
body.dark-mode .drop-enabled .dropzone .o.correct-missed{background-color:#a8e6a3;
    color:#000;
    font-weight:700;
    opacity:.85;
    position:relative;
    padding-left:70px}
body.dark-mode .drop-enabled .dropzone .o.correct-missed::before{content:"missed";
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);
    background-color:#28a745;
    color:#fff;
    font-size:.7em;
    font-weight:700;
    padding:2px 6px;
    border-radius:3px;
    white-space:nowrap}
body.dark-mode #reset-all-btn{padding:6px 14px;
    font-size:.95rem;
    border:1px solid var(--border-color);
    background:var(--reset-bg);
    border-radius:4px;
    cursor:pointer;
    margin:1em auto;
    color:var(--text-color);
    transition:background-color .3s,color .3s,border-color .3s;
    display:block}
body.dark-mode #reset-all-btn:hover{background:var(--reset-bg-hover)}
@keyframes slideIn-dark{
    from {
    opacity:0;
    transform:translateY(-10px)}
to {
    opacity:1;
    transform:translateY(0)}
}
@keyframes slideInDesktop-dark{
    from {
    opacity:0;
    transform:translate(-50%,-10px)}
to {
    opacity:1;
    transform:translateX(-50%)}
}
@keyframes scoreGlow-dark{
    0%,100% {
    box-shadow:0 4px 15px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 0 rgba(92,164,232,.4)}
50% {
    box-shadow:0 4px 15px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1),0 0 20px 5px rgba(92,164,232,.3)}
}
@media (max-width:850px){body.dark-mode .table, body.dark-mode .table-2cols{grid-template-columns:minmax(80px,max-content) minmax(150px,max-content)}body.dark-mode .table-3cols{grid-template-columns:minmax(70px,max-content) minmax(90px,max-content) minmax(150px,max-content)}body.dark-mode .table-4cols{grid-template-columns:minmax(60px,max-content) minmax(70px,max-content) minmax(100px,max-content) minmax(130px,max-content)}body.dark-mode .table-7cols{grid-template-columns:minmax(50px,max-content) minmax(70px,max-content) minmax(70px,max-content) minmax(80px,max-content) minmax(100px,max-content) minmax(120px,max-content) minmax(150px,max-content)}}
@media (max-width:768px){body.dark-mode .search-container{position:relative;
    width:100%;
    padding:8px 12px;
    box-sizing:border-box;
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:6px;
    margin:0 auto}body.dark-mode .search-container.sticky-controls{position:fixed;
    top:20px;
    left:10px;
    right:10px;
    width:auto;
    min-width:0;
    max-width:none;
    margin:0;
    z-index:2000;
    padding:10px 15px;
    background:rgba(var(--bg-color-rgb),.95);
    backdrop-filter:blur(10px);
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    animation:slideIn-dark .3s ease-out;
    transform:none}body.dark-mode .search-box{width:100%;
    min-width:0;
    flex:1;
    font-size:.9rem}body.dark-mode .search-controls{display:flex;
    align-items:center;
    gap:5px;
    flex-shrink:0}body.dark-mode .icon-btn{width:28px;
    height:28px;
    font-size:14px;
    padding:0}body.dark-mode #search-count{font-size:.8rem;
    min-width:24px;
    text-align:center}body.dark-mode .chapter-header{flex-direction:column;
    align-items:flex-start;
    gap:10px}body.dark-mode .container{flex-direction:column}body.dark-mode .sidebar{width:100%;
    max-height:200px;
    overflow-y:auto;
    position:relative;
    z-index:1000;
    height:auto;
    padding:15px}body.dark-mode .sidebar a{padding:6px 10px;
    font-size:.95rem}body.dark-mode main{padding:10px;
    margin:0;
    overflow:visible}}
@media (max-width:600px){body.dark-mode .search-container{padding:6px 10px;
    gap:6px}body.dark-mode .search-box{font-size:.85rem;
    padding:6px 10px}body.dark-mode .icon-btn{width:24px;
    height:24px;
    font-size:12px}body.dark-mode #search-count{font-size:.7rem;
    min-width:20px}body.dark-mode .sidebar{font-size:.9rem;
    padding:10px}body.dark-mode .btn{font-size:12px;
    padding:6px 12px}body.dark-mode p.o, body.dark-mode p.q{font-size:.95rem}body.dark-mode .accordion+.panel .video-container{margin:.5em 0}body.dark-mode .accordion+.panel .video-container video{width:100%;
    height:auto}body.dark-mode .table-scroll{width:100%}body.dark-mode .table-2cols{width:100%;
    grid-template-columns:minmax(100px,1fr) minmax(150px,1fr)}body.dark-mode .table, body.dark-mode .table-3cols, body.dark-mode .table-4cols, body.dark-mode .table-7cols{width:100%;
    min-width:max-content}body.dark-mode .table .col, body.dark-mode .table-2cols .col, body.dark-mode .table-3cols .col, body.dark-mode .table-4cols .col, body.dark-mode .table-7cols .col{text-align:left;
    text-align:start}}
body.dark-mode .quiz-wrapper{background-color:#1a1a1a;
    border-radius:8px;
    padding:20px;
    transition:background-color .3s ease}
body.dark-mode .quiz-question{background-color:#2a2a2a;
    border:1px solid #404040;
    border-radius:6px;
    padding:15px;
    margin-bottom:20px;
    transition:background-color .3s ease,border-color .3s ease,opacity .3s ease;
    max-width:500px}
body.dark-mode .quiz-question.disabled{pointer-events:none}
body.dark-mode .quiz-title{color:#f0f0f0;
    font-weight:600;
    margin-bottom:12px;
    line-height:1.4;
    transition:color .3s ease}
body.dark-mode .quiz-options{display:flex;
    flex-direction:column;
    gap:10px}
body.dark-mode .quiz-option-label{display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 14px;
    background-color:#2a2a2a;
    border:2px solid #505050;
    border-radius:6px;
    cursor:pointer;
    transition:all .3s ease;
    position:relative}
body.dark-mode .quiz-option-label::before{content:attr(data-letter);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:26px;
    height:26px;
    border-radius:50%;
    background-color:#52525b;
    color:#f4f4f5;
    font-weight:700;
    font-size:.85rem;
    transition:all .3s ease;
    flex-shrink:0;
    margin-top:2px}
body.dark-mode .quiz-option-label:hover{background-color:#383838;
    border-color:#666;
    transform:translateX(4px)}
body.dark-mode .quiz-option-label input[type=radio]{position:absolute;
    opacity:0;
    width:0;
    height:0;
    pointer-events:none}
body.dark-mode .quiz-option-label span{flex:1;
    color:#f0f0f0;
    line-height:1.5;
    transition:color .3s ease}
body.dark-mode .quiz-option-label:has(input:checked){background-color:#1e4a6b;
    border-color:#5ca4e8}
body.dark-mode .quiz-option-label:has(input:checked)::before{background-color:#2563eb;
    color:#fff}
body.dark-mode .quiz-option-label:has(input:checked) span{color:#5ca4e8;
    font-weight:600}
body.dark-mode .quiz-feedback{margin-top:12px;
    padding:0;
    border-radius:6px;
    line-height:1.5;
    transition:all .3s ease;
    background-color:transparent;
    color:#a0a0a0;
    max-width:500px}
body.dark-mode .quiz-feedback:empty{display:none}
body.dark-mode .quiz-feedback.correct{padding:12px;
    background-color:#1f4d2c;
    color:#a8e6a3;
    border:1px solid #2d7a3e;
    display:block}
body.dark-mode .quiz-feedback.incorrect{padding:12px;
    background-color:#4d1f1f;
    color:#f5a3a3;
    border:1px solid #7a2d2d;
    display:block}
body.dark-mode .quiz-reset, body.dark-mode .quiz-submit{padding:12px 28px;
    border:none;
    border-radius:6px;
    font-weight:600;
    font-size:1rem;
    cursor:pointer;
    transition:all .3s ease;
    margin-right:12px;
    margin-top:20px}
body.dark-mode .quiz-submit{background-color:#2c5282;
    color:#fff}
body.dark-mode .quiz-submit:hover{background-color:#1e3a5f;
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,.2)}
body.dark-mode .quiz-reset{background-color:#4a5568;
    color:#fff}
body.dark-mode .quiz-reset:hover{background-color:#2d3748;
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,.2)}
body.dark-mode .quiz-score{display:inline-block;
    padding:16px 32px;
    background:linear-gradient(135deg,#1e3a8a 0,#1e40af 50%,#2563eb 100%);
    color:#fff;
    border:2px solid #3b82f6;
    border-radius:12px;
    font-weight:700;
    font-size:1.3rem;
    margin-left:12px;
    margin-top:20px;
    transition:all .3s ease;
    vertical-align:top;
    box-shadow:0 4px 15px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.2),0 2px 8px rgba(0,0,0,.3);
    text-align:center;
    letter-spacing:.5px;
    position:relative;
    overflow:hidden}
body.dark-mode .quiz-score::before{content:"";
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);
    transform:rotate(45deg);
    transition:all .5s ease}
body.dark-mode .quiz-score:hover{transform:translateY(-3px) scale(1.02);
    box-shadow:0 6px 25px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.2),0 4px 12px rgba(0,0,0,.4);
    border-color:#60a5fa;
    animation:scoreGlow-dark 2s ease-in-out infinite}
body.dark-mode .quiz-score:hover::before{left:100%}
body.dark-mode .quiz-score-text{position:relative;
    z-index:1;
    text-shadow:0 2px 4px rgba(0,0,0,.3)}
body.dark-mode .quiz-question.disabled .quiz-option-label{cursor:not-allowed}
body.dark-mode .quiz-question.disabled .quiz-option-label:hover{transform:none}
@media (max-width:768px){body.dark-mode .quiz-wrapper{padding:15px}body.dark-mode .quiz-question{padding:12px}body.dark-mode .quiz-option-label{padding:10px 12px;
    gap:10px}body.dark-mode .quiz-option-label::before{min-width:24px;
    height:24px;
    font-size:.8rem}body.dark-mode .quiz-reset, body.dark-mode .quiz-submit{padding:10px 20px;
    font-size:.95rem;
    margin-right:8px;
    width:100%;
    margin-top:15px}body.dark-mode .quiz-score{padding:14px 24px;
    font-size:1.15rem;
    margin-left:0;
    margin-right:0;
    margin-top:15px;
    display:block;
    text-align:center;
    width:100%;
    box-sizing:border-box}}
@media (max-width:480px){body.dark-mode .quiz-wrapper{padding:12px}body.dark-mode .quiz-title{font-size:.95rem}body.dark-mode .quiz-option-label{padding:8px 10px}body.dark-mode .quiz-option-label span{font-size:.9rem}body.dark-mode .quiz-reset, body.dark-mode .quiz-submit{font-size:.9rem;
    padding:8px 16px}body.dark-mode .quiz-score{padding:12px 20px;
    font-size:1.05rem}}
html body.dark-mode{--toeic-blue:          #4d9fff;
    --toeic-blue-dark:     #7ab8ff;
    --toeic-blue-light:    rgba(77,159,255,.15);
    --toeic-blue-mid:      rgba(77,159,255,.4);
    --toeic-orange:        #ff9c20;
    --toeic-orange-light:  rgba(255,156,32,.15);
    --toeic-green:         #34d399;
    --toeic-green-light:   rgba(52,211,153,.15);
    --toeic-red:           #f87171;
    --toeic-red-light:     rgba(248,113,113,.15);
    --toeic-teal:          #22d3ee;
    --toeic-surface:       #1e1e1e;
    --toeic-surface-2:     #252525;
    --toeic-border:        #3a3a3a;
    --toeic-border-strong: #505050;
    --toeic-text:          #f0f0f0;
    --toeic-text-2:        #b0b0b0;
    --toeic-text-3:        #808080;
    --toeic-radius:        12px;
    --toeic-radius-sm:     6px;
    --toeic-shadow-sm:     0 1px 3px rgba(0,0,0,.3);
    --toeic-shadow:        0 4px 16px rgba(0,0,0,.4);
    --toeic-transition:    0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --toeic-font-mono:     "DM Mono", "Fira Code", monospace}
body.dark-mode .toeic-instruction{font-size: .93rem; color: var(--toeic-text-2); font-style: italic;
    margin: 0 0 10px 0; padding: 0; line-height: 1.5}
body.dark-mode .toeic-question{background: var(--toeic-surface);
    border: 1.5px solid var(--toeic-border);
    border-radius: var(--toeic-radius);
    margin-bottom: 16px; padding: 18px 22px;
    transition: border-color var(--toeic-transition), box-shadow var(--toeic-transition);
    box-shadow: var(--toeic-shadow-sm)}
body.dark-mode .toeic-question:hover{border-color: var(--toeic-blue-mid); box-shadow: var(--toeic-shadow)}
body.dark-mode .toeic-question-prompt{font-weight: 600; font-size: .97rem; color: var(--toeic-text);
    margin: 0 0 12px 0; padding: 0; text-align: left; line-height: 1.5}
body.dark-mode .toeic-question-num{display: inline-block; background: #4d9fff; color: #000;
    font-size: .72rem; font-weight: 700; font-family: var(--toeic-font-mono);
    padding: 2px 7px; border-radius: 10px; margin-right: 6px;
    vertical-align: middle; letter-spacing: .3px}
body.dark-mode .toeic-question label{position: relative; display: flex; align-items: center;
    gap: 10px; cursor: pointer; padding: 8px 12px; margin-bottom: 0;
    border-radius: var(--toeic-radius-sm); font-weight: 400; font-size: .95rem;
    color: var(--toeic-text-2);
    transition: background var(--toeic-transition), color var(--toeic-transition);
    line-height: 1.45}
body.dark-mode .toeic-question label:hover{background: var(--toeic-blue-light); color: var(--toeic-blue)}
body.dark-mode .toeic-question input[type=radio], body.dark-mode .toeic-question input[type=checkbox]{position: absolute; opacity: 0; pointer-events: none}
body.dark-mode .toeic-question label .option-letter{display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 22px; height: 22px; min-width: 22px;
    border-radius: 50%; border: 2px solid var(--toeic-blue);
    background: transparent; color: var(--toeic-blue);
    font-weight: 700; font-size: .75em; font-family: var(--toeic-font-mono);
    overflow: hidden; white-space: nowrap; transition: all var(--toeic-transition)}
body.dark-mode .toeic-question label:has(input[type=radio]:checked), body.dark-mode .toeic-question label:has(input[type=checkbox]:checked){background: var(--toeic-blue-light); color: var(--toeic-blue); font-weight: 600}
body.dark-mode .toeic-question label:has(input[type=radio]:checked) .option-letter, body.dark-mode .toeic-question label:has(input[type=checkbox]:checked) .option-letter{background: var(--toeic-blue); border-color: var(--toeic-blue);
    color: #000; transform: scale(1.12)}
body.dark-mode .toeic-source-text{background: var(--toeic-surface-2);
    border: 1px solid var(--toeic-border-strong);
    border-radius: var(--toeic-radius);
    padding: 16px 20px; margin-bottom: 20px;
    font-size: .95rem; line-height: 1.6; color: var(--toeic-text);
    white-space: pre-line; text-align: justify}
body.dark-mode .toeic-source-text:has(.toeic-email-headers){white-space: normal}
body.dark-mode .toeic-source-title{display: block; font-size: .72rem; font-weight: 700;
    letter-spacing: 1.2px; color: var(--toeic-text-3); text-transform: uppercase;
    margin: 0 0 8px 0; font-family: var(--toeic-font-mono);
    line-height: 1;
    white-space: normal}
body.dark-mode .toeic-email-headers{display: flex; flex-direction: column; gap: 2px;
    border-bottom: 1px solid var(--toeic-border);
    padding-bottom: 10px; margin-bottom: 12px;
    font-size: .88rem; color: var(--toeic-text-2)}
body.dark-mode .toeic-transcript-body{background: var(--toeic-surface-2); border: 1px solid var(--toeic-border);
    border-radius: var(--toeic-radius-sm); padding: 10px 14px;
    font-size: .88rem; color: var(--toeic-text-2);
    line-height: 1.6; margin-bottom: 10px; white-space: pre-wrap}
body.dark-mode .toeic-transcript-always{display: block !important; margin-bottom: 12px}
body.dark-mode .toeic-blank-group{display: inline; white-space: nowrap}
body.dark-mode .toeic-blank-num{font-family: var(--toeic-font-mono); font-size: .62em; font-weight: 700;
    color: var(--toeic-blue); vertical-align: super; margin-right: 1px;
    letter-spacing: 0; line-height: 1; user-select: none}
body.dark-mode .toeic-letter-boxes{display: inline-flex; vertical-align: middle; margin: 0 4px;
    border: 2px solid var(--toeic-blue); border-radius: 4px; overflow: hidden}
body.dark-mode .toeic-letter-box{display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: none; border-left: 1px solid var(--toeic-blue-mid);
    background: transparent; color: var(--toeic-blue-dark);
    font-family: var(--toeic-font-mono); font-weight: 700;
    font-size: .93em; text-align: center; padding: 0; outline: none;
    transition: background var(--toeic-transition); caret-color: var(--toeic-blue);
    border-radius: 0; cursor: text; user-select: none; line-height: 26px}
body.dark-mode .toeic-letter-box:first-child{border-left: none}
body.dark-mode .toeic-letter-box:focus{background: var(--toeic-orange-light); color: #ffbb4d}
body.dark-mode .toeic-letter-boxes:focus-within{border-color: var(--toeic-orange);
    box-shadow: 0 0 0 2px var(--toeic-orange-light)}
body.dark-mode .toeic-letter-box.filled{background: var(--toeic-blue-light)}
body.dark-mode .toeic-textarea{width: 100%; box-sizing: border-box; font-size: 1em;
    padding: 14px 16px; border: 1.5px solid var(--toeic-border);
    border-radius: var(--toeic-radius); resize: vertical; margin-bottom: 6px;
    background: var(--toeic-surface-2); color: var(--toeic-text);
    transition: border-color var(--toeic-transition); line-height: 1.65}
body.dark-mode .toeic-textarea:focus{outline: none; border-color: var(--toeic-blue);
    box-shadow: 0 0 0 3px rgba(77,159,255,.15); background: var(--toeic-surface)}
body.dark-mode .toeic-word-count{font-size: .82em; color: var(--toeic-text-3); text-align: right;
    margin-bottom: 16px; font-family: var(--toeic-font-mono)}
body.dark-mode .toeic-word-count.warn{color: var(--toeic-orange)}
body.dark-mode .toeic-word-count.ok{color: var(--toeic-green)}
body.dark-mode .toeic-context{font-size: .93rem; color: var(--toeic-text-2); font-style: italic;
    margin: 0 0 10px 0; padding: 0}
body.dark-mode .toeic-discussion-posts{display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px}
body.dark-mode .toeic-post{display: flex; align-items: flex-start; gap: 10px}
body.dark-mode .toeic-post.professor .toeic-post-bubble{border-left-color: var(--toeic-blue)}
body.dark-mode .toeic-post-avatar{flex-shrink: 0;
    margin-top: 2px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--toeic-surface-2)}
body.dark-mode .toeic-avatar-img{width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block}
body.dark-mode .toeic-post-bubble{background: var(--toeic-surface-2); border: 1px solid var(--toeic-border);
    
    border-radius: 0 var(--toeic-radius) var(--toeic-radius) var(--toeic-radius);
    padding: 10px 14px; font-size: .93rem; line-height: 1.6;
    color: var(--toeic-text); flex: 1}
body.dark-mode .toeic-post-speaker{font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--toeic-text-3); margin-bottom: 4px;
    font-family: var(--toeic-font-mono)}
body.dark-mode .toeic-post-avatar img{width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: top center;
    display: block;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important}
body.dark-mode .bs-hint{font-size: .82rem; color: var(--toeic-text-3); margin: 0 0 10px}
body.dark-mode .bs-frame{background: var(--toeic-surface-2); border: 1.5px solid var(--toeic-border);
    border-radius: var(--toeic-radius); padding: 16px 20px;
    font-size: 1.05rem; line-height: 3.6; color: var(--toeic-text); margin-bottom: 12px}
body.dark-mode .bs-gap{display: inline-flex; align-items: center; gap: 4px;
    vertical-align: middle; margin: 0 3px}
body.dark-mode .bs-slot{display: inline-flex; align-items: center; justify-content: center;
    min-width: 72px; height: 34px;
    border-bottom: 2.5px solid var(--toeic-blue);
    background: rgba(77,159,255,.12); border-radius: 4px 4px 0 0;
    padding: 0 6px; cursor: default; font-size: .88rem;
    transition: background .12s, border-color .12s;
    white-space: nowrap; vertical-align: middle}
body.dark-mode .bs-slot.bs-slot-over{background: var(--toeic-blue-light); border-bottom-width: 3px}
body.dark-mode .bs-slot.bs-slot-full{background: var(--toeic-blue); border-bottom-color: var(--toeic-blue); gap: 5px; padding: 0 6px 0 10px}
body.dark-mode .bs-slot-txt{color: #000; font-weight: 600; font-size: .88rem; cursor: grab; user-select: none}
body.dark-mode .bs-slot-txt:active{cursor: grabbing}
body.dark-mode .bs-slot-rm{color: rgba(0,0,0,.7); font-size: .82rem; cursor: pointer;
    padding: 1px 3px; border-radius: 50%; transition: background .12s; pointer-events: all}
body.dark-mode .bs-slot-rm:hover{background: rgba(0,0,0,.2)}
body.dark-mode .toeic-wordbank{display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
    background: var(--toeic-surface-2); border: 1px dashed var(--toeic-border-strong);
    border-radius: var(--toeic-radius); margin-top: 8px}
body.dark-mode .toeic-word-chip{display: inline-block; padding: 5px 12px;
    background: var(--toeic-surface); border: 1.5px solid var(--toeic-blue-mid);
    border-radius: 20px; font-size: .88rem; font-weight: 600;
    color: var(--toeic-blue); cursor: grab; user-select: none;
    transition: all .12s; box-shadow: var(--toeic-shadow-sm)}
body.dark-mode .toeic-word-chip:hover:not(.used){background: var(--toeic-blue-light); border-color: var(--toeic-blue);
    transform: translateY(-1px); box-shadow: var(--toeic-shadow)}
body.dark-mode .toeic-word-chip:active{cursor: grabbing}
body.dark-mode .toeic-word-chip.used{opacity: .3; cursor: default; pointer-events: none}
body.dark-mode .btn-toeic-submit{display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 11px 28px;
    background: #2d3748; color: #fff;
    border: none; border-radius: 8px; font-weight: 700;
    font-size: .95rem; cursor: pointer; letter-spacing: .3px;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.4); text-decoration: none}
body.dark-mode .btn-toeic-submit:hover{background: var(--toeic-blue); color: #000;
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(77,159,255,.3)}
body.dark-mode .btn-toeic-submit.btn-start{font-size: 1.05rem; padding: 14px 36px; background: var(--toeic-blue); color: #000}
body.dark-mode .btn-toeic-submit.btn-start:hover{background: #7ab8ff}
body.dark-mode .toeic-check-row{display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px; margin: 20px 0 0 0}
body.dark-mode .mcq-feedback, body.dark-mode .fill-feedback{display: none;
    width: fit-content;
    font-weight: 700; font-size: .92rem;
    padding: 7px 14px; border-radius: var(--toeic-radius-sm);
    
    background: rgba(31,124,255,.12);
    color: var(--toeic-blue);
    margin: 10px 0 4px 0;
    animation: feedbackIn-dark .2s ease-out}
@keyframes feedbackIn-dark{
    from { opacity: 0; transform: translateY(-4px)}
    to   { opacity: 1; transform: translateY(0)}
}
body.dark-mode .btn-check-mcq, body.dark-mode .btn-check-fill, body.dark-mode .btn-check-bs{display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 22px;
    background: #2d3748; color: #fff; border: none;
    border-radius: 6px; font-weight: 700; font-size: .9rem;
    cursor: pointer; transition: background .2s, transform .15s;
    flex-shrink: 0}
body.dark-mode .btn-check-mcq:hover, body.dark-mode .btn-check-fill:hover, body.dark-mode .btn-check-bs:hover{background: var(--toeic-blue); color: #000; transform: translateY(-1px)}
body.dark-mode .btn-reset-mode{background: #4b5563 !important}
body.dark-mode .btn-reset-mode:hover{background: #6b7280 !important; color: #fff !important}
body.dark-mode .toeic-letter-box.correct{background: rgba(16,185,129,.18) !important;
    border-color: transparent !important;
    color: #6ee7b7 !important}
body.dark-mode .toeic-letter-box.incorrect{background: rgba(239,68,68,.18) !important;
    border-color: transparent !important;
    color: #fca5a5 !important}
body.dark-mode .toeic-letter-boxes.group-correct{border-color: var(--toeic-green) !important;
    box-shadow: 0 0 0 2px rgba(16,185,129,.22)}
body.dark-mode .toeic-letter-boxes.group-incorrect{border-color: var(--toeic-red) !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,.18)}
@media (max-width: 600px){body.dark-mode .bs-frame{font-size: .95rem; line-height: 3.2; padding: 12px 14px}body.dark-mode .toeic-question{padding: 14px 16px}body.dark-mode .toeic-source-text{padding: 12px 14px; font-size: .9rem}}
body.dark-mode .toeic-source-text.toeic-fill-mode{line-height: 2.6;
    white-space: normal}
body.dark-mode .toeic-player{display: flex; align-items: center; gap: 10px;
    background: var(--toeic-surface-2);
    border: 1.5px solid var(--toeic-border);
    border-radius: var(--toeic-radius-sm);
    padding: 8px 12px;
    margin: 6px 0}
body.dark-mode .toeic-player-btn{flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--toeic-blue);
    color: #000;
    font-size: .85rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, transform .15s}
body.dark-mode .toeic-player-btn:hover{background: var(--toeic-blue-dark); transform: scale(1.08)}
body.dark-mode .toeic-player-label{font-size: .82rem; font-weight: 600;
    color: var(--toeic-text-2);
    white-space: nowrap}
body.dark-mode .toeic-player-bar{flex: 1; height: 4px;
    background: var(--toeic-border-strong);
    border-radius: 2px; overflow: hidden;
    cursor: pointer}
body.dark-mode .toeic-player-progress{height: 100%; width: 0%;
    background: var(--toeic-blue);
    border-radius: 2px;
    transition: width .1s linear}
body.dark-mode .toeic-player-time{font-size: .75rem; color: var(--toeic-text-3);
    font-family: var(--toeic-font-mono);
    white-space: nowrap}
body.dark-mode .toeic-transcript{margin-top: 4px}
body.dark-mode .toeic-transcript summary{cursor: pointer;
    font-size: .8rem; font-weight: 600;
    color: var(--toeic-blue);
    list-style: none;
    display: inline-flex; align-items: center; gap: 4px}
body.dark-mode .toeic-transcript summary::-webkit-details-marker{display: none}
body.dark-mode .toeic-transcript summary::before{content: "▶";
    font-size: .6rem;
    transition: transform .2s;
    display: inline-block}
body.dark-mode .toeic-transcript[open] summary::before{transform: rotate(90deg)}
body.dark-mode .toeic-transcript-body{margin-top: 6px;
    padding: 10px 14px;
    background: var(--toeic-surface);
    border: 1px solid var(--toeic-border);
    border-radius: var(--toeic-radius-sm);
    font-size: .88rem; line-height: 1.6;
    color: var(--toeic-text-2);
    white-space: normal;
    margin-bottom: 6px}
body.dark-mode .toeic-transcript-body p{padding-bottom: 0; margin: 0 0 .3rem}
body.dark-mode .toeic-transcript-body p:last-child{margin-bottom: 0}
body.dark-mode .toeic-interview-item{margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--toeic-border)}
body.dark-mode .toeic-interview-item:last-of-type{border-bottom: none}
body.dark-mode .toeic-interview-role{font-size: .72rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--toeic-text-3);
    margin-bottom: 4px}
body.dark-mode .toeic-player-qnum{flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #111;
    font-size: .75rem; font-weight: 700;
    font-family: var(--toeic-font-mono)}
html body.dark-mode{--rubric-label-bg:      #1e2535;
    --rubric-label-text:    #e8eaf0;
    --rubric-label-border:  #3a4060;
    --rubric-label-sub:     #7a8099;
    --rubric-th-label-bg:   #0d1520;
    --rubric-th-label-text: #f0f0f0;
    --rubric-th-label-border: #2a3550;
    --rubric-green-bg:      rgba(16,185,129,.15);
    --rubric-green-text:    #6ee7b7;
    --rubric-green-border:  #10b981;
    --rubric-green-th-bg:   #065f46;
    --rubric-orange-bg:     rgba(217,119,6,.15);
    --rubric-orange-text:   #fcd34d;
    --rubric-orange-border: #fbbf24;
    --rubric-orange-th-bg:  #92400e;
    --rubric-red-bg:        rgba(185,28,28,.18);
    --rubric-red-text:      #fca5a5;
    --rubric-red-border:    #ef4444;
    --rubric-red-th-bg:     #7f1d1d;
    --rubric-gray-bg:       rgba(107,114,128,.15);
    --rubric-gray-text:     #b0b8cc;
    --rubric-gray-border:   #4b5563;
    --rubric-gray-th-bg:    #374151}
body.dark-mode .lr-sentence-text{margin-top: .5rem;
    background: var(--rubric-label-bg);
    border: 1px solid var(--rubric-label-border);
    
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rubric-label-text)}
body.dark-mode .rubric-th{width: 20%; padding: 5px 8px; color: #fff; font-weight: 800;
    text-align: center; border: 1px solid}
body.dark-mode .rubric-th-label{background: var(--rubric-th-label-bg) !important;
    color: var(--rubric-th-label-text) !important;
    font-weight: 700 !important;
    text-align: left !important;
    border-color: var(--rubric-th-label-border) !important}
body.dark-mode .rubric-th-green{background: var(--rubric-green-th-bg);  border-color: var(--rubric-green-border)}
body.dark-mode .rubric-th-orange{background: var(--rubric-orange-th-bg); border-color: var(--rubric-orange-border)}
body.dark-mode .rubric-th-red{background: var(--rubric-red-th-bg);    border-color: var(--rubric-red-border)}
body.dark-mode .rubric-th-gray{background: var(--rubric-gray-th-bg);   border-color: var(--rubric-gray-border)}
body.dark-mode .rubric-td{padding: 6px 8px; vertical-align: top;
    text-align: left; line-height: 1.3; border: 1px solid}
body.dark-mode .rubric-td-label{background: var(--rubric-label-bg);
    color: var(--rubric-label-text);
    border-color: var(--rubric-label-border);
    font-weight: 700}
body.dark-mode .rubric-td-sub{font-weight: 400;
    color: var(--rubric-label-sub);
    font-size: .72rem}
body.dark-mode .rubric-td-green{background: var(--rubric-green-bg);  color: var(--rubric-green-text);  border-color: var(--rubric-green-border)}
body.dark-mode .rubric-td-orange{background: var(--rubric-orange-bg); color: var(--rubric-orange-text); border-color: var(--rubric-orange-border)}
body.dark-mode .rubric-td-red{background: var(--rubric-red-bg);    color: var(--rubric-red-text);    border-color: var(--rubric-red-border)}
body.dark-mode .rubric-td-gray{background: var(--rubric-gray-bg);   color: var(--rubric-gray-text);   border-color: var(--rubric-gray-border)}
html body.dark-mode{--bs-correct-bg:      #134e35;
    --bs-correct-text:    #6ee7b7;
    --bs-correct-border:  #10b981;
    --bs-incorrect-bg:    #5c1a1a;
    --bs-incorrect-text:  #fca5a5;
    --bs-incorrect-border:#ef4444;
    --bs-missed-bg:       #4a3000;
    --bs-missed-text:     #fcd34d;
    --bs-missed-border:   #f59e0b}
body.dark-mode .study-tip{color: var(--toeic-text-2)}
body.dark-mode .study-tip strong{color: var(--toeic-text)}
body.dark-mode .suffix-guide{border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .6rem 1rem;
    margin: 1rem 0;
    background: var(--bg-article)}
body.dark-mode .suffix-table{width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin: .4rem 0 .6rem}
body.dark-mode .suffix-table th, body.dark-mode .suffix-table td{border: 1px solid var(--border-color);
    padding: .3rem .6rem;
    text-align: left;
    color: var(--text-color)}
body.dark-mode .suffix-table th{background: var(--bg-ligne-header);
    font-weight: 600}
body.dark-mode .suffix-table code{background: var(--sublabel-bg-color);
    color: var(--sublabel-color);
    padding: .1rem .3rem;
    border-radius: 3px;
    font-size: .85rem}
body.dark-mode .suffix-warning{font-size: .83rem;
    color: var(--feedback-color);
    margin: .3rem 0 .5rem;
    line-height: 1.5}

/* ──────────────────────────────────────────────────────────────────
   .table-voc — tableau 2 colonnes (Expression / Exemple) utilisé par
   les chapitres de grammaire (ch. 4, 5, 19). Aligné sur .table-2cols.
   Ajouté CHANTIER 2 (les règles .ligne / .col / .ligne-header sont
   globales et s'appliquent déjà ; seule la grille manquait).
   ────────────────────────────────────────────────────────────────── */
.table-voc {
    background-color:var(--bg-article);
    display:grid;
    width:fit-content;
    max-width:100%;
    margin:1.2em 0;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 1px 3px var(--shadow-color);
    grid-template-columns:minmax(100px,max-content) minmax(200px,max-content)}
.table-voc .ligne:nth-child(even)>.col {
    background-color:rgba(0,0,0,.03)}
@media (max-width:850px) {
    .table-voc {
    grid-template-columns:minmax(80px,max-content) minmax(150px,max-content)}
}
body.dark-mode .table-voc {
    background-color:var(--bg-article);
    grid-template-columns:minmax(100px,max-content) minmax(200px,max-content)}
body.dark-mode .table-voc .ligne:nth-child(even)>.col {
    background-color:rgba(255,255,255,.03)}
@media (max-width:850px) {
    body.dark-mode .table-voc {
    grid-template-columns:minmax(80px,max-content) minmax(150px,max-content)}
}

/* ──────────────────────────────────────────────────────────────────
   QUIZ — mise en évidence des options après correction + boutons
   « Vérifier / Réinitialiser » par question. Ajouté CHANTIER 2.
   ────────────────────────────────────────────────────────────────── */
/* Option correcte (toujours surlignée en vert à la correction) */
.quiz-option-label.correct {
    background-color:#d1fae5;
    border-color:#10b981}
.quiz-option-label.correct::before {
    background-color:#10b981;
    color:#fff}
.quiz-option-label.correct span {
    color:#065f46;
    font-weight:600}
/* Option choisie à tort (rouge) */
.quiz-option-label.incorrect {
    background-color:#fee2e2;
    border-color:#ef4444}
.quiz-option-label.incorrect::before {
    background-color:#ef4444;
    color:#fff}
.quiz-option-label.incorrect span {
    color:#991b1b;
    font-weight:600}
/* Options neutres après correction (atténuées) */
.quiz-option-label.dimmed {
    opacity:.55}
/* On fige le survol des options corrigées */
.quiz-question.disabled .quiz-option-label.correct,
.quiz-question.disabled .quiz-option-label.incorrect {
    transform:none}

/* Feedback "warning" (aucune réponse choisie) */
.quiz-feedback.warning {
    padding:12px;
    background-color:#fef3c7;
    color:#92400e;
    border:1px solid #fde68a;
    display:block}

/* Boutons par question */
.quiz-q-actions {
    margin-top:12px;
    display:flex;
    gap:10px}
.quiz-check-q,
.quiz-reset-q {
    padding:8px 18px;
    border:none;
    border-radius:6px;
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
    transition:all .3s ease}
.quiz-check-q {
    background-color:#2563eb;
    color:#fff}
.quiz-check-q:hover {
    background-color:#1d4ed8;
    transform:translateY(-1px)}
.quiz-reset-q {
    background-color:#9ca3af;
    color:#fff}
.quiz-reset-q:hover {
    background-color:#6b7280;
    transform:translateY(-1px)}

/* ── Dark mode ── */
body.dark-mode .quiz-option-label.correct {
    background-color:#1f4d2c;
    border-color:#2d7a3e}
body.dark-mode .quiz-option-label.correct::before {
    background-color:#2d7a3e;
    color:#fff}
body.dark-mode .quiz-option-label.correct span {
    color:#a8e6a3;
    font-weight:600}
body.dark-mode .quiz-option-label.incorrect {
    background-color:#4d1f1f;
    border-color:#7a2d2d}
body.dark-mode .quiz-option-label.incorrect::before {
    background-color:#7a2d2d;
    color:#fff}
body.dark-mode .quiz-option-label.incorrect span {
    color:#f5a3a3;
    font-weight:600}
body.dark-mode .quiz-option-label.dimmed {
    opacity:.5}
body.dark-mode .quiz-feedback.warning {
    padding:12px;
    background-color:#4d3f1f;
    color:#f5d98a;
    border:1px solid #7a652d;
    display:block}
body.dark-mode .quiz-check-q {
    background-color:#2c5282;
    color:#fff}
body.dark-mode .quiz-check-q:hover {
    background-color:#1e3a5f}
body.dark-mode .quiz-reset-q {
    background-color:#4a5568;
    color:#fff}
body.dark-mode .quiz-reset-q:hover {
    background-color:#2d3748}

/* ──────────────────────────────────────────────────────────────────
   QUIZ — bonne réponse RÉVÉLÉE (l'utilisateur s'est trompé).
   Vert distinct du vert "bonne réponse trouvée" : plus pâle + bordure
   en pointillés, pour signaler « voici la bonne réponse » sans laisser
   croire que l'utilisateur l'a choisie. Ajouté CHANTIER 2.
   ────────────────────────────────────────────────────────────────── */
.quiz-option-label.correct-revealed {
    background-color:#ecfdf5;
    border:2px dashed #34d399}
.quiz-option-label.correct-revealed::before {
    background-color:#a7f3d0;
    color:#065f46}
.quiz-option-label.correct-revealed span {
    color:#047857;
    font-weight:600}
.quiz-question.disabled .quiz-option-label.correct-revealed {
    transform:none}

body.dark-mode .quiz-option-label.correct-revealed {
    background-color:#162e22;
    border:2px dashed #3e8e5a}
body.dark-mode .quiz-option-label.correct-revealed::before {
    background-color:#2d7a3e;
    color:#d3f5d8}
body.dark-mode .quiz-option-label.correct-revealed span {
    color:#8fd9a0;
    font-weight:600}

/* Bouton « Réinitialiser » d'une question : style contour distinct
   du bouton bleu « Vérifier », pour le rendre bien identifiable. */
.quiz-reset-q {
    background-color:transparent;
    color:#4b5563;
    border:2px solid #cbd5e1}
.quiz-reset-q:hover {
    background-color:#f1f5f9;
    border-color:#94a3b8;
    color:#1f2937;
    transform:translateY(-1px)}
body.dark-mode .quiz-reset-q {
    background-color:transparent;
    color:#cbd5e1;
    border:2px solid #4a5568}
body.dark-mode .quiz-reset-q:hover {
    background-color:#2d3748;
    border-color:#64748b;
    color:#fff}

/* ──────────────────────────────────────────────────────────────────
   QUIZ — RENFORCEMENT DE SPÉCIFICITÉ
   L'option choisie garde son <input> coché ; le sélecteur bleu
   .quiz-option-label:has(input:checked) pourrait concurrencer les
   états corrigés. On préfixe par .quiz-options et on ajoute !important
   sur les fonds pour garantir la priorité des états correct/incorrect,
   quel que soit l'ordre de chargement. Ajouté CHANTIER 2.
   ────────────────────────────────────────────────────────────────── */
.quiz-options .quiz-option-label.correct {
    background-color:#d1fae5 !important;
    border-color:#10b981 !important}
.quiz-options .quiz-option-label.correct::before {
    background-color:#10b981 !important;
    color:#fff !important}
.quiz-options .quiz-option-label.correct span {
    color:#065f46 !important}

.quiz-options .quiz-option-label.correct-revealed {
    background-color:#ecfdf5 !important;
    border:2px dashed #34d399 !important}
.quiz-options .quiz-option-label.correct-revealed::before {
    background-color:#a7f3d0 !important;
    color:#065f46 !important}
.quiz-options .quiz-option-label.correct-revealed span {
    color:#047857 !important}

.quiz-options .quiz-option-label.incorrect {
    background-color:#fee2e2 !important;
    border-color:#ef4444 !important}
.quiz-options .quiz-option-label.incorrect::before {
    background-color:#ef4444 !important;
    color:#fff !important}
.quiz-options .quiz-option-label.incorrect span {
    color:#991b1b !important}

.quiz-options .quiz-option-label.dimmed {
    opacity:.55 !important}

/* Dark mode renforcé */
body.dark-mode .quiz-options .quiz-option-label.correct {
    background-color:#1f4d2c !important;
    border-color:#2d7a3e !important}
body.dark-mode .quiz-options .quiz-option-label.correct::before {
    background-color:#2d7a3e !important;
    color:#fff !important}
body.dark-mode .quiz-options .quiz-option-label.correct span {
    color:#a8e6a3 !important}

body.dark-mode .quiz-options .quiz-option-label.correct-revealed {
    background-color:#162e22 !important;
    border:2px dashed #3e8e5a !important}
body.dark-mode .quiz-options .quiz-option-label.correct-revealed::before {
    background-color:#2d7a3e !important;
    color:#d3f5d8 !important}
body.dark-mode .quiz-options .quiz-option-label.correct-revealed span {
    color:#8fd9a0 !important}

body.dark-mode .quiz-options .quiz-option-label.incorrect {
    background-color:#4d1f1f !important;
    border-color:#7a2d2d !important}
body.dark-mode .quiz-options .quiz-option-label.incorrect::before {
    background-color:#7a2d2d !important;
    color:#fff !important}
body.dark-mode .quiz-options .quiz-option-label.incorrect span {
    color:#f5a3a3 !important}

/* ──────────────────────────────────────────────────────────────────
   QUIZ — FIX : .quiz-question.disabled met pointer-events:none sur tout
   le bloc (pour figer les options après correction), ce qui désactivait
   aussi les boutons « Vérifier / Réinitialiser » par question. On
   réautorise les clics sur la zone des boutons. Ajouté CHANTIER 2.
   ────────────────────────────────────────────────────────────────── */
.quiz-question.disabled .quiz-q-actions,
.quiz-question.disabled .quiz-check-q,
.quiz-question.disabled .quiz-reset-q {
    pointer-events:auto !important}
body.dark-mode .quiz-question.disabled .quiz-q-actions,
body.dark-mode .quiz-question.disabled .quiz-check-q,
body.dark-mode .quiz-question.disabled .quiz-reset-q {
    pointer-events:auto !important}

/* ──────────────────────────────────────────────────────────────────
   QUIZ — grisage des questions NON répondues après « Tout vérifier ».
   Le JS les verrouille (classe .disabled) en laissant data-answered="false"
   (les questions corrigées passent à "true" et gardent leurs couleurs).
   On grise donc uniquement les non-répondues verrouillées. Ajouté CHANTIER 2.
   ────────────────────────────────────────────────────────────────── */
.quiz-question.disabled[data-answered="false"] {
    opacity:.55;
    filter:grayscale(35%)}
.quiz-question.disabled[data-answered="false"] .quiz-option-label {
    background-color:#f3f4f6;
    border-color:#e5e7eb}
.quiz-question.disabled[data-answered="false"] .quiz-option-label span {
    color:#9ca3af}

body.dark-mode .quiz-question.disabled[data-answered="false"] {
    opacity:.5;
    filter:grayscale(35%)}
body.dark-mode .quiz-question.disabled[data-answered="false"] .quiz-option-label {
    background-color:#222;
    border-color:#333}
body.dark-mode .quiz-question.disabled[data-answered="false"] .quiz-option-label span {
    color:#777}

/* ──────────────────────────────────────────────────────────────────
   QUIZ — score réharmonisé (sobre, cohérent avec les boutons).
   On neutralise l'ancien effet de brillance et l'animation au survol.
   Ajouté CHANTIER 2.
   ────────────────────────────────────────────────────────────────── */
.quiz-score::before {
    display:none !important}
.quiz-score:hover {
    transform:none !important;
    background:#eef2ff !important;
    border-color:#c7d2fe !important;
    box-shadow:none !important;
    animation:none !important}
.quiz-score:hover::before {
    left:-50% !important}

/* Dark mode : score sobre */
body.dark-mode .quiz-score {
    background-color:#1e2746 !important;
    color:#c7d2fe !important;
    border:1px solid #34406b !important;
    box-shadow:none !important;
    font-size:1rem !important;
    font-weight:600 !important;
    letter-spacing:normal !important}
body.dark-mode .quiz-score::before {
    display:none !important}
body.dark-mode .quiz-score:hover {
    transform:none !important;
    background:#1e2746 !important;
    border-color:#34406b !important;
    box-shadow:none !important;
    animation:none !important}