/* Visionneuse : mise en page plein écran inspirée des visionneuses professionnelles (ruban,
   panneaux latéraux repliables, zone d'affichage centrale). */

.page--viewer {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

.page--viewer .app-main {
    flex: 1;
    min-height: 0;
}

.permit-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
}

.permit-summary__reference {
    font-weight: 700;
}

.permit-summary__address {
    overflow: hidden;
    color: #9fb0c6;
    text-overflow: ellipsis;
}

.viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- Ruban -------------------------------------------------------------------------------- */

.ribbon {
    position: relative;
    z-index: 3;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-small);
}

.ribbon__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 8px;
    border-bottom: 1px solid var(--color-border);
}

.ribbon__group {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ribbon__group--end {
    justify-content: flex-end;
}

.ribbon__tabs {
    display: flex;
    align-self: stretch;
    margin-left: 8px;
}

.ribbon__tab {
    position: relative;
    padding: 0 14px;
    font: inherit;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    background: none;
    border: 0;
}

.ribbon__tab:hover {
    color: var(--color-text);
}

.ribbon__tab[aria-selected="true"] {
    color: var(--color-primary);
}

.ribbon__tab[aria-selected="true"]::after {
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 3px;
    content: "";
    background: var(--color-primary);
    border-radius: 3px 3px 0 0;
}

.ribbon__separator {
    width: 1px;
    height: 22px;
    margin: 0 6px;
    background: var(--color-border);
}

.ribbon__tools {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 8px;
    background: var(--color-surface-muted);
}

.ribbon__panel {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.ribbon__notice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 12px;
    color: var(--color-muted);
}

.tool-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
}

.tool-button svg {
    font-size: 17px;
    color: var(--color-muted);
}

.tool-button--compact {
    padding: 0 8px;
}

.tool-button:hover {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.tool-button[aria-pressed="true"] {
    color: var(--color-primary-strong);
    background: var(--color-primary-soft);
    border-color: #b9d1ee;
}

.tool-button[aria-pressed="true"] svg {
    color: var(--color-primary);
}

.page-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-muted);
}

.page-field__input {
    width: 48px;
    height: 28px;
    font: inherit;
    color: var(--color-text);
    text-align: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
}

.color-field input {
    width: 34px;
    height: 30px;
    padding: 2px;
    cursor: pointer;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
}

.scale-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-muted);
}

.scale-field--check {
    gap: 6px;
    cursor: pointer;
}


/* --- Corps : panneaux et zone d'affichage ------------------------------------------------- */

.viewer__body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.side-panel {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 300px;
    min-height: 0;
    overflow: hidden;
    background: var(--color-surface);
    transition: width 0.2s ease, opacity 0.2s ease;
}

.side-panel--left {
    border-right: 1px solid var(--color-border);
}

.side-panel--right {
    border-left: 1px solid var(--color-border);
}

.side-panel.is-collapsed {
    width: 0;
    opacity: 0;
    border: 0;
}

.side-panel__tabs {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border);
}

.side-panel__tab {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    font: inherit;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
}

.side-panel__tab[aria-selected="true"] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.side-panel__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 14px;
    border-bottom: 1px solid var(--color-border);
}

.side-panel__actions {
    display: flex;
    gap: 2px;
}

.side-panel__header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    font-size: 14px;
}

.side-panel__view {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.side-panel__toolbar {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
}

.side-panel__toolbar .input {
    width: 100%;
}

.side-panel__scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.side-panel__empty {
    padding: 16px;
    margin: 0;
    color: var(--color-muted);
}

/* Documents du dossier */

.side-panel__toolbar:has(.document-groups__toggle) {
    display: flex;
    gap: 4px;
    align-items: center;
}

.side-panel__toolbar:has(.document-groups__toggle) .input {
    flex: 1;
    min-width: 0;
}

.document-groups__toggle .document-groups__expand-icon,
.document-groups__toggle.is-expand .document-groups__collapse-icon {
    display: none;
}

.document-groups__toggle.is-expand .document-groups__expand-icon {
    display: block;
}

.document-group__title {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    background: var(--color-surface);
}

.document-group__toggle {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
    padding: 8px 14px 6px 10px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: none;
    border: 0;
}

.document-group__toggle:hover {
    color: var(--color-text);
}

.document-group__toggle:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.document-group__chevron {
    flex-shrink: 0;
    font-size: 13px;
    opacity: 0.6;
    transition: transform 0.18s ease;
}

.document-group__label {
    flex: 1;
    min-width: 0;
}

.document-group__count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    opacity: 0;
    transition: opacity 0.18s ease;
}

