@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --bg: #0d0c0a;
  --surface: #171512;
  --surface-strong: #201d18;
  --surface-muted: #2b261f;
  --ink: #f3eee4;
  --ink-soft: #c8bdac;
  --muted: #948979;
  --line: #3a3329;
  --line-strong: #5b4f40;
  --accent: #6bb7ad;
  --accent-strong: #a8ded6;
  --accent-soft: #243630;
  --focus-ring: rgb(107 183 173 / 28%);
  --gold: #c29a54;
  --danger: #e06f5f;
  --danger-soft: #3a1f1b;
  --ok: #8dbd80;
  --shadow: 0 24px 70px rgb(0 0 0 / 38%);
  --topbar-bg: rgb(18 16 13 / 92%);
  --sidebar-bg: rgb(18 16 13 / 86%);
  --panel-bg: rgb(23 21 18 / 86%);
  --hover-bg: rgb(255 255 255 / 5%);
  --input-bg: #12100d;
  --texture-a: rgb(107 183 173 / 6%);
  --texture-b: rgb(194 154 84 / 5%);
  --text-size: 16px;
  --control-height: 38px;
  --control-pad-y: 8px;
  --control-pad-x: 13px;
  --panel-pad: 20px;
  --section-gap: 16px;
  --radius: 8px;
  --sidebar: 340px;
  --app-background-image: url("assets/fond.png");
  --app-background-overlay: transparent;
  --app-background-overlay-strong: transparent;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Accueil principal et navigation entre les espaces */
.home-view {
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
}

.home-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 76px;
  padding: 12px clamp(20px, 5vw, 76px);
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
}

.home-wordmark,
.home-menu button,
.home-menu a {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.home-wordmark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 0;
  letter-spacing: .04em;
}

.home-wordmark > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--gold);
  background: var(--surface);
}

.home-wordmark .ui-icon {
  width: 21px;
  height: 21px;
}

.home-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  overflow-x: auto;
  padding: 3px;
  scrollbar-width: thin;
}

.home-menu button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: .84rem;
}

.home-menu a {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 20px;
  text-decoration: none;
}

.home-menu button:hover,
.home-menu button:focus-visible,
.home-menu a:hover,
.home-menu a:focus-visible,
.home-menu button.active {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--surface);
}

.home-intro {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(74px, 12vw, 154px) 0 clamp(68px, 10vw, 120px);
  text-align: center;
}

.home-eyebrow,
.home-card-type,
.home-section-heading > div > span {
  display: inline-block;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.home-intro h1 {
  max-width: 900px;
  margin: 18px auto 20px;
  font-family: var(--heading-font, Georgia, serif);
  font-size: clamp(2.5rem, 6vw, 5.7rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.035em;
}

.home-intro > p {
  max-width: 680px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.75;
}

.home-primary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.home-destinations {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 96px;
  scroll-margin-top: 96px;
}

.home-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.home-section-heading h2 {
  margin: 7px 0 0;
  font-family: var(--heading-font, Georgia, serif);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 500;
}

.home-section-heading small,
.home-card-meta {
  color: var(--muted);
}

.home-destination-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.home-destination-card {
  display: grid;
  grid-template-columns: minmax(170px, 38%) 1fr;
  min-height: 286px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-bg);
  box-shadow: 0 18px 46px rgb(0 0 0 / 18%);
}

.home-card-visual {
  display: grid;
  min-height: 100%;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--line);
  color: var(--gold);
  background: var(--surface-strong);
}

.home-card-visual > span {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.home-card-visual .ui-icon {
  width: 34px;
  height: 34px;
}

.home-card-visual.has-cover {
  background: var(--surface-strong);
}

.home-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 3vw, 36px);
}

.home-card-copy h3 {
  margin: 9px 0 12px;
  font-family: var(--heading-font, Georgia, serif);
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  font-weight: 500;
}

.home-card-copy > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 18px;
  color: var(--ink-soft);
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.home-card-meta {
  margin-top: auto;
  font-size: .78rem;
}

.home-card-copy > button,
.home-card-copy > .home-card-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
  padding: 11px 0 3px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.home-card-meta + button {
  margin-top: 14px;
}

.home-card-copy > button:hover,
.home-card-copy > button:focus-visible,
.home-card-copy > .home-card-link:hover,
.home-card-copy > .home-card-link:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.home-empty-worlds {
  margin-top: 18px;
  padding: 46px 28px;
  border: 1px dashed var(--line-strong);
  text-align: center;
  background: var(--panel-bg);
}

.home-empty-worlds h3 {
  margin: 0 0 9px;
  font-family: var(--heading-font, Georgia, serif);
  font-size: 1.6rem;
  font-weight: 500;
}

.home-empty-worlds p {
  margin: 0 0 22px;
  color: var(--ink-soft);
}

.ecritoire-home-link {
  position: fixed;
  z-index: 120;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
  font: inherit;
  cursor: pointer;
}

.ecritoire-home-link .ui-icon {
  width: 17px;
  height: 17px;
}

@media (max-width: 1050px) {
  .home-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .home-menu {
    width: 100%;
    justify-content: flex-start;
  }

  .home-destination-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-intro,
  .home-destinations {
    width: min(100% - 24px, 1280px);
  }

  .home-topbar {
    padding-inline: 14px;
  }

  .home-intro {
    padding-top: 64px;
  }

  .home-destination-card {
    grid-template-columns: 1fr;
  }

  .home-card-visual {
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .home-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--app-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  color: var(--ink);
  font-size: var(--text-size);
}

body[data-texture="off"] {
  background: var(--app-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.app-shell {
  min-height: 100vh;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.button,
.icon-button,
.tree-action,
.link-button {
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  min-height: var(--control-height);
  border-radius: calc(var(--radius) - 1px);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--control-pad-y) var(--control-pad-x);
  font-weight: 650;
}

.button:hover,
.icon-button:hover,
.tree-action:hover,
.link-button:hover {
  border-color: var(--line-strong);
  background: var(--hover-bg);
}

.button:active,
.icon-button:active,
.tree-action:active,
.link-button:active {
  transform: translateY(1px);
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #07110f;
}

.button.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.button.subtle {
  background: transparent;
}

.button.danger,
.icon-button.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  background: var(--danger-soft);
}

.button.danger:hover,
.icon-button.danger:hover {
  background: color-mix(in srgb, var(--danger) 18%, var(--danger-soft));
}

.button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  padding: 0;
  font-weight: 750;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  min-height: auto;
  padding: 0;
  font-weight: 700;
}

.muted-text {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.field {
  display: grid;
  gap: 8px;
}

.field > span,
.label-text {
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 700;
}

.field input,
.field textarea,
.field select,
.search-input,
.inline-input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  border-radius: calc(var(--radius) - 1px);
  padding: 10px 11px;
  outline: none;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.search-input:focus,
.inline-input:focus,
.editor-surface:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.library-view {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 32px 0 48px;
}

.library-topbar,
.world-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.library-title h1,
.world-title h1 {
  margin: 0;
  letter-spacing: 0;
}

.library-title h1 {
  font-size: clamp(2rem, 5vw, 4.3rem);
  line-height: 0.95;
}

.library-title p,
.world-title p {
  color: var(--ink-soft);
  margin: 8px 0 0;
  max-width: 780px;
}

.library-actions,
.world-actions,
.content-actions,
.page-actions,
.sidebar-actions,
.section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.world-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  min-height: 360px;
}

.world-card-cover,
.placeholder-cover {
  width: 100%;
  border: 0;
  padding: 0;
  min-height: 150px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent 45%),
    linear-gradient(45deg, color-mix(in srgb, var(--gold) 22%, transparent), transparent 55%),
    var(--surface-muted);
  position: relative;
}

.world-card-cover img,
.read-main-image img,
.secondary-gallery img,
.page-image-preview img,
.image-preview img,
.embedded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.world-card-body {
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 16px;
}

.world-card h2 {
  font-size: 1.28rem;
  margin: 0;
}

.world-card p {
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 8px 0 0;
}

.world-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.86rem;
}

.world-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.empty-state {
  margin-top: 26px;
  min-height: 380px;
  display: grid;
  place-items: center;
  background: var(--panel-bg);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  padding: 36px;
}

.empty-state h2 {
  margin: 0 0 8px;
  font-size: 1.4rem;
}

.empty-state p {
  margin: 0 0 20px;
  color: var(--ink-soft);
  max-width: 560px;
}

.world-view {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.world-topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}

.world-title {
  min-width: 220px;
}

.world-title h1 {
  font-size: 1.28rem;
}

.world-title p {
  font-size: 0.88rem;
  max-width: 520px;
}

.world-search {
  position: relative;
  flex: 1 1 360px;
  max-width: 620px;
}

.search-input {
  padding-left: 36px;
}

.search-mark {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 800;
}

.search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: min(460px, calc(100vh - 110px));
  overflow: auto;
  z-index: 40;
}

.search-result {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.search-result:last-child {
  border-bottom: 0;
}

.search-result:hover {
  background: var(--hover-bg);
}

.search-result small {
  color: var(--muted);
  font-weight: 700;
}

.search-result span {
  color: var(--ink-soft);
  line-height: 1.35;
}

.workspace {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 0;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--sidebar-bg);
  min-height: calc(100vh - 72px);
  padding: 16px;
  overflow: auto;
}

.sidebar-section {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.sidebar-section h2 {
  margin: 0;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--muted);
}

.sidebar-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sidebar-actions .button {
  padding-inline: 8px;
}

.view-nav {
  display: grid;
  gap: 7px;
}

.view-nav-button {
  min-height: 36px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: calc(var(--radius) - 1px);
  padding: 8px 10px;
  text-align: left;
  font-weight: 750;
}

.view-nav-button:hover,
.view-nav-button.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  color: var(--ink);
}

.tree {
  display: grid;
  gap: 3px;
}

.tree-node {
  display: grid;
  gap: 3px;
}

.tree-row-shell {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px;
  padding-left: calc(var(--depth) * 16px);
}

.tree-toggle,
.tree-toggle-spacer {
  width: 28px;
  min-width: 28px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: calc(var(--radius) - 2px);
}

.tree-toggle {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
  color: var(--muted);
  font-weight: 850;
}

.tree-toggle:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--hover-bg);
}

.tree-row,
.page-row {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: calc(var(--radius) - 1px);
  border: 1px solid transparent;
  background: transparent;
  padding: 7px 8px;
  color: var(--ink);
  width: 100%;
  text-align: left;
}

.tree-row:hover,
.page-row:hover {
  background: var(--hover-bg);
  border-color: var(--line);
}

.tree-row.active,
.page-row.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.tree-label,
.page-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.tree-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.tree-children,
.tree-pages {
  display: grid;
  gap: 3px;
}

.tree-pages {
  margin-top: 2px;
}

.page-row {
  color: var(--ink-soft);
  font-size: 0.92rem;
  padding-left: calc((var(--depth) * 16px) + 32px);
}

.world-explorer {
  min-height: 0;
}

.explorer-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.explorer-actions .button {
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  font-size: 0.76rem;
  line-height: 1.1;
}

.tree-filter-field {
  gap: 5px;
}

.tree-filter-field span {
  font-size: 0.76rem;
}

.tree {
  display: grid;
  gap: 1px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.88rem;
}

.tree-node {
  display: grid;
  gap: 1px;
}

.tree-row-shell {
  position: relative;
  display: grid;
  grid-template-columns: 18px 24px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  min-height: 30px;
  padding-left: calc(var(--depth) * 18px);
}

.tree-row-shell > .tree-branch-line,
.page-row > .tree-branch-line {
  position: absolute;
  left: calc((var(--depth) * 18px) + 8px);
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: color-mix(in srgb, var(--line-strong) 58%, transparent);
  opacity: 0.45;
}

.tree-toggle,
.tree-toggle-spacer {
  width: 24px;
  min-width: 24px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
}

.tree-toggle {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.tree-toggle:hover {
  color: var(--gold);
  border-color: var(--line);
  background: var(--hover-bg);
}

.tree-row,
.page-row,
.world-root-row {
  position: relative;
  min-width: 0;
  min-height: 30px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  padding: 5px 7px;
  color: var(--ink);
  text-align: left;
  line-height: 1.15;
  letter-spacing: 0;
}

.page-row {
  color: var(--ink-soft);
  padding-left: calc((var(--depth) * 18px) + 44px);
}

.world-root-row {
  margin-bottom: 4px;
  border-color: color-mix(in srgb, var(--gold) 24%, var(--line));
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}

.tree-row:hover,
.page-row:hover,
.world-root-row:hover {
  background: var(--hover-bg);
  border-color: var(--line);
}

.tree-row.active,
.page-row.active,
.world-root-row.active {
  background: color-mix(in srgb, var(--gold) 13%, var(--surface-strong));
  border-color: color-mix(in srgb, var(--gold) 52%, var(--line));
  color: var(--ink);
}

.tree-icon {
  flex: 0 0 18px;
  width: 18px;
  color: color-mix(in srgb, var(--gold) 78%, var(--ink-soft));
  text-align: center;
  font-size: 0.82rem;
}

.page-icon {
  color: var(--accent-strong);
}

.tree-label,
.page-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.tree-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.tree-children,
.tree-pages {
  display: grid;
  gap: 1px;
}

.status-pill,
.tag-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 750;
}

.status-pill.idee {
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
  color: color-mix(in srgb, var(--gold) 82%, var(--ink));
}

.status-pill.en-cours {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--accent-strong);
}

.status-pill.utilisable {
  background: color-mix(in srgb, var(--ok) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 42%, var(--line));
  color: color-mix(in srgb, var(--ok) 82%, var(--ink));
}

.status-pill.termine {
  background: color-mix(in srgb, #9c85c8 18%, var(--surface));
  border-color: color-mix(in srgb, #9c85c8 42%, var(--line));
  color: color-mix(in srgb, #cdbbf0 82%, var(--ink));
}

.filters {
  display: grid;
  gap: 10px;
}

.content {
  min-width: 0;
  padding: 22px;
  overflow: auto;
}

.content-panel {
  width: min(980px, 100%);
  margin: 0 auto;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-header h2,
.read-page h2,
.edit-page h2 {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.15;
}

.section-header p {
  color: var(--ink-soft);
  margin: 7px 0 0;
  line-height: 1.5;
}

.category-overview {
  display: grid;
  gap: var(--section-gap);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.mini-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
  text-align: left;
  color: var(--ink);
  min-height: 120px;
}

.mini-card:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-strong) 84%, var(--accent-soft));
}

.mini-card h3 {
  margin: 0;
  font-size: 1.02rem;
}

.mini-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.mini-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.8rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.84rem;
}

.breadcrumb-item {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 5px;
  padding: 4px 6px;
  font-weight: 700;
}

.breadcrumb-item:hover,
.breadcrumb-item.active {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border-color: color-mix(in srgb, var(--gold) 28%, transparent);
}

.breadcrumb-separator {
  color: var(--muted);
}

.category-dashboard {
  display: grid;
  gap: var(--section-gap);
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-stats div,
.selected-details {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
  border-radius: var(--radius);
  padding: 12px;
}

.dashboard-stats strong {
  display: block;
  color: var(--gold);
  font-size: 1.28rem;
  line-height: 1;
}

.dashboard-stats span {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.25;
}

.selected-details {
  display: grid;
  gap: 10px;
}

.selected-details h3,
.outline-panel h3 {
  margin: 0;
  font-size: 1rem;
}

.selected-details dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 14px;
  margin: 0;
}

.selected-details dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.selected-details dd {
  margin: 3px 0 0;
  color: var(--ink);
  line-height: 1.35;
}

.outline-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-radius: var(--radius);
  padding: 12px;
}

.compact-header {
  margin-bottom: 0;
}

.world-outline,
.outline-children,
.outline-pages,
.compact-list {
  display: grid;
  gap: 6px;
}

.outline-node {
  display: grid;
  gap: 6px;
}

.outline-row,
.compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
  padding: 7px 8px;
  margin-left: calc(var(--depth, 0) * 18px);
}

.page-row-card,
.page-compact-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.outline-title,
.compact-row-main {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  text-align: left;
  font-weight: 750;
}

.outline-title span:not(.tree-icon),
.compact-row-main span:not(.tree-icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-title small,
.compact-row-main small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.tree-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.tree-row-actions .button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.78rem;
}

.compact-page-meta {
  gap: 5px;
  justify-content: flex-end;
}

.page-location {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.page-details {
  margin-bottom: 16px;
}

.read-page,
.edit-page,
.world-settings {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--panel-pad);
}

.read-page-header {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.page-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.read-main-image {
  height: min(48vh, 430px);
  min-height: 220px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 20px;
  background: var(--surface-muted);
}

.page-body {
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.72;
}

.page-body h1,
.page-body h2,
.page-body h3 {
  line-height: 1.2;
  margin: 1.25em 0 0.45em;
}

.page-body p,
.page-body ul,
.page-body ol,
.page-body blockquote {
  margin: 0 0 1em;
}

.page-body blockquote {
  border-left: 4px solid var(--accent);
  padding: 8px 0 8px 16px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.page-body a {
  color: var(--accent-strong);
  font-weight: 700;
}

.page-body img {
  max-height: 520px;
  object-fit: contain;
  margin: 16px auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.page-section {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 18px;
}

.page-section h3 {
  margin: 0 0 12px;
  font-size: 1.08rem;
}

.secondary-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.secondary-gallery figure {
  margin: 0;
  display: grid;
  gap: 8px;
}

.secondary-gallery img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-muted);
}

.secondary-gallery figcaption {
  color: var(--muted);
  font-size: 0.83rem;
}

.private-notes {
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-radius: var(--radius);
  padding: 14px;
  color: color-mix(in srgb, var(--gold) 42%, var(--ink));
  white-space: pre-wrap;
}

.linked-pages {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.custom-fields-read {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 20px;
}

.custom-field-read-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 0;
}

.custom-field-read-item {
  border: 1px solid var(--line);
  background: var(--surface-strong);
  border-radius: var(--radius);
  padding: 12px;
}

.custom-field-read-item dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.custom-field-read-item dd {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.custom-field-read-item ul {
  margin: 0;
  padding-left: 18px;
}

.edit-form {
  display: grid;
  gap: calc(var(--section-gap) + 2px);
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 14px;
}

.page-image-preview,
.image-preview {
  border: 1px dashed var(--line-strong);
  background: var(--surface-muted);
  min-height: 150px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  text-align: center;
}

.image-preview {
  min-height: 180px;
}

.rich-editor {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--input-bg);
}

.editor-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.editor-surface {
  min-height: 420px;
  max-height: 65vh;
  overflow: auto;
  padding: 18px;
  outline: none;
  line-height: 1.72;
  background: var(--input-bg);
  color: var(--ink);
}

.editor-surface h2 {
  font-size: 1.35rem;
  margin: 1.1em 0 0.4em;
}

.editor-surface p {
  margin: 0 0 1em;
}

.editor-surface blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 14px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.editor-surface img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 12px auto;
}

.image-list,
.link-list,
.checkbox-grid {
  display: grid;
  gap: 8px;
}

.custom-fields-editor,
.template-editor-section {
  display: grid;
  gap: 12px;
}

.template-apply-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.custom-field-list {
  display: grid;
  gap: 10px;
}

.custom-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  border-radius: var(--radius);
  padding: 10px;
}

.custom-field-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.7fr) minmax(220px, 1.4fr);
  gap: 10px;
}

.template-field-grid {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
}

.custom-field-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.custom-checkbox-field .switch-field {
  min-height: 42px;
}

.image-item,
.checkbox-item {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  border-radius: var(--radius);
  padding: 8px;
}

.image-item img {
  width: 70px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
}

.checkbox-item {
  grid-template-columns: auto minmax(0, 1fr);
}

.checkbox-item input {
  width: 18px;
  height: 18px;
}

.feature-view {
  display: grid;
  gap: var(--section-gap);
}

.compact-empty {
  min-height: 260px;
  margin-top: 0;
}

.timeline-list {
  display: grid;
  gap: 0;
}

.timeline-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
}

.timeline-line {
  position: relative;
  min-height: 100%;
}

.timeline-line::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line-strong);
}

