/* ─── DESIGN TOKENS ─── */
/* Thème clair/sombre : chaque couleur est un light-dark(clair, sombre), résolu selon color-scheme.
   Le schéma suit la case cochée du sélecteur de thème du menu (index.html, préférence enregistrée sur
   le profil), 100% CSS via :has() : sombre, système (prefers-color-scheme), sinon clair (thème historique,
   y compris pour un visiteur anonyme, qui n'a pas de sélecteur). */
:root {
  color-scheme: light;
  --primary: light-dark(#5046e5, #6366f1);
  --primary-dark: light-dark(#3730a3, #4338ca);
  /* Texte sur fond --primary-light (en clair, même teinte que --primary-dark). */
  --primary-text: light-dark(#3730a3, #c7d2fe);
  --primary-light: light-dark(#ede9fe, #2e2a5c);
  --primary-light-end: light-dark(#faf5ff, #2a2140);
  --primary-light-hover: light-dark(#ddd6fe, #3b3678);
  --primary-muted: light-dark(#a5b4fc, #6d72c9);
  --success: light-dark(#059669, #10b981);
  --success-dark: light-dark(#065f46, #047857);
  --success-text: light-dark(#16a34a, #4ade80);
  --success-bg: light-dark(#f0fdf4, #12291c);
  --success-border: light-dark(#bbf7d0, #1f5135);
  --danger: light-dark(#dc2626, #f87171);
  --danger-bg: light-dark(#fef2f2, #3a1a1d);
  --danger-border: light-dark(#fecaca, #6b2a2e);
  --warning: light-dark(#d97706, #f59e0b);
  --info: light-dark(#2563eb, #60a5fa);
  --bg: light-dark(#f8fafc, #0f1117);
  --surface: light-dark(#ffffff, #1a1d27);
  --surface-hover: light-dark(#e5e7eb, #2a2e3b);
  /* Pastilles posées sur les images (édition, statut...) : semi-opaques sur la photo. */
  --surface-overlay: light-dark(rgba(255,255,255,0.9), rgba(26,29,39,0.9));
  --border: light-dark(#e5e7eb, #2e3241);
  --border-strong: light-dark(#d1d5db, #3d4254);
  --text: light-dark(#111827, #e5e7eb);
  --text-muted: light-dark(#6b7280, #9ca3af);
  --text-light: light-dark(#9ca3af, #6b7280);
  --header-bg: light-dark(#111827, #0a0c11);
  --sidebar-bg: light-dark(#1f2937, #151821);
  --sidebar-text: #d1d5db;
  --sidebar-hover: rgba(255,255,255,0.08);
  --radius: 12px;
  --radius-sm: 7px;
  --radius-xs: 4px;
  --shadow-xs: 0 1px 2px light-dark(rgba(0,0,0,0.05), rgba(0,0,0,0.3));
  --shadow-sm: 0 1px 3px light-dark(rgba(0,0,0,0.07), rgba(0,0,0,0.4)), 0 1px 2px light-dark(rgba(0,0,0,0.04), rgba(0,0,0,0.25));
  --shadow-md: 0 4px 12px light-dark(rgba(0,0,0,0.09), rgba(0,0,0,0.45)), 0 2px 4px light-dark(rgba(0,0,0,0.05), rgba(0,0,0,0.3));
  --shadow-lg: 0 10px 30px light-dark(rgba(0,0,0,0.13), rgba(0,0,0,0.55)), 0 4px 10px light-dark(rgba(0,0,0,0.07), rgba(0,0,0,0.35));
  --header-h: 3.5rem;
  --tr: 0.18s ease;
}

:root:has(#theme-dark:checked) { color-scheme: dark; }
:root:has(#theme-system:checked) { color-scheme: light dark; }

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

/* ─── HEADER ─── */
body > h1 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0 1.25rem;
  height: var(--header-h);
  background: var(--header-bg);
  color: white;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  position: sticky;
  top: 0;
  z-index: 2100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.burger-icon {
  cursor: pointer;
  user-select: none;
  font-size: 1.1rem;
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-xs);
  transition: background var(--tr);
  line-height: 1;
}

.burger-icon:hover { background: rgba(255,255,255,0.12); }

/* ─── LAYOUT ─── */
.main-layout {
  display: flex;
  width: 100%;
  min-height: calc(100vh - var(--header-h));
}

/* ─── SIDEBAR BACKDROP ─── */
.burger-overlay {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.35);
  z-index: 2050;
  cursor: default;
}

.burger-toggle:checked ~ .burger-overlay { display: block; }

/* ─── SIDEBAR ─── */
.burger-menu {
  display: none;
  flex-direction: column;
  background: var(--sidebar-bg);
  position: fixed;
  top: var(--header-h);
  left: 0;
  height: calc(100vh - var(--header-h));
  width: 230px;
  z-index: 2075;
  padding: 0.75rem 0;
  box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  overflow-y: auto;
}

.burger-toggle:checked ~ .burger-menu { display: flex; }

.burger-menu a,
.burger-menu button {
  color: var(--sidebar-text);
  padding: 0.65rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-left: 3px solid transparent;
  transition: all var(--tr);
  display: flex;
  align-items: center;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.burger-menu a:hover,
.burger-menu button:hover {
  background: var(--sidebar-hover);
  color: #fff;
  border-left-color: var(--primary-muted);
}

/* [hidden] a une spécificité plus faible que ".burger-menu button" (display:flex ci-dessus) et
   perdrait sinon le combat de cascade — #pwa-install-btn doit rester masqué tant que pwa.js ne l'a
   pas révélé (évènement beforeinstallprompt), donc ce cas doit gagner explicitement. */
.burger-menu button[hidden] {
  display: none;
}

/* Sélecteur de thème en bas du menu : radios masqués (mais focusables) + labels en segments. */
.theme-switch {
  margin: auto 1rem 0.25rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.theme-switch > span {
  flex-basis: 100%;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  color: var(--sidebar-text);
  opacity: 0.7;
}

.theme-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-switch label {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.2rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background var(--tr);
}

.theme-switch label:hover { background: var(--sidebar-hover); color: #fff; }
.theme-switch input:checked + label { background: var(--primary); color: #fff; }
.theme-switch input:focus-visible + label { outline: 2px solid var(--primary-muted); outline-offset: 1px; }

/* ─── PAGE CONTENT ─── */
#pageDiv {
  flex: 1;
  min-height: calc(100vh - var(--header-h));
  padding: 1.5rem 1.75rem;
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 800px) {
  #pageDiv { padding: 1rem; }
}

/* ─── TYPOGRAPHY ─── */
h2 {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--text);
}

/* Section headers with inline actions (e.g. items header) */
h2.section-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

h2.section-header a,
h2.section-header label {
  font-size: 1rem;
  padding: 0.2rem 0.35rem;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
  display: inline-flex;
  align-items: center;
}

h2.section-header a:hover,
h2.section-header label:hover {
  background: var(--primary-light);
  color: var(--primary);
}

/* Slider "édition rapide du statut" (voir #itemsDiv:not(:has(...)) .status-picker ci-dessous) :
   input caché dans un <label>, pas de `for`/`id` nécessaire. `margin-left: auto` le pousse à
   l'extrémité droite du h2 flex, après les icônes existantes. */
.quick-edit-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}

.quick-edit-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.1rem;
  height: 1.15rem;
  cursor: pointer;
  flex-shrink: 0;
}

.quick-edit-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.quick-edit-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background var(--tr);
}

.quick-edit-slider::before {
  content: '';
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.85rem;
  height: 0.85rem;
  background: var(--surface);
  border-radius: 50%;
  transition: transform var(--tr);
  box-shadow: var(--shadow-sm);
}

.quick-edit-toggle input:checked ~ .quick-edit-slider {
  background: var(--primary);
}

.quick-edit-toggle input:checked ~ .quick-edit-slider::before {
  transform: translateX(0.95rem);
}

.quick-edit-toggle input:focus-visible ~ .quick-edit-slider {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ─── ITEMS FILTER PANEL ─── */
.filter-panel {
  margin-bottom: 1.5rem;
}

.filter-panel summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.filter-panel form {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: fit-content(50%) 1fr;
  column-gap: 0.75rem;
}

.filter-row {
  display: contents;
}

.filter-attr-name,
.filter-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}

.filter-row:last-of-type .filter-attr-name,
.filter-row:last-of-type .filter-value { border-bottom: none; }

.filter-attr-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.filter-value {
  gap: 0.5rem;
}

.filter-interval {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.filter-checkboxes {
  font-size: 0.85rem;
}

.filter-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ─── ITEMS MAP (Leaflet / OpenStreetMap) ─── */
.items-map-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  padding: 0.5rem;
}

#itemsMapContainer {
  height: 400px;
  width: 100%;
  border-radius: var(--radius);
}

/* ─── LOCATION ATTRIBUTE EDITOR (map + coordinates, synced) ─── */
.attr-location-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.attr-location-map {
  height: 220px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.attr-location-map.readonly,
.attr-location-map.readonly .leaflet-container {
  cursor: default;
}

/* ─── CARD GRID ─── */
.flexDiv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 800px) {
  .flexDiv {
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: 0.625rem;
  }
}

/* ─── PAGINATION (issue #15) ─── */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pagination-page-input {
  width: 3.5rem;
  padding: 0.3rem 0.4rem;
  text-align: center;
}

/* ─── CARD BASE ─── */
/* Pas d'overflow:hidden ici : ça clipperait la bulle du tooltip du badge d'origine
   (.origin-badge, en haut de la carte). Ce n'est pas nécessaire pour le rendu visuel :
   .itemImg a son propre border-radius, .itemBody et le titre (.itemDiv a span) clippent déjà
   leur contenu, et .progress-bar arrondit ses propres coins en bas. */
.itemDiv {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--tr), border-color var(--tr);
}

.itemDiv:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

@media (max-width: 800px) {
  .itemDiv { min-width: 6rem; height: 7.5rem; }
}

@media (min-width: 801px) {
  .itemDiv { width: 9rem; min-width: 9rem; height: 12rem; }
}

/* ─── CARD BODY (fills remaining space above the progress bar) ─── */
.itemBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ─── CARD LINK WRAPPER ─── */
.itemDiv a {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding-bottom: 0.25rem;
  color: var(--text);
}

.itemDiv a br { display: none; }

/* ─── CARD NAME ─── */
.itemDiv a span {
  font-size: 0.75rem;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  padding: 0.3rem 0.4rem 0.15rem;
  width: 100%;
  color: var(--text);
  word-break: break-word;
}

/* ─── CARD EDIT BUTTON ─── */
.editItem {
  position: absolute;
  top: 5px;
  left: 5px;
  cursor: pointer;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  width: 1.65rem;
  height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  box-shadow: var(--shadow-xs);
  transition: background var(--tr), box-shadow var(--tr);
  z-index: 1;
}

.editItem:hover {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ─── ITEM ORIGIN BADGE ─── */
/* Plain, non-interactive badge (no hover/menu, unlike .status-picker) showing whether an
   item is official/customized/local relative to the collection's reference collection. */
.origin-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  width: 1.65rem;
  height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  box-shadow: var(--shadow-xs);
  z-index: 1;
}

/* ─── ITEM VARIANT COUNT BADGE ─── */
/* Bulle à cheval sur le bord bas de la carte (issue #96) : nombre de variantes regroupées derrière
   l'objet affiché, sans masquer le titre en bas de carte. */
.variant-count-badge {
  position: absolute;
  bottom: -0.6rem;
  right: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.1rem;
  color: var(--text);
  box-shadow: var(--shadow-xs);
  z-index: 1;
}

/* ─── ITEM STATUS PICKER ─── */
/* .status-picker relies on .editItem's `position: absolute` (do NOT set `position:
   relative` here, it would override .editItem and pull the badge back into normal
   flow, pushing the image/title below it). */
.status-picker .status-current {
  position: relative; /* enters the "positioned" paint layer, above the ::before bridge below */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Invisible bridge covering the badge-to-menu gap so the pointer never leaves
   .status-picker's hover area while moving from the badge to the menu (without
   this, .status-menu's `display:none` kicks in mid-transit and the menu never
   stays open long enough to reach). z-index:0 keeps it below .status-current and
   .status-menu (both explicitly positioned above it) so clicks still reach them —
   an unpositioned element here would otherwise paint on top regardless of DOM order. */
.status-picker::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -8px;
  left: -8px;
  width: 160px;
  height: calc(100% + 16px);
}

.status-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  flex-direction: row;
  gap: 2px;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 2px 4px;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

.status-picker:hover .status-menu {
  display: flex;
}

.status-menu span {
  cursor: pointer;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  border-radius: 50%;
  transition: background var(--tr);
}

.status-menu span:hover {
  background: var(--primary-light);
}

/* Tant que le slider "édition rapide" (h2.section-header) n'est pas activé, le picker de statut
   reste visible mais inerte : ni le clic rapide (.status-current) ni le menu au survol
   (.status-menu) ne réagissent. Évite de changer le statut d'un objet par un clic accidentel en
   parcourant la collection. #itemsDiv (ancêtre commun du toggle et de la grille) plutôt que
   #itemsResultsDiv : le toggle vit dans le h2, hors de #itemsResultsDiv. */
#itemsDiv:not(:has(.quick-edit-toggle input:checked)) .status-picker {
  pointer-events: none;
  opacity: 0.55;
}

/* ─── CARD IMAGE ─── */
.itemImg {
  object-fit: contain;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

@media (max-width: 800px) {
  .itemImg { height: 4rem; width: 4rem; margin-top: 0.65rem; }
}

@media (min-width: 801px) {
  .itemImg { height: 8rem; width: 8rem; margin-top: 0.5rem; }
}

/* ─── PROGRESS BARS ─── */
.progress-bar {
  flex: 0 0 4px;
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}

.progress-owned {
  background: var(--success);
  flex-shrink: 0;
  opacity: 0.85;
}

.progress-duplicate {
  background: var(--success-dark);
  flex-shrink: 0;
  opacity: 0.85;
}

.progress-ordered {
  background: var(--info);
  flex-shrink: 0;
  opacity: 0.85;
}

.progress-wished {
  background: var(--warning);
  flex-shrink: 0;
  opacity: 0.85;
}

.progress-missing {
  background: var(--danger);
  flex-shrink: 0;
  opacity: 0.7;
}

/* ─── CREATE/LINK/IMPORT TOOLBAR (above a grid) ─── */
.collection-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.875rem;
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}

.toolbar-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary-muted);
  color: var(--primary-text);
}

/* ─── BREADCRUMB ─── */
.public-signup-hint {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.public-signup-hint a { color: var(--primary); }

.hierarchyDiv {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  scrollbar-width: thin;
  --bc-step: 7em;
}

@media (max-width: 800px) { .hierarchyDiv { min-height: 8rem; --bc-step: 5.4rem; } }

@media (min-width: 801px) { .hierarchyDiv { min-height: 13rem; } }

.hierarchyDiv > * {
  position: absolute;
  top: 0.5rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.hierarchyDiv > *:nth-child(n) {
  left: calc(var(--bc-step) * (var(--item-index, calc(var(--n, 1) - 1))) + 0.5rem);
}

.hierarchyDiv > p {
  position: static;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-light-end) 100%);
  border: 1px solid var(--primary-muted);
  color: var(--primary-text);
  font-size: 0.9rem;
  line-height: 1.65;
  padding: 1rem 1.25rem;
  margin: 0.5rem;
  max-width: 520px;
  box-shadow: none;
}

/* ─── POPUP / MODAL ─── */
/* La popup (#itemDisplayDiv) s'insère en DOM juste après l'icône qui l'a ouverte (hx-swap="afterend"),
   souvent elle-même à l'intérieur d'une carte .itemDiv (collection ou item) : sans ce reset, tout <a>
   de son contenu hérite de la règle ".itemDiv a" ci-dessus (display:flex en colonne, centré, hauteur
   100%), qui n'a de sens que pour le lien englobant toute une carte — pas pour un lien texte/icône
   dans un formulaire de popup. Même contournement déjà appliqué localement à
   .image-editor-toolbar > a, généralisé ici à toute la popup pour couvrir les autres liens
   (crayons d'édition, "Annuler"/"Fermer", ↻ resync, 🗑️ suppression...) qui souffraient du même
   effet de bord selon la carte depuis laquelle la popup avait été ouverte. */
#itemDisplayDiv a {
  display: inline;
  height: auto;
  padding-bottom: 0;
  color: inherit;
}

/* Sauf pour un lien stylé en bouton (ex: "Exporter en JSON" de l'édition de collection) : le reset
   ci-dessus, plus spécifique (id), lui retirait son display/padding de bouton et le rendait plus petit
   que ses voisins <button>/<label>. */
#itemDisplayDiv a.btn-secondary {
  display: inline-flex;
  padding-bottom: 0.45rem;
}

/* Même fuite pour ".itemDiv a span" (nom de carte tronqué sur 3 lignes) : sans ce reset, un <span>
   texte dans un lien de popup (ex: "✖️ <span>Annuler</span>") hérite de width:100% et
   -webkit-line-clamp, le faisant passer sur sa propre ligne sous l'icône qui le précède. */
#itemDisplayDiv a span {
  display: inline;
  -webkit-line-clamp: unset;
  overflow: visible;
  padding: 0;
  width: auto;
  word-break: normal;
}

.popup {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(17, 24, 39, 0.55);
  justify-content: center;
  align-items: center;
  z-index: 2110;
  backdrop-filter: blur(3px);
}

.popup-inner {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius);
  min-width: min(50vw, 90vw);
  max-width: 95vw;
  min-height: 50vh;
  max-height: 95dvh;
  position: relative;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.popup-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

@media (max-width: 600px) {
  .popup-inner {
    padding: 1rem;
    min-width: 92vw;
    min-height: 0;
  }
}

.popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  padding: 0.2rem 0.5rem;
  line-height: 1;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
  border: none;
  box-shadow: none;
}

.popup-close:hover {
  background: var(--bg);
  color: var(--text);
}

/* Flèches de navigation précédent/suivant de la popup de consultation d'item : superposées de
   chaque côté de .popup-inner (issue navigation-popup). Le conteneur laisse passer les clics
   (pointer-events: none) sauf sur les boutons eux-mêmes, pour ne pas gêner le contenu de la popup.
   z-index explicite nécessaire : sans lui (z-index:auto), ce conteneur positionné se retrouve peint
   avant certains éléments internes de #itemContentDiv qui sont eux aussi positionnés (ex.
   .image-crop-stage, en position:relative) mais plus loin dans l'ordre du DOM — l'image de l'item
   passait alors visuellement au-dessus des flèches. */
#itemNavArrows {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.popup-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  transition: background var(--tr), color var(--tr);
}

.popup-nav:hover:not(:disabled) {
  background: var(--bg);
  color: var(--text);
}

.popup-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.popup-nav-prev {
  left: 0.5rem;
}

.popup-nav-next {
  right: 0.5rem;
}

@media (max-width: 600px) {
  .popup-nav {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1rem;
  }

  .popup-nav-prev {
    left: 0.35rem;
  }

  .popup-nav-next {
    right: 0.35rem;
  }
}

/* ─── IMPORT POPUP ─── */
#popupImportDiv {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(17, 24, 39, 0.55);
  justify-content: center;
  align-items: center;
  z-index: 2110;
  backdrop-filter: blur(3px);
}

.import-popup-inner {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius);
  min-width: min(50vw, 90vw);
  min-height: 50vh;
  position: relative;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.import-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  padding: 0.2rem 0.5rem;
  line-height: 1;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
  border: none;
  box-shadow: none;
}

.import-popup-close:hover {
  background: var(--bg);
  color: var(--text);
}

/* ─── FORMS ─── */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--tr), box-shadow var(--tr);
  outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(80,70,229,0.15);
}

/* ─── BUTTONS ─── */
button,
input[type="submit"],
input[type="button"],
a.btn-secondary,
label.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-sm);
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--tr), box-shadow var(--tr);
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-xs);
  line-height: 1.4;
  text-decoration: none;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn-secondary:hover,
label.btn-secondary:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
  background: var(--border);
  color: var(--text-light);
  cursor: not-allowed;
  box-shadow: none;
}

button:disabled:hover,
input[type="submit"]:disabled:hover,
input[type="button"]:disabled:hover {
  background: var(--border);
  box-shadow: none;
}

.btn-danger {
  background: var(--danger) !important;
  color: white !important;
}

.btn-danger:hover { background: #b91c1c !important; }

.btn-secondary {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn-secondary:hover { background: var(--surface-hover) !important; }

/* ─── ITEM / COLLECTION EDIT MODAL ─── */
#itemEditModal,
#collectionEditModal {
  display: flex;
  flex-flow: wrap;
  gap: 1.5rem;
  text-align: left;
}

.edit-form-wrap { flex: 1; min-width: 220px; }

.form-field { margin-bottom: 0.75rem; }

.form-field-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.form-field-header > span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.attr-add-value, .attr-resync { font-size: 0.85rem; line-height: 1; }

.item-reference-image-resync {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

/* Popup collection : resynchronisation de l'image affichée juste sous l'image */
.collection-reference-image-resync {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.625rem;
}

.form-field input[type="text"] { width: 100%; }

.attr-multi-values { display: flex; flex-direction: column; gap: 0.4rem; }

.attr-multi-value-row { display: flex; align-items: center; gap: 0.4rem; }

.attr-multi-value-row input[type="text"] { flex: 1; width: auto; min-width: 0; }

.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.item-status-field form { display: flex; align-items: center; gap: 0.5rem; }

/* Readonly display */
.read-field { margin-bottom: 0.75rem; }

.read-field .field-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.15rem;
}

.read-field .field-value {
  font-size: 0.9rem;
  color: var(--text);
}

/* Attribut LINK affiché comme un vrai lien hypertexte (titre = nom d'hôte) : souligné et
   coloré, pour se distinguer visuellement des liens applicatifs (menus, actions HTMX...)
   qui restent volontairement sans soulignement (cf. règle générale `a` ci-dessus). */
.attr-link-value {
  color: var(--info);
  text-decoration: underline;
}

/* ─── IMAGE EDITOR ─── */
.image-editor-wrap { position: relative; }

.image-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.625rem;
  flex-wrap: wrap;
}

/* État de la dernière action sur l'image (script/image.js) : en cours ou en échec. */
.image-editor-status {
  margin-bottom: 0.625rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.image-editor-status[hidden] {
  display: none;
}

.image-editor-status.is-loading {
  color: var(--info);
  background: var(--primary-light);
}

/* Petit indicateur animé : sans lui, un message "en cours" figé sur une connexion très lente
   ressemble vite à un blocage. */
.image-editor-status.is-loading::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: image-editor-spin 0.8s linear infinite;
}

.image-editor-status.is-error {
  color: var(--danger);
  background: var(--danger-bg);
}

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

/* :not(.tooltip-wrap) : le ℹ️ d'aide de la barre reste une icône simple, pas un bouton carré —
   width/height/overflow:hidden ci-dessous rognaient sa bulle de tooltip et cassaient l'affichage. */
.image-editor-toolbar > :not(.tooltip-wrap) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 1rem;
  transition: background var(--tr), border-color var(--tr);
  text-decoration: none;
  color: inherit;
  margin: 0;
  padding: 0;
  box-shadow: none;
  font-family: inherit;
  line-height: 1;
}

.image-editor-toolbar > :not(.tooltip-wrap):hover {
  background: var(--primary-light);
  border-color: var(--primary-muted);
}

/* override .itemDiv a (higher specificity) so toolbar anchors match label/span sizing — prefixed with
   #itemDisplayDiv so it also wins over the broader popup-wide reset above (same specificity tier as
   .itemDiv a otherwise, which would make source order decide and risk losing this one). */
#itemDisplayDiv .image-editor-toolbar > a {
  display: inline-flex;
  flex-direction: row;
  height: 2rem;
  padding-bottom: 0;
  color: inherit;
}

.image-editor-area { margin: 0.75rem 0; }

/* ─── IMAGE SEARCH CANDIDATES ─── */
.image-candidates { margin: 0.75rem 0; }

.image-candidates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.image-candidates-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.image-candidate {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--tr);
}

.image-candidate:hover { border-color: var(--primary-muted); }

.image-candidate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ─── CROP ─── */
.image-crop-stage {
  position: relative;
  display: inline-block;
  max-width: 300px;
}

.image-crop-stage img {
  display: block;
  max-width: 300px;
  width: 100%;
  height: auto;
}

.image-rotate-viewport {
  overflow: hidden;
}

.js-rotate-toolbar {
  flex-wrap: nowrap;
  width: 100%;
}

.js-rotate-toolbar .js-rotate-apply:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.js-rotate-toolbar .js-rotate-slider {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 2rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.image-crop-selection {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #ff7a00;
  background: rgba(255, 122, 0, 0.15);
  cursor: move;
  touch-action: none;
}

.image-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ff7a00;
  border: 2px solid #fff;
  border-radius: 50%;
}

.image-crop-handle[data-mode="nw"] { top: -7px; left: -7px; cursor: nwse-resize; }
.image-crop-handle[data-mode="ne"] { top: -7px; right: -7px; cursor: nesw-resize; }
.image-crop-handle[data-mode="sw"] { bottom: -7px; left: -7px; cursor: nesw-resize; }
.image-crop-handle[data-mode="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }

/* ─── TRANSPARENCE (suppression du blanc du bord) ─── */
/* Damier classique des éditeurs d'image : rend visibles les zones transparentes. */
.image-transparency-grid {
  background-color: #fff;
  background-image: conic-gradient(#ccc 25%, transparent 0 50%, #ccc 0 75%, transparent 0);
  background-size: 16px 16px;
}

.js-edge-white-toolbar {
  flex-wrap: nowrap;
  width: 100%;
}

.js-edge-white-toolbar .js-edge-white-slider {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 2rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ─── ATTRIBUTE CHIPS ─── */
.attr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--primary-light);
  border: 1px solid var(--primary-muted);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary-text);
  cursor: grab;
  user-select: none;
  transition: background var(--tr);
}

.attr-chip:hover { background: var(--primary-light-hover); }
.attr-chip:active { cursor: grabbing; }
/* Case "Pas de suivi d'objet" cochée : la colonne "owned" disparaît de l'ordre des attributs (son champ
   caché reste soumis pour conserver sa position si la case est décochée plus tard). */
form:has(input[name=noItemTracking]:checked) .attr-chip-owned { display: none; }

/* ─── GROUPING CHIPS ─── */
.grouping-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--primary-light);
  border: 1px solid var(--primary-muted);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary-text);
}

/* ─── SELECT ATTRIBUTES PANEL ─── */
.attr-panel-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}

