/* #TOC:css-debut */
    /* ==========================================================================
   FONTS & BASE
   ========================================================================== */

    @font-face {
      font-family: "SBL Hebrew";
      src: url("SBL_Hbrw.ttf") format("truetype");
    }

    /* Grec biblique polytonique (lectures du dimanche/semaine en grec, phase C1,
       2026-08-06) — Cambria, essayée en premier, rendait mal les voyelles à accent
       grave (retour utilisateur, capture d'écran à l'appui). SBL Greek est la police
       académique de référence, même famille que SBL Hebrew ci-dessus. */
    @font-face {
      font-family: "SBL Greek";
      src: url("SBL_grk.ttf") format("truetype");
    }

    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("Inter-Regular.woff2") format("woff2");
    }

    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("Inter-Medium.woff2") format("woff2");
    }

    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("Inter-SemiBold.woff2") format("woff2");
    }

    @font-face {
      font-family: "Josefin Sans";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("JosefinSans-Regular.woff2") format("woff2");
    }

    @font-face {
      font-family: "Josefin Sans";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("JosefinSans-SemiBold.woff2") format("woff2");
    }

    @font-face {
      font-family: "Josefin Sans";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("JosefinSans-Bold.woff2") format("woff2");
    }

    body {
      font-family: "Inter", "Verdana", "Helvetica Neue", sans-serif;
      text-align: center;
      margin: 0;
      padding: 0;
      font-size: 16px;
      text-rendering: optimizeLegibility;
      /* Empêche le "tirer pour actualiser" : le rechargement qu'il déclenche perdait l'écran courant et renvoyait sur Apprendre */
      overscroll-behavior-y: contain;
    }

    html {
      font-size: 16px;
      scroll-behavior: smooth;
      overscroll-behavior-y: contain;
    }



    /* ==========================================================================
   GLOBAL LAYOUT & CONTAINERS
   ========================================================================== */

    .app-container {
      max-width: 420px;
      margin: 0 auto;
      padding: 15px;
      min-height: 100vh;
      box-sizing: border-box;
      padding-bottom: 140px !important;
    }

    #revisionView {
      position: relative;
    }

    /* Style amélioré des listes déroulantes (tri, filtres, etc.) */
    select {
      padding: 7px;
      margin: 5px;
      border-radius: 5px;
    }

    select.disabled {
      opacity: 0.4;
      pointer-events: none;
    }

    select:focus {
      outline: none;
    }

    #settingsMenu {
      display: none;
      margin: 10px auto;
      padding: 12px;
      border-radius: 10px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 90%;
    }

    #settingsMenu.show {
      display: flex;
    }

    #settingsMenu .setting-label {
      margin: 6px;
      flex: 1 1 45%;
      text-align: left;
      font-size: 0.85em;
    }

    #settingsMenu .setting-label>select {
      margin: 5px 0 0;
    }

    .level-range-controls {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      margin-top: 5px;
    }

    .level-range-controls>select {
      margin: 0;
    }

    #sortSelect {
      width: 150px;
    }

    #levelSelect {
      width: 56px;
    }

    #topNSelect {
      width: 56px;
    }

    /* Optionnel : un peu plus d’espace entre options pour la lisibilité */
    #levelSelect option {
      padding: 4px 10px;
    }

    #topNSelect option {
      padding: 4px 10px;
    }

    .level-range-title {
      display: block;
      margin-bottom: 0;
    }

    #themeSelect {
      width: 150px;
    }

    /* #TOC:css-variables */
    /* ==========================================================================
   WELCOME HEADER & ANIMATIONS
   ========================================================================== */

    #welcomeHeader h1 {
      font-family: "Josefin Sans", sans-serif;
      letter-spacing: 0.06em;
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 2px;
    }

    /* Sous-titre : dit ce que fait l'application, que le titre seul ne porte plus */
    #appTagline {
      font-family: "Josefin Sans", sans-serif;
      font-size: 0.82em;
      letter-spacing: 0.04em;
      font-weight: 400;
      opacity: 0.72;
      margin: 0 0 6px;
      line-height: 1.2;
    }

    #welcomeHeader {
      max-height: 200px;
      /* valeur par défaut */
      overflow: hidden;
      transition: max-height 1.2s ease-out, opacity 1s ease-out;
      margin-bottom: 5px;
    }

    #welcomeHeader.hidden {
      max-height: 0 !important;
      opacity: 0;
      margin-bottom: 0;
      pointer-events: none;
    }

    #welcomeHeader.welcome-hidden {
      display: none;
    }

    @keyframes flashRadial {
      0% {
        box-shadow: 0 0 0 0px transparent;
      }

      40% {
        box-shadow: 0 0 40px 28px var(--flash-color);
      }

      100% {
        box-shadow: 0 0 0 0px transparent;
      }
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }
    }

    /* ==========================================================================
    MODE RÉVISION INTELLIGENTE
    ============================================================================*/
    .smart-review-active .top-nav-bar {
      display: none !important;
    }

    .smart-review-active #nextLevelBtn {
      display: none !important;
    }

    /* ==========================================================================
   MODE FOCUS
   ========================================================================== */


    .focus-mode #hebrew {
      margin-top: 20px !important;
    }

    .focus-mode .hebrew-text,
    .focus-mode #translation {
      margin-top: 0px !important;
      padding-top: 0 !important;
      margin-bottom: 0px !important;
    }

    .focus-mode [data-mode="smart"] #hebrew,
    .focus-mode [data-mode="smart"] .hebrew-text {
      margin-top: 12px !important;
      padding-top: 0 !important;
    }

    .focus-mode #smartKnowledgeQuestion {
      margin: 20px !important;
    }

    .focus-mode #riHeaderContainer {
      margin: 21px 0 15px 0 !important;
    }

    .focus-mode .options {
      margin-top: 20px;
      transition: margin-top 0.3s ease;
    }

    .focus-mode #outilsView .options {
      margin-top: 0 !important;
    }

    .focus-mode #themeImageContainer {
      margin: 20px auto 0px !important;
    }

    .focus-mode #searchSortContainer {
      display: none !important;
    }

    .focus-mode #referenceBtnsContainer,
    body.quiz-active #referenceBtnsContainer,
    body.smart-review-active #referenceBtnsContainer {
      display: none !important;
    }

    .focus-mode #bottomBar {
      display: none !important;
    }

    .focus-mode #corpusSwitchWrap {
      margin-top: 10px !important;
    }

    /* La page Outils reste consultable en mode focus : seul le bottomBar est masqué. */
    .focus-mode #outilsView.outils-view-active {
      display: block !important;
    }

    #focusExitBtn {
      display: none;
      position: fixed;
      bottom: 10px;
      right: 10px;
      z-index: 1000;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid var(--color-nav-icon);
      background: var(--bg-card);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: var(--color-nav-icon);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
      #focusExitBtn:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }

    @media (min-width: 460px) {
      #focusExitBtn {
        right: calc(50% - 200px);
      }
    }

    .focus-mode #focusExitBtn {
      display: flex;
    }

    #focusTab {
      display: flex;
      position: fixed;
      bottom: calc(70px + env(safe-area-inset-bottom) + 10px);
      right: 10px;
      z-index: 950;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid var(--color-nav-icon);
      background: var(--bg-card);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: var(--color-nav-icon);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
      #focusTab:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }

    @media (min-width: 460px) {
      #focusTab {
        right: calc(50% - 200px);
      }
    }

    .focus-mode #focusTab {
      display: none;
    }

    #themeImageContainer {
      margin: 20px auto 0px !important;
    }


    /* ==========================================================================
   TYPOGRAPHY & TEXT ELEMENTS
   ========================================================================== */

    /* Note : les propriétés pour #hebrew / .hebrew-text (marges, police, direction,
       min-height) sont entièrement redéfinies plus bas via `all: unset !important`
       (règle "#hebrew, .hebrew-text" combinée à `all: unset`) — toute déclaration ici
       serait immédiatement écrasée. Voir cette règle plus loin dans la feuille de style
       pour les valeurs réellement appliquées. */

    .heb-inline {
      font-family: "SBL Hebrew", serif;
      direction: rtl;
    }

    #translation {
      margin-top: 0px !important;
      margin-bottom: 15px !important;
      padding: 10px 0 !important;
      line-height: 1.4;
      font-size: 0.9em;
    }

    .translation {
      font-size: 1.8em;
    }

    .translit {
      font-size: 0.9em;
      font-style: italic;
      margin-bottom: 4px;
    }

    .translat {
      font-size: 1em;
    }

    .blue-letter-bible-btn {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
      min-height: 20px;
      padding: 0 8px;
      border-radius: 7px;
      font-size: 0.8em;
      font-weight: 500;
      color: var(--color-top-nav-active);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .blue-letter-bible-btn:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transform: translateY(-1px);
    }

    .blue-letter-bible-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
    }

    .ellipsis-btn {
      min-width: 0 !important;
      min-height: 20px !important;
      max-height: 20px !important;
      height: 20px !important;
      padding: 0 8px !important;
      font-size: 1.2em !important;
      font-weight: 900 !important;
      line-height: 0.95 !important;
      letter-spacing: 0;
      opacity: 1;
      color: #475569 !important;
      border-radius: 9px !important;
      background: linear-gradient(180deg, #ffffff 0%, #edf2f7 100%) !important;
      border: 1px solid rgba(148, 163, 184, 0.55) !important;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      position: relative;
      top: -1px;
      overflow: visible;
    }

    .ellipsis-btn::before {
      content: "";
      position: absolute;
      inset: -4px -8px;
      border-radius: inherit;
      background: transparent;
    }

    .focus-mode .ellipsis-btn::before {
      inset: -8px -12px;
    }

    body.dark-mode .ellipsis-btn {
      background: #2b261f !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40) !important;
      color: #e5e7eb !important;
    }

    .blue-letter-bible-mobile-tip {
      display: none;
      margin: 10px 16px 0;
      padding: 8px 12px;
      border-radius: 10px;
      background: rgba(249, 115, 22, 0.18);
      color: #9a3412;
      border: 1px solid rgba(249, 115, 22, 0.35);
      font-size: 0.82em;
      font-weight: 600;
      line-height: 1.35;
      text-align: center;
    }

    h1 {
      font-size: 1.5em;
    }

    strong {
      font-weight: 600 !important;
      font-size: 1.1em !important;
      display: inline !important;
      margin: 28px 0 12px 0;
    }

    #knowledgeQuestion,
    #navCategoryLabel {
      font-weight: normal !important;
      margin: 15px 0 10px 0 !important;
      line-height: 1.5 !important;
    }

    #knowledgeQuestion {
      font-size: 1em !important;
    }

    #navCategoryLabel {
      font-size: 1em !important;
      opacity: 0.9;
    }

    #helpText {
      text-align: left !important;
      padding: 0 10px;
      line-height: 1.6;
      font-size: 0.95em;
    }

    #helpText strong {
      all: revert !important;
      display: inline !important;
      margin: 0 !important;
      font-size: inherit !important;
      font-weight: bold !important;
    }

    /* Surlignage du mot dans le verset d'exemple */
    #exampleHebrew mark {
      background-color: #ffc51688;
      color: #2a2a2a;
      border-radius: 6px;
      padding: 0 6px;
      line-height: 1.3;
      display: inline-block;
    }

    /* #TOC:css-dark-mode */
    body.dark-mode #exampleHebrew mark {
      background-color: #8a7a00a2;
      color: #ffffff;
    }


    /* ==========================================================================
   BUTTONS - GENERAL & SPECIFIC
   ========================================================================== */

    button {
      font-size: 1em;
      margin: 5px;
      vertical-align: middle;
      cursor: pointer;
      border: none;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.62);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      display: inline-flex;
      align-items: center;
      justify-content: center !important;
      min-width: 40px;
      min-height: 40px;
      -webkit-tap-highlight-color: transparent !important;
    }

    /*@media (hover: hover) and (pointer: fine) : pour éviter que l’ombre ne persiste sur smartphone après activation */

    @media (hover: hover) and (pointer: fine) {
      button:not(#knownBtn):not(#littleBtn):not(#unknownBtn):not(.tabBtn):hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
      }

      button:not(#knownBtn):not(#littleBtn):not(#unknownBtn):active {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
      }

      button:active,
      button:focus {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      }
    }

    #undoBtn {
      background: #ffffff !important;
      padding: 10px 18px !important;
      font-size: 0.95em !important;
      border: none !important;
      border-radius: 10px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      cursor: pointer !important;
      margin-top: 14px !important;
      margin-bottom: 14px !important;
      min-width: 120px;
      display: none;
      transition: all 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
      #undoBtn:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        background: #f8f9fa !important;
      }
    }

    #tabHelp #knownBtn,
    #tabHelp #littleBtn,
    #tabHelp #unknownBtn,
    #tabHelp #knownHelpBtn,
    #tabHelp #littleHelpBtn,
    #tabHelp #unknownHelpBtn,
    #tabHelp #knownHelpBtn2,
    #tabHelp #littleHelpBtn2,
    #tabHelp #unknownHelpBtn2 {
      padding: 8px 10px !important;
      font-size: 1em !important;
      margin: 0 2px !important;
    }

    .help-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 0.8em 0;
    }

    .help-item>button {
      flex-shrink: 0;
    }

    /* Help buttons: reset margins so icon buttons align with surrounding content */
    .help-item #sortFilterBtn,
    .help-item #revealBtn,
    .help-item #illustrationBtn,
    .help-item #hintBtn,
    .help-item #exampleBtn,
    .help-item #paradigmBtn,
    .help-item #sortFilterHelpBtn,
    .help-item #revealHelpBtn,
    .help-item #illustrationHelpBtn,
    .help-item #hintHelpBtn,
    .help-item #exampleHelpBtn,
    .help-item #paradigmHelpBtn2,
    .help-item #sortFilterHelpBtn2,
    .help-item #revealHelpBtn2,
    .help-item #illustrationHelpBtn2,
    .help-item #hintHelpBtn2,
    .help-item #exampleHelpBtn2,
    .help-item #paradigmHelpBtn3 {
      display: inline-flex !important;
      margin: 0 !important;
    }

    /* Oui/Peu/Non in help: prevent flex stretching, compact padding */
    .help-known-btns>div {
      align-items: flex-start !important;
    }

    .help-known-btns #knownBtn,
    .help-known-btns #littleBtn,
    .help-known-btns #unknownBtn,
    .help-known-btns #knownHelpBtn,
    .help-known-btns #littleHelpBtn,
    .help-known-btns #unknownHelpBtn,
    .help-known-btns #knownHelpBtn2,
    .help-known-btns #littleHelpBtn2,
    .help-known-btns #unknownHelpBtn2 {
      padding: 8px 10px !important;
      width: auto !important;
      flex: 0 0 auto !important;
      font-size: 1em !important;
    }

    /* Exception Oui/Peu/Non : boutons en ligne, texte en dessous */
    .help-known-btns {
      flex-direction: column !important;
      gap: 4px !important;
    }

    .help-known-btns>span {
      padding-top: 0 !important;
    }

    .help-item>span {
      padding-top: 4px;
    }

    #knownBtn,
    #littleBtn,
    #unknownBtn,
    #knownHelpBtn,
    #littleHelpBtn,
    #unknownHelpBtn,
    #knownHelpBtn2,
    #littleHelpBtn2,
    #unknownHelpBtn2 {
      display: inline-flex !important;
      flex-direction: row !important;
      position: relative;
      overflow: hidden;
      padding: 10px 30px !important;
      justify-content: center !important;
      line-height: 1.35 !important;
      text-align: center !important;
      font-weight: normal !important;
      font-size: 1.2em !important;
      color: black;
      border: none !important;
      white-space: nowrap;
    }

    #littleBtn,
    #littleHelpBtn,
    #littleHelpBtn2 {
      margin: 16px 26px !important;
    }


    #knownBtn,
    #knownHelpBtn,
    #knownHelpBtn2 {
      background: linear-gradient(160deg, #8effc0, #58e88a);
    }

    #littleBtn,
    #littleHelpBtn,
    #littleHelpBtn2 {
      background: linear-gradient(160deg, #fff591, #ffd93d);
    }

    #unknownBtn,
    #unknownHelpBtn,
    #unknownHelpBtn2 {
      background: linear-gradient(160deg, #ffc8c8, #f98080);
    }

    #countKnown {
      color: #036d30;
    }

    #countLittle {
      color: #b67d03;
    }

    #countUnknown {
      color: #940808;
    }

    #countKnown,
    #countLittle,
    #countUnknown {
      display: block !important;
      margin-top: 2px !important;
      font-size: 0.8em !important;
      font-weight: bold;
    }

    #revealBtn,
    #revealHelpBtn,
    #revealHelpBtn2 {
      background: linear-gradient(160deg, #7aaedd, #4a7fb5);
    }

    #revealBtn,
    #revealHelpBtn,
    #revealHelpBtn2 {
      -webkit-user-select: none;
      user-select: none;
    }

    #hintBtn,
    #hintHelpBtn,
    #hintHelpBtn2 {
      background: linear-gradient(160deg, #a2b4e6, #7281c3);
    }

    #exampleBtn,
    #exampleHelpBtn,
    #exampleHelpBtn2 {
      background: linear-gradient(160deg, #aaabe3, #7975c1);
    }

    #illustrationBtn,
    #illustrationHelpBtn,
    #illustrationHelpBtn2 {
      background: linear-gradient(160deg, #99bce9, #6b8ec4);
    }

    #revealBtn,
    #illustrationBtn,
    #hintBtn,
    #exampleBtn,
    #paradigmBtn,
    #paradigmHelpBtn3,
    #revealHelpBtn,
    #illustrationHelpBtn,
    #hintHelpBtn,
    #exampleHelpBtn,
    #paradigmHelpBtn2,
    #revealHelpBtn2,
    #illustrationHelpBtn2,
    #hintHelpBtn2,
    #exampleHelpBtn2 {
      color: white;
      padding: 14px 20px !important;
      margin: 8px 12px !important;
      justify-content: center !important;
      text-align: center !important;
    }

    #illustrationBtn,
    #hintBtn,
    #exampleBtn,
    #paradigmBtn,
    #paradigmHelpBtn3,
    #revealHelpBtn,
    #illustrationHelpBtn,
    #hintHelpBtn,
    #exampleHelpBtn,
    #paradigmHelpBtn2,
    #revealHelpBtn2,
    #illustrationHelpBtn2,
    #hintHelpBtn2,
    #exampleHelpBtn2 {
      padding: 12px 14px !important;
    }

    #sortFilterHelpBtn,
    #sortFilterHelpBtn2 {
      color: black;
      padding: 14px 20px !important;
      margin: 8px 12px !important;
      justify-content: center !important;
      text-align: center !important;
    }

    body.dark-mode #sortFilterHelpBtn,
    body.dark-mode #sortFilterHelpBtn2 {
      background: var(--bg-card) !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
      color: var(--color-nav-icon) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }

    #illustrationBtn[aria-pressed="true"],
    #hintBtn[aria-pressed="true"],
    #exampleBtn[aria-pressed="true"] {
      outline: 2px solid rgba(255, 255, 255, 0.8);
      filter: brightness(1.18);
    }

    #paradigmBtn,
    #paradigmHelpBtn2,
    #paradigmHelpBtn3 {
      background: linear-gradient(160deg, #b3a3e0, #8068c0);
    }

    #paradigmBtn {
      display: none;
    }

    /* ── Paradigm navigation ── */
    .paradigm-nav-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 6px;
    }

    .paradigm-nav-btn {
      background: none;
      color: #8068c0;
      border: none;
      font-size: 1.4em;
      line-height: 1;
      text-align: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: opacity 0.15s;
      padding: 4px 8px;
    }

    .paradigm-nav-btn:hover {
      opacity: 0.6;
    }

    .paradigm-nav-center {
      flex: 1;
      min-width: 0;
    }

    .paradigm-counter {
      font-size: 0.65em;
      opacity: 0.6;
      display: inline-block;
      margin-left: 8px;
      vertical-align: middle;
    }

    #paradigmTitle {
      font-family: 'SBL Hebrew', serif;
      font-size: 2em;
      direction: rtl;
      display: block;
      text-align: center;
    }

    #paradigmSubtitle {
      font-size: 1.1em;
      font-weight: 600;
      display: block;
      margin-top: 0;
    }

    /* ── Bouton Lecture ── */

    body.dark-mode #lectureBtn {
      opacity: 0.88;
    }

    /* ── Continuité de lecture (retour utilisatrice du 2026-08-03) ── */
    body.dark-mode #versesReturnPill,
    body.dark-mode #resumeLectureBtn {
      opacity: 0.88;
    }

    /* #TOC:css-verse-search — Zone « livre / chapitre / verset » en tête de la
       section « Lectures et textes bibliques » (page Ressources, 2026-08-05).
       Même height + box-sizing sur le <select> et les <input type=number> :
       l'UA stylesheet leur donne sinon des hauteurs différentes. */
    .verse-search-box {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      margin: 0 auto 14px;
      padding: 8px;
      box-sizing: border-box;
      background: rgba(122, 174, 221, 0.08);
      border: 1px solid rgba(122, 174, 221, 0.35);
      border-radius: 12px;
    }

    /* Les 4 contrôles partagent box-sizing + margin:0 : sans ce dernier, la
       marge par défaut (variable selon navigateur) sur <select>/<button>
       décale leurs bords haut/bas malgré une hauteur explicite. Le bouton
       flèche est volontairement plus bas que les 3 autres (38px) — centré
       verticalement par align-items:center sur .verse-search-box, donc
       marge haute = marge basse au lieu de border à border. */
    .verse-search-select,
    .verse-search-input,
    .verse-search-go-btn {
      box-sizing: border-box;
      margin: 0;
    }

    .verse-search-select,
    .verse-search-input {
      height: 38px;
      min-width: 0;
      border-radius: 10px;
      border: 1px solid #ccc;
      font-size: 0.9em;
    }

    .verse-search-select {
      flex: 2 1 128px;
      padding: 0 8px;
    }

    .verse-search-input {
      flex: 1 1 62px;
      padding: 0 8px;
    }

    #verseSearchChapter {
      flex-basis: 78px;
    }

    .verse-search-go-btn {
      flex: 0 0 auto;
      height: 28px;
      width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      border-radius: 9px;
      cursor: pointer;
      color: white;
      background: linear-gradient(160deg, #aaabe3, #7975c1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    body.dark-mode .verse-search-go-btn {
      opacity: 0.88;
    }

    /* ── Grille et cartes pour la section Outils (Visibles uniquement sur l'onglet Ressources) ── */
    #outilsView:not(.outils-view-active) .outils-section-title,
    #outilsView:not(.outils-view-active) .outils-grid,
    #outilsView[style*="display: none"] .outils-section-title,
    #outilsView[style*="display: none"] .outils-grid,
    body:not(.outils-active) #outilsView:not(.outils-view-active) .outils-section-title {
      display: none !important;
    }

    .outils-section-title {
      font-size: 0.85em;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-strong);
      margin: 6px 0 4px 2px;
      padding-top: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .outils-section-title:first-of-type {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    body.dark-mode .outils-section-title {
      color: var(--color-strong);
    }

    .outils-grid > div {
      width: 100%;
      box-sizing: border-box;
    }

    .outils-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 3px;
    }

    .outils-card-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid rgba(226, 232, 240, 0.9);
      background: #ffffff;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
      color: #1e293b;
      text-align: left;
      cursor: pointer;
      position: relative;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    body.dark-mode .outils-card-btn {
      background: #1e293b;
      border-color: #334155;
      color: #f1f5f9;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .outils-card-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(37, 99, 235, 0.15), 0 2px 6px rgba(0, 0, 0, 0.06);
      border-color: #3b82f6;
    }

    body.dark-mode .outils-card-btn:hover {
      border-color: #60a5fa;
      background: #273549;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 12px rgba(59, 130, 246, 0.2);
    }

    .outils-card-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: rgba(37, 99, 235, 0.08);
      color: #2563eb;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    body.dark-mode .outils-card-icon {
      background: rgba(96, 165, 250, 0.18);
      color: #93c5fd;
    }

    .outils-card-content {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }

    .outils-card-title {
      font-size: 0.9em;
      font-weight: 600;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .outils-card-subtitle {
      font-size: 0.75em;
      color: #64748b;
      margin-top: 2px;
      line-height: 1.2;
    }

    body.dark-mode .outils-card-subtitle {
      color: #94a3b8;
    }

    /* ── Modale Lecture par niveau ── */
    .verses-modal-inner {
      width: 95%;
      max-width: 600px;
      max-height: 90vh;
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
      position: relative;
      display: flex;
      flex-direction: column;
    }

    body.dark-mode .verses-modal-inner {
      background: #1e293b;
      color: #e2e8f0;
    }

    .verses-modal-header {
      padding: 16px 16px 12px;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    body.dark-mode .verses-modal-header {
      border-bottom-color: #334155;
    }

    /* #TOC:css-verses-header-collapse — Entête rétractable au défilement du
       texte (#TOC:js-verses-header-collapse). Seuls le sous-titre et
       l'interrupteur « Code couleur » s'effacent ; Retour, titre, ◀ ▶ et la
       croix de fermeture restent visibles en toute circonstance. */
    #versesModal .verses-modal-header {
      transition: padding 0.15s ease;
    }

    #versesModal #versesModalTitle {
      transition: font-size 0.15s ease;
    }

    #versesModal #versesModalSubtitle,
    #versesModal #versesColorCodeSwitchWrap {
      max-height: 40px;
      opacity: 1;
      overflow: hidden;
      transition: max-height 0.15s ease, opacity 0.12s ease, margin-top 0.15s ease;
    }

    /* Le sélecteur de mode + l'interrupteur (avec son étiquette et le bouton
       ⓘ) tiennent sur DEUX lignes depuis le 2026-08-03 (repéré : la seconde
       ligne était rognée par le max-height:40px ci-dessus, prévu pour une
       ligne unique — l'ancien interrupteur seul). Règle dédiée, plus généreuse,
       après la règle partagée pour la primer en cascade. */
    #versesModal #versesColorCodeSwitchWrap {
      max-height: 80px;
    }

    #versesModal.verses-header-collapsed .verses-modal-header {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    /* !important nécessaire : #versesModalTitle porte font-size:1.05em en
       style inline (HTML), qui l'emporterait sinon sur cette règle. */
    #versesModal.verses-header-collapsed #versesModalTitle {
      font-size: 0.92em !important;
    }

    #versesModal.verses-header-collapsed #versesModalSubtitle,
    #versesModal.verses-header-collapsed #versesColorCodeSwitchWrap {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      pointer-events: none;
    }

    /* .verses-titre-desc (ex. « Le jardin d'Éden ») fait partie du HTML du
       titre (_versesRenderText) mais n'est pas le "titre (livre + chapitre)"
       que la consigne demande de garder : sur écran court, avec la feuille
       d'analyse ouverte, c'était la ligne de trop pour tenir 4–5 lignes
       d'hébreu (retour utilisatrice du 2026-08-03). */
    #versesModal.verses-header-collapsed .verses-titre-desc {
      display: none;
    }

    /* La colonne titre/sous-titre/interrupteur (style inline, sans classe)
       garde son gap:8px même quand ses deux derniers enfants sont réduits à
       zéro : sans cette correction, 8px restaient perdus au repliement.
       !important nécessaire face au gap inline. */
    #versesModal.verses-header-collapsed .verses-modal-header > div:nth-child(2) {
      gap: 0 !important;
    }

    body.dark-mode #propresModalBody [style*="border-bottom"],
    body.dark-mode #nombresModalBody [style*="border-bottom"],
    body.dark-mode #raresModalBody [style*="border-bottom"],
    body.dark-mode #historyModalBody [style*="border-bottom"] {
      border-bottom-color: #334155 !important;
    }

    body.dark-mode #nombresModalBody thead tr {
      background: #1e3a5f !important;
      color: #94a3b8 !important;
    }

    .verses-modal-body {
      overflow-y: auto;
      flex: 1;
      padding: 16px;
    }

    /* Sur smartphone, les modales ouvertes depuis Outils utilisent tout l'écran. */
    @media (max-width: 420px) {

      #versesModal,
      #historyModal,
      #propresModal,
      #nombresModal,
      #raresModal,
      #paradigmsListModal,
      #affixTablesModal {
        padding: 0 !important;
      }

      #versesModal>.verses-modal-inner,
      #historyModal>.verses-modal-inner,
      #propresModal>.verses-modal-inner,
      #nombresModal>.verses-modal-inner,
      #raresModal>.verses-modal-inner,
      #paradigmsListModal>.verses-modal-inner,
      #affixTablesModal>.verses-modal-inner {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
      }

      /* #occurrencesModal (« Autres versets » / « Dans les Psaumes ») garde la
         règle de base .verses-modal-inner (marge horizontale via width:95%)
         plutôt que le plein écran ci-dessus, pour rester perçue comme une
         surcouche par-dessus l'appli. Sans cette ligne, max-height:90vh donne
         une marge verticale (5vh de chaque côté) bien plus grande que la
         marge horizontale (2,5% de la largeur) sur un écran haut et étroit.
         5vw pour la hauteur au lieu de 90vh aligne les deux marges en pixels,
         puisque width:95% donne déjà une marge horizontale totale de 5vw. */
      #occurrencesModal>.verses-modal-inner {
        max-height: calc(100% - 5vw);
      }

      /* versesWordModal est exclu de la règle plein écran ci-dessus : c'est une
         feuille basse, et l'occuper en entier masquerait le verset qu'elle sert
         justement à expliquer. Elle prend seulement toute la largeur. */
      #versesWordModal {
        padding: 0 !important;
      }

      /* 50vh laissait à peine une ligne d'hébreu visible sur écran court
         (retour utilisatrice du 2026-08-03) : plafonnée et réduite à 40vh,
         comme la règle de base ci-dessous (~ligne 2433), pour qu'un écran
         haut n'agrandisse plus la feuille au-delà du nécessaire et qu'un
         écran court garde 4–5 lignes d'hébreu lisibles une fois l'entête
         replié (#TOC:js-verses-header-collapse). */
      #versesWordModal>.verses-word-modal-inner {
        max-width: none;
        max-height: min(40vh, 340px);
      }

      #versesModal.word-sheet-open .verses-modal-body {
        padding-bottom: calc(min(40vh, 340px) + 16px);
      }
    }

    .paradigms-list-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 4px;
      border-bottom: 1px solid #e5e7eb;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.13s;
    }

    .paradigms-list-item:hover {
      background: #f0f4f8;
    }

    body.dark-mode .paradigms-list-item {
      border-bottom-color: #334155;
    }

    body.dark-mode .paradigms-list-item:hover {
      background: #2d3f55;
    }

    #paradigmsListSubtitle {
      font-size: 0.8em;
      color: #6b7280;
      margin-top: 2px;
    }

    body.dark-mode #paradigmsListSubtitle {
      color: #94a3b8;
    }

    .verses-level-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid #3b82f6;
      background: #eff6ff;
      color: #1d4ed8;
      font-weight: 700;
      font-size: 1.1em;
      cursor: pointer;
      transition: background 0.15s, transform 0.1s;
    }

    .verses-level-chip:hover {
      background: #dbeafe;
      transform: scale(1.08);
    }

    body.dark-mode .verses-level-chip {
      background: #1e3a5f;
      border-color: #60a5fa;
      color: #93c5fd;
    }

    body.dark-mode .verses-level-chip:hover {
      background: #1e4080;
    }

    .verses-entry-card {
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid #e5e7eb;
      background: #fafafa;
      cursor: pointer;
      margin-bottom: 8px;
      transition: background 0.15s;
    }

    .verses-entry-card:hover {
      background: #f0f4ff;
    }

    body.dark-mode .verses-entry-card {
      background: #243046;
      border-color: #334155;
      color: #e2e8f0;
    }

    body.dark-mode .verses-entry-card:hover {
      background: #2d3f60;
    }

    .verses-badge {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 999px;
      font-size: 0.72em;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      vertical-align: middle;
      margin-right: 6px;
    }

    .verses-badge-verset {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .verses-badge-passage {
      background: #fef3c7;
      color: #92400e;
    }

    body.dark-mode .verses-badge-verset {
      background: #1e3a5f;
      color: #93c5fd;
    }

    body.dark-mode .verses-badge-passage {
      background: #451a03;
      color: #fcd34d;
    }

    .verses-text-area {
      font-family: 'SBL Hebrew', serif;
      font-size: 1.6em;
      line-height: 1.9;
      direction: rtl;
      text-align: right;
    }

    .verses-token {
      cursor: pointer;
      border-radius: 4px;
      padding: 1px 2px;
      transition: background 0.12s;
      display: inline;
    }

    .verses-token:hover,
    .verses-token:focus {
      background: #bfdbfe;
      outline: none;
    }

    body.dark-mode .verses-token:hover,
    body.dark-mode .verses-token:focus {
      background: #1e3a5f;
    }

    /* #TOC:css-grands-textes — bouton d'accès et intertitres de groupe */
    .verses-grands-btn {
      font-family: 'Inter', sans-serif;
      font-size: 0.86em;
      padding: 7px 18px;
      border: none;
      border-radius: 14px;
      color: #fff;
      cursor: pointer;
      background: linear-gradient(160deg, #aaabe3, #7975c1);
      transition: filter 0.15s;
    }

    .verses-grands-btn:hover {
      filter: brightness(1.07);
    }

    body.dark-mode .verses-grands-btn {
      opacity: 0.88;
    }

    /* Rangée qui se replie naturellement à la ligne (repéré le 2026-08-03,
       deux fois : une pastille ⓘ tronquée, puis une étiquette manquante qui
       laissait croire que la liste déroulante ne servait à rien). Ordre
       voulu, qui se lit comme une phrase : « Couleur des mots » + liste
       (« par niveau » / « par connaissance ») + ⓘ + interrupteur. Tient sur
       une seule ligne à partir d'un entête un peu plus large ; se replie sur
       deux dans l'entête étroit (~223px à 375px de large, §29.9) sans jamais
       perdre l'étiquette ni écraser la pastille ⓘ (flex-wrap, pas un
       max-height calé sur un nombre de lignes fixe). */
    .verses-color-code-switch-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 12px 0 8px;
    }

    /* #TOC:css-verses-color-code-switch — Interrupteur d'affichage/masquage
       du code couleur (restauré le 2026-08-03 : un <select> à 3 positions
       avait pris sa place, et la bascule ON/OFF — bien identifiable avant en
       interrupteur à glissière — « avait disparu » aux yeux de l'utilisatrice
       derrière un simple choix de menu). L'étiquette « Couleur des mots »
       précède maintenant la liste déroulante plutôt que d'accompagner
       l'interrupteur : elle nomme tout le contrôle, pas seulement la bascule. */
    .verses-color-code-switch-text {
      font-family: 'Inter', sans-serif;
      font-size: 0.86em;
      color: rgba(55, 65, 81, 0.76);
    }

    body.dark-mode .verses-color-code-switch-text {
      color: rgba(203, 213, 225, 0.92);
    }

    .verses-color-code-switch {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
    }

    .verses-color-code-switch input {
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      margin: 0;
      cursor: pointer;
    }

    .verses-color-code-switch .switch-slider {
      width: 34px;
      height: 18px;
      border-radius: 999px;
      background: #d1d5db;
      position: relative;
      transition: background 0.15s;
    }

    .verses-color-code-switch .switch-slider::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
      transition: transform 0.15s;
    }

    .verses-color-code-switch.active .switch-slider {
      background: #1e40af;
    }

    .verses-color-code-switch.active .switch-slider::after {
      transform: translateX(16px);
    }

    body.dark-mode .verses-color-code-switch .switch-slider {
      background: #4b5563;
    }

    body.dark-mode .verses-color-code-switch.active .switch-slider {
      background: #60a5fa;
    }

    /* #TOC:css-verses-color-mode-select — Sélecteur SECONDAIRE niveau/
       connaissance (S7, retour utilisatrice du 2026-08-03), à côté de
       l'interrupteur ON/OFF ci-dessus. `<select>` natif : compact et
       accessible (clavier, lecteur d'écran) sans budget de largeur dédié.
       Grisé (voir :disabled) quand l'interrupteur est sur OFF, sans disparaître
       — l'utilisatrice retrouve son dernier choix en rallumant. */
    .verses-color-mode-select {
      font-family: 'Inter', sans-serif;
      font-size: 0.86em;
      color: rgba(55, 65, 81, 0.76);
      background: transparent;
      border: 1px solid rgba(55, 65, 81, 0.25);
      border-radius: 999px;
      padding: 6px 10px;
      cursor: pointer;
      max-width: 130px;
    }

    body.dark-mode .verses-color-mode-select {
      color: rgba(203, 213, 225, 0.92);
      border-color: rgba(203, 213, 225, 0.3);
    }

    .verses-color-mode-select:disabled {
      opacity: 0.4;
      cursor: default;
    }

    .verses-color-mode-select option {
      color: #111827;
      background: white;
    }

    /* #TOC:css-verses-color-legend — Bouton ⓘ et légende du code couleur
       (retour utilisatrice du 2026-08-03). Le bouton est un sibling du
       switch, dans le même wrap flex ; la légende est un panneau séparé,
       repliée par défaut, forcée masquée quand l'entête se rétracte au
       défilement (#TOC:css-verses-header-collapse) même si elle était ouverte. */
    /* La règle générale `button { min-width:40px; min-height:40px; margin:5px }`
       (cible tactile) écrase width/height si on ne l'annule pas explicitement :
       c'est ce qui faisait déborder la pastille hors de l'entête (repérage du
       2026-08-03) — min-width/min-height l'emportent toujours sur width/height.
       Pastille agrandie le même jour (i, cercle et fond gris jugés trop
       petits) : 20px → 26px, 0.78em → 1em. Puis, le 2026-08-05, fond gris
       supprimé et icône encore agrandie : le bouton n'est plus qu'un trait,
       c'est donc la COULEUR qui doit porter la lisibilité et l'état ouvert,
       là où le fond plein s'en chargeait. La cible tactile, elle, reste à
       30px — invisible mais toujours confortable au doigt. */
    .verses-color-legend-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      min-width: 0;
      min-height: 0;
      flex-shrink: 0;
      margin: 0;
      border: none;
      border-radius: 50%;
      background: none;
      color: #374151;
      font-size: 1em;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      box-shadow: none;
      transition: color 0.15s, opacity 0.15s;
    }

    /* Le symbole #iconeInfo code son trait en dur (stroke="#777") : sans cette
       règle, l'icône resterait grise quel que soit l'état et quel que soit le
       thème. Une déclaration CSS l'emporte sur l'attribut de présentation du
       symbole, donc le trait suit la couleur du bouton. Le trait est légèrement
       épaissi : sans fond derrière elle, une icône filaire de 22px paraît pâle. */
    .verses-color-legend-btn svg {
      stroke: currentColor;
      stroke-width: 2.2;
      display: block;
    }

    body.dark-mode .verses-color-legend-btn {
      background: none;
      color: #dbe4f0;
    }

    /* Légende ouverte : la couleur d'accent remplace le fond plein d'autrefois. */
    .verses-color-legend-btn[aria-expanded="true"] {
      background: none;
      color: #1e40af;
    }

    body.dark-mode .verses-color-legend-btn[aria-expanded="true"] {
      color: #93b4f5;
    }

    /* Mode "aucun" (S7) : rien à expliquer, le bouton se désactive plutôt que
       d'ouvrir une légende vide. */
    .verses-color-legend-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }

    #versesModal.verses-header-collapsed #versesColorLegend {
      display: none !important;
    }

    .verses-color-legend {
      font-family: 'Inter', sans-serif;
      font-size: 0.76em;
      line-height: 1.4;
      color: var(--color-text, #374151);
      background: rgba(55, 65, 81, 0.05);
      border-radius: 10px;
      padding: 10px 38px 10px 12px;
      margin: 0 0 4px;
      text-align: left;
      position: relative;
    }

    body.dark-mode .verses-color-legend {
      background: rgba(203, 213, 225, 0.08);
    }

    /* Bouton × discret pour fermer la légende sans recliquer sur ⓘ (retour
       utilisateur du 2026-08-06). Rendu par _versesRenderColorLegend() dans les
       deux modes (par niveau / par catégorie) — un seul style pour les deux. */
    /* Agrandi et recoloré le 2026-08-06 (retour utilisateur : trop discret pour
       être repéré comme un bouton). Même couleur que le × principal de la modale
       (#e11d48) — langage visuel déjà établi dans l'app pour « fermer ». */
    .verses-color-legend-close {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 26px;
      height: 26px;
      min-width: 0;
      min-height: 0;
      padding: 0;
      margin: 0;
      border: none;
      border-radius: 50%;
      background: #e11d48;
      color: white;
      opacity: 0.85;
      font-size: 1.15em;
      font-weight: bold;
      line-height: 26px;
      text-align: center;
      cursor: pointer;
    }

    .verses-color-legend-close:hover,
    .verses-color-legend-close:focus-visible {
      opacity: 1;
    }

    .verses-color-legend-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 3px 0;
    }

    .verses-color-legend-swatch {
      display: inline-block;
      width: 13px;
      height: 13px;
      border-radius: 4px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .legend-swatch-proper { background: #8f7020; }
    body.dark-mode .legend-swatch-proper { background: #60a5fa; }
    .legend-swatch-plain { background: var(--color-text, #374151); }
    .legend-swatch-hard { background: #537498; }
    body.dark-mode .legend-swatch-hard { background: #fdf2be; }
    .legend-swatch-oov {
      background: #a1445f;
      border-bottom: 2px dotted #a1445f;
    }
    body.dark-mode .legend-swatch-oov {
      background: #f3a8c6;
      border-bottom-color: #f3a8c6;
    }
    /* Mode "connaissance" (S7) : mêmes couleurs que le statut Oui/Peu/Non des
       « Mots rares » (_raresWordListHtml, STATUS_COLORS) — cohérence avec le
       reste de l'app, et distinctes de celles du mode "niveau" ci-dessus
       (consigne : ne pas réutiliser les mêmes couleurs entre les deux modes). */
    .legend-swatch-known { background: #16a34a; }
    .legend-swatch-little { background: #ca8a04; }
    .legend-swatch-unknown { background: #dc2626; }

    .verses-color-legend-note {
      margin: 6px 0 0;
      padding-top: 6px;
      border-top: 1px solid rgba(55, 65, 81, 0.12);
      font-style: italic;
      opacity: 0.85;
    }

    body.dark-mode .verses-color-legend-note {
      border-top-color: rgba(203, 213, 225, 0.18);
    }

    /* ===== TOGGLE SWITCH UNIVERSEL (Options & Filtrage) ===== */
    .toggle-switch {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      user-select: none;
      vertical-align: middle;
    }

    .toggle-switch input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      margin: 0;
      pointer-events: none;
    }

    .toggle-switch .toggle-slider {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 22px;
      background-color: #cbd5e1;
      border-radius: 999px;
      flex-shrink: 0;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
    }

    .toggle-switch .toggle-slider::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      background-color: #ffffff;
      border-radius: 50%;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    }

    .toggle-switch input[type="checkbox"]:checked+.toggle-slider {
      background-color: #3b82f6;
    }

    .toggle-switch input[type="checkbox"]:checked+.toggle-slider::after {
      transform: translateX(18px);
    }

    .toggle-switch input[type="checkbox"]:disabled+.toggle-slider {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Support Mode Sombre */
    body.dark-mode .toggle-switch .toggle-slider {
      background-color: #4b5563;
    }

    body.dark-mode .toggle-switch input[type="checkbox"]:checked+.toggle-slider {
      background-color: #60a5fa;
    }

    #versesModal.no-color-code .verses-token-hard,
    #versesModal.no-color-code .verses-token-proper,
    #versesModal.no-color-code .verses-token-oov,
    #versesModal.no-color-code .verses-token-known,
    #versesModal.no-color-code .verses-token-little,
    #versesModal.no-color-code .verses-token-unknown {
      color: inherit !important;
      text-decoration: none !important;
    }

    /* Traduction d'un verset, révélée par « Vérifier ma traduction ».
       Teinte #374151 : déjà couverte par la règle mode sombre de
       body.dark-mode #versesModalBody [style*="color:#374151"]. */
    /* Étiquette de niveau à fond partiel : la partie colorée occupe « couv » %
       de la largeur, le reste est transparent (fond de la carte). */
    .verses-badge-niveau {
      display: inline-block;
      padding: 2px 11px;
      border-radius: 999px;
      font-size: 0.8em;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      vertical-align: middle;
      margin-right: 6px;
      color: #1e40af;
      border: 1.5px solid #93b4d8;
      background: linear-gradient(90deg, #cfe0f3 var(--couv), transparent var(--couv));
    }

    body.dark-mode .verses-badge-niveau {
      color: #cbd5e1;
      border-color: #3a5a80;
      background: linear-gradient(90deg, #29405f var(--couv), transparent var(--couv));
    }

    /* Mot du corpus des 800 mais d'un niveau supérieur à la page affichée. */
    .verses-token-hard {
      color: #537498;
    }

    body.dark-mode .verses-token-hard {
      color: #fdf2be;
    }

    /* #TOC:css-verses-token-oov — Mot HORS des 800 mots (retour utilisatrice
       du 2026-08-03) : 4e catégorie du code couleur, distincte du « hors
       niveau » ci-dessus. Cette catégorie n'a pas de fiche ("Voir ce mot"
       indisponible) : le soulignement pointillé porte cette information sans
       dépendre de la seule teinte (daltonisme). */
    .verses-token-oov {
      color: #a1445f;
      text-decoration: underline dotted;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 3px;
    }

    body.dark-mode .verses-token-oov {
      color: #f3a8c6;
    }

    /* #TOC:css-verses-token-connaissance — Mode "connaissance" (S7, retour
       utilisatrice du 2026-08-03) : couleur selon wordState (connu / peu
       connu / inconnu). Mêmes teintes que le statut Oui/Peu/Non des « Mots
       rares » (cohérence de l'app), volontairement DIFFÉRENTES de celles du
       mode "niveau" ci-dessus (bleu/gris-bleu/rose) pour ne pas confondre les
       deux modes. Variantes sombres éclaircies pour la lisibilité (les teintes
       de base sont calibrées pour un fond clair). */
    .verses-token-known { color: #16a34a; }
    body.dark-mode .verses-token-known { color: #4ade80; }
    .verses-token-little { color: #ca8a04; }
    body.dark-mode .verses-token-little { color: #fbbf24; }
    .verses-token-unknown { color: #dc2626; }
    body.dark-mode .verses-token-unknown { color: #f87171; }

    /* #TOC:css-occurrences — modale « Autres versets » (occurrences/<rang>.json).
       Réutilise .verses-modal-*, .verses-badge-niveau, .verses-token et
       .verses-token-hard : seules les règles propres aux cartes sont ici. */
    /* Couleur en classe et non en inline : .verses-modal-inner passe à un fond
       ardoise en mode sombre, où le bleu nuit des autres en-têtes disparaîtrait. */
    .occ-title {
      font-weight: 600;
      color: #0d2465;
      overflow-wrap: anywhere;
    }

    body.dark-mode .occ-title {
      color: #cbd5e1;
    }

    .occ-title-mode {
      font-weight: 400;
      font-size: 0.86em;
      color: #6b7280;
    }

    body.dark-mode .occ-title-mode {
      color: #94a3b8;
    }

    .occ-meta {
      font-family: 'Inter', sans-serif;
      font-size: 0.78em;
      color: #6b7280;
      margin: 0 0 12px;
      line-height: 1.45;
    }

    body.dark-mode .occ-meta {
      color: #94a3b8;
    }

    .occ-card {
      padding: 12px 0 14px;
      border-bottom: 1px solid rgba(128, 128, 128, 0.18);
    }

    .occ-card:last-child {
      border-bottom: none;
    }

    .occ-ref {
      font-family: 'Inter', sans-serif;
      font-size: 0.82em;
      color: #6b7280;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
    }

    body.dark-mode .occ-ref {
      color: #94a3b8;
    }

    /* Signet : dimensions en PIXELS et non en em. Le tracé fait 0.67em dans un
       .verses-passage-check à 0.8em, lui-même dans un .occ-ref à 0.82em — les
       facteurs se multiplient et l'icône tombait à ~7 px. La boîte de 30 px
       donne en prime une cible tactile correcte, et margin-right:0 annule la
       marge que le signet porte pour la Lecture (le flex a déjà son gap). */
    .occ-ref .verses-passage-check {
      margin-right: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      flex-shrink: 0;
    }

    /* width/height sont des attributs de présentation SVG : une règle CSS les
       emporte, contrairement au style inline vertical-align du tracé — sans
       objet ici, le parent étant un flex. */
    .occ-ref .verses-passage-check svg {
      width: 20px;
      height: 20px;
    }

    .occ-text {
      font-family: 'SBL Hebrew', serif;
      font-size: 1.45em;
      line-height: 2;
      direction: rtl;
      text-align: right;
      margin-bottom: 8px;
    }

    /* Même ambre que #exampleHebrew mark : le mot cherché se repère
       identiquement dans la carte du mot et dans la liste des occurrences. */
    .occ-hit {
      background-color: #ffc51688;
      color: #2a2a2a;
      border-radius: 6px;
      padding: 0 5px;
    }

    body.dark-mode .occ-hit {
      background-color: #8a7a00a2;
      color: #ffffff;
    }

    .occ-trans {
      font-family: 'Inter', sans-serif;
      font-size: 0.86em;
      line-height: 1.5;
      color: #374151;
      text-align: left;
    }

    body.dark-mode .occ-trans {
      color: #cbd5e1;
    }

    .occ-pied {
      text-align: center;
      padding: 18px 0 4px;
      margin-top: 6px;
      border-top: 1px solid rgba(128, 128, 128, 0.18);
    }

    /* Violet du bouton « Autres versets » qui ouvre la modale : le lien vers
       STEP Bible garde la couleur de l'action dont il est le prolongement. */
    .occ-stepbible-btn {
      font-family: 'Inter', sans-serif;
      font-size: 0.82em;
      padding: 7px 16px !important;
      background: white;
      color: #5b21b6;
      border: 1px solid #c4b5fd;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(139, 92, 246, 0.2);
    }

    body.dark-mode .occ-stepbible-btn {
      background: #2a2140;
      color: #d6c7ff;
      border-color: #5b4a8a;
    }

    .occ-state {
      font-family: 'Inter', sans-serif;
      font-size: 0.88em;
      color: #6b7280;
      text-align: center;
      padding: 28px 12px;
      line-height: 1.5;
    }

    body.dark-mode .occ-state {
      color: #94a3b8;
    }

    .occ-fallback-link {
      display: inline-block;
      margin-top: 10px;
      font-size: 0.92em;
      color: #1e40af;
      text-decoration: underline;
      cursor: pointer;
      background: none;
      border: none;
      font-family: inherit;
    }

    body.dark-mode .occ-fallback-link {
      color: #93c5fd;
    }

    /* Détail de difficulté, en tête de chaque page célèbre. */
    .verses-diff-detail {
      font-family: 'Inter', sans-serif;
      font-size: 0.76em;
      color: #9ca3af;
      text-align: center;
      margin: 0 0 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(128, 128, 128, 0.18);
    }

    body.dark-mode .verses-diff-detail {
      color: #94a3b8;
    }

    /* Légende du badge de difficulté, discrète, sous les filtres. */
    .verses-legende {
      font-family: 'Inter', sans-serif;
      font-size: 0.72em;
      font-style: italic;
      color: #9ca3af;
      text-align: center;
      line-height: 1.45;
      margin: 0 4px 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    }

    body.dark-mode .verses-legende {
      color: #94a3b8;
    }

    .verses-filtres {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      padding: 2px 0 10px;
      margin-bottom: 8px;
    }

    /* Trois familles de filtres, distinguées par la couleur : neutre pour
       « Toutes », bleu-vert pour les fêtes juives, violet pour les fêtes
       chrétiennes (teinte déjà utilisée par le bouton Pages célèbres). */
    .verses-filtre-niveau {
      text-align: center;
      margin: -4px 0 10px;
    }

    .verses-filtre-niveau select {
      font-family: 'Inter', sans-serif;
      font-size: 0.76em;
      padding: 3px 8px;
      border-radius: 10px;
      border: 1.5px solid #9ca3af;
      background: transparent;
      color: #6b7280;
      cursor: pointer;
    }

    body.dark-mode .verses-filtre-niveau select {
      border-color: #64748b;
      color: #cbd5e1;
      background: #1e293b;
    }

    .verses-filtre-btn {
      font-family: 'Inter', sans-serif;
      font-size: 0.76em;
      padding: 4px 11px;
      border-radius: 12px;
      border: 1.5px solid currentColor;
      background: transparent;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .verses-filtre-btn.f-toutes {
      color: #64748b;
    }

    .verses-filtre-btn.f-juif {
      color: #1d7a8c;
    }

    .verses-filtre-btn.f-chretien {
      color: #7975c1;
    }

    .verses-filtre-btn.actif {
      color: #fff;
    }

    .verses-filtre-btn.f-toutes.actif {
      background: linear-gradient(160deg, #94a3b8, #64748b);
      border-color: #64748b;
    }

    .verses-filtre-btn.f-juif.actif {
      background: linear-gradient(160deg, #4fa8b8, #1d7a8c);
      border-color: #1d7a8c;
    }

    .verses-filtre-btn.f-chretien.actif {
      background: linear-gradient(160deg, #aaabe3, #7975c1);
      border-color: #7975c1;
    }

    body.dark-mode .verses-filtre-btn.f-toutes {
      color: #a3b1c2;
    }

    body.dark-mode .verses-filtre-btn.f-juif {
      color: #6fc3d2;
    }

    body.dark-mode .verses-filtre-btn.f-chretien {
      color: #b8b5e8;
    }

    body.dark-mode .verses-filtre-btn.actif {
      color: #fff;
      opacity: 0.9;
    }

    /* Pages célèbres : texte hébreu plus grand que dans Lecture par niveau. */
    .verses-text-area.verses-text-grands {
      font-size: 2em;
      line-height: 2;
    }

    /* « Voir ce mot » : même gabarit que le bouton de la modale d’analyse. */
    .verses-goto-btn {
      font-family: 'Inter', sans-serif;
      display: inline-block;
      margin: 8px 0 0;
      padding: 6px 14px;
      border-radius: 8px;
      border: none;
      background: linear-gradient(160deg, #a3b8e6, #6d83c4);
      color: #fff;
      font-size: 0.85em;
      cursor: pointer;
      box-shadow: none;
      transition: filter 0.15s;
    }

    .verses-goto-btn:hover {
      filter: brightness(1.07);
    }

    body.dark-mode .verses-goto-btn {
      opacity: 0.9;
    }

    /* Pastille « compris » d’un verset, à gauche du lien « Traduction ».
       Son rôle est expliqué en tête de page (.verses-astuce) : seule, une
       pastille sans texte resterait énigmatique. */
    .verses-verse-check {
      font-family: 'Inter', sans-serif;
      font-size: 0.8em;
      /* doublé : 0,8 × 2 em = 1,6 em effectif */
      color: #9ca3af;
      cursor: pointer;
      margin-right: 8px;
      user-select: none;
      transition: color 0.15s;
    }

    .verses-verse-check:hover {
      color: #16a34a;
    }

    .verses-verse-check.coche {
      color: #16a34a;
      font-weight: 700;
    }

    body.dark-mode .verses-verse-check {
      color: #64748b;
    }

    body.dark-mode .verses-verse-check:hover,
    body.dark-mode .verses-verse-check.coche {
      color: #4ade80;
    }

    /* Cette ligne est une LÉGENDE, pas une note de bas de page : elle cumulait
       gris pâle + opacité 0,85 + italique, ce qui la rendait illisible. Les deux
       icônes y portent les couleurs qu'elles prendront une fois le verset marqué,
       de sorte que l'astuce montre l'état à obtenir. Portée limitée à
       .verses-astuce : la ligne de niveau qui la précède reste en retrait. */
    .verses-astuce {
      color: #6b7280;
      /* La ligne de niveau et l'astuce partagent le même conteneur, séparées
         par un simple <br>. inline-block rend la marge applicable : elle aère
         les deux lignes sans introduire de bloc supplémentaire. */
      display: inline-block;
      margin-top: 5px;
    }

    body.dark-mode .verses-astuce {
      color: #cbd5e1;
    }

    /* Le signet de l'astuce, accordé au cercle voisin : _SIGNET_VIDE mesure
       0,67 em, donc 1,6 em de contexte lui donnent la même taille apparente
       qu'en regard d'un verset. */
    .verses-astuce-signet {
      color: #dd9933;
      font-size: 1.6em;
      line-height: 0;
      vertical-align: -0.1em;
      font-style: normal;
    }

    /* Même diamètre que la pastille des versets. */
    .verses-astuce-puce {
      color: #16a34a;
      font-size: 2em;
      line-height: 0;
      vertical-align: -0.12em;
      font-style: normal;
    }

    body.dark-mode .verses-astuce-puce {
      color: #4ade80;
    }

    /* Ligne du lien « Traduction » : alignée à droite, très compacte pour ne
       pas hériter du grand interligne (line-height 2) du texte hébreu. */
    .verses-trans-line {
      text-align: right;
      direction: ltr;
      line-height: 1;
      margin: 1px 0;
    }

    /* Source de la traduction, discrète, après le texte. */
    .verses-trans-src {
      font-style: normal;
      opacity: 0.7;
    }

    /* 0,4 × 2 em = 0,8 em effectif, soit la taille du sous-titre de la modale. */
    .verses-trans-link {
      font-family: 'Inter', sans-serif;
      font-size: 0.4em;
      font-style: normal;
      color: #6b7280;
      text-decoration: underline;
      cursor: pointer;
    }

    body.dark-mode .verses-trans-link {
      color: #94a3b8;
    }

    /* La couleur est portée par la CLASSE, pas par un style inline : le JS
       bascule display, ce qui fait réécrire l'attribut style depuis le CSSOM
       et convertit color:#374151 en rgb(55, 65, 81) — le sélecteur générique
       [style*="color:#374151"] cesserait alors de matcher (même piège que
       #versesTranslationText). */
    .verses-verse-trans {
      font-family: 'Inter', sans-serif;
      font-size: 0.4em;
      /* 0,4 × 2 em = 0,8 em effectif */
      font-style: normal;
      line-height: 1.6;
      direction: ltr;
      text-align: left;
      margin-top: 1px;
      padding-left: 6px;
      color: #374151;
      border-left: 2px solid rgba(128, 128, 128, 0.25);
    }

    body.dark-mode .verses-verse-trans {
      color: #e2e8f0;
    }

    /* Incipit hébreu en tête de chaque entrée. La teinte #374151 est reprise
       telle quelle : elle est déjà couverte par la règle mode sombre
       body.dark-mode #versesModalBody [style*="color:#374151"]. */
    .verses-incipit {
      font-family: 'SBL Hebrew', serif;
      direction: rtl;
      text-align: right;
      font-size: 1.4em;
      line-height: 1.8;
      margin-top: 5px;
    }

    /* Étiquette « Araméen » : Dn 7 relève d'un autre corpus, sans niveau. */
    .verses-tag-aramaic {
      font-family: 'Inter', sans-serif;
      font-size: 0.7em;
      font-weight: 600;
      padding: 1px 7px;
      border-radius: 9px;
      color: #8a5a2b;
      background: rgba(138, 90, 43, 0.12);
    }

    body.dark-mode .verses-tag-aramaic {
      color: #d9a066;
      background: rgba(217, 160, 102, 0.16);
    }


    /* Label « NOUVEAU&nbsp;! » temporaire (voir #TOC:js-badge-nouveaute). */
    .badge-nouveaute {
      margin-top: 3px !important;
      display: inline-block;
      vertical-align: middle;
      margin-right: 6px;
      padding: 2px 7px;
      border-radius: 999px;
      background: linear-gradient(160deg, #f59e0b, #d97706);
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 0.62em;
      font-weight: 700;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    body.dark-mode .badge-nouveaute {
      opacity: 0.9;
    }

    /* Pied de page d’une page célèbre : suggestion à gauche, « Compris » à
       droite. Le <span> vide garde « Compris » aligné à droite dans Lecture
       par niveau, où le bouton de suggestion ne s’affiche pas. */
    .verses-page-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
      padding: 0 4px 4px;
    }

    /* Même gabarit que « Compris » (bordure, pilule, 0,78 em), en gris. */
    .verses-suggest-btn {
      font-family: 'Inter', sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px !important;
      min-height: 0 !important;
      min-width: 0 !important;
      border-radius: 12px;
      border: 1.5px solid #9ca3af;
      background: transparent;
      color: #6b7280;
      font-size: 0.78em;
      cursor: pointer;
      margin: 0;
      box-shadow: none;
      transition: all 0.2s;
    }

    .verses-suggest-btn:hover {
      background: rgba(107, 114, 128, 0.08);
      color: #4b5563;
    }

    body.dark-mode .verses-suggest-btn {
      border-color: #64748b;
      color: #94a3b8;
    }

    body.dark-mode .verses-suggest-btn:hover {
      background: rgba(148, 163, 184, 0.12);
      color: #cbd5e1;
    }

    /* Titre de la page (Création, Le jardin d’Éden…), après la référence.
       En bloc : il passe à la ligne au lieu de comprimer la référence. */
    .verses-titre-desc {
      display: block;
      font-weight: 400;
      font-style: italic;
      font-size: 0.86em;
      color: #6b7280;
      line-height: 1.25;
      margin-top: 1px;
    }

    body.dark-mode .verses-titre-desc {
      color: #94a3b8;
    }

    /* Numéro de verset en exposant, au début du texte (pages célèbres).
       direction:ltr + isolate : « 2,1 » reste lisible dans le flux RTL. */
    .verses-verse-num {
      font-family: 'Inter', sans-serif;
      font-size: 0.4em;
      color: #9ca3af;
      vertical-align: super;
      margin-left: 5px;
      direction: ltr;
      unicode-bidi: isolate;
    }

    body.dark-mode .verses-verse-num {
      color: #94a3b8;
    }

    .verses-verse-label {
      font-family: 'Inter', sans-serif;
      font-size: 0.72em;
      color: #6b7280;
      direction: ltr;
      text-align: left;
      margin-bottom: 4px;
    }

    /* 0,38 × 2 em = 0,76 em effectif. Scopé : Lecture par niveau garde
       sa taille, la classe étant partagée. */
    .verses-text-grands .verses-verse-label {
      font-size: 0.38em;
      margin-bottom: 2px;
    }

    body.dark-mode .verses-verse-label {
      color: #94a3b8;
    }

    /* ── Lectures du dimanche : intertitres des deux blocs ──
       Une page de dimanche enchaîne deux textes distincts (1re lecture puis
       psaume responsorial), là où tous les autres corpus n'en portent qu'un.
       Sans intertitre, le psaume passait pour la suite de la lecture. Le
       conteneur est en RTL et à 2 em : on rétablit le sens et la taille. */
    .verses-lecture-titre {
      font-family: 'Inter', sans-serif;
      font-size: 0.38em;
      font-weight: 700;
      color: var(--color-strong);
      direction: ltr;
      text-align: left;
      margin: 0 0 6px;
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(128, 128, 128, 0.18);
    }

    .verses-lecture-titre + .verses-lecture-titre,
    .verses-lecture-bloc + .verses-lecture-bloc .verses-lecture-titre {
      margin-top: 18px;
    }

    .verses-lecture-titre .verses-lecture-ref {
      font-weight: 400;
      font-style: italic;
      opacity: 0.75;
    }

    /* #TOC:css-verses-diff-bloc — Détail de difficulté PROPRE À UN BLOC
       (session A du plan niveau-multi-textes, 2026-08-12). Même famille que
       .verses-diff-detail (l. 2120), avec trois différences voulues :
       — alignée à gauche sous le titre de bloc, pas centrée comme l'en-tête de
         page, et comme .verses-lecture-titre elle rétablit direction/taille : le
         conteneur .verses-text-grands est en RTL et à 2 em ;
       — pas de bordure basse, celle du titre juste au-dessus suffit — deux
         filets à 4 px l'un de l'autre feraient une rayure ;
       — marge basse qui la rattache visuellement au texte qu'elle décrit. */
    .verses-diff-bloc {
      font-family: 'Inter', sans-serif;
      font-size: 0.36em;
      color: #9ca3af;
      direction: ltr;
      text-align: left;
      line-height: 1.5;
      margin: -2px 0 10px;
    }

    body.dark-mode .verses-diff-bloc {
      color: #94a3b8;
    }

    /* #TOC:css-verses-grec-dimanche — Évangile/épître en grec, lectures du dimanche
       (phase C1 du plan grec, 2026-08-06). Conteneur SIBLING de .verses-text-area,
       pas à l'intérieur : direction et taille de police fixées explicitement plutôt
       que supposées neutres, sur le même principe défensif que .verses-lecture-titre
       ci-dessus (le texte hébreu environnant est en RTL et à grande taille). */
    .verses-grec-section {
      direction: ltr;
      text-align: left;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid rgba(128, 128, 128, 0.18);
    }

    /* Variante injectée DANS .verses-text-area (repère #versesGrecLecture1Slot,
       2026-08-06) : cette dernière vaut font-size:1.6em, qui se serait multiplié
       avec le 1.15em de .verses-grec-texte (piège déjà rencontré ailleurs dans le
       projet avec l'imbrication d'em — voir DEVELOPER.md, pages célèbres). Remise
       à 1rem pour repartir d'une base saine avant que .verses-grec-texte réapplique
       son propre em. Pas de bordure/marge du haut : elle prend la place du message
       d'absence qu'elle remplace, pas besoin d'un second séparateur visuel. */
    .verses-grec-section-inline {
      font-size: 1rem;
      margin-top: 6px;
      padding-top: 0;
      border-top: none;
    }

    .verses-grec-titre {
      font-family: 'Inter', sans-serif;
      font-size: 0.92em;
      font-weight: 700;
      color: var(--color-strong);
      margin: 14px 0 6px;
    }

    .verses-grec-titre:first-child {
      margin-top: 0;
    }

    .verses-grec-titre .verses-grec-ref {
      font-weight: 400;
      font-style: italic;
      opacity: 0.75;
      margin-left: 6px;
    }

    .verses-grec-texte {
      /* Historique : Georgia/Times New Roman (essayé en 1er) cassait le rendu des
         voyelles à accent grave du grec polytonique ; Cambria (essayé en 2e,
         2026-08-06 matin) corrigeait mais dépendait de ce qui est installé sur le
         système de l'utilisateur. SBL Greek (fournie par l'utilisateur, 2026-08-06,
         voir @font-face plus haut) est désormais chargée par l'app elle-même, comme
         SBL Hebrew pour l'hébreu — plus de dépendance aux polices système. */
      font-family: "SBL Greek", Cambria, serif;
      /* Agrandi de 1.15em à 1.5em (retour utilisateur du 2026-08-07) : trop proche du
         texte français environnant pour du grec polytonique, dense en diacritiques. */
      font-size: 1.5em;
      line-height: 1.9;
      color: var(--color-text);
      /* Retour utilisateur du 2026-08-06 : quand ce texte est injecté dans le
         repère #versesGrecLecture1Slot (à l'intérieur du message d'absence
         .verses-lecture-absente, qui est en italique), TOUT le texte hérite de
         cette italique — pas seulement les mots réellement hors-critique. Reset
         explicite ici : seul .verses-grec-mot[data-hors-critique] doit rester en
         italique, par sa propre règle plus bas, jamais par héritage. */
      font-style: normal;
    }

    .verses-grec-verset-num {
      font-family: 'Inter', sans-serif;
      font-size: 0.6em;
      font-weight: 700;
      color: #6b7280;
      vertical-align: super;
      margin-right: 1px;
    }

    /* Traduction FR/EN des versets grecs (retour utilisateur du 2026-08-07) :
       réutilise .verses-trans-link/.verses-verse-trans/.verses-trans-src, les mêmes
       classes que côté hébreu — toggleVerseTrans() les traite ensemble (un seul
       accordéon ouvert à la fois, hébreu et grec confondus sur une même page
       d'office). Leur taille en em est calée sur le conteneur hébreu (0,4 × 2em) ;
       .verses-grec-texte n'a pas la même échelle (1,5em) — tailles réexprimées en
       rem ici, indépendantes de l'imbrication, plutôt que de recalculer l'em. */
    .verses-grec-trans-line {
      text-align: right;
      direction: ltr;
      line-height: 1;
      margin: 2px 0 4px;
    }

    .verses-grec-trans-line .verses-trans-link {
      font-size: 0.75rem;
    }

    .verses-grec-verse-trans {
      font-size: 0.85rem;
      line-height: 1.5;
      margin: 1px 0 8px;
    }

    .verses-grec-mot {
      margin-right: 2px;
    }

    /* Mot absent du texte critique moderne (NA27/28) : signalé sans être caché.
       ⚠ Depuis TC1 (2026-08-15), ces mots sont FILTRÉS au rendu — cette règle ne
       s'applique donc plus qu'aux deux plages que NA28 imprime entre doubles
       crochets, Jn 7,53–8,11 et Mc 16,9-20 (voir #TOC:js-grec-texte-critique).
       Le Comma johannique, autrefois teinté ici, n'est plus affiché du tout.
       ⚠ #6d7997 (retiré le 2026-08-06, retour utilisateur) était trop proche du
       texte normal (#1a1a1a) pour se voir comme une COULEUR — seul l'italique
       était perçu. Repris #537498, déjà éprouvé pour le même besoin côté hébreu
       (.verses-token-hard, mots hors niveau) plutôt qu'inventé une nouvelle teinte. */
    .verses-grec-mot[data-hors-critique="1"] {
      color: #537498;
      font-style: italic;
    }

    body.dark-mode .verses-grec-mot[data-hors-critique="1"] {
      color: #a9c3de;
    }

    /* Phrase du crédit qui DÉCRIT la teinte des mots conservés entre doubles
       crochets (#TOC:js-grec-texte-critique) : écrite dans cette teinte, sinon
       « le texte en bleu et italiques » nomme une couleur que la phrase elle-même
       ne montre pas. Valeurs reprises telles quelles de la règle du mot
       hors-critique ci-dessus — les deux doivent bouger ensemble. */
    .verses-grec-credit-teinte {
      color: #537498;
      font-style: italic;
    }

    body.dark-mode .verses-grec-credit-teinte {
      color: #a9c3de;
    }

    /* TC3/TC4 — jusqu'à deux lignes de statut en tête de fiche d'un mot grec
       (« Absent du texte critique moderne · leçon du Textus Receptus » ; « Le Textus
       Receptus porte ici … à la place. », #TOC:js-grec-texte-critique). EN TÊTE, entre
       le mot et sa traduction — retour utilisateur du 2026-08-15 : en pied de fiche
       (implantation initiale de TC3), le signalement passait inaperçu.
       .verses-grec-statut-groupe encadre 1 ou 2 lignes .verses-grec-statut-lecon et
       porte SEUL la bordure/le retrait qui les sépare de la traduction ci-dessous — sans
       ce conteneur, deux bordures s'empileraient si les deux faits (TC3 et TC4)
       coexistent sur un même mot. Même teinte que le mot qu'elles commentent, pour que
       la phrase et le mot teinté se répondent : troisième reprise des mêmes valeurs,
       après .verses-grec-mot[data-hors-critique] et .verses-grec-credit-teinte — les
       trois doivent bouger ensemble. */
    .verses-grec-statut-groupe {
      margin-top: 6px;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(83, 116, 152, 0.25);
    }

    body.dark-mode .verses-grec-statut-groupe {
      border-bottom-color: rgba(169, 195, 222, 0.25);
    }

    .verses-grec-statut-lecon {
      color: #537498;
      font-style: italic;
      font-size: 0.72em;
      line-height: 1.4;
    }

    .verses-grec-statut-lecon + .verses-grec-statut-lecon {
      margin-top: 3px;
    }

    body.dark-mode .verses-grec-statut-lecon {
      color: #a9c3de;
    }

    .verses-grec-credit {
      font-family: 'Inter', sans-serif;
      font-size: 0.62em;
      color: #9ca3af;
      margin-top: 10px;
      line-height: 1.5;
    }

    /* ── « Mes passages » ── */
    .passages-vide {
      font-family: 'Inter', sans-serif;
      font-size: 0.9em;
      line-height: 1.6;
      color: #6b7280;
      text-align: center;
      padding: 26px 18px;
      max-width: 420px;
      margin: 0 auto;
    }

    body.dark-mode .passages-vide {
      color: #94a3b8;
    }

    /* Croix de retrait, discrète tant qu'on ne la vise pas. */
    .passages-retirer {
      flex-shrink: 0;
      margin-left: 8px;
      padding: 2px 8px;
      border: none;
      background: none;
      color: #9ca3af;
      font-size: 1em;
      line-height: 1;
      cursor: pointer;
      border-radius: 8px;
      transition: color 0.15s, background 0.15s;
    }

    .passages-retirer:hover {
      color: #dc2626;
      background: rgba(220, 38, 38, 0.08);
    }

    /* Signet en regard d'un verset : même gabarit que la pastille « Compris ». */
    .verses-passage-check {
      font-family: 'Inter', sans-serif;
      font-size: 0.8em;
      color: #9ca3af;
      cursor: pointer;
      margin-right: 8px;
      user-select: none;
      transition: color 0.15s;
    }

    /* Or chaud : se détache du bleu des liens et du vert du « Compris »,
       et tient sur fond clair comme sur fond sombre — donc pas de variante. */
    .verses-passage-check.marque {
      color: #dd9933;
    }

    /* « Lire la suite » d'une paracha : le conteneur est en RTL et à 2 em,
       on rétablit le sens de lecture et une taille de bouton normale. */
    .paracha-suite-btn {
      font-family: 'Inter', sans-serif;
      display: block;
      direction: ltr;
      margin: 4px auto 8px;
      padding: 7px 18px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(160deg, #7aaedd, #4a7fb5);
      color: #fff;
      font-size: 0.4em;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
      transition: filter 0.15s;
    }

    .paracha-suite-btn:hover {
      filter: brightness(1.06);
    }

    .paracha-suite-btn span {
      font-weight: 400;
      opacity: 0.85;
    }

    /* Lecture indisponible en hébreu (Actes en grec, deutérocanoniques) :
       l'ancienne version ouvrait une modale vide sans rien expliquer. */
    .verses-lecture-absente {
      font-family: 'Inter', sans-serif;
      font-size: 0.38em;
      font-style: italic;
      color: #6b7280;
      direction: ltr;
      text-align: left;
      line-height: 1.5;
      margin: 0 0 18px;
    }

    body.dark-mode .verses-lecture-absente {
      color: #94a3b8;
    }

    .verses-token-proper {
      color: #8f7020;
    }

    body.dark-mode .verses-token-proper {
      color: #60a5fa;
    }

    /* ── Faux bouton Lecture par niveau (aide) ── */
    .fake-lecture-btn {
      pointer-events: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border-radius: 10px;
      border: none;
      background: linear-gradient(160deg, #aaabe3, #7975c1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
      color: white;
      font-size: 0.88em;
      font-weight: normal;
      cursor: default;
      vertical-align: middle;
    }

    body.dark-mode .fake-lecture-btn {
      opacity: 0.88;
    }

    /* ── Adaptation tactile / souris ── */
    .touch-only {
      display: none;
    }

    .pointer-only {
      display: inline;
    }

    @media (hover: none) and (pointer: coarse) {
      .touch-only {
        display: inline;
      }

      .pointer-only {
        display: none;
      }
    }

    /* ── Panneau détail token (feuille basse) ──────────────────────────────────
       En lecture, on ouvre ce panneau à chaque mot inconnu : en modale centrée
       sur fond assombri, il fallait le fermer avant de pouvoir lire la suite du
       verset, soit deux gestes par mot. En feuille basse, le verset reste lisible
       au-dessus et le contenu se remplace au clic sur un autre mot. */
    #versesWordModal {
      /* Le conteneur ne capte plus le clic : seul le panneau lui-même le fait,
         ce qui laisse les mots du verset cliquables pendant qu'il est ouvert. */
      pointer-events: none;
      background: transparent !important;
      align-items: flex-end !important;
      justify-content: center !important;
    }

    .verses-word-modal-inner {
      pointer-events: auto;
      width: 100%;
      max-width: 560px;
      /* Plafonnée à 340px et réduite à 40vh (au lieu de 45) : sur un écran
         haut, 45vh dépassait largement ce qu'exige le contenu et rognait la
         place de lecture au-dessus (retour utilisatrice du 2026-08-03). Sur
         écran court, la combinaison avec l'entête rétractable
         (#TOC:js-verses-header-collapse) est nécessaire pour tenir 4–5
         lignes d'hébreu lisibles feuille ouverte. */
      max-height: min(40vh, 340px);
      background: white;
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.28);
      position: relative;
      display: flex;
      flex-direction: column;
      animation: versesSheetUp 0.18s ease-out;
    }

    @keyframes versesSheetUp {
      from {
        transform: translateY(14px);
        opacity: 0.6;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .verses-word-modal-inner {
        animation: none;
      }
    }

    /* Le corps du verset se réserve la place de la feuille pour que la fin du
       texte ne reste pas cachée dessous. */
    #versesModal.word-sheet-open .verses-modal-body {
      padding-bottom: calc(min(40vh, 340px) + 16px);
    }

    /* Mot dont l'analyse est affichée : repère visuel, indispensable dès lors que
       le panneau reste ouvert d'un mot à l'autre. */
    .verses-token-active {
      background: rgba(58, 127, 193, 0.22);
      border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(58, 127, 193, 0.45);
    }

    body.dark-mode .verses-token-active {
      background: rgba(147, 180, 245, 0.28);
      box-shadow: 0 0 0 1px rgba(147, 180, 245, 0.5);
    }

    body.dark-mode .verses-word-modal-inner {
      background: #1e293b;
      color: #e2e8f0;
    }

    .verses-seg-row {
      padding: 8px 12px;
      border-radius: 8px;
      background: #f8fafc;
      margin-bottom: 6px;
    }

    body.dark-mode .verses-seg-row {
      background: #243046;
    }

    .verses-seg-role {
      font-size: 0.72em;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #6b7280;
    }

    body.dark-mode .verses-seg-role {
      color: #94a3b8;
    }

    /* Sens de l'affixe : sans cette ligne, le panneau annonce « Préfixe » sans
       jamais dire ce que le préfixe veut dire. */
    .verses-seg-affix {
      font-size: 0.84em;
      color: #1e40af;
      line-height: 1.4;
      margin-top: 2px;
    }

    body.dark-mode .verses-seg-affix {
      color: #93b4f5;
    }

    .verses-word-card {
      background: #eff6ff;
      border-radius: 8px;
      padding: 8px 12px;
      margin-top: 6px;
    }

    body.dark-mode .verses-word-card {
      background: #1e3a5f;
    }

    /* #TOC:css-analyze-dark-mode */
    /* Section « Analyser un mot » : ces trois gris (analyse grammaticale,
       messages de statut, occurrences) ne sont pas couverts par les règles
       génériques [style*="color:#..."] plus haut. Portée
       limitée à #analyzeSection pour ne pas affecter le reste de l'app. */
    body.dark-mode #analyzeSection [style*="color:#374151"] {
      color: #e2e8f0 !important;
    }

    body.dark-mode #analyzeSection [style*="color:#6b7280"],
    body.dark-mode #analyzeSection [style*="color:#9ca3af"] {
      color: #94a3b8 !important;
    }

    /* Lecture par niveau : « Vérifier ma traduction » — même gris #374151 non
       couvert, même correctif, portée limitée à #versesModalBody. */
    /* Modale ouverte au clic sur un mot : #versesWordModalBody est HORS de
       #versesModalBody, donc aucune des règles ci-dessous ne l'atteignait.
       Sans ceci, « Sens : … » reste en gris foncé sur fond sombre. */
    body.dark-mode #versesWordModal [style*="color:#374151"] {
      color: #e2e8f0 !important;
    }

    body.dark-mode #versesWordModal [style*="color:#6b7280"],
    body.dark-mode #versesWordModal [style*="color:#9ca3af"] {
      color: #94a3b8 !important;
    }

    /* Bouton « Analyser ce mot (analyse complète) » */
    .verses-analyze-full-btn {
      width: 100%;
      padding: 9px 12px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      background: #e0e7ff;
      color: #1e40af;
      border: 1px solid #c7d2fe;
      transition: background 0.15s, border-color 0.15s;
    }

    .verses-analyze-full-btn:hover {
      background: #c7d2fe;
    }

    body.dark-mode .verses-analyze-full-btn {
      background: #1e293b;
      color: #93c5fd;
      border: 1px solid #3b82f6;
    }

    body.dark-mode .verses-analyze-full-btn:hover {
      background: #334155;
    }

    /* Boutons des Formes attestées (candidats) */
    .analyze-candidate-btn {
      font-family: 'SBL Hebrew', serif;
      font-size: 1.25em;
      padding: 4px 12px;
      border-radius: 8px;
      border: 1px solid #c7d2fe;
      background: #eef2ff;
      color: #1e40af;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }

    .analyze-candidate-btn:hover {
      background: #c7d2fe;
    }

    body.dark-mode .analyze-candidate-btn {
      border-color: #3b82f6;
      background: #1e293b;
      color: #93c5fd;
    }

    body.dark-mode .analyze-candidate-btn:hover {
      background: #334155;
      border-color: #60a5fa;
    }

    /* Ligne d'analyse grammaticale et contrastes du texte dans #analyzeWordModal et #analyzeSection */
    .analyze-morph-text {
      font-size: 0.92em;
      color: #374151;
    }

    body.dark-mode .analyze-morph-text {
      color: #e2e8f0;
    }

    /* ---- Préfixes et suffixes détaillés (analyse morphologique) --------------
       Sans ce bloc, une forme comme וּדְבָרוֹ n'explique pas ce que valent le
       וּ־ initial et le ־וֹ final : c'est le principal prérequis implicite de
       l'application pour un lecteur qui débute. */
    .analyze-affixes {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed #d1d5db;
    }

    .analyze-affixes-title {
      font-size: 0.72em;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #6b7280;
      font-weight: 600;
      margin-bottom: 5px;
    }

    .analyze-affixes table {
      border-collapse: collapse;
      width: 100%;
    }

    .analyze-affixes td {
      border: none;
      padding: 2px 0;
      vertical-align: baseline;
      font-size: 0.85em;
      color: #374151;
    }

    .analyze-affixes td.aff {
      font-family: "SBL Hebrew", serif;
      font-size: 1.25em;
      direction: rtl;
      text-align: right;
      white-space: nowrap;
      padding-left: 10px;
      width: 1%;
      color: #1e40af;
      font-weight: 600;
    }

    .analyze-affixes-more {
      margin-top: 6px;
      padding: 4px 10px;
      border-radius: 7px;
      border: none;
      background: linear-gradient(160deg, #99a8e0, #6878b8);
      color: white;
      font-size: 0.78em;
      cursor: pointer;
    }

    body.dark-mode .analyze-affixes {
      border-top-color: #475569;
    }

    body.dark-mode .analyze-affixes td {
      color: #e2e8f0;
    }

    body.dark-mode .analyze-affixes td.aff {
      color: #93b4f5;
    }

    body.dark-mode .analyze-affixes-title {
      color: #94a3b8;
    }

    /* ---- Tableaux non verbaux (suffixes, prépositions, pronoms) -------------- */
    .affix-table-desc {
      font-size: 0.88em;
      color: #4b5563;
      line-height: 1.5;
      margin: 4px 0 12px;
    }

    /* Le tableau des prépositions fait 7 colonnes : il doit défiler seul, sans
       jamais faire déborder la page. */
    .affix-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .affix-table {
      border-collapse: collapse;
      width: 100%;
    }

    .affix-table th,
    .affix-table td {
      border: 1px solid #e5e7eb;
      padding: 6px 8px;
      text-align: center;
      vertical-align: middle;
    }

    .affix-table th {
      background: rgba(58, 127, 193, 0.12);
      font-size: 0.78em;
      font-weight: 600;
      color: #1e40af;
      white-space: nowrap;
    }

    .affix-th-heb,
    .affix-td-heb {
      font-family: "SBL Hebrew", serif;
      direction: rtl;
    }

    .affix-td-heb {
      font-size: 1.25em;
      white-space: nowrap;
    }

    .affix-td-label {
      font-size: 0.78em;
      color: #6b7280;
      text-align: left;
      white-space: nowrap;
    }

    .affix-td-txt {
      font-size: 0.78em;
      color: #374151;
      text-align: left;
      white-space: normal;
      overflow-wrap: break-word;
      min-width: 4.5em;
    }

    body.dark-mode .affix-table-desc {
      color: #cbd5e1;
    }

    body.dark-mode .affix-table th,
    body.dark-mode .affix-table td {
      border-color: #475569;
    }

    body.dark-mode .affix-table th {
      background: rgba(147, 180, 245, 0.16);
      color: #93b4f5;
    }

    body.dark-mode .affix-td-label {
      color: #94a3b8;
    }

    body.dark-mode .affix-td-txt {
      color: #e2e8f0;
    }

    body.dark-mode #analyzeWordModal [style*="color:#374151"] {
      color: #e2e8f0 !important;
    }

    body.dark-mode #analyzeWordModal [style*="color:#6b7280"],
    body.dark-mode #analyzeWordModal [style*="color:#9ca3af"] {
      color: #94a3b8 !important;
    }

    body.dark-mode .analyze-attested-title {
      color: #94a3b8 !important;
    }

    #analyzeAttestedTop {
      max-height: 220px;
      overflow-y: auto;
      padding: 4px 6px;
      scrollbar-width: thin;
      scrollbar-color: #60a5fa rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
      border-radius: 8px;
    }

    body.dark-mode #analyzeAttestedTop {
      scrollbar-color: #3b82f6 rgba(255, 255, 255, 0.1);
    }

    #analyzeAttestedTop::-webkit-scrollbar {
      width: 7px;
    }

    #analyzeAttestedTop::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 4px;
    }

    body.dark-mode #analyzeAttestedTop::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
    }

    #analyzeAttestedTop::-webkit-scrollbar-thumb {
      background: #60a5fa;
      border-radius: 4px;
    }

    body.dark-mode #analyzeAttestedTop::-webkit-scrollbar-thumb {
      background: #3b82f6;
      border-radius: 4px;
    }

    body.dark-mode #versesModalBody [style*="color:#374151"] {
      color: #e2e8f0 !important;
    }

    body.dark-mode #versesModalBody [style*="color:#6b7280"] {
      color: #94a3b8 !important;
    }

    /* #versesTranslationText voit son display togglé via JS
       (toggleVerseTranslation), ce qui force le navigateur à réécrire tout
       l'attribut style à partir du CSSOM et convertit color:#374151 en
       color: rgb(55, 65, 81) — le sélecteur [style*="color:#374151"]
       ci-dessus cesse alors de matcher. Ancrage direct par id, insensible à
       cette réécriture. */
    body.dark-mode #versesTranslationText {
      color: #e2e8f0 !important;
    }

    /* ── Modale paradigme verbal ── */
    .paradigm-inner {
      width: 95%;
      max-width: 600px;
      max-height: 88vh;
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
      position: relative;
      display: flex;
      flex-direction: column;
    }

    body.dark-mode .paradigm-inner {
      background: #1e293b;
      color: #e2e8f0;
    }

    .paradigm-header {
      padding: 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
    }

    body.dark-mode .paradigm-header {
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .paradigm-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 8px 12px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      flex-shrink: 0;
    }

    body.dark-mode .paradigm-tabs {
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .paradigm-tab {
      padding: 5px 10px;
      border-radius: 8px;
      border: 1px solid rgba(0, 0, 0, 0.18);
      background: transparent;
      cursor: pointer;
      font-size: 0.82em;
      font-weight: 500;
      color: inherit;
      transition: background 0.15s;
    }

    .paradigm-tab.active {
      background: linear-gradient(160deg, #cd9ee0, #9858c8);
      color: white;
      border-color: transparent;
    }

    body.dark-mode .paradigm-tab {
      border-color: rgba(255, 255, 255, 0.22);
    }

    .paradigm-content {
      overflow-y: auto;
      padding: 8px 12px 16px;
      flex: 1;
    }

    .paradigm-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9em;
    }

    .paradigm-table td {
      padding: 4px 6px;
      vertical-align: middle;
    }

    .paradigm-table tr+tr td {
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    body.dark-mode .paradigm-table tr+tr td {
      border-top-color: rgba(255, 255, 255, 0.07);
    }

    .paradigm-table .form-label {
      font-weight: 600;
      font-size: 0.82em;
      color: #9858c8;
      white-space: nowrap;
      vertical-align: top;
      padding-top: 6px;
      min-width: 90px;
    }

    body.dark-mode .paradigm-table .form-label {
      color: #cd9ee0;
    }

    body.dark-mode #paradigmModal button[data-i18n="reportTypo"] {
      color: #94a3b8;
    }

    .paradigm-table .person-label {
      font-size: 0.78em;
      opacity: 0.55;
      white-space: nowrap;
      min-width: 35px;
    }

    .paradigm-table .hebrew-form {
      font-family: 'SBL Hebrew', serif;
      font-size: 1.8em;
      direction: rtl;
      text-align: right;
    }

    @media (max-width: 480px) {
      .paradigm-inner {
        max-height: 92vh;
      }

      .paradigm-table .form-label {
        min-width: 70px;
        font-size: 0.75em;
      }

      .paradigm-table .hebrew-form {
        font-size: 2.1em;
      }
    }

    #wordIllustration {
      display: block;
      margin: 0 auto;
      max-width: 90%;
      height: auto;
    }

    #illustrationContainer {
      align-items: center;
      justify-content: center;
    }


    #launchQuizBtn {
      margin-bottom: 30px;
    }

    /* Styles pour le quiz de parsing verbal */
    .verbTypeBtn,
    .binyanBtn,
    .parsingBtn {
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .verbTypeBtn:hover,
    .binyanBtn:hover,
    .parsingBtn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .verbTypeBtn:active,
    .binyanBtn:active,
    .parsingBtn:active {
      transform: translateY(0);
    }

    #verbFormDisplay {
      line-height: 1.3;
    }

    #currentAnswer {
      background: rgba(255, 255, 255, 0.7);
      transition: all 0.3s ease;
    }

    #currentAnswer.has-selection {
      background: rgba(74, 127, 181, 0.1);
      border: 2px solid rgba(74, 127, 181, 0.3);
    }

    #currentAnswer.correct {
      background: rgba(88, 232, 138, 0.2);
      border: 2px solid rgba(88, 232, 138, 0.5);
    }

    #currentAnswer.incorrect {
      background: rgba(249, 128, 128, 0.2);
      border: 2px solid rgba(249, 128, 128, 0.5);
    }

    .parsingBtn.selected {
      background: #4a7fb5 !important;
      color: white !important;
      border-color: #4a7fb5 !important;
    }

    @media (max-width: 480px) {

      .verbTypeBtn,
      .binyanBtn {
        padding: 6px 10px !important;
        font-size: 0.85em !important;
      }

      #verbFormDisplay {
        font-size: 2.8em !important;
      }
    }

    #hebrew,
    .hebrew-text {
      all: unset !important;
      display: inline-block !important;
      padding: 0 10px !important;
      font-family: "SBL Hebrew", serif !important;
      direction: rtl !important;
      line-height: 1.2 !important;
      text-align: center !important;
      box-sizing: border-box !important;
      user-select: text !important;
      -webkit-user-select: text !important;
    }

    /* Conteneur du mot hébreu */
    #hebrewContainer {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      padding: 20px 28px 0 28px;
      margin-top: 0px !important;
      margin-bottom: 0px !important;
      min-height: 1.2em;
    }


    /* Masquage dans les modes spéciaux */
    body.reverse #toggleFavoriteBtn {
      display: none !important;
    }

    /* Favoris visible en mode Révision intelligente et Focus */
    .smart-review-active #toggleFavoriteBtn,
    .focus-mode #toggleFavoriteBtn {
      display: flex !important;
    }

    /* Le bouton favori : position absolute à droite */
    #toggleFavoriteBtn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      box-shadow: none !important;
      border: none;
      padding: 0;
      cursor: pointer;
      z-index: 10;
    }

    #toggleFavoriteBtn:hover {
      background: none !important;
      box-shadow: none !important;
      outline: none !important;
    }


    #favStar {
      width: 24px;
      height: 24px;
      position: relative;
    }

    #favStar.favorite {
      width: 27px;
      height: 27px;
    }

    /* #TOC:css-word-labels */
    /* Bouton label : pastille de couleur sous l'étoile favori */
    body.reverse #wordLabelBtn {
      display: none !important;
    }

    .smart-review-active #wordLabelBtn,
    .focus-mode #wordLabelBtn {
      display: flex !important;
    }

    #wordLabelBtn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(calc(-50% + 40px));
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      box-shadow: none !important;
      border: none;
      padding: 0;
      cursor: pointer;
      z-index: 10;
    }

    #wordLabelBtn:hover {
      background: none !important;
      box-shadow: none !important;
      outline: none !important;
    }

    /* Forme d'étiquette : petit rectangle aux angles légèrement arrondis */
    #wordLabelDot {
      width: 20px;
      height: 14px;
      border-radius: 3px;
      border: 2px dotted #9aa4b0;
      background: transparent;
      box-sizing: border-box;
    }

    /* Étiquette posée : bordure de la même couleur que le remplissage (posée en JS) */
    #wordLabelDot.labeled {
      border-style: solid;
      width: 22px;
      height: 15px;
    }

    #labelPopover {
      display: none;
      position: absolute;
      right: 44px;
      top: 50%;
      transform: translateY(calc(-50% + 40px));
      /* Fond opaque : --bg-card est semi-transparent, illisible par-dessus le mot hébreu */
      background: #ffffff;
      color: var(--color-text, #333);
      border: 1px solid #c9d2dc;
      border-radius: 12px;
      padding: 4px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
      z-index: 30;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      min-width: 160px;
    }

    /* Neutralise le style global des boutons (margin 5px, min-height 40px, centrage !important) */
    #labelPopover button {
      display: flex;
      align-items: center;
      justify-content: flex-start !important;
      gap: 10px;
      width: 100%;
      margin: 0;
      min-width: 0;
      min-height: 0;
      padding: 3px 8px;
      border: none;
      border-radius: 8px;
      background: transparent;
      box-shadow: none;
      cursor: pointer;
      font-size: 13px;
      color: inherit;
      text-align: left;
    }

    #labelPopover button:hover {
      background: rgba(120, 140, 170, 0.15);
    }

    #labelPopover .label-dot {
      flex: none;
      width: 20px;
      height: 14px;
      border-radius: 3px;
      border: 1px solid #9aa4b0;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      line-height: 1;
      color: #6b7280;
    }

    body.dark-mode #labelPopover {
      background: #332f26;
      border-color: #4a5361;
    }

    #labelSelect {
      width: 150px;
    }

    /* Bordure colorée du select Label quand un filtre est actif (comme les autres selects) */
    #labelSelect.active-filter {
      border: 2px solid #4a7fb5;
    }


    .pwa-install-btn {
      margin: 8px auto 16px auto !important;
      padding: 8px 16px !important;
      font-size: 0.92em !important;
      line-height: 1.3 !important;
      white-space: nowrap;
      display: block;
    }

    .pwa-install-btn.visible {
      display: block !important;
    }

    .pwa-install-btn::-moz-focus-inner {
      border: 0;
      padding: 0;
    }

    .pwa-install-btn svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    /* Petite animation douce d'apparition */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .progressBtn {
      background: rgba(255, 255, 255, 0.62) !important;
      padding: 6px 14px !important;
      gap: 8px;
    }


    /* Taille normale (option désactivée) */
    #playAudioBtn svg.icon {
      width: 28px;
      height: 28px;
      transition: width 0.3s ease, height 0.3s ease;
    }

    /* Taille agrandie quand l’option est activée */
    #playAudioBtn.auto-play-active svg.icon {
      width: 30px;
      height: 30px;
    }

    /* Couleur normale (option désactivée) */
    #playAudioBtn svg.icon use {
      stroke: #4e5566;
      stroke-width: 1.7;
      transition: stroke 0.3s ease;
    }

    /* Couleur quand activé */
    #playAudioBtn.auto-play-active svg.icon use {
      stroke: #0d2465;
      stroke-width: 2;
    }

    /* Classe temporaire pendant la lecture */
    #playAudioBtn.playing svg.icon {
      width: 34px;
      height: 34px;
      animation: shake 0.6s ease-in-out infinite;
    }




    /* ==========================================================================
   FLASH SUR BOUTONS OUI / PEU / NON (restauration complète + robuste)
   ========================================================================== */

    /* Base : ombre normale sur les trois boutons */
    #knownBtn,
    #littleBtn,
    #unknownBtn {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      transition: box-shadow 0.25s ease, transform 0.1s ease;
    }

    /* Hover : ombre renforcée */
    @media (hover: hover) and (pointer: fine) {

      #knownBtn:hover,
      #littleBtn:hover,
      #unknownBtn:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        transform: translateY(-1px);
      }
    }

    /* Animation flash + halo coloré */
    /* Halo max plus large et plus diffus */
    #knownBtn.flash,
    #littleBtn.flash,
    #unknownBtn.flash {
      box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 0 40px 28px var(--flash-color) !important;
    }

    /* Couleurs spécifiques par bouton */
    #knownBtn.flash {
      --flash-color: #75ffa3;
    }

    /* vert succès */
    #littleBtn.flash {
      --flash-color: #fff06e;
    }

    /* jaune effort */
    #unknownBtn.flash {
      --flash-color: #feb3b3;
    }

    /* rouge oubli */

    /* Optionnel : petit feedback au tap sur mobile */
    #knownBtn:active,
    #littleBtn:active,
    #unknownBtn:active {
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15), 0 0 36px 22px var(--flash-color, transparent);
    }

    /* Exception : on n’applique PAS ce reset aux boutons Oui/Peu/Non pendant le flash */
    #knownBtn.flash:active,
    #littleBtn.flash:active,
    #unknownBtn.flash:active,
    #knownBtn.flash:focus,
    #littleBtn.flash:focus,
    #unknownBtn.flash:focus {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 36px 22px var(--flash-color) !important;
    }

    /* Grossissement temporaire du compteur pendant le flash */
    #knownBtn.flash span,
    #littleBtn.flash span,
    #unknownBtn.flash span {
      transform: scale(1.4);
      /* grossit de 40 % */
      font-weight: 900;
      /* encore plus gras */
      transition: transform 0.4s ease, font-weight 0.4s ease;
    }

    /* Option : petite animation de rebond / pulsation */
    @keyframes flashScale {
      0% {
        transform: scale(1);
      }

      30% {
        transform: scale(1.55);
      }

      70% {
        transform: scale(1.3);
      }

      100% {
        transform: scale(1.4);
      }
    }

    #knownBtn.flash span,
    #littleBtn.flash span,
    #unknownBtn.flash span {
      animation: flashScale 1.2s ease-out forwards;
      transform-origin: center;
    }

    /* ==========================================================================
   BOUTON MOTIVANT (réapparition quand niveau presque terminé)
   ========================================================================== */
    #nextLevelBtn {
      display: none;
      /* caché par défaut */
      background: linear-gradient(135deg, #10b981, #059669);
      /* vert émeraude → vert foncé */
      color: white;
      font-weight: bold;
      font-size: 1em;
      padding: 12px 20px;
      margin: 10px auto 10px auto;
      /* un peu plus d'espace en haut/bas */
      border: none;
      border-radius: 20px;
      /* bien arrondi */
      box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
      cursor: pointer;
      transition: all 0.3s ease;
      max-width: 80%;
      text-align: center;
      line-height: 1.4;
    }

    /* Animation pulsante douce */
    #nextLevelBtn {
      animation: pulse 2s infinite ease-in-out;
    }

    /* Effet au survol/tap */
    #nextLevelBtn:hover,
    #nextLevelBtn:active {
      transform: scale(1.05);
      box-shadow: 0 12px 35px rgba(16, 185, 129, 0.6);
    }

    /* Sécurité : quand il est vide ou forcé caché */
    #nextLevelBtn:empty,
    #nextLevelBtn[style*="display: none"] {
      display: none !important;
      height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* ==========================================================================
   LISTE DES CATÉGORIES (filtre de navigation) - avec couleurs selon niveau de connaissance
   ========================================================================== */

    #categorySelect {
      /* Style par défaut */
      transition: background-color 0.2s;
    }

    #categorySelect.unknown {
      background-color: #feb3b3;
    }

    #categorySelect.little {
      background-color: #fff06e;
    }

    #categorySelect.not-known {
      background-color: #ffd4b0;
    }

    /* couleur intermédiaire */
    #categorySelect.known {
      background-color: #75ffa3;
    }

    #categorySelect.all {
      background-color: #ffffff;
    }

    /* ==========================================================================
   TOP BAR & NAVIGATION
   ========================================================================== */


    .transparent-white-btn {
      background: rgba(255, 255, 255, 0.62) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.92);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transition: all 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
      .transparent-white-btn:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }

    #settingsBtn {
      align-items: center !important;
      vertical-align: middle !important;
      font-size: 1.1em;
      font-weight: normal;
      margin: 10px auto;
      padding-right: 14px;
      padding-left: 14px;
      gap: 8px;
    }

    #settingsBtn svg.icon {
      width: 1.4em !important;
      height: 1.4em !important;
      flex-shrink: 0;
      vertical-align: middle !important;
    }

    #settingsBtn span {
      line-height: 1 !important;
      color: inherit;
    }

    #settingsBtn.hidden {
      display: none !important;
    }


    /* ==========================================================================
   QUIZ STYLES
   ========================================================================== */

    .quiz-active #settingsBtn,
    .quiz-active #mainHelpBtn {
      display: none !important;
    }

    /*  marges de la question du quiz */
    .quiz-active #quizContainer #question {
      margin: 20px 0 30px !important;
      padding-top: 0 !important;
    }

    .quiz-active #question,
    .quiz-active #translation {
      margin-top: 20px !important;
      margin-bottom: 15px !important;
      padding: 0 !important;
      line-height: 1.3 !important;
    }

    .quiz-active #quizOptions {
      margin-top: 10px !important;
      padding-top: 0 !important;
      gap: 12px !important;
    }

    .quiz-active #quizContainer {
      padding: 10px 20px !important;
      margin: 0 !important;
      position: relative !important;
      top: 0 !important;
    }

    /* Taille par défaut du mot français dans le quiz */
    /* =====>>>> NB  : rem et non em, pour éviter que les tailles se multiplient*/
    .quiz-active #question {
      font-size: 2.5rem !important;
    }

    /* . Taille par défaut du mot hébreu dans le quiz (question principale) */
    .quiz-active #question .hebrew-text {
      font-size: 4.2rem !important;
      line-height: 1.18 !important;
      margin: 0 !important;
    }

    /* 4. Sécurité : on force le centrage et évite les marges parasites partout dans le quiz */
    .quiz-active .hebrew-text {
      font-size: 3rem !important;
      text-align: center !important;
      display: inline-block !important;
    }


    /* ==========================================================================
   BOTTOM BAR
   ========================================================================== */

    .bottom-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 420px;
      margin: 0 auto;
      background: var(--bg-bottom-bar);
      backdrop-filter: blur(10px) !important;
      border-top: 1px solid rgba(200, 180, 140, 0.6);
      display: flex;
      height: 70px;
      box-sizing: border-box;
      z-index: 900;
      padding-bottom: env(safe-area-inset-bottom);
      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    }

    .bottom-bar .tab {
      flex: 1;
      background: none;
      box-shadow: none;
      border: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: #666;
      font-size: 0.78em;
      font-weight: 500;
      position: relative;
      transition: color 0.25s ease, transform 0.15s ease;
      cursor: pointer;
      padding: 0 4px;
    }

    .bottom-bar .tab:hover {
      box-shadow: none !important;
    }

    .bottom-bar .tab.active {
      color: #071f60;
      font-weight: normal;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38) !important;
    }

    .bottom-bar .tab.active .tab-icon {
      stroke: #071f60;
      fill: #071f60;
    }

    .bottom-bar .tab-icon {
      width: 30px;
      height: 30px;
      stroke: currentColor;
      fill: none;
      stroke: none;
      transition: all 0.25s ease;
    }

    .bottom-bar .tab-wrapper {
      position: relative;
    }

    .badge {
      position: absolute;
      top: -6px;
      right: -10px;
      background: #ffffff;
      color: black;
      font-size: 0.6em;
      font-weight: normal;
      height: 16px;
      min-width: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 3px;
      box-sizing: border-box;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
      line-height: 1;
    }

    #MenuTab {
      line-height: 1;
    }

    /* ==========================================================================
   OVERLAYS & MODALS
   ========================================================================== */

    #commonOverlay .overlay-inner {
      max-height: 90vh;
      overflow-y: auto;
      padding: 24px 20px 28px;
      box-sizing: border-box;
    }

    #commonOverlay .overlay-inner::-webkit-scrollbar {
      width: 6px;
    }

    #commonOverlay .overlay-inner::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;
    }

    #commonOverlay .overlay-footer {
      padding: 0 20px 20px 20px;
      border-top: none;
      background: #fff1d2;
      border-radius: 0 0 16px 16px;
      text-align: center;
      min-height: 0;
      /* Ne jamais comprimer le pied : sinon, quand la place verticale manque
         (écran bas, mode paysage, titre sur deux lignes), la marge basse
         s'effondre et le bouton déborde sous la modale. C'est la zone de
         contenu (flex:1, overflow-y:auto) qui absorbe le manque en défilant. */
      flex-shrink: 0;
    }

    #commonOverlay #commonOverlayButtons {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    #settingsOverlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1000;
      overflow-y: auto;
    }

    #settingsOverlay .overlay-content {
      position: fixed;
      inset: 0;
      background: #fff1d2;
      max-width: 420px;
      width: 100%;
      margin: 0 auto;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
    }

    #settingsOverlay .overlay-content>div:nth-child(1) {
      height: 48px !important;
      min-height: 48px !important;
      padding: 0 !important;
      margin: 0 !important;
      display: flex !important;
      align-items: stretch !important;
      background: rgb(238, 238, 238);
      border-bottom: none;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    #settingsOverlay .overlay-content>div:nth-child(2) {
      border-bottom: none !important;
      background: #fff1d2;
      /*pour compenser la place pris par le footer : */
      margin-bottom: 50px;
      padding-bottom: 160px;
    }

    /* Espace supplémentaire ciblé pour petits écrans (footer sur 2 lignes) */
    @media (max-width: 420px) {
      #settingsOverlay .overlay-content>div:nth-child(2) {
        padding-bottom: 220px;
      }

      .footer {
        padding: 14px 20px;
      }
    }

    /* Conteneur des onglets  */
    .tabBtnContainer {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 3px;
      padding: 0 12px 0 0;
      flex-wrap: wrap;
    }

    /* Les onglets */
    #settingsOverlay .tabBtn {
      flex: 0 0 auto;
      margin-top: 5px !important;
      padding: 0 8px;
      font-size: 14px !important;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: #ffffff;
      font-weight: 600;
      border-radius: 12px 12px 0 0;
      transition: background 0.2s ease;
      white-space: nowrap;
      margin: 0 2px;
      box-shadow: none;
    }

    /* Bouton de fermeture */
    #settingsOverlay .closeTabBtn {
      background: linear-gradient(160deg, #f472b6, #ec4899);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 8px 20px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      min-width: 100px;
    }



    #settingsOverlay .tabBtn.active {
      background: #fff1d2 !important;
      color: #0d2465;
      font-weight: 700;
      border-radius: 12px 12px 0 0;
      position: relative;
      z-index: 2;
      box-shadow: none !important;
    }

    #settingsOverlay .tabBtn:hover:not(.active) {
      background: white;
      box-shadow: none;
    }

    #settingsOverlay .tabContent {
      background: #fff1d2;
      padding: 20px;
      margin-top: 0;
      border-radius: 0 12px 12px 12px;
      box-shadow: none;
      font-size: 14px;
    }

    #settingsOverlay .overlay-footer {
      padding: 0;
      text-align: center;
      background: #fff1d2;
    }

    .footer {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 420px;
      padding: 12px 20px;
      background: #fff1d2;
      border-top: 1px solid #d1c7a9;
      text-align: right;
      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
      z-index: 1002;
      box-sizing: border-box;
    }

    /* ==========================================================================
   MISC & RESPONSIVE
   ========================================================================== */

    .icon {
      width: 1.2em;
      height: 1.2em;
      fill: none;
    }

    .icon+span {
      margin-left: 8px;
    }

    #strongButtonContainer button {
      min-height: 0 !important;
      padding: 3px 8px !important;
      font-size: 0.78em !important;
      height: auto !important;
    }

    .title-style {
      color: #0d2465 !important;
      font-size: 0.9em !important;
      font-weight: bold !important;
      text-transform: uppercase !important;
    }

    .subtitleLabel {
      color: #0d2465 !important;
      font-weight: bold !important;
      text-align: left;
    }

    /* Vibration : visible seulement sur écran tactile (smartphone/tablette) */
    #vibrationSettingsSection {
      display: none;
    }

    @media (hover: none) and (pointer: coarse) {
      #vibrationSettingsSection {
        display: block;
      }
    }

    .optSectionTitle {
      font-variant: small-caps;
      font-size: 1.05em;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #4a7fb5;
      border-bottom: 1.5px solid #c5b99a;
      padding-bottom: 4px;
      margin: 22px 0 10px;
    }

    .filter-info {
      font-weight: bold;
      color: #1d4ed8;
      margin: 10px 0;
    }

    .no-words {
      color: #dc2626;
      font-style: italic;
    }

    #hebrewSize {
      margin: 10px 0;
      padding: 5px;
      border: none;
      border-radius: 5px;
    }

    .status-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .status-line {
      font-size: 0.8em;
      color: #555;
      margin: 0;
      white-space: nowrap;
    }

    .status-container>.status-line:not(:empty)~.status-line:not(:empty)::before {
      content: "‧";
      margin: 0 6px;
      color: #999;
    }

    .top-nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 15px 0px;
      padding: 0;
      font-size: 0.85em;
      color: #555;
    }

    .nav-left,
    .nav-right {
      display: flex;
      gap: 10px;
      flex-shrink: 0;
    }

    .nav-center {
      flex: 1;
      text-align: center;
      padding: 0 6px;
      overflow: hidden;
      line-height: 1.4;
    }

    .nav-progress {
      font-weight: normal;
      font-size: 0.85em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav-filter {
      font-size: 0.9em;
      opacity: 0.85;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav-btn.icon-btn {
      width: 40px !important;
      height: 40px !important;
      padding: 0 !important;
      border: none !important;
      border-radius: 10px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
      .nav-btn.icon-btn:hover:not(.disabled) {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        transform: translateY(-1px);
      }
    }

    .nav-btn.icon-btn svg {
      width: 24px !important;
      height: 24px !important;
      fill: #0d2465 !important;
    }

    .nav-btn.icon-btn.disabled,
    .nav-btn.icon-btn:disabled {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    }

    .nav-btn.icon-btn.disabled svg,
    .nav-btn.icon-btn:disabled svg {
      fill: #9ca3af !important;
    }


    #focusTabIconExit {
      stroke-width: 1.5 !important;
      stroke-linecap: butt !important;
      stroke-linejoin: miter !important;
      stroke-miterlimit: 4 !important;
    }

    #focusTabIconEnter {
      stroke-width: 2 !important;
      stroke-linecap: butt !important;
      stroke-linejoin: miter !important;
    }

    @media (max-width: 380px) {
      .top-nav-bar {
        font-size: 0.8em;
        padding: 0;
      }

      .nav-left,
      .nav-right {
        gap: 6px;
      }

      .nav-btn.icon-btn {
        width: 38px !important;
        height: 38px !important;
      }
    }

    @media (max-height: 600px) {
      .app-container {
        padding-bottom: 160px !important;
      }
    }

    /* ==========================================================================
   MARGES SPÉCIFIQUES POUR LE MOT HÉBREU PRINCIPAL (révision / RI)
   ========================================================================== */

    /* Mot hébreu principal : on remet une belle marge supérieure */
    #hebrew,
    .revisionView .hebrew-text {
      margin-top: 12px !important;
      margin-bottom: 12px !important;
    }


    /* ==========================================================================
   TEINTE NOIRE UNIFORME SUR TOUT L'ÉCRAN (hors mode focus)
   ========================================================================== */

    /* Fond de base */
    body {
      background: #fff1d2;
      position: relative;
      /* nécessaire pour superposer l'overlay */
    }

    /* Overlay couvrant tout l'écran */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background: #f8e8c4;
      pointer-events: none;
      z-index: -1;
    }

    /* #TOC:css-corpus-switch — commutateur Hébreu/Araméen de l'interface principale
       Non sélectionné : identique pour les deux boutons (gris foncé, discret).
       Sélectionné : fond "blanc crème" comme .transparent-white-btn, texte bleu
       (hébreu) ou brun-doré (araméen) — cohérent avec .hebrew-text par corpus. */
    #corpusSwitchHebrew,
    #corpusSwitchAramaic {
      color: #929292 !important;
      /* légèrement plus clair que --color-muted2 (#666) */
      background: #FFF5E0 !important;
      /* couleur pleine identique au rail (pas "transparent" qui grise) */
      border: none !important;
      box-shadow: none !important;
      /* neutralise l'ombre globale button{} qui dessinait le bouton non actif */
    }

    /* Mode sombre : rail + bouton inactif en brun sombre, PLUS CLAIR que le bouton
       actif (qui, lui, est le plus foncé) — cf. #corpusSwitch*[aria-pressed] plus bas */
    body.dark-mode #corpusSwitchRail {
      background: #383327 !important;
    }

    body.dark-mode #corpusSwitchHebrew,
    body.dark-mode #corpusSwitchAramaic {
      background: #383327 !important;
      /* = rail, plus clair que le bouton actif */
      color: #9a9278 !important;
      /* muté mais lisible sur fond sombre */
    }

    #corpusSwitchHebrew[aria-pressed="true"] {
      background: rgba(255, 255, 255, 0.62) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.92) !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) !important;
      color: #0d2465 !important;
    }

    #corpusSwitchAramaic[aria-pressed="true"] {
      background: rgba(255, 255, 255, 0.62) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.92) !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) !important;
      color: #8a6a1e !important;
    }

    body.dark-mode #corpusSwitchHebrew[aria-pressed="true"] {
      background: #26221b !important;
      /* plus foncé que le rail #383327 */
      border-color: rgba(255, 255, 255, 0.14) !important;
      color: #a8bfe8 !important;
    }

    body.dark-mode #corpusSwitchAramaic[aria-pressed="true"] {
      background: #26221b !important;
      /* plus foncé que le rail #383327 */
      border-color: rgba(255, 255, 255, 0.14) !important;
      color: #d4b48c !important;
    }

    /* #TOC:css-corpus-aramaic-text — teinte du mot affiché, cohérente avec le code
       couleur du commutateur/liseré (bleu = hébreu, doré/brun = araméen).
       .hebrew-text est la classe partagée par tous les affichages du mot : révision,
       quiz, focus... un seul point de réglage par corpus. */
    .hebrew-text {
      color: #0d1b3f !important;
      /* bleu nuit (hébreu, défaut) */
    }

    body.dark-mode .hebrew-text {
      color: #a8bfe8 !important;
    }

    body.corpus-aramaic .hebrew-text {
      color: #3a2415 !important;
      /* brun très foncé (araméen) */
    }

    body.dark-mode.corpus-aramaic .hebrew-text {
      color: #d4b48c !important;
    }

    /* #TOC:css-corpus-aramaic-border — liseré discret signalant le corpus araméen actif
       Même technique de centrage que .app-container/.bottom-bar (max-width:420px +
       margin:0 auto) : en mode navigateur (fenêtre large), le liseré épouse la colonne
       de l'application plutôt que les bords de la fenêtre. */
    body.corpus-aramaic::after {
      content: "";
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 420px;
      margin: 0 auto;
      /* Pas de trait de bordure : seulement une ombre intérieure. Deux couches —
         un liseré diffus plus foncé au bord externe, puis un fondu doux vers l'intérieur */
      box-shadow:
        inset 0 0 5px 0 #9c7015,
        inset 0 0 18px 1px #c8952e;
      pointer-events: none;
      z-index: 500;
    }

    body.dark-mode.corpus-aramaic::after {
      box-shadow:
        inset 0 0 5px 0 #b8985a,
        inset 0 0 18px 1px #d4b870;
    }



    /* ==========================================================================
   NETTOYAGE ESPACES QUIZ QUAND NON ACTIFS
   ========================================================================== */

    /* Quand quizSetup et quizContainer sont cachés, on supprime TOUT espace qu'ils pourraient prendre */
    #quizSetup[style*="display: none"],
    #quizContainer[style*="display: none"] {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      visibility: hidden !important;
      /* sécurité supplémentaire */
    }

    /* Supprime aussi l'espace du <br /> juste avant la zone de recherche quand quiz est inactif */
    .quiz-inactive+br,
    #quizContainer+br {
      display: none !important;
    }

    /* Optionnel : on force un collage plus agressif de la zone de recherche quand quiz est caché */
    .options {
      margin-top: -10px;
      transition: margin-top 0.3s ease;
    }


    /* ==========================================================================
   CORRECTION ESPACEMENT BOUTONS – VERSION 2026-02
   ========================================================================== */

    /* Adaptation petits écrans (très important pour Google Play) */
    @media (max-width: 420px) {


      #knownBtn,
      #littleBtn,
      #unknownBtn,
      #knownHelpBtn,
      #littleHelpBtn,
      #unknownHelpBtn,
      #knownHelpBtn2,
      #littleHelpBtn2,
      #unknownHelpBtn2 {
        padding: 12px 24px !important;
        /* encore plus sur petit écran */
        flex: 1 1 45%;
        /* permet un meilleur alignement */
      }


      #littleBtn {
        margin: 20px 35px !important;
      }

      #knownBtn,
      #unknownBtn {
        margin: 20px 0px !important;
      }

      #revealBtn,
      #illustrationBtn,
      #hintBtn,
      #exampleBtn,
      #paradigmBtn,
      #paradigmHelpBtn3 {
        padding: 10px 12px !important;
        font-size: .95em;
        margin: 6px 6px !important;
        flex: 0 0 auto;
      }

      .nav-left,
      .nav-right {
        gap: 0px !important;
      }

      .app-container {
        padding: 20px 12px 140px 12px !important;
        /* plus d'air global */
      }
    }

    /* ==========================================================================
   MASQUAGE EN MODE RÉVISION INTELLIGENTE
   ========================================================================== */

    .smart-review-active #knowledgeQuestion,
    .smart-review-active #knownBtn,
    .smart-review-active #littleBtn,
    .smart-review-active #unknownBtn,
    .smart-review-active #undoBtn {
      display: none !important;
    }

    /* ==========================================================================
   BOUTON BASCULE MODE SOMBRE
   ========================================================================== */

    #darkModeToggle {
      position: fixed;
      bottom: 80px;
      right: calc(50% - 210px + 12px);
      z-index: 950;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(200, 180, 140, 0.5);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      min-width: 0;
      min-height: 0;
      transition: background 0.3s, box-shadow 0.3s;
    }

    @media (max-width: 444px) {
      #darkModeToggle {
        right: 12px;
      }
    }

    #darkModeToggle:hover {
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    }

    /* ==========================================================================
   MODE SOMBRE — VARIABLES & OVERRIDES
   ========================================================================== */

    /* Toutes les couleurs mode clair exprimées en variables */
    :root {
      --bg-main: #fff1d2;
      --bg-gradient-start: #fff1d2;
      --bg-gradient-end: #f8e8c4;
      --bg-overlay: #f8e8c4;
      --bg-walkthrough: rgba(255, 255, 255);
      --bg-card: rgba(255, 255, 255, 0.62);
      --bg-settings: #fff1d2;
      --bg-footer: #fff1d2;
      --bg-bottom-bar: #fff1d2;
      --bg-tabs-bar: rgb(238, 238, 238);
      --bg-tab-inactive: #ffffff;
      --bg-overlay-footer: #fff1d2;
      --bg-undo-btn: #ffffff;
      --bg-undo-btn-hover: #f8f9fa;
      --color-primary: #0d2465;
      --color-primary-dark: #071f60;
      --color-text: #1a1a1a;
      --color-muted: #555;
      --color-muted2: #666;
      --color-muted3: #777;
      --color-muted4: #999;
      --color-link: #1e40af;
      --color-translit: #6b7280;
      --color-progress: #858a9b81;
      --color-nav-icon: #0d2465;
      --color-nav-icon-disabled: #9ca3af;
      --color-tab-inactive: #666;
      --color-subtitleLabel: #0d2465;
      --color-title-style: #0d2465;
      --color-filter-info: #1d4ed8;
      --color-no-words: #dc2626;
      --color-strong: #0d2465;
      --color-h1: #0d2465;
      --color-knowledge-q: #371f27;
      --color-help-strong: #0d2465;
      --color-status-line: #555;
      --color-top-nav: #555;
      --color-top-nav-active: #071f60;
      --color-scrollbar: #ccc;
      --color-border-bottom-bar: rgba(200, 180, 140, 0.6);
      --color-border-footer: #d1c7a9;
      --color-settings-btn: #061745;
      --color-audio-icon: #4e5566;
      --color-audio-icon-active: #0d2465;
      --color-toggle-hover: #28376881;
      --color-toggle-normal: #858a9b81;
      --select-focus-border: #0d2465;
      --select-focus-shadow: rgba(13, 36, 101, 0.2);
      --badge-bg: #ffffff;
      --badge-color: black;
    }

    /* ---- PALETTE SOMBRE ---- */
    /* #TOC:css-dark-mode-body */
    body.dark-mode {
      --bg-main: #1a1612;
      --bg-gradient-start: #1a1612;
      --bg-gradient-end: #211e18;
      --bg-overlay: #211e18;
      --bg-walkthrough: rgba(50, 45, 35);
      --bg-card: rgba(50, 45, 35, 0.85);
      --bg-settings: #1a1612;
      --bg-footer: #1a1612;
      --bg-bottom-bar: #1a1612;
      --bg-tabs-bar: #2a2620;
      --bg-tab-inactive: #2e2a22;
      --bg-overlay-footer: #2e2a26;
      --bg-undo-btn: #2e2a22;
      --bg-undo-btn-hover: #3a3628;
      --color-primary: #c8a85e;
      --color-primary-dark: #d4b870;
      --color-text: #e8dfc8;
      --color-muted: #b0a888;
      --color-muted2: #9a9278;
      --color-muted3: #8a8268;
      --color-muted4: #7a7260;
      --color-link: #7fb3e8;
      --color-translit: #a0a890;
      --color-progress: rgba(200, 168, 94, 0.5);
      --color-nav-icon: #c8a85e;
      --color-nav-icon-disabled: #5a5248;
      --color-tab-inactive: #9a9278;
      --color-subtitleLabel: #c8a85e;
      --color-title-style: #c8a85e;
      --color-filter-info: #7fb3e8;
      --color-no-words: #f08080;
      --color-strong: #c8a85e;
      --color-h1: #c8a85e;
      --color-knowledge-q: #d8c8a8;
      --color-help-strong: #c8a85e;
      --color-status-line: #b0a888;
      --color-top-nav: #b0a888;
      --color-top-nav-active: #d4b870;
      --color-scrollbar: #4a4638;
      --color-border-bottom-bar: rgba(100, 90, 60, 0.6);
      --color-border-footer: #4a4638;
      --color-settings-btn: #e8dfc8;
      --color-audio-icon: #9a9278;
      --color-audio-icon-active: #c8a85e;
      --color-toggle-hover: rgba(200, 168, 94, 0.5);
      --color-toggle-normal: rgba(160, 136, 72, 0.5);
      --select-focus-border: #c8a85e;
      --select-focus-shadow: rgba(200, 168, 94, 0.25);
      --badge-bg: #3a3628;
      --badge-color: #e8dfc8;
    }

    /* ---- APPLICATION DES VARIABLES ---- */

    body {
      background: var(--bg-main);
      color: var(--color-text);
    }

    body::before {
      background: var(--bg-overlay);
    }

    .app-container {
      background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    }

    /* Boutons génériques */
    button {
      background: var(--bg-card);
      color: var(--color-text);
    }

    /* Bottom bar */
    .bottom-bar {
      background: var(--bg-bottom-bar);
      border-top-color: var(--color-border-bottom-bar);
    }

    .bottom-bar .tab {
      color: var(--color-tab-inactive);
    }

    .bottom-bar .tab.active {
      color: var(--color-top-nav-active);
      box-shadow: none;
    }

    .bottom-bar .tab.active .tab-icon {
      stroke: var(--color-top-nav-active);
      fill: var(--color-top-nav-active);
    }

    .badge {
      background: var(--badge-bg);
      color: var(--badge-color);
    }

    /* Typographie */
    h1 {
      color: var(--color-h1);
    }

    strong {
      color: var(--color-strong) !important;
    }

    .translation {
      color: var(--color-link);
    }

    .translit {
      color: var(--color-translit);
    }

    .translat {
      color: var(--color-link);
    }

    #translation {
      color: var(--color-progress);
    }

    #knowledgeQuestion,
    #navCategoryLabel {
      color: var(--color-knowledge-q) !important;
    }

    #helpText strong {
      color: var(--color-help-strong) !important;
    }

    .title-style {
      color: var(--color-title-style) !important;
    }

    .subtitleLabel {
      color: var(--color-subtitleLabel) !important;
    }

    body.dark-mode .optSectionTitle {
      color: #7aaedd;
      border-bottom-color: #4a4030;
    }

    .filter-info {
      color: var(--color-filter-info);
    }

    .no-words {
      color: var(--color-no-words);
    }

    .status-line {
      color: var(--color-status-line);
    }

    .status-container>.status-line:not(:empty)~.status-line:not(:empty)::before {
      color: var(--color-muted4);
    }

    /* Top nav */
    .top-nav-bar {
      color: var(--color-top-nav);
    }

    .nav-btn.icon-btn svg {
      fill: var(--color-nav-icon) !important;
    }

    .nav-btn.icon-btn.disabled svg,
    .nav-btn.icon-btn:disabled svg {
      fill: var(--color-nav-icon-disabled) !important;
    }

    /* Icons audio */
    #playAudioBtn svg.icon use {
      stroke: var(--color-audio-icon);
    }

    #playAudioBtn.auto-play-active svg.icon use {
      stroke: var(--color-audio-icon-active);
    }

    /* Icons favorite */
    #toggleFavoriteBtn svg {
      stroke: var(--color-audio-icon) !important;
    }

    /* Bouton undo */
    #undoBtn {
      background: var(--bg-undo-btn) !important;
      color: var(--color-primary) !important;
    }

    /* Boutons settings */
    button[onclick="openSettingsOverlay(0)"],
    #settingsBtn,
    button[onclick="openSettingsOverlay(2)"] {
      color: var(--color-top-nav-active) !important;
    }

    #resetFiltersBtn {
      background: var(--bg-card) !important;
      color: var(--color-top-nav-active) !important;
    }

    /* Transparent white buttons */
    .transparent-white-btn {
      background: var(--bg-card) !important;
      border-color: rgba(255, 255, 255, 0.12);
    }

    .progressBtn {
      background: var(--bg-card) !important;
    }

    /* Selects */
    select:focus {
      border-color: var(--select-focus-border);
      box-shadow: 0 0 0 3px var(--select-focus-shadow);
    }

    /* Active filter highlight on filter selects */
    #settingsMenu select.active-filter {
      border-color: #4a7fb5 !important;
      box-shadow: 0 0 0 2px rgba(74, 127, 181, 0.25);
    }

    body.dark-mode #settingsMenu select.active-filter {
      border-color: #7fb3e8 !important;
      box-shadow: 0 0 0 2px rgba(127, 179, 232, 0.2);
    }

    /* Scrollbar */
    #commonOverlay .overlay-inner::-webkit-scrollbar-thumb {
      background: var(--color-scrollbar);
    }

    /* Question de la révision intelligente*/
    #smartKnowledgeQuestion {
      color: var(--color-knowledge-q) !important;
    }

    /* Overlays settings */
    #settingsOverlay .overlay-content {
      background: var(--bg-settings);
    }

    #settingsOverlay .overlay-content>div:nth-child(1) {
      background: var(--bg-tabs-bar);
    }

    #settingsOverlay .overlay-content>div:nth-child(2) {
      background: var(--bg-settings);
    }

    #settingsOverlay .tabBtn {
      background: var(--bg-tab-inactive);
      color: var(--color-text);
    }

    #settingsOverlay .tabBtn.active {
      background: var(--bg-settings) !important;
      color: var(--color-primary);
    }

    #settingsOverlay .tabBtn:hover:not(.active) {
      background: var(--bg-tab-inactive);
    }

    #settingsOverlay .tabContent {
      background: var(--bg-settings);
      color: var(--color-text);
    }

    #settingsOverlay .overlay-footer {
      background: var(--bg-overlay-footer);
    }

    #commonOverlay .overlay-footer {
      background: var(--bg-overlay-footer);
    }

    /* Footer fixe */
    .footer {
      background: var(--bg-footer);
      border-top-color: var(--color-border-footer);
    }

    #hebrewResults,
    #translationResults,
    #hebrewDirectResults,
    #sameRootResults,
    #homographResults,
    #confusableResults,
    #searchHebrewInput,
    #searchTranslationInput,
    #searchHebrewDirectInput {
      background: var(--bg-card);
      color: var(--color-text);
    }

    body.dark-mode .heb-key {
      background: #3a3528;
      color: var(--color-text);
      border-color: #5a5040;
    }

    body.dark-mode .heb-key {
      background: var(--bg-card) !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
      color: var(--color-nav-icon) !important;
    }

    body.dark-mode .heb-key-wide {
      border-color: rgba(255, 255, 255, 0.5) !important;
    }

    body.dark-mode #translationResults div,
    body.dark-mode #hebrewResults div,
    body.dark-mode #hebrewDirectResults div,
    body.dark-mode #sameRootResults div,
    body.dark-mode #homographResults div,
    body.dark-mode #confusableResults div {
      background: #2a2520 !important;
      color: var(--color-text) !important;
    }

    body.dark-mode #translationResults div[style*="border-left:4px solid #5eaee8"],
    body.dark-mode #hebrewResults div[style*="border-left:4px solid #5eaee8"],
    body.dark-mode #hebrewDirectResults div[style*="border-left:4px solid #5eaee8"],
    body.dark-mode #sameRootResults div[style*="border-left:4px solid #5eaee8"],
    body.dark-mode #homographResults div[style*="border-left:4px solid #5eaee8"],
    body.dark-mode #confusableResults div[style*="border-left:4px solid #5eaee8"] {
      background: #1e2535 !important;
    }

    body.dark-mode #sameRootBtn {
      background: rgba(60, 100, 80, 0.35) !important;
      border-color: #4a8a65 !important;
      color: #7ecfa0 !important;
    }

    /* #TOC:css-homograph-btn-dark — même besoin de !important que #corpusEquivBtn :
       l'emporter sur le fond éclairci au survol (onmouseover inline dans le HTML) */
    body.dark-mode #homographBtn {
      background: rgba(120, 95, 40, 0.35) !important;
      border-color: #b08a3c !important;
      color: #e6c07a !important;
    }

    /* #TOC:css-corpus-equiv-btn-dark — !important nécessaire pour l'emporter
       sur le fond éclairci au survol (onmouseover inline dans le HTML) */
    body.dark-mode #corpusEquivBtn {
      background: rgba(70, 80, 140, 0.38) !important;
      border-color: #7f8fd0 !important;
      color: #c3cbf5 !important;
    }

    /* #TOC:css-confusable-btn-dark — même besoin de !important que #homographBtn/
       #corpusEquivBtn : l'emporter sur le fond éclairci au survol (onmouseover
       inline dans le HTML). Texte corail clair : le brun foncé du mode clair
       (#7a1e1e) était illisible sur le fond assombri. */
    body.dark-mode #confusableBtn {
      background: rgba(140, 50, 50, 0.35) !important;
      border-color: #c97a7a !important;
      color: #f0b0b0 !important;
    }

    #corpusEquivBtn.disabled-equiv-btn {
      background: #fff2f5 !important;
      border-color: #fecdd3 !important;
      color: #374151 !important;
      cursor: default !important;
      pointer-events: none !important;
    }

    body.dark-mode #corpusEquivBtn.disabled-equiv-btn {
      background: rgba(159, 18, 57, 0.22) !important;
      border-color: rgba(244, 114, 182, 0.35) !important;
      color: #d1d5db !important;
    }

    body.dark-mode #exampleClickHintDismissBtn {
      background: rgba(60, 100, 80, 0.35) !important;
      border-color: #4a8a65 !important;
      color: #7ecfa0 !important;
    }

    body.dark-mode #toggleHebKeyboard,
    body.dark-mode #translitHelpBtn {
      background: var(--bg-card) !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
      color: var(--color-nav-icon) !important;
    }

    body.dark-mode #translitHelpPopup {
      background: #2a2520;
      border-color: #5a5040;
      color: var(--color-text);
    }

    body.dark-mode #translitHelpPopup thead tr {
      border-bottom-color: #5a5040;
    }

    /* Inputs & selects */
    body.dark-mode input[type="text"],
    body.dark-mode input[type="number"],
    body.dark-mode input[type="email"],
    body.dark-mode select,
    body.dark-mode textarea {
      background: #2e2a22;
      color: var(--color-text);
      border-color: #4a4638;
    }

    body.dark-mode input[type="radio"],
    body.dark-mode input[type="checkbox"] {
      accent-color: var(--color-primary);
    }

    /* Options de filtre colorées (restent lisibles en sombre) */
    body.dark-mode option[value="unknown_only"] {
      background-color: #7a2020;
      color: #ffe0e0;
    }

    body.dark-mode option[value="not_known"] {
      background-color: #6b4010;
      color: #ffe8c8;
    }

    body.dark-mode option[value="little_only"] {
      background-color: #605010;
      color: #fff5c0;
    }

    body.dark-mode option[value="known_only"] {
      background-color: #1a5c30;
      color: #c0ffd8;
    }

    body.dark-mode option[value="all_words"] {
      background-color: #2e2a22;
      color: #e8dfc8;
    }

    /* Couleurs sélect catégorie */
    body.dark-mode #categorySelect.unknown {
      background-color: #7a2020;
      color: #ffe0e0;
    }

    body.dark-mode #categorySelect.little {
      background-color: #605010;
      color: #fff5c0;
    }

    body.dark-mode #categorySelect.not-known {
      background-color: #6b4010;
      color: #ffe8c8;
    }

    body.dark-mode #categorySelect.known {
      background-color: #1a5c30;
      color: #c0ffd8;
    }

    body.dark-mode #categorySelect.all {
      background-color: #2e2a22;
      color: #e8dfc8;
    }

    /* Strong button container (concordance Strongs) */
    body.dark-mode #strongButtonContainer button {
      background: #2a2060 !important;
      color: #c4b5fd !important;
      border-color: #4a3a8a !important;
    }

    /* Links */
    body.dark-mode a {
      color: var(--color-link);
    }


    /* Bouton bascule lui-même en mode sombre */
    body.dark-mode #darkModeToggle {
      background: rgba(40, 36, 26, 0.9);
      border-color: rgba(100, 90, 60, 0.5);
      color: #e8dfc8;
    }

    /* Texte général dans les divs inline-styled qui utilisent du noir */
    body.dark-mode #exampleTranslation {
      color: #b0a888 !important;
    }

    body.dark-mode #exampleText {
      color: var(--color-text) !important;
      background: var(--bg-card) !important;
    }

    body.dark-mode #exampleHebrew {
      color: var(--color-text) !important;
    }

    body.dark-mode #hintText {
      color: var(--color-text) !important;
    }

    body.dark-mode #progressiveHint {
      color: var(--color-text) !important;
    }

    /* Spécifique aux overlays inline-colored dans le HTML */
    body.dark-mode [style*="color: #1a1a1a"] {
      color: var(--color-text) !important;
    }

    body.dark-mode [style*="color:#1a1a1a"] {
      color: var(--color-text) !important;
    }

    body.dark-mode [style*="color: #444"] {
      color: #b0a888 !important;
    }

    body.dark-mode [style*="color:#444"] {
      color: #b0a888 !important;
    }

    body.dark-mode [style*="color: #0d2465"] {
      color: var(--color-primary) !important;
    }

    body.dark-mode [style*="color:#0d2465"] {
      color: var(--color-primary) !important;
    }

    body.dark-mode [style*="color: #1e40af"] {
      color: var(--color-link) !important;
    }

    body.dark-mode [style*="color:#1e40af"] {
      color: var(--color-link) !important;
    }

    body.dark-mode [style*="color: #dc2626"] {
      color: #f08080 !important;
    }

    body.dark-mode [style*="color:#dc2626"] {
      color: #f08080 !important;
    }

    body.dark-mode [style*="background-color: #ffffff"],
    body.dark-mode [style*="background-color:#ffffff"],
    body.dark-mode [style*="background: white"],
    body.dark-mode [style*="background:white"] {
      background-color: var(--bg-card) !important;
    }

    body.dark-mode [style*="background:#f0e6ff"] {
      background: #2a1a40 !important;
    }

    body.dark-mode [style*="background: #f0e6ff"] {
      background: #2a1a40 !important;
    }

    /* Le quiz : fond des options inline */
    body.dark-mode #quizOptions button {
      background: var(--bg-card) !important;
      color: var(--color-text) !important;
    }

    /* Barres de progression (bg gris clair) */
    body.dark-mode [style*="background:#e2e8f0"],
    body.dark-mode [style*="background: #e2e8f0"] {
      background: #3a3628 !important;
    }

    /* Encadrés statistiques colorés (bleu/vert/jaune) → on assombrit */
    body.dark-mode [style*="background:#dbeafe"],
    body.dark-mode [style*="background: #dbeafe"] {
      background: #1a2a3a !important;
      color: var(--color-text) !important;
    }

    body.dark-mode [style*="background:#f0fdf4"],
    body.dark-mode [style*="background: #f0fdf4"] {
      background: #0f2a1a !important;
      color: var(--color-text) !important;
    }

    body.dark-mode [style*="background:#fefce8"],
    body.dark-mode [style*="background: #fefce8"] {
      background: #2a2510 !important;
      color: var(--color-text) !important;
    }

    /* Input de recherche fond crème → fond sombre */
    body.dark-mode [style*="background:#fffbe6"],
    body.dark-mode [style*="background: #fffbe6"] {
      background: #2e2a1a !important;
      color: var(--color-text) !important;
    }

    /* Résultats de recherche fond blanc → fond sombre */
    body.dark-mode [style*="background: #fff;"],
    body.dark-mode [style*="background:#fff;"] {
      background: #2a2620 !important;
      color: var(--color-text) !important;
    }

    /* Items liste concordance #fdf7ed */
    body.dark-mode [style*="background:#fdf7ed"],
    body.dark-mode [style*="background: #fdf7ed"] {
      background: #2a2010 !important;
      color: var(--color-text) !important;
    }

    /* Overlay commun (commonOverlay) fond beige */
    body.dark-mode [style*="background:#fff1d2"],
    body.dark-mode [style*="background: #fff1d2"] {
      background: var(--bg-overlay-footer) !important;
    }

    /* Bouton envoi formulaire bleu marine → reste visible */
    body.dark-mode [style*="background:#0d2465"] {
      background: var(--color-primary) !important;
      color: #1a1612 !important;
    }

    /* Overlay de la modal commune (si fond inline) */
    body.dark-mode #commonOverlay>div,
    body.dark-mode .overlay-inner {
      background: var(--bg-settings) !important;
      color: var(--color-text) !important;
    }



    /* Titre et contenu de l'overlay commun */
    body.dark-mode #commonOverlayTitle {
      color: var(--color-primary) !important;
    }

    body.dark-mode #commonOverlayContent {
      color: var(--color-text) !important;
    }

    body.dark-mode .tip-next-link {
      color: var(--color-primary) !important;
    }

    .tip-next-link {
      color: var(--color-primary);
    }

    body.dark-mode #commonOverlay {
      background: rgba(0, 0, 0, 0.433) !important;
    }

    body.dark-mode #commonOverlay>div {
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 80px rgba(0, 0, 0, 0.3) !important;
      background: var(--bg-overlay-footer) !important;
    }

    /* Couleur du texte dans les encadrés stats */
    body.dark-mode [style*="color: #020c1a"],
    body.dark-mode [style*="color:#020c1a"] {
      color: #1a1612 !important;
    }

    /* images des thèmes */
    body.dark-mode #themeImage,
    body.dark-mode #wordIllustration {
      filter: invert(1) sepia(1) brightness(0.95);
    }

    /* Couleur des boutons spéciaux */
    body.dark-mode #knownBtn,
    body.dark-mode #littleBtn,
    body.dark-mode #unknownBtn,
    body.dark-mode #revealBtn,
    body.dark-mode #illustrationBtn,
    body.dark-mode #hintBtn,
    body.dark-mode #exampleBtn,
    body.dark-mode #paradigmBtn,
    body.dark-mode #knownHelpBtn,
    body.dark-mode #littleHelpBtn,
    body.dark-mode #unknownHelpBtn,
    body.dark-mode #revealHelpBtn,
    body.dark-mode #illustrationHelpBtn,
    body.dark-mode #hintHelpBtn,
    body.dark-mode #exampleHelpBtn,
    body.dark-mode #paradigmHelpBtn2,
    body.dark-mode #knownHelpBtn2,
    body.dark-mode #littleHelpBtn2,
    body.dark-mode #unknownHelpBtn2,
    body.dark-mode #revealHelpBtn2,
    body.dark-mode #illustrationHelpBtn2,
    body.dark-mode #hintHelpBtn2,
    body.dark-mode #exampleHelpBtn2,
    body.dark-mode #paradigmHelpBtn3,
    body.dark-mode #paradigmQuizBtn,
    body.dark-mode #levelProgressBar,
    body.dark-mode #closeSettingsBtn,
    body.dark-mode #knowledgeQuestion,
    body.dark-mode #srsButtonsContainer,
    body.dark-mode #nextLevelBtn,
    body.dark-mode #launchQuizBtn,
    body.dark-mode #nextQuizBtn,
    body.dark-mode #launchVerbQuizBtn,
    body.dark-mode .verbTypeBtn:not(.active),
    body.dark-mode .binyanBtn:not(.active) {
      filter: brightness(0.9) contrast(1.3) saturate(0.9);
    }

    body.dark-mode .verbTypeBtn,
    body.dark-mode .binyanBtn,
    body.dark-mode .parsingBtn {
      border-color: rgba(200, 168, 94, 0.5) !important;
    }

    body.dark-mode .verbTypeBtn.active,
    body.dark-mode .binyanBtn.active {
      background: rgba(200, 168, 94, 0.8) !important;
      color: #1a1612 !important;
      border-color: rgba(200, 168, 94, 0.9) !important;
    }

    body.dark-mode .parsingBtn.selected {
      background: rgba(200, 168, 94, 0.8) !important;
      color: #1a1612 !important;
      border-color: rgba(200, 168, 94, 0.9) !important;
    }

    body.dark-mode #currentAnswer {
      background: rgba(50, 45, 35, 0.85);
      color: var(--color-text, #e8d5a3);
    }

    body.dark-mode #currentAnswer.has-selection {
      background: rgba(200, 168, 94, 0.1);
      border-color: rgba(200, 168, 94, 0.3);
    }

    body.dark-mode #currentAnswer.correct {
      background: rgba(88, 232, 138, 0.15);
      border-color: rgba(88, 232, 138, 0.4);
    }

    body.dark-mode #currentAnswer.incorrect {
      background: rgba(240, 128, 128, 0.15);
      border-color: rgba(240, 128, 128, 0.4);
    }

    /* ========== WALKTHROUGH ========== */
    #walkthroughOverlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(10, 20, 60, 0.55);
      backdrop-filter: blur(3px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    #walkthroughOverlay.wt-hidden {
      display: none;
    }

    .wt-modal {
      background: var(--bg-walkthrough) !important;
      border-radius: 18px;
      box-shadow: 0 8px 32px rgba(13, 36, 101, 0.18);
      width: 100%;
      max-width: 360px;
      max-height: 90vh;
      max-height: 90dvh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .wt-header {
      background: #071540;
      padding: 12px 16px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .wt-close {
      background: #e11d48;
      color: white;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      padding: 0;
      font-weight: bold;
      margin-left: auto;
    }

    .wt-badge {
      background: rgba(255, 255, 255, 0.18);
      color: white;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 20px;
      white-space: nowrap;
      font-family: monospace;
    }

    .wt-header h2 {
      color: white;
      font-size: 14px;
      font-weight: 600;
      margin: 0;
      flex: 1;
    }

    .wt-body {
      padding: 14px 16px 10px;
      overflow-y: auto;
      flex: 1;
    }

    .wt-illustration {
      background: #FFF1D2;
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 12px;
      min-height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid #f0e0a8;
    }

    .wt-text {
      font-size: 13px;
      line-height: 1.65;
      color: var(--color-text) !important;
      text-align: left;
    }

    .wt-text strong {
      color: #071540;
    }

    .wt-footer {
      padding: 10px 16px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-top: 1px solid #f0f0f0;
      gap: 8px;
    }

    .wt-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    /* Sur la dernière page, le bouton « Voir l'aide » passe sur sa propre ligne
       (via .wt-footer en colonne) pour ne jamais déborder en affichage étroit */
    #wtHelpLink {
      margin: 0;
    }

    /* #TOC:css-share-sheet — Feuille de partage (réseaux sociaux + copier/partage natif) */
    #shareSheetOverlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(10, 20, 60, 0.55);
      backdrop-filter: blur(3px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    #shareSheetOverlay.wt-hidden {
      display: none;
    }

    .share-sheet {
      background: var(--bg-walkthrough) !important;
      border-radius: 18px;
      box-shadow: 0 8px 32px rgba(13, 36, 101, 0.18);
      width: 100%;
      max-width: 340px;
      overflow: hidden;
    }

    .share-sheet-head {
      background: #071540;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .share-sheet-head h2 {
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      margin: 0;
      flex: 1;
    }

    .share-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px 8px;
      padding: 18px 16px 6px;
    }

    .share-net {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      color: var(--color-text);
      font-size: 11px;
      font-weight: 600;
    }

    .share-ic {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--c);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .share-ic svg {
      width: 24px;
      height: 24px;
    }

    .share-row-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: calc(100% - 32px);
      margin: 0 16px 12px;
      padding: 10px;
      border: none;
      border-radius: 10px;
      background: rgba(7, 21, 64, 0.06);
      color: var(--color-text);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .share-row-btn:first-of-type {
      margin-top: 6px;
    }

    .wt-dots {
      display: flex;
      gap: 4px;
    }

    .wt-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #e5e7eb;
      cursor: pointer;
      transition: all 0.2s;
    }

    .wt-dot.active {
      background: #071540;
      width: 14px;
      border-radius: 3px;
    }

    .wt-dot.done {
      background: #071540;
    }

    .wt-btn {
      background: #071540;
      color: white;
      border: none;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      cursor: pointer;
    }

    .wt-btn.prev {
      background: #071540;
      color: white;
    }

    .wt-btn.finish {
      background: #0e692f;
    }

    .heb-key {
      flex: none;
      height: 34px;
      font-family: 'SBL Hebrew', serif;
      font-size: 1.8em;
      margin: 0;
      padding: 0;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.92);
      background: rgba(255, 255, 255, 0.62);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      color: #0d2465;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .heb-key:active {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transform: translateY(1px);
    }

    .heb-key[aria-pressed="true"] {
      border: 2px solid var(--color-primary);
    }

    /* Touches fonctionnelles (⌫ et ✕) : bordure marquée pour les distinguer des lettres.
       Largeur maintenue à 1px : les touches sont en content-box et leurs dimensions
       sont calculées en JS (layoutHebKeyboard), une bordure plus épaisse décalerait la grille. */
    .heb-key-wide {
      font-size: 1em;
      border-color: rgba(13, 36, 101, 0.5);
    }

    /* #TOC:css-office — Liturgie des heures (session O3, 2026-08-06).
       La barre d'heures et la note de premières Vêpres vivent HORS de
       .verses-text-area, qui est en RTL et à grande taille : direction et taille de
       police sont donc fixées explicitement ici, même principe défensif que pour
       .verses-grec-section. */
    .office-barre {
      display: flex;
      justify-content: center;
      gap: 6px;
      direction: ltr;
      margin: 0 0 14px;
    }

    .office-heure-btn {
      font-family: 'Inter', sans-serif;
      flex: 1 1 0;
      max-width: 140px;
      padding: 7px 10px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(160deg, #8aabdf, #597cb7);
      color: #fff;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
      transition: filter 0.15s;
      opacity: 0.62;
    }

    .office-heure-btn:hover {
      filter: brightness(1.06);
    }

    /* État actif par aria-pressed, jamais par une écriture directe de style dans le
       JS : c'est la convention du projet pour tous les boutons d'action. */
    .office-heure-btn[aria-pressed="true"] {
      background: linear-gradient(160deg, #99baee, #688bc6);
      opacity: 1;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }

    .office-retour-jour {
      direction: ltr;
      text-align: center;
      margin: -6px 0 12px;
    }

    .office-aujourdhui-btn {
      font-family: 'Inter', sans-serif;
      padding: 4px 14px;
      border: 1.5px solid #4a7fb5;
      border-radius: 12px;
      background: transparent;
      color: #4a7fb5;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
    }

    body.dark-mode .office-aujourdhui-btn {
      border-color: #9aa5c4;
      color: #9aa5c4;
    }

    /* Nom de la célébration, sous la date. Plus discret que le titre, mais pas
       italique : c'est une donnée, pas un commentaire. */
    .office-celebration {
      font-style: normal;
      font-weight: 600;
      opacity: 0.9;
    }

    .office-sous-titre {
      font-weight: 400;
      opacity: 0.7;
    }

    /* Pourquoi un samedi soir affiche l'office du dimanche. Sans cette phrase,
       l'écran a l'air de s'être trompé de date. */
    .office-note {
      font-family: 'Inter', sans-serif;
      direction: ltr;
      text-align: left;
      font-size: 0.38em;
      font-style: italic;
      color: var(--color-text);
      opacity: 0.75;
      margin: 0 0 14px;
      padding: 8px 10px;
      border-left: 3px solid rgba(122, 174, 221, 0.55);
      background: rgba(122, 174, 221, 0.08);
      border-radius: 0 8px 8px 0;
    }

    /* Parcours par position liturgique (retour utilisateur du 2026-08-07) : réutilise
       .office-barre/.office-heure-btn pour les rangées de boutons (temps, jours,
       heures), n'ajoute que le sélecteur de semaine, propre à ce mode. */
    .office-position-picker {
      direction: ltr;
    }

    .office-position-semaine {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0 0 8px;
      font-family: 'Inter', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--color-text);
    }

    .office-position-semaine button {
      font-family: 'Inter', sans-serif;
      padding: 3px 12px;
      border: 1.5px solid #4a7fb5;
      border-radius: 10px;
      background: transparent;
      color: #4a7fb5;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
    }

    .office-position-semaine button:disabled {
      opacity: 0.35;
      cursor: default;
    }

    body.dark-mode .office-position-semaine button {
      border-color: #9aa5c4;
      color: #9aa5c4;
    }

    /* Communs de l'Office (session Cm2, 2026-08-08) : liste des Communs
       (.office-communs-liste/-item, hors de .verses-text-area comme le picker de
       position) puis, dans le détail d'un Commun, un sous-titre LTR par office réel
       (.office-communs-role-titre) — celui-là VIT dans .verses-text-area (RTL, grande
       taille) au milieu du texte biblique, d'où direction/taille fixées explicitement,
       même principe défensif que .office-note. */
    .office-communs-liste {
      direction: ltr;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 0 0 14px;
    }

    .office-communs-item {
      font-family: 'Inter', sans-serif;
      text-align: left;
      padding: 10px 14px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(160deg, #8aabdf, #597cb7);
      color: #fff;
      font-size: 0.92rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
      transition: filter 0.15s;
    }

    .office-communs-item:hover {
      filter: brightness(1.06);
    }

    .office-communs-incomplet {
      font-weight: 400;
      opacity: 0.85;
      font-size: 0.85em;
    }

    .office-communs-role-titre {
      font-family: 'Inter', sans-serif;
      direction: ltr;
      text-align: left;
      font-size: 0.42em;
      font-weight: 700;
      color: var(--color-text);
      opacity: 0.85;
      margin: 18px 0 8px;
      padding-bottom: 4px;
      border-bottom: 1.5px solid rgba(122, 174, 221, 0.4);
    }

    /* #TOC:css-modales-a11y */
    /* ==========================================================================
   ACCESSIBILITÉ DES MODALES ET MOUVEMENT RÉDUIT
   ========================================================================== */

    /* Le registre des modales (#TOC:js-modal-registry) donne le focus au PANNEAU
   du dialogue à son ouverture, pour que le lecteur d'écran annonce son rôle et
   son titre. Ce focus est programmé, jamais obtenu au clavier : le contour par
   défaut cerclerait tout le panneau sans rien apprendre à personne. Les
   éléments internes, eux, gardent le leur. */
    [role="dialog"]:focus {
      outline: none;
    }

    /* Mouvement réduit — réglage système (vertiges, migraines, troubles
   vestibulaires). Les durées ne sont pas mises à 0 mais à 0,01 ms : une
   animation de durée nulle n'émet pas d'événement `animationend`, et une
   fonctionnalité future qui en attendrait un resterait bloquée.
   Aucune animation de l'application ne signale une attente (pas de sablier
   tournant) : les couper ne fait donc rien passer pour figé. */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
      }
    }