.timeline-line::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.timeline-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  display: grid;
  gap: 10px;
}

.timeline-item.selected .timeline-card {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.timeline-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.timeline-card h3 {
  margin: 4px 0 0;
  font-size: 1.18rem;
}

.timeline-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.timeline-date,
.timeline-order {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 14px;
  align-items: start;
}

.map-canvas {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-muted);
  min-height: 320px;
}

.map-canvas > img {
  width: 100%;
  height: auto;
  user-select: none;
}

.map-marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translate(-50%, -100%);
  border: 2px solid #fff;
  border-radius: 999px 999px 999px 3px;
  background: var(--marker-color);
  box-shadow: 0 8px 18px rgb(0 0 0 / 42%);
  z-index: 3;
}

.map-marker span {
  display: block;
  width: 8px;
  height: 8px;
  margin: 7px auto 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 45%);
}

.map-marker.active {
  box-shadow: 0 0 0 4px var(--focus-ring), 0 8px 18px rgb(0 0 0 / 42%);
}

.map-popup {
  position: absolute;
  left: var(--popup-left);
  top: var(--popup-top);
  width: min(360px, calc(100% - 24px));
  z-index: 5;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}

.map-popup p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.map-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.map-linked-page {
  display: grid;
  gap: 10px;
}

.map-linked-page img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px);
}

.map-linked-page h4 {
  margin: 0 0 8px;
}

.map-marker-panel {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.map-marker-panel h3 {
  margin: 0;
}

.marker-list {
  display: grid;
  gap: 7px;
}

.marker-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: calc(var(--radius) - 1px);
  padding: 8px;
  text-align: left;
}

.marker-list-item:hover,
.marker-list-item.active {
  background: var(--accent-soft);
  color: var(--ink);
}

.marker-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--marker-color);
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.template-card {
  display: grid;
  gap: 14px;
  align-content: space-between;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
}

.template-card h3 {
  margin: 0;
}

.template-card p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.template-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.template-modal {
  width: min(760px, 100%);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 62%);
  display: grid;
  place-items: center;
  padding: 22px;
  z-index: 100;
}

.modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.modal h2 {
  margin: 0 0 16px;
}

.modal-form {
  display: grid;
  gap: 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.appearance-modal {
  width: min(680px, 100%);
}

.appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap);
}

.field output {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.field input[type="color"] {
  min-height: 44px;
  padding: 4px;
}

.field input[type="range"] {
  accent-color: var(--accent);
}

.switch-field {
  min-height: var(--control-height);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-weight: 750;
  border: 1px solid var(--line);
  background: var(--input-bg);
  border-radius: calc(var(--radius) - 1px);
  padding: var(--control-pad-y) var(--control-pad-x);
}

.switch-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  z-index: 120;
}

.toast {
  background: var(--surface-strong);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 10px 12px;
  border-radius: calc(var(--radius) - 1px);
  box-shadow: var(--shadow);
  max-width: 360px;
}

.print-root {
  display: none;
}

@media (max-width: 900px) {
  .world-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .world-search {
    max-width: none;
    flex-basis: auto;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 42vh;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .custom-field-grid,
  .template-field-grid,
  .template-apply-row,
  .map-layout {
    grid-template-columns: 1fr;
  }

  .map-marker-panel {
    order: 2;
  }

  .appearance-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .library-view {
    width: min(100% - 24px, 1180px);
    padding-top: 18px;
  }

  .library-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .library-actions,
  .world-actions,
  .content-actions,
  .page-actions,
  .section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .content {
    padding: 14px;
  }

  .read-page,
  .edit-page,
  .world-settings {
    padding: 14px;
  }

  .dashboard-stats,
  .outline-row,
  .compact-row,
  .page-row-card,
  .page-compact-row {
    grid-template-columns: 1fr;
  }

  .tree-row-actions,
  .compact-page-meta {
    justify-content: flex-start;
  }

  .custom-field-row,
  .timeline-card-header {
    grid-template-columns: 1fr;
  }

  .custom-field-row {
    align-items: stretch;
  }

  .custom-field-actions,
  .timeline-card-header,
  .template-apply-row {
    flex-wrap: wrap;
  }
}

@media print {
  body {
    background: white;
  }

  body.printing > .app-shell,
  body.printing > .toast-region,
  body.printing > input,
  body.printing > template,
  body.printing > script {
    display: none !important;
  }

  body.printing .print-root {
    display: block;
  }

  .print-root {
    color: #111;
    font-family: Georgia, "Times New Roman", serif;
    padding: 0;
  }

  .print-document {
    max-width: 760px;
    margin: 0 auto;
  }

  .print-document h1 {
    font-size: 30px;
    margin: 0 0 16px;
  }

  .print-document h2 {
    font-size: 22px;
    margin: 28px 0 10px;
    break-after: avoid;
  }

  .print-document img {
    max-width: 100%;
    max-height: 470px;
    object-fit: contain;
    margin: 12px auto;
  }

  .print-meta {
    color: #555;
    border-bottom: 1px solid #ccc;
    margin-bottom: 18px;
    padding-bottom: 10px;
  }

  .print-page {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}


/* Éditeur de texte stable */
[data-editor-holder] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.rich-editor,
.rich-editor-stable {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--input-bg);
}

.rich-editor-stable .editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.editor-block-select-label {
  display: inline-flex;
  align-items: center;
  width: 155px;
  min-width: 155px;
  max-width: 100%;
}

.editor-block-select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px);
  background: var(--input-bg);
  color: var(--ink);
  padding: 0 10px;
  outline: none;
  font-weight: 750;
}

.editor-block-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.rich-editor-stable .editor-command {
  flex: 0 0 auto;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  white-space: nowrap;
  user-select: none;
}

.rich-editor-stable .editor-command-wide {
  width: auto;
  min-width: 68px;
  padding: 0 10px;
  font-size: 0.84rem;
}

.rich-editor-stable .editor-command.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  color: var(--accent-strong);
}

.editor-bold {
  font-weight: 900;
}

.editor-italic {
  font-style: italic;
}

.editor-underline {
  text-decoration: underline;
}

.editor-separator {
  flex: 0 0 1px;
  width: 1px;
  height: 28px;
  background: var(--line-strong);
  margin: 0 2px;
  opacity: 0.72;
}

.rich-editor-stable .editor-surface {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 520px;
  max-height: 72vh;
  overflow: auto;
  padding: 22px;
  outline: none;
  background: var(--input-bg);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
  line-height: 1.72;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  writing-mode: horizontal-tb;
  direction: ltr;
  unicode-bidi: plaintext;
  caret-color: var(--accent-strong);
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.rich-editor-stable .editor-surface:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.rich-editor-stable .editor-surface * {
  max-width: 100%;
  min-width: 0;
  writing-mode: horizontal-tb;
  word-break: normal;
}

.rich-editor-stable .editor-surface p,
.rich-editor-stable .editor-surface ul,
.rich-editor-stable .editor-surface ol,
.rich-editor-stable .editor-surface blockquote,
.rich-editor-stable .editor-surface figure {
  width: auto;
  margin: 0 0 1em;
}

.rich-editor-stable .editor-surface h1,
.rich-editor-stable .editor-surface h2,
.rich-editor-stable .editor-surface h3 {
  width: auto;
  margin: 1.1em 0 0.45em;
  line-height: 1.2;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.rich-editor-stable .editor-surface h1 {
  font-size: 2rem;
}

.rich-editor-stable .editor-surface h2 {
  font-size: 1.5rem;
}

.rich-editor-stable .editor-surface h3 {
  font-size: 1.24rem;
}

.rich-editor-stable .editor-surface ul,
.rich-editor-stable .editor-surface ol {
  padding-left: 1.5em;
}

.rich-editor-stable .editor-surface li {
  margin: 0.25em 0;
}

.rich-editor-stable .editor-surface blockquote {
  border-left: 4px solid var(--accent);
  padding: 10px 14px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
}

.rich-editor-stable .editor-surface a,
.page-body a {
  color: var(--accent-strong);
  font-weight: 750;
  text-underline-offset: 0.16em;
}

.rich-editor-stable .editor-surface img,
.page-body img {
  display: block;
  max-width: min(100%, 760px);
  max-height: 560px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 12px auto;
  background: var(--surface-muted);
}

.rich-editor-stable .editor-surface hr,
.page-body hr {
  border: 0;
  border-top: 1px solid var(--line-strong);
  margin: 1.5em 0;
}

.editor-status {
  flex: 0 0 auto;
  width: 100%;
  border-top: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  padding: 8px 12px;
  text-align: right;
}

@media (max-width: 680px) {
  .editor-block-select-label {
    width: 100%;
    min-width: 100%;
  }

  .editor-separator {
    display: none;
  }

  .rich-editor-stable .editor-surface {
    min-height: 420px;
    padding: 18px;
  }
}

/* Boutons dark fantasy avec asset bouton.png, réservés aux barres hautes. */
:root {
  --fantasy-button-image: url("assets/bouton.png");
  --fantasy-button-height: 48px;
  --fantasy-button-height-small: 44px;
  --fantasy-button-min-width: 132px;
  --fantasy-button-padding-x: 26px;
  --fantasy-button-crop-x: -10px;
  --fantasy-button-crop-y: -7px;
  --fantasy-button-text: #d8b66a;
  --fantasy-button-text-strong: #f4d987;
  --fantasy-button-font: "Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

.topbar-fantasy-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: var(--fantasy-button-min-width) !important;
  min-height: var(--fantasy-button-height) !important;
  height: var(--fantasy-button-height) !important;
  padding: 0 var(--fantasy-button-padding-x) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fantasy-button-text) !important;
  font-family: var(--fantasy-button-font) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow:
    0 1px 1px rgb(0 0 0 / 86%),
    0 0 8px rgb(216 182 106 / 32%) !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden !important;
}

.topbar-fantasy-button::before {
  content: "";
  position: absolute;
  inset: var(--fantasy-button-crop-y) var(--fantasy-button-crop-x);
  z-index: -1;
  background-image: var(--fantasy-button-image);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  pointer-events: none;
  filter: brightness(1.02) saturate(1.04);
}

.topbar-fantasy-button > * {
  position: relative;
  z-index: 1;
}

.topbar-fantasy-button:hover {
  background: transparent !important;
  color: var(--fantasy-button-text-strong) !important;
  transform: translateY(-1px);
}

.topbar-fantasy-button:hover::before {
  filter: brightness(1.16) saturate(1.14);
}

.topbar-fantasy-button:active {
  transform: translateY(1px);
}

.topbar-fantasy-button:active::before {
  filter: brightness(0.92) saturate(0.95);
}

.topbar-fantasy-button.primary,
.topbar-fantasy-button.danger {
  background: transparent !important;
  color: var(--fantasy-button-text-strong) !important;
}

.topbar-fantasy-button.primary::before,
.topbar-fantasy-button.danger::before {
  filter: brightness(1.1) saturate(1.12);
}

.topbar-fantasy-button:focus-visible {
  box-shadow: 0 0 0 3px rgb(216 182 106 / 35%) !important;
}

.button:disabled,
.icon-button:disabled,
button:disabled {
  opacity: 0.5 !important;
  transform: none !important;
}

.library-actions .topbar-fantasy-button,
.world-actions .topbar-fantasy-button {
  min-width: 136px !important;
}

/* Éléments conservant leur rôle graphique propre. */
.world-card-cover,
.map-marker,
.search-result {
  min-width: initial !important;
  min-height: initial !important;
  height: auto !important;
  padding: initial;
  background-size: initial;
  overflow: visible;
}

.world-card-cover::before,
.map-marker::before,
.search-result::before {
  content: none !important;
}

.rich-editor-stable .editor-surface a.page-link,
.rich-editor-stable .editor-surface a.internal-page-link,
.page-body a.page-link,
.page-body a.internal-page-link {
  display: inline;
  color: color-mix(in srgb, var(--gold) 72%, var(--accent-strong));
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 64%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-radius: calc(var(--radius) - 3px);
  padding: 0 0.18em;
}

.rich-editor-stable .editor-surface a.page-link:hover,
.rich-editor-stable .editor-surface a.internal-page-link:hover,
.page-body a.page-link:hover,
.page-body a.internal-page-link:hover {
  color: var(--fantasy-button-text-strong);
  background: color-mix(in srgb, var(--gold) 20%, transparent);
}

.timeline-controls {
  align-items: center;
  gap: 10px;
}

.timeline-layout-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.timeline-layout-toggle .button {
  min-width: 118px !important;
}

.timeline-layout-toggle .button.active {
  color: var(--fantasy-button-text-strong) !important;
}

.timeline-list-vertical .timeline-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent 42%),
    var(--surface);
}

.timeline-list-horizontal {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 10px 2px 18px;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--line-strong) transparent;
}

.timeline-list-horizontal .timeline-item {
  flex: 0 0 clamp(280px, 34vw, 390px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 38px minmax(0, 1fr);
  gap: 8px;
  scroll-snap-align: start;
}

.timeline-list-horizontal .timeline-line {
  min-height: 38px;
}

.timeline-list-horizontal .timeline-line::before {
  left: 0;
  right: 0;
  top: 18px;
  bottom: auto;
  width: auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}

.timeline-list-horizontal .timeline-line::after {
  left: 50%;
  top: 12px;
}

.timeline-list-horizontal .timeline-card {
  height: 100%;
  margin: 0 8px 0 0;
  align-content: start;
}

.timeline-list-horizontal .timeline-card-header {
  display: grid;
  grid-template-columns: 1fr;
}

.map-marker {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.map-marker.has-image {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 2px !important;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--gold) 72%, #ffffff);
  background: var(--surface-strong);
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgb(0 0 0 / 56%), 0 0 0 3px rgb(0 0 0 / 22%);
}

.map-marker.has-image.active {
  box-shadow: 0 0 0 4px var(--focus-ring), 0 10px 24px rgb(0 0 0 / 56%);
}

.map-marker-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}

.marker-list-item {
  justify-content: flex-start !important;
  gap: 10px !important;
  padding-inline: 18px !important;
}

.marker-list-item span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marker-thumb {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--gold) 46%, var(--line));
  border-radius: 999px;
  background: var(--surface-muted);
  box-shadow: 0 4px 10px rgb(0 0 0 / 36%);
}

.map-popup-marker-image {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-radius: 999px;
  background: var(--surface-muted);
  box-shadow: 0 8px 18px rgb(0 0 0 / 34%);
}

.marker-image-editor {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  padding: 12px;
}

.marker-image-editor [hidden] {
  display: none !important;
}

.marker-image-preview {
  min-height: 112px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-muted);
  color: var(--muted);
  text-align: center;
  overflow: hidden;
}

.marker-image-preview img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.expanded-map-backdrop {
  place-items: stretch;
  padding: 14px;
}

.expanded-map-modal {
  width: min(1440px, calc(100vw - 28px));
  max-height: none;
  height: calc(100vh - 28px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
}

.expanded-map-header {
  margin: 0;
}

.expanded-map-actions {
  align-items: center;
}

.expanded-map-actions .button {
  min-width: 92px !important;
}

.expanded-map-scroll {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 32%),
    var(--surface-muted);
}

.map-canvas-expanded {
  min-width: min(1180px, calc(100vw - 72px));
  max-width: none;
}

.map-canvas-expanded .map-popup {
  width: min(400px, calc(100% - 24px));
}

@media (max-width: 680px) {
  .timeline-controls,
  .timeline-layout-toggle {
    align-items: stretch;
    width: 100%;
  }

  .timeline-layout-toggle .button {
    flex: 1 1 140px;
  }

  .timeline-list-horizontal .timeline-item {
    flex-basis: min(84vw, 340px);
  }

  .expanded-map-backdrop {
    padding: 8px;
  }

  .expanded-map-modal {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }
}

.pages-workspace {
  padding: 0;
}

.pages-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--section-gap);
  align-items: start;
}

.world-pilot-panel,
.inspector-panel,
.type-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-bg);
  box-shadow: 0 18px 45px rgb(0 0 0 / 18%);
}

.world-pilot-panel,
.type-section {
  padding: var(--panel-pad);
}

.pilot-header {
  align-items: start;
}

.pilot-tree,
.pilot-children,
.pilot-pages {
  display: grid;
  gap: 6px;
}

.pilot-node {
  display: grid;
  gap: 6px;
}

.pilot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 6px 8px 6px calc(8px + var(--depth, 0) * 18px);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.pilot-row:hover,
.pilot-row.selected {
  border-color: var(--line-strong);
  background: var(--hover-bg);
}

.pilot-row.selected {
  box-shadow: inset 3px 0 0 var(--accent);
}