.attr-panel-row:last-of-type { border-bottom: none; }

.attr-panel-name { flex: 1; min-width: 50%; font-size: 0.875rem; font-weight: 500; }

.attr-panel-type { font-size: 0.78rem; color: var(--text-muted); }
.attr-panel-technical { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); font-family: monospace; }

.attr-panel-badge { font-size: 0.85rem; }

/* Popup de détail d'un attribut (select_attributes.html). */
.attr-detail-content { display: flex; flex-direction: column; gap: 0.6rem; }

.attr-detail-content .attr-free-entry-toggle { margin-bottom: 0; }

.attr-detail-field { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }

.attr-detail-label { color: var(--text-muted); }

.attr-detail-date input[type="text"] { flex: 1; min-width: 0; }

.attr-detail-hint { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--text-muted); }

.attr-detail-error { color: var(--danger); font-size: 0.85rem; }

.attr-detail-error:empty { display: none; }

.attr-detail-content .attr-panel-save { align-self: flex-start; }

.attr-panel-delete {
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  border-radius: var(--radius-xs);
  transition: background var(--tr);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.attr-panel-delete:hover { background: var(--danger-bg); color: var(--danger); }

.attr-panel-force-delete {
  margin: -0.15rem 0 0.4rem;
  padding: 0.4rem 0.6rem;
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius-xs);
  font-size: 0.78rem;
}

