/* ─── Polices locales (servies depuis le dossier fonts/) ───── */
  @font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/InterTight-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/InterTight-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/InterTight-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/InterTight-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  /* ════════════════════════════════════════════════════════════
     NUANCIER + variables UI
     ════════════════════════════════════════════════════════════ */
  :root {
    --bleu-ciel: #A9CDEC; --indigo: #223D7C; --vert-clair: #ADD036;
    --vert-fonce: #2E7F45; --orange: #F05D3D; --jaune: #FBEE3B;
    --rouge: #E2001A; --rose-vif: #ED3F96; --violet: #726791;
    --rose-pale: #FAC6CD; --marron: #4F3015; --saumon: #FF7878;
    --vert-marine: #8BF2C1; --bleu-vif: #4ECDEA; --gris: #808184;
    --beige: #EED9C4; --terracotta: #B8412A;

    /* Variables UI — Voie C : neutres alignés sur games.css, accent
       terracotta, action orange Forge conservée. */
    --color-bg: #F7F3EC;
    --color-surface: #EDE7DC;
    --color-surface-card: #FFFFFF;
    --color-surface-deep: #D8D3C7;
    --color-text: #1A1A1A;
    --color-text-soft: #5A5A5A;
    --color-text-faint: rgba(26, 26, 26, 0.4);
    --color-accent: var(--terracotta);
    --color-action: var(--orange);
    --color-action-hover: #D54725;
    --color-danger: var(--rouge);
    --color-border: rgba(26, 26, 26, 0.12);
    --color-border-soft: rgba(26, 26, 26, 0.06);
    --shadow: 0 1px 3px rgba(26, 26, 26, 0.06);

    --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-sans: 'Inter Tight', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  }

  [data-theme="dark"] {
    --color-bg: #1A2638;
    --color-surface: #243149;
    --color-surface-card: #2A3753;
    --color-surface-deep: #324061;
    --color-text: #B8C4D9;
    --color-text-soft: #9BAAC4;
    --color-text-faint: #8295AC;
    --color-accent: var(--violet);
    --color-action: var(--orange);
    --color-action-hover: #FF7855;
    --color-danger: var(--saumon);
    --color-border: #3A4A66;
    --color-border-soft: rgba(58, 74, 102, 0.5);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--color-bg); color: var(--color-text);
    font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* ─── Header — override léger sur le composant standard du site ───
     Le markup .header / .header-left / .header-right et les composants
     .burger, .menu-panel, .menu-overlay, .theme-toggle sont définis
     dans ../style.css (design system commun). Ici on ne touche qu'à
     l'identité visuelle propre à ePub Forge :
     - padding plus généreux (l'app reste pleine largeur, pas le .app
       du DS qui est centré 960px) ;
     - sticky + backdrop blur ;
     - typographie Fraunces italique terracotta pour "ePub Forge" ;
     - tagline mono à côté du titre. */
  .header {
    padding: 20px 32px;
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(8px);
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  /* Titre "ePub Forge" — identité Forge : Fraunces italique, terracotta.
     Override de .game-title du DS qui est en --font-display 600 droit. */
  .header .game-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-style: italic;
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--color-accent);
  }
  .header .game-title .forge {
    color: var(--color-text);
    font-style: italic;
  }

  /* Tagline mono à côté du titre. */
  .header .tag {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding-bottom: 2px;
  }

  /* Bouton replier / déplier le panneau de droite (spécifique ePub Forge,
     n'existe pas dans le DS commun). */
  .panel-toggle {
    background: transparent; border: 1px solid var(--color-border); color: var(--color-text-soft);
    cursor: pointer; padding: 6px 12px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    display: flex; align-items: center; gap: 8px; transition: all 0.2s;
  }
  .panel-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .panel-toggle .icon { font-size: 14px; line-height: 1; }

  /* Menu burger — les liens héritent de .menu-link du DS qui utilise
     --font-display (Newsreader). Newsreader n'est pas chargée dans
     ePub Forge ; on bascule en Fraunces pour rester cohérent avec
     l'identité serif de Forge sans charger une 4e famille. */
  .menu-link {
    font-family: var(--font-serif);
  }

  /* ─── Accessibilité : focus visible au clavier (Sprint Tier 1-b)
     :focus-visible cible uniquement le focus déclenché par le clavier
     (Tab, flèches, etc.), pas le clic souris. On force un anneau de
     focus orange (couleur d'action) bien visible, indépendamment des
     styles "outline: none" hérités. */
  :focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
    border-radius: 2px;
  }
  /* Pour les éléments avec une bordure déjà visible (inputs, textareas),
     un anneau d'accent plutôt qu'un outline qui se cumule avec la
     bordure existante. */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
  }

  /* ─── Layout ─── */
  .workspace {
    display: grid;
    grid-template-columns: 280px 1fr 340px;
    flex: 1;
    min-height: 0; /* important pour permettre aux enfants de scroller */
    overflow: hidden;
  }
  /* Sidebar droite repliée (Sprint UX) */
  .workspace.right-collapsed {
    grid-template-columns: 280px 1fr 0;
  }

  /* ─── Sidebar gauche ─── */
  .sidebar {
    border-right: 1px solid var(--color-border); padding: 0;
    background: var(--color-surface); overflow-y: auto;
    transition: background-color 0.3s ease;
    display: flex; flex-direction: column;
  }
  .sidebar-section {
    padding: 24px 0 16px;
  }
  .sidebar-section + .sidebar-section {
    border-top: 1px solid var(--color-border);
  }
  .sidebar-import {
    background: var(--color-bg);
    padding: 20px 24px;
  }
  .sidebar-import h2 {
    padding: 0 0 12px 0;
    border-bottom: none;
  }
  .sidebar h2 {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--color-text-faint);
    padding: 0 24px 12px; border-bottom: 1px solid var(--color-border-soft); margin-bottom: 8px;
  }

  /* Bouton import : visuellement très différent du bouton "Nouveau chapitre" */
  /* ─── Boutons unifiés de la sidebar gauche ──────────────────
     Trois actions équivalentes : Bibliothèque, Importer un projet,
     Importer un manuscrit. Un seul style commun. */
  .sidebar-cta {
    width: 100%;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    padding: 12px 14px;
    cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    text-align: left;
    transition: all 0.15s;
    font-family: var(--font-sans);
    margin-bottom: 8px;
  }
  .sidebar-cta:last-child { margin-bottom: 0; }
  .sidebar-cta:hover {
    border-color: var(--color-accent);
    background: var(--color-surface-card);
  }
  .sidebar-cta .icon {
    font-size: 20px;
    line-height: 1;
    color: var(--color-accent);
    flex-shrink: 0;
  }
  .sidebar-cta .label {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1;
    min-width: 0;
  }
  .sidebar-cta .primary {
    font-size: 13px; font-weight: 500;
    color: var(--color-text); letter-spacing: 0;
  }
  .sidebar-cta .secondary {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--color-text-faint); letter-spacing: 0.04em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Sprint P2 : statut de sauvegarde inline (sous le titre du chapitre) */
  .save-status-inline {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-faint);
    letter-spacing: 0.04em;
    margin: 0 0 14px 0;
    padding: 0;
    line-height: 1.4;
    flex-shrink: 0;
  }
  .save-status-inline .save-local {
    color: var(--color-text-soft);
  }
  .save-status-inline .save-external {
    color: var(--color-text-faint);
    font-style: italic;
  }
  .save-status-inline .save-error {
    color: var(--color-action);
    font-weight: 500;
  }

  .chapter-list { list-style: none; }
  .chapter-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 24px; cursor: pointer;
    border-left: 2px solid transparent; transition: all 0.15s;
    font-size: 13px; color: var(--color-text-soft);
  }
  .chapter-item:hover { background: var(--color-surface-deep); color: var(--color-text); }
  .chapter-item.active {
    background: var(--color-surface-card); border-left-color: var(--color-accent);
    color: var(--color-text); font-weight: 500;
  }
  .chapter-item .num {
    font-family: var(--font-mono); font-size: 10px; color: var(--color-text-faint); min-width: 22px;
  }
  .chapter-item.active .num { color: var(--color-accent); }
  .chapter-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chapter-item .delete {
    opacity: 0; background: none; border: none; color: var(--color-text-faint);
    cursor: pointer; font-size: 14px; padding: 2px 6px; transition: opacity 0.15s, color 0.15s;
  }
  .chapter-item:hover .delete { opacity: 1; }
  .chapter-item .delete:hover { color: var(--color-danger); }
  .add-chapter {
    margin: 16px 24px; padding: 10px; background: transparent;
    border: 1px dashed var(--color-border); color: var(--color-text-soft);
    font-family: var(--font-sans); font-size: 12px; cursor: pointer;
    width: calc(100% - 48px); transition: all 0.15s; letter-spacing: 0.04em;
  }
  .add-chapter:hover { border-color: var(--color-accent); color: var(--color-accent); border-style: solid; }

  /* ─── Centre : éditeur ─── */
  .editor-pane {
    padding: 32px 40px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  /* Le conteneur direct du contenu doit hériter du flex column
     pour que le textarea (en flex:1) puisse remplir l'espace */
  #editorContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .editor-pane .empty-state {
    margin: auto;
    text-align: center;
    color: var(--color-text-faint);
  }
  .editor-pane .empty-state .glyph {
    font-size: 48px;
    font-family: var(--font-serif);
    color: var(--color-border);
    margin-bottom: 16px;
  }
  .chapter-title-input {
    width: 100%; border: none; background: transparent;
    font-family: var(--font-serif); font-size: 32px; font-weight: 500;
    letter-spacing: -0.02em; color: var(--color-text); margin-bottom: 8px;
    padding: 4px 0; border-bottom: 1px solid transparent;
    flex-shrink: 0;
  }
  .chapter-title-input:focus { outline: none; border-bottom-color: var(--color-border); }
  .chapter-title-input::placeholder { color: var(--color-text-faint); font-style: italic; }
  .editor-meta {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--color-text-faint);
    margin-bottom: 8px; display: flex; gap: 24px; flex-wrap: wrap;
    flex-shrink: 0;
  }
  .editor-meta span strong { color: var(--color-text-soft); font-weight: 500; }
  .content-textarea {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--color-border-soft); background: var(--color-surface-card);
    padding: 28px 32px;
    font-family: var(--font-serif); font-size: 16px; line-height: 1.7; color: var(--color-text);
    resize: none;
    transition: border-color 0.2s, background-color 0.3s ease;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    overflow-y: auto;
  }
  .content-textarea:focus { outline: none; border-color: var(--color-accent); }

  /* ─── Bandeau d'avertissement roundtrip (Sprint 4I-bis) ─── */
  .roundtrip-warning {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0 0 8px 0;
    padding: 10px 14px;
    background: rgba(240, 93, 61, 0.06);
    border-left: 2px solid var(--color-action);
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-soft);
    flex-shrink: 0;
  }
  .roundtrip-warning .rw-icon {
    color: var(--color-action);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .roundtrip-warning .rw-text {
    flex: 1;
  }

  /* ─── Section Couverture (Sprint 4J) ─── */
  .cover-section {
    margin-bottom: 16px;
  }
  .cover-empty {
    border: 1px dashed var(--color-border);
    padding: 20px 16px;
    text-align: center;
    background: var(--color-surface-card);
  }
  .cover-empty p {
    margin: 0 0 12px 0;
    font-size: 11px;
    color: var(--color-text-faint);
    line-height: 1.5;
  }
  .cover-empty .cover-hint {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    color: var(--color-text-faint);
  }
  .cover-preview-wrap {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .cover-thumb {
    width: 90px;
    height: 135px;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    object-fit: contain;
    display: block;
  }
  .cover-info {
    flex: 1;
    font-size: 11px;
    line-height: 1.45;
    color: var(--color-text-soft);
  }
  .cover-info .cover-filename {
    font-weight: 500;
    color: var(--color-text);
    word-break: break-all;
  }
  .cover-info .cover-meta {
    color: var(--color-text-faint);
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
  }
  .cover-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .cover-actions .btn-small {
    flex: 1;
    background: transparent;
    border: 1px solid var(--color-border);
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-soft);
    cursor: pointer;
    transition: all 0.12s;
    text-align: center;
  }
  .cover-actions .btn-small:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  .cover-findings {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(240, 93, 61, 0.04);
    border-left: 2px solid var(--color-action);
    font-size: 11px;
    line-height: 1.5;
  }
  .cover-finding {
    display: block;
    margin: 2px 0;
    color: var(--color-text-soft);
  }
  .cover-finding.warning { color: var(--color-action); }
  .cover-finding.info { color: var(--color-text-soft); }

  /* ─── Vue Blocs (Sprint 4K) ─── */

  /* Toggle Source/Blocs au-dessus du contenu */
  .editor-mode-toggle {
    display: flex;
    gap: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
    padding: 6px 14px;
    flex-shrink: 0;
  }
  .editor-mode-toggle button {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-faint);
    transition: all 0.15s;
  }
  .editor-mode-toggle button:hover { color: var(--color-text-soft); }
  .editor-mode-toggle button.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }

  /* Conteneur de la vue blocs */
  .block-view {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    background: var(--color-bg);
  }
  .block-view-empty {
    text-align: center;
    color: var(--color-text-faint);
    font-size: 12px;
    padding: 40px 20px;
    font-family: var(--font-mono);
  }

  /* Carte d'un bloc */
  .block-card {
    position: relative;
    margin: 0 0 12px 0;
    padding: 12px 16px 12px 36px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: all 0.12s;
  }
  .block-card:hover {
    background: var(--color-surface-card);
    border-color: var(--color-border-soft);
  }
  .block-card.editing {
    background: var(--color-surface-card);
    border-color: var(--color-accent);
  }

  /* Étiquette du type (à gauche) */
  .block-type-label {
    position: absolute;
    left: 0;
    top: 14px;
    width: 30px;
    text-align: right;
    padding-right: 6px;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-faint);
    line-height: 1;
    user-select: none;
  }
  .block-card:hover .block-type-label { color: var(--color-text-soft); }

  /* Contrôles à droite (visibles au survol) */
  .block-controls {
    position: absolute;
    right: 0;
    top: 8px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
  }
  .block-card:hover .block-controls,
  .block-card.editing .block-controls {
    opacity: 1;
  }
  .block-controls button {
    background: transparent;
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-soft);
    padding: 3px 7px;
    font-size: 11px;
    cursor: pointer;
    font-family: var(--font-sans);
    line-height: 1;
    min-width: 22px;
  }
  .block-controls button:hover {
    background: var(--color-surface-card);
    color: var(--color-accent);
    border-color: var(--color-accent);
  }
  .block-controls select {
    background: transparent;
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-soft);
    padding: 2px 4px;
    font-size: 10px;
    font-family: var(--font-mono);
    cursor: pointer;
  }

  /* Preview content par type */
  .block-preview {
    cursor: text;
    min-height: 1.2em;
  }
  .block-preview-paragraph {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
  }
  .block-preview-paragraph em { font-style: italic; }
  .block-preview-paragraph strong { font-weight: 600; }
  .block-preview-paragraph code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: rgba(0,0,0,0.05);
    padding: 1px 4px;
  }
  .block-preview-heading-1 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
    margin: 4px 0;
  }
  .block-preview-heading-2 {
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    margin: 4px 0;
  }
  .block-preview-heading-3 {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
    margin: 4px 0;
  }
  .block-preview-quote {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-soft);
    font-style: italic;
    border-left: 2px solid var(--color-border);
    padding-left: 14px;
    margin: 0;
  }
  .block-preview-empty {
    color: var(--color-text-faint);
    font-style: italic;
    font-family: var(--font-sans);
    font-size: 12px;
  }

  /* Edit textarea/input */
  .block-edit-input,
  .block-edit-textarea {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
    box-sizing: border-box;
    resize: vertical;
  }
  .block-edit-input:focus,
  .block-edit-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
  }
  .block-edit-textarea {
    min-height: 80px;
  }
  .block-edit-input.heading-1 { font-size: 22px; font-weight: 600; }
  .block-edit-input.heading-2 { font-size: 18px; font-weight: 600; }
  .block-edit-input.heading-3 { font-size: 16px; font-weight: 600; }
  .block-edit-hint {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-faint);
  }

  /* ─── Éditeurs spécifiques Sprint 4K-b ─── */

  /* Liste : boutons toggle */
  .block-edit-list-controls {
    display: flex; gap: 4px; margin-bottom: 6px;
  }
  .block-edit-list-toggle {
    background: transparent;
    border: 1px solid var(--color-border);
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-soft);
    cursor: pointer;
  }
  .block-edit-list-toggle.active {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
  }

  /* Image : grille preview + champs */
  .block-edit-image-grid {
    display: flex; gap: 16px; align-items: flex-start;
  }
  .block-edit-image-preview {
    flex-shrink: 0;
    width: 140px;
  }
  .block-edit-image-fields {
    flex: 1;
  }
  .block-edit-field-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-faint);
    margin-bottom: 3px;
  }

  /* Note : header avec ID */
  .block-edit-note-header {
    display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
  }
  .block-edit-note-id {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-action);
    font-weight: 600;
  }

  /* Code : header avec sélecteur de langage */
  .block-edit-code-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  }
  .block-edit-code-header select {
    background: white;
    border: 1px solid var(--color-border);
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text);
  }
  textarea.block-edit-code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: rgba(0,0,0,0.04);
  }

  /* Table : grille d'inputs */
  .block-edit-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    padding: 4px;
    background: var(--color-bg);
  }
  .block-edit-table {
    border-collapse: collapse;
    width: 100%;
  }
  .block-edit-table th,
  .block-edit-table td {
    border: 1px solid var(--color-border-soft);
    padding: 2px;
    vertical-align: top;
  }
  .block-edit-table th {
    background: rgba(0,0,0,0.03);
  }
  .block-edit-cell {
    width: 100%;
    min-width: 80px;
    background: transparent;
    border: none;
    padding: 4px 6px;
    font-family: var(--font-serif);
    font-size: 13px;
    color: var(--color-text);
    box-sizing: border-box;
  }
  .block-edit-cell:focus {
    outline: 1px solid var(--color-accent);
    background: white;
  }
  .block-edit-cell-align {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-top: 1px solid var(--color-border-soft);
    padding: 2px 4px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-text-faint);
    text-align: center;
  }
  .block-edit-cell-align:focus {
    outline: 1px solid var(--color-accent);
  }

  /* Inserter entre blocs (bouton +) */
  .block-inserter {
    position: relative;
    height: 12px;
    margin: -6px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s;
  }
  .block-inserter:hover { opacity: 1; }
  .block-inserter::before {
    content: '';
    position: absolute;
    left: 36px; right: 0;
    height: 1px;
    background: var(--color-accent);
  }
  .block-inserter button {
    position: relative;
    z-index: 1;
    background: var(--color-bg);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    width: 22px; height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Menu d'insertion */
  .block-inserter-menu {
    position: absolute;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 4px;
    z-index: 100;
    min-width: 160px;
  }
  .block-inserter-menu button {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text);
  }
  .block-inserter-menu button:hover { background: var(--color-surface-card); color: var(--color-accent); }

  /* Modal de recadrage */
  .cover-crop-body {
    display: flex;
    gap: 20px;
    padding: 20px 24px;
    background: var(--color-bg);
  }
  .cover-crop-preview {
    flex: 1;
    min-height: 360px;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .cover-crop-preview img {
    max-width: 100%;
    max-height: 360px;
    display: block;
    opacity: 0.4;
    user-select: none;
    -webkit-user-drag: none;
  }
  .cover-crop-overlay {
    position: absolute;
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.4);
    pointer-events: none;
  }
  .cover-crop-controls {
    width: 220px;
    flex-shrink: 0;
  }
  .cover-crop-controls input[type="range"] {
    width: 100%;
    margin-top: 4px;
  }
  .cover-crop-stats {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-faint);
    margin-top: 14px;
    line-height: 1.6;
  }

  /* ─── Palette d'insertion (Sprint 4G) ─── */
  .insert-modal-body {
    padding: 20px 24px;
    background: var(--color-bg);
  }
  .insert-modal-body .ctrl-field input,
  .insert-modal-body .ctrl-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    background: white;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text);
    box-sizing: border-box;
  }
  .insert-modal-body .ctrl-field textarea {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
  }
  .insert-modal-body .ctrl-field input:focus,
  .insert-modal-body .ctrl-field textarea:focus {
    outline: none; border-color: var(--color-accent);
  }
  .insert-modal-body .ctrl-field + .ctrl-field {
    margin-top: 14px;
  }
  .table-dim-row {
    display: flex; gap: 12px;
  }
  .table-dim-input {
    flex: 1;
  }
  .table-dim-input .dim-label {
    display: block;
    font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-text-faint); margin-bottom: 4px;
  }
  .table-dim-input input {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--color-border); background: white;
    font-family: var(--font-sans); font-size: 13px; color: var(--color-text);
    box-sizing: border-box;
  }
  .insertion-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .toolbar-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-faint);
    margin-right: 6px;
  }
  .ins-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-soft);
    font-family: var(--font-sans);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .ins-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-surface-card);
  }
  .ins-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
  }
  .ins-btn[disabled]:hover {
    border-color: var(--color-border);
    color: var(--color-text-soft);
    background: var(--color-surface-card);
  }
  .ins-btn .ico {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ins-btn .ico svg {
    width: 15px;
    height: 15px;
    display: block;
  }
  .ins-btn[disabled] .ico { color: var(--color-text-faint); }
  .ins-btn .lbl {
    font-weight: 500;
  }
  .empty-state { text-align: center; padding: 80px 20px; color: var(--color-text-faint); }
  .empty-state .glyph {
    font-family: var(--font-serif); font-size: 80px; font-style: italic;
    color: var(--color-border); line-height: 1; margin-bottom: 24px;
  }
  .empty-state p { font-family: var(--font-serif); font-style: italic; font-size: 18px; }

  /* ─── Panneau droit ─── */
  .panel {
    border-left: 1px solid var(--color-border); padding: 24px;
    background: var(--color-surface); overflow-y: auto;
    transition: background-color 0.3s ease;
  }
  /* Sprint UX : repli du panneau droit */
  .workspace.right-collapsed .panel {
    visibility: hidden;
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }
  .panel h2 {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--color-text-faint); margin-bottom: 16px;
    padding-bottom: 10px; border-bottom: 1px solid var(--color-border-soft);
  }
  .panel h2:not(:first-child) { margin-top: 32px; }
  .field { margin-bottom: 14px; }
  .field label {
    display: block; font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-faint);
    margin-bottom: 4px;
  }
  .field input, .field select, .field textarea {
    width: 100%; border: 1px solid var(--color-border); background: var(--color-surface-card);
    padding: 8px 10px; font-family: var(--font-sans); font-size: 13px; color: var(--color-text);
    transition: border-color 0.2s, background-color 0.3s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--color-accent);
  }
  .field textarea {
    font-family: var(--font-serif); font-size: 13px; line-height: 1.5;
    resize: vertical; min-height: 60px;
  }

  /* Indicateur typographie actif sous le champ Langue */
  .typo-status {
    margin-top: 6px; padding: 6px 10px;
    background: var(--color-surface-card);
    border-left: 2px solid var(--color-accent);
    font-family: var(--font-mono); font-size: 10px;
    color: var(--color-text-soft); letter-spacing: 0.04em;
    line-height: 1.4;
    display: flex; align-items: center; gap: 6px;
  }
  .typo-status.inactive {
    border-left-color: var(--color-text-faint);
    color: var(--color-text-faint);
  }
  .typo-status .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--vert-fonce);
    flex-shrink: 0;
  }
  .typo-status.inactive .dot {
    background: var(--color-text-faint);
  }

  /* ─── Sélecteur de preset visuel ─── */
  .preset-current {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .preset-current .name {
    font-family: var(--font-serif); font-size: 16px; font-weight: 500;
    color: var(--color-text); margin-bottom: 4px;
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .preset-current .name .badge {
    font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--color-accent);
    border: 1px solid var(--color-accent); padding: 2px 6px;
  }
  .preset-current .signature {
    font-family: var(--font-sans); font-size: 11px; color: var(--color-text-soft);
    line-height: 1.4; font-style: italic;
  }
  .preset-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
  }
  .preset-actions .btn-small {
    flex: 1; padding: 8px 10px; font-family: var(--font-sans);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 500; cursor: pointer;
    border: 1px solid var(--color-border); background: transparent; color: var(--color-text-soft);
    transition: all 0.2s;
  }
  .preset-actions .btn-small:hover {
    border-color: var(--color-accent); color: var(--color-accent);
  }

  /* ─── Boutons d'action ─── */
  .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

  /* ─── Diagnostic (Sprint Diagnostic) ─── */
  .diagnostic-summary {
    padding: 14px 24px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .diagnostic-summary .sum-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .diagnostic-summary .sum-count {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
  }
  .diagnostic-summary .sum-item.blocking .sum-count { color: var(--color-action); }
  .diagnostic-summary .sum-item.warning .sum-count { color: var(--color-text); }
  .diagnostic-summary .sum-item.info .sum-count { color: var(--color-text-faint); }
  .diagnostic-summary .sum-item.all-clear {
    color: var(--color-text-soft);
  }
  .diagnostic-summary .sum-item.all-clear .sum-count {
    color: var(--color-accent);
  }
  .diagnostic-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
  }
  .diag-section {
    border-bottom: 1px solid var(--color-border-soft);
  }
  .diag-section:last-child {
    border-bottom: none;
  }
  .diag-section-header {
    padding: 14px 24px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-faint);
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .diag-section.blocking .diag-section-header {
    color: var(--color-action);
  }
  .diag-section-subtitle {
    font-size: 10px;
    color: var(--color-text-faint);
    text-transform: none;
    letter-spacing: 0.04em;
    font-style: italic;
  }
  .diag-issue {
    padding: 12px 24px;
    border-top: 1px solid var(--color-border-soft);
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .diag-issue:first-child {
    border-top: none;
  }
  .diag-issue-marker {
    flex-shrink: 0;
    width: 4px;
    align-self: stretch;
    background: var(--color-border);
    margin-top: 2px;
  }
  .diag-issue.blocking .diag-issue-marker {
    background: var(--color-action);
  }
  .diag-issue.warning .diag-issue-marker {
    background: var(--color-text-soft);
  }
  .diag-issue.info .diag-issue-marker {
    background: var(--color-border);
  }
  .diag-issue-body {
    flex: 1;
    min-width: 0;
  }
  .diag-issue-message {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.4;
    margin-bottom: 2px;
  }
  .diag-issue-detail {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-text-faint);
    line-height: 1.45;
    margin-top: 4px;
  }
  .diag-issue-action {
    flex-shrink: 0;
  }
  .diag-issue-action button {
    background: transparent;
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-soft);
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
  }
  .diag-issue-action button:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  .diag-all-clear {
    padding: 48px 24px;
    text-align: center;
    color: var(--color-text-soft);
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    line-height: 1.5;
  }
  .diag-all-clear .accent {
    color: var(--color-accent);
    font-style: normal;
  }

  /* Lien discret "Vérifier le projet" sous le bouton Générer */
  .verify-link {
    display: block;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--color-text-faint);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 6px 0 4px;
    margin-top: -4px;
    text-decoration: underline;
    text-decoration-color: var(--color-border-soft);
    text-underline-offset: 3px;
    transition: color 0.12s, text-decoration-color 0.12s;
  }
  .verify-link:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
  }

  /* ─── Bibliothèque de projets (Sprint P2) ─── */
  .library-toolbar {
    display: flex;
    gap: 10px;
    padding: 14px 24px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
  }
  .library-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
  }
  .library-item {
    display: flex;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-soft);
    align-items: flex-start;
    gap: 16px;
  }
  .library-item:hover {
    background: var(--color-surface-card);
  }
  .library-item.active {
    background: var(--color-surface-card);
    border-left: 3px solid var(--color-accent);
  }
  .library-item-body {
    flex: 1;
    min-width: 0;
  }
  .library-item-name {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
    word-break: break-word;
  }
  .library-item-author {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-soft);
    margin-bottom: 6px;
  }
  .library-item-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.6;
  }
  .library-item-meta .active-tag {
    color: var(--color-accent);
    font-weight: 600;
  }
  .library-item-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    width: 110px;
  }
  .library-item-actions button {
    background: transparent;
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-soft);
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.12s;
  }
  .library-item-actions button:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  .library-item-actions button.danger:hover {
    border-color: var(--color-action);
    color: var(--color-action);
  }
  .library-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--color-text-faint);
    font-family: var(--font-mono);
    font-size: 11px;
  }

  /* Modal Renommer */
  .rename-body {
    padding: 24px;
    background: var(--color-bg);
  }
  .rename-body label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-faint);
    margin-bottom: 6px;
  }
  .rename-body input {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--color-text);
    box-sizing: border-box;
  }
  .rename-body input:focus {
    outline: none;
    border-color: var(--color-accent);
  }
  .btn {
    padding: 12px 16px; font-family: var(--font-sans); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
    cursor: pointer; border: 1px solid var(--color-text);
    background: transparent; color: var(--color-text); transition: all 0.2s;
  }
  .btn:hover { background: var(--color-text); color: var(--color-bg); }
  .btn-primary { background: var(--color-action); color: #FFFFFF; border-color: var(--color-action); }
  .btn-primary:hover {
    background: var(--color-action-hover); border-color: var(--color-action-hover); color: #FFFFFF;
  }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ─── Toast ─── */
  .toast {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--color-accent); color: #FFFFFF;
    padding: 14px 20px; font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.04em; transform: translateY(120px);
    transition: transform 0.3s ease; z-index: 100;
    max-width: 360px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex; align-items: center; gap: 16px;
  }
  .toast.show { transform: translateY(0); }
  .toast.error { background: var(--color-danger); }
  .toast-message { flex: 1; line-height: 1.4; }
  .toast-undo {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, background-color 0.15s;
  }
  .toast-undo:hover {
    border-color: #FFFFFF;
    background: rgba(255,255,255,0.1);
  }

  /* Sprint Annulation : bouton persistant "Annuler l'import" */
  .undo-import-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-soft);
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    transition: transform 0.3s ease;
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .undo-import-banner.show {
    transform: translateX(-50%) translateY(0);
  }
  .undo-import-banner .ub-label {
    color: var(--color-text-faint);
  }
  .undo-import-banner button {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
  }
  .undo-import-banner button:hover {
    border-color: var(--color-accent);
  }
  .undo-import-banner button.dismiss {
    color: var(--color-text-faint);
    border: none;
    padding: 4px 8px;
  }
  .undo-import-banner button.dismiss:hover {
    color: var(--color-text-soft);
  }

  /* ─── Stats ─── */
  .stats {
    margin-top: 16px; padding: 12px;
    background: var(--color-surface-card); border: 1px solid var(--color-border-soft);
    font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint);
    display: grid;
    /* 3 colonnes si la place le permet (au moins 60px par colonne),
       sinon repli en 2 colonnes. Le minmax + auto-fit s'adapte. */
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 8px 12px;
    transition: background-color 0.3s ease;
  }
  .stats div strong {
    color: var(--color-accent); font-size: 14px; font-family: var(--font-serif); font-weight: 500;
    display: block; text-transform: none; letter-spacing: 0;
  }

  /* ─── Modal générique ─── */
  .modal {
    position: fixed; inset: 0; background: rgba(15, 26, 48, 0.78);
    display: none; align-items: center; justify-content: center;
    z-index: 50; padding: 24px;
    /* Annule width/max-height/overflow venus du DS commun (.modal y est
       le bloc-popup centré 520px ; ici .modal joue le rôle de backdrop
       plein écran et .modal-content joue le rôle du bloc-popup). */
    width: auto;
    max-height: none;
    overflow-y: visible;
  }
  .modal.show { display: flex; }
  .modal-content {
    background: var(--color-bg); width: 100%;
    border: 1px solid var(--color-accent);
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  }
  .modal-content.size-sm { max-width: 480px; }
  .modal-content.size-md { max-width: 720px; max-height: 85vh; }
  .modal-content.size-lg { max-width: 1280px; max-height: 90vh; }
  .modal-content.size-xl { max-width: 95vw; max-height: 95vh; }

  /* Modal de confirmation */
  .confirm-body {
    padding: 24px 28px;
    background: var(--color-bg);
  }
  .confirm-body p {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
  }
  .confirm-body .confirm-detail {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-soft);
    margin-top: 10px;
    font-style: italic;
  }
  .confirm-body .confirm-detail:empty { display: none; }
  .nav-btn.confirm-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #FFFFFF;
  }
  .nav-btn.confirm-danger:hover:not(:disabled) {
    background: #b80017;
    border-color: #b80017;
    color: #FFFFFF;
  }
  .modal-header {
    padding: 20px 28px; border-bottom: 1px solid var(--color-border);
    display: flex; align-items: baseline; justify-content: space-between;
    background: var(--color-surface);
  }
  .modal-header h3 {
    font-family: var(--font-serif); font-weight: 500; font-size: 22px;
    letter-spacing: -0.01em; color: var(--color-text);
  }
  .modal-header h3 .accent { color: var(--color-accent); font-style: italic; }
  .modal-header .close {
    background: none; border: none; font-size: 28px;
    color: var(--color-text-faint); cursor: pointer; line-height: 1;
  }
  .modal-header .close:hover { color: var(--color-danger); }
  .modal-body { overflow-y: auto; flex: 1; background: var(--color-bg); }

  /* ─── Galerie comparative ─── */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px;
  }
  .gallery-card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .gallery-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }
  .gallery-card.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent);
  }
  .gallery-card-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    background: var(--color-surface);
  }
  .gallery-card-head .title {
    font-family: var(--font-serif); font-size: 16px; font-weight: 500;
    color: var(--color-text); display: flex; justify-content: space-between; align-items: baseline;
  }
  .gallery-card-head .title .id {
    font-family: var(--font-mono); font-size: 9px;
    color: var(--color-accent); letter-spacing: 0.12em;
  }
  .gallery-card-head .signature {
    font-family: var(--font-sans); font-size: 10px; color: var(--color-text-soft);
    margin-top: 2px; font-style: italic;
  }
  .gallery-card-preview {
    background: #FFFFFF;
    padding: 14px 18px;
    min-height: 240px;
    overflow: hidden;
    color: #1a1a1a;
    position: relative;
  }
  .gallery-card-preview::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
  }
  .gallery-actions {
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    display: flex; gap: 12px; justify-content: flex-end; align-items: center;
  }
  .gallery-actions .info {
    flex: 1; font-family: var(--font-mono); font-size: 11px; color: var(--color-text-soft);
    letter-spacing: 0.06em;
  }
  .gallery-actions .info strong {
    color: var(--color-accent); font-family: var(--font-serif); font-weight: 500;
    font-style: italic; font-size: 14px;
  }

  /* ─── Aperçu pleine page ─── */
  .preview-fullpage {
    background: #FFFFFF;
    min-height: 100%;
    padding: 60px 80px;
    color: #1a1a1a;
  }
  .preview-nav {
    position: sticky; top: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 24px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 5;
  }
  .preview-nav .current-preset {
    font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--color-text);
  }
  .preview-nav .current-preset .label {
    font-family: var(--font-mono); font-size: 10px; color: var(--color-text-faint);
    text-transform: uppercase; letter-spacing: 0.12em; margin-right: 8px;
  }
  .preview-nav-controls { display: flex; gap: 8px; }
  .nav-btn {
    background: var(--color-surface-card); border: 1px solid var(--color-border);
    padding: 6px 12px; cursor: pointer; font-family: var(--font-mono);
    font-size: 11px; color: var(--color-text-soft); letter-spacing: 0.08em; text-transform: uppercase;
    transition: all 0.2s;
  }
  .nav-btn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
  .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .nav-btn.confirm {
    background: var(--color-action); border-color: var(--color-action); color: white;
  }
  .nav-btn.confirm:hover:not(:disabled) {
    background: var(--color-action-hover); border-color: var(--color-action-hover); color: white;
  }

  /* ─── Carte "+ Nouveau preset" dans la galerie ─── */
  .gallery-card-add {
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    display: flex; align-items: center; justify-content: center;
    min-height: 320px; cursor: pointer;
  }
  .gallery-card-add:hover {
    border-color: var(--color-accent);
    background: var(--color-surface-card);
    box-shadow: none;
    transform: none;
  }
  .gallery-card-add .gallery-card-add-inner {
    text-align: center; padding: 24px;
  }
  .gallery-card-add .plus {
    font-family: var(--font-serif); font-size: 56px; font-weight: 300;
    color: var(--color-accent); line-height: 1;
    margin-bottom: 12px;
  }
  .gallery-card-add .label {
    font-family: var(--font-serif); font-size: 18px; font-weight: 500;
    color: var(--color-text); margin-bottom: 6px;
  }
  .gallery-card-add .hint {
    font-family: var(--font-sans); font-size: 11px; color: var(--color-text-faint);
    font-style: italic;
  }

  /* ─── Modal éditeur de preset ─── */
  .editor-layout { display: flex; flex-direction: column; }
  .editor-body {
    display: grid; grid-template-columns: 380px 1fr;
    flex: 1; overflow: hidden; min-height: 70vh;
  }
  .editor-controls {
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg);
  }
  .editor-preview {
    display: flex; flex-direction: column;
    background: white;
  }
  .editor-preview-label {
    padding: 8px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--color-text-faint);
    display: flex; justify-content: space-between; align-items: center;
  }
  .editor-preview-label .ms {
    color: var(--color-accent); font-size: 10px;
  }

  /* Section dépliable */
  .editor-section {
    border-bottom: 1px solid var(--color-border-soft);
  }
  .editor-section-head {
    padding: 14px 20px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; background: var(--color-bg);
    transition: background 0.15s;
  }
  .editor-section-head:hover {
    background: var(--color-surface);
  }
  .editor-section-head.open {
    background: var(--color-surface-card);
    border-bottom: 1px solid var(--color-border-soft);
  }
  .editor-section-title {
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    color: var(--color-text);
    display: flex; align-items: center; gap: 10px;
  }
  .editor-section-title .num {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--color-accent); letter-spacing: 0.12em;
  }
  .editor-section-summary {
    font-family: var(--font-serif); font-style: italic; font-size: 11px;
    color: var(--color-text-soft); margin-left: 6px;
  }
  .editor-section-chevron {
    color: var(--color-text-faint); font-size: 14px;
    transition: transform 0.15s;
  }
  .editor-section-head.open .editor-section-chevron {
    transform: rotate(90deg);
  }
  .editor-section-body {
    padding: 16px 20px 20px;
    background: var(--color-surface-card);
    display: none;
  }
  .editor-section-body.open { display: block; }

  /* Contrôles dans une section */
  .ctrl-field { margin-bottom: 14px; }
  .ctrl-field:last-child { margin-bottom: 0; }
  .ctrl-field label {
    display: block; font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-text-faint); margin-bottom: 6px;
  }
  .ctrl-field input[type="text"],
  .ctrl-field select {
    width: 100%; padding: 7px 10px;
    border: 1px solid var(--color-border); background: white;
    font-family: var(--font-sans); font-size: 13px; color: var(--color-text);
  }
  .ctrl-field input[type="text"]:focus,
  .ctrl-field select:focus {
    outline: none; border-color: var(--color-accent);
  }
  .ctrl-range {
    display: flex; align-items: center; gap: 12px;
  }
  .ctrl-range input[type="range"] {
    flex: 1;
  }
  .ctrl-range .value {
    font-family: var(--font-mono); font-size: 11px; color: var(--color-accent);
    min-width: 40px; text-align: right;
  }
  /* Segmented control (toggle button group) */
  .ctrl-seg {
    display: flex; gap: 2px;
    background: var(--color-bg); padding: 2px;
    border: 1px solid var(--color-border);
  }
  .ctrl-seg button {
    flex: 1; padding: 7px 10px;
    background: transparent; border: none;
    font-family: var(--font-sans); font-size: 11px; color: var(--color-text-soft);
    cursor: pointer; transition: all 0.15s;
  }
  .ctrl-seg button:hover { color: var(--color-text); }
  .ctrl-seg button.active {
    background: var(--color-accent); color: white;
  }

  .editor-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    display: flex; gap: 10px; align-items: center;
  }
  .editor-footer-spacer { flex: 1; }

  /* ─── Import DOCX ─── */
  .import-stats {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-soft);
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-faint);
    line-height: 1.6;
  }
  .import-stats strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-accent);
    margin-bottom: 2px;
  }
  .import-chapter-list li {
    padding: 8px 10px;
    margin-bottom: 4px;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-soft);
    border-left: 2px solid transparent;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-soft);
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px;
    transition: all 0.15s;
  }
  .import-chapter-list li:hover {
    background: var(--color-surface-deep);
    color: var(--color-text);
  }
  .import-chapter-list li.active {
    border-left-color: var(--color-accent);
    color: var(--color-text);
    font-weight: 500;
  }
  .import-chapter-list li .ch-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .import-chapter-list li .ch-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-faint);
    flex-shrink: 0;
  }
  .import-warning {
    background: rgba(240, 93, 61, 0.08);
    border-left: 2px solid var(--color-action);
    padding: 8px 12px;
    font-size: 11px;
    color: var(--color-text-soft);
    margin-top: 8px;
  }
  .import-warning .label {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-action);
    margin-bottom: 4px;
  }
  #importPreview {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.7;
    color: #1a1a1a;
  }
  #importPreview h1 { font-size: 22px; margin: 0 0 16px; font-weight: 500; }
  #importPreview h2 { font-size: 18px; margin: 20px 0 10px; font-weight: 500; }
  #importPreview h3 { font-size: 16px; margin: 16px 0 8px; font-weight: 500; }
  #importPreview p { margin: 0 0 12px; }
  #importPreview blockquote {
    margin: 12px 0 12px 16px;
    padding-left: 12px;
    border-left: 2px solid #ccc;
    color: #555;
    font-style: italic;
  }
  #importPreview ul, #importPreview ol { margin: 0 0 12px 24px; }
  #importPreview hr { border: none; border-top: 1px solid #ccc; margin: 16px 0; }
  #importPreview code {
    font-family: ui-monospace, monospace;
    background: #f4f0e8; padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.9em;
  }

  /* Scrollbars */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); }