.pilot-main,
.inspector-list-row {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.pilot-main {
  display: grid;
  grid-template-columns: 26px minmax(120px, 1fr) minmax(120px, auto);
  gap: 8px;
  align-items: center;
}

.pilot-icon,
.page-type-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  background: var(--surface-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.pilot-icon.page-icon {
  color: var(--accent);
}

.pilot-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.pilot-counts,
.pilot-meta-inline {
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.pilot-meta-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.pilot-primary-action {
  min-width: 74px !important;
}

.action-menu {
  position: relative;
  justify-self: end;
}

.action-menu > summary {
  list-style: none;
  cursor: pointer;
}

.action-menu > summary::-webkit-details-marker {
  display: none;
}

.action-menu-popover {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.action-menu-popover button {
  min-height: 32px;
  padding: 7px 9px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.action-menu-popover button:hover,
.action-menu-popover button:focus-visible {
  background: var(--hover-bg);
}

.action-menu-popover button.danger {
  color: var(--danger);
}

.inspector-panel {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.inspector-header h2 {
  margin: 4px 0;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.inspector-header p,
.inspector-summary {
  color: var(--ink-soft);
  line-height: 1.55;
}

.inspector-kicker {
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.inspector-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.inspector-stats div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.inspector-stats dt {
  color: var(--muted);
  font-size: 0.76rem;
}

.inspector-stats dd {
  margin: 3px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inspector-actions .button {
  flex: 1 1 auto;
}

.inspector-section {
  display: grid;
  gap: 8px;
}

.inspector-section h3 {
  margin: 0;
  font-size: 0.95rem;
}

.inspector-list-row {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.inspector-list-row:hover,
.inspector-list-row:focus-visible {
  border-color: var(--line-strong);
  background: var(--hover-bg);
}

.inspector-list-row small {
  color: var(--muted);
}

.inspector-main-image {
  width: 100%;
  max-height: 190px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.inspector-meta {
  gap: 6px;
}

.inspector-fields {
  display: grid;
  gap: 8px;
  margin: 0;
}

.inspector-fields div {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.inspector-fields dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.inspector-fields dd {
  margin: 0;
}

.types-view {
  display: grid;
  gap: var(--section-gap);
}

.page-type-card {
  border-color: color-mix(in srgb, var(--type-accent, var(--accent)) 38%, var(--line));
  box-shadow: inset 3px 0 0 var(--type-accent, var(--accent));
}

.page-type-card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.page-type-icon {
  width: 34px;
  height: 34px;
  color: var(--type-accent, var(--accent));
  border-color: color-mix(in srgb, var(--type-accent, var(--accent)) 42%, var(--line));
}

.type-card-details {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--ink-soft);
}

.type-card-details div {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 8px;
}

.type-card-details dt {
  color: var(--muted);
}

.type-card-details dd {
  margin: 0;
}

.segmented-control,
.map-zoom-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.segmented-control .button.active,
.map-toolbar .button.active {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.map-type-filters {
  display: flex;
  flex: 1 1 260px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.map-type-toggle {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: var(--surface-muted);
  font-size: 0.82rem;
}

.map-canvas.map-mode-pan {
  cursor: grab;
}

.expanded-map-scroll.panning,
.expanded-map-scroll.panning .map-canvas {
  cursor: grabbing;
}

.map-canvas.map-mode-add {
  cursor: crosshair;
}

.marker-list-item {
  grid-template-columns: auto minmax(0, 1fr);
}

.marker-list-item small {
  grid-column: 2;
  color: var(--muted);
}

.map-marker::after {
  content: attr(data-marker-type);
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  translate: -50% 0;
  max-width: 80px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgb(0 0 0 / 62%);
  color: #fff;
  font-size: 0.62rem;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.map-marker:hover::after,
.map-marker.active::after {
  opacity: 1;
}

.map-marker.has-image {
  overflow: visible !important;
}

.timeline-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.timeline-filter-field {
  margin: 0;
}

.timeline-groups {
  display: grid;
  gap: var(--section-gap);
}

.timeline-period-group {
  display: grid;
  gap: 10px;
}

.timeline-period-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--line);
}

.timeline-period-header h3 {
  margin: 0;
}

.timeline-period-header span {
  color: var(--muted);
  font-size: 0.85rem;
}

.timeline-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.timeline-impact {
  padding: 8px 10px;
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}

.timeline-impact strong {
  margin-right: 6px;
  color: var(--gold);
}

.timeline-card > .action-menu {
  justify-self: start;
  margin-top: 8px;
}

.timeline-detail-panel {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.timeline-detail-panel div {
  display: grid;
  gap: 3px;
}

.timeline-detail-panel strong {
  color: var(--muted);
  font-size: 0.78rem;
}

.timeline-item.importance-mineure .timeline-card {
  border-left: 3px solid var(--muted);
}

.timeline-item.importance-normale .timeline-card {
  border-left: 3px solid var(--accent);
}

.timeline-item.importance-majeure .timeline-card {
  border-left: 3px solid var(--gold);
}

.timeline-item.importance-fondatrice .timeline-card {
  border-left: 3px solid var(--danger);
}

@media (max-width: 1100px) {
  .pages-workspace-grid {
    grid-template-columns: 1fr;
  }

  .inspector-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  .pilot-row,
  .pilot-main {
    grid-template-columns: 1fr;
  }

  .pilot-primary-action,
  .action-menu {
    justify-self: stretch;
  }

  .pilot-meta-inline {
    justify-content: flex-start;
  }

  .inspector-stats,
  .timeline-filters {
    grid-template-columns: 1fr;
  }

  .map-toolbar,
  .map-type-filters {
    justify-content: stretch;
  }

  .map-type-toggle,
  .segmented-control .button,
  .map-zoom-controls .button {
    flex: 1 1 auto;
  }
}

/* Tableau blanc, tableau des fiches et audit */
.board-shell {
  display: grid;
  gap: var(--section-gap);
  min-width: 0;
}

.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.board-toolbar .button,
.board-toolbar select {
  min-height: var(--control-height);
}

.board-toolbar .button.active {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.board-toolbar-separator {
  width: 1px;
  height: 28px;
  background: var(--line);
}

.board-zoom-label {
  min-width: 48px;
  color: var(--ink-soft);
  text-align: center;
  font-size: 0.82rem;
}

.board-options {
  position: relative;
}

.board-options > summary {
  list-style: none;
}

.board-options > summary::-webkit-details-marker {
  display: none;
}

.board-options-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: min(320px, 80vw);
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.board-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  min-height: 680px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.board-viewport {
  position: relative;
  min-width: 0;
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, var(--texture-a), transparent 28%),
    var(--bg);
  cursor: default;
  touch-action: none;
}

.board-viewport.is-pan-mode {
  cursor: grab;
}

.board-viewport.panning {
  cursor: grabbing;
}

.board-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 4000px;
  height: 2600px;
  transform-origin: 0 0;
  will-change: transform;
}

.board-stage.has-grid {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--line) 38%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 38%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}

.board-links {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.board-link {
  color: var(--ink-soft);
  pointer-events: stroke;
}

.board-link-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  cursor: pointer;
  pointer-events: stroke;
}

.board-link-line {
  fill: none;
  opacity: 0.68;
  transition: opacity 120ms ease, filter 120ms ease;
  pointer-events: none;
}

.board-link text {
  fill: var(--ink-soft);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: 13px;
  text-anchor: middle;
  pointer-events: none;
}

.board-link:hover .board-link-line,
.board-link.selected .board-link-line {
  opacity: 1;
  filter: drop-shadow(0 0 5px var(--accent));
}

.board-link.selected text {
  fill: var(--ink);
  font-weight: 700;
}

.board-links marker path {
  fill: context-stroke;
}

.board-group {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px dashed var(--board-color);
  border-radius: calc(var(--radius) + 4px);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--board-color) 10%, transparent);
  cursor: move;
  user-select: none;
}

.board-group.selected {
  outline: 2px solid color-mix(in srgb, var(--board-color) 70%, white);
  outline-offset: 2px;
}

.board-group.collapsed {
  overflow: hidden;
}

.board-node {
  position: absolute;
  z-index: 4;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--board-color) 62%, var(--line));
  border-left: 4px solid var(--board-color);
  border-radius: var(--radius);
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-strong) 94%, var(--board-color));
  box-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  cursor: move;
  user-select: none;
}

.board-node:hover {
  border-color: var(--board-color);
}

.board-node.selected {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 14px 34px rgb(0 0 0 / 38%);
}

.board-node.locked {
  cursor: not-allowed;
}

.board-node.locked::after {
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: var(--muted);
  content: "Verrouillé";
  font-size: 0.68rem;
}

.board-node-missing {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px;
  border-color: var(--danger);
  background: var(--danger-soft);
}

.board-node-image {
  width: 72px;
  flex: 0 0 72px;
  object-fit: cover;
}

.board-node-content {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
  padding: 12px;
}

.board-node-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.board-node-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-node-open {
  width: 24px;
  height: 24px;
  padding: 0;
  flex: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--surface);
  cursor: pointer;
}

.board-node-type {
  color: var(--board-color);
}

.board-node-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.board-node-meta span,
.board-pill,
.board-presence {
  display: inline-flex;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--surface);
  font-size: 0.7rem;
}

.board-node-note {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.board-node.collapsed .board-node-content {
  width: 100%;
  align-content: center;
  padding: 10px;
}

.board-inspector {
  position: relative;
  z-index: 10;
  min-width: 0;
  overflow: auto;
  padding: 18px;
  border-left: 1px solid var(--line);
  background: var(--panel-bg);
}

.board-inspector header > span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.board-inspector h2 {
  margin: 5px 0 7px;
}

.board-inspector h3 {
  margin: 0 0 9px;
  font-size: 0.9rem;
}

.board-inspector p {
  color: var(--ink-soft);
  line-height: 1.45;
}

.board-inspector-image {
  width: 100%;
  max-height: 170px;
  margin: 10px 0;
  border-radius: var(--radius);
  object-fit: cover;
}

.board-inspector-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 16px 0;
}

.board-inspector-stats div {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.board-inspector-stats dt {
  color: var(--muted);
  font-size: 0.68rem;
}

.board-inspector-stats dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-weight: 700;
}

.board-inspector-pills,
.board-inspector-actions,
.board-relation-block > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.board-inspector-actions {
  margin: 14px 0;
}

.board-inspector-actions .button {
  flex: 1 1 auto;
}

.board-inspector-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.board-inspector-fields {
  display: grid;
  gap: 7px;
}

.board-inspector-fields div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.board-inspector-fields dt {
  color: var(--muted);
}

.board-inspector-fields dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
}

.board-modal {
  width: min(620px, calc(100vw - 32px));
}

.board-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.board-page-relations {
  display: grid;
  gap: 14px;
}

.board-relation-block {
  display: grid;
  gap: 8px;
}

.board-broken-link {
  color: var(--danger);
}

.board-records,
.board-audit {
  display: grid;
  gap: var(--section-gap);
  min-width: 0;
}

.board-record-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(5, minmax(120px, 1fr));
  gap: 8px;
}

.board-record-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.board-record-table {
  width: 100%;
  min-width: 1240px;
  border-collapse: collapse;
  background: var(--surface);
}

.board-record-table th,
.board-record-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  text-align: left;
  vertical-align: top;
}

.board-record-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  color: var(--ink);
  background: var(--surface-strong);
}

.board-record-table tbody tr:hover {
  background: var(--hover-bg);
}

.board-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.board-record-actions .button {
  padding: 5px 7px;
  font-size: 0.72rem;
}

.board-count {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
}

.board-count.yes {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
}

.board-audit-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.board-audit-counts span {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}

.board-audit-counts .error {
  color: var(--danger);
}

.board-audit-counts .warning {
  color: var(--gold);
}

.board-audit-group {
  display: grid;
  gap: 10px;
}

.board-audit-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.board-audit-group h3 span {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-muted);
  font-size: 0.72rem;
}

.board-audit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 9px;
}

.board-audit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  background: var(--surface);
}

.board-audit-card.error {
  border-left-color: var(--danger);
}

.board-audit-card.warning {
  border-left-color: var(--gold);
}

.board-audit-card p {
  margin: 4px 0 0;
  color: var(--muted);
}

.board-audit-card > div:last-child {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 1180px) {
  .board-workspace {
    grid-template-columns: minmax(0, 1fr) 250px;
  }

  .board-record-filters {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

@media (max-width: 820px) {
  .board-workspace {
    grid-template-columns: 1fr;
  }

  .board-viewport {
    min-height: 520px;
  }

  .board-inspector {
    max-height: 420px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .board-record-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .board-toolbar {
    align-items: stretch;
  }

  .board-toolbar > .button,
  .board-toolbar > select,
  .board-options {
    flex: 1 1 calc(50% - 8px);
  }

  .board-toolbar-separator,
  .board-zoom-label {
    display: none;
  }

  .board-modal-grid,
  .board-record-filters {
    grid-template-columns: 1fr;
  }

  .board-audit-card {
    align-items: stretch;
    flex-direction: column;
  }
}

.category-thumb {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-muted);
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}

.tree-category-thumb,
.compact-category-thumb,
.outline-category-thumb,
.pilot-category-thumb,
.inspector-list-thumb,
.detail-category-thumb {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

.category-heading-with-thumb,
.category-detail-cell,
.inspector-list-title-with-thumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.category-heading-thumb {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  border-radius: var(--radius);
}

.map-switcher {
  margin-bottom: 14px;
}

.map-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.map-mini-grid.compact {
  grid-template-columns: 1fr;
}

.map-mini-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 8px;
  text-align: left;
}

.map-mini-card:hover {
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

.map-mini-card img,
.map-mini-empty {
  width: 54px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-muted);
}

.map-mini-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.map-mini-card strong,
.map-mini-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-mini-card small {
  color: var(--muted);
  margin-top: 3px;
}
.safety-view,
.page-history-section {
  display: grid;
  gap: var(--section-gap);
}

.safety-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap);
}

.safety-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: var(--panel-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-bg);
}

.safety-panel h3 {
  margin: 0;
}

.safety-list,
.history-list {
  display: grid;
  gap: 8px;
}

.safety-row,
.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.safety-row p,
.history-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.safety-row-actions,
.history-actions,
.relation-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.tree-density-control {
  min-width: 150px;
}

.world-pilot-panel.tree-compact .pilot-row {
  min-height: 36px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.world-pilot-panel.tree-compact .pilot-main {
  grid-template-columns: 24px minmax(100px, 1fr) auto;
}

.world-pilot-panel.tree-compact .pilot-meta-inline,
.world-pilot-panel.tree-compact .pilot-counts {
  font-size: 0.76rem;
}

.pilot-row[draggable="true"] {
  cursor: grab;
}

.pilot-row.is-dragging {
  opacity: 0.62;
}

.pilot-row.is-drop-target,
.world-pilot-panel.is-drop-target {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.relation-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .safety-grid,
  .safety-row,
  .history-row {
    grid-template-columns: 1fr;
  }

  .safety-row-actions,
  .history-actions,
  .relation-mini-actions {
    justify-content: flex-start;
  }
}
/* Advanced map workspace */
.map-layout-advanced {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.map-side-panel,
.map-inspector-stack,
.map-inspector-section {
  min-width: 0;
}

.map-inspector-stack {
  display: grid;
  gap: 12px;
}

.map-inspector-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  padding: 10px;
}

.map-inspector-section h3,
.map-inspector-section p {
  margin: 0;
}

.map-toolbar-expanded,
.map-draft-actions,
.map-filter-actions,
.map-display-options,
.inline-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.map-advanced-filters {
  position: relative;
}

.map-advanced-filters > summary {
  list-style: none;
}

.map-advanced-filters > summary::-webkit-details-marker {
  display: none;
}

.map-filter-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: min(680px, 92vw);
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  padding: 12px;
}

.map-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.map-vector-layer,
.map-draft-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.map-vector-layer {
  pointer-events: none;
}

.map-vector-layer .map-region,
.map-vector-layer .map-route {
  pointer-events: auto;
  cursor: pointer;
}

.map-region polygon {
  fill: var(--region-fill);
  fill-opacity: var(--region-opacity);
  stroke: var(--region-stroke);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
}

.map-region:hover polygon,
.map-region.active polygon {
  stroke-width: 0.9;
  filter: drop-shadow(0 0 4px rgb(255 255 255 / 65%));
}

.map-region text,
.map-route text {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(0 0 0 / 72%);
  stroke-width: 0.65;
  font-size: 3px;
  font-weight: 800;
  text-anchor: middle;
  pointer-events: none;
}

.map-route polyline {
  fill: none;
  stroke: var(--route-color);
  stroke-width: var(--route-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map-route:hover polyline,
.map-route.active polyline {
  filter: drop-shadow(0 0 4px rgb(255 255 255 / 70%));
}

.map-draft-layer {
  z-index: 5;
  pointer-events: none;
}

.map-draft-layer polygon,
.map-draft-layer polyline {
  fill: rgb(107 183 173 / 24%);
  stroke: var(--accent-strong);
  stroke-width: 0.65;
  stroke-dasharray: 2 1.5;
  vector-effect: non-scaling-stroke;
}

.map-draft-layer circle {
  fill: var(--gold);
  stroke: #fff;
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
}

.map-canvas.map-mode-region,
.map-canvas.map-mode-route {
  cursor: crosshair;
}

.map-layer-list,
.map-legend-list {
  display: grid;
  gap: 8px;
}

.map-layer-row,
.map-legend-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 7px;
}

.map-layer-row.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.map-layer-main,
.map-legend-entry > button {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  text-align: left;
}

.map-layer-main span:last-of-type,
.map-legend-entry span:not(.marker-dot) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-layer-main small,
.map-legend-entry small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.75rem;
}

.map-layer-actions,
.map-legend-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

.map-popup-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 7px 10px;
  margin: 0;
}

.map-popup-facts dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.map-popup-facts dd {
  margin: 2px 0 0;
  color: var(--ink);
}

@media (max-width: 980px) {
  .map-layout-advanced {
    grid-template-columns: 1fr;
  }

  .map-filter-panel {
    left: 0;
    right: auto;
    width: min(92vw, 640px);
  }
}
/* Chronicles reference skin */
body {
  --bg: #070908;
  --surface: #101312;
  --surface-strong: #15120e;
  --surface-muted: #201a13;
  --ink: #efe5cf;
  --ink-soft: #c7b99e;
  --muted: #8a7b63;
  --line: #2b2319;
  --line-strong: #4a3925;
  --accent: #963932;
  --accent-strong: #d8584d;
  --accent-soft: rgb(111 39 34 / 34%);
  --focus-ring: rgb(193 126 62 / 24%);
  --gold: #c99750;
  --danger: #e05b4e;
  --danger-soft: rgb(79 25 22 / 58%);
  --ok: #75b079;
  --shadow: 0 22px 62px rgb(0 0 0 / 48%);
  --topbar-bg: rgb(7 9 9 / 94%);
  --sidebar-bg: rgb(9 12 11 / 94%);
  --panel-bg: rgb(14 17 16 / 88%);
  --hover-bg: rgb(201 151 80 / 8%);
  --input-bg: rgb(6 8 8 / 92%);
  --texture-a: rgb(150 57 50 / 8%);
  --texture-b: rgb(201 151 80 / 6%);
  --control-height: 34px;
  --control-pad-y: 6px;
  --control-pad-x: 11px;
  --panel-pad: 20px;
  --section-gap: 14px;
  --radius: 6px;
  background:
    linear-gradient(90deg, rgb(2 4 4 / 86%) 0%, rgb(9 10 9 / 74%) 38%, rgb(4 5 5 / 88%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 22%), rgb(0 0 0 / 82%)),
    var(--app-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--ink);
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

body[data-texture="off"] {
  background:
    linear-gradient(90deg, rgb(2 4 4 / 86%) 0%, rgb(9 10 9 / 74%) 38%, rgb(4 5 5 / 88%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 22%), rgb(0 0 0 / 82%)),
    var(--app-background-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.app-shell {
  isolation: isolate;
}

.ui-icon {
  width: 1.08em;
  height: 1.08em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

button,
input,
textarea,
select {
  letter-spacing: 0;
}

.button,
.icon-button,
.tree-action,
.link-button {
  border-color: var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, rgb(24 20 15 / 94%), rgb(12 11 9 / 94%));
  color: var(--ink);
  min-height: var(--control-height);
  box-shadow: inset 0 1px 0 rgb(255 226 166 / 6%);
}

.button {
  font-size: 0.82rem;
  font-weight: 700;
}

.button:hover,
.icon-button:hover,
.tree-action:hover,
.link-button:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  background: linear-gradient(180deg, rgb(31 25 17 / 96%), rgb(15 13 10 / 96%));
  color: #f4dfb5;
}

.button.primary {
  border-color: color-mix(in srgb, var(--accent) 78%, var(--gold));
  background:
    linear-gradient(180deg, rgb(117 44 38 / 96%), rgb(69 25 22 / 98%));
  color: #f4dfb5;
  text-shadow: 0 1px 1px rgb(0 0 0 / 70%);
}

.button.primary:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--accent));
  background:
    linear-gradient(180deg, rgb(139 52 45 / 98%), rgb(81 31 26 / 98%));
}

.button.subtle {
  background: linear-gradient(180deg, rgb(18 17 14 / 72%), rgb(8 10 9 / 72%));
}

.button.danger,
.icon-button.danger {
  color: #f07b6e;
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
  background: linear-gradient(180deg, rgb(65 23 20 / 76%), rgb(27 12 11 / 86%));
}

