/* =============================================================================
   phonology.css — Feuille de style UNIQUE et COMMUNE des pages « Prononciation »
   (IELTS / TOEFL / TOEIC 4-Skills).

   Fusion de deux anciens fichiers :
     1) chapter-phonology-base.css : thème (variables :root clair + body.dark-mode
        sombre) + structure de page (sidebar, accordéons, panneaux, header, recherche,
        boutons, tables, surlignage) ;
     2) phonology.css : styles propres aux EXERCICES + grilles des tableaux.

   L'ordre est important : la section THÈME + STRUCTURE doit rester AVANT la section
   EXERCICES (cette dernière consomme les variables définies dans la première et y
   applique quelques overrides volontaires, ex. .enex/.frex/ul.tirets).

   Un seul chargement : $cssFiles = [CSS_PHONOLOGY].
   ============================================================================= */


/* #############################################################################
   #  SECTION 1 — THÈME + STRUCTURE  (ex-chapter-phonology-base.css)
   #  Origine : extrait de l'ancien chapter-ielts-vocabulary.css (uniquement le
   #  :root, les variables dark-mode de base, et les blocs structurels utilisés
   #  par la phonologie), sans aucune règle propre au vocabulaire.
   ############################################################################# */

/* ---------- Variables de thème : mode clair ---------- */
: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}

/* ---------- Variables de thème : mode sombre ---------- */
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}

/* ---------- Structure : mode clair ---------- */
/* Le JS (chapter-phonology.js) injecte un bouton « ☰ Sections » et un backdrop
   pour un menu coulissant. Le design de la phonologie affiche déjà la sidebar en
   permanence (colonne sur desktop, empilée sur mobile), donc ces éléments sont
   inutiles : on les masque sur tous les écrans. */
.mobile-nav-toggle,
.sidebar-backdrop{display:none !important}

.theme-toggle{cursor:pointer;
    font-size:1.3rem;
    background:0 0;
    border:none;
    color:var(--text-color);
    padding:5px 10px}
.enex{color:var(--enex-text);
    font-weight:700}
.frex{color:var(--frex-text);
    font-weight:700}
.chapter-header{display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 20px;
    background-color:var(--bg)}
.chapter-header h1{margin:0;
    font-size:1.5rem;
    color:var(--text-color)}
.container{display:flex;
    align-items:stretch;
    background-color:var(--content-bg)}
.content{flex:1;
    padding:10px;
    box-sizing:border-box;
    overflow:visible;
    background-color:var(--content-bg)}
.sidebar{width:220px;
    background-color:var(--sidebar-bg);
    color:var(--text-color);
    padding:20px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    box-shadow:2px 0 5px var(--shadow-color);
    transition:background-color .5s,color .5s;
    z-index:1000;
    box-sizing:border-box}
.sidebar a{color:var(--text-color);
    text-decoration:none;
    display:block;
    padding:8px 12px;
    border-radius:4px;
    transition:background-color .3s ease,color .3s ease,font-weight .3s ease;
    font-weight:400;
    word-wrap:break-word;
    overflow-wrap:break-word}
.sidebar a.active,.sidebar a:hover{background-color:var(--link-bg);
    color:#fff;
    font-weight:700;
    border-radius:8px}
.sidebar ul{list-style:none;
    padding-left:0;
    margin-left:0}
.btn{display:inline-block;
    padding:10px 20px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
    background-color:var(--link-bg);
    color:#fff;
    font-weight:700}
.btn:hover{background-color:var(--link-bga);
    color:var(--link-bgah)}
.icon-btn{width:32px;
    height:32px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    position:relative;
    transition:background-color .3s ease,color .3s ease;
    background-color:var(--link-bg);
    color:#fff;
    font-weight:700}
.icon-btn:hover{background-color:var(--link-bga);
    color:var(--link-bgah)}
