/* ---------------------------------------------------------------- themes
   <html data-color="amethyste|azurite|malachite" data-mode="auto|light|dark">.
   Each mineral gives its brand tints; the mode maps them onto the tokens.
   paper / ink are the light and dark backgrounds of the banners. */
:root, [data-color=azurite]   { --paper: #f2f5fa; --ink: #141e33; --accent-l: #2a5bb0; --accent-d: #9dbdeb; }
[data-color=malachite]        { --paper: #f1f6f3; --ink: #12261f; --accent-l: #1f7a55; --accent-d: #5bb28a; }
[data-color=amethyste]        { --paper: #f4f2f7; --ink: #1e1b2e; --accent-l: #5b3e96; --accent-d: #b39ce0; }

:root {
    --bg: var(--paper);
    --surface: #ffffff;
    --surface-2: color-mix(in srgb, var(--paper), var(--ink) 6%);
    --text: var(--ink);
    --muted: color-mix(in srgb, var(--ink) 65%, var(--paper));
    --border: color-mix(in srgb, var(--paper), var(--ink) 14%);
    --accent: var(--accent-l);
    --accent-ink: #ffffff;
    --accent-soft: color-mix(in srgb, var(--accent-l) 13%, #ffffff);
    --danger: #b3261e;
    --danger-soft: #fdecea;
    --pub: #1e6b3a;
    --pub-soft: #dff1e5;
    --priv: var(--muted);
    --priv-soft: var(--surface-2);
    --radius: 10px;
    --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 4px 16px rgb(0 0 0 / .06);
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    color-scheme: light;
}
/* Dark tokens: same block for an explicit choice and for "auto" on a dark system. */
:root[data-mode=dark] {
    --bg: var(--ink);
    --surface: color-mix(in srgb, var(--ink), #ffffff 6%);
    --surface-2: color-mix(in srgb, var(--ink), #ffffff 11%);
    --text: var(--paper);
    --muted: color-mix(in srgb, var(--paper) 65%, var(--ink));
    --border: color-mix(in srgb, var(--ink), #ffffff 18%);
    --accent: var(--accent-d);
    --accent-ink: var(--ink);
    --accent-soft: color-mix(in srgb, var(--accent-d) 20%, var(--ink));
    --danger: #f2b8b5;
    --danger-soft: color-mix(in srgb, #f2b8b5 16%, var(--ink));
    --pub: #8fd5a6;
    --pub-soft: color-mix(in srgb, #8fd5a6 16%, var(--ink));
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .3);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root[data-mode=auto] {
        --bg: var(--ink);
        --surface: color-mix(in srgb, var(--ink), #ffffff 6%);
        --surface-2: color-mix(in srgb, var(--ink), #ffffff 11%);
        --text: var(--paper);
        --muted: color-mix(in srgb, var(--paper) 65%, var(--ink));
        --border: color-mix(in srgb, var(--ink), #ffffff 18%);
        --accent: var(--accent-d);
        --accent-ink: var(--ink);
        --accent-soft: color-mix(in srgb, var(--accent-d) 20%, var(--ink));
        --danger: #f2b8b5;
        --danger-soft: color-mix(in srgb, #f2b8b5 16%, var(--ink));
        --pub: #8fd5a6;
        --pub-soft: color-mix(in srgb, #8fd5a6 16%, var(--ink));
        --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .3);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; margin-top: 1.4em; }
small, .muted { color: var(--muted); }
code, .mono { font-family: var(--mono); }
[hidden] { display: none !important; }

button, input, select { font: inherit; color: inherit; }
button {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: .4rem .8rem; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.danger { color: var(--danger); }
button.danger:hover { border-color: var(--danger); }
input:not([type=checkbox]):not([type=radio]), select {
    width: 100%; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
input:focus-visible, select:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px;
}
label { display: flex; flex-direction: column; gap: .25rem; font-weight: 500; }
label small { font-weight: 400; }
label.inline { flex-direction: row; align-items: center; gap: .4rem; font-weight: 400; }
.stack { display: flex; flex-direction: column; gap: .8rem; }
.alert { color: var(--danger); background: var(--danger-soft); border-radius: 8px; padding: .5rem .75rem; margin: .5rem 0; }

/* ---------------------------------------------------------------- simple pages */
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.narrow { width: min(100%, 24rem); }
.app-icon { display: block; margin: 0 auto 1rem; width: 112px; height: 112px; }
.form-switch { margin: 1.2rem 0 0; text-align: center; font-size: .92rem; color: var(--muted); }
/* Honeypot field: off-screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- app layout */
.topbar {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1000;
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
    padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.brand .muted { font-weight: 400; font-size: .95rem; }
.logo { width: 1.5rem; height: 1.5rem; vertical-align: -.35rem; margin-right: .2rem; }

/* Banner of the home page: full on arrival, then cropped for good to its central
   band (logo + tagline) by the first scroll. The image keeps its size, only the box
   shrinks; on wide screens the page background (same tint) extends its sides. */
.hero {
    --w: min(100vw, 70vh * 16 / 9);
    position: relative; overflow: hidden; overflow-anchor: none;
    height: calc(var(--w) * 9 / 16); background: var(--bg);
    transition: height .55s cubic-bezier(.2, .7, .2, 1);
}
.hero img { position: absolute; top: 50%; left: 50%; width: var(--w); height: auto; transform: translate(-50%, -50%); display: block; }
.hero.collapsed { height: calc(var(--w) * .14); }
.hero.instant { transition: none; }
@media (prefers-reduced-motion: reduce) { .hero { transition: none; } }
.views { display: flex; background: var(--surface-2); border-radius: 9px; padding: 3px; }
.views button { border: 0; background: transparent; padding: .3rem .9rem; border-radius: 7px; }
.views button.active { background: var(--surface); box-shadow: var(--shadow); font-weight: 600; }
.actions { margin-left: auto; display: flex; gap: .6rem; align-items: center; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 8px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ▾"; color: var(--muted); }
.menu-body {
    position: absolute; right: 0; top: calc(100% + 4px); min-width: 13rem; z-index: 1100;
    display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: .3rem;
}
.menu-body button, .menu-body a { border: 0; text-align: left; padding: .5rem .7rem; border-radius: 6px; text-decoration: none; color: var(--text); width: 100%; background: none; }
.menu-body button:hover, .menu-body a:hover { background: var(--surface-2); }

/* Search & filters, in the top bar between the view switch and the actions */
.toolbar { flex: 1 1 22rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; min-width: 0; }
.toolbar #search { flex: 1 1 14rem; max-width: 32rem; }
.toolbar label.inline { white-space: nowrap; }
.tag-op { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tag-op button { border: 0; border-radius: 0; padding: .3rem .7rem; font-size: .85rem; font-weight: 600; }
.tag-op button.active { background: var(--accent); color: var(--accent-ink); }
#count { margin-left: auto; font-size: .9rem; }
#view { max-width: 80rem; margin: 0 auto; padding: 1rem 1rem 2rem; }
.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }

/* chips (tags) */
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
    font-size: .8rem; padding: .1rem .55rem; border-radius: 999px;
    background: var(--accent-soft); border: 1px solid transparent; color: var(--accent); line-height: 1.5;
}
.chip.active { background: var(--accent); color: var(--accent-ink); }
.chip.removable { font-weight: 600; }
.suggest { margin-top: -.4rem; }
.suggest .chip { background: var(--surface-2); color: var(--text); }

.badge {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; line-height: 1.4; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap;
}
.row .badge { justify-self: center; }   /* not stretched across its grid column */
.badge.pub { background: var(--pub-soft); color: var(--pub); }
.badge.priv { background: var(--priv-soft); color: var(--priv); }
.ref { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.ref.big { font-size: 1.3rem; }

/* ---------------------------------------------------------------- list view */
.list { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.row {
    display: grid; grid-template-columns: 44px 3.5rem minmax(8rem, 1.2fr) minmax(6rem, 1fr) minmax(6rem, 1.2fr) 5.5rem 4rem;
    gap: .8rem; align-items: center; padding: .45rem .8rem; border-bottom: 1px solid var(--border); cursor: pointer;
}
.row:hover, .row.open { background: var(--surface-2); }
.row .thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.row .name { font-weight: 600; }
.row .loc { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .price { text-align: right; font-variant-numeric: tabular-nums; }
.thumb.placeholder, .cover.placeholder {
    display: grid; place-items: center; background: var(--surface-2); color: var(--border); font-size: 1.2rem;
}
.inline-fiche { padding: 1rem 1.2rem 1.4rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface), var(--bg)); }

/* ---------------------------------------------------------------- gallery view */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .9rem; }
.card-item {
    display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left;
    background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-item:hover { outline: 2px solid var(--accent); }
.card-item .cover { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.card-item .placeholder { font-size: 2.5rem; }
.card-item .caption { padding: .5rem .7rem; font-size: .9rem; }

/* ---------------------------------------------------------------- map view */
.map-wrap { position: relative; }
.map-wrap:fullscreen, .map-wrap.pseudo-fs { background: var(--bg); }
.map-wrap.pseudo-fs { position: fixed; inset: 0; z-index: 7000; }
.map-wrap:fullscreen .main-map, .map-wrap.pseudo-fs .main-map { height: 100%; min-height: 0; border-radius: 0; box-shadow: none; }
.main-map { height: calc(100vh - 7.5rem); min-height: 22rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.map-note {
    position: absolute; z-index: 500; top: .7rem; left: 50%; transform: translateX(-50%); margin: 0;
    background: var(--surface); padding: .3rem .8rem; border-radius: 8px; box-shadow: var(--shadow);
}
/* Marker hover card */
.leaflet-tooltip.map-tip { padding: .4rem; border-radius: 8px; border: 0; box-shadow: 0 1px 5px rgb(0 0 0 / .3); white-space: normal; color: var(--text); background: var(--surface); }
.map-tip.leaflet-tooltip-right::before { border-right-color: var(--surface); }
.map-tip.leaflet-tooltip-left::before { border-left-color: var(--surface); }
.map-tip.leaflet-tooltip-top::before { border-top-color: var(--surface); }
.map-tip.leaflet-tooltip-bottom::before { border-bottom-color: var(--surface); }
.tip { display: flex; gap: .7rem; align-items: flex-start; width: 21rem; }
.tip-cover { flex: none; width: 128px; height: 128px; object-fit: cover; border-radius: 6px; }
.tip-cover.placeholder { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 2.5rem; }
.tip-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; font-size: .85rem; line-height: 1.3; }
.tip-body strong { font-size: .95rem; }
.tip-body .ref { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.tip-body .chips { margin-top: .15rem; gap: .2rem; }
.tip-body .chip { font-size: .72rem; padding: 0 .45rem; }
.map-fit { position: absolute; z-index: 500; bottom: 1.6rem; left: .7rem; box-shadow: var(--shadow); }
/* Leaflet controls keep their own layout (our form label/input rules must not apply) */
.leaflet-container label { display: block; font-weight: 400; }
.leaflet-container input { width: auto; margin: 0 .35em 0 0; vertical-align: middle; }
.leaflet-control-layers-list { line-height: 1.6; }
/* The expanded layer switcher must cover the zoom buttons placed under it. */
.leaflet-control-layers { z-index: 1000; }
/* Leaflet controls are white by default: follow the theme instead. */
.leaflet-bar a, .leaflet-control-layers, .leaflet-control-layers-expanded { background: var(--surface); color: var(--text); }
.leaflet-bar a { border-bottom-color: var(--border); }
.leaflet-bar a:hover { background: var(--surface-2); }
.leaflet-bar a.leaflet-disabled { background: var(--surface-2); color: var(--muted); }
/* Rich text editor (Quill) in the theme colours */
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--border); }
.ql-snow .ql-stroke { stroke: var(--text); }
.ql-snow .ql-fill { fill: var(--text); }
.ql-snow .ql-picker { color: var(--text); }
.ql-snow .ql-picker-options { background: var(--surface); }
.ql-editor.ql-blank::before { color: var(--muted); }
.geo-search { position: relative; z-index: 1000; background: var(--surface); width: 10rem; }
.leaflet-container .geo-search input { width: 100%; margin: 0; border: 0; border-radius: 4px; padding: .4rem .55rem; font-size: .85rem; }
/* The results list is wider than the field: place names are long. */
.geo-results {
    position: absolute; top: calc(100% + 4px); left: -2px; width: min(22rem, calc(100vw - 4rem));
    list-style: none; margin: 0; padding: .2rem; background: var(--surface); border-radius: 4px;
    box-shadow: 0 1px 5px rgb(0 0 0 / .4); max-height: 16rem; overflow-y: auto; font-size: .85rem;
}
.geo-results li { padding: .3rem .4rem; }
.geo-results li:has(button) { padding: 0; }
.geo-results button { width: 100%; text-align: left; border: 0; border-radius: 4px; padding: .35rem .4rem; background: none; line-height: 1.3; }
.geo-results button:hover { background: var(--accent-soft); }

/* ---------------------------------------------------------------- modal & fiche */
dialog#modal {
    width: min(100% - 2rem, 40rem); max-height: calc(100vh - 2rem); padding: 1.5rem;
    border: 0; border-radius: 14px; box-shadow: 0 10px 40px rgb(0 0 0 / .25); background: var(--surface); color: var(--text);
}
dialog#modal.wide { width: min(100% - 2rem, 62rem); }
dialog#modal::backdrop { background: rgb(20 18 15 / .45); }
.modal-tools {
    position: sticky; top: 0; float: right; z-index: 2000; margin: -.6rem -.6rem 0 .6rem;
    display: flex; gap: .35rem;
}
.icon-btn {
    display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0;
    border-radius: 50%; color: var(--muted); background: var(--surface);
}
.icon-btn:hover { color: var(--accent); }
.icon-btn svg, .lb-close svg { display: block; }
.head-tools { margin-left: auto; }

.fiche-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; margin-bottom: .6rem; }
.fiche-head h2 { margin: 0; }
.fiche > .chips { margin-bottom: 1rem; }
.fiche-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin-bottom: 1rem; }
.fiche-grid.has-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.details { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }
.minimap { height: 100%; min-height: 24rem; border-radius: 8px; }
.map-col { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.map-col .minimap { flex: 1; }
.map-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
/* Fiche map in full screen (Fullscreen API, or fixed overlay as a fallback) */
.map-col:fullscreen, .map-col.pseudo-fs { background: var(--bg); padding: 1rem; }
.map-col.pseudo-fs { position: fixed; inset: 0; z-index: 7000; }
.map-col:fullscreen .minimap, .map-col.pseudo-fs .minimap { min-height: 0; }
.map-fs-btn { display: flex !important; align-items: center; justify-content: center; }
.map-fs-btn.busy { color: var(--accent); animation: locate-pulse 1s ease-in-out infinite; }
@keyframes locate-pulse { 50% { opacity: .35; } }
/* Device position: dot + accuracy circle, in the theme colour */
.leaflet-interactive.locate-dot, path.locate-dot { fill: var(--accent); fill-opacity: 1; stroke: #fff; stroke-width: 3; }
path.locate-area { fill: var(--accent); fill-opacity: .12; stroke: var(--accent); stroke-opacity: .4; stroke-width: 1; }
.photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; align-content: start; }
.photo-btn { padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.photo-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-btn:hover { outline: 2px solid var(--accent); }
.fiche-actions { display: flex; gap: .6rem; margin-top: 1rem; }

/* rich text (stored Quill HTML) */
.rich { border-top: 1px solid var(--border); padding-top: .8rem; overflow-wrap: anywhere; }
.rich p { margin: 0 0 .5em; }
.rich ol { padding-left: 1.5em; }
.rich li[data-list=bullet] { list-style-type: disc; }
.rich li[data-list=ordered] { list-style-type: decimal; }
.rich .ql-align-center { text-align: center; }
.rich .ql-align-right { text-align: right; }
.rich .ql-align-justify { text-align: justify; }

/* ---------------------------------------------------------------- editor */
.editor { display: flex; flex-direction: column; gap: .9rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: end; }
.ref-name { display: grid; grid-template-columns: 7.5rem 1fr; gap: .9rem; align-items: start; }
.ref-name input[name=reference] { text-align: center; letter-spacing: .08em; font-weight: 700; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: .6rem; align-items: end; }
.coords { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.coords label { flex: 1 1 9rem; }
.picker { height: 20rem; border-radius: 8px; border: 1px solid var(--border); cursor: crosshair; }
.label-only { margin-bottom: -.5rem; }
.comment-editor { min-height: 9rem; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--border); }
.ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; }
.ql-container.ql-snow { border-radius: 0 0 8px 8px; font: inherit; }
.check { padding-bottom: .4rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.form-actions .danger { margin-left: auto; }
.sticky-actions {
    position: sticky; bottom: -1.5rem; z-index: 1500; margin: 1.2rem -1.5rem -1.5rem; padding: .8rem 1.5rem;
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 12px rgb(0 0 0 / .05);
}
.small { font-size: .88rem; }

.photos-editor { margin-top: 1.5rem; border-top: 1px solid var(--border); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.photo-grid figure { margin: 0; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in; }
.photo-grid figcaption { display: flex; gap: .25rem; align-items: center; padding: .3rem; }
.photo-grid figcaption button { padding: .1rem .45rem; font-size: .8rem; }
.photo-grid figcaption .danger { margin-left: auto; }
.dropzone {
    border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.4rem; text-align: center;
    color: var(--muted); cursor: pointer;
}
.dropzone.over, .dropzone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.upload-line { display: flex; gap: .8rem; align-items: center; margin-top: .4rem; font-size: .9rem; }
.upload-line progress { flex: 1; }

/* ---------------------------------------------------------------- settings & admin */
.settings section { border-top: 1px solid var(--border); padding-bottom: .4rem; }
.settings section .stack { margin-bottom: .8rem; }
.swatches { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.swatch { position: relative; align-items: center; gap: .35rem; padding: .5rem .7rem; border: 2px solid var(--border); border-radius: 12px; cursor: pointer; font-weight: 500; }
.swatch img { width: 48px; height: 48px; display: block; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.segmented { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; margin-bottom: .8rem; }
.segmented label { position: relative; flex-direction: row; padding: .3rem .9rem; border-radius: 7px; cursor: pointer; font-weight: 400; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--surface); box-shadow: var(--shadow); font-weight: 600; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent); }
.row-form { display: flex; gap: .6rem; }
.row-form input { max-width: 10rem; }
.table-wrap { overflow-x: auto; }
table.users { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.users th, table.users td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); }
table.users tr.inactive td { color: var(--muted); }
table.users td.over { color: var(--danger); font-weight: 600; }
.th-sort { border: 0; background: none; padding: 0; font-weight: 700; }
.th-sort.active::after { content: " ▾"; color: var(--muted); }
.storage meter { width: 100%; height: 1rem; margin-top: .3rem; }
.storage p { margin: .3rem 0; }
.storage-form { align-items: start; }
.storage-buttons { display: flex; gap: .6rem; grid-column: 1 / -1; }
.actions-cell { display: flex; gap: .3rem; flex-wrap: wrap; }
.actions-cell button { font-size: .82rem; padding: .2rem .5rem; }

/* ---------------------------------------------------------------- lightbox & toast */
dialog#lightbox {
    width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: rgb(10 10 10 / .96); color: #eee; overflow: hidden;
}
dialog#lightbox[open] { display: flex; flex-direction: column; }
dialog#lightbox::backdrop { background: rgb(0 0 0 / .6); }
.lb-stage {
    position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; user-select: none;
    cursor: zoom-in; margin: env(safe-area-inset-top, 0px) 0 0;
}
.lb-stage.zoomed { cursor: zoom-out; }
.lb-stage.zoomed.panning { cursor: grabbing; }
.lb-stage img { position: absolute; transform-origin: 0 0; max-width: none; will-change: transform; }
.lb-btn {
    position: absolute; z-index: 2; background: rgb(255 255 255 / .12); color: #fff; border: 0;
    font-size: 2rem; line-height: 1; padding: .3rem .8rem;
}
.lb-btn:hover { background: rgb(255 255 255 / .28); }
.lb-prev { left: .6rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .6rem; top: 50%; transform: translateY(-50%); }
.lb-close {
    right: .6rem; top: calc(.6rem + env(safe-area-inset-top, 0px));
    width: 2.6rem; height: 2.6rem; padding: 0; display: grid; place-items: center; border-radius: 50%;
}
.lb-close svg { width: 22px; height: 22px; }
.lb-bar {
    display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; justify-content: center; align-items: baseline;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); font-size: .88rem;
}
.lb-bar .muted { color: #aaa; }
.lb-bar a { color: #9fd6d9; }
.lb-zoom { font-variant-numeric: tabular-nums; min-width: 3.5em; }
.lb-hint { flex-basis: 100%; text-align: center; font-style: italic; font-size: .82rem; }

#toast {
    position: fixed; z-index: 6000; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    background: var(--text); color: var(--bg); padding: .6rem 1.1rem; border-radius: 8px; box-shadow: var(--shadow); max-width: calc(100% - 2rem);
}
#toast.error { background: var(--danger); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 760px) {
    .row { grid-template-columns: 44px 3.2rem 1fr auto; }
    .row .loc, .row .chips, .row .badge { display: none; }
    .fiche-grid, .fiche-grid.has-map, .grid-2, .grid-4 { grid-template-columns: 1fr; }
    .minimap { min-height: 16rem; }
    .lb-hint { display: none; }
    .actions { margin-left: 0; width: 100%; justify-content: space-between; }
    dialog#modal { padding: 1rem; width: calc(100% - 1rem); max-height: calc(100vh - 1rem); }
    .sticky-actions { bottom: -1rem; margin: 1.2rem -1rem -1rem; padding: .7rem 1rem; }
    .toolbar { flex-basis: 100%; }
    .main-map { height: calc(100vh - 13rem); }
}