.attr-in-use-message { margin: 0 0 0.3rem; color: var(--danger); }

.attr-panel-force-delete label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.attr-add-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.attr-add-form input[type="text"] { flex: 1; min-width: 100px; }

.attr-add-form select { min-width: 120px; }

.attr-panel-close,
.attr-panel-save {
  font-size: 0.8rem;
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0.25rem 0;
  text-decoration: none;
}

.attr-panel-close:hover { text-decoration: underline; }

/* background repris explicitement ici : sinon le "button:hover" générique (background var(--primary-dark))
   l'emporte sur le "background: none" de .attr-panel-save au repos, la même propriété étant alors
   arbitrée par spécificité et non par cet ordre de déclaration. */
.attr-panel-save:hover { text-decoration: underline; background: none; box-shadow: none; }

.attr-panel-values {
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  border-radius: var(--radius-xs);
  transition: background var(--tr);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.attr-panel-values:hover { background: var(--bg); color: var(--primary); }

/* ─── ATTRIBUTE POSSIBLE VALUES POPUP ─── */
.attr-values-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  min-width: min(420px, 90vw);
  max-width: 95vw;
  max-height: 85dvh;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Flex seulement une fois ouvert : un display posé sur le dialog fermé écraserait le display:none
   natif de dialog:not([open]) et l'afficherait dans la page. Seul .popup-content scrolle, le titre et
   le bouton de fermeture restent visibles. */
.attr-values-dialog[open] {
  display: flex;
  flex-direction: column;
}

.attr-values-dialog::backdrop {
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(3px);
}

@media (max-width: 600px) {
  /* Collé en haut de l'écran sur mobile : le clavier virtuel recouvre le bas de la zone visible. */
  .attr-values-dialog {
    padding: 1rem;
    min-width: 92vw;
    margin: 1rem auto auto;
    max-height: calc(100dvh - 2rem);
  }
}

.attr-values-dialog h4 { margin: 0 0 0.75rem; font-size: 0.95rem; }

.attr-free-entry-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

.attr-values-editor { display: flex; flex-direction: column; gap: 0.4rem; }

.attr-values-list { display: flex; flex-direction: column; gap: 0.4rem; }

.attr-value-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.attr-value-row input[type="text"] { flex: 1; }

.attr-values-dialog-close {
  display: block;
  flex-shrink: 0;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0.25rem 0;
}

.attr-values-dialog-close:hover { text-decoration: underline; }

/* ─── ITEM GROUPING MEMBERS ─── */
.grouping-member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0.4rem 0;
  list-style: none;
}