.icon-btn.prev::before{content:"▲"}
.icon-btn.next::before{content:"▼"}
.accordion{background-color:var(--accordion-bg);
    color:var(--text-color);
    cursor:pointer;
    padding:16px;
    width:100%;
    border:none;
    text-align:left;
    outline:0;
    font-size:1.15em;
    font-weight:700;
    transition:background-color .3s ease,color .3s ease;
    margin-top:10px;
    border-radius:8px;
    box-shadow:0 1px 3px var(--shadow-color)}
.accordion.active,.accordion:hover{background-color:var(--primary-color);
    color:#fff}
.panel{max-height:0;
    overflow:hidden;
    padding:0 12px;
    margin-top:6px;
    background-color:var(--bg-article);
    border-radius:8px;
    box-sizing:border-box}
.panel,.panel li,.panel p{text-align:justify;
    line-height:1.1}
.search-container{display:flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border-radius:6px;
    background-color:var(--search-bg);
    backdrop-filter:blur(8px);
    width:100%;
    box-sizing:border-box;
    margin:0 auto;
    position:relative;
    z-index:100;
    box-shadow:0 2px 8px var(--search-shadow)}
.search-container.sticky-controls{background-color:transparent;
    position:fixed;
    top:30px;
    left:50%;
    transform:translateX(-50%);
    width:auto;
    max-width:600px;
    min-width:300px;
    border:1px solid var(--search-border);
    border-radius:8px;
    padding:12px 18px;
    z-index:2000;
    box-shadow:0 4px 16px var(--search-shadow);
    animation:slideInDesktop .3s ease-out}
.search-box{flex:1;
    min-width:150px;
    padding:8px 12px;
    border:1px solid var(--search-border);
    border-radius:6px;
    font-size:1rem;
    color:var(--text-color);
    background-color:var(--search-box-bg);
    transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.search-box:focus{outline:0;
    border-color:var(--primary-color);
    box-shadow:0 0 5px var(--primary-color)}
.search-controls{display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0}
.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}
.no-bullet{list-style:none}
.table-scroll{width:fit-content;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-left:auto;
    margin-right:auto}
#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)}
.btn-container {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:20px 0;
    width:100%}
ul.tirets {
    list-style-type:none;
    padding-left:20px;
    margin:10px 0}
ul.tirets li::marker {
    content:"– ";
    color:var(--text-color);
    font-weight:700}

/* ---------- Animations ---------- */
@keyframes slideIn {
    from {
    opacity:0;
    transform:translateY(-10px)}
to {
    opacity:1;
    transform:translateY(0)}
}
@keyframes slideIn-dark{
    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%)}
}
@keyframes slideInDesktop-dark{
    from {
    opacity:0;
    transform:translate(-50%,-10px)}
to {
    opacity:1;
    transform:translateX(-50%)}
}

/* ---------- Structure : mode sombre ---------- */
body.dark-mode .btn-container{display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:20px 0;
    width:100%}
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 .enex{color:var(--enex-text);
    font-weight:700}
body.dark-mode .frex{color:var(--frex-text);
    font-weight:700}
body.dark-mode .theme-toggle{cursor:pointer;
    font-size:1.3rem;
    background:0 0;
    border:none;
    color:var(--text-color);
    padding:5px 10px}
body.dark-mode .chapter-header{display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 20px;
    background-color:var(--bg)}
body.dark-mode .chapter-header h1{margin:0;
    font-size:1.5rem;
    color:var(--text-color)}
body.dark-mode .container{display:flex;
    align-items:stretch;
    background-color:var(--content-bg)}
body.dark-mode .content{flex:1;
    padding:10px;
    box-sizing:border-box;
    overflow:visible;
    background-color:var(--content-bg)}
body.dark-mode .sidebar{width:220px;
    background-color:var(--sidebar-bg);
    color:var(--text-color);
    padding:20px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    box-shadow:2px 0 5px var(--shadow-color);
    transition:background-color .5s,color .5s;
    z-index:1000;
    box-sizing:border-box}
