/* --- Design tokens ---
   Couleurs de structure (surfaces/texte/bordures/chrome) centralisées ici pour ne plus les
   avoir éparpillées telles quelles dans chaque règle — condition préalable au mode sombre
   ci-dessous. Les teintes pastel par ProjectType/ReferenceCardKind (book-card-*, ref-card-*)
   et les couleurs décoratives (nœuds de la carte mentale, badges de statut, Gantt) restent
   codées en dur : elles restent lisibles telles quelles sur fond sombre et une reprise complète
   n'apporterait rien de plus pour l'effort demandé. */
:root {
    /* Laisse le navigateur adapter lui-même le chrome natif (scrollbars, ombrage par défaut des
       champs) au thème actif, en plus des tokens ci-dessous pour le reste de l'UI. */
    color-scheme: light dark;
    --mmw-bg: #f5f5f5;
    --mmw-surface: #ffffff;
    --mmw-surface-alt: #f8f9fa;
    --mmw-border: #dee2e6;
    --mmw-border-light: #e0e0e0;
    --mmw-border-faint: #eeeeee;
    --mmw-text: #2c3e50;
    --mmw-text-muted: #666666;
    --mmw-text-faint: #999999;
    --mmw-toolbar-bg: #2C3E50;
    --mmw-toolbar-text: #ffffff;
    /* Survol, sélection, couleur d'accent (onglet actif, liseré de la scène ouverte). */
    --mmw-hover-bg: #e9ecef;
    --mmw-selected-bg: #e3eefc;
    --mmw-accent: #2f80c8;
    /* Statuts d'avancement — une couleur par statut, la même partout (D-4). */
    --mmw-status-nc-bg: #e2e5e9;
    --mmw-status-nc-text: #495057;
    --mmw-status-ec-bg: #fff3cd;
    --mmw-status-ec-text: #8a6500;
    --mmw-status-t-bg: #d4edda;
    --mmw-status-t-text: #1e7e34;
    /* Bandeaux et panneaux d'information (verrou/Pomodoro, hors-ligne, erreur, mise à jour). */
    --mmw-warn-bg: #fff6ee;
    --mmw-warn-border: #f0d9c0;
    --mmw-warn-text: #7a4a12;
    --mmw-info-bg: #e8eef7;
    --mmw-info-border: #c3d2e8;
    --mmw-error-bg: #fdecea;
    --mmw-error-border: #f3c2bb;
    --mmw-error-text: #922b21;
    --mmw-success-bg: #eafaf6;
    --mmw-success-border: #b7e4d8;
    --mmw-success-text: #16A085;
    /* Étiquettes de scène / de référence. */
    --mmw-tag-bg: #eef4fe;
    --mmw-tag-text: #4a90e2;
    --mmw-tag-ref-bg: #fdf0f6;
    --mmw-tag-ref-hover-bg: #fbe1ec;
    --mmw-tag-ref-text: #e0568c;
    --mmw-mark-bg: #fff2a8;
    /* Contour du nœud sélectionné sur la carte mentale. */
    --mmw-map-selection: #2c3e50;
}

@media (prefers-color-scheme: dark) {
    :root {
        --mmw-hover-bg: #31353c;
        --mmw-selected-bg: #1f3550;
        --mmw-accent: #5dade2;
        --mmw-status-nc-bg: #3a3f46;
        --mmw-status-nc-text: #c9cdd3;
        --mmw-status-ec-bg: #4a3f12;
        --mmw-status-ec-text: #ffd866;
        --mmw-status-t-bg: #1e4029;
        --mmw-status-t-text: #7ee2a0;
        --mmw-warn-bg: #3a2c1c;
        --mmw-warn-border: #5a4026;
        --mmw-warn-text: #f0c08a;
        --mmw-info-bg: #1f2a3a;
        --mmw-info-border: #2f4560;
        --mmw-error-bg: #3d1f1c;
        --mmw-error-border: #6b302a;
        --mmw-error-text: #f5a59b;
        --mmw-success-bg: #173b33;
        --mmw-success-border: #24584c;
        --mmw-success-text: #5fd3b5;
        --mmw-tag-bg: #1f2a3a;
        --mmw-tag-text: #8fbef0;
        --mmw-tag-ref-bg: #3a1f2c;
        --mmw-tag-ref-hover-bg: #4a2838;
        --mmw-tag-ref-text: #f08bb3;
        --mmw-mark-bg: #6b5a12;
        --mmw-map-selection: #ffffff;
        --mmw-bg: #1a1d21;
        --mmw-surface: #24272c;
        --mmw-surface-alt: #2b2f35;
        --mmw-border: #3d4249;
        --mmw-border-light: #3d4249;
        --mmw-border-faint: #33373d;
        --mmw-text: #e4e6eb;
        --mmw-text-muted: #a8adb5;
        --mmw-text-faint: #82878f;
        --mmw-toolbar-bg: #14171a;
        --mmw-toolbar-text: #e4e6eb;
    }
}

/* Filet de sécurité générique pour tout champ qui ne fixe pas déjà explicitement ses propres
   couleurs (la plupart n'en avaient pas besoin en clair, s'appuyant sur le blanc/noir par défaut
   du navigateur — invisible ou peu lisible en sombre sans ça). Les règles plus spécifiques
   existantes (ex: .status-select-*, teintes pastel) restent prioritaires par spécificité CSS. */
input, textarea, select {
    background: var(--mmw-surface);
    color: var(--mmw-text);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--mmw-bg);
    color: var(--mmw-text);
    /* Garde-fou : même si un enfant refuse encore de rétrécir quelque part, la page elle-même
       ne défile jamais horizontalement — seul le cadre de la carte mentale doit le faire. */
    overflow-x: hidden;
}

.container-fluid {
    display: flex;
    flex-direction: column;
    height: 100vh; /* repli pour les navigateurs sans dvh */
    height: 100dvh; /* tient compte de la barre d'adresse mobile qui apparaît/disparaît, recalculé à chaque rotation */
}

.toolbar {
    background: var(--mmw-toolbar-bg);
    color: white;
    padding: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.toolbar h3 {
    margin: 0;
    font-size: 18px;
}

/* Le titre du livre est l'élément principal de l'en-tête (A-1) ; le nom de l'application se
   réduit à un petit logo avec infobulle. */
.title-input {
    padding: 8px 12px;
    border: 1px solid var(--mmw-border);
    border-radius: 4px;
    width: 250px;
    font-size: 16px;
    font-weight: 600;
}

.app-logo {
    font-size: 18px;
    line-height: 1;
    cursor: default;
}

.export-group {
    display: flex;
    gap: 4px;
}

.export-group .btn {
    padding: 8px 10px;
    font-size: 12px;
    text-decoration: none;
}

.export-preset-select {
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--mmw-border);
    border-radius: 4px;
}