.link-button {
  color: color-mix(in srgb, var(--gold) 78%, #ffffff);
  box-shadow: none;
}

.field > span,
.label-text {
  color: #a9916b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field input,
.field textarea,
.field select,
.search-input,
.inline-input,
.board-toolbar select,
.timeline-controls select,
.board-record-filters input,
.board-record-filters select {
  border-color: #2b241b;
  border-radius: 4px;
  background: linear-gradient(180deg, rgb(5 8 8 / 94%), rgb(10 12 11 / 96%));
  color: #e7dcc6;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), inset 0 -12px 22px rgb(0 0 0 / 18%);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.search-input:focus,
.inline-input:focus,
.editor-surface:focus {
  border-color: color-mix(in srgb, var(--gold) 68%, var(--accent));
  box-shadow: 0 0 0 2px var(--focus-ring), inset 0 0 0 1px rgb(255 230 165 / 4%);
}

.world-view {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    linear-gradient(90deg, rgb(4 5 5 / 86%) 0 18%, transparent 34% 72%, rgb(3 4 4 / 72%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 18%), rgb(0 0 0 / 42%));
}

.world-topbar {
  display: grid;
  grid-template-columns: minmax(220px, 292px) auto minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 7px 12px;
  border-bottom: 1px solid #2b2117;
  background:
    linear-gradient(180deg, rgb(12 14 14 / 98%), rgb(7 9 9 / 96%));
  box-shadow: 0 1px 0 rgb(219 159 74 / 12%), 0 14px 34px rgb(0 0 0 / 28%);
  backdrop-filter: blur(12px);
}

.world-brand {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.brand-sigil {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line));
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(201 151 80 / 22%) 0 36%, transparent 38%),
    linear-gradient(180deg, #15120d, #080a09);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgb(255 230 167 / 8%), 0 0 18px rgb(201 151 80 / 12%);
}

.brand-sigil .ui-icon {
  width: 24px;
  height: 24px;
}

.world-title {
  min-width: 0;
}

.world-title h1 {
  margin: 0;
  overflow: hidden;
  color: #d2a65c;
  font-family: Cinzel, "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.12;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.world-title p {
  max-width: none;
  margin: 2px 0 0;
  overflow: hidden;
  color: #8f8069;
  font-size: 0.72rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-new-entry {
  gap: 8px;
  min-width: 126px;
  white-space: nowrap;
}

.topbar-new-entry span {
  color: #f0c976;
  font-size: 1.12rem;
  line-height: 1;
}

.world-search {
  position: relative;
  flex: initial;
  max-width: none;
  min-width: 220px;
}

.search-input {
  height: 36px;
  padding-left: 38px;
  font-size: 0.82rem;
}

.search-mark {
  left: 13px;
  color: #b18a55;
  line-height: 0;
}

.search-mark .ui-icon {
  width: 16px;
  height: 16px;
}

.search-results {
  border-color: #3d3020;
  border-radius: 5px;
  background: rgb(11 13 12 / 98%);
  box-shadow: 0 18px 55px rgb(0 0 0 / 54%);
}

.search-result {
  border-bottom-color: #251f17;
  color: var(--ink);
}

.search-result small {
  color: #b68a50;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.world-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.topbar-tool-button {
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 6px 9px;
  color: #c5ad82;
  white-space: nowrap;
}

.topbar-tool-button .ui-icon {
  width: 15px;
  height: 15px;
  color: #b98a4a;
}

.topbar-tool-button.danger .ui-icon,
.topbar-tool-button.danger span {
  color: #f07668;
}

.workspace {
  display: grid;
  grid-template-columns: 52px minmax(220px, 280px) minmax(0, 1fr) minmax(300px, 360px);
  min-height: 0;
  height: calc(100vh - 56px);
  overflow: hidden;
}

.app-rail {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  padding: 9px 6px;
  border-right: 1px solid #2b2117;
  background:
    linear-gradient(180deg, rgb(6 8 8 / 98%), rgb(5 6 6 / 98%)),
    var(--app-background-image);
  box-shadow: inset -1px 0 0 rgb(255 220 146 / 6%);
}

.rail-nav,
.rail-bottom {
  display: grid;
  gap: 7px;
  align-content: start;
}

.rail-bottom {
  align-content: end;
}

.rail-button {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #9e7b4d;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.rail-button:hover,
.rail-button.active {
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
  background: linear-gradient(180deg, rgb(36 27 17 / 72%), rgb(13 12 10 / 86%));
  color: #e4bd72;
}

.rail-button.active {
  box-shadow: inset 2px 0 0 var(--accent), 0 0 16px rgb(201 151 80 / 10%);
}

.rail-button.danger:hover {
  color: #f07668;
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}

.rail-home {
  border-color: color-mix(in srgb, var(--gold) 48%, var(--line));
  background: radial-gradient(circle, rgb(201 151 80 / 15%), transparent 64%);
}

.rail-button .ui-icon {
  width: 20px;
  height: 20px;
}

.sidebar,
.workspace > .inspector-panel,
.content {
  min-height: 0;
  height: calc(100vh - 56px);
}

.sidebar {
  min-width: 0;
  padding: 0;
  overflow: auto;
  border-right: 1px solid #2b2117;
  background:
    linear-gradient(180deg, rgb(9 12 11 / 96%), rgb(8 10 9 / 95%)),
    var(--app-background-image);
  background-size: cover;
  box-shadow: inset -1px 0 0 rgb(255 220 146 / 5%);
  scrollbar-color: #4a3925 transparent;
}

.sidebar-section {
  gap: 9px;
  margin: 0;
  padding: 13px 12px;
  border-bottom: 1px solid #241d15;
}

.sidebar-section h2 {
  color: #ad8b5c;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.view-nav {
  gap: 2px;
}

.view-nav-button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 31px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #bbae94;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 8px;
}

.view-nav-button::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.7;
  transform: rotate(45deg) scale(0.72);
}

.view-nav-button:hover,
.view-nav-button.active {
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
  background: linear-gradient(90deg, rgb(116 41 36 / 38%), rgb(201 151 80 / 7%));
  color: #efd39d;
}

.explorer-actions {
  gap: 5px;
}

.explorer-actions .button {
  min-height: 29px;
  font-size: 0.68rem;
  line-height: 1.1;
}

.tree {
  gap: 2px;
  font-size: 0.8rem;
}

.tree-row-shell {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px;
  min-height: 28px;
  padding-left: calc(var(--depth) * 15px);
}

.tree-row,
.page-row,
.world-root-row {
  min-height: 29px;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 0.8rem;
}

.world-root-row {
  margin-bottom: 6px;
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
  background: linear-gradient(90deg, rgb(201 151 80 / 13%), rgb(201 151 80 / 3%));
}

.tree-row.active,
.page-row.active,
.world-root-row.active {
  border-color: color-mix(in srgb, var(--gold) 58%, var(--line));
  background: linear-gradient(90deg, rgb(115 44 38 / 64%), rgb(201 151 80 / 12%));
  color: #ffe4ad;
}

.tree-toggle {
  width: 22px;
  min-width: 22px;
  height: 26px;
  min-height: 26px;
  color: #8f7048;
}

.tree-row-shell > .tree-branch-line,
.page-row > .tree-branch-line {
  background: color-mix(in srgb, var(--gold) 35%, transparent);
  opacity: 0.28;
}

.tree-icon,
.page-icon {
  color: #b98a4d;
}

.tree-count {
  color: #81735e;
  font-size: 0.68rem;
}

.status-pill,
.tag-pill,
.board-pill,
.board-presence,
.board-node-meta span {
  min-height: 22px;
  border-color: #3a2d1d;
  border-radius: 999px;
  background: rgb(22 20 17 / 82%);
  color: #bfb096;
  font-size: 0.7rem;
}

.status-pill.en-cours,
.status-pill.idee,
.status-pill.utilisable,
.status-pill.termine {
  border-color: color-mix(in srgb, var(--gold) 44%, var(--line));
  background: rgb(34 25 17 / 76%);
  color: #e0bd75;
}

.content {
  position: relative;
  overflow: auto;
  padding: 0;
  background:
    linear-gradient(90deg, rgb(8 9 8 / 20%), rgb(15 17 16 / 58%), rgb(7 8 8 / 34%));
  scrollbar-color: #4a3925 transparent;
}

.content::before {
  content: "";
  position: fixed;
  inset: 56px 360px 0 332px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(255 216 138 / 4%), transparent 14%),
    linear-gradient(90deg, transparent, rgb(0 0 0 / 22%));
  z-index: -1;
}

.content-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(18px, 2vw, 30px) clamp(18px, 2.1vw, 34px) 44px;
}

.read-page,
.edit-page,
.world-settings,
.world-pilot-panel,
.type-section,
.board-records,
.board-audit {
  border: 1px solid #312719;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgb(18 21 20 / 92%), rgb(12 13 12 / 90%));
  box-shadow: 0 22px 60px rgb(0 0 0 / 34%), inset 0 1px 0 rgb(255 224 160 / 5%);
}

.read-page,
.edit-page,
.world-settings,
.world-pilot-panel,
.type-section {
  overflow: hidden;
}

.world-settings > .section-header,
.world-pilot-panel > .pilot-header,
.read-page-header > .section-header,
.edit-form > .section-header:first-child {
  position: relative;
  margin: calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad)) 18px;
  min-height: 132px;
  padding: 22px var(--panel-pad);
  align-items: flex-start;
  border-bottom: 1px solid #342719;
  background:
    linear-gradient(90deg, rgb(12 15 15 / 96%) 0%, rgb(13 16 16 / 82%) 44%, rgb(7 8 8 / 52%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 12%), rgb(0 0 0 / 58%)),
    var(--app-background-image);
  background-size: cover;
  background-position: center;
}

.world-settings > .section-header::after,
.world-pilot-panel > .pilot-header::after,
.read-page-header > .section-header::after,
.edit-form > .section-header:first-child::after {
  content: "";
  position: absolute;
  left: var(--panel-pad);
  right: var(--panel-pad);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(201 151 80 / 54%), transparent);
}

.section-header h2,
.read-page h2,
.edit-page h2 {
  color: #f1e3c6;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 2.5vw, 2.55rem);
  font-weight: 700;
  line-height: 1.02;
}