body.dark-mode .sidebar a{color:var(--text-color);
    text-decoration:none;
    display:block;
    padding:8px 12px;
    border-radius:4px;
    transition:background-color .3s ease,color .3s ease,font-weight .3s ease;
    font-weight:400;
    word-wrap:break-word;
    overflow-wrap:break-word}
body.dark-mode .sidebar a.active, body.dark-mode .sidebar a:hover{background-color:var(--link-bg);
    color:#fff;
    font-weight:700;
    border-radius:8px}
body.dark-mode .sidebar ul{list-style:none;
    padding-left:0;
    margin-left:0}
body.dark-mode .btn{display:inline-block;
    padding:10px 20px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
    background-color:var(--link-bg);
    color:#fff;
    font-weight:700}
body.dark-mode .btn:hover{background-color:var(--link-bga);
    color:var(--link-bgah)}
body.dark-mode .icon-btn{width:32px;
    height:32px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    position:relative;
    transition:background-color .3s ease,color .3s ease;
    background-color:var(--link-bg);
    color:#fff;
    font-weight:700}
body.dark-mode .icon-btn:hover{background-color:var(--link-bga);
    color:var(--link-bgah)}
body.dark-mode .icon-btn.prev::before{content:"▲"}
body.dark-mode .icon-btn.next::before{content:"▼"}
body.dark-mode .accordion{background-color:var(--accordion-bg);
    color:var(--text-color);
    cursor:pointer;
    padding:16px;
    width:100%;
    border:none;
    text-align:left;
    outline:0;
    font-size:1.15em;
    font-weight:700;
    transition:background-color .3s ease,color .3s ease;
    margin-top:10px;
    border-radius:8px;
    box-shadow:0 1px 3px var(--shadow-color)}
body.dark-mode .accordion.active, body.dark-mode .accordion:hover{background-color:var(--primary-color);
    color:#fff}
body.dark-mode .panel{max-height:0;
    overflow:hidden;
    padding:0 12px;
    margin-top:6px;
    background-color:var(--bg-article);
    border-radius:8px;
    box-sizing:border-box}
body.dark-mode .panel, body.dark-mode .panel li, body.dark-mode .panel p{text-align:justify;
    line-height:1.1}
body.dark-mode .search-container{display:flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border-radius:6px;
    background-color:var(--search-bg);
    backdrop-filter:blur(8px);
    width:100%;
    box-sizing:border-box;
    margin:0 auto;
    position:relative;
    z-index:100;
    box-shadow:0 2px 8px var(--search-shadow)}
body.dark-mode .search-container.sticky-controls{background-color:transparent;
    position:fixed;
    top:30px;
    left:50%;
    transform:translateX(-50%);
    width:auto;
    max-width:600px;
    min-width:300px;
    border:1px solid var(--search-border);
    border-radius:8px;
    padding:12px 18px;
    z-index:2000;
    box-shadow:0 4px 16px var(--search-shadow);
    animation:slideInDesktop-dark .3s ease-out}
body.dark-mode .search-box{flex:1;
    min-width:150px;
    padding:8px 12px;
    border:1px solid var(--search-border);
    border-radius:6px;
    font-size:1rem;
    color:var(--text-color);
    background-color:var(--search-box-bg);
    transition:background-color .3s ease,color .3s ease,border-color .3s ease}
body.dark-mode .search-box:focus{outline:0;
    border-color:var(--primary-color);
    box-shadow:0 0 5px var(--primary-color)}
body.dark-mode .search-controls{display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0}
body.dark-mode .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 .no-bullet{list-style:none}
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 #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)}

/* ---------- Media queries ---------- */
@media (max-width:768px){
  .search-container {
    position:relative;
    width:100%;
    padding:8px 12px;
    box-sizing:border-box;
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:6px;
    margin:0 auto}
  .search-container.sticky-controls {
    position:fixed;
    top:20px;
    left:10px;
    right:10px;
    width:auto;
    min-width:0;
    max-width:none;
    margin:0;
    z-index:2000;
    padding:10px 15px;
    background:rgba(var(--bg-color-rgb),.95);
    backdrop-filter:blur(10px);
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    animation:slideIn .3s ease-out;
    transform:none}
  .search-box {
    width:100%;
    min-width:0;
    flex:1;
    font-size:.9rem}
  .search-controls {
    display:flex;
    align-items:center;
    gap:5px;
    flex-shrink:0}
  .icon-btn {
    width:28px;
    height:28px;
    font-size:14px;
    padding:0}
  .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}
  .sidebar {
    font-size:.9rem;
    padding:10px}
  .btn {
    font-size:12px;
    padding:6px 12px}
  .accordion+.panel .video-container {
    margin:.5em 0}
  .accordion+.panel .video-container video {
    width:100%;
    height:auto}
  .table-scroll {
    width:100%}
}
@media (max-width:768px){
  body.dark-mode .search-container{position:relative;
    width:100%;
    padding:8px 12px;
    box-sizing:border-box;
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:6px;
    margin:0 auto}
  body.dark-mode .search-container.sticky-controls{position:fixed;
    top:20px;
    left:10px;
    right:10px;
    width:auto;
    min-width:0;
    max-width:none;
    margin:0;
    z-index:2000;
    padding:10px 15px;
    background:rgba(var(--bg-color-rgb),.95);
    backdrop-filter:blur(10px);
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    animation:slideIn-dark .3s ease-out;
    transform:none}
  body.dark-mode .search-box{width:100%;
    min-width:0;
    flex:1;
    font-size:.9rem}
  body.dark-mode .search-controls{display:flex;
    align-items:center;
    gap:5px;
    flex-shrink:0}
  body.dark-mode .icon-btn{width:28px;
    height:28px;
    font-size:14px;
    padding:0}
  body.dark-mode .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 .sidebar{font-size:.9rem;
    padding:10px}
  body.dark-mode .btn{font-size:12px;
    padding:6px 12px}
  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%}
}


