:root {
    /* Palette de base alignée sur la variante « Chaleureuse » (voir le :root de
       studio-proches.css, qui reprend celui des maquettes). Ces valeurs étaient
       encore le thème d'origine de l'éditeur — fond gris-vert, accent vert
       #21745e, « commander » violet #5d54c7 — sans aucun rapport avec le reste
       du site. studio-proches.css les écrasait sur les écrans marketing et
       wizard, mais l'éditeur chargé seul retombait dessus. */
    --aics-bg: #fbf6ee;
    --aics-surface: #ffffff;
    --aics-surface-soft: #f6efe3;
    --aics-ink: #2a2320;
    --aics-muted: #5c4f3f;
    --aics-line: #e4d9c7;
    --aics-line-strong: #2a2320;
    /* Rebrand corail → violet #5B3FD0 du logo Fabluneo, cf. studio-proches.css.
       --aics-danger reste un rouge indépendant : il n'a jamais dérivé de
       l'accent ici, donc rien à découpler. */
    --aics-accent: #5b3fd0;
    --aics-accent-soft: #e8e3fb;
    --aics-order: #5b3fd0;
    --aics-order-hover: #4c34ad;
    --aics-danger: #b33714;
    --aics-shadow: 0 10px 30px rgba(42, 35, 32, .10);
    --aics-z-content: 10;
    --aics-z-selected: 20;
    --aics-z-outline: 30;
    --aics-z-handles: 40;
    --aics-z-warning: 50;
    --aics-z-toolbar: 60;
    --aics-z-modal: 100;
}

html.aics-standalone-document {
    height: 100%;
    margin-top: 0 !important;
    overflow: hidden;
}

.aics-standalone-page,
.aics-standalone-page #aics-studio-root {
    width: 100%;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
}