.word-count-total {
    font-size: 13px;
    color: #cfd8e3;
    white-space: nowrap;
}

.word-count-inline {
    font-size: 11px;
    font-weight: 400;
    color: var(--mmw-text-faint);
}

.autosave-status {
    font-size: 12px;
    color: #cfd8e3;
    white-space: nowrap;
    margin-left: auto;
}

.lock-takeover-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--mmw-warn-bg);
    border-bottom: 1px solid var(--mmw-warn-border);
    font-size: 13px;
    color: var(--mmw-warn-text);
}

.lock-takeover-banner button {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: var(--mmw-warn-text);
}

.offline-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--mmw-info-bg);
    border-bottom: 1px solid var(--mmw-info-border);
    font-size: 13px;
    color: var(--mmw-text);
}

.offline-banner-error {
    background: var(--mmw-error-bg);
    border-bottom-color: var(--mmw-error-border);
    color: var(--mmw-error-text);
}

.update-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--mmw-success-bg);
    border-bottom: 1px solid var(--mmw-success-border);
    font-size: 13px;
    color: var(--mmw-success-text);
}

.update-blocked {
    color: var(--mmw-warn-text);
    font-size: 12px;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: filter 0.15s, opacity 0.15s;
}

.btn:hover {
    filter: brightness(1.08);
}

.btn:active {
    filter: brightness(0.95);
}

/* Anneau de focus clavier cohérent sur tous les contrôles interactifs — visible seulement pour
   une navigation clavier (:focus-visible), pas au clic à la souris, pour ne rien changer à
   l'usage tactile/souris existant. */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

.btn-primary { background: #3498db; color: white; }
.btn-success { background: #2ecc71; color: white; }
.btn-secondary { background: #7f8c8d; color: white; }
/* Bouton présent mais en retrait (A-3 : 💾 quand rien n'attend d'être enregistré). */
.btn-quiet {
    background: transparent;
    color: var(--mmw-toolbar-text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    opacity: 0.75;
}

.btn-disabled, .btn-disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.offline-feature-disabled {
    display: inline-block;
    font-size: 12px;
    color: var(--mmw-text-faint);
    font-style: italic;
}

/* Fond d'écran personnalisé de "Mes livres" — l'image est posée sur un calque séparé
   (opacity réglable) derrière tout le contenu, plutôt que sur .container-fluid lui-même, pour
   que le texte/les cartes restent toujours parfaitement lisibles quelle que soit la transparence
   choisie. */
.book-list-page {
    position: relative;
}

.book-list-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.book-list-content {
    position: relative;
    z-index: 1;
}

.settings-menu-anchor {
    position: relative;
    display: inline-block;
}

.settings-gear-btn {
    font-size: 16px;
}

.settings-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--mmw-surface);
    color: var(--mmw-text);
    border: 1px solid var(--mmw-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    width: 260px;
}

.settings-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.settings-menu-close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}

.background-opacity-control {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mmw-text-muted);
}

.background-opacity-control input[type="range"] {
    flex: 1;
}

.background-error {
    color: #e74c3c;
    font-size: 13px;
}

.device-name-header {
    border-top: 1px solid var(--mmw-border-faint);
    padding-top: 10px;
}

.device-name-input {
    padding: 6px 10px;
    border: 1px solid var(--mmw-border);
    border-radius: 4px;
    font-size: 13px;
}

.about-header {
    border-top: 1px solid var(--mmw-border-faint);
    padding-top: 10px;
}

.about-block {
    font-size: 12px;
    color: var(--mmw-text-muted);
}

.about-block p {
    margin: 4px 0;
}

.about-title {
    font-weight: 600;
    color: var(--mmw-text);
}

.about-version {
    font-weight: 400;
    color: var(--mmw-text-faint);
}

.about-year {
    color: var(--mmw-text-faint);
}

.book-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px;
}

.loading-state,
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 60px 20px;
    color: var(--mmw-text-faint);
    text-align: center;
}

.empty-state-icon {
    font-size: 40px;
    opacity: 0.6;
}

.loading-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--mmw-border);
    border-top-color: #4a90e2;
    animation: mmw-spin 0.8s linear infinite;
}

@keyframes mmw-spin {
    to { transform: rotate(360deg); }
}

.book-card {
    position: relative;
    background: var(--mmw-surface);
    border: 1px solid var(--mmw-border-light);
    border-radius: 8px;
    width: 180px;
    transition: box-shadow 0.15s, transform 0.15s;
    border-top: 4px solid transparent;
    overflow: hidden;
}

.book-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Une teinte pastel douce par type d'ouvrage, plus un liseré du haut plus marqué —
   reconnaissable d'un coup d'œil dans la liste sans être criard. */