.grouping-member-row {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem;
  background: var(--primary-light);
  border: 1px solid var(--primary-muted);
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  text-align: center;
  max-width: 6rem;
}

.grouping-member-img {
  object-fit: contain;
  border-radius: var(--radius-xs);
}

@media (max-width: 800px) {
  .grouping-member-img { height: 2rem; width: 2rem; }
}

@media (min-width: 801px) {
  .grouping-member-img { height: 4rem; width: 4rem; }
}

.grouping-member-list--draggable .grouping-member-row { cursor: grab; }
.grouping-member-list--draggable .grouping-member-row:active { cursor: grabbing; }

.grouping-member-row--current { border-color: var(--danger); border-width: 2px; }

/* ─── COLLECTION LINK SELECTOR ROWS ─── */
.link-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  transition: background var(--tr);
}

.link-row:last-child { border-bottom: none; }
.link-row:hover { background: var(--bg); }

.link-row img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.link-row-name { flex: 1; font-size: 0.875rem; }

.link-row-expand {
  background: var(--bg) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  padding: 0.2rem 0.45rem !important;
  font-size: 0.75rem !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: none !important;
}

.link-row-expand:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: var(--primary-muted) !important;
}

.link-row-confirm {
  background: light-dark(#dcfce7, #12291c) !important;
  color: light-dark(#15803d, #4ade80) !important;
  border: 1px solid light-dark(#86efac, #2f6b47) !important;
  padding: 0.2rem 0.5rem !important;
  font-size: 0.8rem !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: none !important;
}

.link-row-confirm:hover { background: light-dark(#bbf7d0, #1f5135) !important; }

.link-children { padding-left: 1.5rem; }

.move-confirm-warning { color: light-dark(#b91c1c, #f87171); }

.move-bulk-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
}

/* ─── SECTIONS (Friends, Account, etc.) ─── */
section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

ul { list-style: none; margin: 0; padding: 0; }

ul li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

ul li:last-child { border-bottom: none; }

/* ─── ACCOUNT STATS ─── */
.account-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.account-info strong {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-name-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.account-info select {
  justify-self: start;
}

.account-name-form input {
  flex: 1 1 12rem;
  max-width: 24rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.875rem;
  margin-top: 0.5rem;
}

.stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  text-align: center;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  display: block;
  line-height: 1.2;
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-top: 0.25rem;
}

/* ─── TABLE ─── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

th {
  text-align: left;
  padding: 0.65rem 1rem;
  background: var(--bg);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

/* ─── TABLE HORIZONTAL SCROLL (narrow screens, issue #33) ─── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table-scroll table {
  min-width: max-content;
}

.bulk-edit-table td input[type="text"] {
  min-width: 8rem;
}
tr:hover td { background: var(--bg); }

/* ─── UTILITY ─── */
.linkCursor { cursor: pointer; }

.with-border {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-block-start: 0.75rem;
  background: var(--bg);
}

.error-message {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.success-message {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ─── COLLECTION EDIT FORM ─── */
.collection-edit-block { margin-bottom: 0.75rem; }
/* Fieldset de simple regroupement (désactivation en bloc des saisies en lecture seule), sans cadre. */
.form-fieldset-plain { border: none; margin: 0; padding: 0; min-width: 0; }

.collection-edit-block > span:first-child,
.collection-edit-block > label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.3rem;
}

.collection-edit-block input[type="text"] { width: 100%; }
/* Description de la collection : texte brut multi-ligne, redimensionnable verticalement. */
.collection-edit-block textarea.collection-description-input { width: 100%; min-height: 5rem; resize: vertical; box-sizing: border-box; }

/* ─── LOGIN PAGE ─── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
}

.login-card { width: 100%; max-width: 360px; }

.login-card h1 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  text-align: center;
  color: var(--text);
}

.login-card form button { width: 100%; margin-top: 0.25rem; }
.login-card .collection-edit-block input { width: 100%; box-sizing: border-box; }
.register-field-hint { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--text-muted); }

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--text-light);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow-xs);
  transition: background var(--tr), border-color var(--tr);
}

.login-oauth-btn:hover {
  background: var(--bg);
  border-color: var(--primary-muted);
}

.login-oauth-hint {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.login-back {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.login-back:hover { color: var(--primary); text-decoration: underline; }

/* Confirmation de reprise d'un compte après connexion Google (account_claim.html). */
.account-claim-text { font-size: 0.85rem; color: var(--text); margin: 0 0 0.75rem; }
.account-claim-warning { color: var(--danger); font-weight: 500; }
.account-claim-cancel { margin-top: 0.75rem; cursor: pointer; }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ─── TOOLTIP ─── */
/* Fragment fragments/tooltip.html : checkbox cachée + labels (même mécanisme que le
   burger-menu ci-dessus), pour ouvrir/fermer la bulle au tap sur mobile sans JS. Au
   survol/focus clavier (desktop), la bulle s'affiche directement en CSS. */
.tooltip-wrap { position: relative; display: inline-block; }

.tooltip-trigger {
  cursor: pointer;
  user-select: none;
}

/* Cette bulle invisible (aucun background) couvrait tout le viewport en position:fixed dès qu'une
   infobulle était ouverte (checkbox cochée), pour permettre de la refermer au tap ailleurs sur mobile.
   Problème : tant qu'elle restait affichée, elle interceptait le clic suivant n'importe où sur la
   page (pas seulement la nav — corrigé une première fois en baissant son z-index sous le header/menu
   burger, mais le contenu de page normal, en z-index:auto, restait en dessous d'elle) — ce clic se
   contentait de la refermer silencieusement, sans indice visuel, au lieu d'atteindre sa cible réelle.
   Toute la barre d'outils objets (➕⏬⏫🔡ℹ️) étant compacte, un tap qui cochait accidentellement
   l'icône ℹ️ cassait alors le clic suivant, qu'il vise le menu ou un autre bouton de la même barre.
   pointer-events:none supprime cette interception : l'infobulle se referme toujours en retapant sur
   son icône (même mécanisme), mais ne peut plus avaler un clic destiné à autre chose.
   Règles préfixées `.tooltip-wrap` (plutôt que la seule classe) : la bulle et l'overlay sont des
   <label>, et un sélecteur ambiant du type "h2.section-header label { display: inline-flex }" (barre
   d'actions objets, pour styler le label ⏫ import du même bandeau) a une spécificité CSS supérieure à
   `.tooltip-bubble`/`.tooltip-overlay` seules (2 sélecteurs d'élément de plus) : il gagnait et forçait
   la bulle affichée en permanence dès que ce bandeau existait sur la page, sans aucune interaction. Le
   préfixe ajoute une classe de spécificité, garantissant que l'état masqué par défaut l'emporte quel
   que soit le contexte d'utilisation du fragment. */
.tooltip-wrap .tooltip-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  cursor: default;
  pointer-events: none;
}

.tooltip-toggle:checked ~ .tooltip-overlay { display: block; }

.tooltip-wrap .tooltip-bubble {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  width: max-content;
  max-width: 280px;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  background: var(--text);
  color: var(--surface);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: pre-line;
  box-shadow: var(--shadow-md);
}

/* Toujours vers le bas (jamais au-dessus du déclencheur) : la bulle décrit ce qu'il y a en dessous,
   et ça garantit qu'il y a toujours la place de l'afficher sans être crop. */
.tooltip-bubble::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom-color: var(--text);
}

.tooltip-trigger:hover ~ .tooltip-bubble,
.tooltip-trigger:focus ~ .tooltip-bubble,
.tooltip-toggle:checked ~ .tooltip-bubble {
  display: block;
}

/* Variante à poser sur un conteneur parent (le fragment tooltip ne prend pas de classe) : bulle
   alignée sur le bord gauche du déclencheur au lieu d'être centrée dessus. Pour une icône proche du
   bord gauche de l'écran/popup (ex: aide des modes de partage), la bulle centrée (translateX(-50%))
   débordait hors de la fenêtre à gauche. */
.tooltip-align-start .tooltip-wrap .tooltip-bubble {
  left: -0.4rem;
  transform: none;
  max-width: min(320px, calc(100vw - 2rem));
}

.tooltip-align-start .tooltip-bubble::after { left: 0.9rem; }

/* ─── ONGLETS ÉDITION COLLECTION (issue #92) ───
   100% CSS, même mécanisme que .burger-toggle/.tooltip-toggle ci-dessus : radios cachés + labels,
   les panneaux de contenu sont sélectionnés en soeurs (~) du radio coché. Les radios et les panneaux
   doivent rester des enfants directs de .coll-edit-tabs, radios en premier dans le DOM, pour que le
   sélecteur ~ fonctionne. */
.coll-edit-tab-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.coll-edit-tab-labels {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
}

.coll-edit-tab-label {
  cursor: pointer;
  user-select: none;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--tr), border-color var(--tr);
}

.coll-edit-tab-label:hover { color: var(--text); }

.coll-edit-tab-panel { display: none; }

#collEditTabObjects:checked ~ .coll-edit-tab-labels label[for="collEditTabObjects"],
#collEditTabSubCollections:checked ~ .coll-edit-tab-labels label[for="collEditTabSubCollections"],
#collEditTabShares:checked ~ .coll-edit-tab-labels label[for="collEditTabShares"],
#collEditTabParentLinks:checked ~ .coll-edit-tab-labels label[for="collEditTabParentLinks"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

#collEditTabObjects:checked ~ #collEditPanelObjects,
#collEditTabSubCollections:checked ~ #collEditPanelSubCollections,
#collEditTabShares:checked ~ #collEditPanelShares,
#collEditTabParentLinks:checked ~ #collEditPanelParentLinks {
  display: block;
}

/* ─── ATTRIBUT COLOR : PALETTE (fragments/color_picker.html) ─── */
.color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(17, 24, 39, 0.18);
  flex-shrink: 0;
}
.color-swatch-red { background: #c62828; }
.color-swatch-orange { background: #ef6c00; }
.color-swatch-yellow { background: #f9a825; }
.color-swatch-green { background: #2e7d32; }
.color-swatch-blue { background: #1565c0; }
.color-swatch-purple { background: #6a1b9a; }
.color-swatch-pink { background: #d81b60; }
.color-swatch-brown { background: #6d4c41; }
.color-swatch-beige { background: #d7c4a3; }
.color-swatch-gold { background: #c9a227; }
.color-swatch-silver { background: #b0b6bd; }
.color-swatch-grey { background: #757575; }
.color-swatch-black { background: #1a1a1a; }
.color-swatch-white { background: #ffffff; }
.color-swatch-transparent { background: repeating-conic-gradient(#cfd4da 0 25%, #ffffff 0 50%) 50% / 8px 8px; }
.color-swatch-multicolor { background: conic-gradient(#c62828, #f9a825, #2e7d32, #1565c0, #6a1b9a, #c62828); }
/* "Aucune" : pastille barrée ; ancienne valeur texte libre : pastille vide en pointillés */
.color-swatch-none { background: linear-gradient(to top right, transparent 45%, var(--text-light) 45% 55%, transparent 55%), var(--surface); }
.color-swatch-legacy { background: var(--surface); border-style: dashed; border-color: var(--text-light); }

.color-value { display: inline-flex; align-items: center; gap: 0.4rem; }

.color-picker {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 2.2rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.color-picker-options { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; min-width: 0; }
.color-picker-options > input { position: absolute; opacity: 0; pointer-events: none; }
.color-option { display: none; align-items: center; gap: 0.4rem; font-size: 0.875rem; cursor: pointer; }
.color-picker-button { color: var(--text-muted); cursor: pointer; line-height: 1.4rem; margin-left: auto; }
.color-picker-overlay { position: absolute; inset: 0; cursor: pointer; }

/* Fermé : seules la ou les couleurs cochées, en pastille + nom */
.color-picker-toggle:not(:checked) ~ .color-picker-options > input:checked + .color-option { display: inline-flex; }

/* Ouvert : toute la palette en pastilles, la ligne cliquable laisse la place aux options */
.color-picker-toggle:checked ~ .color-picker-overlay { display: none; }
.color-picker-toggle:checked ~ .color-picker-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
  gap: 0.5rem;
  width: min(18rem, 70vw);
}
.color-picker-toggle:checked ~ .color-picker-options .color-option { display: flex; justify-content: center; }
.color-picker-toggle:checked ~ .color-picker-options .color-option .color-swatch { width: 1.8rem; height: 1.8rem; }
.color-picker-toggle:checked ~ .color-picker-options .color-option:not(.color-option-legacy) .color-option-name {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.color-picker-toggle:checked ~ .color-picker-options .color-option-legacy { grid-column: 1 / -1; justify-content: flex-start; }
.color-picker-options > input:checked + .color-option .color-swatch { outline: 3px solid var(--primary); outline-offset: 2px; }
.color-picker-toggle:not(:checked) ~ .color-picker-options > input:checked + .color-option .color-swatch { outline: none; }
.color-picker-options > input:focus-visible + .color-option .color-swatch { outline: 3px solid var(--primary-muted); outline-offset: 2px; }
.color-values { display: inline-flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }

/* ─── ATTRIBUT COLOR : ÉDITION DE LA PALETTE (select_attributes.html, color-palette-editor.js) ─── */
.color-palette-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.color-palette-row { display: flex; align-items: center; gap: 0.5rem; }
.color-palette-row .color-swatch { width: 1.4rem; height: 1.4rem; }
.color-palette-row .color-row-name { flex: 1; font-size: 0.875rem; }
.color-palette-row input[type="text"] { flex: 1; min-width: 0; }
.color-palette-row input[type="color"] { width: 2rem; height: 2rem; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0; }
.color-row-handle, .attr-value-handle { cursor: grab; color: var(--text-muted); touch-action: none; user-select: none; padding: 0 0.2rem; }
/* La palette garde toujours au moins une couleur. */
.color-palette-row:only-child .color-row-remove { visibility: hidden; }
.color-standard-title { margin: 1rem 0 0.25rem; font-size: 0.85rem; }
.color-standard-help { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--text-muted); }
.color-standard-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.color-standard-add {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.55rem; font-size: 0.8rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: none; cursor: pointer;
}
.color-standard-add[hidden] { display: none; }

/* ─── ATTRIBUT COLOR : PIPETTE (fragments/color_eyedropper.html, color-eyedropper.js) ─── */
.color-row-eyedropper { flex-shrink: 0; }
.eyedropper-sources { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.eyedropper-source {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.7rem; font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  cursor: pointer;
}
.eyedropper-label, .eyedropper-help { margin: 0 0 0.4rem; font-size: 0.8rem; color: var(--text-muted); }
.eyedropper-error { margin: 0 0 0.4rem; font-size: 0.85rem; color: #c0392b; }
.eyedropper-gallery { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.4rem; margin-bottom: 0.75rem; }
.eyedropper-thumb {
  flex-shrink: 0; width: 3.5rem; height: 3.5rem; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: none; overflow: hidden; cursor: pointer;
}
.eyedropper-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* L'image garde ses proportions dans la hauteur disponible ; la loupe et le marqueur sont positionnés dans ce repère. */
.eyedropper-stage { position: relative; display: flex; justify-content: center; }
.eyedropper-stage[hidden] { display: none; }
.eyedropper-canvas { max-width: 100%; max-height: 50dvh; width: auto; height: auto; touch-action: none; cursor: crosshair; }
.eyedropper-marker {
  position: absolute; width: 18px; height: 18px; transform: translate(-50%, -50%);
  border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px #000000; pointer-events: none;
}
.eyedropper-loupe {
  position: absolute; width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid #ffffff; box-shadow: var(--shadow-lg); image-rendering: pixelated; pointer-events: none;
}
.eyedropper-result { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; font-size: 0.9rem; }
.eyedropper-result[hidden] { display: none; }
.eyedropper-swatch { width: 2rem; height: 2rem; }
.eyedropper-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.75rem; flex-shrink: 0; }
.eyedropper-actions .attr-values-dialog-close { margin-top: 0; }

/* Propositions de correction à la référence (issue #103). */
.contribution-card { padding: 0.75rem; margin-bottom: 0.75rem; }
.contribution-card h4 { margin: 0 0 0.25rem; }
.contribution-meta { font-size: 0.85rem; color: var(--text-muted, #6b7280); margin: 0 0 0.5rem; }
.contribution-message { font-style: italic; white-space: pre-line; }
.contribution-warning { color: #b45309; }
.contribution-error { color: #c0392b; font-size: 0.85rem; margin-bottom: 0.5rem; }
.contribution-table-wrap { overflow-x: auto; }
.contribution-diff { border-collapse: collapse; width: 100%; margin-bottom: 0.5rem; }
.contribution-diff th, .contribution-diff td { padding: 0.3rem 0.4rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.contribution-field-label { font-weight: 600; }
.contribution-field-base { opacity: 0.75; }
/* Valeurs multi-lignes (description de collection) : retours à la ligne conservés. */
.contribution-field-base, .contribution-field-proposed { white-space: pre-line; overflow-wrap: anywhere; }
/* Formulaire de proposition : ligne entière cliquable, champ décoché (non proposé) estompé. */
.contribution-selectable tr { cursor: pointer; }
.contribution-selectable tr:hover { background: var(--surface-hover); }
.contribution-selectable tr:has(input[type=checkbox]:not(:checked)) td:not(:first-child) { opacity: 0.4; }
.contribution-field-arrow { color: var(--text-muted, #6b7280); }
.contribution-empty { color: var(--text-muted, #6b7280); }
.contribution-image { max-width: 60px; max-height: 60px; border-radius: var(--radius-sm); }
.contribution-obsolete .contribution-field-base { text-decoration: line-through; }
.contribution-reject { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.contribution-reject input { flex: 1; min-width: 10rem; }
.contribution-credits { font-size: 0.9rem; color: var(--text-muted, #6b7280); }
/* Description de la collection en introduction de sa page de consultation (texte brut, retours à la ligne conservés). */
.collection-description { white-space: pre-line; overflow-wrap: anywhere; max-width: 70ch; margin: 0.5rem 0 1rem; line-height: 1.5; }
/* Propositions d'ajout à la référence (issue #104) : objets proposés avec une sous-collection. */
.contribution-children { margin: 0.5rem 0; }
.contribution-children h4 { margin: 0.5rem 0 0.25rem; }
.contribution-child { padding: 0.4rem 0 0.4rem 0.75rem; border-left: 2px solid var(--border); margin-bottom: 0.4rem; }
.contribution-child label { display: flex; align-items: center; gap: 0.4rem; }

/* ─── CRÉATION GUIDÉE D'UNE COLLECTION (collection_wizard.html) ─── */
.wizard { display: flex; flex-direction: column; gap: 0.75rem; max-width: 34rem; margin: 0 auto; padding: 0.5rem 0; }
.wizard-kicker { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
.wizard-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.wizard-help { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.wizard-success { margin: 0; font-size: 0.85rem; color: var(--text); }
.wizard-answers { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wizard-answers > * { flex: 1 1 8rem; }
.wizard .wizard-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.wizard .wizard-secondary:hover { background: var(--bg); }
.wizard-name-form { display: flex; gap: 0.5rem; }
.wizard-name-form input { flex: 1; min-width: 0; }
.wizard-choices { width: 100%; box-sizing: border-box; resize: vertical; margin-bottom: 0.5rem; }
.wizard-type-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem; }
.wizard .wizard-type {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.wizard .wizard-type:hover { background: var(--bg); border-color: var(--primary); }
.wizard-type span { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); }
.wizard-technical-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.wizard .wizard-technical {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.wizard .wizard-technical:hover { background: var(--bg); border-color: var(--primary); }
.wizard-attributes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wizard-attributes li {
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.wizard-attributes li span { color: var(--text-muted); }
.wizard-back,
.wizard-skip { align-self: flex-start; font-size: 0.8rem; color: var(--text-muted); }
.wizard-skip { align-self: center; }
.wizard-content { display: flex; flex-direction: column; gap: 0.5rem; }
.wizard-option {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}
.wizard-option:has(input:checked) { border-color: var(--primary); }
.wizard-option input { margin-top: 0.2rem; }
.wizard-option span { display: flex; flex-direction: column; gap: 0.15rem; }
.wizard-option strong { font-size: 0.875rem; color: var(--text); }
.wizard-option small { font-size: 0.75rem; color: var(--text-muted); }
/* Suivi de possession : uniquement proposé si la collection contient des objets. */
.wizard-content:has(input[name="directItems"]:not(:checked)) .wizard-tracking { display: none; }