@if (scene) {
  <div class="view-page">
    <header class="view-header">
      <div>
        <h1>
          @if (scene.icon) {
            <lucide-icon [img]="resolveCampaignIcon(scene.icon)" [size]="22" class="title-icon"></lucide-icon>
          }
          {{ scene.name }}
        </h1>
        <p class="view-subtitle">Scène</p>
      </div>
      <div class="view-actions">
        <button type="button" class="btn-primary" (click)="editMode()">
          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
          Modifier
        </button>
        <button type="button" class="btn-danger" (click)="deleteScene()" title="Supprimer la scène">
          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
          Supprimer
        </button>
      </div>
    </header>
    <!-- Illustrations (rendu editorial magazine) -->
    @if ((scene.illustrationImageIds?.length ?? 0) > 0) {
      <section class="view-section">
        <app-image-gallery [imageIds]="scene.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
      </section>
    }
    <!-- Cartes & plans -->
    @if ((scene.mapImageIds?.length ?? 0) > 0) {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
        <app-image-gallery [imageIds]="scene.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
      </section>
    }
    <!-- Description courte -->
    <section class="view-section">
      <h2 class="view-section-title"><span class="view-section-icon">📝</span> Description</h2>
      @if (scene.description?.trim()) {
        <p class="view-section-body">{{ scene.description }}</p>
      } @else {
        <p class="view-section-empty">Non renseigné</p>
      }
    </section>
    <!-- Contexte et ambiance -->
    @if (scene.location?.trim() || scene.timing?.trim()) {
      <div class="view-row">
        @if (scene.location?.trim()) {
          <section class="view-section">
            <h2 class="view-section-title"><span class="view-section-icon">📍</span> Lieu</h2>
            <p class="view-section-body">{{ scene.location }}</p>
          </section>
        }
        @if (scene.timing?.trim()) {
          <section class="view-section">
            <h2 class="view-section-title"><span class="view-section-icon">⏰</span> Moment</h2>
            <p class="view-section-body">{{ scene.timing }}</p>
          </section>
        }
      </div>
    }
    @if (scene.atmosphere?.trim()) {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🌫️</span> Ambiance et atmosphère</h2>
        <p class="view-section-body">{{ scene.atmosphere }}</p>
      </section>
    }
    <!-- Narration pour les joueurs -->
    @if (scene.playerNarration?.trim()) {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">📖</span> Narration pour les joueurs</h2>
        <p class="view-section-body">{{ scene.playerNarration }}</p>
      </section>
    }
    <!-- Choix et conséquences -->
    @if (scene.choicesConsequences?.trim()) {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🔀</span> Choix et conséquences</h2>
        <p class="view-section-body">{{ scene.choicesConsequences }}</p>
      </section>
    }
    <!-- Combat ou rencontre -->
    @if (scene.combatDifficulty?.trim() || scene.enemies?.trim() || linkedEnemies.length > 0) {
      @if (scene.combatDifficulty?.trim()) {
        <section class="view-section">
          <h2 class="view-section-title"><span class="view-section-icon">⚔️</span> Difficulté estimée</h2>
          <p class="view-section-body">{{ scene.combatDifficulty }}</p>
        </section>
      }
      @if (scene.enemies?.trim() || linkedEnemies.length > 0) {
        <section class="view-section">
          <h2 class="view-section-title"><span class="view-section-icon">🐲</span> Ennemis et créatures</h2>
          @if (linkedEnemies.length > 0) {
            <div class="view-chips">
              @for (e of linkedEnemies; track e.id) {
                <a class="view-chip"
                  [routerLink]="['/campaigns', campaignId, 'enemies', e.id]">
                  {{ enemyLabel(e) }}
                </a>
              }
            </div>
          }
          @if (scene.enemies?.trim()) {
            <p class="view-section-body">{{ scene.enemies }}</p>
          }
        </section>
      }
    }
    <!-- Notes et secrets du MJ (privé) -->
    @if (scene.gmSecretNotes?.trim()) {
      <section class="view-section view-section--private">
        <h2 class="view-section-title">
          <span class="view-section-icon">🔒</span>
          Notes et secrets du MJ
        </h2>
        <p class="view-section-body">{{ scene.gmSecretNotes }}</p>
      </section>
    }
    <!-- Pages Lore liées -->
    @if (loreId && (scene.relatedPageIds?.length ?? 0) > 0) {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🔗</span> Pages Lore associées</h2>
        <div class="view-chips">
          @for (relId of scene.relatedPageIds; track relId) {
            <a class="view-chip"
              [routerLink]="['/lore', loreId, 'pages', relId]">
              {{ titleOfRelated(relId) }}
            </a>
          }
        </div>
      </section>
    }
    <!-- Lieu explorable : pièces (mode donjon) -->
    @if ((scene.rooms?.length ?? 0) > 0) {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🏰</span> Pièces du lieu</h2>
        <div class="rooms-readonly">
          @for (r of scene.rooms; track r; let i = $index) {
            <article class="room-readonly">
              <header class="room-readonly-head">
                <span class="room-readonly-index">#{{ i + 1 }}</span>
                <span class="room-readonly-name">{{ r.name }}</span>
                @if (r.floor !== null && r.floor !== undefined) {
                  <span class="room-readonly-floor">
                    Étage {{ r.floor }}
                  </span>
                }
              </header>
              @if (r.description?.trim()) {
                <p class="room-readonly-desc">{{ r.description }}</p>
              }
              <div class="room-readonly-grid">
                @if (r.enemies?.trim() || roomLinkedEnemies(r).length > 0) {
                  <div>
                    <strong>⚔️ Ennemis</strong>
                    @if (roomLinkedEnemies(r).length > 0) {
                      <div class="view-chips">
                        @for (e of roomLinkedEnemies(r); track e.id) {
                          <a class="view-chip"
                            [routerLink]="['/campaigns', campaignId, 'enemies', e.id]">
                            {{ enemyLabel(e) }}
                          </a>
                        }
                      </div>
                    }
                    @if (r.enemies?.trim()) {
                      <p>{{ r.enemies }}</p>
                    }
                  </div>
                }
                @if (r.loot?.trim()) {
                  <div>
                    <strong>💰 Loot</strong>
                    <p>{{ r.loot }}</p>
                  </div>
                }
                @if (r.traps?.trim()) {
                  <div>
                    <strong>⚠️ Pièges</strong>
                    <p>{{ r.traps }}</p>
                  </div>
                }
                @if (r.gmNotes?.trim()) {
                  <div class="room-readonly-private">
                    <strong>🔒 Notes MJ</strong>
                    <p>{{ r.gmNotes }}</p>
                  </div>
                }
              </div>
              @if ((r.branches?.length ?? 0) > 0) {
                <div class="room-readonly-branches">
                  <strong>→ Sorties</strong>
                  <ul>
                    @for (b of r.branches; track b) {
                      <li>
                        <em>{{ b.label }}</em> → {{ roomNameById(scene, b.targetRoomId) }}
                        @if (b.condition?.trim()) {
                          <span class="branch-cond">(si : {{ b.condition }})</span>
                        }
                      </li>
                    }
                  </ul>
                </div>
              }
            </article>
          }
        </div>
      </section>
    }
  </div>
}