.section-header h3,
.outline-panel h3,
.selected-details h3,
.inspector-section h3,
.board-inspector h3 {
  color: #d0a563;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section-header p,
.inspector-header p,
.inspector-summary,
.muted-text,
.page-body,
.timeline-card p,
.world-card p {
  color: #c3b399;
}

.breadcrumb {
  margin-bottom: 12px;
  color: #8d7b60;
  font-size: 0.74rem;
}

.breadcrumb-item {
  color: #bca779;
}

.breadcrumb-item:hover,
.breadcrumb-item.active {
  color: #e0b96f;
  background: rgb(201 151 80 / 9%);
  border-color: rgb(201 151 80 / 22%);
}

.dashboard-stats {
  gap: 10px;
}

.dashboard-stats div,
.selected-details,
.outline-panel,
.mini-card,
.template-card,
.safety-panel,
.custom-field-read-item,
.map-inspector-section,
.board-toolbar,
.board-workspace,
.board-record-table-wrap,
.timeline-card,
.map-mini-card,
.action-menu-popover,
.modal {
  border-color: #302719;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgb(20 23 21 / 84%), rgb(13 14 13 / 86%));
  box-shadow: inset 0 1px 0 rgb(255 226 166 / 4%);
}

.dashboard-stats div {
  min-height: 66px;
  padding: 13px;
}

.dashboard-stats strong,
.inspector-stats dd,
.board-inspector-stats dd {
  color: #e0ad60;
  font-family: Cinzel, Georgia, serif;
}

.selected-details dt,
.inspector-stats dt,
.custom-field-read-item dt,
.board-inspector-stats dt,
.board-inspector-fields dt {
  color: #9d825b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.outline-row,
.compact-row,
.pilot-row,
.safety-row,
.history-row,
.board-audit-card {
  border-color: #2f2619;
  border-radius: 5px;
  background: linear-gradient(180deg, rgb(18 20 19 / 76%), rgb(12 13 12 / 78%));
}

.outline-row:hover,
.compact-row:hover,
.pilot-row:hover,
.inspector-list-row:hover,
.map-mini-card:hover {
  border-color: color-mix(in srgb, var(--gold) 48%, var(--line));
  background: linear-gradient(180deg, rgb(31 26 18 / 82%), rgb(16 16 14 / 86%));
}

.page-row-card,
.page-compact-row {
  background: linear-gradient(180deg, rgb(14 17 16 / 76%), rgb(10 12 11 / 80%));
}

.world-pilot-panel {
  padding: var(--panel-pad);
}

.pilot-main {
  grid-template-columns: 28px minmax(120px, 1fr) minmax(100px, auto);
}

.pilot-icon,
.page-type-icon,
.category-thumb-fallback {
  border-color: #43331f;
  background: linear-gradient(180deg, #241c13, #11100d);
  color: #d0a35b;
}

.pilot-row.selected {
  border-color: color-mix(in srgb, var(--gold) 50%, var(--line));
  box-shadow: inset 3px 0 0 var(--accent);
}

.page-body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.03rem;
  line-height: 1.72;
}

.page-body > p:first-of-type::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  color: #d2a65c;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.1rem;
  line-height: 0.8;
}

.page-section {
  border-top-color: #302719;
}

.read-main-image,
.secondary-gallery img,
.page-body img,
.inspector-main-image,
.map-mini-card img,
.map-mini-empty {
  border-color: #352b1c;
  border-radius: 6px;
}

.workspace > .inspector-panel {
  position: relative;
  top: auto;
  display: grid;
  align-content: start;
  gap: 13px;
  overflow: auto;
  padding: 54px 13px 16px;
  border: 0;
  border-left: 1px solid #2b2117;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgb(10 13 12 / 97%), rgb(8 10 10 / 98%)),
    var(--app-background-image);
  background-size: cover;
  box-shadow: inset 1px 0 0 rgb(255 220 146 / 5%);
  scrollbar-color: #4a3925 transparent;
}

.workspace > .inspector-panel::before {
  content: "DETAILS    LIENS    ACTIVITE";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid #2b2117;
  color: #c5a66f;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgb(8 10 10 / 96%);
  box-shadow: inset 0 -2px 0 rgb(150 57 50 / 82%);
  white-space: pre;
}

.inspector-header h2 {
  color: #f1e3c6;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  line-height: 1.05;
}

.inspector-kicker {
  color: #bd8d4e;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.inspector-stats {
  gap: 7px;
}

.inspector-stats div,
.inspector-fields div {
  border-color: #302719;
  border-radius: 5px;
  background: rgb(17 20 19 / 78%);
}

.inspector-section {
  gap: 9px;
  padding: 11px;
  border: 1px solid #302719;
  border-radius: 6px;
  background: linear-gradient(180deg, rgb(17 20 19 / 72%), rgb(11 13 12 / 76%));
}

.inspector-list-row {
  border-color: #2f2619;
  border-radius: 5px;
  background: rgb(10 12 11 / 76%);
  color: #d8cbb3;
}

.inspector-list-row small {
  color: #8e8069;
}

.inspector-actions .button {
  flex: 1 1 calc(50% - 8px);
}

.board-toolbar,
.timeline-controls,
.timeline-layout-toggle,
.map-toolbar {
  border-radius: 5px;
  background: rgb(11 14 13 / 84%);
}

.board-viewport,
.map-canvas {
  background:
    linear-gradient(180deg, rgb(6 8 8 / 78%), rgb(10 11 10 / 86%)),
    var(--app-background-image);
  background-size: cover;
}

.board-node {
  border-radius: 5px;
  background: color-mix(in srgb, #151918 92%, var(--board-color));
}

.board-inspector {
  background: rgb(10 13 12 / 96%);
}

.world-card,
.empty-state {
  border-color: #302719;
  border-radius: 6px;
  background: linear-gradient(180deg, rgb(18 21 20 / 88%), rgb(11 12 11 / 90%));
}

.library-title h1,
.world-card h2,
.empty-state h2 {
  color: #ecd7a8;
  font-family: Cinzel, "Cormorant Garamond", Georgia, serif;
}

.modal-backdrop {
  background: rgb(0 0 0 / 68%);
  backdrop-filter: blur(7px);
}

.modal h2 {
  color: #ecd7a8;
  font-family: "Cormorant Garamond", Georgia, serif;
}

.toast {
  border-color: #4a3925;
  border-radius: 5px;
  background: rgb(12 14 13 / 96%);
}

.topbar-fantasy-button {
  min-width: 112px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid #3a2d1d !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgb(24 20 15 / 94%), rgb(12 11 9 / 94%)) !important;
  color: #d7bd83 !important;
  font-family: Inter, "Segoe UI", sans-serif !important;
  font-size: 0.82rem !important;
  text-shadow: none !important;
}

.topbar-fantasy-button::before {
  content: none !important;
}

@media (max-width: 1480px) {
  .world-topbar {
    grid-template-columns: minmax(190px, 260px) auto minmax(220px, 1fr) auto;
  }

  .topbar-tool-button span {
    display: none;
  }

  .topbar-tool-button {
    width: 34px;
    padding-inline: 0;
  }
}

@media (max-width: 1240px) {
  .workspace {
    grid-template-columns: 52px minmax(220px, 268px) minmax(0, 1fr);
  }

  .workspace > .inspector-panel {
    display: none;
  }

  .content::before {
    right: 0;
  }
}

@media (max-width: 900px) {
  .world-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: 0;
  }

  .world-brand {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .world-actions {
    justify-content: flex-start;
  }

  .topbar-tool-button span {
    display: inline;
  }

  .topbar-tool-button {
    width: auto;
    flex: 1 1 110px;
  }

  .workspace {
    grid-template-columns: 48px minmax(0, 1fr);
    height: auto;
    min-height: calc(100vh - 56px);
    overflow: visible;
  }

  .app-rail {
    min-height: calc(100vh - 56px);
  }

  .sidebar {
    display: none;
  }

  .content {
    height: auto;
    min-height: calc(100vh - 56px);
  }

  .content-panel {
    padding: 16px;
  }
}

@media (max-width: 680px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .app-rail {
    position: sticky;
    top: 0;
    z-index: 20;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #2b2117;
  }

  .rail-nav,
  .rail-bottom {
    display: flex;
    overflow-x: auto;
  }

  .rail-button {
    flex: 0 0 38px;
  }

  .dashboard-stats,
  .board-record-filters,
  .pages-workspace-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .world-topbar .button,
  .world-topbar .icon-button,
  .app-rail .button,
  .rail-button {
    width: auto;
  }

  .world-topbar {
    gap: 9px;
    padding: 9px;
  }

  .topbar-new-entry {
    justify-self: start;
    min-width: 0;
  }

  .world-actions {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 6px;
  }

  .world-actions .topbar-tool-button {
    flex: 0 0 36px;
    width: 36px;
    padding-inline: 0;
  }

  .world-actions .topbar-tool-button span {
    display: none;
  }

  .app-rail {
    width: 100%;
    overflow: hidden;
  }

  .rail-nav {
    min-width: 0;
    scrollbar-width: thin;
  }

  .rail-bottom {
    justify-content: end;
  }

  .rail-button {
    width: 38px;
    height: 38px;
  }

  .world-pilot-panel > .pilot-header,
  .world-settings > .section-header,
  .read-page-header > .section-header,
  .edit-form > .section-header:first-child {
    min-height: 0;
    padding: 18px var(--panel-pad);
  }

  .pilot-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .pilot-main,
  .world-pilot-panel.tree-compact .pilot-main {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .pilot-counts,
  .pilot-meta-inline {
    grid-column: 2;
    justify-content: flex-start;
  }

  .pilot-primary-action,
  .action-menu,
  .action-menu > summary {
    justify-self: stretch;
    width: 100%;
  }
}
@media (max-width: 680px) {
  .rail-nav,
  .rail-bottom {
    scrollbar-width: none;
  }

  .rail-nav::-webkit-scrollbar,
  .rail-bottom::-webkit-scrollbar {
    display: none;
  }
}

/* =====================================================================
   Correctif ciblé : fond PNG unique et interface allégée
   - le fond global utilise uniquement assets/fond.png ;
   - les gradients décoratifs, filtres, flous et textures internes sont neutralisés ;
   - la logique, les données, l'arborescence, la carte et l'éditeur restent inchangés.
   ===================================================================== */
:root,
body {
  --app-background-image: url("assets/fond.png") !important;
  --app-background-overlay: transparent !important;
  --app-background-overlay-strong: transparent !important;
  --texture-a: transparent !important;
  --texture-b: transparent !important;
  --shadow: none !important;
}

html {
  background-color: #070908 !important;
}

body,
body[data-texture="on"],
body[data-texture="off"] {
  background-color: #070908 !important;
  background-image: var(--app-background-image) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: scroll !important;
}

body *,
body *::before,
body *::after {
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.app-shell,
.world-view,
.workspace,
.content,
.library-view,
.content-panel {
  background: transparent !important;
}

.content::before,
.world-settings > .section-header::after,
.world-pilot-panel > .pilot-header::after,
.read-page-header > .section-header::after,
.edit-form > .section-header:first-child::after {
  content: none !important;
  display: none !important;
}

.world-topbar {
  background-color: var(--topbar-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.app-rail,
.sidebar,
.workspace > .inspector-panel {
  background-color: var(--sidebar-bg) !important;
  background-image: none !important;
}

.workspace > .inspector-panel::before {
  background-color: rgb(8 10 10 / 96%) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.read-page,
.edit-page,
.world-settings,
.world-pilot-panel,
.type-section,
.board-records,
.board-audit,
.safety-panel,
.inspector-panel,
.inspector-section,
.board-inspector,
.map-marker-panel,
.map-inspector-section,
.modal,
.toast,
.search-results,
.action-menu-popover,
.board-options-popover,
.map-filter-panel {
  background-color: var(--panel-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.world-settings > .section-header,
.world-pilot-panel > .pilot-header,
.read-page-header > .section-header,
.edit-form > .section-header:first-child {
  background-color: var(--surface-strong) !important;
  background-image: none !important;
}

.world-card,
.empty-state,
.mini-card,
.template-card,
.dashboard-stats div,
.selected-details,
.outline-panel,
.outline-row,
.compact-row,
.pilot-row,
.safety-row,
.history-row,
.timeline-card,
.map-mini-card,
.board-toolbar,
.board-workspace,
.board-node,
.board-group,
.board-audit-card,
.board-record-table,
.custom-field-read-item,
.custom-field-row,
.image-item,
.checkbox-item,
.marker-image-editor,
.timeline-detail-panel,
.inspector-stats div,
.inspector-fields div,
.inspector-list-row,
.map-layer-row,
.map-legend-entry,
.map-toolbar,
.timeline-filters,
.timeline-layout-toggle,
.timeline-impact {
  background-color: var(--surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.board-viewport,
.board-stage,
.map-canvas,
.expanded-map-scroll,
.marker-image-preview,
.page-image-preview,
.image-preview,
.map-mini-empty,
.world-card-cover,
.placeholder-cover,
.read-main-image,
.editor-toolbar,
.editor-status {
  background-color: var(--surface-muted) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.field input,
.field textarea,
.field select,
.search-input,
.inline-input,
.editor-surface,
.rich-editor,
.rich-editor-stable,
.editor-block-select,
.board-toolbar select,
.timeline-controls select,
.board-record-filters input,
.board-record-filters select,
.switch-field {
  background-color: var(--input-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.button,
.icon-button,
.tree-action,
.view-nav-button,
.rail-button,
.topbar-tool-button,
.topbar-fantasy-button,
.board-node-open,
.marker-list-item,
.map-type-toggle,
.segmented-control .button,
.map-zoom-controls .button,
.action-menu-popover button {
  background-color: var(--surface-strong) !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.button.primary,
.topbar-fantasy-button.primary {
  background-color: var(--accent) !important;
  background-image: none !important;
  color: #f4dfb5 !important;
}

.button.subtle,
.link-button {
  background-color: transparent !important;
  background-image: none !important;
}

.button.danger,
.icon-button.danger,
.topbar-fantasy-button.danger {
  background-color: var(--danger-soft) !important;
  background-image: none !important;
  color: var(--danger) !important;
}

.button:hover,
.icon-button:hover,
.tree-action:hover,
.link-button:hover,
.view-nav-button:hover,
.view-nav-button.active,
.rail-button:hover,
.rail-button.active,
.tree-row:hover,
.page-row:hover,
.world-root-row:hover,
.tree-row.active,
.page-row.active,
.world-root-row.active,
.pilot-row:hover,
.pilot-row.selected,
.outline-row:hover,
.compact-row:hover,
.inspector-list-row:hover,
.map-mini-card:hover,
.marker-list-item:hover,
.marker-list-item.active,
.segmented-control .button.active,
.map-toolbar .button.active,
.board-toolbar .button.active {
  background-color: var(--hover-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.board-stage {
  will-change: auto !important;
}

.modal-backdrop {
  background-color: rgb(0 0 0 / 68%) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.map-region:hover polygon,
.map-region.active polygon,
.map-route:hover polyline,
.map-route.active polyline,
.board-link:hover .board-link-line,
.board-link.selected .board-link-line {
  filter: none !important;
}

@media print {
  body,
  body[data-texture="on"],
  body[data-texture="off"] {
    background-image: none !important;
    background-color: white !important;
  }
}


/* Ecritoire */
.topbar-create-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ecritoire-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: calc(100vh - 160px);
  color: var(--ink);
}

.ecritoire-topbar,
.ecritoire-toolbar,
.ecritoire-mini-toolbar,
.ecritoire-side-panel {
  border: 1px solid rgb(194 154 84 / 24%);
  background: rgb(12 10 8 / 84%);
  box-shadow: 0 18px 48px rgb(0 0 0 / 24%);
}

.ecritoire-topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(300px, auto);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
}

.ecritoire-title-block {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ecritoire-kicker {
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ecritoire-title-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgb(194 154 84 / 28%);
  background: transparent;
  color: var(--ink);
  font: 700 1.2rem Georgia, serif;
  outline: none;
}

.ecritoire-save-state {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.ecritoire-actions,
.ecritoire-export-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.ecritoire-spread-label {
  color: var(--gold);
  min-width: 92px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ecritoire-toolbar,
.ecritoire-mini-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
}

.ecritoire-command.wide {
  width: auto;
  min-width: 54px;
  padding-inline: 9px;
}

.ecritoire-context-toolbar {
  position: fixed;
  z-index: 80;
  max-width: min(360px, calc(100vw - 32px));
}

.ecritoire-mini-toolbar {
  padding: 6px;
  border-radius: 8px;
}

.ecritoire-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
  gap: 12px;
  min-height: 0;
}

.ecritoire-view.side-closed .ecritoire-layout {
  grid-template-columns: minmax(0, 1fr);
}

.ecritoire-view.side-closed .ecritoire-side-panel {
  display: none;
}

.ecritoire-stage {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 520px;
  overflow: auto;
  border-radius: 8px;
  background: rgb(3 3 2 / 42%);
  padding: 12px;
}

.ecritoire-book {
  position: relative;
  width: min(100%, 1240px);
  aspect-ratio: 1672 / 941;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  isolation: isolate;
}

.ecritoire-page {
  position: absolute;
  top: 13.2%;
  width: 29.3%;
  height: 72.4%;
}

.ecritoire-page-left {
  left: 16.4%;
}

.ecritoire-page-right {
  left: 54.2%;
}

.ecritoire-page-number {
  position: absolute;
  right: 8%;
  bottom: 2.2%;
  z-index: 6;
  color: rgb(42 27 15 / 70%);
  font: 700 0.78rem Georgia, serif;
  pointer-events: none;
}

.ecritoire-page-surface {
  position: relative;
  width: 100%;
  height: 100%;
}

.ecritoire-page-editor {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: auto;
  padding: 8.5% 9% 10%;
  border: 1px solid transparent;
  background: transparent;
  color: #20150c;
  font: 500 16px Georgia, "Times New Roman", serif;
  line-height: 1.5;
  outline: none;
  scrollbar-width: thin;
}

.ecritoire-page-editor:focus {
  border-color: rgb(83 48 20 / 22%);
  background: rgb(255 248 220 / 8%);
}

.ecritoire-page-editor h1,
.ecritoire-page-editor h2,
.ecritoire-page-editor h3 {
  margin: 0.6em 0 0.3em;
  color: #171008;
  line-height: 1.15;
}

.ecritoire-page-editor p,
.ecritoire-page-editor ul,
.ecritoire-page-editor ol,
.ecritoire-page-editor blockquote {
  margin: 0 0 0.72em;
}

.ecritoire-page-editor blockquote {
  border-left: 3px solid rgb(80 45 19 / 42%);
  padding-left: 0.8em;
  color: #3a2819;
  font-style: italic;
}

.ecritoire-page-editor a {
  color: #533013;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.ecritoire-page-elements {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.ecritoire-image-element {
  position: absolute;
  display: block;
  min-width: 24px;
  min-height: 24px;
  border: 1px solid transparent;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.ecritoire-image-element img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.ecritoire-image-element.selected {
  border-color: rgb(194 154 84 / 88%);
  box-shadow: 0 0 0 2px rgb(0 0 0 / 24%);
}

.ecritoire-image-controls {
  position: absolute;
  left: 0;
  top: -30px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
}

.ecritoire-image-element.selected .ecritoire-image-controls {
  opacity: 1;
  pointer-events: auto;
}

.ecritoire-resize-handle {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid #2a1a0e;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  box-shadow: 0 2px 6px rgb(0 0 0 / 28%);
}

.ecritoire-image-element.selected .ecritoire-resize-handle,
.ecritoire-image-element:hover .ecritoire-resize-handle {
  opacity: 1;
}

.ecritoire-resize-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.ecritoire-resize-n { left: 50%; top: -7px; transform: translateX(-50%); cursor: ns-resize; }
.ecritoire-resize-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.ecritoire-resize-e { right: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ecritoire-resize-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.ecritoire-resize-s { left: 50%; bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }
.ecritoire-resize-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.ecritoire-resize-w { left: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.ecritoire-image-element.is-dragging {
  opacity: 0.88;
}

.ecritoire-side-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  max-height: calc(100vh - 190px);
  padding: 12px;
  border-radius: 8px;
}

.ecritoire-panel-section {
  display: grid;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(194 154 84 / 18%);
}

.ecritoire-panel-section h3 {
  margin: 0;
  color: var(--gold);
  font-size: 0.88rem;
}

.ecritoire-page-list,
.ecritoire-image-list,
.ecritoire-linked-list {
  display: grid;
  gap: 6px;
}

.ecritoire-page-jump,
.ecritoire-image-list button,
.ecritoire-linked-list button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 6px;
  background: rgb(255 255 255 / 4%);
  color: var(--ink);
  text-align: left;
}

.ecritoire-page-jump.active,
.ecritoire-image-list button:hover,
.ecritoire-linked-list button:hover {
  border-color: rgb(194 154 84 / 42%);
  background: rgb(194 154 84 / 10%);
}

.ecritoire-image-list small {
  color: var(--muted);
}
.ecritoire-page-actions,
.ecritoire-image-actions,
.ecritoire-image-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ecritoire-page-goto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.ecritoire-page-goto input {
  width: 72px;
  min-height: 34px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 6px;
  background: rgb(255 255 255 / 5%);
  color: var(--ink);
  padding: 4px 8px;
}

.ecritoire-image-list button.active {
  border-color: rgb(194 154 84 / 72%);
  background: rgb(194 154 84 / 16%);
}

.ecritoire-image-inspector {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgb(194 154 84 / 24%);
  border-radius: 6px;
  background: rgb(255 255 255 / 5%);
}

.ecritoire-image-inspector-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.ecritoire-image-inspector-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecritoire-image-inspector-title small {
  color: var(--muted);
  white-space: nowrap;
}

.ecritoire-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ecritoire-image-grid label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.72rem;
}

.ecritoire-image-grid input {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 6px;
  background: rgb(255 255 255 / 5%);
  color: var(--ink);
  padding: 4px 7px;
}

.ecritoire-view.is-dropping .ecritoire-stage {
  outline: 2px solid rgb(194 154 84 / 68%);
  outline-offset: -6px;
}

.ecritoire-page.drop-target .ecritoire-page-surface {
  box-shadow: inset 0 0 0 2px rgb(194 154 84 / 62%);
}

.ecritoire-view.is-read-mode .ecritoire-page-editor {
  cursor: default;
}

.ecritoire-view.tools-hidden .ecritoire-topbar,
.ecritoire-view.tools-hidden .ecritoire-side-panel {
  opacity: 0.24;
  transition: opacity 160ms ease;
}

.ecritoire-view.tools-hidden .ecritoire-topbar:hover,
.ecritoire-view.tools-hidden .ecritoire-side-panel:hover {
  opacity: 1;
}

@media (max-width: 1180px) {
  .ecritoire-topbar,
  .ecritoire-layout {
    grid-template-columns: 1fr;
  }

  .ecritoire-actions {
    justify-content: flex-start;
  }

  .ecritoire-side-panel {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .topbar-create-actions,
  .ecritoire-actions,
  .ecritoire-toolbar {
    width: 100%;
  }

  .ecritoire-stage {
    min-height: 360px;
    padding: 6px;
  }

  .ecritoire-page-editor {
    font-size: 12px;
    line-height: 1.35;
    padding: 7% 8% 9%;
  }
}


/* Ecritoire plein ecran */
.ecritoire-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #020202;
}

.ecritoire-shell .ecritoire-view {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  gap: 0;
  overflow: hidden;
  background: #020202;
  color: var(--ink);
}

.ecritoire-shell .ecritoire-layout {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.ecritoire-shell .ecritoire-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  background: #020202;
}

.ecritoire-shell .ecritoire-book {
  position: relative;
  width: min(100vw, calc(100vh * 1672 / 941));
  height: min(100vh, calc(100vw * 941 / 1672));
  aspect-ratio: 1672 / 941;
  background: none !important;
  isolation: isolate;
}

.ecritoire-book-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.ecritoire-shell .ecritoire-page {
  top: 12.6%;
  width: 36.2%;
  height: 64.7%;
  z-index: 2;
}

.ecritoire-shell .ecritoire-page-left {
  left: 12.4%;
}

.ecritoire-shell .ecritoire-page-right {
  left: 52.5%;
}

.ecritoire-shell .ecritoire-page-editor {
  padding: 6.6% 7.3% 8%;
  color: #21160c;
  background: transparent;
  border-color: transparent;
  font: 500 16px Georgia, "Times New Roman", serif;
  line-height: 1.48;
}

.ecritoire-shell .ecritoire-page-editor:focus {
  border-color: rgb(70 42 18 / 24%);
  background: rgb(255 255 255 / 5%);
}

.ecritoire-shell .ecritoire-page-number {
  right: 7.2%;
  bottom: 1.8%;
}

.ecritoire-shell .ecritoire-topbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 20;
  grid-template-columns: minmax(220px, 1fr) auto minmax(520px, auto);
  background: rgb(8 7 6 / 72%);
  backdrop-filter: blur(4px);
  box-shadow: 0 14px 40px rgb(0 0 0 / 30%);
}

.ecritoire-shell .ecritoire-toolbar {
  position: absolute;
  top: 76px;
  left: 50%;
  z-index: 19;
  transform: translateX(-50%);
  max-width: min(1120px, calc(100vw - 32px));
  background: rgb(8 7 6 / 68%);
  backdrop-filter: blur(4px);
}

.ecritoire-shell .ecritoire-side-panel {
  position: absolute;
  top: 134px;
  right: 16px;
  z-index: 18;
  width: min(330px, calc(100vw - 32px));
  max-height: calc(100vh - 154px);
  background: rgb(9 8 7 / 78%);
  backdrop-filter: blur(4px);
}

.ecritoire-shell .ecritoire-view.side-closed .ecritoire-side-panel {
  display: none;
}

.ecritoire-shell .ecritoire-view.side-closed .ecritoire-layout {
  display: block;
}

.ecritoire-shell .ecritoire-context-toolbar {
  z-index: 40;
}

.ecritoire-shell .ecritoire-image-element {
  z-index: 5;
}

.ecritoire-shell .ecritoire-view.tools-hidden .ecritoire-topbar,
.ecritoire-shell .ecritoire-view.tools-hidden .ecritoire-side-panel {
  opacity: 0.12;
}

.ecritoire-shell .ecritoire-view.tools-hidden .ecritoire-topbar:hover,
.ecritoire-shell .ecritoire-view.tools-hidden .ecritoire-side-panel:hover {
  opacity: 1;
}

@media (max-width: 1180px) {
  .ecritoire-shell .ecritoire-topbar {
    grid-template-columns: 1fr;
    right: 12px;
  }

  .ecritoire-shell .ecritoire-toolbar {
    top: 132px;
  }

  .ecritoire-shell .ecritoire-side-panel {
    top: auto;
    right: 10px;
    bottom: 10px;
    max-height: min(48vh, 420px);
  }
}

@media (max-width: 760px) {
  .ecritoire-shell .ecritoire-topbar {
    top: 8px;
    left: 8px;
    right: 8px;
    padding: 8px;
  }

  .ecritoire-shell .ecritoire-toolbar {
    top: 146px;
    max-height: 110px;
    overflow: auto;
  }

  .ecritoire-shell .ecritoire-page-editor {
    font-size: 12px;
    line-height: 1.35;
  }
}

/* =====================================================================
   ÉDITEUR QUILL 2.0.3 LOCAL — remplacement du moteur contenteditable
   ===================================================================== */
.rich-editor-quill {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--input-bg);
}

.rich-editor-quill .editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  padding: 9px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.rich-editor-quill .editor-control {
  display: inline-flex;
  min-width: 0;
}

.rich-editor-quill .editor-control-font { width: 168px; }
.rich-editor-quill .editor-control-size { width: 70px; }

.rich-editor-quill .editor-select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px);
  background: var(--input-bg);
  color: var(--ink);
  padding: 0 9px;
  outline: none;
  font-weight: 700;
}

.rich-editor-quill .editor-select:focus,
.rich-editor-quill .editor-color-control input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

.rich-editor-quill .editor-color-control {
  display: inline-flex;
  width: 42px;
  height: 38px;
}

.rich-editor-quill .editor-color-control input {
  width: 42px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px);
  background: var(--input-bg);
  cursor: pointer;
}

.rich-editor-quill .editor-command {
  flex: 0 0 auto;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  white-space: nowrap;
  user-select: none;
}

.rich-editor-quill .editor-command-wide {
  width: auto;
  min-width: 66px;
  padding: 0 10px;
  font-size: 0.82rem;
}

.rich-editor-quill .editor-command.active,
.rich-editor-quill .editor-command[aria-pressed="true"] {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: var(--accent-soft);
}

.rich-editor-quill .quill-editor-host,
.rich-editor-quill .ql-container {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  background: var(--input-bg);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.rich-editor-quill .ql-editor {
  width: 100%;
  min-width: 0;
  min-height: 520px;
  max-height: 72vh;
  overflow-y: auto;
  padding: 22px;
  color: var(--ink);
  background: var(--input-bg);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.72;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  caret-color: var(--accent-strong);
}

.rich-editor-quill .ql-editor:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 52%, transparent) !important;
}

.rich-editor-quill .ql-editor.ql-blank::before {
  left: 22px;
  right: 22px;
  color: var(--muted);
  font-style: italic;
}

/*
 * Isolation de l’éditeur : les styles visuels des libellés de formulaire
 * restent limités aux enfants directs de .field. Les SPAN produits par
 * Quill conservent ainsi la casse et la mise en forme enregistrées.
 */
.field [data-editor-holder] .ql-editor span:not(.ql-floating-image-handle) {
  text-transform: none;
  letter-spacing: normal;
}

.rich-editor-quill .ql-editor p,
.rich-editor-quill .ql-editor ol,
.rich-editor-quill .ql-editor ul,
.rich-editor-quill .ql-editor blockquote {
  margin: 0 0 1em;
  white-space: normal;
}

.rich-editor-quill .ql-editor h1,
.rich-editor-quill .ql-editor h2,
.rich-editor-quill .ql-editor h3 {
  margin: 1.05em 0 0.45em;
  line-height: 1.2;
  color: var(--ink);
}

.rich-editor-quill .ql-editor h1 { font-size: 2rem; }
.rich-editor-quill .ql-editor h2 { font-size: 1.5rem; }
.rich-editor-quill .ql-editor h3 { font-size: 1.24rem; }

.rich-editor-quill .ql-editor blockquote {
  border-left: 4px solid var(--accent);
  padding: 10px 14px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.rich-editor-quill .ql-editor img {
  display: block;
  max-width: min(100%, 760px);
  max-height: 560px;
  object-fit: contain;
  margin: 14px auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.rich-editor-quill .ql-editor a,
.page-body a {
  color: var(--accent-strong);
  font-weight: 700;
  text-underline-offset: 0.16em;
}

.rich-editor-quill .ql-editor a.page-link,
.rich-editor-quill .ql-editor a.internal-page-link,
.page-body a.page-link,
.page-body a.internal-page-link {
  color: color-mix(in srgb, var(--gold) 72%, var(--accent-strong));
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 64%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-radius: calc(var(--radius) - 3px);
  padding: 0 0.18em;
}

.rich-editor-quill .editor-status {
  width: 100%;
  border-top: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
  padding: 8px 12px;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 750;
}

/* Le HTML produit par Quill reste fidèle dans la vue de lecture et l'impression. */
.page-body p,
.page-body li,
.page-body blockquote,
.print-document p,
.print-document li,
.print-document blockquote {
  white-space: normal;
}

.page-body .ql-align-center,
.print-document .ql-align-center { text-align: center; }
.page-body .ql-align-right,
.print-document .ql-align-right { text-align: right; }
.page-body .ql-align-justify,
.print-document .ql-align-justify {
  text-align: justify;
  text-justify: inter-word;
}
.page-body .ql-align-left,
.print-document .ql-align-left { text-align: left; }

@media (max-width: 680px) {
  .rich-editor-quill .editor-control-font {
    width: min(100%, 220px);
  }

  .rich-editor-quill .editor-control-size {
    width: 72px;
  }

  .rich-editor-quill .editor-separator {
    display: none;
  }

  .rich-editor-quill .ql-editor {
    min-height: 420px;
    padding: 18px;
  }
}

/* =====================================================================
   CORRECTIF TAILLE DE TEXTE — format strictement en ligne
   ===================================================================== */
.rich-editor-quill .ql-editor .ql-text-size {
  display: inline;
  line-height: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Sécurité pour les anciennes données qui contiendraient encore un titre. */
.edit-page .rich-editor-quill .ql-editor h1,
.edit-page .rich-editor-quill .ql-editor h2,
.edit-page .rich-editor-quill .ql-editor h3,
.edit-page .rich-editor-quill .ql-editor h4,
.edit-page .rich-editor-quill .ql-editor h5,
.edit-page .rich-editor-quill .ql-editor h6 {
  margin: 0 0 1em !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
}

/* =====================================================================
   IMAGES LIBRES DANS L'ÉDITEUR QUILL
   Déplacement absolu, dépôt direct et redimensionnement proportionnel.
   ===================================================================== */
.rich-editor-quill {
  position: relative;
}

.rich-editor-quill .ql-editor.ql-floating-image-canvas {
  position: relative;
  isolation: isolate;
}

.rich-editor-quill.is-image-dragover .ql-container::after {
  content: "Déposez l’image à l’endroit choisi";
  position: absolute;
  inset: 14px;
  z-index: 40;
  display: grid;
  place-items: center;
  border: 2px dashed color-mix(in srgb, var(--gold) 78%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
  color: var(--fantasy-button-text-strong, var(--gold));
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.92rem, 2vw, 1.2rem);
  font-weight: 750;
  letter-spacing: 0.02em;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

.rich-editor-quill .ql-floating-image {
  position: absolute;
  z-index: 6;
  display: block;
  max-width: calc(100% - 8px);
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  box-sizing: border-box;
}

.rich-editor-quill .ql-floating-image:hover,
.rich-editor-quill .ql-floating-image.is-selected {
  border-color: color-mix(in srgb, var(--gold) 82%, var(--line));
  box-shadow:
    0 0 0 2px rgb(0 0 0 / 32%),
    0 0 0 4px color-mix(in srgb, var(--gold) 26%, transparent),
    0 14px 34px rgb(0 0 0 / 36%);
}

.rich-editor-quill .ql-floating-image.is-selected,
.rich-editor-quill .ql-floating-image.is-moving,
.rich-editor-quill .ql-floating-image.is-resizing {
  z-index: 20;
}

.rich-editor-quill .ql-floating-image.is-moving {
  cursor: grabbing;
  opacity: 0.94;
}

.rich-editor-quill .ql-floating-image > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: calc(var(--radius) - 1px);
  background: var(--surface-muted);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.rich-editor-quill .ql-floating-image-handle {
  position: absolute;
  z-index: 3;
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid #2a1a0e;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 3px 8px rgb(0 0 0 / 42%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.rich-editor-quill .ql-floating-image:hover .ql-floating-image-handle,
.rich-editor-quill .ql-floating-image.is-selected .ql-floating-image-handle {
  opacity: 1;
  pointer-events: auto;
}

.rich-editor-quill .ql-floating-image-handle:hover {
  transform: scale(1.16);
  background: var(--fantasy-button-text-strong, #f4d987);
}

.rich-editor-quill .ql-floating-image-handle-nw {
  left: -8px;
  top: -8px;
  cursor: nwse-resize;
}

.rich-editor-quill .ql-floating-image-handle-ne {
  right: -8px;
  top: -8px;
  cursor: nesw-resize;
}

.rich-editor-quill .ql-floating-image-handle-se {
  right: -8px;
  bottom: -8px;
  cursor: nwse-resize;
}

.rich-editor-quill .ql-floating-image-handle-sw {
  left: -8px;
  bottom: -8px;
  cursor: nesw-resize;
}

/* Restitution fidèle dans la lecture, l'impression et les exports HTML. */
.page-body .wb-rich-content,
.print-document .wb-rich-content {
  position: relative;
  width: 100%;
  min-width: 0;
}

.page-body .wb-free-image,
.print-document .wb-free-image {
  position: absolute;
  z-index: 2;
  display: block;
  max-width: calc(100% - 8px);
  margin: 0;
  padding: 0;
}

.page-body .wb-free-image img,
.print-document .wb-free-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-muted);
  object-fit: contain;
}

@media print {
  .print-document .wb-free-image img {
    border-color: #bbb;
    background: transparent;
  }
}

/* Structure complete - arborescence centrale */
.world-pilot-panel {
  --tree-indent: 38px;
  --tree-gold-line: color-mix(in srgb, var(--gold) 44%, var(--line));
  padding: clamp(14px, 2vw, 22px);
  border-color: color-mix(in srgb, var(--gold) 48%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 3%), transparent 34%),
    linear-gradient(180deg, rgb(0 0 0 / 20%), rgb(0 0 0 / 8%)),
    var(--panel-bg);
  box-shadow: 0 24px 70px rgb(0 0 0 / 30%);
  container-type: inline-size;
}

.world-pilot-panel .pilot-header {
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.world-pilot-panel .pilot-title-block h2 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0;
}

.world-pilot-panel .pilot-title-block p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

.pilot-toolbar {
  align-items: stretch;
  gap: 8px;
}

.pilot-toolbar .button,
.pilot-toolbar .segmented-control .button {
  min-height: 42px;
  border-color: color-mix(in srgb, var(--gold) 36%, var(--line));
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%);
}

.pilot-toolbar .button:hover,
.pilot-toolbar .button:focus-visible,
.pilot-toolbar .button.active {
  border-color: color-mix(in srgb, var(--danger) 65%, var(--gold));
  background: color-mix(in srgb, var(--danger) 28%, var(--surface-strong));
  color: var(--ink);
}

.pilot-create-root {
  width: 44px;
  min-width: 44px;
  padding-inline: 0 !important;
  font-size: 1.25rem;
}

.pilot-tree-shell,
.pilot-legend {
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  overflow: hidden;
}

.pilot-tree-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 170px) minmax(164px, 200px);
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line));
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.world-pilot-panel .pilot-tree,
.world-pilot-panel .pilot-node,
.world-pilot-panel .pilot-children {
  display: block;
}

.world-pilot-panel .pilot-node {
  position: relative;
}

.world-pilot-panel .pilot-children {
  position: relative;
}

.world-pilot-panel .pilot-children::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: 0;
  left: calc(28px + var(--depth, 0) * var(--tree-indent));
  border-left: 1px dotted var(--tree-gold-line);
  pointer-events: none;
}

.world-pilot-panel .pilot-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 170px) minmax(164px, 200px);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 8px 18px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line));
  border-radius: 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 2%), transparent 45%);
}

.world-pilot-panel .pilot-row:hover,
.world-pilot-panel .pilot-row.selected,
.world-pilot-panel .pilot-row:focus-within {
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
}

.world-pilot-panel .pilot-row.selected {
  box-shadow: inset 3px 0 0 var(--danger), inset 0 0 0 1px color-mix(in srgb, var(--danger) 42%, transparent);
}

.pilot-name-cell {
  position: relative;
  display: grid;
  grid-template-columns: 30px 30px 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding-left: calc(var(--depth, 0) * var(--tree-indent));
}

.pilot-name-cell::before {
  content: "";
  position: absolute;
  left: calc(14px + var(--depth, 0) * var(--tree-indent));
  top: 50%;
  width: 22px;
  border-top: 1px dotted var(--tree-gold-line);
  opacity: 0.72;
  pointer-events: none;
}

.pilot-toggle,
.pilot-toggle-spacer,
.pilot-drag-handle,
.pilot-type-badge,
.pilot-counter-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.pilot-toggle,
.pilot-drag-handle {
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
  color: var(--gold);
  cursor: pointer;
}

.pilot-toggle:disabled {
  opacity: 0.36;
  cursor: default;
}

.pilot-drag-handle {
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: grab;
}

.pilot-drag-handle:active {
  cursor: grabbing;
}

.pilot-type-badge {
  width: 30px;
  height: 34px;
  border: 1px solid var(--tree-gold-line);
  border-radius: 6px;
  color: var(--gold);
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.pilot-type-badge.page {
  border-color: color-mix(in srgb, var(--danger) 72%, var(--line));
  color: var(--danger);
}

.world-pilot-panel .pilot-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.world-pilot-panel .pilot-title {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

.world-pilot-panel .pilot-subtitle {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilot-content-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--ink-soft);
}

.pilot-counter {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 46px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.pilot-counter-icon {
  width: 20px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--gold) 46%, var(--line));
  border-radius: 4px;
  color: var(--gold);
  font-size: 0.72rem;
}

.pilot-page-meta {
  justify-content: flex-start;
}

.pilot-page-type {
  color: var(--muted);
  font-size: 0.82rem;
}

.pilot-actions-cell {
  display: grid;
  grid-template-columns: minmax(74px, auto) minmax(92px, auto);
  gap: 8px;
  align-items: center;
  justify-content: end;
  min-width: 0;
}

.world-pilot-panel .pilot-primary-action,
.world-pilot-panel .action-menu > summary {
  min-width: 84px !important;
  min-height: 36px;
  justify-content: center;
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
}

.world-pilot-panel .action-menu-popover {
  min-width: 230px;
}

.world-pilot-panel .action-menu-popover hr {
  width: 100%;
  margin: 5px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.pilot-empty-row {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.pilot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: 10px 18px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.pilot-legend > span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.world-pilot-panel.tree-compact .pilot-row {
  grid-template-columns: minmax(0, 1fr) minmax(154px, 190px);
  min-height: 42px;
  padding-block: 5px;
}

.world-pilot-panel.tree-compact .pilot-tree-head {
  grid-template-columns: minmax(0, 1fr) minmax(154px, 190px);
  padding-block: 10px;
}

.world-pilot-panel.tree-compact .pilot-tree-head span:nth-child(2),
.world-pilot-panel.tree-compact .pilot-content-cell,
.world-pilot-panel.tree-compact .pilot-subtitle,
.world-pilot-panel.tree-compact .pilot-legend {
  display: none;
}

.world-pilot-panel.tree-compact .pilot-tree-head span:nth-child(3) {
  grid-column: 2;
}

.world-pilot-panel.tree-compact .pilot-title {
  font-size: 0.95rem;
}

.world-pilot-panel .pilot-row.is-dragging {
  opacity: 0.58;
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
}

.world-pilot-panel .pilot-row.is-drop-target,
.world-pilot-panel.is-drop-target {
  outline: 2px solid color-mix(in srgb, var(--danger) 72%, var(--gold));
  outline-offset: -2px;
}

.world-pilot-panel .pilot-row.is-drop-before::after,
.world-pilot-panel .pilot-row.is-drop-after::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 78%, var(--gold));
  box-shadow: 0 0 14px color-mix(in srgb, var(--danger) 48%, transparent);
}

.world-pilot-panel .pilot-row.is-drop-before::after {
  top: -2px;
}

.world-pilot-panel .pilot-row.is-drop-after::after {
  bottom: -2px;
}

.world-pilot-panel .pilot-row.is-drop-inside,
.world-pilot-panel.is-drop-inside {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
}

.world-pilot-panel button:focus-visible,
.world-pilot-panel summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 72%, white);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .world-pilot-panel .pilot-row,
  .world-pilot-panel.tree-compact .pilot-row {
    grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
  }

  .pilot-tree-head,
  .world-pilot-panel.tree-compact .pilot-tree-head {
    grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
  }

  .pilot-tree-head span:nth-child(2),
  .pilot-content-cell {
    display: none;
  }

  .pilot-tree-head span:nth-child(3) {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .world-pilot-panel {
    --tree-indent: 22px;
    padding: 10px;
  }

  .world-pilot-panel .pilot-header,
  .pilot-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .world-pilot-panel .pilot-row,
  .world-pilot-panel.tree-compact .pilot-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-inline: 10px;
  }

  .pilot-tree-head {
    display: none;
  }

  .pilot-name-cell {
    grid-template-columns: 28px 28px 30px minmax(0, 1fr);
    gap: 6px;
  }

  .pilot-actions-cell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: stretch;
    padding-left: calc(var(--depth, 0) * var(--tree-indent));
  }

  .world-pilot-panel .pilot-primary-action,
  .world-pilot-panel .action-menu,
  .world-pilot-panel .action-menu > summary {
    width: 100%;
  }

  .world-pilot-panel .action-menu-popover {
    left: 0;
    right: auto;
    min-width: min(230px, calc(100vw - 36px));
  }
}
@container (min-width: 460px) and (max-width: 680px) {
  .world-pilot-panel .pilot-row,
  .world-pilot-panel.tree-compact .pilot-row {
    grid-template-columns: minmax(0, 1fr) minmax(156px, 190px);
  }

  .world-pilot-panel .pilot-tree-head,
  .world-pilot-panel.tree-compact .pilot-tree-head {
    grid-template-columns: minmax(0, 1fr) minmax(156px, 190px);
  }

  .world-pilot-panel .pilot-tree-head span:nth-child(2),
  .world-pilot-panel .pilot-content-cell {
    display: none;
  }

  .world-pilot-panel .pilot-tree-head span:nth-child(3) {
    grid-column: 2;
  }
}

