/* =====================================================================
   toefl-ibt-presentation.css
   CSS unique pour les pages de présentation TOEFL iBT (chapitres 1 à 5).
   Fusion de chapter-toefl-ibt.css + chapter-toefl-ibt-presentation.css,
   purgé des règles non utilisées par ces pages (PurgeCSS).
   ===================================================================== */
/* fusion */
: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}
.chapter-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 20px;
    background-color:var(--bg)}
.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-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}
.section audio {
    width:100%;
    max-width:500px;
    margin:1em auto;
    display:block}
.video-container{width:60%;max-width:60%;margin:1em auto}
.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}
.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}
.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-3cols {
    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 {
    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)}
.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-3cols .ligne:nth-child(even)>.col {
    background-color:rgba(0,0,0,.03)}
#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 {
    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)}
}
@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-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,.table-3cols {
    width:100%;
    min-width:max-content}
.table .col,.table-3cols .col {
    text-align:left;
    text-align:start}
}
@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)}
}

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

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

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

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

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

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

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

/* ── Textarea & word count ─────────────────────────────────────── */

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

/* ── Discussion posts ─────────────────────────────────────────── */
.toefl-discussion-posts {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px}
.toefl-post { display: flex; align-items: flex-start; gap: 10px}
.toefl-post.professor .toefl-post-bubble { border-left-color: var(--toefl-blue)}
.toefl-post-avatar {
    flex-shrink: 0;
    margin-top: 2px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--toefl-surface-2)}
.toefl-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block}
.toefl-post-bubble {
    background: var(--toefl-surface-2); border: 1px solid var(--toefl-border);
    
    border-radius: 0 var(--toefl-radius) var(--toefl-radius) var(--toefl-radius);
    padding: 10px 14px; font-size: .93rem; line-height: 1.6;
    color: var(--toefl-text); flex: 1}
.toefl-post-speaker {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--toefl-text-3); margin-bottom: 4px;
    font-family: var(--toefl-font-mono)}