/* Repliée : on rappelle le nombre de documents cachés */
.document-group.is-collapsed .document-group__chevron {
    transform: rotate(-90deg);
}

.document-group.is-collapsed .document-group__count,
.document-group__toggle:hover .document-group__count {
    opacity: 1;
}

.document-group__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.2s ease, visibility 0.2s;
}

.document-group__body > .document-list {
    min-height: 0;
    overflow: hidden;
}

/* visibility retire aussi les documents repliés de l'ordre de tabulation */
.document-group.is-collapsed .document-group__body {
    grid-template-rows: 0fr;
    visibility: hidden;
}

.is-filtering .document-group.is-collapsed .document-group__body {
    grid-template-rows: 1fr;
    visibility: visible;
}

.is-filtering .document-group.is-collapsed .document-group__chevron {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .document-group__body,
    .document-group__chevron {
        transition: none;
    }
}

.document-list {
    padding: 0 6px 8px;
    margin: 0;
    list-style: none;
}

.document-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--radius);
}

.document-item:hover {
    background: var(--color-surface-muted);
}

.document-item[aria-current="true"] {
    background: var(--color-primary-soft);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.document-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.document-item__name {
    overflow-wrap: anywhere;
    font-weight: 600;
}

.document-item__meta {
    font-size: 12px;
    color: var(--color-muted);
}

.file-badge {
    flex-shrink: 0;
    width: 36px;
    padding: 2px 0;
    margin-top: 1px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    background: #6b7a8c;
    border-radius: var(--radius-small);
}

.file-badge--pdf { background: #c0392b; }
.file-badge--doc, .file-badge--docx, .file-badge--odt, .file-badge--rtf { background: #2b5797; }
.file-badge--xls, .file-badge--xlsx, .file-badge--ods { background: #1e7145; }
.file-badge--jpg, .file-badge--jpeg, .file-badge--png, .file-badge--tif, .file-badge--tiff, .file-badge--gif, .file-badge--bmp, .file-badge--webp { background: #8e44ad; }
.file-badge--xml { background: #b9770e; }

/* Onglets réduits à une icône (signets, calques) */

.side-panel__tab--icon {
    flex: 0 0 44px;
}

.side-panel__help {
    padding: 12px 14px 0;
    margin: 0;
    font-size: 12px;
    color: var(--color-muted);
}

/* Signets */

.outline {
    padding: 0;
    margin: 0;
    list-style: none;
}

.outline[role="tree"] {
    padding: 8px 6px;
}

.outline__row {
    display: flex;
    align-items: flex-start;
    padding-left: calc(var(--outline-depth) * 14px);
}

.outline__row.is-leaf {
    padding-left: calc(var(--outline-depth) * 14px + 22px);
}

.outline__toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 26px;
    padding: 0;
    color: var(--color-muted);
    cursor: pointer;
    background: none;
    border: 0;
}

.outline__item[aria-expanded="false"] > .outline__row .outline__toggle svg {
    transform: rotate(-90deg);
}

.outline__link {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    font: inherit;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text);
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--radius-small);
}

.outline__link:hover {
    background: var(--color-primary-soft);
}

.outline__link.is-bold {
    font-weight: 700;
}

.outline__link.is-italic {
    font-style: italic;
}

/* Calques */

.layers {
    padding: 0 0 0 14px;
    margin: 0;
    list-style: none;
}

[data-viewer-target="layers"] > .layers {
    padding: 8px 14px 14px;
}

.layers__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    cursor: pointer;
}

.layers__group {
    display: block;
    padding: 6px 0 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted);
}

/* Vignettes */

.thumbnails {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
}

.thumbnail-item {
    position: relative;
}

/* Rotation de la page seule, au survol ou au clavier */
.thumbnail__actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 2px;
    padding: 2px;
    background: rgb(255 255 255 / 92%);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-small);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.thumbnail-item:is(:hover, :focus-within) .thumbnail__actions {
    opacity: 1;
}

.thumbnail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    font: inherit;
    cursor: pointer;
    background: none;
    border: 0;
}

.thumbnail__canvas {
    display: block;
    width: 132px;
    aspect-ratio: var(--thumbnail-ratio, 1 / 1.414);
    overflow: hidden;
    background: #fff;
    border: 2px solid transparent;
    border-radius: var(--radius-small);
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-small);
}

.thumbnail__canvas canvas {
    display: block;
}