/* Panneau public de lecture */
.publication-settings {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  gap: 20px;
  align-items: center;
  border-color: var(--gold);
}

.publication-settings h3,
.publication-settings p {
  margin: 0;
}

.publication-settings p {
  margin-top: 6px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.publication-toggles {
  display: grid;
  gap: 8px;
}

.publication-pill {
  border-color: var(--gold);
  color: var(--gold);
}

.public-portal {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 226px minmax(480px, 1fr) 304px;
  grid-template-rows: 80px minmax(0, 1fr);
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.public-portal button,
.public-portal input,
.public-portal select {
  color: inherit;
  font: inherit;
}

.public-sidebar {
  grid-row: 1 / 3;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  border-right: 1px solid var(--line-strong);
  background: var(--surface);
}

.public-brand {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 100%;
  padding: 28px 18px 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}

.public-sigil {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  color: var(--gold);
}

.public-sigil .ui-icon {
  width: 30px;
  height: 30px;
  transform: rotate(-45deg);
}

.public-brand strong,
.public-section-heading h1,
.public-section-heading h2,
.public-hero h2,
.public-card h3,
.public-page-detail h1,
.public-inspector h2,
.public-empty h1 {
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
}

.public-brand strong {
  margin-top: 10px;
  color: var(--gold);
  font-size: 1.08rem;
  letter-spacing: 0.08em;
}

.public-brand small {
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.94rem;
  line-height: 1.25;
}

.public-navigation {
  overflow: auto;
  padding: 12px 8px;
}

.public-nav-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px 8px calc(10px + var(--public-depth, 0) * 10px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
}

.public-nav-item:hover,
.public-nav-item.active {
  border-color: var(--line-strong);
  background: var(--surface-strong);
  color: var(--gold);
}

.public-nav-item .ui-icon {
  width: 20px;
  height: 20px;
}

.public-nav-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.public-nav-item > small {
  color: var(--muted);
  font-size: 0.7rem;
}

.public-nav-thumb {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  object-fit: contain;
}

.public-nav-item .category-thumb-fallback {
  display: grid;
  place-items: center;
  font-family: Cinzel, serif;
  font-size: 0.68rem;
}

.public-sidebar-foot {
  display: grid;
  gap: 9px;
  padding: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.74rem;
  text-align: center;
}

.public-return-button,
.public-empty button,
.public-detail-back,
.public-read-button,
.public-inspector-open {
  min-height: 40px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.public-return-button {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.public-return-button .ui-icon {
  width: 17px;
  height: 17px;
}

.public-topbar {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 170px 150px 146px auto;
  gap: 10px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface);
}

.public-search {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: var(--input-bg);
}

.public-search .ui-icon {
  width: 20px;
  height: 20px;
  color: var(--gold);
}

.public-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.public-topbar select {
  height: 46px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  background: var(--input-bg);
}

.public-layout-switch {
  display: flex;
  gap: 5px;
}

.public-layout-switch button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
}

.public-layout-switch button.active {
  border-color: var(--gold);
  color: var(--gold);
}

.public-main {
  min-width: 0;
  overflow: auto;
  padding: 22px;
  background: var(--bg);
}

.public-section + .public-section {
  margin-top: 22px;
}

.public-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  color: var(--gold);
}

.public-section-heading > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.public-section-heading h1,
.public-section-heading h2 {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.public-section-heading small {
  color: var(--muted);
}

.public-hero {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(300px, 0.95fr);
  min-height: 280px;
  border: 1px solid var(--gold);
  background: var(--surface);
}

.public-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 4vw, 44px);
}

.public-kicker {
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.public-hero h2 {
  margin: 10px 0 5px;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1;
}

.public-hero-meta {
  margin: 0 0 16px;
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
}

.public-hero-summary {
  max-width: 660px;
  margin: 0;
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.45;
}

.public-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.public-tags .tag-pill {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--gold);
  font-size: 0.67rem;
}

.public-read-button {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  min-width: 170px;
  margin-top: 20px;
  padding: 0 15px;
}

.public-read-button:hover,
.public-return-button:hover,
.public-inspector-open:hover,
.public-empty button:hover,
.public-detail-back:hover {
  background: var(--gold);
  color: var(--bg);
}

.public-hero-visual {
  min-height: 280px;
  border-left: 1px solid var(--line-strong);
  background: var(--surface-muted);
}

.public-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-hero-visual > span {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--gold);
}

.public-hero-visual .ui-icon {
  width: 72px;
  height: 72px;
}

.public-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.public-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 292px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  overflow: hidden;
}

.public-card-image {
  width: 100%;
  height: 112px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.public-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-card-mark {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  color: var(--gold);
  font-family: Cinzel, serif;
}

.public-card-body {
  padding: 18px;
}

.public-card h3 {
  margin: 8px 0 7px;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.12;
}

.public-card p {
  margin: 0;
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  line-height: 1.35;
}

.public-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
}

.public-card footer button {
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--gold);
  font-family: Cinzel, serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-card-grid.is-list {
  grid-template-columns: 1fr;
}

.public-card-grid.is-list .public-card {
  grid-template-columns: 170px minmax(0, 1fr) 120px;
  grid-template-rows: minmax(148px, auto);
  min-height: 148px;
}

.public-card-grid.is-list .public-card-image {
  width: 170px;
  height: 100%;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.public-card-grid.is-list .public-card footer {
  flex-direction: column;
  justify-content: center;
  border-top: 0;
  border-left: 1px solid var(--line);
}

.public-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 9px;
}

.public-category-card {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  min-height: 88px;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  text-align: left;
}

.public-category-card img,
.public-category-fallback {
  width: 94px;
  height: 100%;
  min-height: 86px;
  object-fit: contain;
  border-right: 1px solid var(--line);
}

.public-category-fallback {
  display: grid;
  place-items: center;
  color: var(--gold);
  font-family: Cinzel, serif;
  font-size: 1.8rem;
  background: var(--surface-muted);
}

.public-category-card > span:last-child {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
}

.public-category-card strong {
  color: var(--gold);
  font-family: Cinzel, serif;
  font-size: 0.86rem;
}

.public-category-card small {
  color: var(--muted);
}

.public-inspector {
  min-width: 0;
  overflow: auto;
  padding: 18px 14px;
  border-left: 1px solid var(--line-strong);
  background: var(--surface);
}

.public-inspector section {
  padding: 0 4px 18px;
  border-bottom: 1px solid var(--line);
}

.public-inspector section + section {
  padding-top: 18px;
}

.public-inspector h2 {
  margin: 0 0 13px;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-inspector dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.public-inspector dl > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
}

.public-inspector dt,
.public-inspector p {
  color: var(--muted);
}

.public-inspector dd {
  margin: 0;
  color: var(--ink-soft);
}

.public-inspector p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.45;
}

.public-related {
  display: grid;
  gap: 6px;
}

.public-related button {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  text-align: left;
}

.public-related strong {
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
}

.public-related small {
  color: var(--muted);
}

.public-inspector-open {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 18px;
  padding: 0 13px;
}