.book-card-roman { background: #EEF4FE; border-top-color: #4A90E2; }
.book-card-nouvelle { background: #EAFAF6; border-top-color: #16A085; }
.book-card-poesie { background: #FDF0F6; border-top-color: #E0568C; }
.book-card-manuel { background: #FFF7EA; border-top-color: #E0902A; }
.book-card-memoire { background: #F4EFFC; border-top-color: #8E5FC2; }

.book-card-roman .book-card-type { color: #4A90E2; }
.book-card-nouvelle .book-card-type { color: #16A085; }
.book-card-poesie .book-card-type { color: #E0568C; }
.book-card-manuel .book-card-type { color: #E0902A; }
.book-card-memoire .book-card-type { color: #8E5FC2; }

.book-card-body {
    padding: 20px;
    text-align: center;
    cursor: pointer;
}

.book-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    display: flex;
    gap: 2px;
}

.book-card-rename,
.book-card-delete {
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    padding: 4px 6px;
    opacity: 0.8;
    transition: opacity 0.15s, background 0.15s;
}

.book-card-rename:hover {
    opacity: 1;
    background: var(--mmw-hover-bg);
}

.book-card-delete:hover {
    opacity: 1;
    background: var(--mmw-error-bg);
}

.book-card-rename-actions {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}

.book-card-rename-actions button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
}

.book-card-last-modified-date {
    align-self: center;
    font-size: 11px;
    color: var(--mmw-text-faint);
    white-space: nowrap;
}

.book-card-last-modified-device {
    margin-top: 2px;
    font-size: 11px;
    color: var(--mmw-text-faint);
}

.book-card-confirm {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    background: var(--mmw-surface);
    border: 1px solid var(--mmw-border-light);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.book-card-confirm button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    padding: 1px 4px;
}

.book-card-icon {
    font-size: 40px;
}

.book-card-title {
    margin-top: 10px;
    font-weight: 600;
    word-break: break-word;
}

.book-card-title .rename-input {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.book-card-type {
    margin-top: 4px;
    font-size: 11px;
    color: var(--mmw-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Statut agrégé du livre (calculé depuis ses chapitres), affiché sous le type sur chaque carte. */
.book-card-status {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.book-card-status.status-non-commence {
    background: var(--mmw-status-nc-bg);
    color: var(--mmw-status-nc-text);
}

.book-card-status.status-en-cours {
    background: var(--mmw-status-ec-bg);
    color: var(--mmw-status-ec-text);
}

.book-card-status.status-termine {
    background: var(--mmw-status-t-bg);
    color: var(--mmw-status-t-text);
}

.type-select {
    padding: 8px 12px;
    border: 1px solid var(--mmw-border);
    border-radius: 4px;
}

.main-content {
    display: flex;
    flex: 1;
    /* min-width:0 casse le comportement par défaut d'un flex-item (refuser de rétrécir sous la
       taille de son contenu) — sans ça, une carte mentale large pousse toute la page plus large
       au lieu d'être contenue et défilable dans son propre cadre. */
    min-width: 0;
    overflow: hidden;
}

.sidebar {
    /* Largeur qui suit le nom le plus long (chapitre/scène/partie), entre un plancher
       raisonnable et un plafond pour ne pas écraser l'éditeur si un nom est très long —
       au-delà, le texte repasse sur deux lignes plutôt que de casser la mise en page. */
    width: fit-content;
    min-width: 280px;
    max-width: 480px;
    flex-shrink: 0;
    background: var(--mmw-surface);
    border-right: 1px solid var(--mmw-border);
    position: relative;
    /* Pas d'overflow ici : un overflow-y sur .sidebar forcerait overflow-x à se recalculer en
       'auto' (règle CSS sur les paires overflow-x/y), ce qui rognerait le bouton de bascule
       positionné en absolu à cheval sur le bord droit (voir .sidebar-collapse-toggle). Le
       défilement réel se fait dans .sidebar-content, un enfant séparé. */
}

/* Repliée : ne garde que la place du bouton de bascule, pour rendre son espace à la carte
   mentale/éditeur/aperçu. Le contenu des onglets n'est alors pas rendu (voir Index.razor). */
.sidebar.collapsed {
    width: 22px;
    min-width: 22px;
    max-width: 22px;
}

.sidebar-content {
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    overflow-y: auto;
}

.sidebar-collapse-toggle {
    position: absolute;
    top: 10px;
    right: -14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    border-radius: 50%;
    background: #7f8c8d;
    color: white;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.sidebar-collapse-toggle .collapse-label {
    display: none;
}

.sidebar-collapse-toggle:hover {
    background: #5f6c6d;
}

.sidebar h4 {
    margin-top: 0;
    font-size: 16px;
}

/* Onglets — un seul style dans toute l'application (B-1, B-2) : inactif gris et discret,
   actif en couleur d'accent et souligné. Même rendu à gauche (.sidebar-tabs) et à droite
   (.view-switcher .view-tab). */
.sidebar-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--mmw-border);
}

.sidebar-tabs button,
.view-switcher .view-tab {
    padding: 6px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--mmw-text-muted);
    border-radius: 0;
    cursor: pointer;
}

.sidebar-tabs button {
    flex: 1;
    font-size: 12px;
}

.sidebar-tabs button.active,
.view-switcher .view-tab.active {
    color: var(--mmw-accent);
    border-bottom-color: var(--mmw-accent);
    background: transparent;
    font-weight: 600;
}

@media (hover: hover) {
    .sidebar-tabs button:not(.active):hover,
    .view-switcher .view-tab:not(.active):hover {
        color: var(--mmw-text);
    }
}

.synopsis-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 300px;
    padding: 10px;
    border: 1px solid var(--mmw-border);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

.search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--mmw-border);
    border-radius: 4px;
    margin-bottom: 10px;
}

.search-status {
    color: var(--mmw-text-faint);
    font-size: 13px;
}

.search-result {
    padding: 8px 10px;
    border: 1px solid var(--mmw-border-faint);
    border-radius: 4px;
    margin-bottom: 6px;
    cursor: pointer;
}

@media (hover: hover) {
    .search-result:hover {
        background: var(--mmw-hover-bg);
        border-color: var(--mmw-border);
    }
}

.search-result-title {
    font-weight: 600;
    font-size: 13px;
}

.search-result-snippet {
    font-size: 12px;
    color: var(--mmw-text-muted);
    margin-top: 2px;
}

.part-group {
    margin-bottom: 14px;
}

.part-group-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7f8c8d;
    border-bottom: 1px solid var(--mmw-border-light);
    padding-bottom: 4px;
    margin-bottom: 8px;
    user-select: none;
    touch-action: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.part-group-header button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
}

.add-part-btn {
    width: 100%;
    margin-bottom: 12px;
    padding: 6px;
    border: 1px dashed #bbb;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--mmw-text-muted);
}

.rename-input {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid #3498db;
    border-radius: 3px;
}

.chapter-part-select {
    font-size: 11px;
    border: 1px solid var(--mmw-border);
    border-radius: 3px;
    padding: 2px 4px;
    margin-left: 4px;
}

.reference-card {
    background: var(--mmw-surface);
    border: 1px solid var(--mmw-border-light);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

.reference-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 6px;
}

.reference-card-header button {
    padding: 2px 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
}

.reference-card-kind {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mmw-text-faint);
}

.reference-field-row {
    display: flex;
    gap: 4px;
    margin: 3px 0;
    font-size: 12px;
}

.reference-field-row input {
    flex: 1;
    min-width: 0;
    padding: 3px 5px;
    border: 1px solid var(--mmw-border);
    border-radius: 3px;
    font-size: 12px;
}

.reference-scenes {
    margin-top: 8px;
}

.reference-scenes-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.reference-scene-picker {
    width: 100%;
    font-size: 11px;
    padding: 4px 6px;
    border: 1px dashed #bbb;
    border-radius: 3px;
    background: transparent;
    color: var(--mmw-text-muted);
}

.scene-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--mmw-tag-bg);
    color: var(--mmw-tag-text);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    white-space: nowrap;
}

.scene-tag button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    color: inherit;
    opacity: 0.7;
}

.scene-tag button:hover {
    opacity: 1;
}

.scene-reference-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.scene-tag-ref {
    cursor: pointer;
    background: var(--mmw-tag-ref-bg);
    color: var(--mmw-tag-ref-text);
}

.scene-tag-ref:hover {
    background: var(--mmw-tag-ref-hover-bg);
}

.add-reference-btn {
    width: 100%;
    margin-bottom: 12px;
    padding: 6px;
    border: 1px dashed #bbb;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--mmw-text-muted);
}

/* Vue principale "Références" — galerie de cartes à jouer (une par fiche), cliquer une carte
   ouvre son détail d'édition en dessous. Remplace l'ancienne liste dans la sidebar. */
.reference-gallery {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 20px;
}

.reference-gallery-add {
    width: auto;
    display: inline-block;
    margin-bottom: 16px;
}

.reference-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.ref-playing-card {
    width: 120px;
    height: 168px;
    border-radius: 10px;
    border-top: 5px solid transparent;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s, transform 0.15s;
}

.ref-playing-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.ref-playing-card.selected {
    box-shadow: 0 0 0 2px #4a90e2, 0 4px 14px rgba(0, 0, 0, 0.12);
}

.ref-playing-card-icon {
    font-size: 32px;
    margin-top: 10px;
    margin-bottom: 8px;
}

.ref-playing-card-name {
    font-weight: 600;
    font-size: 13px;
    word-break: break-word;
}

.ref-playing-card-kind {
    margin-top: auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

/* Même teintes pastel que .book-card-* (BookList.razor) pour rester cohérent visuellement. */
.ref-card-personnage { background: #EEF4FE; border-top-color: #4A90E2; }
.ref-card-lieu { background: #EAFAF6; border-top-color: #16A085; }
.ref-card-intrigue { background: #FDF0F6; border-top-color: #E0568C; }
.ref-card-glossaire { background: #FFF7EA; border-top-color: #E0902A; }
.ref-card-source { background: #F4EFFC; border-top-color: #8E5FC2; }
.ref-card-autre { background: #F5F5F5; border-top-color: var(--mmw-text-faint); }

/* Thème sombre : les teintes pastel ci-dessus et celles de .book-card-* gardaient le texte clair
   du thème sombre — titres de livres et noms de fiches illisibles (AUDIT AU-6). On garde la
   couleur de chaque type, mais en simple reflet sur la surface sombre. */
@media (prefers-color-scheme: dark) {
    .book-card-roman, .ref-card-personnage { background: color-mix(in srgb, #4A90E2 16%, var(--mmw-surface)); }
    .book-card-nouvelle, .ref-card-lieu { background: color-mix(in srgb, #16A085 16%, var(--mmw-surface)); }
    .book-card-poesie, .ref-card-intrigue { background: color-mix(in srgb, #E0568C 16%, var(--mmw-surface)); }
    .book-card-manuel, .ref-card-glossaire { background: color-mix(in srgb, #E0902A 16%, var(--mmw-surface)); }
    .book-card-memoire, .ref-card-source { background: color-mix(in srgb, #8E5FC2 16%, var(--mmw-surface)); }
    .ref-card-autre { background: var(--mmw-surface-alt); }
}

/* Photo de fiche (Personnage/Lieu uniquement) — la carte Lieu s'élargit pour un rendu paysage
   au lieu de recadrer une photo large dans la boîte portrait par défaut. */
.ref-playing-card-photo {
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.ref-playing-card-photo.photo-portrait {
    height: 130px;
    margin-top: 4px;
}

.ref-playing-card-photo.photo-landscape {
    height: 100px;
    margin-top: 4px;
}

.ref-playing-card.has-photo.ref-card-lieu {
    width: 200px;
}

.reference-gallery-detail {
    max-width: 480px;
}

.reference-photo-section {
    margin-bottom: 10px;
}

.reference-photo-preview {
    display: block;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

.reference-photo-preview.photo-portrait {
    width: 180px;
    height: 240px;
}

.reference-photo-preview.photo-landscape {
    width: 320px;
    height: 180px;
    max-width: 100%;
}

.chapter-card {
    background: var(--mmw-surface);
    border: 1px solid var(--mmw-border-light);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    user-select: none;
    touch-action: none;
    cursor: grab;
}

.chapter-card.sidebar-dragover,
.scene-item.sidebar-dragover,
.part-group-header.sidebar-dragover {
    border-color: #3498db;
    box-shadow: inset 0 0 0 1px #3498db;
}

.chapter-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Le titre ne doit jamais se couper en plein milieu ("Chapitre" / "1" sur deux lignes) —
   quand la ligne manque de place, ce sont les contrôles (objectif, statut, partie...) qui
   passent à la ligne suivante grâce à .chapter-header en flex-wrap, pas le titre lui-même. */
.chapter-title {
    white-space: nowrap;
}

.chapter-header button {
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}

/* Objectif de mots (chapitre ou scène) — un petit champ numérique optionnel + une barre de
   progression qui n'apparaît que si un objectif est réellement défini. */
.word-goal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.word-goal-input {
    width: 64px;
    padding: 3px 6px;
    border: 1px solid var(--mmw-border);
    border-radius: 4px;
    font-size: 12px;
}

.word-goal-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: var(--mmw-border-faint);
    border-radius: 3px;
    overflow: hidden;
}

.word-goal-bar-fill {
    display: block;
    height: 100%;
    background: #2ecc71;
}

/* Statut d'avancement (chapitre ou scène) — même select natif que .chapter-part-select, coloré
   selon la valeur pour rester lisible d'un coup d'œil dans l'arborescence. */
.status-select {
    padding: 3px 6px;
    border: 1px solid var(--mmw-border);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.status-select-sm {
    font-size: 11px;
    padding: 2px 4px;
}

.status-select.status-non-commence {
    background: var(--mmw-status-nc-bg);
    color: var(--mmw-status-nc-text);
}

.status-select.status-en-cours {
    background: var(--mmw-status-ec-bg);
    color: var(--mmw-status-ec-text);
}

.status-select.status-termine {
    background: var(--mmw-status-t-bg);
    color: var(--mmw-status-t-text);
}

/* Forme/Schéma de rimes compacts pour une scène de poésie (voir Index.razor) — même ligne que
   l'objectif de mots, plutôt qu'un bandeau séparé en dessous. */
.scene-meta-inline {
    display: inline-flex;
    gap: 6px;
    margin-left: 10px;
}

.scene-meta-inline input {
    width: 120px;
    padding: 3px 6px;
    border: 1px solid var(--mmw-border);
    border-radius: 4px;
    font-size: calc(12px * var(--mmw-font-scale, 1));
}

.scenes {
    margin-left: 10px;
}

.scene-item {
    background: var(--mmw-surface-alt);
    padding: 8px;
    margin: 4px 0;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    user-select: none;
    touch-action: none;
}

.scene-title {
    white-space: nowrap;
}

/* Survol limité aux vrais pointeurs (souris, trackpad) : sur iPad, :hover restait « collé »
   après un toucher, avec un fond clair codé en dur sous le texte clair du thème sombre — c'est ce
   qui rendait la ligne illisible (constat D-1, AUDIT AU-2). */
@media (hover: hover) {
    .scene-item:hover {
        background: var(--mmw-hover-bg);
    }
}

/* Scène ouverte dans l'éditeur : repère permanent, lisible en clair comme en sombre. */
.scene-item.selected {
    background: var(--mmw-selected-bg);
    box-shadow: inset 3px 0 0 var(--mmw-accent);
    font-weight: 600;
}

.scene-item span {
    flex: 1;
    cursor: pointer;
}

.scene-item button {
    padding: 2px 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
}

.editor {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.editor-header {
    background: var(--mmw-bg);
    padding: 20px;
    border-bottom: 1px solid var(--mmw-border);
}

.editor-header-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.history-toggle-btn {
    padding: 6px 10px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}

.history-panel {
    margin-top: 10px;
    border-top: 1px solid var(--mmw-border);
    padding-top: 10px;
    max-height: 180px;
    overflow-y: auto;
}

.history-empty {
    font-size: 12px;
    color: var(--mmw-text-faint);
    margin: 0;
}

.history-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--mmw-border-faint);
}

.history-date {
    flex: 0 0 110px;
    color: var(--mmw-text-muted);
    font-weight: 600;
}

.history-preview {
    flex: 1;
    min-width: 0;
    color: var(--mmw-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-entry button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}

.editor-header h4 {
    margin: 0 0 5px 0;
    font-size: 18px;
}

.editor-breadcrumb-part {
    font-weight: 400;
    color: var(--mmw-text-muted);
    margin-right: 6px;
}

.editor-header h5 {
    margin: 0;
    font-size: 14px;
    color: var(--mmw-text-muted);
}

.markdown-editor {
    flex: 1;
    padding: 20px;
    border: none;
    font-family: 'Consolas', monospace;
    /* --mmw-font-scale : réglage utilisateur (boutons A-/A+, voir Index.razor), 1 par défaut. */
    font-size: calc(14px * var(--mmw-font-scale, 1));
    resize: none;
    outline: none;
}

.markdown-preview {
    flex: 1;
    padding: 20px 30px;
    overflow-y: auto;
    font-size: calc(15px * var(--mmw-font-scale, 1));
    line-height: 1.7;
    color: var(--mmw-text);
}

.markdown-preview h1, .markdown-preview h2, .markdown-preview h3 {
    margin-top: 1.2em;
    margin-bottom: 0.4em;
}

.markdown-preview p {
    margin: 0 0 1em 0;
}

.markdown-preview blockquote {
    margin: 0 0 1em 0;
    padding-left: 14px;
    border-left: 3px solid var(--mmw-border);
    color: var(--mmw-text-muted);
}

.markdown-preview code {
    background: var(--mmw-surface-alt);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Consolas', monospace;
    font-size: 0.9em;
}

.markdown-preview pre {
    background: var(--mmw-surface-alt);
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
}

.markdown-preview pre code {
    background: none;
    padding: 0;
}

.markdown-preview .center {
    text-align: center;
}

.markdown-preview .right {
    text-align: right;
}

.markdown-preview .left {
    text-align: left;
}

.markdown-preview .justify {
    text-align: justify;
}

.markdown-preview mark {
    background: var(--mmw-mark-bg);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.markdown-preview .footnotes {
    margin-top: 2em;
    padding-top: 0.8em;
    border-top: 1px solid var(--mmw-border);
    font-size: 0.85em;
    color: var(--mmw-text-muted);
}

.editor-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mmw-text-faint);
    font-size: 18px;
}

.view-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 20px;
    background: var(--mmw-surface-alt);
    border-bottom: 1px solid var(--mmw-border);
}

.view-switcher button {
    padding: 6px 14px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    border-radius: 4px;
    cursor: pointer;
}



.editor-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.font-scale-controls {
    display: inline-flex;
    gap: 4px;
}

.font-scale-controls button {
    padding: 6px 10px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.font-scale-controls button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* C-1 : les trois outils (son, plein écran, minuteur) poussés à droite de la ligne des onglets,
   icône + libellé court empilés — compacts, et lisibles au doigt sans infobulle. */
.view-tools {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.view-tools .tool-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 3px 6px;
    line-height: 1.1;
}

.view-tools .tool-btn .tool-icon {
    font-size: 15px;
}

.view-tools .tool-btn .tool-label {
    font-size: 10.5px;
    color: var(--mmw-text-muted);
    white-space: nowrap;
}

.view-tools .tool-btn.active .tool-label {
    color: inherit;
}

.sound-toggle-btn {
    padding: 6px 12px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    border-radius: 4px;
    cursor: pointer;
}

.focus-toggle-btn {
    padding: 6px 12px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    border-radius: 4px;
    cursor: pointer;
}

.focus-exit-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 20;
    padding: 6px 12px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    opacity: 0.85;
}

.focus-exit-btn:hover {
    opacity: 1;
}

.pomodoro-toggle-btn {
    padding: 6px 12px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    border-radius: 4px;
    cursor: pointer;
}

.pomodoro-toggle-btn.active {
    background: #e67e22;
    color: white;
    border-color: #e67e22;
}

.pomodoro-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--mmw-warn-bg);
    border-bottom: 1px solid var(--mmw-warn-border);
}

.pomodoro-phase {
    font-weight: 600;
}

.pomodoro-time {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #e67e22;
}

.pomodoro-panel button {
    padding: 6px 12px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    border-radius: 4px;
    cursor: pointer;
}

.container-fluid.focus-mode .toolbar,
.container-fluid.focus-mode .sidebar,
.container-fluid.focus-mode .view-switcher {
    display: none;
}

.container-fluid.focus-mode .editor-header,
.container-fluid.focus-mode .markdown-editor,
.container-fluid.focus-mode .markdown-preview {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    /* Ces trois éléments ont chacun leur propre padding (20px+) : sans border-box, width:100%
       ne compte que le contenu, et le padding s'ajoute par-dessus — l'élément rendu dépasse alors
       la fenêtre de 2×padding (mesuré : 848px de large pour une fenêtre de 808px). C'est ça qui
       poussait Historique/A-/A+ hors champ, malgré le flex-wrap posé sur .editor-header-row. */
    box-sizing: border-box;
}

.container-fluid.focus-mode .markdown-editor,
.container-fluid.focus-mode .markdown-preview {
    font-size: calc(20px * var(--mmw-font-scale, 1));
    line-height: 1.7;
}

.mindmap-container {
    flex: 1;
    /* Cadre de la carte : barre de zoom en surimpression, zone défilable (.mindmap-viewport),
       barre d'aide en bas. */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--mmw-surface);
    position: relative;
    outline: none;
}

/* E-1 : en « Ajuster », le SVG remplit exactement ce cadre (aucun défilement, comme avant) ; zoomé,
   il prend sa taille réelle (style posé par MindMapView.razor) et le cadre défile — à la souris
   comme au doigt. */
.mindmap-viewport {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.mindmap-zoom-toolbar {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
    display: flex;
    gap: 4px;
}

.mindmap-zoom-toolbar button {
    padding: 4px 10px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    color: var(--mmw-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.mindmap-zoom-toolbar button.active {
    border-color: var(--mmw-accent);
    color: var(--mmw-accent);
}

.mindmap-container:focus {
    box-shadow: inset 0 0 0 2px #dbe4ff;
}

/* width:100%/height:100% donnent au SVG une boîte de taille fixe (celle du conteneur) ; son
   viewBox carré (voir MindMapView.razor) est alors mis à l'échelle pour tenir entièrement dans
   cette boîte (comportement par défaut preserveAspectRatio="xMidYMid meet") — la carte entière
   reste donc toujours visible et centrée, sans ascenseur, quelle que soit sa taille interne. */
.mindmap-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mindmap-hint {
    position: sticky;
    bottom: 0;
    left: 0;
    padding: 6px 14px;
    font-size: 11px;
    color: var(--mmw-text-muted);
    /* F-2 : même fond que le reste de l'interface (était blanc codé en dur, une bande claire
       qui attirait l'œil en thème sombre plus que la carte elle-même). */
    background: var(--mmw-surface-alt);
    border-top: 1px solid var(--mmw-border-faint);
}

.mindmap-link {
    fill: none;
    stroke: #bdc3c7;
    stroke-width: 2;
}

.mindmap-node {
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.mindmap-node rect {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

.mindmap-node text {
    fill: white;
    font-size: 12px;
    font-weight: 600;
    dominant-baseline: middle;
}

/* Hiérarchie visuelle : la taille du texte suit la hauteur de chaque type de boîte (voir
   RootHeight/PartHeight/ChapterHeight/SceneHeight dans MindMapView.razor) — plus gros au centre,
   de plus en plus petit vers les feuilles, plutôt qu'une taille unique qui serait soit trop
   grande pour les scènes, soit trop petite pour la racine. */
.mindmap-node-root rect { fill: #4a90e2; }
.mindmap-node-root text { font-size: 16px; font-weight: bold; }
.mindmap-node-part rect { fill: #9b59b6; }
.mindmap-node-part text { font-size: 12.5px; }
.mindmap-node-chapter rect { fill: #50c878; }
.mindmap-node-chapter text { font-size: 12.5px; }
.mindmap-node-scene rect { fill: #f39c12; }
/* E-2 : 12 px minimum à l'écran au zoom de lecture (échelle 1, voir MindMapView.razor). */
.mindmap-node-scene text { font-size: 12px; font-weight: 600; }

.mindmap-node:hover rect {
    opacity: 0.85;
}

/* Nœud sélectionné (E-5) : contour visible en clair comme en sombre, et brève pulsation quand
   la sélection change — y compris quand elle vient de la Structure. */
.mindmap-node-selected rect {
    stroke: var(--mmw-map-selection);
    stroke-width: 4;
    animation: mmw-node-pulse 0.5s ease-in-out 2;
}

@keyframes mmw-node-pulse {
    50% { stroke-width: 9; }
}

@media (prefers-reduced-motion: reduce) {
    .mindmap-node-selected rect { animation: none; }
}

.mindmap-node-dragover rect {
    stroke: #3498db;
    stroke-width: 3;
    stroke-dasharray: 5 3;
}

.mindmap-node-edit-badge {
    cursor: pointer;
    opacity: 0.55;
}

.mindmap-node-edit-badge:hover {
    opacity: 1;
}

.mindmap-node-edit-badge circle {
    fill: rgba(0, 0, 0, 0.25);
}

.mindmap-node-edit-badge text {
    font-size: 11px;
    fill: white;
}

/* Bandeau d'erreur Blazor par défaut (dotnet new blazorwasm) — jamais repris dans cette feuille
   de style écrite à la main, donc affiché en permanence en display:block (défaut d'un <div>)
   au lieu de rester masqué hors erreur réelle. Perturbait aussi la mise en page en bas de page
   (l'ascenseur horizontal de la carte mentale semblait absent à cause de ce bloc invasif). */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Lot A : hors ligne, pas de « Recharger » (le clic faisait disparaître le texte, bogue du
   06/11) mais un message rassurant. La classe mmw-offline est posée par js/connectivity.js. */
#blazor-error-ui .mmw-error-offline,
body.mmw-offline #blazor-error-ui .mmw-error-online {
    display: none;
}

body.mmw-offline #blazor-error-ui .mmw-error-offline {
    display: inline;
}

/* --- Chronologie (vue Gantt) --- */
.gantt-container {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 20px;
}

.gantt-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.gantt-toolbar button {
    padding: 6px 14px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    border-radius: 4px;
    cursor: pointer;
}

.gantt-toolbar button.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.calendar-settings {
    background: var(--mmw-surface-alt);
    border: 1px solid var(--mmw-border);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 14px;
}

.calendar-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.gantt-empty {
    color: var(--mmw-text-faint);
    font-size: 14px;
}

.gantt-view {
    border: 1px solid var(--mmw-border-light);
    border-radius: 5px;
    overflow: hidden;
}

.gantt-zoom-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--mmw-surface-alt);
    border-bottom: 1px solid var(--mmw-border-faint);
}

.gantt-zoom-toolbar button {
    padding: 3px 10px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

/* Colonne d'étiquettes figée à gauche + colonne défilante à droite — les personnages/lieux
   restent visibles pendant le défilement horizontal du Gantt. Les hauteurs de ligne sont fixées
   des deux côtés (ici et sur .gantt-row-label/.gantt-track) pour rester alignées sans mesure JS. */
.gantt-body {
    display: flex;
    align-items: flex-start;
}

.gantt-labels-col {
    flex: 0 0 160px;
    border-right: 1px solid var(--mmw-border-faint);
}

.gantt-axis-spacer {
    height: 22px;
    background: var(--mmw-surface-alt);
    border-bottom: 1px solid var(--mmw-border);
}

.gantt-scroll-col {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.gantt-inner {
    position: relative;
}

.gantt-axis {
    position: relative;
    height: 22px;
    background: var(--mmw-surface-alt);
    border-bottom: 1px solid var(--mmw-border);
}

.gantt-axis-tick {
    position: absolute;
    top: 2px;
    font-size: 10px;
    color: var(--mmw-text-faint);
    white-space: nowrap;
}

.gantt-row-label {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--mmw-surface-alt);
    border-bottom: 1px solid var(--mmw-border-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-row-label:last-child {
    border-bottom: none;
}

.gantt-track {
    position: relative;
    height: 36px;
    border-bottom: 1px solid var(--mmw-border-faint);
}

.gantt-track:last-child {
    border-bottom: none;
}

.gantt-bar {
    position: absolute;
    top: 6px;
    height: 24px;
    background: #4a90e2;
    color: white;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.gantt-bar.selected {
    background: #e0568c;
    box-shadow: 0 0 0 2px rgba(224, 86, 140, 0.3);
}

.timeline-event-panel {
    max-width: 480px;
    margin-top: 14px;
}

.timeline-event-position {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0;
    font-size: 12px;
}

/* --- Choix de langue au premier lancement (version Electron uniquement) --- */
.language-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.language-picker-modal {
    background: var(--mmw-surface);
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.language-picker-modal h2 {
    margin: 0 0 8px 0;
    font-size: 16px;
    text-align: center;
}

.language-picker-modal button {
    padding: 10px 16px;
    border: 1px solid var(--mmw-border);
    background: var(--mmw-surface-alt);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.language-picker-modal button:hover {
    background: var(--mmw-hover-bg);
    border-color: #4a90e2;
}

/* --- Menus (A-2 « Exporter ▾ », D-2 / D-5 menus ⋯) ---
   Position calculée par js/ui-helpers.js (placeMenu) pour rester entièrement dans l'écran ; la
   hauteur est bornée et le contenu défile si la liste « Déplacer vers… » est longue. */
.mmw-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}

.mmw-menu {
    position: fixed;
    top: 64px;
    left: 16px;
    z-index: 1001;
    min-width: 220px;
    max-width: min(340px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--mmw-surface);
    color: var(--mmw-text);
    border: 1px solid var(--mmw-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

.mmw-menu-title {
    padding: 6px 10px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mmw-text-muted);
    border-bottom: 1px solid var(--mmw-border-faint);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mmw-menu-item,
.mmw-menu .mmw-menu-export {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--mmw-text);
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

.mmw-menu .export-preset-select {
    margin: 2px 4px 6px;
}

.mmw-menu-sub {
    padding-left: 28px;
    font-size: 13px;
}

.mmw-menu-item:disabled {
    color: var(--mmw-text-faint);
    cursor: default;
}

.mmw-menu-danger {
    color: var(--mmw-error-text);
}

@media (hover: hover) {
    .mmw-menu-item:not(:disabled):hover,
    .mmw-menu .mmw-menu-export:hover {
        background: var(--mmw-hover-bg);
        filter: none;
    }
}

/* iPhone : feuille en bas d'écran (convention iOS, V2 IPH-5), jamais coupée par les bords. */
@media (max-width: 700px) {
    .mmw-menu-backdrop {
        background: rgba(0, 0, 0, 0.35);
    }

    .mmw-menu {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        max-height: 70vh;
        border-radius: 14px 14px 0 0;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
}

/* Bouton ⋯ d'une ligne de la Structure (D-2). */
.row-menu-btn {
    font-size: 16px;
    line-height: 1;
    color: var(--mmw-text-muted);
}

/* D-3 : statut en pastille compacte — même <select> natif (même sélecteur iOS, même valeur
   enregistrée), seulement habillé. Forme ○ ◐ ● en plus de la couleur. */
.status-select {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 2px 10px;
}

/* --- Adaptation tactile iPad/iPhone ---
   La mise en page de base (sidebar et éditeur côte à côte, barre d'outils sur une seule ligne)
   suppose une largeur confortable (≥ ~900px). En dessous (portrait iPad 7e gen ≈ 810px de large,
   et tout iPhone dans les deux orientations), on empile la sidebar au-dessus de l'éditeur/carte
   mentale au lieu de les mettre côte à côte, et on allège la barre d'outils. Le CSS recalcule
   tout ça automatiquement à chaque rotation, sans JavaScript. */
@media (max-width: 900px) {
    /* Le grand titre décoratif n'apporte rien que le bouton retour + le titre du livre ne
       donnent déjà — l'enlever libère toute la place qui forçait le reste à déborder. */
    .toolbar h3 {
        display: none;
    }

    .title-input {
        width: auto;
        flex: 1 1 120px;
        min-width: 0;
    }

    .type-select {
        flex: 0 1 auto;
        min-width: 0;
    }

    .main-content {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: 38vh;
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid var(--mmw-border);
    }

    /* PT-2 : la Structure empilée au-dessus se replie aussi, pour rendre tout l'écran à la carte
       ou au texte. Le bouton rond à cheval sur le bord (qui débordait sur iPhone) devient une
       barre pleine largeur « ▲ Structure » en tête du panneau ; repliée, il ne reste qu'elle. */
    .sidebar-collapse-toggle {
        position: static;
        width: 100%;
        height: auto;
        min-height: 32px;
        gap: 8px;
        border: none;
        border-bottom: 1px solid var(--mmw-border);
        border-radius: 0;
        box-shadow: none;
        background: var(--mmw-surface-alt);
        color: var(--mmw-text);
        font-size: 13px;
        font-weight: 600;
    }

    .sidebar-collapse-toggle .collapse-glyph {
        display: inline-block;
        transform: rotate(90deg);
    }

    .sidebar-collapse-toggle .collapse-label {
        display: inline;
    }

    .sidebar.collapsed {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .sidebar:not(.collapsed) {
        display: flex;
        flex-direction: column;
    }

    .sidebar:not(.collapsed) .sidebar-content {
        flex: 1;
        height: auto;
        min-height: 0;
    }

    .editor {
        min-height: 0;
    }
}

/* Sous ce seuil (portrait ET paysage iPhone), la barre d'outils reste chargée même sans le grand
   titre — on masque le texte le moins essentiel (nombre de mots, statut d'auto-sauvegarde) pour
   qu'elle tienne sur deux lignes maximum plutôt que trois ou quatre. */
@media (max-width: 700px) {
    .word-count-total {
        display: none;
    }

    /* PH-1 : l'état d'enregistrement reste visible sur iPhone (il était masqué) — on ne doit
       jamais se demander si le texte est enregistré. Un message d'erreur long est tronqué. */
    .autosave-status {
        max-width: 45vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .export-group .btn {
        padding: 6px 8px;
    }

    /* Le préréglage et les 5 exports passent à la ligne plutôt que de déborder : avec les champs à
       16 px sur tactile (AU-7), « Manuscrit standard » s'élargit et poussait EPUB hors de l'écran,
       inaccessible (la page ne défile pas horizontalement). */
    .export-group {
        flex-wrap: wrap;
    }
}

/* --- Écrans tactiles : la Structure défile au doigt (AU-3) ---
   touch-action: none (nécessaire au glisser-déposer à la souris) bloquait le défilement dès que
   le doigt était posé sur une carte de chapitre, c'est-à-dire presque partout. Le glisser-déposer
   au doigt ne fonctionnait de toute façon pas (constat AU-4, confirmé sur iPad) : on rend le
   défilement vertical. À la souris, rien ne change. */
@media (pointer: coarse) {
    .chapter-card,
    .scene-item,
    .part-group-header {
        touch-action: pan-y;
    }
}

/* --- Écrans tactiles : cibles d'au moins 44 × 44 px (IP-1) ---
   Recommandation Apple ; en dessous, les petits boutons de la Structure (⋯, ➕, onglets, repli)
   se ratent au doigt. Souris : inchangé. */
@media (pointer: coarse) {
    .toolbar .btn,
    .view-switcher button,
    .sidebar-tabs button,
    .row-menu-btn,
    .chapter-header button,
    .scene-item button,
    .part-group-header button,
    .add-part-btn,
    .mindmap-zoom-toolbar button,
    .font-scale-controls button,
    .history-toggle-btn,
    .book-card-rename,
    .book-card-delete,
    .settings-gear-btn,
    .mmw-menu-item,
    .mmw-menu .mmw-menu-export,
    .pomodoro-panel button,
    .gantt-toolbar button,
    .gantt-zoom-toolbar button,
    .reference-card-header button,
    .focus-exit-btn,
    .lock-takeover-banner button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Bouton rond de repli, côte à côte seulement (empilé sous 900 px, c'est une barre : PT-2). */
@media (pointer: coarse) and (min-width: 901px) {
    .sidebar-collapse-toggle {
        width: 44px;
        height: 44px;
        right: -22px;
    }
}

@media (pointer: coarse) and (max-width: 900px) {
    .sidebar-collapse-toggle {
        min-height: 44px;
    }
}

/* --- Écrans tactiles : champs de saisie à 16 px minimum (AU-7, IPH-6) ---
   En dessous de 16 px, Safari iOS zoome toute la page à chaque toucher dans un champ (titre,
   objectif, statut, renommage, éditeur…). Limité à pointer: coarse pour ne rien changer sur PC.
   !important : la plupart des champs fixent leur propre taille (12-14 px) par classe, il faut
   passer devant toutes ces règles sans les dupliquer une par une. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* L'éditeur garde le réglage A- / A+, mais jamais sous 16 px. */
    .markdown-editor {
        font-size: max(16px, calc(14px * var(--mmw-font-scale, 1))) !important;
    }

    .container-fluid.focus-mode .markdown-editor {
        font-size: max(16px, calc(20px * var(--mmw-font-scale, 1))) !important;
    }
}


/* ===================== Lot 3a (ux/lot-3a) ===================== */

/* D-6 : objectif de mots explicite. Structure : 🎯 + champ + barre + %, seulement s'il est rempli
   (ou en cours de saisie depuis le menu ⋯). Éditeur : « Objectif : [—] mots ». */
.word-goal-icon {
    font-size: 12px;
}

.word-goal-label,
.word-goal-unit,
.word-goal-pct {
    font-size: 12px;
    color: var(--mmw-text-muted);
    white-space: nowrap;
}

.word-goal-pct {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

label.word-goal {
    cursor: text;
}

/* AU-11 : statut de la scène dans l'en-tête de l'éditeur (affichage seul), mêmes couleurs que
   les pastilles de la Structure et de la bibliothèque. */
.editor-status {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

.editor-status.status-non-commence { background: var(--mmw-status-nc-bg); color: var(--mmw-status-nc-text); }
.editor-status.status-en-cours { background: var(--mmw-status-ec-bg); color: var(--mmw-status-ec-text); }
.editor-status.status-termine { background: var(--mmw-status-t-bg); color: var(--mmw-status-t-text); }

/* AU-11 : pastille ○ ◐ ● dans le coin des nœuds chapitre et scène de la carte. */
.mindmap-node text.mindmap-status {
    font-size: 10px;
    font-weight: 400;
    pointer-events: none;
}

/* E-4 : zone tactile du ✏️ agrandie (cercle transparent de 32 px) ; au doigt, l'icône est
   affichée pleinement (pas de survol pour la révéler, IP-3). */
.mindmap-node-edit-badge circle.mindmap-node-edit-hit {
    fill: transparent;
}

@media (hover: none) {
    .mindmap-node-edit-badge {
        opacity: 1;
    }
}

/* F-2 : bouton « Compris » à droite de la barre d'aide de la carte. */
.mindmap-hint {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mindmap-hint > span {
    flex: 1;
}

.mindmap-hint-dismiss {
    flex: none;
    padding: 2px 10px;
    font-size: 11px;
    border: 1px solid var(--mmw-border);
    border-radius: 4px;
    background: var(--mmw-surface);
    color: var(--mmw-text);
    cursor: pointer;
}

/* D-6 : dans la Structure, l'objectif rempli passe sur sa propre ligne, sous le titre du
   chapitre — la première ligne (titre, statut, ➕, ⋯) reste identique avec ou sans objectif. */
.chapter-header .word-goal {
    order: 5;
    flex-basis: 100%;
}

/* C-1 : sur tablette, les onglets se resserrent un peu pour que les trois outils libellés tiennent
   sur la même ligne (iPad paysage avec la Structure ouverte). Hauteur des cibles inchangée (IP-1). */
@media (pointer: coarse) {
    .view-switcher {
        gap: 4px;
    }

    .view-switcher .view-tab {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* Bibliothèque au doigt (retour iPad de Yannick, 04/11) : ✏️ et 🗑️ passent à 44 px (IP-1), la
   ligne ✏️ · date · 🗑️ descend donc plus bas que sur PC et la date chevauchait l'icône du genre.
   Le contenu de la carte est décalé d'autant, au tactile seulement. */
@media (pointer: coarse) {
    .book-card-body {
        padding-top: 54px;
    }
}