.thumbnail.is-current .thumbnail__canvas {
    border-color: var(--color-primary);
}

.thumbnail__number {
    font-size: 12px;
    color: var(--color-muted);
}

.thumbnail.is-current .thumbnail__number {
    font-weight: 700;
    color: var(--color-primary);
}

/* Zone d'affichage */

.viewer__stage {
    position: relative;
    flex: 1;
    min-width: 0;
    background: #e3e7ed;
}

.document-title {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    background: rgb(227 231 237 / 92%);
    backdrop-filter: blur(4px);
}

.viewer__container {
    position: absolute;
    inset: 32px 0 0;
    /* Contexte d'empilement propre : les calques des pages restent sous la recherche et les messages */
    z-index: 0;
    overflow: auto;
}

.viewer__container:focus {
    outline: none;
}

.viewer__container.is-panning {
    cursor: grabbing;
}

.pdfViewer {
    --page-margin: 14px auto;
    --page-border: none;
    padding-bottom: 24px;
}

.pdfViewer .page {
    box-shadow: 0 1px 3px rgb(16 24 40 / 18%), 0 8px 24px rgb(16 24 40 / 10%);
}

/* Outils de dessin et main : pas de sélection de texte (le surlignage, lui, s'appuie dessus) */
.pdfViewer:not([data-tool="select"], [data-tool="highlight"]) .textLayer {
    pointer-events: none;
    user-select: none;
}

.pdfViewer[data-tool="pan"] .page {
    cursor: grab;
}

/* Surligner : curseur texte sur le texte, croix ailleurs (zone libre) */
.pdfViewer[data-tool="highlight"] .page {
    cursor: crosshair;
}

.pdfViewer[data-tool="highlight"] .textLayer :is(span, br) {
    cursor: text;
}

.viewer__placeholder {
    position: absolute;
    inset: 32px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px;
    text-align: center;
    background: #e3e7ed;
}

.viewer__placeholder h2 {
    margin: 8px 0 0;
    font-size: 18px;
}

.viewer__placeholder p {
    max-width: 420px;
    margin: 0 0 12px;
    color: var(--color-muted);
}

.viewer__placeholder-icon {
    font-size: 44px;
    color: var(--color-border-strong);
}

.viewer__loading {
    position: absolute;
    top: 48px;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--color-surface);
    border-radius: 999px;
    box-shadow: var(--shadow);
    transform: translateX(-50%);
}

.search-bar {
    position: absolute;
    top: 40px;
    right: 16px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 12px;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}

.search-bar__input {
    width: 220px;
    height: 30px;
    font: inherit;
    color: var(--color-text);
    border: 0;
    outline: none;
}

.search-bar__status {
    min-width: 56px;
    font-size: 12px;
    text-align: right;
}

.hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(640px, calc(100% - 32px));
    padding: 8px 14px;
    font-size: 13px;
    color: #fff;
    background: rgb(19 33 58 / 92%);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
    transform: translateX(-50%);
}

.hint[data-kind="error"] {
    background: var(--color-danger);
}

.hint__action {
    padding: 2px 8px;
    font: inherit;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: rgb(255 255 255 / 16%);
    border: 0;
    border-radius: var(--radius-small);
}

/* --- Liste des annotations ---------------------------------------------------------------- */

.annotation-list {
    padding: 6px;
    margin: 0;
    list-style: none;
}

.annotation-item {
    display: flex;
    align-items: flex-start;
    border-radius: var(--radius);
}

.annotation-item:hover {
    background: var(--color-surface-muted);
}

.annotation-item.is-selected {
    background: var(--color-primary-soft);
}

.annotation-item__main {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 8px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
}

.annotation-item__icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
    color: var(--annotation-color);
}

.annotation-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.annotation-item__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted);
}