.public-inspector-empty,
.public-empty {
  color: var(--muted);
  line-height: 1.5;
}

.public-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: calc(100vh - 140px);
  padding: 40px;
  border: 1px solid var(--line-strong);
  text-align: center;
}

.public-empty > span {
  color: var(--gold);
}

.public-empty .ui-icon {
  width: 50px;
  height: 50px;
}

.public-empty h1 {
  margin: 18px 0 8px;
  color: var(--ink);
}

.public-empty p {
  max-width: 560px;
  margin: 0 0 18px;
}

.public-empty button {
  padding: 0 16px;
}

.public-page-detail {
  width: min(880px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.public-detail-back {
  margin: 20px 26px 0;
  padding: 0 14px;
}

.public-page-detail > header {
  padding: 40px clamp(24px, 6vw, 64px) 30px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.public-page-detail h1 {
  margin: 10px 0;
  color: var(--ink);
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 1;
}

.public-page-detail > header > p {
  margin: 0;
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.06rem;
}

.public-page-detail > header .public-tags {
  justify-content: center;
}

.public-detail-cover {
  height: min(430px, 52vh);
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.public-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-page-body,
.public-detail-fields {
  padding: 34px clamp(24px, 7vw, 78px);
}

.public-page-body {
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.62;
}

.public-page-body h1,
.public-page-body h2,
.public-page-body h3,
.public-detail-fields h2 {
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
}

.public-page-body img {
  max-height: 620px;
  margin: 22px auto;
  object-fit: contain;
}

.public-page-body a,
.public-detail-fields button {
  border: 0;
  background: transparent;
  color: var(--gold);
  text-decoration: underline;
}

.public-detail-fields {
  border-bottom: 1px solid var(--line);
}

.public-detail-fields h2 {
  margin: 0 0 18px;
  font-size: 1rem;
}

.public-detail-fields dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
}

.public-detail-fields dl > div {
  padding: 12px;
  border: 1px solid var(--line);
}

.public-detail-fields dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.78rem;
}

.public-detail-fields dd {
  margin: 0;
  color: var(--ink-soft);
}

.public-detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  padding: 24px;
  border-top: 1px solid var(--line);
}

.public-detail-gallery figure {
  margin: 0;
  border: 1px solid var(--line);
}

.public-detail-gallery img {
  width: 100%;
  height: 220px;
  object-fit: contain;
}

.public-detail-gallery figcaption {
  padding: 9px;
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 1220px) {
  .public-portal {
    grid-template-columns: 205px minmax(460px, 1fr) 260px;
  }

  .public-topbar {
    grid-template-columns: minmax(230px, 1fr) 150px 130px 130px auto;
    padding-inline: 12px;
  }
}

@media (max-width: 980px) {
  .public-portal {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .public-topbar {
    grid-column: 2;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(120px, 0.45fr));
    height: auto;
  }

  .public-topbar [data-public-tag],
  .public-layout-switch {
    display: none;
  }

  .public-inspector {
    display: none;
  }

  .public-hero {
    grid-template-columns: 1fr;
  }

  .public-hero-visual {
    min-height: 240px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .publication-settings {
    grid-template-columns: 1fr;
  }

  .public-portal {
    display: block;
    min-height: 100vh;
    overflow: visible;
  }

  .public-sidebar {
    display: block;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .public-brand {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    padding: 14px;
    text-align: left;
  }

  .public-sigil {
    grid-row: 1 / 3;
    width: 46px;
    height: 46px;
  }

  .public-brand strong {
    margin: 2px 0 0;
  }

  .public-navigation {
    display: flex;
    gap: 6px;
    padding: 8px;
  }

  .public-nav-item {
    flex: 0 0 auto;
    width: auto;
  }

  .public-nav-item > small,
  .public-nav-item .public-nav-thumb,
  .public-nav-item .ui-icon {
    display: none;
  }

  .public-sidebar-foot {
    display: none;
  }

  .public-topbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
  }

  .public-search {
    grid-column: 1 / 3;
  }

  .public-topbar [data-public-sort] {
    display: block;
  }

  .public-main {
    overflow: visible;
    padding: 12px;
  }

  .public-card-grid.is-list .public-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .public-card-grid.is-list .public-card-image {
    width: 100%;
    height: 150px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .public-card-grid.is-list .public-card footer {
    flex-direction: row;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}
/* Bibliothèque publique narrative : structure consolidée de l’accueil au mode lecture. */
.public-portal {
  grid-template-columns: 248px minmax(0, 1fr);
  grid-template-rows: 78px minmax(0, 1fr);
  background:
    radial-gradient(circle at 72% 8%, color-mix(in srgb, var(--gold) 4%, transparent), transparent 32%),
    var(--bg);
}

.public-sidebar {
  position: relative;
  z-index: 20;
}

.public-navigation {
  scrollbar-width: thin;
}

.public-nav-branch {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  padding-left: var(--public-indent, 0);
}

.public-nav-branch::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(11px + var(--public-indent, 0));
  border-left: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  content: "";
}

.public-nav-branch[data-public-depth="0"]::before {
  display: none;
}

.public-nav-toggle,
.public-nav-toggle-placeholder {
  position: relative;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 40px;
  place-items: center;
}

.public-nav-toggle {
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--gold);
  cursor: pointer;
}

.public-nav-toggle span {
  font-size: 1.15rem;
  transition: transform 140ms ease;
}

.public-nav-branch.is-expanded > .public-nav-toggle span {
  transform: rotate(90deg);
}

.public-nav-children {
  grid-column: 1 / 3;
}

.public-nav-item {
  position: relative;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 40px;
  padding: 5px 6px;
}

.public-nav-branch > .public-nav-item {
  grid-column: 2;
}

.public-nav-branch:not([data-public-depth="0"]) > .public-nav-item::before {
  position: absolute;
  top: 50%;
  left: -13px;
  width: 13px;
  border-top: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  content: "";
  pointer-events: none;
}

.public-nav-item > .public-nav-label {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.22;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: normal;
}

.public-nav-branch.is-deep > .public-nav-item {
  grid-template-columns: minmax(0, 1fr) auto;
}

.public-nav-branch.is-deep > .public-nav-item .public-nav-thumb {
  display: none;
}

.public-nav-branch.is-deep > .public-nav-item > .public-nav-label {
  -webkit-line-clamp: 3;
}

.public-nav-item > small {
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--gold);
}

.public-nav-thumb,
.public-nav-item .category-thumb {
  width: 20px;
  height: 20px;
  object-fit: contain;
  background: var(--surface-muted);
}

.public-topbar {
  grid-column: 2;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  padding: 14px clamp(14px, 2vw, 28px);
}

.public-menu-toggle {
  display: none;
  gap: 8px;
  align-items: center;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  background: var(--input-bg);
  color: var(--gold);
}

.public-menu-toggle .ui-icon {
  width: 18px;
  height: 18px;
}

.public-filters {
  position: relative;
}

.public-filters > summary {
  display: grid;
  place-items: center;
  min-width: 112px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: var(--input-bg);
  color: var(--gold);
  cursor: pointer;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}

.public-filters > summary::-webkit-details-marker {
  display: none;
}

.public-filter-panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(150px, 1fr) minmax(150px, 1fr);
  gap: 10px;
  width: min(650px, calc(100vw - 290px));
  padding: 14px;
  border: 1px solid var(--gold);
  background: var(--surface);
  box-shadow: 0 18px 50px rgb(0 0 0 / 42%);
}

.public-filter-panel label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.7rem;
}

.public-filter-panel select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line-strong);
  background: var(--input-bg);
}

.public-topbar > .public-layout-switch {
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line-strong);
  background: var(--input-bg);
}

.public-topbar > .public-layout-switch button {
  width: 36px;
  height: 36px;
  border-color: transparent;
}

.public-topbar > .public-layout-switch button:hover,
.public-topbar > .public-layout-switch button.active {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--surface) 88%, var(--gold));
}

.public-main {
  padding: clamp(16px, 2.2vw, 34px);
  background-color: var(--bg);
  background-image: url("assets/findpublic.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.public-world-intro,
.public-section-intro {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 62px);
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(100deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, var(--gold)) 100%);
}

.public-world-intro::after,
.public-section-intro::after {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 70px;
  height: 70px;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  content: "";
  transform: rotate(45deg);
}

.public-world-intro h1,
.public-section-intro h1 {
  max-width: 900px;
  margin: 12px 0 10px;
  color: var(--ink);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2rem, 5vw, 4.8rem);
  font-weight: 500;
  line-height: 0.98;
}

.public-world-intro p,
.public-section-intro p {
  max-width: 720px;
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
}

.public-world-intro small,
.public-section-intro small {
  color: var(--gold);
}

.public-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 30px;
  color: var(--muted);
}

.public-breadcrumbs button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
}

.public-hero {
  min-height: 0;
  overflow: hidden;
}

.public-hero-link {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  width: 100%;
  min-height: 330px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.public-hero-link:hover,
.public-card-link:hover,
.public-category-card:hover {
  background: color-mix(in srgb, var(--surface) 90%, var(--gold));
}

.public-hero-copy {
  align-items: flex-start;
  padding: clamp(26px, 4vw, 52px);
}

.public-hero-copy > strong {
  margin: 10px 0 7px;
  color: var(--ink);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 500;
  line-height: 1;
}

.public-hero-summary,
.public-card-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.public-hero-summary {
  -webkit-line-clamp: 3;
}

.public-hero-visual {
  display: grid;
  min-height: 330px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gold) 9%, transparent), transparent 68%),
    var(--surface-muted);
}

.public-hero-visual img,
.public-category-image img,
.public-card-image img,
.public-detail-cover img,
.public-detail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.public-card-grid.is-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}

.public-card-grid.is-editorial.count-one {
  grid-template-columns: minmax(0, 1fr);
}

.public-card-grid.is-editorial.count-one .public-card-link {
  grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);
  grid-template-rows: minmax(220px, auto) auto;
}

.public-card-grid.is-editorial.count-one .public-card.no-image .public-card-link {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(220px, auto) auto;
}

.public-card-grid.is-editorial.count-one .public-card-image {
  grid-row: 1 / 3;
  height: 100%;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.public-card-grid.is-editorial.count-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-card {
  display: block;
  min-height: 0;
  transition: border-color 160ms ease, transform 160ms ease;
}

.public-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.public-card-link {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 280px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.public-card-image {
  display: grid;
  width: 100%;
  height: 170px;
  place-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
  overflow: hidden;
}

.public-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 19px;
}

.public-card-body > strong {
  margin: 8px 0 8px;
  color: var(--ink);
  font-family: Cinzel, Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
}

.public-card-summary {
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.4;
  -webkit-line-clamp: 3;
}

.public-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
}

.public-card-footer > span:last-child {
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  text-transform: uppercase;
}

.public-card-grid.is-list {
  grid-template-columns: 1fr;
}

.public-card-grid.is-list .public-card-link {
  grid-template-columns: 190px minmax(0, 1fr) 130px;
  grid-template-rows: minmax(160px, auto);
  min-height: 160px;
}

.public-card-grid.is-list .public-card.no-image .public-card-link {
  grid-template-columns: minmax(0, 1fr) 160px;
}

.public-card-grid.is-list .public-card.no-image .public-card-body {
  justify-content: center;
}

.public-card-grid.is-list .public-card-image {
  width: 190px;
  height: 100%;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.public-card-grid.is-list .public-card-footer {
  flex-direction: column;
  justify-content: center;
  border-top: 0;
  border-left: 1px solid var(--line);
}

.public-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.public-category-card {
  grid-template-columns: 120px minmax(0, 1fr);
  min-height: 154px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease;
}

.public-category-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.public-category-image,
.public-category-fallback {
  display: grid;
  width: 120px;
  height: 100%;
  min-height: 152px;
  place-items: center;
  border-right: 1px solid var(--line);
  background: var(--surface-muted);
  overflow: hidden;
}

.public-category-fallback .ui-icon {
  width: 36px;
  height: 36px;
  color: var(--gold);
}

.public-category-card > .public-category-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 16px;
}

.public-category-copy strong {
  color: var(--ink);
  font-family: Cinzel, Georgia, serif;
}

.public-category-copy small,
.public-category-copy > span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.public-category-copy b {
  margin-top: 5px;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.public-portal.is-reading {
  grid-template-columns: 210px minmax(0, 1fr);
}

.public-portal.is-reading .public-filters {
  display: none;
}

.public-portal.is-reading .public-topbar > .public-layout-switch {
  display: none;
}

.public-portal.is-reading .public-topbar {
  grid-template-columns: minmax(260px, 680px);
  justify-content: center;
}

.public-page-detail {
  width: min(900px, 100%);
  overflow: hidden;
  box-shadow: 0 28px 90px rgb(0 0 0 / 24%);
}

.public-detail-cover {
  display: grid;
  height: auto;
  min-height: 240px;
  max-height: 70vh;
  place-items: center;
  background: var(--surface-muted);
}

.public-detail-cover img {
  max-height: 70vh;
}

.public-page-body {
  padding: clamp(30px, 7vw, 74px);
  font-size: clamp(1.08rem, 1.8vw, 1.24rem);
  line-height: 1.72;
}

.public-page-body p,
.public-page-body ul,
.public-page-body ol,
.public-page-body blockquote {
  margin-block: 0 1.3em;
}

.public-page-body img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.public-detail-gallery {
  grid-template-columns: 1fr;
  padding: clamp(22px, 5vw, 54px);
}

.public-detail-gallery figure {
  display: grid;
  place-items: center;
  background: var(--surface-muted);
}

.public-detail-gallery img {
  height: auto;
  max-height: 72vh;
}

.public-reader-related {
  padding: clamp(24px, 5vw, 54px);
  border-top: 1px solid var(--line);
}

.public-reader-related .public-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-reader-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid var(--line);
}

.public-reader-pagination button {
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid var(--line-strong);
  background: var(--input-bg);
  color: var(--gold);
  text-align: left;
}

.public-reader-pagination button:last-child {
  text-align: right;
}

.public-reader-pagination small {
  color: var(--muted);
  text-transform: uppercase;
}

.public-empty-compact {
  min-height: 260px;
}

.public-portal button:focus-visible,
.public-portal input:focus-visible,
.public-portal select:focus-visible,
.public-portal summary:focus-visible,
.public-page-body a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .public-card-grid,
  .public-card-grid.is-grid,
  .public-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-hero-link {
    grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr);
  }
}

@media (max-width: 780px) {
  .public-portal,
  .public-portal.is-reading {
    display: block;
    min-height: 100vh;
    overflow: visible;
  }

  .public-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    display: grid;
    width: min(310px, 88vw);
    min-height: 100vh;
    border-right: 1px solid var(--gold);
    transform: translateX(-102%);
    transition: transform 180ms ease;
  }

  .public-portal.nav-open .public-sidebar {
    transform: translateX(0);
  }

  .public-brand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .public-sigil {
    grid-row: 1 / 3;
  }

  .public-navigation {
    display: block;
  }

  .public-nav-item {
    width: 100%;
  }

  .public-nav-item > small,
  .public-nav-item .public-nav-thumb,
  .public-nav-item .ui-icon {
    display: initial;
  }

  .public-sidebar-foot {
    display: grid;
  }

  .public-topbar,
  .public-portal.is-reading .public-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding: 9px;
  }

  .public-menu-toggle {
    display: flex;
  }

  .public-menu-toggle span {
    display: none;
  }

  .public-filter-panel {
    position: fixed;
    top: 72px;
    right: 10px;
    left: 10px;
    grid-template-columns: 1fr 1fr;
    width: auto;
  }

  .public-main {
    padding: 12px;
  }

  .public-hero-link {
    grid-template-columns: 1fr;
  }

  .public-hero-visual {
    min-height: 250px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .public-card-grid,
  .public-card-grid.is-grid,
  .public-card-grid.is-editorial.count-two,
  .public-category-grid,
  .public-reader-related .public-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .public-search {
    height: 42px;
  }

  .public-filters > summary,
  .public-menu-toggle {
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    font-size: 0;
  }

  .public-topbar > .public-layout-switch {
    gap: 1px;
    padding: 2px;
  }

  .public-topbar > .public-layout-switch button {
    width: 30px;
    height: 36px;
  }

  .public-filters > summary::after {
    content: "☷";
    font-size: 1rem;
  }

  .public-filter-panel {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 90px);
    overflow: auto;
  }

  .public-world-intro,
  .public-section-intro {
    padding: 28px 22px;
  }

  .public-world-intro::after,
  .public-section-intro::after {
    display: none;
  }

  .public-hero-copy {
    padding: 26px 22px;
  }

  .public-card-grid.is-editorial.count-one .public-card-link,
  .public-card-grid.is-list .public-card-link {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .public-card-grid.is-editorial.count-one .public-card-image,
  .public-card-grid.is-list .public-card-image {
    grid-row: auto;
    width: 100%;
    height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .public-card-grid.is-list .public-card-footer {
    flex-direction: row;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .public-category-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .public-category-image,
  .public-category-fallback {
    width: 92px;
  }

  .public-page-detail {
    border-right: 0;
    border-left: 0;
  }

  .public-page-detail > header {
    padding: 34px 20px 24px;
  }

  .public-detail-back {
    margin-inline: 16px;
  }

  .public-detail-fields,
  .public-page-body,
  .public-reader-related {
    padding: 26px 20px;
  }

  .public-reader-pagination {
    grid-template-columns: 1fr;
  }
}

/* Persistance serveur : état discret, disponible dans toutes les vues. */
.server-save-indicator {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 10000;
  max-width: min(420px, calc(100vw - 36px));
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--border, #746749) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel, #171510) 94%, transparent);
  box-shadow: 0 8px 30px #0008;
  color: var(--muted, #c7bea8);
  font-size: 12px;
  line-height: 1.25;
  pointer-events: none;
}

.server-save-indicator::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #ad9c78;
}

.server-save-indicator[data-state="confirmed"]::before { background: #72bd86; }
.server-save-indicator[data-state="sending"]::before { background: #d7aa53; animation: server-pulse 1s infinite alternate; }
.server-save-indicator[data-state="error"]::before { background: #df746b; }
.server-save-indicator[data-state="public"]::before { background: #75a9c9; }

@keyframes server-pulse { to { opacity: .35; } }

.server-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #060706d9;
  backdrop-filter: blur(8px);
}

.server-login-card {
  position: relative;
  width: min(460px, 100%);
  padding: 32px;
  border: 1px solid var(--border, #746749);
  border-radius: var(--radius, 8px);
  background: var(--panel, #171510);
  box-shadow: 0 24px 80px #000b;
}

.server-login-card h2 { margin: 8px 0 10px; }
.server-login-card > p { color: var(--muted, #c7bea8); }
.server-login-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 24px;
}
.server-login-error { min-height: 20px; color: #ef7e75 !important; }

/* Correctif de cohérence — accueil public, archives et visionneuse d’images. */
.public-global-home {
  margin-bottom: 8px;
  border-color: var(--line-strong);
}

.public-world-intro-home {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(420px, 1.18fr);
  align-items: stretch;
  padding: 0;
}

.public-world-intro-home::after {
  z-index: 2;
  pointer-events: none;
}

.public-world-intro-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(30px, 5vw, 68px);
}

.public-home-featured,
.public-world-cover {
  min-width: 0;
  min-height: 420px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--line-strong);
  background: var(--surface-muted);
  overflow: hidden;
}

.public-home-featured {
  display: grid;
  grid-template-rows: minmax(250px, 1fr) auto;
  width: 100%;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.public-home-featured:hover {
  background: color-mix(in srgb, var(--surface) 90%, var(--gold));
}

.public-home-featured-visual,
.public-world-cover {
  display: grid;
  place-items: center;
}

.public-home-featured-visual {
  min-width: 0;
  min-height: 250px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gold) 8%, transparent), transparent 68%),
    var(--surface-muted);
  overflow: hidden;
}

.public-home-featured-visual img,
.public-world-cover img,
.public-home-category-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-home-featured-visual > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--gold);
}

.public-home-featured-visual .ui-icon {
  width: 64px;
  height: 64px;
}

.public-home-featured-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px 24px 22px;
}

.public-home-featured-copy > strong {
  color: var(--ink);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 600;
  line-height: 1.15;
}

.public-home-featured-copy > small,
.public-home-featured-copy > span:not(.public-kicker) {
  color: var(--muted);
  line-height: 1.42;
}

.public-home-featured-copy > b {
  margin-top: 5px;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-home-categories,
.public-home-recent,
.public-archive-section {
  margin-top: 24px;
}

.public-home-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.public-home-category-card {
  display: grid;
  grid-template-rows: 190px minmax(0, 1fr);
  min-width: 0;
  min-height: 360px;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease;
}

.public-home-category-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.public-home-category-visual {
  display: grid;
  width: 100%;
  min-width: 0;
  height: 190px;
  place-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
  overflow: hidden;
}

.public-home-category-visual > .public-category-fallback {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}

.public-home-category-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  padding: 20px;
}

.public-home-category-copy > strong {
  color: var(--ink);
  font-family: Cinzel, Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.2;
}

.public-home-category-copy > small,
.public-home-category-copy > span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.public-home-category-copy > b {
  margin-top: auto;
  padding-top: 8px;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-card-grid-compact .public-card-link {
  min-height: 260px;
}

.public-archive-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--gold);
  background: var(--surface);
}

.public-archive-callout h2 {
  margin: 8px 0 6px;
  color: var(--ink);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 500;
}

.public-archive-callout p {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.5;
}

.public-archive-callout > button,
.public-archive-back,
.public-archive-pagination button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.public-archive-callout > button:hover,
.public-archive-back:hover,
.public-archive-pagination button:hover:not(:disabled),
.public-archive-pagination button.active {
  background: var(--gold);
  color: var(--bg);
}

.public-archive-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.public-archive-intro .public-breadcrumbs {
  grid-column: 1 / 3;
}

.public-archive-intro-copy {
  min-width: 0;
}

.public-archive-back {
  position: relative;
  z-index: 2;
  margin-left: 24px;
}

.public-archive-pagination {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.public-archive-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: center;
}

.public-archive-pagination button {
  min-width: 42px;
}

.public-archive-pagination button:disabled {
  cursor: default;
  opacity: 0.42;
}

.public-image-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(0 0 0 / 86%);
  backdrop-filter: blur(5px);
}