/* #############################################################################
   #  SECTION 2 — EXERCICES + TABLEAUX  (ex-phonology.css)
   ############################################################################# */
.ipa-symbol{color:var(--ipa-symbol-color);font-weight:700}.ipa-example{color:var(--ipa-example-color)}h4{margin-top:4px;margin-bottom:4px;font-weight:600}.exercise-container{background-color:var(--exercise-bg);border:1px solid var(--exercise-border);border-radius:8px;padding:20px;margin:20px 0}.question{margin-bottom:10px}.question-item{margin-bottom:20px;padding:15px;background-color:var(--input-bg);border-radius:6px;border:1px solid var(--exercise-border)}.question-text{font-weight:600;display:block;margin:0}.question-item audio{width:100%;max-width:400px;height:40px}.answer-input{width:100%;max-width:400px;padding:10px 12px;font-size:16px;border:2px solid var(--input-border);border-radius:6px;background-color:var(--input-bg);color:var(--text-color);transition:border-color .3s ease}.answer-input:focus{outline:0;border-color:var(--input-focus);box-shadow:0 0 0 3px rgba(42,157,143,.1)}.answer-input.correct{border-color:var(--word-btn-correct)}.answer-input.incorrect{border-color:var(--word-btn-incorrect)}.instruction-text{font-style:italic;margin-bottom:15px;padding:10px;background-color:var(--exercise-bg);border-radius:4px}.word-container{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;background-color:var(--exercise-bg);border:1px solid var(--exercise-border);padding:10px;border-radius:6px}.word-btn{display:inline-block;padding:6px 12px;background-color:var(--word-btn-bg);border:1px solid var(--exercise-border);border-radius:5px;cursor:pointer;user-select:none;transition:background-color .2s,color .2s}.word-btn:hover{background-color:var(--word-btn-hover)}.word-btn.selected{background-color:var(--word-btn-selected);color:#fff}.word-btn.correct{background-color:var(--word-btn-correct);color:#fff}.word-btn.incorrect{background-color:var(--word-btn-incorrect);color:#fff}.word-btn.missed{background-color:var(--word-btn-missed);color:#fff}.score-display{font-size:18px;font-weight:700;padding:10px;margin:0;background-color:var(--exercise-bg);border-radius:6px;display:none;width:fit-content}.score-display .correct-count{color:var(--word-btn-correct)}.score-display .total-count{color:var(--text-color)}.check-btn,.checkBtn,.reset-btn,.resetBtn,.submit-btn{padding:10px 20px;border:none;border-radius:6px;background-color:var(--button-bg);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease}.check-btn:hover,.checkBtn:hover,.reset-btn:hover,.resetBtn:hover,.submit-btn:hover{background-color:var(--button-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(42,157,143,.3)}.check-btn:active,.checkBtn:active,.reset-btn:active,.resetBtn:active,.submit-btn:active{transform:translateY(0)}.resetBtn{margin-top:10px;margin-bottom:10px}.feedbk{margin-top:5px;padding:12px 15px;border-radius:6px;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease;display:none}.feedbk.visible{opacity:1;max-height:500px;display:block;margin:5px 0}.feedbk .correct{color:var(--word-btn-correct);font-weight:700;padding:5px}.feedbk .incorrect{color:var(--word-btn-incorrect);font-weight:700;padding:5px}.feedbk .missed{color:var(--word-btn-missed);font-weight:700;padding:5px}.feedbk-detail{display:block;margin-top:4px;padding-left:10px;font-size:.9em;font-weight:400;opacity:.9;color:var(--secondary-color)}.feedback{margin-top:5px;padding:5px 10px;border-radius:5px;font-size:.95rem;transition:all .3s ease;display:none}.feedback.visible{display:block}.feedback.correct{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.feedback.incorrect{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.feedback.warning{background-color:#fff3cd;color:#856404;border:1px solid #ffeeba}.answer{padding:12px 15px;background-color:var(--exercise-bg);border-radius:6px;font-weight:500;color:var(--text-color)}.answer.correct{border-left-color:var(--word-btn-correct);background-color:rgba(45,122,45,.1);color:var(--word-btn-correct)}.answer.incorrect{border-left-color:var(--word-btn-incorrect);background-color:rgba(201,42,42,.1);color:var(--word-btn-incorrect)}.question{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.question-text{flex-basis:100%}.question audio{flex:0 0 250px}.question .answer{flex:0 0 200px}.question .checkBtn{flex:0 0 auto;margin-top:0}.question .checkBtn:empty{margin-top:10px}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.incorrect-animation{animation:shake .3s ease-in-out}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.correct-animation{animation:pulse .3s ease-in-out}@media (max-width:768px){.word-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}.word-btn{padding:8px 12px;font-size:14px}.answer-input{font-size:14px}.action-buttons{flex-direction:column}.check-btn,.reset-btn,.submit-btn{width:100%}}@media (max-width:410px){.answer,.checkBtn,audio{display:block;margin-left:auto;margin-right:auto;text-align:center}}@media (min-width:1000px){.question{display:flex;flex-wrap:wrap;align-items:center;gap:15px}.question-text{flex-basis:100%}.question .answer,.question audio{display:inline-flex;align-items:center;margin:0}.question audio{width:250px;flex-shrink:0}.question .answer{flex:0 0 auto;width:200px}.question .checkBtn{flex-shrink:0;margin-top:0}.question .feedbk{flex-basis:100%;margin-top:10px}}

/* ===== IELTS/TOEFL phonology — structural styles (tables, IPA rows, clickable words, lists) ===== */
.word{padding:6px 10px;margin:3px 4px;border:1px solid currentColor;border-radius:8px;background-color:transparent;cursor:pointer;display:inline-block;transition:all .2s ease;user-select:none;font-size:1rem}
.word:hover{background-color:rgba(0,0,0,.05);box-shadow:0 2px 6px rgba(0,0,0,.15);transform:translateY(-1px)}
.word.selected{background-color:#3498db}
.word.correct{background-color:#118f00}
.word.incorrect{background-color:#f54927}
.word.missed{background-color:orange}
.feedbk-detail{display:block;color:#3498db;font-weight:700;margin:1px 0;line-height:1.2}
.done{opacity:.85}
input.answer{padding:5px 8px;border:1px solid var(--border-color,#ccc);border-radius:5px;background-color:var(--input-bg,#fff);color:var(--input-color,#000);width:200px;transition:all .2s}
body.dark-mode input.answer{--input-bg:#333;--input-color:#eee;--border-color:#555}
body:not(.dark-mode) input.answer{--input-bg:#fff;--input-color:#000;--border-color:#ccc}
.table,.table-2cols,.table-3cols,.table-4cols,.table-7cols,.table-voc{display:block;font-family:'Inter','Inter-fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;border-radius:10px;overflow-x:auto;overflow-y:hidden;max-width:100%;background-color:var(--bg-article,#fff);color:var(--text-color,#333);padding:0;margin-top:10px;box-shadow:0 4px 12px var(--shadow-color,rgba(0,0,0,.1));width:100%}
.ligne,.ligne-header{display:grid;border-bottom:1px solid var(--border-color,#e0e0e0);font-size:1rem;word-break:break-word;overflow:visible;margin:0;column-gap:10px}
.table-4cols .ligne,.table-4cols .ligne-header{grid-template-columns:150px 1fr 1fr 150px;min-width:600px}
.table-2cols .ligne,.table-2cols .ligne-header{grid-template-columns:140px 1fr;min-width:300px}
.table-2cols .ligne-header{padding:0}
.table-3cols .ligne,.table-3cols .ligne-header{grid-template-columns:200px 1fr 1fr;min-width:500px}
.table-7cols .ligne,.table-7cols .ligne-header{grid-template-columns:100px 1fr 1fr 1fr 1fr 1fr 100px;min-width:900px}
.table-voc .ligne,.table-voc .ligne-header{grid-template-columns:1fr 1fr;min-width:300px}
.ligne-header{background-color:var(--bg,#f7f9fc);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:10px;min-height:48px}
.ligne .col,.ligne-header .col{display:block;padding:10px;margin:0;white-space:normal;word-break:break-word;overflow:visible}
.table-voc .col{padding:8px;white-space:normal;word-break:break-word;overflow-wrap:break-word}
.table-voc .ligne-header{min-height:40px}
.col i{font-style:italic;color:var(--secondary-color,#555);line-height:1.5}
.col span{font-weight:700;color:inherit}
.col span.frex{color:grey;font-style:normal;display:block;margin-bottom:.2em}
.col span.enex{color:#558fdd;font-style:italic;display:block;margin-bottom:.5em}
.col p{margin:0}
.col ul{padding-left:1.2em;margin:.2em 0;list-style:none}
.col ul li{margin-bottom:.2em;word-break:break-word}
.ligne:hover{transition:background-color .3s ease;background-color:rgba(0,0,0,.05)}
body.dark-mode .ligne:hover{background-color:rgba(255,255,255,.05)}
.no-break{display:inline-block;white-space:nowrap}
@media (max-width:900px){.ligne,.ligne-header{font-size:.9rem}.ligne-header>.col,.ligne>.col{padding:6px 8px}.table-2cols,.table-3cols,.table-4cols,.table-7cols,.table-voc{overflow-x:auto;width:100%}}
section .quiz{display:none;border:1px solid var(--border-color);padding:15px;margin-top:10px;border-radius:8px;background-color:var(--bg-article);color:var(--text-color);box-shadow:0 2px 5px var(--shadow-color)}
section.open .quiz{display:block}
section .quiz>div[id^=question]{margin-bottom:20px}
section .quiz p.q{color:var(--text-color);margin-bottom:10px}
section .quiz .o{display:inline-flex;align-items:center;margin:5px 10px 5px 0;padding:5px 10px;border:1px solid var(--border-color);border-radius:5px;cursor:pointer;transition:all .2s;background-color:var(--bg);color:var(--text-color)}
section .quiz .o:hover{background-color:var(--hover-color);color:var(--bg-article)}
.table-voc .col ul,ul.no-bullet{list-style:none;padding-left:0;margin:0 0 .2em 0}
.table-voc .col ul li code,code,p code{font-style:italic;font-family:inherit;font-weight:inherit;color:inherit;background:0 0;padding:0}
:root{--quiz-correct-bg:#c8f7c5;--quiz-correct-color:#155724;--quiz-incorrect-bg:#f7c5c5;--quiz-incorrect-color:#721c24;--feedback-correct-color:#28a745;--feedback-incorrect-color:#dc3545}
body.dark-mode{--quiz-correct-bg:#2d6a2d;--quiz-correct-color:#d4ffd4;--quiz-incorrect-bg:#a94442;--quiz-incorrect-color:#ffd6d6;--feedback-correct-color:#28a745;--feedback-incorrect-color:#dc3545}
section .quiz .o.correct{background-color:var(--quiz-correct-bg);color:var(--quiz-correct-color);border-color:var(--quiz-correct-color)}
section .quiz .o.incorrect{background-color:var(--quiz-incorrect-bg);color:var(--quiz-incorrect-color);border-color:var(--quiz-incorrect-color)}
section .quiz .feedbk{margin-top:5px;font-weight:700;display:none;color:var(--text-color)}
p{text-align:justify;margin-bottom:0}
.frex{display:inline;color:gray!important;font-style:italic!important;font-weight:700!important}
.enex{display:inline;color:#3498db!important;font-style:italic!important;font-weight:700!important}
.no-break{display:inline-block;white-space:nowrap}
ul.tirets{list-style-type:none;padding-left:1.5em;margin:0 0 1em 0;text-align:justify}
ul.tirets li{position:relative;margin-bottom:0;padding-left:1em}
ul.tirets li::before{content:"–";position:absolute;left:0;color:#333;font-weight:700}
ul.arrow{list-style:none;padding-left:1.5em;margin:0 0 .5em 0;text-align:justify;line-height:1.2}
ul.arrow li{position:relative;margin-bottom:.3em;padding-left:1.5em}
ul.arrow li::before{content:"➤";position:absolute;left:0;color:#3498db;font-weight:700}
.check{color:green;font-weight:900;font-size:1.1em;margin-right:.3em}
.cross{color:red;font-weight:900;font-size:1.1em;margin-right:.3em}
strong{color:#3498db}
.o.selected.correct{background-color:#4caf50;color:#fff;border:none}
.o.selected.incorrect{background-color:#e74c3c;color:#fff;border:none}
.o.correction.correct{background-color:#a3d9a5;color:#000;opacity:.9;border:none}
.o.correction.incorrect{background-color:#f0f0f0;color:#000;opacity:.7;border:none}
@media (max-width:900px){.content,.table,.table-3cols,.table-4cols,.table-voc,article,main{width:100%;padding:0 10px}header h1{font-size:1rem}.search-box{font-size:.8rem;padding:2px 4px}.search-controls button{font-size:.7rem;padding:1px 3px}article h2,article h3{font-size:.85rem;margin:2px 0}}
.table-2cols-notation{display:block;font-family:'Inter','Inter-fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;border-radius:10px;overflow-x:auto;max-width:100%;background-color:var(--bg-article,#fff);color:var(--text-color,#333);box-shadow:0 4px 12px var(--shadow-color,rgba(0,0,0,.1));width:100%}
.table-2cols-notation .ligne,.table-2cols-notation .ligne-header{display:grid;grid-template-columns:10% 90%;border-bottom:1px solid var(--border-color,#e0e0e0);column-gap:10px;margin:0;overflow:visible}
.table-2cols-notation .ligne-header{background-color:var(--bg,#f7f9fc);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:10px}
.table-2cols-notation .col,.table-2cols-notation .ligne-header .col{padding:8px 10px;word-break:break-word;white-space:normal}

/* =====================================================================
   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. chapter-phonology.js bascule déjà la classe .active.
   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}
}