.annotation-item__detail {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.annotation-item__author {
    font-size: 12px;
    color: var(--color-muted);
}

.annotation-item__actions {
    display: flex;
    padding: 6px 4px 0 0;
}

/* --- Couche d'annotations (SVG au-dessus des pages) --------------------------------------- */

.annotation-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.annotation-overlay.is-hidden {
    display: none;
}

.annotation-overlay.is-drawing {
    pointer-events: all;
    cursor: crosshair;
    touch-action: none;
}

.annotation-overlay .annotation {
    cursor: pointer;
    pointer-events: visiblePainted;
}

.annotation-overlay.is-drawing .annotation {
    pointer-events: none;
}

.annotation-overlay .annotation.is-movable {
    cursor: move;
    touch-action: none;
}

.annotation.is-moving {
    opacity: 0.85;
    cursor: grabbing;
}

.annotation :is(line, polyline, polygon, .shape) {
    fill: none;
    stroke: var(--annotation-color);
    stroke-width: var(--stroke-width, 2px);
    stroke-dasharray: var(--stroke-dash, none);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tirets et pointillés nets : les bouts arrondis les feraient se rejoindre */
.annotation.is-dashed :is(line, polyline, polygon, .shape) {
    stroke-linecap: butt;
}

.annotation.annotation--ink polyline {
    stroke-width: var(--stroke-width, 2.5px);
}

.annotation.has-fill .shape {
    fill: color-mix(in srgb, var(--annotation-color) 25%, transparent);
}

.annotation .marquee {
    fill: rgb(11 92 173 / 8%);
    stroke: var(--color-primary);
    stroke-width: 1.5px;
    stroke-dasharray: 5 4;
}

.annotation .hit-area:is(line, polyline, path, rect, ellipse) {
    fill: none;
    stroke: transparent;
    stroke-width: 12px;
    stroke-dasharray: none;
}

.annotation .arrowhead {
    fill: var(--annotation-color);
    stroke-width: 1px;
    stroke-dasharray: none;
}

/* Texte libre et légendes : HTML dans un foreignObject, pour le retour à la ligne automatique */
.annotation-overlay foreignObject {
    overflow: visible;
    pointer-events: none;
}

.text-box-wrapper {
    font-family: var(--font-sans);
    line-height: 1.3;
}

.text-box-wrapper.is-end {
    text-align: right;
}

.text-box {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0.15em 0.35em;
    color: var(--annotation-color);
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: rgb(255 255 255 / 85%);
    border-radius: 2px;
    pointer-events: auto;
}

.annotation--callout .text-box {
    border: 1px solid var(--annotation-color);
}

.annotation-overlay.is-drawing .text-box,
.pdfViewer[data-tool="highlight"] .annotation-overlay .annotation {
    pointer-events: none;
}

.annotation.is-editing foreignObject {
    visibility: hidden;
}

.text-editor {
    display: block;
    box-sizing: border-box;
    padding: 0.15em 0.35em;
    font: inherit;
    color: var(--annotation-color);
    resize: none;
    overflow: hidden;
    background: rgb(255 255 255 / 95%);
    border: 1px dashed var(--annotation-color);
    border-radius: 2px;
    outline: none;
    pointer-events: auto;
}

.annotation--area polygon {
    fill: color-mix(in srgb, var(--annotation-color) 16%, transparent);
}

.annotation--highlight rect {
    fill: var(--annotation-color);
    fill-opacity: 0.3;
    mix-blend-mode: multiply;
}

.annotation .pin {
    fill: var(--annotation-color);
    stroke: #fff;
    stroke-width: 1.5;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 30%));
}

.annotation .pin-index {
    font: 700 10px var(--font-sans);
    fill: #fff;
    pointer-events: none;
}

.annotation .label {
    font: 600 12px var(--font-sans);
    fill: var(--color-text);
}

.annotation .label-bg {
    fill: rgb(255 255 255 / 94%);
    stroke: var(--annotation-color);
    stroke-width: 1;
}

.annotation .vertex {
    fill: #fff;
    stroke: var(--annotation-color);
    stroke-width: 1.5;
}

.annotation .count-marker circle {
    fill: var(--annotation-color);
    stroke: #fff;
    stroke-width: 1.5;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 30%));
}

.annotation .count-marker text {
    font: 700 10px var(--font-sans);
    fill: #fff;
    pointer-events: none;
}

.annotation .count-marker.is-selected-point circle {
    stroke: var(--color-focus);
    stroke-width: 3;
}

/* Réticule du magnétisme : carré sur un sommet, losange sur un milieu ou une intersection, cercle sur une arête */
.snap-marker {
    fill: none;
    stroke: #2f9e44;
    stroke-width: 2;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
}

.snap-marker--midpoint,
.snap-marker--intersection {
    transform: rotate(45deg);
}

.snap-marker--edge {
    rx: 5px;
}

.annotation.is-selected {
    filter: drop-shadow(0 0 2px var(--color-focus)) drop-shadow(0 0 1px var(--color-focus));
}

.annotation.is-draft {
    opacity: 0.85;
}

/* --- Boîtes de dialogue ------------------------------------------------------------------- */