.aics-shell,
.aics-fullscreen,
.aics-studio-app {
    box-sizing: border-box;
    color: var(--aics-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

.aics-shell *,
.aics-fullscreen *,
.aics-studio-app * {
    box-sizing: border-box;
    letter-spacing: 0;
}

/* Le texte d'une page hérite l'approche de son bloc (`letterSpacing` posé sur
   .aics-text-layer par textEffectsStyle()). La remise à zéro ci-dessus
   l'atteignait aussi : le sous-titre de couverture (0,14 em) s'affichait
   serré, 27 % plus étroit qu'imprimé, et toute approche réglée dans le Studio
   restait invisible. */
.aics-shell .aics-text-content,
.aics-shell .aics-text-content *,
.aics-fullscreen .aics-text-content,
.aics-fullscreen .aics-text-content *,
.aics-studio-app .aics-text-content,
.aics-studio-app .aics-text-content * {
    letter-spacing: inherit;
}

.aics-shell {
    min-height: 82vh;
    padding: clamp(24px, 4vw, 48px) 20px;
    background: var(--aics-bg);
    font-size: 16px;
}

.aics-shell--center {
    display: grid;
    min-height: 70vh;
    place-items: center;
}

.aics-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.aics-kicker {
    margin: 0 0 6px;
    color: var(--aics-accent);
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
}

.aics-shell h1,
.aics-shell h2,
.aics-studio-app h2 {
    margin: 0;
    letter-spacing: 0;
}

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

.aics-choice,
.aics-panel,
.aics-empty,
.aics-project-row {
    border: 1px solid var(--aics-line);
    border-radius: 8px;
    background: var(--aics-surface);
    box-shadow: var(--aics-shadow);
}

.aics-choice {
    min-height: 150px;
    padding: 18px;
    color: var(--aics-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease;
}

.aics-choice:hover,
.aics-choice.is-selected {
    border-color: var(--aics-accent);
    transform: translateY(-1px);
}

.aics-choice strong,
.aics-choice small,
.aics-choice__type {
    display: block;
}

.aics-choice strong {
    margin: 22px 0 8px;
    font-size: 20px;
}

.aics-choice__type,
.aics-choice small,
.aics-project-row small {
    color: var(--aics-muted);
}

.aics-panel {
    max-width: 880px;
    margin-top: 18px;
    padding: 22px;
}

.aics-segment {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.aics-segment button,
.aics-button {
    min-height: 36px;
    border: 1px solid var(--aics-line-strong);
    border-radius: 6px;
    background: var(--aics-surface);
    color: var(--aics-ink);
    padding: 7px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.aics-async-button { min-width: 132px; }
.aics-async-button > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aics-loading-spinner { display: inline-grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; }
.aics-loading-spinner > span { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: aics-spin .72s linear infinite; }
.aics-loading-spinner.is-large { width: 28px; height: 28px; }
.aics-loading-spinner.is-large > span { width: 26px; height: 26px; border-width: 3px; }

.aics-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.aics-segment button:hover,
.aics-button:hover {
    border-color: #9da29d;
    background: #f5f5f2;
}

.aics-segment button.is-active,
.aics-button--primary {
    border-color: var(--aics-accent);
    background: var(--aics-accent);
    color: #fff;
}

.aics-button--order {
    border-color: var(--aics-order);
    background: var(--aics-order);
    color: #fff;
}

.aics-button--order:hover {
    border-color: var(--aics-order-hover);
    background: var(--aics-order-hover);
}

.aics-button--danger {
    border-color: var(--aics-danger);
    background: transparent;
    color: var(--aics-danger);
}

.aics-button--danger:hover {
    background: var(--aics-danger);
    color: #fff;
}

.aics-button:disabled,
.aics-icon-button:disabled,
.aics-button.is-disabled {
    opacity: .45;
    pointer-events: none;
    cursor: default;
}

.aics-link {
    color: var(--aics-accent);
    font-weight: 700;
}

.aics-field {
    display: grid;
    gap: 6px;
    margin: 11px 0;
    color: var(--aics-muted);
    font-size: 12px;
    font-weight: 650;
}

.aics-field input,
.aics-field select,
.aics-field textarea,
.aics-project-title {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--aics-line-strong);
    border-radius: 6px;
    background: var(--aics-surface);
    color: var(--aics-ink);
    padding: 9px 10px;
    font: inherit;
    font-weight: 450;
}

/* Un champ de texte multiligne suit son contenu (AutoTextarea, ui-kit.js) :
   `rows` fixe le plancher d'un champ vide, la hauteur se cale ensuite sur le
   texte — d'où ni `min-height` ni poignée, que la frappe suivante défait. */
textarea.aics-autosize { min-height: 0; max-height: 60vh; overflow-y: auto; resize: none; }

.aics-field input:focus,
.aics-field select:focus,
.aics-field textarea:focus,
.aics-project-title:focus {
    border-color: var(--aics-accent);
    outline: 2px solid var(--aics-accent-soft);
}

.aics-alert {
    max-width: 760px;
    border: 1px solid #e0aea9;
    border-radius: 7px;
    margin: 12px 0;
    background: #fff2f0;
    color: var(--aics-danger);
    padding: 11px 14px;
}

.aics-empty {
    padding: 28px;
    color: var(--aics-muted);
    text-align: center;
}

.aics-project-list {
    display: grid;
    gap: 10px;
}

.aics-project-row {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
}

.aics-thumb {
    display: grid;
    width: 76px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    background: var(--aics-accent-soft);
    color: var(--aics-accent);
    place-items: center;
}

.aics-thumb img,
.aics-page-item__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aics-icon-button,
.aics-icon-link {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #505550;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
    place-items: center;
}

.aics-icon-button:hover,
.aics-icon-link:hover,
.aics-icon-button.is-active {
    border-color: var(--aics-line);
    background: #eceeea;
    color: var(--aics-ink);
}

.aics-icon-button .dashicons,
.aics-icon-link .dashicons,
.aics-button .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* Drawer controls for Pages/Calques + Propriétés — only ever shown under
   1280px (see the éditeur-specific media queries below); hidden on desktop
   where the panels are plain columns. */
.aics-panel-toggle,
.aics-panel-close,
.aics-panel-backdrop { display: none; }

.aics-loading,
.aics-fullscreen {
    width: 100vw;
    height: 100dvh;
    background: var(--aics-bg);
}

.aics-loading {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    color: var(--aics-muted);
}

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

.aics-dropzone {
    display: grid;
    min-height: 168px;
    align-content: center;
    justify-items: center;
    gap: 7px;
    border: 2px dashed #aebbb5;
    border-radius: 8px;
    background: #fff;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.aics-dropzone:hover,
.aics-dropzone:focus-visible,
.aics-dropzone.is-dragging {
    border-color: var(--aics-accent);
    background: var(--aics-accent-soft);
    outline: none;
}

.aics-dropzone.is-busy { opacity: .7; cursor: progress; }
.aics-dropzone__input { display: none; }
.aics-dropzone > .dashicons { width: 30px; height: 30px; color: var(--aics-accent); font-size: 30px; }
.aics-dropzone small { color: var(--aics-muted); }
.aics-dropzone__button { margin-top: 3px; pointer-events: none; }

.aics-consent {
    display: flex;
    max-width: 780px;
    align-items: center;
    gap: 9px;
    margin: 11px 0 0;
    color: var(--aics-muted);
    font-size: 12px;
}

.aics-consent input { width: 17px; height: 17px; flex: 0 0 auto; }

.aics-person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

/* Editor shell */
.aics-studio-app {
    position: relative;
    display: grid;
    grid-template-rows: 58px minmax(0, 1fr);
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    background: var(--aics-bg);
}

.aics-app-bar {
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(250px, 1fr);
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--aics-line-strong);
    background: var(--aics-surface);
    padding: 0 12px;
}

.aics-app-bar__identity,
.aics-toolbar,
.aics-app-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
}

.aics-app-bar__identity > div { display: grid; gap: 1px; min-width: 0; }
.aics-project-title { overflow: hidden; border: 0; background: transparent; margin: 0; padding: 1px 3px; font-size: 17px; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; }
.aics-app-bar small { display: block; overflow: hidden; margin: 0; color: var(--aics-muted); font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }

.aics-toolbar {
    border: 1px solid var(--aics-line);
    border-radius: 7px;
    background: var(--aics-surface-soft);
    padding: 2px;
}

.aics-toolbar .aics-icon-button { width: 30px; height: 30px; flex-basis: 30px; }
.aics-toolbar__divider { width: 1px; height: 20px; margin: 0 2px; background: var(--aics-line); }
.aics-zoom-value { width: 40px; color: var(--aics-muted); font-size: 10px; text-align: center; }

.aics-app-actions { justify-content: flex-end; }
.aics-app-actions .aics-button { white-space: nowrap; }
.aics-book-actions { position: relative; margin-top: 4px; }
/* Opens upward — the trigger now lives at the bottom of the left panel (per
   Studio.dc.html's "Actions du Livre" footer button), so a menu opening
   downward would run off the viewport. */
.aics-book-actions__menu { position: absolute; z-index: var(--aics-z-toolbar); bottom: calc(100% + 7px); left: 0; right: 0; display: grid; border: 1px solid var(--aics-line-strong); border-radius: 7px; background: #fff; box-shadow: var(--aics-shadow); padding: 5px; }
.aics-book-actions__menu > button { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 5px; background: transparent; color: var(--aics-ink); padding: 9px; text-align: left; cursor: pointer; }
.aics-book-actions__menu > button:hover { background: #f2f4f1; }
.aics-book-actions__menu > button:disabled { opacity: .45; cursor: default; }
.aics-batch-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; border-top: 1px solid var(--aics-line); margin-top: 4px; padding: 9px; }
.aics-batch-progress > span:last-child { display: grid; gap: 2px; }
.aics-batch-progress small { white-space: normal; }

.aics-character-link {
    display: flex;
    height: 34px;
    align-items: center;
    border: 1px solid var(--aics-line);
    border-radius: 6px;
    padding: 3px 7px;
    color: var(--aics-muted);
    text-decoration: none;
}

.aics-character-link img { width: 24px; height: 24px; margin-right: -6px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.aics-character-link .dashicons { margin-left: 8px; }

/* Real, honest save status — never a fake "all good" indicator; the 5 states
   mirror SAVE_STATUS_LABELS in editor.js exactly. */
.aics-app-bar small { display: flex; align-items: center; gap: 6px; }
.aics-save-status { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.aics-save-status__dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.aics-save-status.is-saved { color: var(--aics-accent); }
.aics-save-status.is-saving .aics-save-status__dot { animation: sp-pulse 1.1s ease-in-out infinite; }
.aics-save-status.is-unsaved { color: var(--aics-muted); }
.aics-save-status.is-error,
.aics-save-status.is-offline { color: var(--aics-danger); }

/* "Affichage" menu (zoom, ajustement, repères) — reuses the aics-book-actions
   dropdown visuals so the top bar keeps a single consistent menu style. */
.aics-view-menu { position: relative; }
.aics-view-menu__menu { position: absolute; z-index: var(--aics-z-toolbar); top: calc(100% + 7px); left: 0; display: grid; width: 220px; border: 1px solid var(--aics-line-strong); border-radius: 7px; background: #fff; box-shadow: var(--aics-shadow); padding: 5px; }
.aics-view-menu__menu > button { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 5px; background: transparent; color: var(--aics-ink); padding: 9px; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.aics-view-menu__menu > button:hover { background: #f2f4f1; }
.aics-view-menu__zoom { display: flex; align-items: center; justify-content: center; gap: 4px; border-bottom: 1px solid var(--aics-line); padding-bottom: 5px; margin-bottom: 3px; }
.aics-view-menu__zoom .aics-icon-button { width: 28px; height: 28px; flex-basis: 28px; }

/* Honest credits popover: only real configured costs, never a fabricated balance. */
.aics-credits-popover { position: relative; }
.aics-credits-popover__panel { position: absolute; z-index: var(--aics-z-toolbar); top: calc(100% + 7px); right: 0; display: grid; gap: 8px; width: 240px; border: 1px solid var(--aics-line-strong); border-radius: 7px; background: #fff; box-shadow: var(--aics-shadow); padding: 12px; font-size: 12px; }
.aics-credits-popover__panel dl { display: grid; gap: 6px; margin: 0; }
.aics-credits-popover__panel dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.aics-credits-popover__panel dt { color: var(--aics-muted); font-weight: 500; }
.aics-credits-popover__panel dd { margin: 0; font-weight: 700; }
.aics-credits-popover__panel p { margin: 0; color: var(--aics-muted); }
.aics-credits-popover__panel .aics-link { justify-self: start; }
.aics-token-balance { display: inline-flex; align-items: center; gap: 6px; height: 32px; border: 1px solid var(--aics-line-strong); border-radius: 999px; background: #fff; padding: 0 12px; color: inherit; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.aics-token-balance:hover, .aics-token-balance.is-active { border-color: currentColor; }
.aics-credits-popover__panel .aics-credits-popover__balance { color: inherit; font-weight: 700; }
.aics-token-why ul { margin: 8px 0 0; padding-left: 20px; }
.aics-token-why li + li { margin-top: 4px; }
.aics-token-history__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.aics-token-history__table td { padding: 6px 4px; border-top: 1px solid var(--aics-line, #e5e5e5); }
.aics-token-history__table td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.aics-token-history__table .is-credit { color: #1a7f37; }

/* Prepress panel (Vérifier → /preflight): blocking errors and non-blocking
   warnings are visually distinct lists, each item offering a best-effort
   "Corriger" jump to the page named in the message. */
.aics-preflight-group { margin: 14px 0; }
.aics-preflight-group h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.aics-preflight-group.is-error h3 { color: var(--aics-danger); }
.aics-preflight-group.is-warning h3 { color: #8a6a1c; }
.aics-preflight-group ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.aics-preflight-group li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 6px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
.aics-preflight-group.is-error li { background: #fff2f0; }
.aics-preflight-group.is-warning li { background: #fff8e8; }
.aics-preflight-fix { flex: 0 0 auto; border: 1px solid var(--aics-line-strong); border-radius: 5px; background: #fff; color: var(--aics-ink); padding: 4px 9px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.aics-preflight-fix:disabled { opacity: .4; cursor: default; }

.aics-workspace {
    display: grid;
    grid-template-columns: 190px minmax(360px, 1fr) 330px;
    min-height: 0;
}

.aics-page-nav,
.aics-inspector {
    min-width: 0;
    overflow: hidden;
    background: var(--aics-surface);
}

.aics-page-nav { display: grid; grid-template-rows: 48px minmax(0, 1fr) auto; border-right: 1px solid var(--aics-line-strong); }
.aics-page-nav__header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--aics-line); padding: 0 10px 0 13px; font-size: 13px; }
.aics-page-list { overflow: auto; padding: 10px; }

/* Poster/framed_poster left panel — real layer navigator (LayerNavigator),
   derived from the same composition rendered on canvas. */
.aics-layer-nav { grid-template-rows: 48px minmax(0, 1fr); }
.aics-layer-list { display: grid; align-content: start; gap: 7px; overflow: auto; padding: 10px; }
.aics-layer-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 6px; text-align: left; font: inherit; cursor: pointer; }
.aics-layer-item:hover { background: #f4f5f2; }
.aics-layer-item.is-active { border-color: #9bc6b7; background: var(--aics-accent-soft); }
.aics-layer-item__swatch { width: 40px; height: 40px; border: 1px solid var(--aics-line-strong); border-radius: 6px; }
.aics-layer-item__thumb { display: grid; width: 40px; height: 40px; overflow: hidden; border: 1px solid var(--aics-line); border-radius: 6px; background: #efefe9; color: #a4aaa5; place-items: center; }
.aics-layer-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.aics-layer-item__thumb--text { color: var(--aics-muted); }
.aics-layer-item__label { display: grid; min-width: 0; gap: 2px; }
.aics-layer-item__label strong { font-size: 12px; }
.aics-layer-item__label small { overflow: hidden; color: var(--aics-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.aics-layer-list__empty { padding: 4px; }

/* Couverture / 4e de couverture — single selectable cards, never reorderable
   (position fixe / éléments imposés), matching Studio.dc.html's left panel. */
.aics-cover-nav-card { display: flex; align-items: center; gap: 10px; width: 100%; border: 2px solid var(--aics-line); background: transparent; margin-bottom: 10px; padding: 10px; text-align: left; font: inherit; cursor: pointer; }
.aics-cover-nav-card:hover { background: #f4f5f2; }
.aics-cover-nav-card.is-active { border-color: var(--aics-accent); background: var(--aics-accent-soft); }
.aics-cover-nav-card__thumb { display: block; width: 44px; height: auto; aspect-ratio: var(--aics-page-ratio, 3/4); flex: none; }
.aics-cover-nav-card__thumb .aics-page-item__preview { width: 100%; height: 100%; aspect-ratio: inherit; }
.aics-cover-nav-card__label { display: grid; gap: 2px; min-width: 0; }
.aics-cover-nav-card__label strong { font-size: 12.5px; }
.aics-cover-nav-card__label small { color: var(--aics-muted); font-size: 10.5px; }

/* Groups the two interior pages of a double-page under one label — same
   spreadIndexOf()/spreadSideRank() grouping as BookSpreadCanvas, so the panel
   can never show a pairing the canvas doesn't actually use. Each double-page
   exposes its Texte layer and its Image layer as two independent, directly
   selectable buttons (the real, shared selection model — not two separate
   pages picked at random: textPage is the spread's first page, imagePage its
   second, consistent with spreadSideRank's left/right ordering). */
/* Toute la carte est cliquable et amène la double-page sur le canvas. */
.aics-page-spread-row { border: 2px solid var(--aics-neutral-300); margin-bottom: 8px; padding: 6px; cursor: pointer; }
.aics-page-spread-row:hover { border-color: var(--aics-line-strong); }
.aics-page-spread-row.is-active { border-color: var(--aics-line-strong); }
.aics-page-spread-row__label { display: flex; align-items: center; min-width: 0; margin-bottom: 0; color: var(--aics-muted); font-size: 10.5px; font-weight: 700; }
.aics-spread-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.aics-spread-mini { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; }
.aics-spread-mini:hover { border-color: transparent; }
.aics-spread-mini.is-active { border-color: transparent; background: transparent; }
/* max-height keeps a row scannable in a long book (many double-pages) — the
   3:4 ratio is kept for shape-fidelity with the mockup, just clamped so it
   can't grow past a compact card. */
.aics-spread-mini__thumb { display: grid; width: 100%; aspect-ratio: 3/4; max-height: 60px; place-items: center; background: var(--aics-neutral-200); color: var(--aics-muted); }
.aics-spread-mini__thumb .dashicons { width: 16px; height: 16px; font-size: 16px; }
.aics-spread-mini__label { font-size: 10px; font-weight: 700; color: var(--aics-muted); }
.aics-spread-mini.is-active .aics-spread-mini__label { color: var(--aics-accent); }
/* Status shown visually (icon + colour), not just a text label — matches
   Studio.dc.html's own per-state thumb: ready = ink (not green, the maquette
   never uses green for this), error = accent red, pending/generating = muted
   grey. */
.aics-spread-mini__thumb.is-ok,
.aics-spread-mini__label.is-ok { color: var(--aics-ink); }
.aics-spread-mini__thumb.is-error,
.aics-spread-mini__label.is-error { color: var(--aics-danger); }
.aics-spread-mini__thumb.is-generating .aics-loading-spinner { width: 16px; height: 16px; }
.aics-spread-row__tools { display: flex; justify-content: space-between; align-items: center; gap: 2px; margin-top: 6px; }
.aics-spread-row__actions { display: flex; flex: none; align-items: center; gap: 2px; }
.aics-spread-row__tools .aics-icon-button { width: 16px; height: 16px; flex-basis: 16px; }
.aics-add-spread-button { width: 100%; border: 2px dashed var(--aics-neutral-400); background: none; padding: 10px; font-size: 12px; font-weight: 700; color: var(--aics-ink); cursor: pointer; }
.aics-add-spread-button:hover { border-color: var(--aics-line-strong); }
.aics-add-spread-button:disabled { opacity: .45; cursor: default; }
/* Point d'insertion d'une double-page (SpreadInsertSlot) : une bande de 16 px
   posée à cheval sur l'espace entre deux cartes (8 px), sans changer leur
   espacement. Le « + » n'apparaît qu'au survol ou au focus, et reste visible
   sur un écran tactile, qui n'a pas de survol. */
.aics-spread-insert { position: relative; }
.aics-spread-insert.is-gap { z-index: 2; display: flex; height: 16px; margin: -12px 0 -4px; align-items: center; justify-content: center; }
.aics-spread-insert.is-gap::before { position: absolute; top: 50%; right: 8px; left: 8px; border-top: 2px solid var(--aics-line-strong); content: ""; opacity: 0; transition: opacity .12s; }
.aics-spread-insert__trigger { position: relative; display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid var(--aics-line-strong); border-radius: 50%; background: #fff; padding: 0; color: var(--aics-ink); font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, transform .12s; }
.aics-spread-insert.is-gap:hover::before,
.aics-spread-insert.is-gap:focus-within::before,
.aics-spread-insert.is-busy::before,
.aics-spread-insert.is-gap:hover .aics-spread-insert__trigger,
.aics-spread-insert__trigger:focus-visible,
.aics-spread-insert.is-busy .aics-spread-insert__trigger { opacity: 1; }
.aics-spread-insert__trigger:hover:not(:disabled) { transform: scale(1.12); }
.aics-spread-insert__trigger:disabled { cursor: not-allowed; }
.aics-spread-insert.is-gap:hover .aics-spread-insert__trigger:disabled { opacity: .45; }
.aics-spread-insert__trigger .aics-loading-spinner { width: 12px; height: 12px; }
@media (hover: none) {
    .aics-spread-insert__trigger { opacity: .7; }
}
.aics-spread-glyph { display: flex; flex: none; gap: 1px; width: 36px; height: 22px; }
.aics-spread-glyph__page { flex: 1; border: 1px solid var(--aics-line-strong); background: #fff; }
.aics-spread-glyph__page.is-image { background: repeating-linear-gradient(135deg, var(--aics-neutral-300) 0 3px, #fff 3px 6px); }
.aics-spread-glyph__page.is-text { background: repeating-linear-gradient(180deg, #fff 0 3px, var(--aics-neutral-400) 3px 4px) content-box; padding: 4px 3px; }

/* Fenêtre « Nouvelle double-page » (SpreadWizard) : modèle, moment, relecture.
   Largeur fixe (plafonnée par le max-width de la fenêtre) : ajustée au
   contenu, elle changeait à chaque étape. */
.aics-studio-app .sp-modal.aics-spread-wizard { width: 100%; box-sizing: border-box; }
/* Fenêtre « Nouvelle double-page » (2026-11-12) : étapes numérotées, cartes de
   modèles lisibles, idées à choisir comme des options, pied stable (retour à
   gauche, action principale toujours à droite et sur la même ligne). */
.aics-spread-wizard__steps { display: flex; gap: 8px; margin: 2px 0 20px; padding: 0; list-style: none; }
.aics-spread-wizard__steps li { display: flex; flex: 1; align-items: center; gap: 8px; border-bottom: 3px solid var(--aics-line); padding-bottom: 8px; color: var(--aics-muted); font-size: 12.5px; font-weight: 700; }
.aics-spread-wizard__step-number { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border: 2px solid var(--aics-line); background: var(--aics-surface); font-size: 11px; font-weight: 800; }
.aics-spread-wizard__steps li.is-done { border-color: var(--aics-accent-soft); color: var(--aics-ink); }
.aics-spread-wizard__steps li.is-done .aics-spread-wizard__step-number { border-color: var(--aics-accent); background: var(--aics-accent); color: #fff; }
.aics-spread-wizard__steps li.is-current { border-color: var(--aics-accent); color: var(--aics-ink); }
.aics-spread-wizard__steps li.is-current .aics-spread-wizard__step-number { border-color: var(--aics-accent); color: var(--aics-accent); }
.aics-studio-app .sp-modal .aics-spread-wizard__intro { margin: 0 0 12px; color: var(--aics-muted); font-size: 13.5px; }
.aics-spread-wizard__presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0 0 16px; }
.aics-spread-wizard__preset { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 10px; border: 2px solid var(--aics-line); background: var(--aics-surface); padding: 0 0 12px; color: var(--aics-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.aics-spread-wizard__preset-visual { display: grid; place-items: center; background: var(--aics-surface-soft); padding: 16px 12px; }
.aics-spread-wizard__preset .aics-spread-glyph { width: 104px; height: 60px; gap: 2px; box-shadow: 0 4px 10px rgba(42, 35, 32, .10); }
.aics-spread-wizard__preset-text { display: grid; gap: 3px; padding: 0 12px; }
.aics-spread-wizard__preset strong { font-size: 14px; }
.aics-spread-wizard__preset small { color: var(--aics-muted); font-size: 12px; line-height: 1.4; }
.aics-spread-wizard__preset:hover { border-color: var(--aics-line-strong); }
.aics-spread-wizard__preset.is-selected { border-color: var(--aics-accent); box-shadow: 0 0 0 3px var(--aics-accent-soft); }
.aics-spread-wizard__preset.is-selected .aics-spread-wizard__preset-visual { background: var(--aics-accent-soft); }
.aics-spread-wizard__check { position: absolute; top: 8px; right: 8px; display: grid; width: 22px; height: 22px; place-items: center; background: var(--aics-accent); color: #fff; }
.aics-spread-wizard__preset:focus-visible,
.aics-spread-wizard__idea:focus-visible { outline: 3px solid var(--aics-accent); outline-offset: 2px; }
.aics-spread-wizard__note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; background: var(--aics-surface-soft); padding: 10px 12px; color: var(--aics-muted); font-size: 13px; }
.aics-spread-wizard__field { display: grid; gap: 6px; margin: 0 0 14px; }
.aics-spread-wizard__field > span { font-size: 13px; font-weight: 800; }
.aics-spread-wizard__field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--aics-line-strong); background: var(--aics-surface); padding: 10px 12px; color: var(--aics-ink); font: inherit; font-size: 14px; line-height: 1.5; }
.aics-spread-wizard__field textarea:focus { border-color: var(--aics-accent); outline: 2px solid var(--aics-accent-soft); }
.aics-spread-wizard__field small { justify-self: end; color: var(--aics-muted); font-size: 11.5px; }
.aics-spread-wizard__field small.is-over { color: var(--aics-danger); font-weight: 700; }
.aics-spread-wizard__field textarea[aria-invalid] { border-color: var(--aics-danger); }
.aics-spread-wizard__ideas { margin: 0 0 4px; }
.aics-spread-wizard__ideas-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.aics-studio-app .sp-modal .aics-spread-wizard__ideas-head .aics-help { margin: 0; }
.aics-spread-wizard__ideas-button { display: inline-flex; align-items: center; gap: 6px; }
.aics-spread-wizard__ideas ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.aics-spread-wizard__idea { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; width: 100%; border: 2px solid var(--aics-line); background: var(--aics-surface); padding: 12px 14px; color: var(--aics-ink); font: inherit; font-size: 13px; line-height: 1.45; text-align: left; cursor: pointer; transition: border-color .15s; }
.aics-spread-wizard__idea strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
.aics-spread-wizard__radio { width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--aics-line-strong); background: var(--aics-surface); }
.aics-spread-wizard__idea:hover { border-color: var(--aics-line-strong); }
.aics-spread-wizard__idea.is-selected { border-color: var(--aics-accent); background: var(--aics-accent-soft); }
.aics-spread-wizard__idea.is-selected .aics-spread-wizard__radio { border-color: var(--aics-accent); background: var(--aics-accent); box-shadow: inset 0 0 0 3px var(--aics-surface); }
.aics-spread-wizard__pages { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; }
.aics-spread-wizard__page { border: 1px solid var(--aics-line); background: var(--aics-surface); padding: 12px 14px 2px; }
.aics-spread-wizard__page header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.aics-studio-app .sp-modal .aics-spread-wizard__page h3 { margin: 0; font-size: 14px; }
.aics-spread-wizard__tag { background: var(--aics-surface-soft); padding: 3px 8px; color: var(--aics-muted); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.aics-spread-wizard__page.is-image .aics-spread-wizard__tag { background: var(--aics-accent-soft); color: var(--aics-accent); }
.aics-spread-wizard__cast { display: grid; gap: 8px; margin: 0 0 14px; border: 1px solid var(--aics-line); background: var(--aics-surface-soft); padding: 12px 14px; }
.aics-spread-wizard__cast > strong { font-size: 13px; }
.aics-spread-wizard__cast ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.aics-spread-wizard__cast li { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--aics-line); background: var(--aics-surface); padding: 4px 10px 4px 4px; font-size: 13px; font-weight: 700; }
.aics-spread-wizard__cast li img { width: 28px; height: 28px; object-fit: cover; object-position: center 20%; }
.aics-studio-app .sp-modal .aics-spread-wizard__cast .aics-help { margin: 0; }
.aics-spread-wizard__summary { margin: 0 0 12px; border: 1px solid var(--aics-line); padding: 10px 14px; }
.aics-studio-app .sp-modal .aics-help.is-warning { color: var(--aics-danger); }
.aics-spread-wizard__error { margin: 0 0 14px; border: 1px solid var(--aics-danger); padding: 10px 12px; }
.aics-studio-app .sp-modal .aics-spread-wizard__error p { margin: 0 0 6px; color: var(--aics-danger); }
.aics-spread-wizard__busy { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; background: var(--aics-accent-soft); padding: 10px 12px; color: var(--aics-ink); font-size: 13px; font-weight: 700; }
.aics-spread-wizard__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; border-top: 1px solid var(--aics-line); padding-top: 16px; }
.aics-spread-wizard__footer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.aics-spread-wizard__footer .aics-link-button { padding: 0 6px; font-size: 13.5px; font-weight: 700; }
@media (max-width: 640px) {
    .aics-spread-wizard__pages { grid-template-columns: 1fr; }
    .aics-spread-wizard__steps li > span:last-child { display: none; }
    .aics-spread-wizard__steps li.is-current > span:last-child { display: inline; }
    .aics-spread-wizard__footer, .aics-spread-wizard__footer-actions { flex-direction: column-reverse; align-items: stretch; width: 100%; }
    .aics-spread-wizard__footer .aics-button { width: 100%; }
}

.aics-page-item {
    position: relative;
    display: grid;
    grid-template-columns: 22px 62px minmax(0, 1fr);
    width: 100%;
    min-height: 74px;
    align-items: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    margin-bottom: 7px;
    background: transparent;
    color: var(--aics-ink);
    padding: 5px;
    text-align: left;
    cursor: pointer;
}

.aics-page-item:hover { background: #f4f5f2; }
.aics-page-item.is-active { border-color: #9bc6b7; background: var(--aics-accent-soft); }
.aics-page-item__number { align-self: start; padding-top: 5px; color: var(--aics-muted); font-size: 10px; text-align: center; }
.aics-page-item__preview { position: relative; display: grid; width: 62px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--aics-line); border-radius: 3px; background: #efefe9; color: #a4aaa5; place-items: center; }
.aics-page-item__image-frame { position: absolute; overflow: hidden; }
.aics-page-item__image-frame > img { display: block; max-width: none; }
.aics-page-item__text { position: absolute; z-index: 2; overflow: hidden; padding: 1px; font-size: 3px; line-height: 1.1; }
.aics-page-item__meta { display: grid; min-width: 0; align-self: start; gap: 3px; padding-top: 6px; }
.aics-page-item__meta strong,
.aics-page-item__meta small { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.aics-page-item__meta small { display: flex; align-items: center; gap: 4px; color: var(--aics-muted); font-weight: 400; }
.aics-page-item__meta .aics-loading-spinner { width: 12px; height: 12px; flex-basis: 12px; }
.aics-page-item__meta .aics-loading-spinner > span { width: 11px; height: 11px; border-width: 1.5px; }
.aics-page-item__meta small.is-error { color: var(--aics-danger); }
.aics-page-item__meta small.is-queued,
.aics-page-item__meta small.is-processing { color: var(--aics-accent); }
.aics-page-item__tools { position: absolute; right: 3px; bottom: 2px; display: flex; border-radius: 5px; background: rgba(255,255,255,.92); }
.aics-page-item__tools .aics-icon-button { width: 25px; height: 25px; flex-basis: 25px; }
.aics-page-item__tools .dashicons { width: 14px; height: 14px; font-size: 14px; }
.aics-page-count { display: grid; gap: 6px; border-top: 2px solid var(--aics-line-strong); color: var(--aics-muted); padding: 10px 12px; font-size: 11px; }
.aics-page-count strong { color: var(--aics-ink); }
.aics-page-count__limits { font-size: 10.5px; }
.aics-page-count__rule { display: block; margin-top: 2px; font-size: 10.5px; }
.aics-book-actions__trigger { width: 100%; border: 2px solid var(--aics-line-strong); background: var(--aics-ink); color: #fff; padding: 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.aics-book-actions__trigger:hover { background: var(--aics-danger); border-color: var(--aics-danger); }

.aics-canvas-workspace {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 32px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #e7e6e1;
}

.aics-canvas-stage {
    display: grid;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 46px;
    place-items: center;
}

.aics-book-spread {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    /* align-items:center (not the grid default stretch) — each spread-page's
       box, active-border included, now hugs its own actual content height
       (label + page frame) instead of stretching to fill the whole canvas
       column, which used to leave a large empty grey area — wrapped in the
       active red border along with the real page — above/below the page
       whenever the frame was shorter than the available space. */
    align-items: center;
    width: max-content;
    min-width: 100%;
    min-height: 0;
    overflow: visible;
    gap: 3px;
    padding: 44px 18px 26px;
    justify-content: center;
}
.aics-spread-page { position: relative; display: grid; min-width: 0; min-height: 0; border: 1px solid transparent; border-radius: 5px; }
/* La page ACTIVE ne se signale plus par un cadre : « active » veut seulement
   dire « c'est cette page que les panneaux éditent », alors qu'un cadre coloré
   se lit comme une sélection. Il restait donc affiché autour de la page pendant
   qu'on éditait un texte ou une image à l'intérieur, en concurrence directe
   avec le cadre du bloc réellement sélectionné. Seule la page SÉLECTIONNÉE est
   entourée désormais (.aics-page-frame.is-page-selected), ce qui garde les
   trois niveaux visuellement distincts : page, zone, bloc. */
.aics-spread-page.is-active { border-color: transparent; }
.aics-spread-page__label { display: none; }
/* Options de la page : au-dessus de chaque page, calés sur son coin EXTÉRIEUR
   (haut-gauche pour la page de gauche, haut-droit pour celle de droite), et
   visibles au survol seulement. Centrés, ils encombraient la double-page en
   permanence ; en haut à droite des deux pages, celui de la page de gauche
   mordait sur la page de droite, au pli — le coin extérieur évite les deux.
   La double-page réserve leur hauteur (padding-top de .aics-book-spread). */
.aics-spread-page__options {
    position: absolute;
    z-index: var(--aics-z-toolbar);
    top: -30px;
    display: grid;
    width: 32px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--aics-line-strong);
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: var(--aics-ink);
    padding: 0;
    box-shadow: 0 2px 8px rgba(24,27,25,.1);
    opacity: 0;
    transition: opacity .14s ease, border-color .14s ease, color .14s ease;
    cursor: pointer;
}
.aics-spread-page.is-left .aics-spread-page__options { left: 0; }
.aics-spread-page.is-right .aics-spread-page__options { right: 0; }
.aics-spread-page:hover .aics-spread-page__options,
.aics-spread-page__options:focus-visible { opacity: 1; }
/* Sans survol possible (tactile), le bouton resterait introuvable. */
@media (hover: none) {
    .aics-spread-page__options { opacity: 1; }
}
.aics-spread-page__options:hover { border-color: var(--aics-accent); color: var(--aics-accent); }
.aics-spread-page__customized-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--aics-accent); }
.aics-book-spread .aics-canvas-stage { overflow: visible; padding: 10px 3px 18px; }
.aics-book-spread .aics-page-frame { width: min(58vh, calc((100cqw - 40px) / 2), 560px); }
.aics-spread-page.is-left .aics-page-canvas { border-radius: 4px 0 0 4px; box-shadow: var(--aics-page-border), -8px 15px 32px rgba(24,27,25,.14); }
.aics-spread-page.is-right .aics-page-canvas { border-radius: 0 4px 4px 0; box-shadow: var(--aics-page-border), 8px 15px 32px rgba(24,27,25,.14); }
.aics-personalized-badge,
.aics-original-badge { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: 3px 7px; font-size: 9px; font-weight: 750; }
.aics-personalized-badge { background: #fff1c7; color: #715811; }
.aics-original-badge { background: var(--aics-accent-soft); color: var(--aics-accent); }
.aics-spread-page__customized-dot.aics-personalized-badge { position: absolute; top: 4px; right: 4px; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--aics-accent); padding: 0; }
.aics-mobile-side-switch { display: none; }
.aics-story-page-context { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f6faf8; }
.aics-story-page-context > div { display: grid; gap: 2px; }
.aics-story-page-context small { color: var(--aics-muted); font-size: 10px; }
.aics-reset-story-text { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; }
.aics-reset-story-text .dashicons { width: 15px; height: 15px; font-size: 15px; }
.aics-story-prompt-note { display: flex; gap: 6px; border-left: 3px solid var(--aics-accent); background: var(--aics-accent-soft); color: #285447; padding: 8px; font-size: 10px; line-height: 1.4; }
.aics-story-prompt-note .dashicons { width: 15px; height: 15px; flex: 0 0 15px; font-size: 15px; }
.aics-story-description { color: var(--aics-muted); }
.aics-story-variable-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; border: 1px solid var(--aics-line); border-radius: 7px; background: var(--aics-surface-soft); margin: 14px 0; padding: 14px; }
.aics-story-variable-fields h3 { grid-column: 1 / -1; margin: 0 0 5px; font-size: 14px; }

.aics-page-frame {
    position: relative;
    width: min(68vh, calc(100% - 30px));
    aspect-ratio: var(--aics-page-ratio);
    overflow: visible;
    transform-origin: center;
    transition: transform .16s ease;
}

/* Le liseré de la page est dessiné par une ombre INTERNE, jamais par `border`.
   C'est une contrainte de géométrie, pas un choix esthétique : cette boîte est
   en `inset: 0` sur .aics-page-frame, donc une bordure réelle rétrécit sa boîte
   de contenu de deux fois son épaisseur. Les blocs, positionnés en pourcentages
   à l'intérieur, se retrouvaient alors calés sur un repère plus petit et décalé
   de 3 px par rapport à deux autres repères qui, eux, mesurent le cadre entier :
   la couche de sélection (posée sur .aics-page-frame) et les calculs de
   déplacement/aimantation (qui mesurent frameRef). D'où un contour de sélection
   visiblement décalé du bloc — on voyait le fond du texte dépasser au-dessus du
   trait rouge. Une ombre interne ne consomme aucune place : la boîte de contenu
   redevient exactement le cadre, et les trois repères coïncident. */
.aics-page-canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* La page devient un conteneur de requête : 100cqw vaut sa largeur RENDUE,
       quelle que soit la taille de la fenêtre ou le zoom. On en tire les deux
       unités d'impression utilisées par la typographie, exactement celles du
       rendu serveur (CompositionRasterizer) :
         --aics-pt      : le point typographique, 1/72 de pouce ;
         --aics-css-px  : le pixel CSS de référence, 1/96 de pouce.
       Sans cela le texte était dimensionné en pixels d'écran ABSOLUS : sa taille
       relative à la page changeait avec le zoom, et ne correspondait jamais à
       l'impression (mesuré : 152 % de la taille imprimée à un zoom donné). */
    container-type: size;
    --aics-css-px: calc(100cqw * 25.4 / (var(--aics-page-w-mm, 210) * 96));
    /* ATTENTION — le 54 n'est pas une coquille pour 72.

       `CompositionRasterizer` calcule `font_size * dpi / 72` et passe le
       résultat à `imagettftext()`. Mais l'argument `size` de GD est un CORPS EN
       POINTS, que FreeType rend à 96 dpi : GD remultiplie donc par 96/72. La
       conversion est faite deux fois et le texte imprimé sort 33 % plus grand
       que la valeur saisie (13 pt donnent ~17,3 pt sur le papier). Vérifié en
       comparant `imagettfbbox()` et `measureText()` sur la même fonte : écart
       constant de 24,5 %, soit exactement 72/96.

       L'éditeur doit montrer le produit tel qu'il sera imprimé, pas tel qu'il
       devrait l'être : 72 × 72/96 = 54. Le jour où le doublon sera corrigé
       côté serveur, ce 54 redeviendra 72 — et la ligne `lineHeight` de
       `textBlockStyle()` perdra son facteur compensatoire. */
    --aics-pt: calc(100cqw * 25.4 / (var(--aics-page-w-mm, 210) * 54));
    --aics-page-border: inset 0 0 0 1px #c7c6c0;
    border: 0;
    background: var(--aics-canvas-bg);
    box-shadow: var(--aics-page-border), 0 16px 38px rgba(24, 27, 25, .16);
}

.aics-composition-image-frame { position: absolute; z-index: var(--aics-z-content); overflow: hidden; }
.aics-image-inner-frame { position: absolute; overflow: hidden; box-sizing: border-box; }
/* Dégradé de l'image (appearance.overlay) : le cadre entier, sous la bordure. */
.aics-image-overlay { position: absolute; inset: 0; pointer-events: none; }
.aics-image-ornament { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.aics-ornament-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.aics-ornament-choice { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; background: #fff; border: 1px solid #d7d1c6; border-radius: 6px; color: inherit; cursor: pointer; font-size: 11px; }
.aics-ornament-choice img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.aics-ornament-choice:hover { border-color: #5b3fd0; }
.aics-ornament-choice[aria-pressed="true"] { border-color: #5b3fd0; box-shadow: 0 0 0 1px #5b3fd0; background: #f3efff; }
.aics-ornament-choice:focus-visible { outline: 2px solid #5b3fd0; outline-offset: 2px; }
.aics-composition-image-frame.is-repositioning { cursor: grab; outline: 2px solid var(--aics-accent); outline-offset: -2px; }
.aics-composition-image-frame.is-repositioning:active { cursor: grabbing; }
/* La clé de l'élément <img> est déjà liée à son URL : React retire donc
   immédiatement l'ancien visuel lors d'un changement de page. Un second
   verrou d'opacité dépendant de onLoad rendait en revanche l'image invisible
   après certains rerendus de survol/sélection. Le squelette voisin couvre le
   chargement ; l'image elle-même reste toujours affichable. */
.aics-composition-image { position: absolute; display: block; max-width: none; opacity: 1; user-select: none; pointer-events: none; }
/* Fond d'attente pendant le chargement : un dégradé qui balaie doucement, à
   peine perceptible quand l'image vient du cache, rassurant quand elle arrive
   du réseau. */
.aics-image-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #efece6 30%, #f7f5f1 50%, #efece6 70%) 0 0 / 300% 100%;
    animation: aics-skeleton-sweep 1.1s ease-in-out infinite;
    pointer-events: none;
}
.aics-block-skeleton {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    overflow: hidden;
    border-radius: inherit;
    background: var(--aics-surface-soft, #efede7);
    pointer-events: none;
}
.aics-block-skeleton::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.72) 50%, transparent 75%) 100% 0 / 300% 100%;
    animation: aics-skeleton-sweep 1.1s ease-in-out infinite;
    content: "";
}
.aics-block-skeleton__content { position: relative; z-index: 1; display: flex; min-width: 0; min-height: 0; }
.aics-block-skeleton.is-text .aics-block-skeleton__content { flex-direction: column; justify-content: center; gap: clamp(5px, 6%, 12px); padding: clamp(8px, 9%, 24px); }
.aics-block-skeleton__line { display: block; height: clamp(6px, 12%, 16px); border-radius: 999px; background: var(--aics-line, #d8d5ce); }
.aics-block-skeleton.is-image .aics-block-skeleton__content { align-items: center; justify-content: center; flex-direction: column; gap: 10%; padding: 12%; }
.aics-block-skeleton__media { display: block; width: min(34%, 72px); aspect-ratio: 1; border-radius: 10%; background: var(--aics-line, #d7d4cd); }
.aics-block-skeleton__caption { display: block; width: min(52%, 130px); height: clamp(6px, 5%, 13px); border-radius: 999px; background: var(--aics-line, #d7d4cd); }
/* Régénération : l'image précédente reste visible, estompée sous le balayage,
   avec une pastille au centre — l'aplat beige effaçait l'image et seul un
   point violet sur la miniature disait que la page travaillait. */
.aics-block-skeleton.is-over-image { background: rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(6px) saturate(.6); backdrop-filter: blur(6px) saturate(.6); }
.aics-block-skeleton.is-over-image::before { background-image: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%); }
.aics-block-skeleton__badge { position: absolute; z-index: 2; top: 50%; left: 50%; display: inline-flex; max-width: calc(100% - 16px); align-items: center; gap: 8px; overflow: hidden; background: var(--aics-ink); padding: 8px 12px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 6px 18px rgba(42, 35, 32, .22); transform: translate(-50%, -50%); }
.aics-block-skeleton__spinner { width: 14px; height: 14px; flex: none; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: aics-spin .72s linear infinite; }
/* Nouvelle illustration posée, pas encore validée : on la voit dans le livre,
   et l'étiquette mène au bouton « Valider l'image » du panneau. */
.aics-image-review-badge { position: absolute; z-index: 5; top: 8px; right: 8px; border: 0; background: var(--aics-accent); padding: 5px 9px; color: #fff; font: inherit; font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(42, 35, 32, .25); cursor: pointer; }
button.aics-image-review-badge:hover { background: var(--aics-order-hover); }
button.aics-image-review-badge:focus-visible { outline: 2px solid var(--aics-ink); outline-offset: 2px; }
@keyframes aics-skeleton-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    .aics-image-skeleton,
    .aics-block-skeleton::before,
    .aics-page-thumb__loader::before { animation: none; }
    .aics-block-skeleton__spinner,
    .aics-page-thumb__loader::after { animation-duration: 2.4s; }
    .aics-composition-image { transition: none; }
}
.aics-image-pan-overlay { position: absolute; z-index: 2; inset: 0; display: grid; align-content: center; justify-items: center; gap: 5px; background: rgba(255,255,255,.35); color: var(--aics-ink); padding: 10px; text-align: center; pointer-events: none; }
.aics-image-pan-overlay .dashicons { width: 24px; height: 24px; font-size: 24px; }
.aics-image-pan-overlay span { max-width: 180px; font-size: 10px; font-weight: 700; }
.aics-image-pan-overlay button { border: 1px solid var(--aics-line-strong); border-radius: 5px; background: #fff; color: var(--aics-ink); padding: 5px 8px; font: inherit; font-size: 10px; font-weight: 700; pointer-events: auto; cursor: pointer; }
.aics-canvas-placeholder { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 9px; border: 0; background: #f5f3ed; color: #939791; font: inherit; font-size: 12px; }
button.aics-canvas-placeholder { cursor: pointer; }
button.aics-canvas-placeholder:hover { background: #eeece4; color: var(--aics-ink); }
.aics-canvas-placeholder .dashicons { width: 38px; height: 38px; font-size: 38px; }

.aics-text-layer {
    position: absolute;
    z-index: var(--aics-z-selected);
    overflow: visible;
    border-radius: 3px;
    word-break: break-word;
}

/* pre-line : les retours à la ligne du texte (une réplique par ligne) sont
   imprimés par TextLayout ; sans cette règle, l'écran les fondait en un seul
   paragraphe et le Studio ne montrait pas la page qui partait à l'impression. */
/* Ligne vide entre deux groupes : hauteur = paragraph_spacing × interligne
   (--aics-paragraph-gap, posé par textBlockStyle), comme TextLayout. */
/* Mot sans coupure possible à l'impression (unbreakableRuns() de editor-logic.js). */
.aics-nowrap { white-space: nowrap; }
.aics-text-gap { display: block; height: var(--aics-paragraph-gap, 1em); }
.aics-text-content { position: relative; z-index: 1; width: 100%; max-height: 100%; min-height: 0; flex: 0 1 auto; overflow: hidden; outline: none; white-space: pre-line; }
.aics-text-layer [contenteditable="true"] { cursor: text; }
.aics-text-layer:focus-within { outline: 1px solid var(--aics-accent); }
.aics-text-layer.is-overflowing { outline: 2px solid var(--aics-danger); }
.aics-text-layer.is-sticky_note { transform: rotate(-.5deg); }
.aics-text-layer.is-caption { border-left-width: 5px !important; }
.aics-text-layer.is-label { transform: skewX(-1deg); }
.aics-text-layer.is-parchment { background-image: linear-gradient(90deg, rgba(93,70,35,.08), transparent 12%, transparent 88%, rgba(93,70,35,.08)); }
.aics-text-layer.is-cloud { border-radius: 48% 52% 45% 55% / 58% 46% 54% 42% !important; }
.aics-text-tail { position: absolute; z-index: 0; display: block; background: var(--aics-tail-color); pointer-events: none; }
.aics-text-tail.is-bottom { top: 100%; left: var(--aics-tail-position); width: var(--aics-tail-size); height: var(--aics-tail-size); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); }
.aics-text-tail.is-top { bottom: 100%; left: var(--aics-tail-position); width: var(--aics-tail-size); height: var(--aics-tail-size); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateX(-50%); }
.aics-text-tail.is-left { top: var(--aics-tail-position); right: 100%; width: var(--aics-tail-size); height: var(--aics-tail-size); clip-path: polygon(0 50%, 100% 0, 100% 100%); transform: translateY(-50%); }
.aics-text-tail.is-right { top: var(--aics-tail-position); left: 100%; width: var(--aics-tail-size); height: var(--aics-tail-size); clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateY(-50%); }
.aics-text-layer.is-thought_bubble .aics-text-tail.is-bottom { border-radius: 50%; clip-path: none; box-shadow: calc(var(--aics-tail-size) * -.7) calc(var(--aics-tail-size) * .7) 0 calc(var(--aics-tail-size) * -.25) var(--aics-tail-color); }
.aics-trim-guides { position: absolute; z-index: var(--aics-z-outline); inset: 0; border: 1px solid rgba(50, 53, 50, .42); pointer-events: none; }
.aics-safe-guides { position: absolute; z-index: var(--aics-z-outline); border: 1px dashed rgba(202, 62, 50, .62); pointer-events: none; }
.aics-safe-guides > span { position: absolute; top: 3px; left: 4px; border-radius: 3px; background: rgba(255,255,255,.86); color: #9b3c34; padding: 2px 4px; font-size: 7px; }
.aics-editor-overlay-layer { position: absolute; z-index: var(--aics-z-outline); inset: 0; overflow: visible; pointer-events: none; }
.aics-selection-outline { position: absolute; z-index: var(--aics-z-outline); border: 1px solid var(--aics-accent); pointer-events: none; }
/* Highlights the main image frame when "Image principale" is the active layer in
   the Poster left panel (LayerNavigator) — real geometry (image.frame), not a
   decorative fake selection. */
.aics-composition-image-frame.is-layer-selected::after { content: ''; position: absolute; z-index: var(--aics-z-outline); inset: 0; outline: 2px solid var(--aics-accent); outline-offset: -1px; pointer-events: none; }
.aics-selection-outline.is-invalid { border-color: var(--aics-danger); }
.aics-resize-handle { position: absolute; z-index: var(--aics-z-handles); width: 11px; height: 11px; border: 1px solid var(--aics-accent); border-radius: 2px; background: #fff; padding: 0; pointer-events: auto; }
.aics-resize-handle.is-nw { top: 0; left: 0; cursor: nwse-resize; transform: translate(-50%, -50%); }
.aics-resize-handle.is-ne { top: 0; right: 0; cursor: nesw-resize; transform: translate(50%, -50%); }
.aics-resize-handle.is-sw { bottom: 0; left: 0; cursor: nesw-resize; transform: translate(-50%, 50%); }
.aics-resize-handle.is-se { right: 0; bottom: 0; cursor: nwse-resize; transform: translate(50%, 50%); }
.aics-context-toolbar { position: absolute; z-index: var(--aics-z-toolbar); display: flex; border: 1px solid var(--aics-line-strong); border-radius: 6px; background: #fff; box-shadow: 0 5px 16px rgba(24, 27, 25, .18); padding: 2px; pointer-events: auto; }
.aics-context-toolbar .aics-icon-button { width: 29px; height: 29px; flex-basis: 29px; }
.aics-context-toolbar--image .aics-icon-button { width: 34px; height: 34px; flex-basis: 34px; }
.aics-context-toolbar .aics-icon-button.is-destructive { color: var(--aics-danger); }
.aics-context-toolbar .aics-icon-button.is-destructive:hover { border-color: var(--aics-danger); background: #fff2f1; color: var(--aics-danger); }
.aics-overlay-warning { position: absolute; z-index: var(--aics-z-warning); display: grid; max-width: calc(100% - 8px); gap: 4px; border-radius: 5px; background: var(--aics-danger); color: #fff; padding: 5px 7px; font-size: 9px; font-weight: 700; line-height: 1.25; pointer-events: auto; }
.aics-overlay-warning > span { display: flex; align-items: center; gap: 4px; }
.aics-overlay-warning .dashicons { width: 13px; height: 13px; font-size: 13px; }
.aics-overlay-warning__actions button { border: 0; border-radius: 3px; background: #fff; color: var(--aics-danger); padding: 3px 5px; font: inherit; font-size: 8px; cursor: pointer; }
.aics-snap-guide { position: absolute; z-index: var(--aics-z-outline); background: rgba(33, 116, 94, .55); pointer-events: none; }
.aics-snap-guide.is-block { background: var(--aics-accent); }
.aics-snap-guide.is-x { top: 0; bottom: 0; width: 1px; }
.aics-snap-guide.is-y { right: 0; left: 0; height: 1px; }
/* La page entière ne se voile plus pendant une génération : seul le bloc
   concerné affiche son propre skeleton. Un voile plein cadre suggérerait à tort
   que toute la page est en train d'être régénérée. */
.aics-image-block-placeholder .aics-loading-spinner { width: 28px; height: 28px; }
.aics-canvas-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--aics-line-strong); background: #f2f1ed; color: var(--aics-muted); padding: 0 8px; font-size: 10px; }
.aics-canvas-navigation,
.aics-canvas-details { display: flex; align-items: center; gap: 5px; }
.aics-canvas-footer .aics-icon-button { width: 26px; height: 26px; flex-basis: 26px; }

.aics-inspector { border-left: 1px solid var(--aics-line-strong); }
.aics-inspector-tabs { display: grid; grid-template-columns: repeat(3, 1fr); height: 48px; border-bottom: 1px solid var(--aics-line); }
.aics-inspector-tabs button { display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--aics-muted); padding: 0 4px; font-size: 11px; font-weight: 700; cursor: pointer; }
.aics-inspector-tabs button.is-active { border-bottom-color: var(--aics-accent); color: var(--aics-accent); }
.aics-inspector-tabs .dashicons { width: 16px; height: 16px; font-size: 16px; }
/* Personnaliser/Importer sub-tabs inside the Image section — reuses the same
   tab visuals as the outer Contenu/Layout/Style tabs, 2 columns instead of 3. */
.aics-image-subtabs { grid-template-columns: repeat(2, 1fr); height: 36px; border: 1px solid var(--aics-line); border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
.aics-image-subtabs button { border-bottom: 0; border-radius: 0; }
.aics-image-subtabs button.is-active { background: var(--aics-accent-soft); border-bottom: 0; }
.aics-import-button { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.aics-import-button input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.aics-inspector-body { height: calc(100dvh - 106px); overflow: auto; }
.aics-inspector-section { border-bottom: 1px solid var(--aics-line); padding: 15px; }
.aics-inspector-section h2 { margin: 0 0 12px; color: var(--aics-ink); font-size: 13px; font-weight: 750; line-height: 1.3; }
/* h3 (subsection headings like "Forme du texte", "Bordure et coins") had no
   rule of its own — it fell back to the browser's default heading size,
   rendering noticeably BIGGER and bolder than the section's own h2 title
   right above it (confirmed live: "Forme du texte" visually outweighed
   "Texte"), the opposite of the intended hierarchy. Styled as a small
   uppercase label — same treatment .aics-image-layout-section h3 and
   .aics-preflight-group h3 already use elsewhere — with a divider line so
   several subsections inside one section read as distinct groups. The
   adjacent-sibling rules cancel that divider only for the very first h3
   right after the section's own title, where a hard rule immediately below
   a 12px-spaced heading reads as a stray line, not a separator. */
.aics-inspector-section h3 {
    margin: 18px 0 9px;
    padding-top: 16px;
    border-top: 1px solid var(--aics-line);
    color: var(--aics-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.3;
}
.aics-inspector-section h2 + h3,
.aics-inspector-section .aics-section-heading + h3 { margin-top: 2px; padding-top: 0; border-top: 0; }
.aics-content-fields,
.aics-cover-image-fields,
.aics-tab-fields { min-width: 0; border: 0; margin: 0; padding: 0; }
.aics-content-fields:disabled .aics-inspector-section { opacity: .5; }
.aics-content-fields:disabled .aics-image-history { opacity: 1; }
.aics-content-fields:disabled .aics-image-history__actions button { opacity: .55; cursor: not-allowed; }
.aics-content-fields:disabled button,
.aics-content-fields:disabled input,
.aics-content-fields:disabled textarea,
.aics-content-fields:disabled select,
.aics-tab-fields:disabled button,
.aics-tab-fields:disabled input,
.aics-tab-fields:disabled select { cursor: default; }
.aics-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.aics-section-heading small,
.aics-help { color: var(--aics-muted); font-size: 10px; font-weight: 400; }
.aics-help { margin: 8px 0 0; line-height: 1.45; }

.aics-inspector .aics-field { margin: 9px 0; }
.aics-section-heading small.is-limit { color: var(--aics-danger); }
/* Add-text-block button matches .aics-field's own vertical rhythm (9px) —
   it stands in for the textarea when there's no block yet, so it should sit
   at the same distance from the section heading, not flush against it. */
.aics-add-text-block { margin: 9px 0; }

/* Rich text field ("vrai éditeur" in the Contenu panel) — replaces the plain
   textarea for interior page text so words/phrases can carry their own font,
   size, weight and color. Reuses the exact same building blocks as the
   Layout/Style tabs (.aics-field, .aics-range, .aics-segment) rather than a
   bespoke toolbar, so it reads as one more inspector section, not a
   different kind of control living inside it. Same vertical rhythm (9px) as
   .aics-field. */
.aics-rich-text-field { margin: 9px 0; }
.aics-rich-text-toolbar { padding: 10px; border: 1px solid var(--aics-line-strong); border-radius: 6px; background: var(--aics-surface); margin-bottom: 9px; }
.aics-rich-text-toolbar > *:first-child { margin-top: 0; }
.aics-rich-text-toolbar > *:last-child { margin-bottom: 0; }
.aics-rich-text-toolbar .aics-field { margin: 9px 0; }
.aics-rich-text-toolbar .aics-range { margin: 9px 0; }
.aics-rich-text-toolbar .aics-icon-button { margin-top: 4px; }
.aics-alignment-control {
    display: grid;
    gap: 8px;
    margin: 10px 0;
    border: 1px solid var(--aics-line);
    border-radius: 6px;
    background: #fff;
    padding: 9px;
}
.aics-alignment-control__title { color: var(--aics-ink); font-size: 10px; font-weight: 750; }
.aics-alignment-axis { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 8px; }
.aics-alignment-axis > span { color: var(--aics-muted); font-size: 9.5px; font-weight: 650; }
.aics-alignment-axis .aics-segment--inline { margin: 0; }
.aics-alignment-axis .aics-icon-button { margin-top: 0; }
.aics-rich-text-content {
    min-height: calc(3em + 22px); width: 100%; border: 1px solid var(--aics-line-strong); border-radius: 6px;
    background: var(--aics-surface); color: var(--aics-ink); padding: 9px 10px; font: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; text-align: left;
    white-space: pre-wrap; overflow-wrap: break-word; cursor: text;
}
/* Le champ ne montre du style du texte que la POLICE (posée en ligne par
   RichTextFieldEditor, et par mot via les spans `aics-ff`). Couleur, taille,
   graisse, interligne et alignement ne se voient que sur la page : un titre
   blanc devenait invisible dans ce champ blanc, un corps à 8 px illisible. Les
   spans de mise en forme riche portent ces réglages en style inline, d'où
   `!important`. */
.aics-rich-text-content, .aics-rich-text-content * { color: var(--aics-ink) !important; }
.aics-rich-text-content * { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.aics-rich-text-content:focus { border-color: var(--aics-accent); outline: 2px solid var(--aics-accent-soft); }
.aics-rich-text-content:empty::before { content: attr(data-placeholder); color: var(--aics-muted); }
.aics-rich-text-hint { margin: 9px 0 0; color: var(--aics-muted); font-size: 10px; font-weight: 400; line-height: 1.45; }
.aics-inline-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 9px; }
.aics-inline-actions select,
.aics-component-field select,
.aics-custom-value { min-width: 0; width: 100%; border: 1px solid var(--aics-line-strong); border-radius: 6px; background: #fff; color: var(--aics-ink); padding: 8px; font: inherit; font-size: 11px; }
/* The select sits directly above "Générer automatiquement" (.aics-button,
   36px/13px/650) as one paired action — it used to be visibly shorter and
   lighter-weight (11px, no explicit height) than the button right below it,
   reading as two mismatched controls instead of one action group. */
.aics-inline-actions select { min-height: 36px; font-size: 13px; font-weight: 650; }
.aics-character-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aics-character-chips button { display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px; min-width: 0; align-items: center; gap: 6px; border: 1px solid var(--aics-line); border-radius: 6px; background: #fff; color: var(--aics-ink); padding: 4px 7px 4px 4px; font-size: 11px; cursor: pointer; }
.aics-character-chips button.is-selected { border-color: var(--aics-accent); background: var(--aics-accent-soft); }
.aics-character-chips button:disabled { opacity: .55; cursor: default; }
.aics-character-chips img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.aics-character-chips span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aics-character-chips .dashicons { width: 16px; height: 16px; font-size: 16px; }
.aics-character-help { border-left: 2px solid var(--aics-accent); padding-left: 8px; }
.aics-page-lock-help { display: flex; align-items: center; gap: 6px; }
.aics-generation-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aics-guided-fields,
.aics-random-options { display: grid; gap: 9px; }
.aics-book-scene-section .aics-help { margin: 0 0 12px; }
.aics-book-scene-section__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 5px 0 8px; color: var(--aics-muted); font-size: 11px; }
.aics-component-field { display: grid; gap: 6px; color: var(--aics-muted); font-size: 11px; font-weight: 650; }
.aics-horizontal-picker { display: grid; min-width: 0; gap: 6px; }
.aics-horizontal-picker__rail { position: relative; min-width: 0; }
.aics-horizontal-picker__items { display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 1px 0 5px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.aics-horizontal-picker__items > button { position: relative; display: grid; width: 112px; min-width: 112px; overflow: hidden; border: 1px solid var(--aics-line); border-radius: 6px; background: #fff; color: var(--aics-ink); padding: 0; text-align: left; cursor: pointer; scroll-snap-align: start; }
.aics-horizontal-picker__items > button.is-selected { border-color: var(--aics-accent); box-shadow: inset 0 0 0 1px var(--aics-accent); }
.aics-horizontal-picker__items > button:focus-visible { outline: 2px solid var(--aics-accent); outline-offset: 1px; }
.aics-horizontal-picker__items img,
.aics-horizontal-picker__placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #eff1ed; }
.aics-horizontal-picker__placeholder { display: grid; color: var(--aics-muted); place-items: center; }
.aics-horizontal-picker__items strong { overflow: hidden; padding: 6px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.aics-horizontal-picker__items > button > .dashicons-yes { position: absolute; top: 4px; right: 4px; width: 17px; height: 17px; border-radius: 50%; background: #fff; color: var(--aics-accent); font-size: 17px; }
.aics-horizontal-picker__arrow { position: absolute; z-index: 2; top: 34px; width: 28px; height: 32px; border-color: var(--aics-line-strong); background: rgba(255,255,255,.96); box-shadow: 0 2px 8px rgba(24,27,25,.12); }
.aics-horizontal-picker__arrow.is-previous { left: 3px; }
.aics-horizontal-picker__arrow.is-next { right: 3px; }
.aics-component-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.aics-component-chips button { border: 1px solid var(--aics-line); border-radius: 999px; background: #fff; color: var(--aics-ink); padding: 5px 8px; font: inherit; font-size: 10px; cursor: pointer; }
.aics-component-chips button.is-selected { border-color: var(--aics-accent); background: var(--aics-accent-soft); color: var(--aics-accent); }
.aics-disclosure,
.aics-prompt-preview-button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--aics-accent); padding: 5px 0; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.aics-disclosure .dashicons,
.aics-prompt-preview-button .dashicons { width: 16px; height: 16px; font-size: 16px; }
.aics-prompt-preview { max-height: 220px; overflow: auto; border-left: 3px solid var(--aics-accent); margin-top: 8px; background: #f5f7f4; padding: 9px; font-size: 10px; line-height: 1.45; }
.aics-prompt-preview p { margin: 5px 0; white-space: pre-wrap; }
.aics-random-options .aics-toggle-field { margin: 0; }
.aics-toggle-field { display: flex; gap: 7px; align-items: center; color: var(--aics-muted); font-size: 11px; }
.aics-button--generate { width: 100%; border-color: var(--aics-accent); background: var(--aics-accent); color: #fff; }
.aics-button--generate:hover { border-color: #185d4b; background: #185d4b; color: #fff; }

.aics-current-image { display: grid; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--aics-line); border-radius: 5px; background: #eff1ed; color: var(--aics-muted); font-size: 10px; place-items: center; }
.aics-current-image img { width: 100%; height: 100%; object-fit: cover; }
.aics-current-image > span { display: grid; justify-items: center; gap: 5px; }
.aics-inline-warning { display: flex; align-items: flex-start; gap: 6px; border: 1px solid #e6c976; border-radius: 5px; margin: 8px 0; background: #fff9e7; color: #755d16; padding: 7px; font-size: 10px; line-height: 1.35; }
.aics-inline-warning .dashicons { width: 15px; height: 15px; flex: 0 0 15px; font-size: 15px; }
.aics-inline-warning .aics-portrait-line { display: block; }
.aics-inline-warning .aics-portrait-line + .aics-portrait-line { margin-top: 2px; }
/* Portraits montrés avant la première dépense (GenerationConfirmDialog). */
.aics-confirm-portraits ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; padding: 0; list-style: none; }
.aics-confirm-portraits li { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.aics-confirm-portraits img { width: 72px; height: 72px; border: 1px solid #d9d9d9; border-radius: 8px; object-fit: cover; background: #f4f4f4; }

.aics-image-source__options { display: grid; gap: 7px; }
.aics-image-source__options button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; border: 1px solid var(--aics-line-strong); border-radius: 6px; background: #fff; padding: 7px 10px; color: var(--aics-ink); font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.aics-image-source__options button.is-active { border-color: var(--aics-accent); background: var(--aics-accent-soft); color: var(--aics-accent); }
.aics-image-source__options button:hover, .aics-image-source__options button:focus-visible { border-color: var(--aics-accent); }
.aics-image-history__hint { margin: -4px 0 12px; color: var(--aics-muted); font-size: 11px; }
.aics-active-image { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; }
.aics-active-image > * { grid-column: 1 / -1; }
.aics-active-image__heading { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aics-active-image__heading h2 { margin: 0; }
.aics-active-image__preview { grid-column: 1; grid-row: 1; display: block; width: 56px; height: 56px; overflow: hidden; margin: 0; border: 1px solid var(--aics-line); border-radius: 8px; padding: 3px; background: var(--aics-panel-soft); cursor: zoom-in; }
.aics-active-image__preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aics-active-image__preview:focus-visible { outline: 2px solid var(--aics-accent); outline-offset: 2px; }
.aics-block-history summary { cursor: pointer; font-size: 13px; font-weight: 750; }
.aics-block-history details[open] summary { margin-bottom: 14px; }
.aics-image-card-grid { display: grid; gap: 14px; }
.aics-project-image-library__grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.aics-block-history .aics-image-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp-modal.aics-project-image-library { width: min(960px, calc(100vw - 40px)); }
.aics-image-card-grid .aics-image-history__item { position: relative; display: block; min-width: 0; padding: 0; }
.aics-image-card-grid .aics-image-history__visual { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: inherit; }
.aics-image-card-grid button.aics-image-history__visual { border: 0; padding: 0; cursor: zoom-in; }
.aics-image-card-grid button.aics-image-history__visual img { transition: transform .18s ease; }
.aics-image-card-grid button.aics-image-history__visual:is(:hover, :focus-visible) img { transform: scale(1.035); }
.aics-image-card-grid button.aics-image-history__visual:focus-visible { outline: 2px solid var(--aics-accent); outline-offset: -3px; }
/* Les actions se révèlent sur la carte ; seule l'icône d'information ouvre
   l'infobulle, au survol, au focus clavier ou au toucher. */
.aics-image-card-grid .aics-image-history__info { position: absolute; z-index: 1; pointer-events: none; inset: 8px 8px auto; gap: 4px; border-radius: 6px; padding: 9px 11px; background: rgba(24, 27, 25, .94); color: #fff; box-shadow: 0 3px 12px #0003; visibility: hidden; opacity: 0; transition: opacity .15s; }
.aics-image-card-grid .aics-image-history__info strong,
.aics-image-card-grid .aics-image-history__info time,
.aics-image-card-grid .aics-image-history__detail { color: inherit; }
.aics-image-card-grid .aics-image-history__actions { position: absolute; z-index: 1; inset: auto 0 0; justify-content: center; gap: 6px; border: 0; border-radius: inherit; padding: 25px 8px 8px; background: linear-gradient(transparent, rgba(24, 27, 25, .78)); opacity: 0; pointer-events: none; transition: opacity .15s; }
.aics-image-card-grid .aics-image-history__actions .aics-icon-button { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.aics-image-card-grid .aics-image-history__item:has(.aics-gallery-info-button:is(:hover, :focus)) .aics-image-history__info { visibility: visible; opacity: 1; }
.aics-image-card-grid .aics-image-history__item:hover .aics-image-history__actions,
.aics-image-card-grid .aics-image-history__item:focus-within .aics-image-history__actions { opacity: 1; }
.aics-image-card-grid .aics-image-history__item:hover .aics-image-history__actions button,
.aics-image-card-grid .aics-image-history__item:focus-within .aics-image-history__actions button { pointer-events: auto; }
@media (hover: none), (pointer: coarse) {
  .aics-image-card-grid .aics-image-history__actions { opacity: 1; }
  .aics-image-card-grid .aics-image-history__actions button { pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .aics-image-card-grid button.aics-image-history__visual img { transition: none; transform: none; }
}
@media (max-width: 540px) {
  .aics-project-image-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .aics-image-card-grid .aics-image-history__actions { padding-inline: 6px; }
}
.aics-image-history__list { display: grid; gap: 10px; }
.aics-image-history__item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px 12px; border: 1.5px solid var(--aics-line); border-radius: 9px; background: #fff; padding: 10px; }
.aics-image-history__item.is-selected { border-color: var(--aics-accent); background: var(--aics-accent-soft); }
.aics-image-history__item.is-pending { border-style: dashed; }
.aics-image-history__item.is-failed { border-color: #d8afa9; background: #fff8f7; }
.aics-image-history__visual { display: grid; width: 92px; height: 92px; overflow: hidden; border-radius: 6px; background: #f4f1eb; color: var(--aics-muted); place-items: center; }
.aics-image-history__visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aics-image-history__info { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 5px; padding-top: 2px; }
.aics-image-history__info strong { color: var(--aics-ink); font-size: 12px; line-height: 1.3; }
.aics-image-history__info time,
.aics-image-history__detail { color: var(--aics-muted); font-size: 10.5px; line-height: 1.35; }
.aics-image-history__review { border-radius: 4px; padding: 3px 6px; font-size: 10px; font-weight: 700; line-height: 1.25; }
.aics-image-history__review.is-todo { background: #fbebcc; color: #7a4f06; }
.aics-image-history__review.is-ok { background: #d6ede9; color: #1e5d52; }
.aics-image-history__actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 7px; border-top: 1px solid var(--aics-line); padding-top: 9px; }
.aics-image-history__actions button { min-height: 32px; border: 1px solid var(--aics-line); border-radius: 6px; background: #fff; color: var(--aics-ink); padding: 5px 9px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.aics-image-history__actions button.is-primary { border-color: var(--aics-accent); color: var(--aics-accent); }
.aics-image-history__actions button:hover { background: var(--aics-accent-soft); }
.aics-image-history__actions button:focus-visible { outline: 2px solid var(--aics-accent); outline-offset: 2px; }

.aics-layout-list,
.aics-style-list { display: grid; gap: 7px; }
.aics-layout-list > button,
.aics-style-list > button { display: grid; align-items: center; gap: 9px; border: 1px solid var(--aics-line); border-radius: 6px; background: #fff; color: var(--aics-ink); padding: 7px; text-align: left; cursor: pointer; }
.aics-layout-list > button { grid-template-columns: 48px 1fr; }
.aics-style-list > button { grid-template-columns: 46px 1fr; }
.aics-layout-list > button:hover,
.aics-layout-list > button.is-selected,
.aics-style-list > button:hover,
.aics-style-list > button.is-selected { border-color: var(--aics-accent); background: var(--aics-accent-soft); }
.aics-layout-mini { position: relative; display: block; width: 46px; aspect-ratio: 1; overflow: hidden; border: 1px solid #bdc1bc; background: #fff; }
.aics-layout-mini i { position: absolute; background: #9aa9a2; }
.aics-layout-mini b { position: absolute; background: #d9ddd9; }
.aics-style-swatch { display: grid; width: 44px; height: 44px; border: 1px solid var(--aics-line); border-radius: 4px; font-size: 17px; place-items: center; }
.aics-style-list strong,
.aics-style-list small { display: block; }
.aics-style-list strong { font-size: 11px; }
.aics-style-list small { margin-top: 2px; color: var(--aics-muted); font-size: 9px; line-height: 1.3; }

.aics-segment--compact { display: grid; grid-template-columns: repeat(2, 1fr); margin: 8px 0; }
.aics-segment--compact button { min-height: 32px; padding: 5px 7px; font-size: 11px; }
.aics-segment--compact .aics-icon-button { width: 100%; }

/* Unlike --compact's 2-column grid (built for an even count like the 4 border
   presets), --inline keeps every option on one row regardless of count —
   used for the 3-way text alignment picker, which looked broken wrapping
   2+1 across two rows in a 2-column grid. */
.aics-segment--inline { display: flex; gap: 6px; margin: 4px 0 0; }
.aics-segment--inline .aics-icon-button { flex: 1 1 0; }

.aics-range { display: grid; gap: 5px; margin: 12px 0; color: var(--aics-muted); font-size: 10px; font-weight: 650; }
.aics-range > span { display: flex; justify-content: space-between; gap: 8px; }
.aics-range output { color: var(--aics-ink); font-variant-numeric: tabular-nums; }
.aics-range input { width: 100%; accent-color: var(--aics-accent); }
.aics-range.is-disabled { opacity: .5; }
.aics-color-field { grid-template-columns: 1fr; align-items: stretch; }
.aics-color-field input { width: 100%; height: 38px; padding: 3px; }
.aics-back-appearance__color { display: flex; gap: 8px; align-items: center; }
.aics-back-appearance__color input[type="color"] { width: 52px; flex: 0 0 52px; }
.aics-back-appearance__color input[type="text"] { min-width: 0; flex: 1; padding: 8px; }

.aics-studio-notice {
    position: fixed;
    z-index: var(--aics-z-toolbar);
    top: 68px;
    left: 50%;
    display: flex;
    max-width: min(520px, calc(100vw - 30px));
    align-items: center;
    gap: 12px;
    border: 1px solid var(--aics-line-strong);
    border-radius: 7px;
    background: #fff;
    box-shadow: var(--aics-shadow);
    padding: 8px 8px 8px 13px;
    font-size: 12px;
    transform: translateX(-50%);
}

.aics-generation-error { display: flex; min-width: 0; align-items: center; gap: 9px; }
.aics-generation-error > span { overflow: hidden; text-overflow: ellipsis; }
.aics-generation-error > button { border: 0; background: transparent; color: var(--aics-accent); padding: 4px; font: inherit; font-weight: 750; cursor: pointer; }
.aics-undo-notice { display: flex; align-items: center; gap: 10px; }
.aics-undo-notice button,
.aics-link-button { display: inline-block; border: 0; background: transparent; color: var(--aics-accent); padding: 3px; font-family: inherit; font-size: 11px; font-weight: 750; line-height: 1.3; text-align: left; white-space: normal; cursor: pointer; }
.aics-add-text-block { width: 100%; justify-content: center; }
.aics-text-layout-section h3,
.aics-image-layout-section h3 { margin: 16px 0 7px; color: var(--aics-muted); font-size: 10px; text-transform: uppercase; }
.aics-field-label { display: block; margin: 9px 0 6px; color: var(--aics-muted); font-size: 10px; font-weight: 700; }
.aics-shape-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.aics-shape-picker button { display: grid; min-height: 54px; align-content: center; justify-items: center; gap: 3px; border: 1px solid var(--aics-line); border-radius: 6px; background: #fff; color: var(--aics-muted); padding: 5px; font: inherit; font-size: 9px; cursor: pointer; }
.aics-shape-picker button.is-selected { border-color: var(--aics-accent); color: var(--aics-accent); box-shadow: inset 0 0 0 1px var(--aics-accent); }
.aics-shape-picker .dashicons { width: 18px; height: 18px; font-size: 18px; }
.aics-text-presets { display: flex; gap: 7px; }
.aics-text-presets button { width: 32px; height: 32px; border: 1px solid var(--aics-line-strong); border-radius: 50%; background: #fff; padding: 3px; cursor: pointer; }
.aics-text-presets button > span { display: block; width: 100%; height: 100%; border: 1px solid rgba(0,0,0,.1); border-radius: 50%; background: var(--aics-swatch); }
.aics-text-presets button.is-selected { outline: 2px solid var(--aics-accent); outline-offset: 1px; }

/* L'image se borne à l'écran MOINS tout ce qui l'entoure : les 2 × 20 px de
   marge du voile (.sp-modal-overlay) et l'habillage de la popup (marge
   intérieure + bordure, --aics-lightbox-chrome, posé par le thème qui les
   ajoute). Bornée au seul écran, elle débordait du cadre du Studio de ses
   2 × 22 px et sortait par le bas. */
.sp-modal.aics-image-lightbox {
    --aics-lightbox-chrome: 0px;
    display: grid;
    width: fit-content;
    height: fit-content;
    max-width: calc(100vw - 40px);
    max-height: calc(100dvh - 40px);
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.aics-image-lightbox .sp-modal__close { border: 1px solid rgba(255,255,255,.32); border-radius: 0; background: rgba(24,27,25,.82); color: #fff; }
.aics-image-lightbox .sp-modal__close:hover { border-color: #fff; background: #fff; color: var(--aics-ink); }
.aics-image-lightbox__image { display: block; width: auto; height: auto; max-width: calc(100vw - 40px - var(--aics-lightbox-chrome)); max-height: calc(100dvh - 40px - var(--aics-lightbox-chrome)); object-fit: contain; }
.aics-image-lightbox__image[style] { width: min(calc(100vw - 40px - var(--aics-lightbox-chrome)), calc((100dvh - 40px - var(--aics-lightbox-chrome)) * var(--aics-image-ratio))); aspect-ratio: var(--aics-image-ratio); }

.aics-preview-dialog {
    position: fixed;
    z-index: var(--aics-z-modal);
    inset: 0;
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr) 36px;
    background: rgba(24, 27, 25, .93);
    color: #fff;
}
.aics-preview-dialog header,
.aics-preview-dialog footer { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.aics-preview-dialog footer { justify-content: center; gap: 14px; color: #c5cbc6; font-size: 10px; }
.aics-preview-dialog .aics-icon-button { color: #fff; }
.aics-preview-dialog .aics-icon-button[disabled] { opacity: .35; }
.aics-preview-dialog__label { color: #c5cbc6; font-size: 12px; letter-spacing: .02em; }
.aics-preview-dialog__counter { min-width: 62px; text-align: center; font-variant-numeric: tabular-nums; }
.aics-preview-dialog__body { min-height: 0; display: grid; place-items: center; }
.aics-preview-stage { position: relative; display: grid; place-items: center; min-height: 0; }
.aics-preview-stage.is-loading .aics-server-preview { opacity: .3; }
.aics-preview-stage .aics-preview-dialog__loading { position: absolute; inset: 0; justify-content: center; }
.aics-preview-dialog__loading,
.aics-preview-dialog__error { display: flex; align-items: center; gap: 10px; color: #c5cbc6; font-size: 13px; }
.aics-preview-dialog__error { max-width: 420px; text-align: center; }
.aics-server-preview { display: block; width: auto; max-width: calc(100vw - 60px); height: auto; max-height: calc(100dvh - 110px); margin: auto; box-shadow: 0 18px 44px rgba(0,0,0,.34); object-fit: contain; }

/*
 * Éditeur — contrat de breakpoints dédié (>=1280 desktop large, 640–1279
 * tablette / petit desktop, <640 mobile), distinct des 760px du site
 * marketing (studio-proches.css) : ne pas fusionner les deux échelles.
 * En dessous de 1280px, Pages/Calques et Propriétés quittent la mise en
 * page 3 colonnes et deviennent des tiroirs superposés en plein écran,
 * ouverts par les boutons .aics-panel-toggle de la barre supérieure.
 */
@media (max-width: 1279px) {
    .aics-standalone-page,
    .aics-standalone-page #aics-studio-root,
    .aics-studio-app { min-height: 100dvh; height: auto; overflow: visible; }
    .aics-app-bar { position: sticky; top: 0; z-index: 15; flex-wrap: wrap; height: auto; min-height: 58px; row-gap: 6px; }
    .aics-app-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
    .aics-panel-toggle { display: inline-grid; }
    .aics-character-link img { display: none; }

    .aics-workspace { display: block; position: relative; min-height: 0; }
    .aics-canvas-workspace { height: auto; min-height: 60vh; }
    .aics-book-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
    .aics-book-spread .aics-page-frame { width: calc(100% - 4px); }

    .aics-page-nav,
    .aics-inspector {
        position: fixed;
        z-index: var(--aics-z-modal);
        top: 0;
        bottom: 0;
        overflow-y: auto;
        box-shadow: var(--aics-shadow);
        transition: transform .22s ease;
    }
    .aics-page-nav { left: 0; width: min(88vw, 320px); transform: translateX(-101%); }
    .aics-inspector { right: 0; width: min(90vw, 360px); transform: translateX(101%); }
    .aics-page-nav.is-open,
    .aics-inspector.is-open { transform: translateX(0); }
    .aics-panel-backdrop { position: fixed; inset: 0; z-index: calc(var(--aics-z-modal) - 1); background: rgba(24, 27, 25, .45); }
    .aics-panel-close { display: inline-grid; position: absolute; z-index: 2; top: 6px; right: 6px; background: var(--aics-surface); }
    .aics-inspector-tabs { position: sticky; top: 0; z-index: 1; background: #fff; }
}

/* Reste propre à la page Personnages (non concernée par les tiroirs ci-dessus). */

@media (max-width: 639px) {
    .aics-app-actions .aics-button { padding: 6px 8px; font-size: 11px; }
    .aics-app-actions .aics-async-button { min-width: 0; }
    .aics-canvas-stage { padding: 14px; }
    .aics-page-frame { width: min(54vh, calc(100% - 10px)); }
    .aics-book-spread { display: block; padding: 8px; }
    .aics-spread-page { display: none; height: 100%; }
    .aics-spread-page.is-active { display: grid; }
    .aics-book-spread .aics-page-frame { width: min(52vh, calc(100% - 8px)); }
    .aics-mobile-side-switch { display: inline-flex; gap: 3px; }
    .aics-mobile-side-switch button { border: 1px solid var(--aics-line-strong); border-radius: 4px; background: #fff; color: var(--aics-muted); padding: 3px 5px; font-size: 9px; }
    .aics-mobile-side-switch button.is-active { border-color: var(--aics-accent); background: var(--aics-accent-soft); color: var(--aics-accent); }
    .aics-canvas-details { display: none; }
}

/* Reste propre aux pages Compte/Personnages/Bibliothèque (non concernées par l'éditeur). */
@media (max-width: 560px) {
    .aics-shell { padding: 18px; }
    .aics-top,
    .aics-project-row { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
    .aics-project-row { display: grid; grid-template-columns: 64px 1fr; }
    .aics-project-row .aics-button { grid-column: 1 / -1; }
    .aics-person-grid { grid-template-columns: 1fr; }
    .aics-story-variable-fields { grid-template-columns: 1fr; }
}
.aics-composition-static-image,.aics-static-image{position:absolute;display:block;object-fit:contain;z-index:2;pointer-events:none}.aics-back-logo-preview{display:block;max-width:70%;max-height:130px;object-fit:contain;margin:18px auto}.aics-lock-message{padding:12px;border-radius:8px;background:#f3f4f6;color:#4b5563}.aics-cover-content>.aics-content-fields{border-top:1px solid #e5e7eb}.aics-page-item__preview .aics-static-image{z-index:2}

/* ==========================================================================
   Page → Layout → Slots → Blocs
   ==========================================================================
   Trois représentations visuelles DISTINCTES de la sélection (§11), pour qu'on
   sache toujours d'un coup d'œil à quel niveau on travaille :

     page  → un cadre autour de la page entière
     zone  → un cadre en pointillés autour de la zone du layout
     bloc  → un cadre plein autour du bloc, plus la barre d'outils flottante

   Le survol (§38) utilise systématiquement un trait plus léger que la
   sélection : il annonce ce qui est cliquable sans jamais se confondre avec ce
   qui est réellement en cours d'édition.
   ========================================================================== */

.aics-page-frame.is-page-selected::before,
.aics-page-frame.is-page-selected .aics-page-canvas::after { content: none; }

/* Une zone vide reste identifiable mais discrète (§37) : elle ne se révèle
   qu'au survol ou à la sélection, sinon une grille 2×2 remplirait la page de
   cadres avant même qu'on ait ajouté quoi que ce soit. */
/* Pas de z-index sur la zone elle-même : une valeur ici créerait un contexte
   d'empilement, et tout ce qu'elle contient resterait prisonnier de ce plan —
   le bouton « + » se retrouvait peint DERRIÈRE l'image de sa propre zone, donc
   invisible et incliquable. Sans z-index, l'ordre du DOM suffit : les zones
   sont rendues avant les blocs, donc en dessous, et leurs enfants peuvent
   remonter au-dessus quand ils en ont besoin. */
.aics-slot {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px dashed transparent;
    background: transparent;
    cursor: pointer;
}
/* §3 — « une zone ne contenant aucun élément interactif » sélectionne la PAGE.
   Une zone déjà remplie laisse donc passer le clic : sur une disposition pleine
   page, la zone couvre toute la surface, et l'intercepter rendrait le fond de
   page impossible à cliquer — on ne pourrait plus jamais sélectionner la page
   elle-même. Une zone VIDE, elle, reste cliquable : c'est le seul moyen de la
   remplir. Pour revenir à une zone remplie, il y a le fil d'Ariane, la liste des
   zones du panneau, et Échap depuis son bloc. */
.aics-slot.is-filled { pointer-events: none; }
.aics-slot.is-empty { border-color: rgba(120, 124, 118, .3); pointer-events: auto; }
.aics-slot.is-empty.is-hovered { border-color: var(--aics-line-strong); background: rgba(120, 124, 118, .06); }
/* Une zone sélectionnée passe au-dessus des blocs pour que son contour et son
   sélecteur de contenu restent lisibles. Son corps laisse toujours passer les
   clics (voir .is-filled), donc ce plan ne gêne jamais la sélection d'un bloc. */
.aics-slot.is-selected { z-index: var(--aics-z-handles); border: 2px dashed var(--aics-accent); background: var(--aics-accent-soft); }
/* Passée au-dessus des blocs, une zone REMPLIE ne peut pas garder le fond plein
   d'une zone vide : il masquait entièrement l'image ou le texte qu'on venait de
   sélectionner pour le remplacer, et une suppression annulée semblait perdue
   tant que la zone restait sélectionnée. Un voile léger garde le repère. */
.aics-slot.is-selected.is-filled { background: rgba(91, 63, 208, .10); }
/* Une zone qui PORTE la sélection (son bloc est sélectionné) se signale
   discrètement : elle donne le contexte sans concurrencer le cadre du bloc. */
.aics-slot.has-selection:not(.is-selected) { border-color: rgba(33, 116, 94, .35); }
.aics-slot__hint { display: flex; align-items: center; gap: 4px; color: var(--aics-muted); font-size: 10px; font-weight: 700; opacity: 0; transition: opacity .12s ease; }
.aics-slot.is-hovered .aics-slot__hint,
.aics-slot.is-selected .aics-slot__hint { opacity: 1; }
.aics-slot__hint .dashicons { width: 14px; height: 14px; font-size: 14px; }
.aics-slot__chooser { display: grid; gap: 6px; border: 1px solid var(--aics-line-strong); border-radius: 7px; background: #fff; box-shadow: var(--aics-shadow); padding: 9px; cursor: default; }
.aics-slot__chooser-title { color: var(--aics-muted); font-size: 10px; font-weight: 700; text-align: center; }
.aics-slot__chooser-actions { display: flex; gap: 6px; }
.aics-slot__chooser .aics-content-type-card { min-width: 68px; padding: 8px 6px; }

/* Cartes « Texte / Image / … » — les gros boutons visuels du choix de contenu.
   Elles sont générées depuis BLOCK_TYPES, donc un nouveau type de bloc apparaît
   ici sans qu'aucune règle ne soit ajoutée. */
.aics-content-type-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aics-content-type-card {
    display: grid; place-items: center; gap: 6px;
    border: 2px solid var(--aics-line); border-radius: 8px; background: #fff; color: var(--aics-ink);
    padding: 14px 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.aics-content-type-card:hover { border-color: var(--aics-accent); background: var(--aics-accent-soft); }
.aics-content-type-card.is-current { border-color: var(--aics-line-strong); background: var(--aics-neutral-200); }
.aics-content-type-card .dashicons { width: 24px; height: 24px; font-size: 24px; }

/* Blocs : survol léger, sélection franche.
   Le bloc sélectionné ne dessine PAS son propre contour : c'est
   .aics-selection-outline (dans la couche d'overlay) qui le fait, au même
   rectangle, et c'est elle qui porte les poignées de redimensionnement. Deux
   traits au même endroit se lisaient comme une double bordure. Le survol, lui,
   n'a pas d'équivalent dans l'overlay et reste donc ici. */
.aics-text-layer,
.aics-composition-image-frame { cursor: pointer; }
/* Un bloc se glisse directement quand la page permet de le déplacer
   (CompositionCanvas pressBlock()) : le curseur l'annonce. Une image en cours
   de recadrage garde sa main (`is-repositioning`, plus spécifique). */
.aics-page-canvas.is-movable .aics-text-layer,
.aics-page-canvas.is-movable .aics-composition-image-frame:not(.is-repositioning) { cursor: move; }
.aics-page-canvas.is-dragging-block,
.aics-page-canvas.is-dragging-block * { cursor: move !important; user-select: none; }
.aics-text-layer.is-block-hovered,
.aics-composition-image-frame.is-block-hovered { outline: 1px solid rgba(33, 116, 94, .5); outline-offset: 1px; }
.aics-composition-image-frame.is-awaiting-visual { background: #f5f3ed; }
.aics-image-block-placeholder { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 7px; color: #939791; font-size: 11px; font-weight: 700; pointer-events: none; }
.aics-image-block-placeholder .dashicons { width: 30px; height: 30px; font-size: 30px; }
.aics-selection-outline.is-block { border-width: 2px; }

/* --------------------------------------------------------------------------
   Panneau latéral contextuel
   -------------------------------------------------------------------------- */

.aics-inspector-header { border-bottom: 1px solid var(--aics-line); padding: 12px 15px 10px; }
.aics-inspector-title { margin: 4px 0 0; color: var(--aics-ink); font-size: 15px; font-weight: 750; }
/* §13 — fil d'Ariane cliquable : Page 3 › Zone 1 › Texte. */
.aics-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 10.5px; }
.aics-breadcrumb__separator { color: var(--aics-muted); padding: 0 2px; }
.aics-breadcrumb__step { border: 0; background: none; color: var(--aics-muted); padding: 0; font: inherit; font-size: 10.5px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.aics-breadcrumb__step:hover { color: var(--aics-accent); }
.aics-breadcrumb__step.is-current { color: var(--aics-ink); text-decoration: none; cursor: default; }

.aics-inspector-subtabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 42px; border-bottom: 1px solid var(--aics-line); }
.aics-inspector-subtabs button { display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--aics-muted); padding: 0 4px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.aics-inspector-subtabs button.is-active { border-bottom-color: var(--aics-accent); color: var(--aics-accent); }
.aics-inspector-subtabs .dashicons { width: 15px; height: 15px; font-size: 15px; }
/* Le corps du panneau perd la hauteur de l'en-tête de sélection en plus de
   celle des onglets — sans quoi le bas du panneau serait inatteignable. */
.aics-inspector-header ~ .aics-inspector-body { height: calc(100dvh - 164px); }

/* Miniatures de dispositions : une grille de 2 colonnes tient dans la largeur
   existante du panneau sans la faire varier (§61). */
.aics-layout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aics-layout-card { display: grid; border: 2px solid var(--aics-line); border-radius: 7px; background: #fff; padding: 8px; font: inherit; color: var(--aics-ink); cursor: pointer; }
.aics-layout-card:hover { border-color: var(--aics-line-strong); }
.aics-layout-card.is-selected { border-color: var(--aics-accent); background: var(--aics-accent-soft); color: var(--aics-accent); }
.aics-layout-card:disabled { opacity: .5; cursor: default; }
.aics-layout-mini { position: relative; display: block; width: 100%; aspect-ratio: 3/4; border: 1px solid var(--aics-line-strong); background: #fff; }
.aics-layout-mini i { position: absolute; background: var(--aics-neutral-300); outline: 1px solid #fff; }
.aics-layout-card.is-selected .aics-layout-mini i { background: rgba(33, 116, 94, .38); }
/* La disposition libre se distingue par des zones hachurées : elle ne découpe
   rien, elle laisse les blocs se superposer. */
.aics-layout-mini.is-free i { background: repeating-linear-gradient(45deg, var(--aics-neutral-300) 0 4px, #fff 4px 8px); }

.aics-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.aics-preset-card { display: grid; gap: 5px; border: 2px solid var(--aics-line); border-radius: 7px; background: #fff; padding: 7px; font: inherit; font-size: 10px; font-weight: 700; color: var(--aics-ink); text-align: center; cursor: pointer; }
.aics-preset-card:hover { border-color: var(--aics-accent); background: var(--aics-accent-soft); }

/* Onglet Contenu de la page : ce que la page porte, zone par zone. */
.aics-zone-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.aics-zone-list > li { display: grid; gap: 3px; border: 1px solid var(--aics-line); border-radius: 7px; padding: 8px; }
.aics-zone-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.aics-zone-row__name { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--aics-ink); }
.aics-zone-row__name .dashicons { width: 15px; height: 15px; font-size: 15px; }
.aics-zone-row__content { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; color: var(--aics-muted); font-size: 10.5px; }
.aics-zone-chip { display: inline-flex; align-items: center; gap: 3px; border-radius: 999px; background: var(--aics-neutral-200); padding: 2px 7px; font-size: 10px; font-weight: 700; color: var(--aics-ink); }
.aics-zone-chip .dashicons { width: 13px; height: 13px; font-size: 13px; }
.aics-zone-chip.is-empty { background: transparent; color: var(--aics-muted); font-weight: 400; font-style: italic; }
.aics-zone-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 3px; }
.aics-zone-edit { display: flex; align-items: center; justify-content: flex-start; gap: 3px; border: 0; background: none; color: var(--aics-accent); padding: 0; font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.aics-zone-edit .dashicons { width: 13px; height: 13px; font-size: 13px; }
.aics-zone-add { display: flex; align-items: center; gap: 3px; border: 0; background: none; color: var(--aics-muted); padding: 0; font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.aics-zone-add:hover { color: var(--aics-accent); }
.aics-zone-add:disabled { opacity: .5; cursor: default; }
.aics-zone-add .dashicons { width: 13px; height: 13px; font-size: 13px; }

/* Ajout d'un bloc depuis le canvas, sur une zone déjà remplie. Discret par
   défaut, il se révèle au survol de la page — la zone elle-même ne peut pas
   réagir au survol puisqu'elle laisse passer les clics (voir .aics-slot). */

/* Plan d'affichage d'un bloc dans une zone qui en porte plusieurs
   (texte sur image, bulles…). */
.aics-stack-order { display: block; margin-top: 2px; color: var(--aics-muted); font-size: 10px; font-weight: 700; }

/* Pile des blocs d'une page — du premier plan vers l'arrière-plan, comme un
   panneau de calques. L'ordre affiché est l'ordre réellement enregistré. */
.aics-zone-group { display: grid; gap: 5px; }
.aics-block-stack { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.aics-block-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--aics-line);
    border-radius: 6px;
    background: #fff;
    padding: 6px 8px;
    cursor: grab;
}
.aics-block-row:hover { border-color: var(--aics-line-strong); }
.aics-block-row.is-selected { border-color: var(--aics-accent); background: var(--aics-accent-soft); }
.aics-block-row.is-dragging { opacity: .45; cursor: grabbing; }
/* Le trait marque l'endroit exact où la ligne va se poser. */
.aics-block-row.is-drop-target { box-shadow: inset 0 2px 0 var(--aics-accent); }
.aics-block-row__grip { display: grid; place-items: center; color: var(--aics-muted); cursor: grab; }
.aics-block-row__grip .dashicons { width: 14px; height: 14px; font-size: 14px; }
.aics-block-row__label { display: grid; grid-template-columns: 15px auto minmax(0, 1fr); align-items: center; gap: 5px; min-width: 0; border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.aics-block-row__label .dashicons { width: 15px; height: 15px; font-size: 15px; }
.aics-block-row__type { font-size: 11.5px; font-weight: 700; color: var(--aics-ink); }
.aics-block-row__summary { min-width: 0; overflow: hidden; color: var(--aics-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.aics-block-row__depth { color: var(--aics-muted); font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.aics-block-drop-end {
    border: 1px dashed var(--aics-neutral-400);
    border-radius: 6px;
    color: var(--aics-muted);
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}
.aics-block-drop-end.is-drop-target { border-color: var(--aics-accent); background: var(--aics-accent-soft); color: var(--aics-accent); }

.aics-orphan-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.aics-orphan-list > li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px dashed var(--aics-line-strong); border-radius: 6px; padding: 7px 9px; font-size: 11px; }
.aics-orphan-list > li > span { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aics-page-metrics { display: grid; gap: 5px; margin: 0; }
.aics-page-metrics > div { display: flex; justify-content: space-between; gap: 8px; }
.aics-page-metrics dt { color: var(--aics-muted); font-size: 11px; }
.aics-page-metrics dd { margin: 0; font-size: 11px; font-weight: 700; }

/* --------------------------------------------------------------------------
   Miniatures de pages (panneau de gauche)
   --------------------------------------------------------------------------
   §28 — la miniature dessine la disposition RÉELLE de la page : une page en 2
   colonnes montre deux zones, une grille 2×2 en montre quatre. Le statut
   (calculé depuis les blocs, jamais stocké) tient dans le libellé sous la
   vignette. */
.aics-spread-mini__page { position: relative; display: block; width: auto; max-width: 100%; height: 72px; aspect-ratio: var(--aics-page-ratio, 3/4); border: 1px solid var(--aics-line-strong); background: var(--aics-mini-bg, #fff); padding: 0; cursor: pointer; }
.aics-mini-slot { position: absolute; display: grid; place-items: center; outline: 1px solid #fff; background: var(--aics-neutral-200); color: var(--aics-muted); }
.aics-mini-slot.is-empty { background: repeating-linear-gradient(45deg, #f3f2ee 0 3px, #fff 3px 6px); }
.aics-mini-slot.is-text { background: rgba(33, 116, 94, .16); color: #1f6b56; }
.aics-mini-slot.is-image { background: rgba(120, 124, 118, .26); color: #4c514b; }
.aics-mini-slot.is-incomplete { background: repeating-linear-gradient(45deg, rgba(202, 62, 50, .16) 0 3px, transparent 3px 6px); }
.aics-mini-slot[role="button"] { cursor: pointer; }
.aics-mini-slot[role="button"]:hover { outline: 1px solid var(--aics-accent); }
.aics-mini-slot .dashicons { width: 12px; height: 12px; font-size: 12px; }
/* L'état d'une page se lit à sa couleur et à une pastille, pas à un mot.
   Sur un livre de vingt pages, repérer ce qui manque doit être affaire d'un
   coup d'œil ; l'intitulé complet reste disponible en title/aria-label. */
.aics-spread-mini__label { display: flex; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.aics-spread-mini__number { font-size: 10px; font-weight: 700; color: var(--aics-muted); }
.aics-spread-mini__state { display: inline-flex; align-items: center; }
.aics-spread-mini__state .dashicons { width: 13px; height: 13px; font-size: 13px; }
.aics-spread-mini__state .aics-loading-spinner { width: 12px; height: 12px; }

/* Teinte de fond très légère : verte quand la page est complète, rouge quand
   elle est en erreur, neutre tant qu'il reste à faire. */
.aics-spread-mini.is-ok { border-color: rgba(33, 116, 94, .38); background: rgba(33, 116, 94, .07); }
.aics-spread-mini.is-ok .aics-spread-mini__number,
.aics-spread-mini.is-ok .aics-spread-mini__state { color: #1f6b56; }
.aics-spread-mini.is-error { border-color: rgba(202, 62, 50, .45); background: rgba(202, 62, 50, .08); }
.aics-spread-mini.is-error .aics-spread-mini__number,
.aics-spread-mini.is-error .aics-spread-mini__state { color: var(--aics-danger); }
.aics-spread-mini.is-partial,
.aics-spread-mini.is-missing { background: transparent; }
/* La sélection reste prioritaire sur la teinte de statut : on doit toujours
   voir d'abord ce qu'on est en train d'éditer. */
.aics-spread-mini.is-active { border-color: var(--aics-accent); background: var(--aics-accent-soft); }

/* Caler un bloc sur sa zone, depuis le panneau. */

.aics-layer-item.is-empty .aics-layer-item__thumb { background: repeating-linear-gradient(45deg, #f3f2ee 0 4px, #fff 4px 8px); }

/* §39 — curseurs : ce qui se déplace le dit, ce qui se sélectionne aussi. */
.aics-page-canvas { cursor: default; }

/* Page en lecture seule : description de ses blocs, sans commande d'édition. */
.aics-locked-block { border-top: 1px solid var(--aics-line); margin-top: 12px; padding-top: 10px; }
.aics-locked-block h3 { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; font-size: 12px; }
.aics-locked-block .dashicons { width: 15px; height: 15px; font-size: 15px; }
.aics-locked-block p { margin: 0; color: var(--aics-muted); font-size: 11.5px; }

/* Une carte montre une face à la fois : le duo reste lié lors de l'application. */
.aics-cover-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aics-cover-gallery__card { min-width: 0; padding: 7px; border: 1px solid var(--aics-line); border-radius: 10px; background: #fff; color: inherit; overflow: hidden; }
.aics-cover-gallery__card.is-selected { border-color: var(--aics-accent); box-shadow: 0 0 0 2px var(--aics-accent-soft); }
.aics-cover-gallery__visual { position: relative; margin-bottom: 6px; }
.aics-cover-gallery__apply { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 6px; background: #f1efe8; overflow: hidden; cursor: pointer; }
.aics-cover-gallery__apply > img,
.aics-cover-gallery__apply > i { display: grid; width: 100%; aspect-ratio: .72; place-items: center; object-fit: cover; background: #f1efe8; font-size: 9px; font-style: normal; }
.aics-cover-gallery__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aics-cover-gallery__heading h2 { margin: 0; }
.aics-cover-gallery__zoom { position: absolute; top: 7px; right: 7px; display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(28,28,27,.78); color: #fff; opacity: 0; transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease; cursor: zoom-in; }
.aics-cover-gallery__visual:hover .aics-cover-gallery__zoom,
.aics-cover-gallery__zoom:focus-visible { opacity: 1; transform: none; }
.aics-cover-gallery__faces { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 7px; background: #f1f0ec; }
.aics-cover-gallery__faces button { min-width: 0; border: 0; border-radius: 5px; background: transparent; padding: 5px 3px; color: var(--aics-muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.aics-cover-gallery__faces button.is-active { background: #fff; color: var(--aics-ink); box-shadow: 0 1px 3px rgba(22,22,20,.12); }
.aics-cover-gallery__busy { display: block; margin-top: 6px; color: var(--aics-muted); font-size: 10.5px; text-align: center; }
.aics-cover-gallery__name { display: block; margin: 3px 0 5px; font-size: 11px; line-height: 1.3; }
.aics-cover-gallery__description { margin: -2px 0 7px; color: var(--aics-muted); font-size: 10px; line-height: 1.35; }
.sp-modal.aics-cover-zoom-dialog { padding: 22px; }
.aics-cover-zoom-dialog__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 42px 16px 0; }
.aics-cover-zoom-dialog__header small { color: var(--aics-muted); }
.aics-cover-zoom-dialog__header h2 { margin: 3px 0 0; font-size: 20px; }
.aics-cover-zoom-dialog__header .aics-cover-gallery__faces { width: 150px; flex: 0 0 auto; }
.aics-cover-zoom-dialog__body { display: grid; min-height: 440px; place-items: center; border-radius: 10px; background: #e9e7e2; padding: 22px; }
.aics-cover-zoom-dialog__canvas { width: min(68vh, 620px); max-width: 100%; filter: drop-shadow(0 16px 24px rgba(30,28,24,.2)); }
.aics-cover-gallery__live { width: 100%; pointer-events: none; }
.aics-cover-gallery__live .aics-canvas-stage { padding: 0; }
.aics-cover-gallery__live .aics-page-canvas { width: 100%; }
.aics-cover-gallery__live :is(.aics-slot-outline, .aics-slot-add, .aics-safe-area, .aics-bleed-guide) { display: none !important; }
.aics-cover-zoom-dialog__canvas .aics-page-canvas { width: 100%; }
.aics-cover-zoom-dialog__canvas .aics-slot-outline,
.aics-cover-zoom-dialog__canvas .aics-slot-add,
.aics-cover-zoom-dialog__canvas .aics-safe-area,
.aics-cover-zoom-dialog__canvas .aics-bleed-guide { display: none !important; }
.aics-cover-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 4px; }
.aics-cover-elements { display: grid; gap: 14px; }
.aics-cover-element { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--aics-line); }
.aics-cover-element:last-child { padding-bottom: 0; border-bottom: 0; }
.aics-cover-element .aics-field { margin: 0; }
.aics-cover-element__label { font-size: 12px; font-weight: 650; }
.aics-cover-element__position { display: grid; gap: 6px; }
.aics-cover-element__position small { color: var(--aics-muted); }
.aics-cover-element__more { display: inline-flex; align-items: center; gap: 2px; justify-self: end; font-size: 12px; }
.aics-cover-quick-style { display: grid; gap: 8px; }
.aics-cover-quick-style__row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 8px; align-items: stretch; }
.aics-cover-quick-style__size { width: 100%; min-height: 38px; text-align: center; }
.aics-cover-quick-style__bold { min-height: 38px; border: 1px solid var(--aics-line-strong); background: #fff; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.aics-cover-quick-style__bold.is-active { border-color: var(--aics-accent); background: var(--aics-accent-soft); color: var(--aics-accent); }
.aics-case-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; width: fit-content; border: 1px solid var(--aics-line-strong); border-radius: 5px; background: #fff; padding: 5px 10px; color: var(--aics-ink); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.aics-case-toggle:hover:not(:disabled), .aics-case-toggle:focus-visible { border-color: var(--aics-accent); color: var(--aics-accent); }
.aics-case-toggle:disabled { opacity: .5; cursor: not-allowed; }
.aics-case-toggle > span:first-child { font-size: 17px; font-weight: 800; line-height: 1; }
.aics-cover-quick-style__row > .aics-case-toggle,
.aics-text-style-row > .aics-case-toggle { width: 100%; min-height: 42px; padding: 5px; }
.aics-color-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aics-color-swatches > button { width: 26px; height: 26px; padding: 0; border: 1px solid rgba(0, 0, 0, .18); background: var(--swatch); cursor: pointer; }
.aics-color-swatches > button.is-selected { outline: 2px solid var(--aics-accent); outline-offset: 2px; }
.aics-color-swatches__custom { position: relative; display: grid; width: 26px; height: 26px; place-items: center; border: 1px dashed var(--aics-line-strong); background: conic-gradient(#e54, #eb3, #5c6, #39e, #a5e, #e54); cursor: pointer; }
.aics-color-swatches__custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.aics-cover-illustration { display: grid; grid-template-columns: 72px 1fr 16px; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--aics-line-strong); background: #fff; padding: 8px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aics-cover-illustration:hover { border-color: var(--aics-accent); }
.aics-cover-illustration > img, .aics-cover-illustration__empty { width: 72px; height: 72px; object-fit: cover; }
.aics-cover-illustration__empty { display: grid; place-items: center; background: var(--aics-line); }
.aics-cover-illustration__text { display: grid; gap: 3px; }
.aics-cover-illustration__text strong { font-size: 13px; }
.aics-cover-illustration__text small { color: var(--aics-muted); font-size: 11.5px; line-height: 1.35; }
.aics-cover-backgrounds__heading strong { flex: 1; }
.aics-cover-backgrounds__actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: stretch; }
.aics-ai-rewrite { margin-top: 12px; border: 1px solid var(--aics-line); padding: 0 10px; }
.aics-ai-rewrite > summary { display: flex; align-items: center; gap: 6px; padding: 10px 0; cursor: pointer; font-size: 12.5px; font-weight: 700; }
.aics-ai-rewrite > summary small { margin-left: auto; color: var(--aics-muted); font-weight: 500; }
.aics-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
.aics-ai-chip { border: 1px solid var(--aics-line-strong); background: #fff; padding: 6px 10px; color: inherit; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.aics-ai-chip:hover:not(:disabled) { border-color: var(--aics-accent); color: var(--aics-accent); }
.aics-ai-chip:disabled { opacity: .5; cursor: progress; }
.aics-technical-details { margin-top: 8px; }
/* Barre posée sur un bloc : libellé visible au survol, tout de suite (la
   bulle native arrive après une seconde, et pas du tout au clavier). */
.aics-context-toolbar .aics-icon-button { position: relative; }
.aics-context-toolbar .aics-icon-button:is(:hover, :focus-visible)::after {
  content: attr(aria-label); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5;
  transform: translateX(-50%); padding: 5px 8px; background: var(--aics-ink, #2a2320); color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none;
}
.aics-bold-toggle { width: 100%; min-height: 40px; }
/* Fenêtre « Style du livre » */
.aics-book-style-dialog__head { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; margin: 4px 0 12px; }
.aics-book-style-dialog__head .sp-book-style__preview, .aics-book-style-dialog__head .sp-book-style__swatch { display: block; width: 96px; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--aics-line-strong, #c4b49c); }
.aics-book-style-dialog__head .sp-book-style__preview :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: cover; }
.aics-book-style-dialog__head strong { display: block; font-size: 15px; }
.aics-book-style-dialog__head small { display: block; margin-top: 3px; color: var(--aics-muted); font-size: 12px; }
.aics-contrast-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; line-height: 1.4; }
.aics-cover-backgrounds { display: grid; gap: 12px; }
.aics-cover-backgrounds__item { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--aics-border, #d9d7df); }
.aics-cover-backgrounds__heading { display: flex; align-items: center; gap: 10px; }
.aics-cover-backgrounds__heading img { width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--aics-border, #d9d7df); }
.aics-cover-backgrounds__geometry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* --- Aperçu 3D (§36) ---------------------------------------------------------
   Habillage du design système Fablunéo : papier crème, encre, filets de 2 px,
   angles droits, violet réservé à l'action principale et à l'état actif. Les
   barres sont opaques : le verre dépoli gris d'origine ne ressemblait à aucun
   autre écran du site. */
.aics-preview3d {
    --p3d-ink: var(--color-text, #2a2320);
    --p3d-paper: var(--color-bg, #fbf6ee);
    --p3d-line: var(--color-divider, #e4d9c7);
    --p3d-muted: var(--color-neutral-700, #5c4f3f);
    --p3d-accent: var(--color-accent, #5b3fd0);
    --p3d-accent-dark: var(--color-accent-600, #4c34ad);
    --p3d-accent-soft: var(--color-accent-100, #e8e3fb);
    position: fixed;
    inset: 0;
    z-index: var(--aics-z-modal);
    background: radial-gradient(115% 90% at 50% 38%, #fffdf9 0%, var(--p3d-paper) 45%, var(--color-neutral-200, #ede3d3) 100%);
    color: var(--p3d-ink);
    font-family: var(--font-body, Archivo, Arial, sans-serif);
}
:root[data-theme="dark"] .aics-preview3d,
.aics-preview3d.is-dark { background: radial-gradient(120% 120% at 50% 0%, #2d2622 0%, #1d1815 70%); }
.aics-preview3d__host,
.aics-preview3d__stage { position: absolute; inset: 0; }
.aics-preview3d__canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.aics-preview3d [hidden] { display: none !important; }
.aics-preview3d :is(button, .aics-preview3d__modes, .aics-preview3d__status, .aics-preview3d__dock) { border-radius: 0; }
.aics-preview3d button { font: inherit; }
.aics-preview3d button:focus-visible { outline: 2px solid var(--p3d-accent); outline-offset: 2px; }

.aics-preview3d__kicker { display: block; color: var(--p3d-accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* Chargement : une carte, une barre de progression chiffrée. */
.aics-preview3d__boot { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 20px; background: rgba(251, 246, 238, .9); }
.aics-preview3d__boot-card { display: grid; gap: 10px; width: min(420px, 100%); padding: 24px; border: 2px solid var(--p3d-ink); background: var(--p3d-paper); text-align: left; }
.aics-preview3d__boot-title { font-family: var(--font-heading, inherit); font-size: 22px; font-weight: 800; line-height: 1.15; }
.aics-preview3d__boot p { margin: 0; color: var(--p3d-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.aics-preview3d__boot.is-error p { color: var(--color-danger, #b33714); }
.aics-preview3d__progress { height: 8px; border: 2px solid var(--p3d-ink); background: #fff; overflow: hidden; }
.aics-preview3d__progress span { display: block; height: 100%; background: var(--p3d-accent); transition: width .25s ease; }

/* Calque d'interface : ne capte que ses propres contrôles. */
.aics-preview3d__overlay { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.aics-preview3d__overlay :is(button, .aics-preview3d__modes) { pointer-events: auto; }

.aics-preview3d__bar--top {
    pointer-events: auto;
    display: flex; align-items: center; gap: 16px;
    min-height: 64px; padding: 10px 20px;
    border-bottom: 2px solid var(--p3d-ink);
    background: var(--p3d-paper);
}
.aics-preview3d__heading { flex: 1; min-width: 0; }
.aics-preview3d__title { display: block; overflow: hidden; font-family: var(--font-heading, inherit); font-size: 18px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

.aics-preview3d__notice { display: block; margin-top: 2px; color: var(--p3d-muted); font-size: 12px; font-weight: 600; line-height: 1.3; }
/* `a.` et le préfixe du conteneur : sur une page d'histoire, `.sp-site a { color: inherit }`
   (studio-proches.css) est plus spécifique qu'une classe seule, et le libellé
   prenait le brun du texte sur le violet (contraste 2,3:1). Blanc sur violet : 6,9:1. */
.aics-preview3d a.aics-preview3d__cta,
.aics-preview3d a.aics-preview3d__cta:visited { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 2px solid var(--p3d-accent); background: var(--p3d-accent); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; pointer-events: auto; }
.aics-preview3d a.aics-preview3d__cta:hover,
.aics-preview3d a.aics-preview3d__cta:focus-visible { border-color: var(--p3d-accent-dark); background: var(--p3d-accent-dark); color: #fff; }
.aics-preview3d a.aics-preview3d__cta:focus-visible { outline: 2px solid var(--p3d-ink); outline-offset: 2px; }
.aics-preview3d__modes { display: inline-flex; border: 2px solid var(--p3d-ink); background: #fff; }
.aics-preview3d__modes button { min-height: 36px; border: 0; background: transparent; padding: 0 14px; color: var(--p3d-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.aics-preview3d__modes button + button { border-left: 2px solid var(--p3d-ink); }
.aics-preview3d__modes button:hover:not(.is-active) { background: var(--p3d-accent-soft); }
.aics-preview3d__modes button.is-active { background: var(--p3d-ink); color: #fff; }

.aics-preview3d__close { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; border: 2px solid var(--p3d-ink); background: #fff; padding: 0 14px; color: var(--p3d-ink); font-size: 13px; font-weight: 800; cursor: pointer; }
.aics-preview3d__close:hover { background: var(--p3d-ink); color: #fff; }

.aics-preview3d__status {
    pointer-events: none;
    align-self: center;
    margin-top: 12px;
    padding: 8px 14px;
    border: 2px solid var(--p3d-ink);
    background: var(--p3d-paper); color: var(--p3d-ink); font-size: 13px; font-weight: 700;
    opacity: 0; transition: opacity .2s;
}
.aics-preview3d__status.is-visible { opacity: 1; }

/* Légende du mode « Marges d'impression » : couleurs de ProofGuides.js. */
.aics-preview3d__legend { position: absolute; bottom: 24px; left: 20px; display: grid; gap: 6px; margin: 0; padding: 12px 14px; border: 2px solid var(--p3d-ink); background: var(--p3d-paper); list-style: none; font-size: 12px; font-weight: 700; }
.aics-preview3d__legend li { display: flex; align-items: center; gap: 8px; }
.aics-preview3d__legend i { width: 22px; height: 0; border-top: 2px solid; }
.aics-preview3d__legend i.is-trim { border-color: #ff3b30; }
.aics-preview3d__legend i.is-bleed { border-top-style: dashed; border-color: #ff9500; }
.aics-preview3d__legend i.is-safe { border-top-style: dashed; border-color: #34c759; }

/* Dock : une seule barre, centrée, qui ne masque pas le livre. */
.aics-preview3d__dock-area { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px 20px; }
.aics-preview3d__hint { margin: 0; padding: 7px 12px; background: var(--p3d-ink); color: #fff; font-size: 12px; text-align: center; transition: opacity .4s ease, transform .4s ease; }
.aics-preview3d__hint.is-dismissed { opacity: 0; transform: translateY(6px); }
.aics-preview3d__dock {
    pointer-events: auto;
    display: flex; align-items: center; gap: 8px;
    padding: 8px;
    border: 2px solid var(--p3d-ink);
    background: var(--p3d-paper);
    box-shadow: 4px 4px 0 var(--p3d-ink);
}
.aics-preview3d__nav { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-right: 2px solid var(--p3d-line); border-left: 2px solid var(--p3d-line); }
.aics-preview3d__counter { display: grid; min-width: 150px; padding: 0 6px; text-align: center; line-height: 1.2; font-variant-numeric: tabular-nums; }
.aics-preview3d__counter small { color: var(--p3d-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.aics-preview3d__counter strong { font-size: 14px; font-weight: 800; }

.aics-preview3d__icon { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 2px solid transparent; background: transparent; color: var(--p3d-ink); cursor: pointer; }
.aics-preview3d__icon:hover:not(:disabled) { border-color: var(--p3d-ink); background: #fff; }
/* Inactif mais lisible : 4,1:1 sur le fond du dock (1,9:1 avec le neutre 400),
   assez loin de l'encre des boutons actifs pour ne pas s'y confondre. */
.aics-preview3d__icon:disabled { color: #857563; cursor: default; }
/* Libellé et raccourci au survol comme au clavier, sans le délai de l'infobulle native. */
.aics-preview3d__icon[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    padding: 5px 8px; background: var(--p3d-ink); color: #fff;
    font-size: 11px; font-weight: 700; white-space: nowrap;
    opacity: 0; transform: translate(-50%, 4px); transition: opacity .12s, transform .12s;
    pointer-events: none;
}
.aics-preview3d__icon[data-tip]:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }

.aics-preview3d__primary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; border: 2px solid var(--p3d-accent); background: var(--p3d-accent); padding: 0 16px; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
.aics-preview3d__primary:hover { border-color: var(--p3d-accent-dark); background: var(--p3d-accent-dark); }
.aics-preview3d__primary.is-open { border-color: var(--p3d-ink); background: #fff; color: var(--p3d-ink); }
.aics-preview3d__primary.is-open:hover { background: var(--p3d-accent-soft); }

/* Feuilletage 2D de la page publique d'une histoire (blocks/story-preview.js), sans WebGL. */
.aics-preview3d__flat { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 64px 16px 16px; }
.aics-preview3d__flat img { justify-self: center; align-self: center; max-width: 100%; max-height: 100%; border: 2px solid var(--p3d-ink); background: #fff; object-fit: contain; }
.aics-preview3d__flat-bar { display: flex; align-items: center; justify-content: center; gap: 12px; }
.aics-preview3d__flat-counter { min-width: 72px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; }
.aics-preview3d__close--floating { position: absolute; top: 12px; right: 12px; z-index: 4; }
.aics-preview3d__debug {
    position: absolute; left: 12px; bottom: 96px;
    pointer-events: none;
    font: 11px/1.5 ui-monospace, Menlo, monospace;
    background: rgba(0, 0, 0, .6); color: #9f9; padding: 6px 8px;
    white-space: pre;
}
@media (max-width: 720px) {
    .aics-preview3d__bar--top { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
    .aics-preview3d__heading { flex: 1 1 0; }
    /* Le titre gardait quelques pixels à côté des boutons (« Le… ») : il passe
       sur deux lignes au plus et, quand le bouton « Personnaliser » est là (page
       d'une histoire), prend toute la première ligne, les boutons la seconde. */
    .aics-preview3d__title { font-size: 16px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
    .aics-preview3d__bar--top:has(.aics-preview3d__cta:not([hidden])) .aics-preview3d__heading { flex: 1 1 100%; }
    .aics-preview3d__bar--top:has(.aics-preview3d__cta:not([hidden])) a.aics-preview3d__cta { flex: 1 1 auto; justify-content: center; }
    .aics-preview3d__close { min-height: 36px; padding: 0 10px; }
    .aics-preview3d a.aics-preview3d__cta { min-height: 36px; padding: 0 10px; }
    .aics-preview3d__notice { display: none; }
    .aics-preview3d__modes { order: 3; width: 100%; }
    .aics-preview3d__modes button { flex: 1; }
    .aics-preview3d__legend { top: 132px; bottom: auto; left: 12px; }
    .aics-preview3d__dock-area { padding: 0 12px 14px; }
    .aics-preview3d__dock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; box-shadow: 3px 3px 0 var(--p3d-ink); }
    .aics-preview3d__nav { justify-content: space-between; min-width: 0; }
    .aics-preview3d__counter { min-width: 0; }
    .aics-preview3d__dock [data-act="fullscreen"] { grid-column: 3; grid-row: 1; }
    .aics-preview3d__primary { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
}

/* Editor audit: consistent controls and readable progressive disclosure. */
.aics-studio-app {
    --aics-accent: #5b3fd0;
    --aics-accent-soft: #e8e3fb;
}
.aics-cover-color-swatch { width: 44px; height: 44px; border: 1px solid var(--aics-line); }
.aics-cover-geometry summary, .aics-cover-advanced > summary, .aics-generation-details > summary { cursor: pointer; font-size: 12px; font-weight: 650; padding: 10px 0; }
.aics-cover-advanced { border-top: 1px solid var(--aics-line); padding: 0 16px; }
.aics-cover-advanced .aics-inspector-section { padding-left: 0; padding-right: 0; }
/* Replié dans un réglage de bloc : déjà dans le flux de la section, sans
   retrait ni filet propres (déclaré APRÈS la règle de base, qui l'emportait). */
.aics-cover-advanced--inline { margin-top: 6px; border-top: 0; padding: 0; }
.aics-inspector :is(button, select, input, textarea):focus-visible { outline: 2px solid var(--aics-accent); outline-offset: 2px; }
.aics-import-button:focus-within { outline: 2px solid var(--aics-accent); outline-offset: 2px; }
.aics-cover-gallery__apply > img, .aics-cover-gallery__apply > i { aspect-ratio: var(--aics-cover-ratio, 1); object-fit: contain; }
.aics-import-button { position: relative; }
.aics-upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; padding: 0; border: 0; }

/* Image de double-page : encart en tête des réglages de l'image de gauche et à
   la place du choix de mise en page d'une page qui en porte une moitié. */
.aics-spread-note { background: var(--aics-accent-soft); border-left: 3px solid var(--aics-accent); }
.aics-spread-note h3 { margin-top: 0; }
.aics-spread-note .aics-help { margin: 0 0 6px; }
.aics-spread-note .aics-help:last-child { margin-bottom: 0; }
/* La moitié droite d'une image de double-page se surligne avec la gauche : le
   cadre de sélection de l'éditeur ne vit que sur la page active. */
.aics-composition-image-frame.is-spread-mirror { cursor: pointer; }
/* Superposé, comme .is-layer-selected : l'image positionnée dans le cadre se
   peignait par-dessus un simple `outline`. */
.aics-composition-image-frame.is-spread-mirror.is-block-selected::after { content: ''; position: absolute; z-index: var(--aics-z-outline); inset: 0; outline: 2px solid var(--aics-accent); outline-offset: -2px; pointer-events: none; }

/* « Ce bloc ou tout le livre ? » après une retouche de mise en forme d'un texte
   du récit : collée au bas de l'inspecteur pour rester visible pendant qu'on
   continue de régler, sans masquer les réglages. */
.aics-style-scope { position: sticky; bottom: 0; z-index: 2; margin: 12px 15px 15px; padding: 14px; background: var(--aics-surface, #fff); border: 1px solid var(--aics-accent); border-radius: 8px; box-shadow: var(--aics-shadow, 0 6px 18px rgba(0, 0, 0, .12)); }
.aics-style-scope strong { display: block; margin-bottom: 4px; color: var(--aics-ink); }
.aics-style-scope p { margin: 0 0 10px; color: var(--aics-muted); font-size: 13px; line-height: 1.45; }
.aics-style-scope__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.aics-style-scope__actions .aics-button { flex: 1 1 auto; justify-content: center; }

/* Modèles de la dédicace et de la page des héros (SinglePageTemplateGallery). */
.aics-single-template__name { display: block; overflow: hidden; color: var(--aics-ink); font-size: 10.5px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

/* Moment d'une double-page ajoutée (SpreadMomentPanel) : le point de départ
   de la double-page, distingué des réglages de la page. */
.aics-spread-moment { margin-bottom: 12px; border-left: 3px solid var(--aics-line-strong); background: #f7f8f5; padding: 12px 14px 14px; }
.aics-spread-moment .aics-async-button { margin-top: 8px; }
.aics-mention-warning { margin-top: 10px; }
.aics-mention-warning .aics-link-button { margin-left: auto; white-space: nowrap; }

/* Character edits stay in the book editor, with the existing portrait cards. */
.aics-character-dialog .aics-character-editor { min-width: 0; }
.aics-character-dialog .sp-portrait-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: 24px; }
.aics-character-dialog .sp-portrait-card__form { min-width: 0; }
.aics-character-dialog .sp-portrait-card__form textarea { width: 100%; box-sizing: border-box; }
.aics-character-dialog .sp-portrait-card__state { display: block; margin-top: 8px; }
.aics-character-dialog .aics-dialog-actions { margin-top: 24px; }
button.aics-topbar__avatars { border: 0; background: transparent; cursor: pointer; padding: 0; }

.aics-studio-prerequisite button.aics-link-button { margin-left: auto; color: inherit; font-weight: 800; }
@media (max-width: 480px) {
  .aics-character-dialog .sp-portrait-card__head { flex-wrap: wrap; }
  .aics-character-dialog .sp-portrait-card__who { flex-basis: 100%; }
  .aics-character-dialog .sp-portrait-card__form { grid-template-columns: 1fr; }
  .aics-studio-prerequisite { flex-wrap: wrap; }
}

/* Éditeur de dégradé (GradientEditor) : barre à arrêts façon Figma. */
.aics-gradient-editor { display: grid; gap: 12px; }
.aics-gradient-editor__toggle { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.aics-gradient-editor__body { display: grid; gap: 12px; }
.aics-gradient-editor__from { flex-wrap: wrap; }
.aics-gradient-editor__bar-wrap { display: grid; gap: 4px; padding: 0 9px; }
.aics-gradient-editor__bar { position: relative; height: 28px; border: 2px solid var(--aics-border, #d8d1c4); cursor: copy; touch-action: none;
  background-color: #ffffff; background-image: linear-gradient(45deg, #e4e0d8 25%, transparent 25%, transparent 75%, #e4e0d8 75%), linear-gradient(45deg, #e4e0d8 25%, transparent 25%, transparent 75%, #e4e0d8 75%);
  background-size: 12px 12px; background-position: 0 0, 6px 6px; }
.aics-gradient-editor__fill { position: absolute; inset: 0; pointer-events: none; }
.aics-gradient-editor__stop { position: absolute; top: 50%; width: 18px; height: 34px; margin: 0; padding: 0; transform: translate(-50%, -50%); border: 2px solid #ffffff; outline: 2px solid #252525; background: var(--stop-color); cursor: grab; touch-action: none; }
.aics-gradient-editor__stop.is-selected { outline: 3px solid var(--aics-accent, #5b3fd0); z-index: 1; }
.aics-gradient-editor__stop:focus-visible { outline: 3px solid var(--aics-accent, #5b3fd0); outline-offset: 2px; }
.aics-gradient-editor__stop:active { cursor: grabbing; }
.aics-gradient-editor__ends { display: flex; justify-content: space-between; color: #6b6257; font-size: 11px; }
.aics-gradient-editor__stop-fields { display: grid; gap: 10px; margin: 0; padding: 10px 12px; border: 2px solid var(--aics-border, #d8d1c4); }
.aics-gradient-editor__stop-fields legend { padding: 0 4px; font-weight: 700; }
.aics-gradient-editor button:disabled, .aics-gradient-editor.is-off .aics-gradient-editor__body { opacity: .55; }

/* Quatrième : image au-dessus du résumé (BackCoverAppearance). */
/* Lignes à la hauteur des vignettes : sous `max-height`, des lignes `auto`
   se tassaient à 33 px pour des vignettes carrées de 62 px, qui se
   chevauchaient (recette du 2026-11-07, avec 18 images). */
.aics-back-image-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); grid-auto-rows: max-content; gap: 8px; max-height: 200px; overflow-y: auto; padding: 2px; }
.aics-back-image-choice { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 2px solid var(--aics-border, #d8d1c4); overflow: hidden; background: #f3eee6; cursor: pointer; }
.aics-back-image-choice img { width: 100%; height: 100%; object-fit: cover; }
.aics-back-image-choice.is-selected { border-color: var(--aics-accent, #5b3fd0); outline: 2px solid var(--aics-accent, #5b3fd0); outline-offset: 1px; }
.aics-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-weight: 600; }