.public-image-lightbox {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1500px, 100%);
  height: min(920px, calc(100vh - 36px));
  border: 1px solid var(--gold);
  background: var(--bg);
  box-shadow: 0 28px 90px rgb(0 0 0 / 60%);
  overflow: hidden;
}

.public-image-lightbox-header,
.public-image-lightbox-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface);
}

.public-image-lightbox-header {
  justify-content: space-between;
}

.public-image-lightbox-header strong {
  overflow: hidden;
  color: var(--ink);
  font-family: Cinzel, Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-image-lightbox-header button,
.public-image-lightbox-toolbar button {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  background: var(--input-bg);
  color: var(--gold);
  cursor: pointer;
}

.public-image-lightbox-header button:hover,
.public-image-lightbox-toolbar button:hover {
  border-color: var(--gold);
}

.public-image-lightbox-toolbar {
  justify-content: center;
}

.public-image-lightbox-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #050606;
  cursor: grab;
  touch-action: none;
}

.public-image-lightbox-viewport:active {
  cursor: grabbing;
}

.public-image-lightbox-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translate(var(--public-image-pan-x, 0), var(--public-image-pan-y, 0)) scale(var(--public-image-zoom, 1));
  transform-origin: center;
}

.public-image-lightbox-stage img {
  display: block;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.public-image-lightbox-help {
  padding: 9px 14px;
  border-top: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

@media (max-width: 1100px) {
  .public-world-intro-home {
    grid-template-columns: minmax(280px, 0.9fr) minmax(350px, 1.1fr);
  }

  .public-home-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .public-world-intro-home {
    grid-template-columns: 1fr;
  }

  .public-home-featured,
  .public-world-cover {
    min-height: 0;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }

  .public-home-category-grid {
    grid-template-columns: 1fr;
  }

  .public-archive-callout,
  .public-archive-intro {
    grid-template-columns: 1fr;
  }

  .public-archive-intro .public-breadcrumbs {
    grid-column: 1;
  }

  .public-archive-back {
    margin: 18px 0 0;
  }

  .public-archive-pagination {
    grid-template-columns: 1fr;
  }

  .public-archive-pagination > button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .public-world-intro-copy {
    padding: 28px 22px;
  }

  .public-home-featured {
    grid-template-rows: 220px auto;
  }

  .public-home-category-card {
    grid-template-rows: 170px minmax(0, 1fr);
    min-height: 330px;
  }

  .public-home-category-visual {
    height: 170px;
  }

  .public-archive-callout {
    padding: 24px 20px;
  }

  .public-archive-callout > button {
    width: 100%;
  }

  .public-image-lightbox-backdrop {
    padding: 0;
  }

  .public-image-lightbox {
    width: 100%;
    height: 100vh;
    border: 0;
  }

  .public-image-lightbox-help {
    display: none;
  }
}

/* Vue publique compacte — hiérarchie desktop et densité de lecture. */
@media (min-width: 1181px) {
  .public-portal {
    grid-template-columns: 224px minmax(0, 1fr);
    grid-template-rows: 68px minmax(0, 1fr);
  }

  .public-brand {
    gap: 5px;
    padding: 18px 14px 16px;
  }

  .public-sigil {
    width: 48px;
    height: 48px;
  }

  .public-sigil .ui-icon {
    width: 25px;
    height: 25px;
  }

  .public-brand strong {
    margin-top: 6px;
    font-size: 0.92rem;
  }

  .public-brand small {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .public-navigation {
    padding: 9px 7px;
  }

  .public-nav-item {
    min-height: 38px;
  }

  .public-sidebar-foot {
    gap: 7px;
    padding: 10px;
  }

  .public-return-button {
    min-height: 36px;
  }

  .public-topbar {
    padding: 10px 16px;
  }

  .public-search,
  .public-filters > summary {
    height: 42px;
  }

  .public-topbar > .public-layout-switch button {
    width: 32px;
    height: 32px;
  }

  .public-main {
    padding: 18px;
  }

  .public-main:has(> .public-world-intro-home) {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    gap: 16px 18px;
    align-content: start;
  }

  .public-main:has(> .public-world-intro-home) > .public-world-intro-home,
  .public-main:has(> .public-world-intro-home) > .public-archive-callout {
    grid-column: 1 / -1;
  }

  .public-main:has(> .public-world-intro-home) > .public-home-categories {
    grid-column: 1;
  }

  .public-main:has(> .public-world-intro-home) > .public-home-recent {
    grid-column: 2;
  }

  .public-main:has(> .public-world-intro-home) > .public-section,
  .public-main:has(> .public-world-intro-home) > .public-archive-callout {
    margin-top: 0;
  }

  .public-main:has(> .public-world-intro-home) .public-section-heading {
    margin-bottom: 8px;
  }

  .public-main:has(> .public-world-intro-home) .public-section-heading h2 {
    font-size: 0.8rem;
  }

  .public-main:has(> .public-world-intro-home) .public-section-heading small {
    max-width: 58%;
    font-size: 0.7rem;
    line-height: 1.25;
    text-align: right;
  }

  .public-world-intro-home {
    grid-template-columns: minmax(310px, 0.72fr) minmax(620px, 1.28fr);
    height: 360px;
    min-height: 0;
  }

  .public-world-intro-copy {
    padding: 30px 34px;
  }

  .public-world-intro-home h1 {
    margin: 10px 0 8px;
    font-size: clamp(2rem, 3.1vw, 3.35rem);
    line-height: 1.02;
  }

  .public-world-intro-home p {
    margin-bottom: 10px;
    font-size: 1.04rem;
    line-height: 1.35;
  }

  .public-home-featured,
  .public-world-cover {
    height: 100%;
    min-height: 0;
  }

  .public-home-featured {
    grid-template-columns: minmax(0, 1.15fr) minmax(235px, 0.85fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .public-home-featured-visual {
    height: 100%;
    min-height: 0;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .public-home-featured-copy {
    justify-content: center;
    gap: 5px;
    min-height: 0;
    padding: 21px 22px;
    overflow: hidden;
  }

  .public-home-featured-copy > strong {
    font-size: clamp(1.08rem, 1.45vw, 1.42rem);
  }

  .public-home-featured-copy > span:not(.public-kicker) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .public-home-category-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .public-home-category-card {
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-rows: 1fr;
    min-height: 122px;
  }

  .public-home-category-visual {
    width: 128px;
    height: 100%;
    min-height: 122px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .public-home-category-copy {
    gap: 4px;
    padding: 13px 15px;
  }

  .public-home-category-copy > strong {
    font-size: 1rem;
  }

  .public-home-category-copy > small,
  .public-home-category-copy > span {
    font-size: 0.72rem;
    line-height: 1.3;
  }

  .public-home-category-copy > b {
    padding-top: 4px;
    font-size: 0.66rem;
  }

  .public-home-recent .public-card-grid,
  .public-home-recent .public-card-grid.is-editorial.count-two,
  .public-home-recent .public-card-grid.is-editorial.count-one {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .public-home-recent .public-card-link,
  .public-home-recent .public-card-grid.is-editorial.count-one .public-card-link,
  .public-home-recent .public-card-grid.is-editorial.count-one .public-card.no-image .public-card-link {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 174px;
  }

  .public-home-recent .public-card-grid.is-editorial.count-one .public-card-image {
    grid-row: auto;
    width: 100%;
    height: 76px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .public-home-recent .public-card-image {
    height: 76px;
  }

  .public-home-recent .public-card-body {
    padding: 11px 13px;
  }

  .public-home-recent .public-card-body > strong {
    margin: 5px 0 5px;
    font-size: 0.92rem;
    line-height: 1.16;
  }

  .public-home-recent .public-card-summary {
    font-size: 0.88rem;
    line-height: 1.28;
    -webkit-line-clamp: 2;
  }

  .public-home-recent .public-tags {
    display: none;
  }

  .public-home-recent .public-card-footer {
    padding: 7px 11px;
    font-size: 0.65rem;
  }

  .public-home-recent .public-card-mark {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
  }

  .public-archive-callout {
    gap: 18px;
    min-height: 96px;
    padding: 17px 22px;
  }

  .public-archive-callout h2 {
    margin: 5px 0 3px;
    font-size: 1.4rem;
  }

  .public-archive-callout p {
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .public-archive-callout > button {
    min-height: 38px;
  }
}

@media (min-width: 781px) and (max-width: 1180px) {
  .public-main {
    padding: 16px;
  }

  .public-world-intro-home {
    grid-template-columns: minmax(270px, 0.78fr) minmax(430px, 1.22fr);
    height: 380px;
    min-height: 0;
  }

  .public-world-intro-copy {
    padding: 28px;
  }

  .public-world-intro-home h1 {
    font-size: clamp(2rem, 4vw, 3.1rem);
  }

  .public-home-featured,
  .public-world-cover {
    height: 100%;
    min-height: 0;
  }

  .public-home-featured {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.8fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .public-home-featured-visual {
    height: 100%;
    min-height: 0;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .public-home-featured-copy {
    justify-content: center;
    padding: 18px;
  }

  .public-home-category-card {
    min-height: 280px;
  }

  .public-home-category-visual {
    height: 135px;
  }

  .public-card-grid-compact .public-card-link {
    min-height: 220px;
  }

  .public-archive-callout {
    padding: 20px 22px;
  }
}

@media (max-width: 780px) {
  .public-world-intro-copy {
    padding: 24px 20px;
  }

  .public-world-intro-home h1 {
    font-size: clamp(1.85rem, 10vw, 2.7rem);
  }

  .public-home-featured {
    grid-template-rows: 190px auto;
  }

  .public-home-featured-visual {
    min-height: 0;
    height: 190px;
  }

  .public-home-featured-copy {
    padding: 18px 20px;
  }

  .public-home-category-card {
    grid-template-rows: 145px minmax(0, 1fr);
    min-height: 275px;
  }

  .public-home-category-visual {
    height: 145px;
  }

  .public-card-grid-compact .public-card-link {
    min-height: 220px;
  }

  .public-archive-callout {
    padding: 20px;
  }
}

/* Ajustement final — accueil public équilibré.
   L’illustration d’ouverture reste intégralement visible ; les catégories et
   publications retrouvent une taille de lecture confortable. */

@media (min-width: 1181px) {
  .public-main:has(> .public-world-intro-home) {
    display: block;
  }

  .public-main:has(> .public-world-intro-home) > .public-world-intro-home,
  .public-main:has(> .public-world-intro-home) > .public-home-categories,
  .public-main:has(> .public-world-intro-home) > .public-home-recent,
  .public-main:has(> .public-world-intro-home) > .public-archive-callout {
    grid-column: auto;
  }

  .public-main:has(> .public-world-intro-home) > .public-section,
  .public-main:has(> .public-world-intro-home) > .public-archive-callout {
    margin-top: 20px;
  }

  .public-main:has(> .public-world-intro-home) .public-section-heading {
    margin-bottom: 12px;
  }

  .public-main:has(> .public-world-intro-home) .public-section-heading h2 {
    font-size: 0.9rem;
  }

  .public-main:has(> .public-world-intro-home) .public-section-heading small {
    max-width: 52%;
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .public-world-intro-home {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 560px);
    height: 430px;
    min-height: 430px;
  }

  .public-world-intro-copy {
    max-width: 760px;
    padding: 42px 48px;
  }

  .public-world-intro-home h1 {
    margin: 12px 0 10px;
    font-size: clamp(2.4rem, 3.7vw, 4.25rem);
    line-height: 1.02;
  }

  .public-world-intro-home p {
    max-width: 620px;
    margin-bottom: 12px;
    font-size: 1.12rem;
    line-height: 1.42;
  }

  .public-world-cover {
    display: grid;
    width: 100%;
    height: 430px;
    min-height: 0;
    padding: 10px;
    place-items: center;
    overflow: hidden;
  }

  .public-world-cover img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center;
  }

  .public-home-featured {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(270px, 1fr) auto;
    height: 430px;
    min-height: 0;
  }

  .public-home-featured-visual {
    width: 100%;
    height: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .public-home-featured-visual img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center;
  }

  .public-home-featured-copy {
    justify-content: flex-start;
    gap: 5px;
    padding: 17px 20px 18px;
  }

  .public-home-featured-copy > strong {
    font-size: 1.16rem;
  }

  .public-home-featured-copy > span:not(.public-kicker) {
    -webkit-line-clamp: 2;
  }

  .public-home-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    gap: 14px;
  }

  .public-home-category-card {
    grid-template-columns: 176px minmax(0, 1fr);
    grid-template-rows: 1fr;
    min-height: 168px;
  }

  .public-home-category-visual {
    width: 176px;
    height: 100%;
    min-height: 168px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .public-home-category-visual img {
    object-fit: contain !important;
  }

  .public-home-category-copy {
    gap: 6px;
    padding: 18px 20px;
  }

  .public-home-category-copy > strong {
    font-size: 1.12rem;
  }

  .public-home-category-copy > small,
  .public-home-category-copy > span {
    font-size: 0.82rem;
    line-height: 1.38;
  }

  .public-home-category-copy > b {
    padding-top: 7px;
    font-size: 0.7rem;
  }

  .public-home-recent .public-card-grid,
  .public-home-recent .public-card-grid.is-grid,
  .public-home-recent .public-card-grid.is-editorial.count-two,
  .public-home-recent .public-card-grid.is-editorial.count-one {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .public-home-recent .public-card-link,
  .public-home-recent .public-card-grid.is-editorial.count-one .public-card-link,
  .public-home-recent .public-card-grid.is-editorial.count-one .public-card.no-image .public-card-link {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 238px;
  }

  .public-home-recent .public-card-grid.is-editorial.count-one .public-card-image {
    grid-row: auto;
    width: 100%;
    height: 118px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .public-home-recent .public-card-image {
    height: 118px;
  }

  .public-home-recent .public-card-image img {
    object-fit: contain !important;
  }

  .public-home-recent .public-card-body {
    padding: 16px 18px;
  }

  .public-home-recent .public-card-body > strong {
    margin: 7px 0 7px;
    font-size: 1.06rem;
    line-height: 1.2;
  }

  .public-home-recent .public-card-summary {
    font-size: 0.98rem;
    line-height: 1.36;
    -webkit-line-clamp: 3;
  }

  .public-home-recent .public-tags {
    display: flex;
  }

  .public-home-recent .public-card-footer {
    padding: 10px 14px;
    font-size: 0.72rem;
  }

  .public-home-recent .public-card-mark {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  .public-archive-callout {
    min-height: 112px;
    padding: 22px 28px;
  }
}

@media (min-width: 781px) and (max-width: 1180px) {
  .public-world-intro-home {
    grid-template-columns: minmax(300px, 1fr) minmax(390px, 48%);
    height: 410px;
    min-height: 410px;
  }

  .public-world-cover {
    height: 410px;
    min-height: 0;
    padding: 8px;
  }

  .public-world-cover img,
  .public-home-featured-visual img {
    object-fit: contain !important;
    object-position: center;
  }

  .public-home-featured {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, 1fr) auto;
    height: 410px;
  }

  .public-home-featured-visual {
    width: 100%;
    height: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .public-home-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .public-home-category-card {
    grid-template-rows: 150px minmax(0, 1fr);
    min-height: 300px;
  }

  .public-home-category-visual {
    width: 100%;
    height: 150px;
    min-height: 150px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .public-home-recent .public-card-grid,
  .public-home-recent .public-card-grid.is-grid,
  .public-home-recent .public-card-grid.is-editorial.count-two,
  .public-home-recent .public-card-grid.is-editorial.count-one {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-home-recent .public-card-link,
  .public-home-recent .public-card-grid.is-editorial.count-one .public-card-link,
  .public-home-recent .public-card-grid.is-editorial.count-one .public-card.no-image .public-card-link {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 250px;
  }

  .public-home-recent .public-card-grid.is-editorial.count-one .public-card-image,
  .public-home-recent .public-card-image {
    grid-row: auto;
    width: 100%;
    height: 125px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 780px) {
  .public-world-cover img,
  .public-home-featured-visual img,
  .public-home-category-visual img,
  .public-home-recent .public-card-image img {
    object-fit: contain !important;
    object-position: center;
  }
}

/* =====================================================================
   VUE PUBLIQUE — image d’illustration dans l’en-tête d’une catégorie
   Disposition identique à l’en-tête du monde : texte à gauche, image
   entière à droite. Les catégories sans image gardent leur rendu actuel.
   ===================================================================== */
.public-section-intro-with-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 560px);
  align-items: stretch;
  width: 100%;
  height: 430px;
  min-height: 430px;
  padding: 0;
}

.public-section-intro-with-image::after {
  z-index: 3;
  pointer-events: none;
}

.public-section-intro-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  max-width: 760px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 42px 48px;
}

.public-section-intro-copy .public-breadcrumbs {
  width: 100%;
}

.public-section-intro-visual {
  display: grid;
  width: 100%;
  height: 430px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 10px;
  place-items: center;
  overflow: hidden;
  border-left: 1px solid var(--line-strong);
  background: var(--surface-muted);
}

.public-section-intro-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
  cursor: zoom-in;
}

.public-section-intro-visual img:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -5px;
}

@media (min-width: 781px) and (max-width: 1180px) {
  .public-section-intro-with-image {
    grid-template-columns: minmax(300px, 1fr) minmax(390px, 48%);
    height: 410px;
    min-height: 410px;
  }

  .public-section-intro-copy {
    padding: 36px 40px;
  }

  .public-section-intro-visual {
    height: 410px;
    padding: 8px;
  }
}

@media (max-width: 780px) {
  .public-section-intro-with-image {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .public-section-intro-copy {
    max-width: none;
    padding: 34px 28px;
  }

  .public-section-intro-visual {
    height: min(62vw, 360px);
    min-height: 240px;
    padding: 8px;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .public-section-intro-copy {
    padding: 28px 22px;
  }

  .public-section-intro-visual {
    height: min(70vw, 300px);
    min-height: 210px;
  }
}