.toefl-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(--toefl-text-3); margin: 0 0 10px}
.bs-frame {
    background: var(--toefl-surface-2); border: 1.5px solid var(--toefl-border);
    border-radius: var(--toefl-radius); padding: 16px 20px;
    font-size: 1.05rem; line-height: 3.6; color: var(--toefl-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(--toefl-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(--toefl-blue-light); border-bottom-color: var(--toefl-blue); border-bottom-width: 3px}
.bs-slot.bs-slot-full { background: var(--toefl-blue); border-bottom-color: var(--toefl-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}
.toefl-wordbank {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
    background: var(--toefl-surface-2); border: 1px dashed var(--toefl-border-strong);
    border-radius: var(--toefl-radius); margin-top: 8px; transition: background .12s}
.toefl-word-chip {
    display: inline-block; padding: 5px 12px;
    background: var(--toefl-surface); border: 1.5px solid var(--toefl-blue-mid);
    border-radius: 20px; font-size: .88rem; font-weight: 600;
    color: var(--toefl-blue-dark, #1260d4); cursor: grab; user-select: none;
    transition: all .12s; box-shadow: var(--toefl-shadow-sm)}
.toefl-word-chip:hover:not(.used) {
    background: var(--toefl-blue-light); border-color: var(--toefl-blue);
    transform: translateY(-1px); box-shadow: var(--toefl-shadow)}
.toefl-word-chip:active { cursor: grabbing}
.toefl-word-chip.used { opacity: .32; cursor: default; pointer-events: none}

/* ── Bouton de soumission TOEFL ────────────────────────────────── */
.btn-toefl-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-toefl-submit:hover {
    background: #1f7cff; transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31,124,255,.35)}
.btn-toefl-submit.btn-start {
    font-size: 1.05rem; padding: 14px 36px;
    background: #1f7cff}
.btn-toefl-submit.btn-start:hover {
    background: #1260d4; transform: translateY(-2px)}

/* ── Bouton Check answers + feedback : bloc autonome espacé ──── */
.toefl-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(--toefl-radius-sm);
    
    background: var(--toefl-blue-light);
    color: var(--toefl-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) ─────────────────── */
.toefl-source-text.toefl-fill-para {
    line-height: 2.6; background: var(--toefl-surface);
    border: 1.5px solid var(--toefl-border);
    margin-bottom: 0;                       /* la .toefl-check-row gère l'espace */
}

/* ── États lettre par lettre après correction ─────────────────── */
.toefl-letter-box.correct {
    background: var(--toefl-green-light) !important;
    border-color: transparent !important;
    color: #065f46 !important}
.toefl-letter-box.incorrect {
    background: var(--toefl-red-light) !important;
    border-color: transparent !important;
    color: #991b1b !important}
/* Bordure du groupe selon résultat global */
.toefl-letter-boxes.group-correct {
    border-color: var(--toefl-green) !important;
    box-shadow: 0 0 0 2px rgba(16,185,129,.18)}
.toefl-letter-boxes.group-incorrect {
    border-color: var(--toefl-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}
    .toefl-question { padding: 14px 16px}
    .toefl-source-text { padding: 12px 14px; font-size: .9rem}
    .toefl-discussion-posts .toefl-post-avatar { width: 32px; font-size: 1.5rem}
}

/* ── Fill-in passage : line-height étendu pour les cases lettres ── */

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

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

/* ── Blocs Q/R interview ─────────────────────────────────────── */
.toefl-interview-item {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--toefl-border)}
.toefl-interview-item:last-of-type { border-bottom: none}

/* ── Badge Q1/Q2… dans le lecteur ───────────────────────────── */
.toefl-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(--toefl-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 .toefl-* (fusionné depuis
 * chapter-toefl-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.
 * =================================================================== */
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 .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-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 .section audio{width:100%;
    max-width:500px;
    margin:1em auto;
    display:block}
body.dark-mode .video-container{width:60%;max-width:60%;margin:1em auto}
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 .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 .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-3cols{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{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 .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-3cols .ligne:nth-child(even)>.col{background-color:rgba(255,255,255,.03)}
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{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)}}
@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-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, body.dark-mode .table-3cols{width:100%;
    min-width:max-content}body.dark-mode .table .col, body.dark-mode .table-3cols .col{text-align:left;
    text-align:start}}
body.dark-mode .toefl-instruction{font-size: .93rem; color: var(--toefl-text-2); font-style: italic;
    margin: 0 0 10px 0; padding: 0; line-height: 1.5}
body.dark-mode .toefl-question{background: var(--toefl-surface);
    border: 1.5px solid var(--toefl-border);
    border-radius: var(--toefl-radius);
    margin-bottom: 16px; padding: 18px 22px;
    transition: border-color var(--toefl-transition), box-shadow var(--toefl-transition);
    box-shadow: var(--toefl-shadow-sm)}
body.dark-mode .toefl-question:hover{border-color: var(--toefl-blue-mid); box-shadow: var(--toefl-shadow)}
body.dark-mode .toefl-question-prompt{font-weight: 600; font-size: .97rem; color: var(--toefl-text);
    margin: 0 0 12px 0; padding: 0; text-align: left; line-height: 1.5}
body.dark-mode .toefl-question-num{display: inline-block; background: #4d9fff; color: #000;
    font-size: .72rem; font-weight: 700; font-family: var(--toefl-font-mono);
    padding: 2px 7px; border-radius: 10px; margin-right: 6px;
    vertical-align: middle; letter-spacing: .3px}
body.dark-mode .toefl-question label{position: relative; display: flex; align-items: center;
    gap: 10px; cursor: pointer; padding: 8px 12px; margin-bottom: 0;
    border-radius: var(--toefl-radius-sm); font-weight: 400; font-size: .95rem;
    color: var(--toefl-text-2);
    transition: background var(--toefl-transition), color var(--toefl-transition);
    line-height: 1.45}
body.dark-mode .toefl-question label:hover{background: var(--toefl-blue-light); color: var(--toefl-blue)}
body.dark-mode .toefl-question input[type=radio], body.dark-mode .toefl-question input[type=checkbox]{position: absolute; opacity: 0; pointer-events: none}
body.dark-mode .toefl-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(--toefl-blue);
    background: transparent; color: var(--toefl-blue);
    font-weight: 700; font-size: .75em; font-family: var(--toefl-font-mono);
    overflow: hidden; white-space: nowrap; transition: all var(--toefl-transition)}
body.dark-mode .toefl-question label:has(input[type=radio]:checked), body.dark-mode .toefl-question label:has(input[type=checkbox]:checked){background: var(--toefl-blue-light); color: var(--toefl-blue); font-weight: 600}
body.dark-mode .toefl-question label:has(input[type=radio]:checked) .option-letter, body.dark-mode .toefl-question label:has(input[type=checkbox]:checked) .option-letter{background: var(--toefl-blue); border-color: var(--toefl-blue);
    color: #000; transform: scale(1.12)}
body.dark-mode .toefl-source-text{background: var(--toefl-surface-2);
    border: 1px solid var(--toefl-border-strong);
    border-radius: var(--toefl-radius);
    padding: 16px 20px; margin-bottom: 20px;
    font-size: .95rem; line-height: 1.6; color: var(--toefl-text);
    white-space: pre-line; text-align: justify}
body.dark-mode .toefl-source-text:has(.toefl-email-headers){white-space: normal}
body.dark-mode .toefl-source-title{display: block; font-size: .72rem; font-weight: 700;
    letter-spacing: 1.2px; color: var(--toefl-text-3); text-transform: uppercase;
    margin: 0 0 8px 0; font-family: var(--toefl-font-mono);
    line-height: 1;
    white-space: normal}
body.dark-mode .toefl-email-headers{display: flex; flex-direction: column; gap: 2px;
    border-bottom: 1px solid var(--toefl-border);
    padding-bottom: 10px; margin-bottom: 12px;
    font-size: .88rem; color: var(--toefl-text-2)}
body.dark-mode .toefl-transcript-body{background: var(--toefl-surface-2); border: 1px solid var(--toefl-border);
    border-radius: var(--toefl-radius-sm); padding: 10px 14px;
    font-size: .88rem; color: var(--toefl-text-2);
    line-height: 1.6; margin-bottom: 10px; white-space: pre-wrap}
body.dark-mode .toefl-blank-group{display: inline; white-space: nowrap}
body.dark-mode .toefl-blank-num{font-family: var(--toefl-font-mono); font-size: .62em; font-weight: 700;
    color: var(--toefl-blue); vertical-align: super; margin-right: 1px;
    letter-spacing: 0; line-height: 1; user-select: none}
body.dark-mode .toefl-letter-boxes{display: inline-flex; vertical-align: middle; margin: 0 4px;
    border: 2px solid var(--toefl-blue); border-radius: 4px; overflow: hidden}
body.dark-mode .toefl-letter-box{display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: none; border-left: 1px solid var(--toefl-blue-mid);
    background: transparent; color: var(--toefl-blue-dark);
    font-family: var(--toefl-font-mono); font-weight: 700;
    font-size: .93em; text-align: center; padding: 0; outline: none;
    transition: background var(--toefl-transition); caret-color: var(--toefl-blue);
    border-radius: 0; cursor: text; user-select: none; line-height: 26px}
body.dark-mode .toefl-letter-box:first-child{border-left: none}
body.dark-mode .toefl-letter-box:focus{background: var(--toefl-orange-light); color: #ffbb4d}
body.dark-mode .toefl-letter-boxes:focus-within{border-color: var(--toefl-orange);
    box-shadow: 0 0 0 2px var(--toefl-orange-light)}
body.dark-mode .toefl-letter-box.filled{background: var(--toefl-blue-light)}
body.dark-mode .toefl-context{font-size: .93rem; color: var(--toefl-text-2); font-style: italic;
    margin: 0 0 10px 0; padding: 0}
body.dark-mode .toefl-discussion-posts{display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px}
body.dark-mode .toefl-post{display: flex; align-items: flex-start; gap: 10px}
body.dark-mode .toefl-post.professor .toefl-post-bubble{border-left-color: var(--toefl-blue)}
body.dark-mode .toefl-post-avatar{flex-shrink: 0;
    margin-top: 2px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--toefl-surface-2)}
body.dark-mode .toefl-avatar-img{width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block}
body.dark-mode .toefl-post-bubble{background: var(--toefl-surface-2); border: 1px solid var(--toefl-border);
    
    border-radius: 0 var(--toefl-radius) var(--toefl-radius) var(--toefl-radius);
    padding: 10px 14px; font-size: .93rem; line-height: 1.6;
    color: var(--toefl-text); flex: 1}
body.dark-mode .toefl-post-speaker{font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--toefl-text-3); margin-bottom: 4px;
    font-family: var(--toefl-font-mono)}
body.dark-mode .toefl-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(--toefl-text-3); margin: 0 0 10px}
body.dark-mode .bs-frame{background: var(--toefl-surface-2); border: 1.5px solid var(--toefl-border);
    border-radius: var(--toefl-radius); padding: 16px 20px;
    font-size: 1.05rem; line-height: 3.6; color: var(--toefl-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(--toefl-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(--toefl-blue-light); border-bottom-width: 3px}
body.dark-mode .bs-slot.bs-slot-full{background: var(--toefl-blue); border-bottom-color: var(--toefl-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 .toefl-wordbank{display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
    background: var(--toefl-surface-2); border: 1px dashed var(--toefl-border-strong);
    border-radius: var(--toefl-radius); margin-top: 8px}
body.dark-mode .toefl-word-chip{display: inline-block; padding: 5px 12px;
    background: var(--toefl-surface); border: 1.5px solid var(--toefl-blue-mid);
    border-radius: 20px; font-size: .88rem; font-weight: 600;
    color: var(--toefl-blue); cursor: grab; user-select: none;
    transition: all .12s; box-shadow: var(--toefl-shadow-sm)}
body.dark-mode .toefl-word-chip:hover:not(.used){background: var(--toefl-blue-light); border-color: var(--toefl-blue);
    transform: translateY(-1px); box-shadow: var(--toefl-shadow)}
body.dark-mode .toefl-word-chip:active{cursor: grabbing}
body.dark-mode .toefl-word-chip.used{opacity: .3; cursor: default; pointer-events: none}
body.dark-mode .btn-toefl-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-toefl-submit:hover{background: var(--toefl-blue); color: #000;
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(77,159,255,.3)}
body.dark-mode .btn-toefl-submit.btn-start{font-size: 1.05rem; padding: 14px 36px; background: var(--toefl-blue); color: #000}
body.dark-mode .btn-toefl-submit.btn-start:hover{background: #7ab8ff}
body.dark-mode .toefl-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(--toefl-radius-sm);
    
    background: rgba(31,124,255,.12);
    color: var(--toefl-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(--toefl-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 .toefl-letter-box.correct{background: rgba(16,185,129,.18) !important;
    border-color: transparent !important;
    color: #6ee7b7 !important}
body.dark-mode .toefl-letter-box.incorrect{background: rgba(239,68,68,.18) !important;
    border-color: transparent !important;
    color: #fca5a5 !important}
body.dark-mode .toefl-letter-boxes.group-correct{border-color: var(--toefl-green) !important;
    box-shadow: 0 0 0 2px rgba(16,185,129,.22)}
body.dark-mode .toefl-letter-boxes.group-incorrect{border-color: var(--toefl-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 .toefl-question{padding: 14px 16px}body.dark-mode .toefl-source-text{padding: 12px 14px; font-size: .9rem}}
body.dark-mode .toefl-player{display: flex; align-items: center; gap: 10px;
    background: var(--toefl-surface-2);
    border: 1.5px solid var(--toefl-border);
    border-radius: var(--toefl-radius-sm);
    padding: 8px 12px;
    margin: 6px 0}
body.dark-mode .toefl-player-btn{flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--toefl-blue);
    color: #000;
    font-size: .85rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, transform .15s}
body.dark-mode .toefl-player-btn:hover{background: var(--toefl-blue-dark); transform: scale(1.08)}
body.dark-mode .toefl-player-label{font-size: .82rem; font-weight: 600;
    color: var(--toefl-text-2);
    white-space: nowrap}
body.dark-mode .toefl-player-bar{flex: 1; height: 4px;
    background: var(--toefl-border-strong);
    border-radius: 2px; overflow: hidden;
    cursor: pointer}
body.dark-mode .toefl-player-progress{height: 100%; width: 0%;
    background: var(--toefl-blue);
    border-radius: 2px;
    transition: width .1s linear}
body.dark-mode .toefl-player-time{font-size: .75rem; color: var(--toefl-text-3);
    font-family: var(--toefl-font-mono);
    white-space: nowrap}
body.dark-mode .toefl-transcript{margin-top: 4px}
body.dark-mode .toefl-transcript summary{cursor: pointer;
    font-size: .8rem; font-weight: 600;
    color: var(--toefl-blue);
    list-style: none;
    display: inline-flex; align-items: center; gap: 4px}
body.dark-mode .toefl-transcript summary::-webkit-details-marker{display: none}
body.dark-mode .toefl-transcript summary::before{content: "▶";
    font-size: .6rem;
    transition: transform .2s;
    display: inline-block}
body.dark-mode .toefl-transcript[open] summary::before{transform: rotate(90deg)}
body.dark-mode .toefl-transcript-body{margin-top: 6px;
    padding: 10px 14px;
    background: var(--toefl-surface);
    border: 1px solid var(--toefl-border);
    border-radius: var(--toefl-radius-sm);
    font-size: .88rem; line-height: 1.6;
    color: var(--toefl-text-2);
    white-space: normal;
    margin-bottom: 6px}
body.dark-mode .toefl-transcript-body p{padding-bottom: 0; margin: 0 0 .3rem}
body.dark-mode .toefl-transcript-body p:last-child{margin-bottom: 0}
body.dark-mode .toefl-interview-item{margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--toefl-border)}
body.dark-mode .toefl-interview-item:last-of-type{border-bottom: none}
body.dark-mode .toefl-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(--toefl-font-mono)}
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)}
body.dark-mode .study-tip{color: var(--toefl-text-2)}
body.dark-mode .study-tip strong{color: var(--toefl-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}

/* DEPLOY-TEST-XYZ123 */
/* =========================================================================
 * chapter-toefl-ibt-presentation.css — INFRASTRUCTURE AUTONOME (présentation TOEFL iBT)
 * Calqué sur ielts-general/css/chapter-ielts-presentation.css.
 * Thème : toggle de la classe body.dark-mode (ce fichier gère clair + sombre).
 * Contient : variables de thème + en-tête de chapitre + accordéons + sidebar +
 *            recherche + tableaux + boutons (.btn, .icon-btn, #reset-all-btn) +
 *            médias (audio/vidéo/img) + responsive.
 * NE contient PAS les composants d'exercice .toefl-* (.toefl-question, .toefl-player,
 * .option-letter, .toefl-blank-group, etc.) : ceux-ci restent fournis par
 * CSS_TOEFL_CHAPTER (chapter-toefl-ibt-light.css). Ce fichier se charge donc
 * EN COMPLÉMENT, pas à la place, du CSS de chapitre existant.
 * ========================================================================= */

: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;--dropzone-bg:#f8f9fa;--feedback-blue:#0b66c3}
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}
.theme-toggle{cursor:pointer;font-size:1.3rem;background:0 0;border:none;color:var(--text-color);padding:5px 10px}.chapter-header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background-color:var(--bg)}.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-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}.section audio{width:100%;max-width:500px;margin:1em auto;display:block}.video-container{width:60%;max-width:60%;margin:1em auto}.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}.transcript{background-color:var(--doc-bg);font-size:.9rem;line-height:1.3;padding:15px 20px;border-radius:6px;margin:15px 0;white-space:pre-wrap;overflow-x:auto;color:var(--text-color)}.transcript{font-size:.8rem}.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}.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-3cols{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{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)}.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-3cols .ligne:nth-child(even)>.col{background-color:rgba(0,0,0,.03)}#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{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)}}@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-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,.table-3cols{width:100%;min-width:max-content}.table .col,.table-3cols .col{text-align:left;text-align:start}}@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)}}



/* ===================================================================
 * MODE SOMBRE DES COMPOSANTS .toefl-* (fusionné depuis
 * chapter-toefl-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.
 * =================================================================== */
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 .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-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 .section audio{width:100%;
    max-width:500px;
    margin:1em auto;
    display:block}
body.dark-mode .video-container{width:60%;max-width:60%;margin:1em auto}
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 .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 .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-3cols{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{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 .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-3cols .ligne:nth-child(even)>.col{background-color:rgba(255,255,255,.03)}
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{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)}}
@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-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, body.dark-mode .table-3cols{width:100%;
    min-width:max-content}body.dark-mode .table .col, body.dark-mode .table-3cols .col{text-align:left;
    text-align:start}}
body.dark-mode .toefl-instruction{font-size: .93rem; color: var(--toefl-text-2); font-style: italic;
    margin: 0 0 10px 0; padding: 0; line-height: 1.5}
body.dark-mode .toefl-question{background: var(--toefl-surface);
    border: 1.5px solid var(--toefl-border);
    border-radius: var(--toefl-radius);
    margin-bottom: 16px; padding: 18px 22px;
    transition: border-color var(--toefl-transition), box-shadow var(--toefl-transition);
    box-shadow: var(--toefl-shadow-sm)}
body.dark-mode .toefl-question:hover{border-color: var(--toefl-blue-mid); box-shadow: var(--toefl-shadow)}
body.dark-mode .toefl-question-prompt{font-weight: 600; font-size: .97rem; color: var(--toefl-text);
    margin: 0 0 12px 0; padding: 0; text-align: left; line-height: 1.5}
body.dark-mode .toefl-question-num{display: inline-block; background: #4d9fff; color: #000;
    font-size: .72rem; font-weight: 700; font-family: var(--toefl-font-mono);
    padding: 2px 7px; border-radius: 10px; margin-right: 6px;
    vertical-align: middle; letter-spacing: .3px}
body.dark-mode .toefl-question label{position: relative; display: flex; align-items: center;
    gap: 10px; cursor: pointer; padding: 8px 12px; margin-bottom: 0;
    border-radius: var(--toefl-radius-sm); font-weight: 400; font-size: .95rem;
    color: var(--toefl-text-2);
    transition: background var(--toefl-transition), color var(--toefl-transition);
    line-height: 1.45}
body.dark-mode .toefl-question label:hover{background: var(--toefl-blue-light); color: var(--toefl-blue)}
body.dark-mode .toefl-question input[type=radio], body.dark-mode .toefl-question input[type=checkbox]{position: absolute; opacity: 0; pointer-events: none}
body.dark-mode .toefl-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(--toefl-blue);
    background: transparent; color: var(--toefl-blue);
    font-weight: 700; font-size: .75em; font-family: var(--toefl-font-mono);
    overflow: hidden; white-space: nowrap; transition: all var(--toefl-transition)}
body.dark-mode .toefl-question label:has(input[type=radio]:checked), body.dark-mode .toefl-question label:has(input[type=checkbox]:checked){background: var(--toefl-blue-light); color: var(--toefl-blue); font-weight: 600}
body.dark-mode .toefl-question label:has(input[type=radio]:checked) .option-letter, body.dark-mode .toefl-question label:has(input[type=checkbox]:checked) .option-letter{background: var(--toefl-blue); border-color: var(--toefl-blue);
    color: #000; transform: scale(1.12)}
body.dark-mode .toefl-source-text{background: var(--toefl-surface-2);
    border: 1px solid var(--toefl-border-strong);
    border-radius: var(--toefl-radius);
    padding: 16px 20px; margin-bottom: 20px;
    font-size: .95rem; line-height: 1.6; color: var(--toefl-text);
    white-space: pre-line; text-align: justify}
body.dark-mode .toefl-source-text:has(.toefl-email-headers){white-space: normal}
body.dark-mode .toefl-source-title{display: block; font-size: .72rem; font-weight: 700;
    letter-spacing: 1.2px; color: var(--toefl-text-3); text-transform: uppercase;
    margin: 0 0 8px 0; font-family: var(--toefl-font-mono);
    line-height: 1;
    white-space: normal}
body.dark-mode .toefl-email-headers{display: flex; flex-direction: column; gap: 2px;
    border-bottom: 1px solid var(--toefl-border);
    padding-bottom: 10px; margin-bottom: 12px;
    font-size: .88rem; color: var(--toefl-text-2)}
body.dark-mode .toefl-transcript-body{background: var(--toefl-surface-2); border: 1px solid var(--toefl-border);
    border-radius: var(--toefl-radius-sm); padding: 10px 14px;
    font-size: .88rem; color: var(--toefl-text-2);
    line-height: 1.6; margin-bottom: 10px; white-space: pre-wrap}
body.dark-mode .toefl-blank-group{display: inline; white-space: nowrap}
body.dark-mode .toefl-blank-num{font-family: var(--toefl-font-mono); font-size: .62em; font-weight: 700;
    color: var(--toefl-blue); vertical-align: super; margin-right: 1px;
    letter-spacing: 0; line-height: 1; user-select: none}
body.dark-mode .toefl-letter-boxes{display: inline-flex; vertical-align: middle; margin: 0 4px;
    border: 2px solid var(--toefl-blue); border-radius: 4px; overflow: hidden}
body.dark-mode .toefl-letter-box{display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: none; border-left: 1px solid var(--toefl-blue-mid);
    background: transparent; color: var(--toefl-blue-dark);
    font-family: var(--toefl-font-mono); font-weight: 700;
    font-size: .93em; text-align: center; padding: 0; outline: none;
    transition: background var(--toefl-transition); caret-color: var(--toefl-blue);
    border-radius: 0; cursor: text; user-select: none; line-height: 26px}
body.dark-mode .toefl-letter-box:first-child{border-left: none}
body.dark-mode .toefl-letter-box:focus{background: var(--toefl-orange-light); color: #ffbb4d}
body.dark-mode .toefl-letter-boxes:focus-within{border-color: var(--toefl-orange);
    box-shadow: 0 0 0 2px var(--toefl-orange-light)}
body.dark-mode .toefl-letter-box.filled{background: var(--toefl-blue-light)}
body.dark-mode .toefl-context{font-size: .93rem; color: var(--toefl-text-2); font-style: italic;
    margin: 0 0 10px 0; padding: 0}
body.dark-mode .toefl-discussion-posts{display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px}
body.dark-mode .toefl-post{display: flex; align-items: flex-start; gap: 10px}
body.dark-mode .toefl-post.professor .toefl-post-bubble{border-left-color: var(--toefl-blue)}
body.dark-mode .toefl-post-avatar{flex-shrink: 0;
    margin-top: 2px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--toefl-surface-2)}
body.dark-mode .toefl-avatar-img{width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block}
body.dark-mode .toefl-post-bubble{background: var(--toefl-surface-2); border: 1px solid var(--toefl-border);
    
    border-radius: 0 var(--toefl-radius) var(--toefl-radius) var(--toefl-radius);
    padding: 10px 14px; font-size: .93rem; line-height: 1.6;
    color: var(--toefl-text); flex: 1}
body.dark-mode .toefl-post-speaker{font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--toefl-text-3); margin-bottom: 4px;
    font-family: var(--toefl-font-mono)}
body.dark-mode .toefl-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(--toefl-text-3); margin: 0 0 10px}
body.dark-mode .bs-frame{background: var(--toefl-surface-2); border: 1.5px solid var(--toefl-border);
    border-radius: var(--toefl-radius); padding: 16px 20px;
    font-size: 1.05rem; line-height: 3.6; color: var(--toefl-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(--toefl-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(--toefl-blue-light); border-bottom-width: 3px}
body.dark-mode .bs-slot.bs-slot-full{background: var(--toefl-blue); border-bottom-color: var(--toefl-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 .toefl-wordbank{display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
    background: var(--toefl-surface-2); border: 1px dashed var(--toefl-border-strong);
    border-radius: var(--toefl-radius); margin-top: 8px}
body.dark-mode .toefl-word-chip{display: inline-block; padding: 5px 12px;
    background: var(--toefl-surface); border: 1.5px solid var(--toefl-blue-mid);
    border-radius: 20px; font-size: .88rem; font-weight: 600;
    color: var(--toefl-blue); cursor: grab; user-select: none;
    transition: all .12s; box-shadow: var(--toefl-shadow-sm)}
body.dark-mode .toefl-word-chip:hover:not(.used){background: var(--toefl-blue-light); border-color: var(--toefl-blue);
    transform: translateY(-1px); box-shadow: var(--toefl-shadow)}
body.dark-mode .toefl-word-chip:active{cursor: grabbing}
body.dark-mode .toefl-word-chip.used{opacity: .3; cursor: default; pointer-events: none}
body.dark-mode .btn-toefl-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-toefl-submit:hover{background: var(--toefl-blue); color: #000;
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(77,159,255,.3)}
body.dark-mode .btn-toefl-submit.btn-start{font-size: 1.05rem; padding: 14px 36px; background: var(--toefl-blue); color: #000}
body.dark-mode .btn-toefl-submit.btn-start:hover{background: #7ab8ff}
body.dark-mode .toefl-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(--toefl-radius-sm);
    
    background: rgba(31,124,255,.12);
    color: var(--toefl-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(--toefl-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 .toefl-letter-box.correct{background: rgba(16,185,129,.18) !important;
    border-color: transparent !important;
    color: #6ee7b7 !important}
body.dark-mode .toefl-letter-box.incorrect{background: rgba(239,68,68,.18) !important;
    border-color: transparent !important;
    color: #fca5a5 !important}
body.dark-mode .toefl-letter-boxes.group-correct{border-color: var(--toefl-green) !important;
    box-shadow: 0 0 0 2px rgba(16,185,129,.22)}
body.dark-mode .toefl-letter-boxes.group-incorrect{border-color: var(--toefl-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 .toefl-question{padding: 14px 16px}body.dark-mode .toefl-source-text{padding: 12px 14px; font-size: .9rem}}
body.dark-mode .toefl-player{display: flex; align-items: center; gap: 10px;
    background: var(--toefl-surface-2);
    border: 1.5px solid var(--toefl-border);
    border-radius: var(--toefl-radius-sm);
    padding: 8px 12px;
    margin: 6px 0}
body.dark-mode .toefl-player-btn{flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--toefl-blue);
    color: #000;
    font-size: .85rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, transform .15s}
body.dark-mode .toefl-player-btn:hover{background: var(--toefl-blue-dark); transform: scale(1.08)}
body.dark-mode .toefl-player-label{font-size: .82rem; font-weight: 600;
    color: var(--toefl-text-2);
    white-space: nowrap}
body.dark-mode .toefl-player-bar{flex: 1; height: 4px;
    background: var(--toefl-border-strong);
    border-radius: 2px; overflow: hidden;
    cursor: pointer}
body.dark-mode .toefl-player-progress{height: 100%; width: 0%;
    background: var(--toefl-blue);
    border-radius: 2px;
    transition: width .1s linear}
body.dark-mode .toefl-player-time{font-size: .75rem; color: var(--toefl-text-3);
    font-family: var(--toefl-font-mono);
    white-space: nowrap}
body.dark-mode .toefl-transcript{margin-top: 4px}
body.dark-mode .toefl-transcript summary{cursor: pointer;
    font-size: .8rem; font-weight: 600;
    color: var(--toefl-blue);
    list-style: none;
    display: inline-flex; align-items: center; gap: 4px}
body.dark-mode .toefl-transcript summary::-webkit-details-marker{display: none}
body.dark-mode .toefl-transcript summary::before{content: "▶";
    font-size: .6rem;
    transition: transform .2s;
    display: inline-block}
body.dark-mode .toefl-transcript[open] summary::before{transform: rotate(90deg)}
body.dark-mode .toefl-transcript-body{margin-top: 6px;
    padding: 10px 14px;
    background: var(--toefl-surface);
    border: 1px solid var(--toefl-border);
    border-radius: var(--toefl-radius-sm);
    font-size: .88rem; line-height: 1.6;
    color: var(--toefl-text-2);
    white-space: normal;
    margin-bottom: 6px}
body.dark-mode .toefl-transcript-body p{padding-bottom: 0; margin: 0 0 .3rem}
body.dark-mode .toefl-transcript-body p:last-child{margin-bottom: 0}
body.dark-mode .toefl-interview-item{margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--toefl-border)}
body.dark-mode .toefl-interview-item:last-of-type{border-bottom: none}
body.dark-mode .toefl-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(--toefl-font-mono)}
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)}
body.dark-mode .study-tip{color: var(--toefl-text-2)}
body.dark-mode .study-tip strong{color: var(--toefl-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}

/* =====================================================================
   CORRECTIF MODE SOMBRE (Chantier 2 — réparation globale)
   ---------------------------------------------------------------------
   Avant ce bloc, le mode sombre était cassé : les règles `body.dark-mode
   .xxx{ background-color:var(--content-bg) }` consommaient des variables
   (--content-bg, --bg-article, --text-color…) qui n'étaient JAMAIS
   surchargées en sombre (le PurgeCSS de fusion a vraisemblablement retiré
   le bloc d'override). Résultat : .content restait #F5F5F5 en « sombre ».

   On surcharge ici, en un seul endroit, les VARIABLES de couleur quand
   body.dark-mode est actif. Comme toutes les règles dark existantes lisent
   ces variables, basculer les variables suffit à passer toute la page en
   sombre, sans toucher aux centaines de règles déjà présentes.

   Placé en fin de fichier + sélecteur body.dark-mode (plus spécifique que
   :root) => gagne la cascade quel que soit l'ordre des :root précédents.
   ===================================================================== */
body.dark-mode {
    color-scheme: dark;

    /* Fonds principaux — gris foncés neutres (plus de bleu nuit) */
    --bg:                #161616;   /* fond global (html/body) */
    --content-bg:        #1c1c1c;   /* zone .content / .container */
    --bg-article:        #242424;   /* cartes, panneaux, tableaux (intérieur) */
    --bg-writing-example:#242424;
    --sidebar-bg:        #1e1e1e;

    /* Texte */
    --text-color:        #e6e6e6;
    --label-color:       #ffffff;
    --sublabel-color:    #d0d0d0;
    --sublabel-bg-color: #2e2e2e;
    --search-color:      #e6e6e6;
    --hover-color:       #b0b0b0;
    --feedback-color:    #9a9a9a;

    /* Bordures / ombres */
    --border-color:      #383838;
    --shadow-color:      rgba(0, 0, 0, 0.5);
    --doc-border:        #454545;

    /* Accordéons / sections / liens */
    --primary-color:     #3a4a82;   /* accordéon ACTIF (accent, conservé) */
    --accordion-bg:      #2e2e2e;
    --bg-ligne-header:   #2e2e2e;
    --doc-bg:            #262626;
    --sentence-bg:       #1f1f1f;
    --question-bg:       #1f1f1f;

    /* Options de QCM (p.o) */
    --o-bg:              #262626;
    --o-hover-bg:        #343434;
    --o-hover:           #ffffff;

    /* Bouton reset */
    --reset-bg:          #343434;
    --reset-bg-hover:    #454545;

    /* Champ de recherche : bordure */
    --search-border:     #383838;

    /* Surfaces "toefl" (utilisées par de nombreux composants dark) */
    --toefl-surface:     #242424;
    --toefl-surface-2:   #2e2e2e;
    --toefl-border:      #383838;
    --toefl-border-strong:#454545;
    --toefl-text:        #e6e6e6;
    --toefl-text-2:      #d0d0d0;
    --toefl-text-3:      #9a9a9a;
    --toefl-blue-light:  #2a2a2a;
    --toefl-shadow-sm:   0 1px 3px rgba(0,0,0,.4);
    --toefl-shadow:      0 4px 16px rgba(0,0,0,.5);

    /* Champs de recherche */
    --search-bg:         rgba(30, 30, 30, 0.85);
    --search-box-bg:     rgba(38, 38, 38, 0.95);
    --search-shadow:     rgba(0, 0, 0, 0.4);

    /* Marque de surlignage recherche : lisible sur fond sombre */
    --bg-mark:           #ffd24d;

    /* ── Tableaux de notation (rubric-*) : fonds pastel -> teintes sombres
       translucides, textes éclaircis. Bordures/accents conservés vifs. ── */
    --rubric-label-bg:      #262626;
    --rubric-label-text:    #e6e6e6;
    --rubric-label-border:  #383838;
    --rubric-label-sub:     #9a9a9a;
    /* th-label déjà foncé en clair (#1a2340/#fff) : on garde */

    --rubric-green-bg:      rgba(16,185,129,.16);
    --rubric-green-text:    #6ee7b7;
    --rubric-green-border:  #10b981;
    --rubric-green-th-bg:   #0f5132;

    --rubric-orange-bg:     rgba(217,119,6,.18);
    --rubric-orange-text:   #fcd34d;
    --rubric-orange-border: #fbbf24;
    --rubric-orange-th-bg:  #92400e;

    --rubric-red-bg:        rgba(239,68,68,.16);
    --rubric-red-text:      #fca5a5;
    --rubric-red-border:    #ef4444;
    --rubric-red-th-bg:     #7f1d1d;

    --rubric-gray-bg:       rgba(148,163,184,.14);
    --rubric-gray-text:     #cbd5e1;
    --rubric-gray-border:   #64748b;
    --rubric-gray-th-bg:    #475569;
}

/* =====================================================================
   TABLEAUX HTML "Structure" (<table> dans les chapitres de présentation)
   ---------------------------------------------------------------------
   Ces tableaux sont des <table> réels (≠ grilles .table-3cols). Sur mobile,
   width:100% + table-layout:fixed + colgroup en % écrasaient les colonnes
   (« < 27 min » cassé, dernière colonne tronquée). On force ici un scroll
   horizontal propre et on empêche la colonne « durée » de se couper.
   À appliquer en ajoutant la classe .struct-table sur le <table>.
   ===================================================================== */
.struct-table { table-layout: auto !important; }
.struct-table th,
.struct-table td { word-break: normal; overflow-wrap: anywhere; }
/* Colonne durée (2e) : pas de coupure interne disgracieuse (« < 27 min ») */
.struct-table td:nth-child(2),
.struct-table th:nth-child(2) { white-space: nowrap; }

@media (max-width: 768px) {
  /* Le conteneur scrolle ; le tableau garde une largeur lisible et déborde
     horizontalement au lieu d'écraser les colonnes. */
  .table-scroll { width: 100%; }
  .struct-table {
    width: auto !important;
    min-width: 560px;            /* garde des colonnes lisibles -> scroll */
  }
}
body.dark-mode .struct-table { table-layout: auto !important; }
body.dark-mode .struct-table td:nth-child(2),
body.dark-mode .struct-table th:nth-child(2) { white-space: nowrap; }
@media (max-width: 768px) {
  body.dark-mode .struct-table { width: auto !important; min-width: 560px; }
}

/* pv responsive video-container */
@media(max-width:768px){.video-container{width:100%;max-width:100%}}

/* =====================================================================
   Flèche des accordéons de premier niveau
   Chevron CSS en ::after, sans balisage ni image. currentColor le fait
   suivre les changements de couleur en :hover / .active et en thème
   sombre. Le JS bascule déjà la classe .active sur le bouton.
   Ajouté en fin de fichier : gagne dans la cascade sans rien modifier.
   ===================================================================== */
.accordion{position:relative;padding-right:48px}
.accordion::after{
    content:"";
    position:absolute;
    right:18px;
    top:50%;
    width:10px;
    height:10px;
    margin-top:-7px;
    border-right:2.5px solid currentColor;
    border-bottom:2.5px solid currentColor;
    transform:rotate(45deg);
    transition:transform .3s ease;
    opacity:.85;
    pointer-events:none}
.accordion.active::after{transform:rotate(-135deg);margin-top:-3px}
@media (prefers-reduced-motion:reduce){
    .accordion::after{transition:none}
}

/* =====================================================================
   Tableau de structure (.struct-table) — chapitre 1
   Ces règles remplacent les attributs style= qui étaient répétés sur
   chaque <th>/<td> de toefl-ibt-presentation1-{fr,en}.php. Valeurs
   reprises à l'identique : le rendu est inchangé.
   NB : .struct-table{table-layout:auto!important} et la règle @media
   plus haut dans ce fichier continuent de primer, comme avant.
   ===================================================================== */
.struct-table{
    width:100%;
    min-width:560px;
    border-collapse:collapse;
    table-layout:fixed;
    background-color:var(--bg-article);
    margin:1.2em 0;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 1px 3px var(--shadow-color)}
.struct-table col:nth-child(1){width:12%}
.struct-table col:nth-child(2){width:13%}
.struct-table col:nth-child(3){width:18%}
.struct-table col:nth-child(4){width:57%}
.struct-table thead th{
    background-color:var(--bg-ligne-header);
    color:var(--label-color);
    font-weight:700;
    padding:12px;
    text-align:left}
.struct-table tbody td{
    padding:5px;
    color:var(--text-color);
    line-height:1.4;
    background-color:var(--bg-article);
    border-bottom:1px solid var(--border-color);
    vertical-align:top}
.struct-table tbody tr:last-child td{border-bottom:none}