.dialog {
    width: min(440px, calc(100% - 32px));
    padding: 0;
    /* La feuille de pdf.js impose une police aux <dialog> : on reprend celle de la page */
    font: inherit;
    color: var(--color-text);
    border: 0;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large);
}

.dialog .icon-button {
    color: var(--color-muted);
}

.dialog .icon-button:hover {
    color: var(--color-text);
    background: var(--color-primary-soft);
}

.dialog::backdrop {
    background: rgb(19 33 58 / 45%);
}

.dialog__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.dialog__title {
    margin: 0;
    font-size: 17px;
}

.dialog__form p {
    margin: 0;
    color: var(--color-muted);
}

.dialog__textarea {
    width: 100%;
}

.dialog__help {
    font-size: 12px;
}

.dialog__fieldset {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0;
    border: 0;
}

.dialog__fieldset legend {
    padding: 0;
    margin-bottom: 4px;
    font-weight: 600;
}

.choice {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.input--page {
    width: 72px;
}

.dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 600;
}

/* --- Écrans étroits ----------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .tool-button__label {
        display: none;
    }

    .side-panel {
        width: 260px;
    }
}

@media (max-width: 760px) {
    .brand__product,
    .user-chip__name,
    .permit-summary__address {
        display: none;
    }

    .ribbon__bar {
        grid-template-columns: auto 1fr auto;
        overflow-x: auto;
    }

    .ribbon__tabs {
        margin-left: 0;
    }

    .ribbon__tab {
        padding: 0 8px;
    }

    /* Les panneaux passent au-dessus du document */
    .side-panel {
        position: absolute;
        top: calc(var(--header-height) + 93px);
        bottom: 0;
        z-index: 5;
        width: min(300px, 85vw);
        box-shadow: var(--shadow-large);
    }

    .side-panel--left {
        left: 0;
    }

    .side-panel--right {
        right: 0;
    }
}

/* --- Comparaison de plans ------------------------------------------------------------------ */

.compare {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-muted);
}

.compare[hidden] {
    display: none;
}

.compare__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.compare__modes {
    display: flex;
    gap: 4px;
}

.compare__page,
.compare__balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-muted);
}

.compare__balance input {
    width: 120px;
}

.compare__spacer {
    flex: 1;
}

/* A en rouge, B en vert : les couleurs de la superposition */
.compare__swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
}

.compare__swatch--a {
    background: #e03131;
}

.compare__swatch--b {
    background: #2f9e44;
}

.compare [data-compare="lock"][aria-pressed="false"] .compare__locked,
.compare [data-compare="lock"][aria-pressed="true"] .compare__unlocked {
    display: none;
}

.compare__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 6px 12px;
    margin: 0;
    font-size: 12px;
    color: var(--color-muted);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.compare__key {
    display: inline-block;
    width: 14px;
    height: 10px;
    margin-right: -8px;
    vertical-align: middle;
    border-radius: 2px;
}

.compare__key--removed { background: #f00; }
.compare__key--added { background: #0f0; }
.compare__key--same { background: #bfbfbf; }

.compare__panes {
    display: flex;
    flex: 1;
    gap: 1px;
    min-height: 0;
    background: var(--color-border);
}

.compare__pane {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: auto;
    cursor: grab;
    background: var(--color-surface-muted);
    touch-action: none;
}

.compare__pane.is-panning {
    cursor: grabbing;
}

.compare__name {
    position: sticky;
    top: 8px;
    left: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 16px);
    padding: 4px 8px 4px 4px;
    margin: 8px 0 0 8px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgb(255 255 255 / 92%);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-small);
}

/* En superposition, une seule vue : le nom désigne les deux documents dans la barre */
.compare[data-mode="overlay"] .compare__name {
    display: none;
}

.compare__sheet {
    width: max-content;
    padding: 16px;
}

.compare__sheet canvas {
    display: block;
    background: #fff;
    box-shadow: var(--shadow-small);
}

.compare__status {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 10px 16px;
    font-size: 13px;
    color: #fff;
    background: rgb(19 33 58 / 85%);
    border-radius: var(--radius);
    transform: translate(-50%, -50%);
}

/* --- Impression : seules les pages rendues pour l'impression sortent ---------------------- */

.print-pages {
    display: none;
}

@media print {
    .is-printing body > :not(.print-pages) {
        display: none !important;
    }

    .is-printing .print-pages {
        display: block;
    }

    .print-pages img {
        display: block;
        width: 100vw;
        height: 100vh;
        object-fit: contain;
        break-after: page;
    }
}