/* ────────────────────────────────────────────────────────────
   Polynum — Feuille de style principale
   Palette PolysemIQ, layout SPA avec sidebar + canvas + panel
   ──────────────────────────────────────────────────────────── */

:root {
  /* Palette */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #dbeafe;
  --color-bg: #f0f2f5;
  --color-card: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-text-soft: #94a3b8;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-success: #16a34a;
  --color-warning: #f59e0b;

  /* Dimensions */
  --navbar-height: 56px;
  --sidebar-width: 72px;
  --status-height: 32px;
  --panel-width: 300px;

  /* Espacements & rayons */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.08);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  /* Z-index */
  --z-navbar: 100;
  --z-sidebar: 90;
  --z-panel: 95;
  --z-status: 80;
  /* Doit rester au-dessus de TOUS les overlays de dialogue (jusqu'à 10001
     `!important` côté mobile). Sinon les snackbars rendent derrière le
     backdrop flouté d'un dialogue ouvert (saisie clé API, requête LLM…)
     et deviennent illisibles. Le calc(--z-toast - 1) des popups (menu
     contextuel, bandeau balais) reste cohérent par cascade. */
  --z-toast: 11000;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ── Icônes Lucide ──────────────────────────────────────── */
[data-lucide] {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ── Navbar ─────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 16px;
  z-index: var(--z-navbar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.92);
}

.navbar-left,
.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.navbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 480px;
}

.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background var(--transition-fast);
  touch-action: manipulation;
}

.sidebar-toggle:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.logo:hover {
  background: var(--color-bg);
}

.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
}

.logo-mark [data-lucide] {
  width: 16px;
  height: 16px;
}

/* Logo image Polynum (remplace le pictogramme Lucide) */
.logo-mark-img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(37, 99, 235, 0.15));
}

.board-title-input {
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.board-title-input:hover {
  background: var(--color-bg);
}

.board-title-input:focus {
  outline: none;
  background: var(--color-card);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  text-align: left;
}

.board-title-input::placeholder {
  color: var(--color-text-soft);
}

.save-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.save-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  transition: background var(--transition-base);
}

.save-indicator.dirty .save-dot {
  background: var(--color-warning);
}

.save-indicator.saving .save-dot {
  background: var(--color-primary);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Boutons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
  transform: translateY(-0.5px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0.5px);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-bg);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

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

.chevron {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  transition: transform var(--transition-fast);
}

.dropdown.open .chevron {
  transform: rotate(180deg);
}

/* ── Dropdown ───────────────────────────────────────────── */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  display: none;
  z-index: calc(var(--z-navbar) + 10);
}

.dropdown.open .dropdown-menu {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text);
  text-align: left;
  transition: background var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--color-bg);
}

.dropdown-item [data-lucide] {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.dropdown-separator {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

/* Menu utilisateur (mon compte + logout) */
#user-menu {
  min-width: 220px;
  padding: 4px;
}

.user-menu-header {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-email {
  font-size: 11px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#btn-logout {
  cursor: pointer;
  border: none;
  background: transparent;
}

#btn-logout:hover [data-lucide] {
  color: #dc2626;
}

/* View settings dropdown (grille + couleur de fond) */
#view-menu {
  min-width: 240px;
  padding: 8px;
}

.view-toggle-row {
  justify-content: space-between;
  cursor: pointer;
}
.view-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.view-toggle-checkbox {
  width: 36px;
  height: 20px;
  appearance: none;
  background: var(--color-border, #cbd5e1);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.view-toggle-checkbox::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.15s;
}
.view-toggle-checkbox:checked {
  background: var(--color-primary, #2563eb);
}
.view-toggle-checkbox:checked::after {
  left: 18px;
}

.dropdown-separator {
  height: 1px;
  background: var(--color-border, #e2e8f0);
  margin: 6px 0;
}

.view-bg-section {
  padding: 4px;
}
.view-bg-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.view-bg-palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.view-bg-swatch {
  aspect-ratio: 1;
  border-radius: var(--radius-sm, 4px);
  border: 2px solid transparent;
  background-clip: padding-box;
  cursor: pointer;
  transition: transform 0.08s, border-color 0.08s;
}
.view-bg-swatch:hover {
  transform: scale(1.12);
}
.view-bg-swatch.active {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 2px var(--color-primary-light, #dbeafe);
}
.view-bg-swatch-transparent {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%, #e2e8f0),
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%, #e2e8f0);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  position: relative;
}
.view-bg-swatch-transparent::after {
  content: '';
  position: absolute;
  inset: 20%;
  background: linear-gradient(to top right,
    transparent calc(50% - 1px), #dc2626 calc(50% - 1px),
    #dc2626 calc(50% + 1px), transparent calc(50% + 1px));
}

/* ── Main layout ────────────────────────────────────────── */
.main-layout {
  position: absolute;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  bottom: var(--status-height);
  display: flex;
}

/* ── Sidebar outils ─────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-card);
  border-right: 1px solid var(--color-border);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: var(--z-sidebar);
  transition: transform var(--transition-base);
}

.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  position: relative;
}

.tool-btn [data-lucide] {
  width: 24px;
  height: 24px;
}

.tool-btn:hover:not(.active) {
  background: var(--color-bg);
  color: var(--color-text);
}

.tool-btn.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.tool-btn:active:not(.active) {
  transform: scale(0.92);
}

.tool-btn.danger:hover:not(.active) {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
}

:root.dark .tool-btn.danger:hover:not(.active) {
  background: rgba(220, 38, 38, 0.15);
}

.sidebar-separator {
  width: 40px;
  height: 1px;
  background: var(--color-border);
  margin: 8px 0;
}

/* ── Canvas ─────────────────────────────────────────────── */
.canvas-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  cursor: default;
}

.canvas-container.tool-select { cursor: default; }
.canvas-container.tool-postit { cursor: crosshair; }
.canvas-container.tool-shape { cursor: crosshair; }
.canvas-container.tool-text { cursor: text; }
.canvas-container.tool-segment { cursor: crosshair; }
.canvas-container.tool-frame { cursor: crosshair; }
.canvas-container.tool-erase { cursor: not-allowed; }
.canvas-container.panning { cursor: grabbing !important; }
.canvas-container.pan-ready { cursor: grab; }

.canvas-svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  /* Désactive le scroll/zoom natif du navigateur sur le canvas
     pour que les gestes touch soient gérés manuellement (pinch, pan). */
  touch-action: none;
}

.canvas-svg .object-group {
  cursor: move;
}

.canvas-svg .selection-rect {
  fill: var(--color-primary);
  fill-opacity: 0.08;
  stroke: var(--color-primary);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

.canvas-svg .selection-outline {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
  pointer-events: none;
}

/* ── Handles de manipulation (resize / rotate) ──────────── */
.canvas-svg .pn-handles {
  pointer-events: none;
}

.canvas-svg .pn-handle {
  fill: #ffffff;
  stroke: var(--color-primary);
  stroke-width: 1;
  pointer-events: all;
  vector-effect: non-scaling-stroke;
}

/* Zone tactile invisible : pas de stroke ni fill visibles.
   Spécificité plus élevée que .pn-handle seul pour override. */
.canvas-svg .pn-handle.pn-handle-touch {
  fill: transparent;
  stroke: none;
  stroke-width: 0;
}

/* Sur mobile : stroke un peu plus visible (mais pas trop) */
@media (max-width: 768px) {
  .canvas-svg .pn-handle {
    stroke-width: 1.5;
  }
  .canvas-svg .pn-handle-rotate-line {
    stroke-width: 1.5;
  }
}

.canvas-svg .pn-handle-resize:hover {
  fill: var(--color-primary-light);
}

.canvas-svg .pn-handle-rotate {
  fill: #ffffff;
  stroke: var(--color-primary);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.canvas-svg .pn-handle-rotate:hover {
  fill: var(--color-primary-light);
}

.canvas-svg .pn-handle-rotate-line {
  stroke: var(--color-primary);
  stroke-width: 1.5;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

/* Handles d'extrémité pour les segments */
.canvas-svg .pn-handle-endpoint {
  fill: var(--color-primary);
  stroke: transparent;
  pointer-events: auto;
  paint-order: stroke;
}

.canvas-svg .pn-handle-endpoint:hover {
  fill: var(--color-primary-hover);
}

/* Handles de waypoints (elbow/curved) — cercles bleus pleins */
/* Waypoint handles — fill visible + stroke transparent large pour zone touch mobile */
.canvas-svg .pn-handle-waypoint {
  fill: var(--color-primary);
  stroke: transparent;
  pointer-events: all;
  cursor: move;
  paint-order: stroke;
}

.canvas-svg .pn-handle-waypoint:hover {
  fill: var(--color-primary-hover);
}

/* Ghost handles — cercles gris semi-transparents + zone touch élargie */
.canvas-svg .pn-handle-ghost {
  fill: #94a3b8;
  fill-opacity: 0.4;
  stroke: transparent;
  pointer-events: all;
  cursor: pointer;
  paint-order: stroke;
  transition: fill-opacity 120ms ease, fill 120ms ease;
}

.canvas-svg .pn-handle-ghost:hover {
  fill: var(--color-primary);
  fill-opacity: 0.8;
}

/* Endpoint handles — même zone touch élargie */
.canvas-svg .pn-handle-endpoint {
  fill: var(--color-primary);
  stroke: transparent;
  pointer-events: all;
  paint-order: stroke;
}

/* Indicateur visuel : objet à l'intérieur d'un frame */
.canvas-svg .object-group[data-in-frame="true"]:hover {
  filter: drop-shadow(0 0 3px rgba(37, 99, 235, 0.35));
}

/* ── Lock distant (édition collaborative) ───────────────
   Objet verrouillé par un autre utilisateur : bordure rouge
   pointillée, badge avec le nom, interactions désactivées. */
.canvas-svg .object-group.pn-locked-remote {
  pointer-events: none;
  opacity: 0.85;
}

.canvas-svg .pn-lock-indicator {
  /* L'indicateur englobe un blocker (pointer-events: all, cursor: not-allowed)
     pour que le hover d'un objet locke affiche le feedback approprie. */
}

.canvas-svg .pn-lock-blocker {
  cursor: not-allowed;
}

.canvas-svg .pn-lock-outline {
  fill: none;
  /* stroke défini inline par renderLockIndicators (couleur par utilisateur) */
  stroke-width: 2;
  stroke-dasharray: 6 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.canvas-svg .pn-lock-badge rect {
  /* fill défini inline par renderLockIndicators (couleur par utilisateur) */
  stroke: #ffffff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.canvas-svg .pn-lock-badge text {
  /* fill défini inline par renderLockIndicators */
  font-family: Inter, sans-serif;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}

/* ── Collab live : curseurs / selections / drag ghosts ───────── */
.canvas-svg .collab-live-layer,
.canvas-svg .collab-live-layer * {
  pointer-events: none;
  user-select: none;
}

.canvas-svg .pn-collab-cursor {
  /* Pas de transition : le 30 Hz cote reseau suffit deja pour un
     mouvement fluide. Une transition ajoutait une latence perceptible. */
}

.canvas-svg .pn-collab-cursor-label text {
  font-family: Inter, sans-serif;
  dominant-baseline: middle;
}

.canvas-svg .pn-collab-selection {
  vector-effect: non-scaling-stroke;
  animation: pn-collab-dash 1.4s linear infinite;
}

.canvas-svg .pn-collab-drag-ghost {
  vector-effect: non-scaling-stroke;
  animation: pn-collab-dash 0.8s linear infinite;
}

@keyframes pn-collab-dash {
  to { stroke-dashoffset: -14; }
}

/* ── Long-press (tactile) ────────────────────────────────
   Feedback visuel pendant et après un appui long sur mobile.
   .long-press-pending  : timer en cours (halo discret bleu)
   .long-press-activated : déclenchement confirmé (pulse rapide)
*/
.long-press-pending {
  filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.55));
  transition: filter 120ms ease-out;
}

.long-press-activated {
  transform-box: fill-box;
  transform-origin: center center;
  animation: longPressPulse 200ms ease-out;
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.75));
}

@keyframes longPressPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.canvas-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  z-index: 10;
  transition: opacity var(--transition-base);
}

.canvas-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-right-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

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

/* ── Panneau propriétés ─────────────────────────────────── */
.properties-panel {
  width: 0;
  min-width: 0;
  flex-shrink: 0;
  background: var(--color-card);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: var(--z-panel);
  overflow: hidden;
  transition: width var(--transition-base);
}

.properties-panel.open {
  width: var(--panel-width);
  overflow: visible;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.04);
}

/* Wrapper desktop : la poignée mobile est masquée,
   le contenu s'affiche directement */
.properties-panel-handle {
  display: none;
}

.properties-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.panel-empty {
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

/* ── Barre de statut ────────────────────────────────────── */
.status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--status-height);
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 12px;
  color: var(--color-text-muted);
  z-index: var(--z-status);
}

.status-left,
.status-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.status-item [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--color-text-soft);
}

/* ── Indicateur de collaboration temps réel ─────────────────── */
.collab-status {
  transition: color 0.2s ease;
}
.collab-status.connected {
  color: #16a34a;
}
.collab-status.connected [data-lucide] {
  color: #16a34a;
}
.collab-status.reconnecting {
  color: #d97706;
}
.collab-status.reconnecting [data-lucide] {
  color: #d97706;
  animation: collab-pulse 1.2s ease-in-out infinite;
}
.collab-status.disconnected {
  color: #dc2626;
}
.collab-status.disconnected [data-lucide] {
  color: #dc2626;
}
@keyframes collab-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.status-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.status-btn:hover {
  background: var(--color-card);
  color: var(--color-text);
}

.status-btn.active {
  background: var(--color-primary, #4F46E5);
  color: #fff;
}

.status-btn.active:hover {
  background: var(--color-primary-hover, #4338CA);
  color: #fff;
}

.status-btn [data-lucide] {
  width: 12px;
  height: 12px;
}

.zoom-label {
  min-width: 48px;
  font-variant-numeric: tabular-nums;
}

/* ── Toasts ─────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: calc(var(--status-height) + 16px);
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  min-width: 240px;
  max-width: 360px;
  padding: 12px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  pointer-events: auto;
  animation: toast-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(8px);
}

.toast.toast-error { border-left-color: var(--color-danger); }
.toast.toast-success { border-left-color: var(--color-success); }
.toast.toast-warning { border-left-color: var(--color-warning); }

.toast.toast-out {
  animation: toast-out 0.2s ease forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(20px); }
}

/* ── Responsive ─────────────────────────────────────────── */
/* Desktop : le menu overflow ("more") est cache par defaut. */
.navbar-more {
  display: none;
}

@media (max-width: 768px) {
  /* Variables mobile */
  :root {
    --navbar-height: 52px;
    --status-height: 44px;
  }

  .navbar-center {
    display: none;
  }

  /* Mobile : affiche le menu "more" et masque les actions secondaires.
     On garde visibles : save-indicator (dot), export (primaire), user.
     Le menu more expose ces actions via des items de dropdown. Note :
     on masque les boutons-triggers, pas les dropdowns eux-memes, pour
     que le dispatch programmatique puisse ouvrir la dropdown du view
     settings a la bonne position sur mobile. */
  .navbar-more {
    display: inline-block;
  }
  #btn-save,
  #btn-copy-link,
  #btn-view-settings,
  #btn-slides,
  #btn-present,
  #btn-share {
    display: none !important;
  }
  /* Le wrapper view-dropdown devient une ancre invisible a droite du
     menu more pour que sa popup s'aligne correctement. */
  #view-dropdown {
    width: 0;
    overflow: visible;
  }
  /* Compacte les gaps de la navbar pour que tout tienne. */
  .navbar-right {
    gap: 6px;
  }
  /* Indicateur de sauvegarde reduit a sa pastille. */
  .save-indicator {
    padding: 0 6px;
  }
  /* Sur mobile, les dropdown-menu prennent toute la largeur dispo
     moins les marges, avec max-height scrollable. */
  .dropdown-menu {
    max-width: calc(100vw - 24px);
  }
  #view-menu {
    max-width: min(320px, calc(100vw - 24px));
  }

  /* Sidebar toggle agrandi pour le pouce (44x44px minimum) */
  .sidebar-toggle {
    display: flex;
    width: 44px;
    height: 44px;
  }

  /* Sidebar en overlay, rétractée par défaut */
  .sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    z-index: calc(var(--z-sidebar) + 5);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Boutons outils agrandis sur mobile */
  .tool-btn {
    width: 52px;
    height: 52px;
  }

  /* Overlay semi-transparent derrière la sidebar ouverte */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: calc(var(--z-sidebar) + 4);
  }

  .sidebar.open ~ .sidebar-overlay,
  .sidebar-overlay.visible {
    display: block;
  }

  /* Properties panel → bottom sheet 3 états sur mobile */
  .properties-panel {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    border-left: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.25s ease-out, height 0.25s ease-out;
    height: 56px;
    overflow: hidden;
    z-index: 90;
  }

  /* État peek : poignée visible, objet accessible */
  .properties-panel.peek {
    transform: translateY(0);
    height: 56px;
  }

  /* État expanded : toutes les propriétés visibles */
  .properties-panel.expanded {
    transform: translateY(0);
    height: 60vh;
  }

  /* Poignée */
  .properties-panel-handle {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    position: relative;
    flex-shrink: 0;
  }

  .properties-panel-grip {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #cbd5e1;
  }

  .properties-panel-title {
    flex: 1;
    margin-top: 12px;
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .properties-panel-toggle {
    margin-top: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
    transition: transform 0.2s;
    flex-shrink: 0;
  }

  .properties-panel.expanded .properties-panel-toggle {
    transform: rotate(180deg);
  }

  /* Corps du panneau (header + body) */
  .properties-panel-body {
    overflow-y: auto;
    height: calc(60vh - 56px);
    -webkit-overflow-scrolling: touch;
  }

  .properties-panel.peek .properties-panel-body {
    display: none;
  }

  /* Ancienne poignée CSS désactivée sur mobile */
  .panel-header::before {
    display: none;
  }

  .panel-header {
    position: relative;
    padding-top: 12px;
  }

  .panel-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Boutons navbar : icône seulement */
  .btn span:not(.logo-text) {
    display: none;
  }

  /* Boutons navbar agrandis pour le pouce */
  .btn-icon {
    width: 44px;
    height: 44px;
  }

  .btn-primary,
  .btn-ghost {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
  }

  .save-indicator .save-label {
    display: none;
  }

  /* Status bar : plus haute, uniquement zoom */
  .status-bar {
    height: var(--status-height);
    padding: 0 8px;
  }

  .status-left .status-item:nth-child(n+2),
  .status-right #status-cursor {
    display: none;
  }

  /* Status buttons agrandis pour le pouce */
  .status-btn {
    height: 36px;
    min-width: 36px;
    padding: 0 8px;
  }

  .status-btn [data-lucide] {
    width: 16px;
    height: 16px;
  }

  .zoom-controls {
    gap: 4px;
    padding: 4px;
  }

  /* Dropdown export : plus accessible */
  .dropdown-menu {
    right: 0;
    min-width: 220px;
  }

  .dropdown-item {
    padding: 12px 16px;
    font-size: 15px;
  }

  .dropdown-item [data-lucide] {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .logo-text {
    display: none;
  }

  /* Sur très petit écran : état expanded prend 70vh */
  .properties-panel.expanded {
    height: 70vh;
  }

  .properties-panel-body {
    height: calc(70vh - 56px);
  }
}

/* ── Toolbar flyouts (post-it colors, shapes, segment styles) ── */
.toolbar-btn.has-flyout {
  position: relative;
}

.toolbar-btn-chevron {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  opacity: 0.55;
  display: flex;
}

.toolbar-btn-chevron [data-lucide] {
  width: 10px;
  height: 10px;
}

.toolbar-flyout {
  position: fixed;
  left: var(--sidebar-width);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  min-width: 200px;
  z-index: calc(var(--z-sidebar) + 5);
  animation: flyout-in 0.15s ease-out;
}

@keyframes flyout-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

.toolbar-flyout-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.toolbar-flyout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.toolbar-flyout-grid.postit-colors {
  grid-template-columns: repeat(6, 1fr);
}

.toolbar-flyout-grid.postit-colors .toolbar-color-swatch {
  width: 32px;
  height: 32px;
}

.toolbar-flyout-grid.shapes {
  grid-template-columns: repeat(5, 1fr);
}

.toolbar-flyout-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Barre d'historique en bas de l'ecran — discrete par defaut, expand au hover */
.history-bar {
  position: fixed;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(203, 213, 225, 0.4);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 500;
  max-width: 70vw;
  opacity: 0.45;
  transition: opacity 0.18s, background 0.18s, box-shadow 0.18s;
}
.history-bar:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

:root.dark .history-bar {
  background: rgba(30, 41, 59, 0.55);
  border-color: rgba(100, 116, 139, 0.4);
}
:root.dark .history-bar:hover {
  background: rgba(30, 41, 59, 0.92);
}

body.presentation-active .history-bar {
  display: none;
}

.history-bar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.history-bar-btn:hover {
  background: var(--color-hover, #f1f5f9);
  color: var(--color-text, #0f172a);
}
.history-bar-btn [data-lucide] {
  width: 13px;
  height: 13px;
}

.history-bar-ticks {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 2px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 50vw;
  scrollbar-width: none;
}
.history-bar-ticks::-webkit-scrollbar { display: none; }

.history-bar-tick {
  flex: 0 0 auto;
  width: 4px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: #cbd5e1;
  cursor: pointer;
  transition: background 0.1s, transform 0.1s, height 0.1s;
}
.history-bar:hover .history-bar-tick {
  height: 16px;
}
.history-bar-tick:hover {
  transform: scaleY(1.2);
}
.history-bar-tick.past {
  background: #94a3b8;
}
.history-bar-tick.current {
  background: var(--color-primary, #2563eb);
  width: 6px;
  transform: scaleY(1.3);
}
.history-bar-tick.future {
  background: #e2e8f0;
}

.history-bar-label {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #94a3b8);
  padding: 0 2px;
  min-width: 30px;
  text-align: right;
  opacity: 0.7;
}
.history-bar:hover .history-bar-label {
  opacity: 1;
}

/* ── Region selector (export rectangulaire) ─────────────── */
.region-selector-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

.region-selector-svg {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: crosshair;
}

.region-selector-rect {
  filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.5));
}

.region-selector-handle {
  cursor: pointer;
  rx: 2;
}

.region-selector-banner {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-card, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 12px 18px;
  min-width: 480px;
  max-width: 85vw;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: region-banner-in 0.2s ease-out;
}
@keyframes region-banner-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Mobile : banner repositionnee au BAS de l'ecran, compacte, et
 * rendue transparente aux pointer events dans ses zones vides pour
 * laisser passer les touch sur le canvas underneath. */
@media (max-width: 768px) {
  .region-selector-banner {
    top: auto;
    bottom: 12px;
    min-width: 0;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 10px 12px;
    gap: 4px;
    border-radius: 10px;
  }
  .region-selector-banner-title {
    font-size: 13px;
  }
  .region-selector-banner-desc {
    display: none;
  }
  .region-selector-banner-dims {
    font-size: 10px;
  }
  .region-selector-actions {
    margin-top: 4px;
    gap: 6px;
  }
  .region-selector-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 8px 10px;
    font-size: 13px;
    min-height: 38px;
  }
  /* Masque le texte des boutons si espace limite, garde l'icone. */
  .region-selector-actions .btn span {
    display: inline;
  }
  /* Le bouton "Annuler" peut etre juste une icone sur tres petit ecran. */
  .region-selector-pages-list {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .region-selector-page-chip {
    flex: 0 0 auto;
  }
}

.region-selector-banner-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #0f172a);
}

.region-selector-banner-desc {
  font-size: 12px;
  color: var(--color-text-muted, #64748b);
  line-height: 1.4;
}

.region-selector-banner-dims {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #64748b);
}

.region-selector-pages-preview {
  margin-top: 4px;
  font-size: 12px;
}

.region-selector-pages-label {
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 4px;
}

.region-selector-pages-empty {
  color: var(--color-text-muted, #94a3b8);
  font-style: italic;
}

.region-selector-pages-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.region-selector-page-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary, #2563eb);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.region-selector-page-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  padding: 0;
}
.region-selector-page-remove [data-lucide] {
  width: 12px;
  height: 12px;
}

.region-selector-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.region-selector-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
}

/* ── Modal d'edition d'animations ─────────────────────── */
.anim-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.15s ease-out;
}

.anim-modal {
  background: var(--color-card, #fff);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: min(900px, 95vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.anim-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.anim-modal-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.anim-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.anim-empty {
  color: var(--color-text-muted, #64748b);
  font-size: 13px;
  padding: 24px 12px;
  text-align: center;
}

.anim-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
}
.anim-row-orphan {
  opacity: 0.6;
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.3);
}

.anim-field {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: 4px;
  background: #fff;
}
.anim-object-select {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 200px;
}

.anim-object-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary, #2563eb);
  border: 1px solid var(--color-primary, #2563eb);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 220px;
  transition: background 0.1s;
}
.anim-object-chip:hover {
  background: #c3dafd;
}
.anim-object-chip [data-lucide] {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.anim-object-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anim-row-orphan .anim-object-chip {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.5);
}

.anim-pick-banner {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 13px;
  font-weight: 500;
  z-index: 10001;
  animation: fadeIn 0.15s ease-out;
  pointer-events: none;
}
.anim-pick-banner [data-lucide] {
  width: 16px;
  height: 16px;
}

.anim-numfield {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  font-size: 10px;
}
.anim-numfield-label {
  color: var(--color-text-muted, #64748b);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.anim-numfield input {
  width: 60px;
  padding: 4px 6px;
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: 4px;
  font-size: 12px;
  box-sizing: border-box;
}

.anim-capture-btn,
.anim-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--color-border, #cbd5e1);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, #64748b);
  transition: background 0.1s, color 0.1s;
  margin-bottom: 0;
  align-self: center;
}
.anim-capture-btn:hover {
  background: var(--color-hover, #f1f5f9);
}
.anim-delete-btn {
  border-color: rgba(220, 38, 38, 0.3);
  color: #dc2626;
  margin-left: auto;
}
.anim-delete-btn:hover {
  background: rgba(220, 38, 38, 0.1);
}
.anim-capture-btn [data-lucide],
.anim-delete-btn [data-lucide] {
  width: 14px;
  height: 14px;
}

.anim-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border, #e2e8f0);
  gap: 10px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Listes dans post-its/shapes/textes : puces/numeros a l'interieur du
 * flux texte pour respecter text-align (gauche/centre/droite). */
.text-editor-overlay ul,
.text-editor-overlay ol,
g.pn-object foreignObject ul,
g.pn-object foreignObject ol {
  list-style-position: inside;
  padding-left: 0;
  margin: 0;
}

/* Listes imbriquees (sous-puces) : decalage visuel pour materialiser
 * la hierarchie. Cible toutes les profondeurs via le selecteur descendant. */
.text-editor-overlay ul ul,
.text-editor-overlay ul ol,
.text-editor-overlay ol ul,
.text-editor-overlay ol ol,
g.pn-object foreignObject ul ul,
g.pn-object foreignObject ul ol,
g.pn-object foreignObject ol ul,
g.pn-object foreignObject ol ol {
  padding-left: 1.5em;
}

/* Indentation hors-liste : execCommand('indent') sur un paragraphe
 * cree un blockquote. On le rend visuellement comme une indentation
 * simple, pas comme une citation (pas de barre verticale par defaut). */
.text-editor-overlay blockquote,
g.pn-object foreignObject blockquote {
  margin: 0;
  padding-left: 1.5em;
}

/* Table flyout : plus large, scrollable si contenu long */
.toolbar-flyout.table-flyout {
  min-width: 240px;
  max-width: 300px;
  max-height: 85vh;
  overflow-y: auto;
}

.table-grid-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.table-grid-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.table-grid-cell {
  transition: background-color 0.08s;
}

.table-shape-btn:hover {
  background: var(--color-hover, #f1f5f9) !important;
}

.table-create-btn:hover {
  background: #1d4ed8 !important;
}

.toolbar-color-swatch {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

.toolbar-color-swatch:hover {
  transform: scale(1.08);
  border-color: var(--color-border-strong);
}

.toolbar-shape-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

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

.toolbar-shape-btn [data-lucide] {
  width: 20px;
  height: 20px;
}

.toolbar-shape-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.toolbar-segment-style {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  min-height: 36px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 13px;
  transition: background var(--transition-fast);
}

.toolbar-segment-style:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}

.segment-preview {
  color: var(--color-text);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Panneau propriétés — sections & champs ───────────── */
.properties-panel.empty .panel-body {
  padding: 24px 16px;
}

.properties-section {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

.panel-body { padding: 0; }
.panel-body > .properties-section:last-child { border-bottom: none; }

.properties-section.properties-actions {
  border-bottom: none;
  padding-top: 20px;
}

/* Grille boutons Z-order (2x2) */
.properties-zorder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.properties-zorder-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-height: 52px;
}

.properties-zorder-btn:hover {
  background: var(--color-card);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.properties-zorder-btn:active {
  transform: scale(0.97);
}

.properties-zorder-btn i {
  width: 18px;
  height: 18px;
}

.properties-zorder-btn span {
  font-size: 10px;
  white-space: nowrap;
}

.properties-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.properties-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.properties-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.properties-field.block {
  grid-column: 1 / -1;
  margin-bottom: 10px;
}

.properties-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.properties-input,
.properties-select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-card);
  transition: border-color var(--transition-fast);
}

.properties-input:focus,
.properties-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.properties-input.mono {
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.properties-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-text);
  font-family: inherit;
  resize: vertical;
  transition: border-color var(--transition-fast);
  margin-bottom: 10px;
}

.properties-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.properties-color-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.properties-color {
  width: 36px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  cursor: pointer;
  flex-shrink: 0;
}

.properties-color-row .properties-input {
  flex: 1;
}

.properties-palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}

.properties-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.properties-swatch:hover {
  transform: scale(1.1);
}

.properties-swatch.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* Swatch "transparent" : checkerboard clair/sombre + barre diagonale rouge */
.properties-swatch-transparent {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%, #e2e8f0),
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%, #e2e8f0);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  position: relative;
}
.properties-swatch-transparent::after {
  content: '';
  position: absolute;
  inset: 20%;
  background: linear-gradient(to top right,
    transparent 0%, transparent calc(50% - 1.5px),
    #dc2626 calc(50% - 1.5px), #dc2626 calc(50% + 1.5px),
    transparent calc(50% + 1.5px), transparent 100%);
}

/* Slider (épaisseur de segment, etc.) */
.properties-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.properties-slider-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.properties-slider {
  width: 100%;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Aperçu segment dans le panneau propriétés */
.segment-preview {
  width: 100%;
  height: 40px;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.segment-preview-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Waypoints dans le panneau propriétés */
.properties-waypoints-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.properties-waypoint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.properties-waypoint-label {
  font-size: 12px;
  color: var(--color-text-muted);
}

.properties-waypoint-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.properties-waypoint-delete:hover {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.1);
}

.properties-waypoint-delete [data-lucide] {
  width: 14px;
  height: 14px;
}

.properties-waypoints-clear {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border: 1px dashed var(--color-border);
  background: none;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.properties-waypoints-clear:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.properties-waypoints-clear [data-lucide] {
  width: 14px;
  height: 14px;
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-danger-hover);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* ── Toolbar de formatage texte ──────────────────────── */
.text-format-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  margin-top: 8px;
}

.text-format-toolbar.compact {
  padding: 4px;
  gap: 2px;
}

.text-format-group {
  display: flex;
  gap: 2px;
  padding-right: 6px;
  margin-right: 2px;
  border-right: 1px solid var(--color-border);
}

.text-format-group:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.text-format-select {
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  font-size: 12px;
  max-width: 92px;
}

.text-format-size {
  width: 48px;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  font-size: 12px;
  text-align: center;
}

.text-format-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 13px;
  transition: all var(--transition-fast);
}

.text-format-btn:hover {
  background: var(--color-card);
}

.text-format-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.text-format-btn [data-lucide] {
  width: 14px;
  height: 14px;
}

/* ── Menu de zoom ───────────────────────────────────── */
.zoom-menu {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  min-width: 150px;
  z-index: var(--z-toast);
}

.zoom-menu-item {
  width: 100%;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text);
  text-align: left;
  transition: background var(--transition-fast);
}

.zoom-menu-item:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}

.zoom-menu-fit {
  border-top: 1px solid var(--color-border);
  margin-top: 2px;
  padding-top: 8px;
}

/* ── État masqué du panneau ────────────────────────── */
.properties-panel.hidden {
  display: none;
}

/* ── Rendu texte libre (listes, formatage) ─────────── */
.pn-text-content ul,
.pn-text-content ol {
  padding-left: 20px;
  margin: 4px 0;
}

.pn-text-content li {
  margin: 2px 0;
}

/* ── Éditeur de texte inline ───────────────────────── */
.text-editor-overlay {
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.98);
  outline: none;
  cursor: text;
  box-shadow: 0 0 0 3px var(--color-primary-light), 0 4px 16px rgba(37, 99, 235, 0.08);
  caret-color: var(--color-primary);
  transition: box-shadow 0.15s ease;
}

:root.dark .text-editor-overlay {
  background: rgba(37, 38, 43, 0.98);
  box-shadow: 0 0 0 3px var(--color-primary-light), 0 4px 16px rgba(0, 0, 0, 0.2);
}

.text-editor-overlay:focus {
  outline: none;
}

.text-editor-overlay ul,
.text-editor-overlay ol {
  padding-left: 20px;
  margin: 4px 0;
}

.text-editor-overlay li {
  margin: 2px 0;
}

/* ── Toolbar flottante de formatage ────────────────── */
.floating-text-toolbar {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  background: #1e293b;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: var(--z-toast);
  user-select: none;
  -webkit-user-select: none;
  font-family: 'Inter', system-ui, sans-serif;
  animation: floatingToolbarIn 140ms ease-out;
}

@keyframes floatingToolbarIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-text-separator {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 4px;
}

.floating-text-select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  max-width: 110px;
  cursor: pointer;
}

.floating-text-select:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.floating-text-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.floating-text-size {
  width: 46px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.floating-text-size::-webkit-inner-spin-button,
.floating-text-size::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.floating-text-size:focus {
  outline: none;
  border-color: var(--color-primary);
}

.format-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0;
}

.format-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.format-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.format-btn.active:hover {
  background: var(--color-primary-hover);
}

.format-btn [data-lucide] {
  width: 16px;
  height: 16px;
}

/* ── Couleur texte inline (bouton toolbar flottante) ──── */
.format-color-btn {
  position: relative;
}

.format-color-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}

/* ── Sous-menu surlignage ────────────────────────────── */
.highlight-submenu {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: #1e293b;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
  animation: floatingToolbarIn 140ms ease-out;
}

.highlight-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  padding: 0;
  background: none;
}

.highlight-swatch:hover {
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.15);
}

.highlight-clear {
  background: #ffffff !important;
  color: #333;
}

.highlight-clear [data-lucide] {
  width: 12px;
  height: 12px;
  stroke: #666;
}

/* ── Boutons d'alignement vertical (panneau propriétés) ─ */
.properties-valign-group {
  display: flex;
  gap: 4px;
}

.properties-valign-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.properties-valign-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.properties-valign-btn.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.properties-valign-btn [data-lucide] {
  width: 16px;
  height: 16px;
}

/* ── Modal de partage ──────────────────────────────────── */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: share-fade-in 0.15s ease;
}

@keyframes share-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.share-modal {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: share-slide-in 0.2s ease;
}

@keyframes share-slide-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.share-modal-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.share-modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.share-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.share-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.share-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.share-radio {
  display: block;
  cursor: pointer;
  position: relative;
}

.share-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.share-radio-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background: var(--color-card);
}

.share-radio:hover .share-radio-content {
  border-color: var(--color-border-strong);
  background: var(--color-bg);
}

.share-radio input[type="radio"]:checked + .share-radio-content {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.share-radio-content [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.share-radio input[type="radio"]:checked + .share-radio-content [data-lucide] {
  color: var(--color-primary);
}

.share-radio-content strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.share-radio-content em {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.share-select {
  padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.share-select:hover {
  border-color: var(--color-border-strong);
}

.share-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.share-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

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

.share-divider span {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.share-links-list {
  min-height: 40px;
}

.share-empty {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 12px;
}

.share-error {
  color: var(--color-danger);
}

.share-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-link-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.share-link-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.share-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.share-badge-viewer {
  background: #e0f2fe;
  color: #075985;
}

.share-badge-editor {
  background: #dcfce7;
  color: #166534;
}

.share-link-dates {
  font-size: 11px;
  color: var(--color-text-muted);
}

.share-link-url {
  width: 100%;
  padding: 6px 8px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-link-url:focus {
  outline: none;
  border-color: var(--color-primary);
}

.share-link-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.share-link-actions .btn-icon {
  width: 30px;
  height: 30px;
}

.share-link-revoke:hover:not(:disabled) {
  color: var(--color-danger) !important;
  background: #fee2e2 !important;
}

/* Modal nom d'invité */
.guest-name-modal {
  max-width: 400px;
}

.guest-name-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.guest-name-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: var(--color-card);
  transition: border-color var(--transition-fast);
}

.guest-name-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.guest-name-input-error {
  border-color: var(--color-danger);
}

.guest-name-actions {
  margin-top: 14px;
}

/* ── Badge lecture seule ──────────────────────────────── */
.viewer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #bae6fd;
}

.viewer-badge [data-lucide] {
  width: 14px;
  height: 14px;
}

.viewer-badge[hidden] {
  display: none !important;
}

/* ── Mode viewer : désactiver les interactions ─────────── */
body.mode-viewer .sidebar .tool-btn:not([data-tool="select"]) {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

body.mode-viewer .canvas-container,
body.mode-viewer .canvas-container * {
  cursor: default !important;
}

body.mode-viewer .properties-panel.readonly .panel-body {
  opacity: 0.8;
}

body.mode-viewer .properties-panel.readonly input:disabled,
body.mode-viewer .properties-panel.readonly select:disabled,
body.mode-viewer .properties-panel.readonly textarea:disabled,
body.mode-viewer .properties-panel.readonly button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.mode-viewer .board-title-input[readonly] {
  cursor: default;
  background: transparent;
}

@media (max-width: 768px) {
  .share-modal {
    max-width: 100%;
    max-height: calc(100vh - 16px);
  }
  .share-modal-body {
    padding: 16px;
  }
  .viewer-badge span {
    display: none;
  }
  .viewer-badge {
    padding: 6px;
  }
}

.format-btn span {
  line-height: 1;
}

/* ── Boutons petits (alignement, distribution) ──────────── */
.btn-sm {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg, #f1f5f9);
  color: var(--color-text, #1e293b);
  border: 1px solid var(--color-border, #e2e8f0);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s);
  text-align: center;
  line-height: 1.2;
}

.btn-sm:hover {
  background: var(--color-primary, #4F46E5);
  color: #fff;
  border-color: var(--color-primary, #4F46E5);
}

/* ── Guides d'alignement (overlay SVG) ──────────────────── */
.pn-align-guides line {
  pointer-events: none;
}

/* ── Outline sélection d'enfant de groupe ────────────────── */
.selection-outline-child {
  fill: none;
  stroke: #2563eb;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.55;
  pointer-events: none;
}

/* ── Modal raccourcis clavier ────────────────────────────── */
.shortcuts-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: shortcuts-fade-in 140ms ease-out;
}

@keyframes shortcuts-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.shortcuts-modal {
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  max-width: 860px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #334155;
}

.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #334155;
}

.shortcuts-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
}

.shortcuts-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 24px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.shortcuts-close:hover {
  background: #334155;
  color: #f1f5f9;
}

.shortcuts-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 28px;
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.shortcuts-group-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px;
}

.shortcuts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shortcuts-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.shortcuts-label {
  color: #cbd5e1;
  flex: 1 1 auto;
}

.shortcuts-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.shortcuts-kbd {
  display: inline-block;
  padding: 2px 6px;
  min-width: 22px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  background: #334155;
  border: 1px solid #475569;
  border-bottom-width: 2px;
  border-radius: 4px;
  line-height: 1.4;
}

.shortcuts-sep {
  color: #64748b;
  font-size: 11px;
  padding: 0 1px;
}

@media (max-width: 640px) {
  .shortcuts-body {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .shortcuts-modal {
    max-height: calc(100vh - 24px);
  }
}

/* ── Mini-map ──────────────────────────────────────────── */
.minimap {
  position: fixed;
  bottom: calc(var(--status-height) + 12px);
  right: 12px;
  width: 150px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 70;
  overflow: hidden;
  transition: height 160ms ease, width 160ms ease;
}

.minimap-svg {
  display: block;
  cursor: crosshair;
  background: #f8fafc;
  width: 100%;
  height: 100px;
}

.minimap-toggle {
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.minimap-toggle:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.minimap-collapsed .minimap-svg {
  display: none;
}

.minimap-collapsed .minimap-header {
  border-bottom: none;
}

.minimap-collapsed {
  width: 120px;
  height: auto;
}

.minimap-viewport-rect {
  pointer-events: none;
}

@media (max-width: 768px) {
  .minimap {
    display: none;
  }
}

/* ── État vide du canvas ──────────────────────────────────── */
.canvas-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  /* Empeche que le caret d'un contenteditable en cours d'edition fuie
     dans le texte de cet etat-vide pendant des manipulations DOM. */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 5;
  padding: 32px;
  text-align: center;
}

.canvas-empty-state.visible {
  opacity: 1;
}

.canvas-empty-icon {
  width: 64px;
  height: 64px;
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.canvas-empty-icon [data-lucide] {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}

.canvas-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}

.canvas-empty-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  max-width: 420px;
  line-height: 1.6;
}

.canvas-empty-subtitle kbd,
.canvas-empty-hints kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  line-height: 1.4;
}

.canvas-empty-hints {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.canvas-empty-hint {
  font-size: 12px;
  color: var(--color-text-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Hint d'outil (crosshair tools) ──────────────────────── */
.canvas-tool-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 41, 59, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
  /* user-select: none empeche le navigateur de "deplacer" la selection
     courante vers ce hint lors de manipulations DOM (sinon le caret d'un
     contenteditable en cours d'edition fuit dans le texte du hint et
     l'utilisateur perd le focus visuel sur l'overlay). */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  z-index: 15;
  backdrop-filter: blur(4px);
}

.canvas-tool-hint.visible {
  opacity: 1;
}

/* ── Bouton Enregistrer : caché quand état "saved" ─────────── */
.save-btn-explicit {
  transition: opacity var(--transition-base), max-width var(--transition-base);
}

.save-indicator:not(.dirty):not(.saving) ~ .save-btn-explicit {
  /* Impossible à faire en CSS pur sans JS — géré par JS */
}

/* ── Bouton aide raccourcis dans la status bar ──────────────── */
.status-help-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
}

.status-help-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.status-help-btn [data-lucide] {
  width: 12px;
  height: 12px;
}

.status-help-label {
  font-size: 11px;
}

/* ── Toolbar : labels tooltips au survol ─────────────────────── */
.tool-btn {
  position: relative;
}

.tool-btn::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: calc(var(--z-sidebar) + 20);
  box-shadow: var(--shadow-md);
}

.tool-btn:hover::after {
  opacity: 1;
}

/* Ne pas afficher le tooltip si sidebar ouverte en overlay (mobile) */
@media (max-width: 768px) {
  .tool-btn::after {
    display: none;
  }
}

/* ── Toolbar : indicateur variante active (chevron mis en valeur) ── */
.toolbar-btn.has-flyout.active .toolbar-btn-chevron {
  opacity: 1;
  color: rgba(255, 255, 255, 0.8);
}

/* ── Section titre multi-sélection moins agressif ──────────────── */
.properties-multi-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.properties-multi-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
}

.properties-multi-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

/* ── Collab disconnected : orange au lieu de rouge ──────────────── */
.collab-status.disconnected {
  color: var(--color-text-muted);
}

.collab-status.disconnected [data-lucide] {
  color: var(--color-text-muted);
}

/* ── Mini-map toggle icône Lucide ────────────────────────────── */
.minimap-toggle {
  font-size: 0; /* masquer le contenu texte −/+ */
}

.minimap-toggle [data-lucide] {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

/* ── Board title : hint édition ──────────────────────────────── */
.board-title-input:not(:focus) {
  cursor: text;
}

.board-title-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* ── Save indicator : texte "Modifié" en amber ────────────── */
.save-indicator.dirty .save-label {
  color: var(--color-warning);
}

/* ── Minimap header (titre + toggle) ──────────────────────── */
.minimap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 2px;
  border-bottom: 1px solid var(--color-border);
}

.minimap-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Status bar help btn : agrandit sur mobile ─────────────── */
@media (max-width: 768px) {
  .status-help-label {
    display: none;
  }
  .status-help-btn {
    min-width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-sm);
  }
  .status-help-btn [data-lucide] {
    width: 16px;
    height: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Dark mode
   ══════════════════════════════════════════════════════════════ */

:root.dark {
  --color-bg: #1a1b1e;
  --color-card: #25262b;
  --color-border: #373a40;
  --color-border-strong: #4a4e57;
  --color-text: #e2e8f0;
  --color-text-muted: #a1a7b3;
  --color-text-soft: #6b7280;
  --color-primary-light: rgba(37, 99, 235, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

:root.dark body {
  color-scheme: dark;
}

:root.dark .navbar {
  background: rgba(37, 38, 43, 0.92);
}

:root.dark .dashboard-topbar {
  background: rgba(37, 38, 43, 0.92);
}

:root.dark .board-title-input:hover {
  background: var(--color-bg);
}

:root.dark .board-title-input:focus {
  background: var(--color-card);
}

:root.dark .canvas-container {
  background: #212226;
}

:root.dark .canvas-svg {
  background: #212226;
}

:root.dark .tool-btn::after {
  background: #e2e8f0;
  color: #1e293b;
}

:root.dark .properties-color {
  background: var(--color-card);
}

:root.dark .dropdown-menu {
  background: var(--color-card);
  border-color: var(--color-border);
}

:root.dark .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

:root.dark .toast {
  background: var(--color-card);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ══════════════════════════════════════════════════════════════
   Login modal
   ══════════════════════════════════════════════════════════════ */

.login-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.login-modal {
  width: 100%;
  max-width: 400px;
  margin: 16px;
  background: var(--color-card);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  padding: 36px;
  animation: loginFadeIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-modal-brand {
  text-align: center;
  margin-bottom: 24px;
}

.login-brand-logo {
  display: block;
  max-width: 260px;
  width: 100%;
  height: auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 4px 14px rgba(37, 99, 235, 0.18));
}

.login-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

.login-brand-mark [data-lucide] {
  width: 24px;
  height: 24px;
}

.login-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.login-modal-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
}

.login-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.login-optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.login-input {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.login-input::placeholder {
  color: var(--color-text-soft);
}

.login-error {
  font-size: 13px;
  color: var(--color-danger);
  margin: 0;
}

.login-submit {
  margin-top: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-lg);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border: none;
}
.btn-danger:hover {
  background: #dc2626;
}

/* ══════════════════════════════════════════════════════════════
   Dialogues custom (prompt / confirm)
   ══════════════════════════════════════════════════════════════ */

.pn-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: wbDialogFadeIn 0.15s ease;
}

.pn-dialog-overlay.pn-dialog-closing {
  animation: wbDialogFadeOut 0.15s ease forwards;
}

@keyframes wbDialogFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wbDialogFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.pn-dialog {
  width: 100%;
  max-width: 420px;
  margin: 16px;
  background: var(--color-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 28px 32px;
  animation: wbDialogSlideIn 0.2s ease;
}

@keyframes wbDialogSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pn-dialog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: 16px;
}

.pn-dialog-icon [data-lucide] {
  width: 22px;
  height: 22px;
}

.pn-dialog-icon-danger {
  background: #fef2f2;
  color: var(--color-danger);
}

.dark .pn-dialog-icon-danger {
  background: rgba(239, 68, 68, 0.15);
}

.pn-dialog-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px;
}

.pn-dialog-message {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.pn-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pn-dialog-input {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pn-dialog-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.pn-dialog-input::placeholder {
  color: var(--color-text-soft);
}

.pn-dialog-error {
  font-size: 13px;
  color: var(--color-danger);
  margin: 0;
}

.pn-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   Dashboard
   ══════════════════════════════════════════════════════════════ */

.dashboard-view {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--color-bg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dashboard-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.dashboard-topbar-left,
.dashboard-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.dashboard-brand:hover {
  opacity: 0.85;
}

.dashboard-brand-logo {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.12));
}

/* Fallback : ancien branding (logo-mark/text) reste compatible si utilise */
.dashboard-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
}

.dashboard-brand-mark [data-lucide] {
  width: 18px;
  height: 18px;
}

.dashboard-content {
  flex: 1;
  padding: 32px 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

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

.dashboard-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}

.dashboard-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text-muted);
  min-width: 240px;
}

.dashboard-search [data-lucide] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dashboard-search-input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 14px;
  color: var(--color-text);
}

.dashboard-search-input::placeholder {
  color: var(--color-text-soft);
}

/* Grille de cartes */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.board-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  cursor: default;
}

.board-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.board-card-thumb {
  aspect-ratio: 5 / 3;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s ease;
}

.board-card:hover .board-card-thumb {
  background: var(--color-primary-light);
}

.board-card-thumb svg {
  width: 100%;
  height: 100%;
}

.board-card-body {
  padding: 12px 16px;
}

.board-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.board-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  margin: 0;
}

.board-card-title:hover {
  color: var(--color-primary);
}

.board-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.board-card:hover .board-card-actions {
  opacity: 1;
}

.board-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.board-card-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.board-card-btn-danger:hover {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
}

.board-card-btn [data-lucide] {
  width: 14px;
  height: 14px;
}

.board-card-meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.board-card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.board-card-meta-item [data-lucide] {
  width: 13px;
  height: 13px;
}

.board-card-rename-input {
  flex: 1;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Empty state */
.dashboard-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
}

.dashboard-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  animation: emptyIconPulse 3s ease-in-out infinite;
}

@keyframes emptyIconPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

.dashboard-empty-icon [data-lucide] {
  width: 28px;
  height: 28px;
}

.dashboard-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.dashboard-empty-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
}

.dashboard-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px;
  color: var(--color-text-muted);
  animation: dashboardLoadPulse 1.5s ease-in-out infinite;
}

@keyframes dashboardLoadPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Transform section (rotation/symétrie) ────────────── */

.properties-transform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.properties-transform-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 10px;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.properties-transform-btn:hover {
  background: var(--color-card);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.properties-transform-btn:active {
  transform: scale(0.97);
}

.properties-transform-btn i {
  width: 18px;
  height: 18px;
}

.properties-transform-btn span {
  font-size: 10px;
  white-space: nowrap;
}

/* ── Shape params sub-title ───────────────────────────── */

.properties-params-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 10px;
  margin-bottom: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

/* ── Breadcrumb navigation ────────────────────────────────── */
.dashboard-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.dashboard-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

.breadcrumb-item {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-weight: 500;
}

.breadcrumb-link {
  cursor: pointer;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.breadcrumb-current {
  color: var(--color-text);
  font-weight: 600;
}

.breadcrumb-root {
  font-size: 16px;
}

.breadcrumb-sep {
  display: flex;
  align-items: center;
  color: var(--color-text-soft);
}

.breadcrumb-sep [data-lucide] {
  width: 14px;
  height: 14px;
}

/* ── Folder card ─────────────────────────────────────────── */
.folder-card-thumb {
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
}

.folder-icon-wrapper [data-lucide] {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.folder-card:hover .folder-icon-wrapper {
  background: var(--color-primary);
}

.folder-card:hover .folder-icon-wrapper [data-lucide] {
  color: #fff;
}

/* ── Move dialog ─────────────────────────────────────────── */
.move-modal {
  max-width: 440px;
}

.move-folder-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 400px;
  overflow-y: auto;
}

.move-folder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.move-folder-item:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.move-folder-item [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.move-folder-item:hover [data-lucide] {
  color: var(--color-primary);
}

.move-folder-current {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.move-folder-current-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 2px 8px;
  border-radius: 10px;
}

/* ── Share permission select (inline on existing links) ───── */
.share-permission-select {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.share-permission-select:hover {
  border-color: var(--color-primary);
}

.share-permission-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.share-permission-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Badge with icon in share links */
.share-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.share-badge [data-lucide] {
  width: 12px;
  height: 12px;
}

/* ── Access level indicator in board header (extensions) ──── */
.viewer-badge.badge-viewer {
  background: #e0f2fe;
  color: #075985;
  border-color: #bae6fd;
}

.viewer-badge.badge-editor {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

/* Mobile dashboard */
@media (max-width: 768px) {
  .dashboard-topbar {
    padding: 10px 16px;
  }
  .dashboard-content {
    padding: 20px 16px;
  }
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-search {
    min-width: unset;
    width: 100%;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .board-card-actions {
    opacity: 1;
  }
  .dashboard-breadcrumb {
    font-size: 13px;
  }
  .breadcrumb-root {
    font-size: 14px;
  }
  .move-folder-list {
    max-height: 300px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Polish — Transitions et micro-interactions globales
   ══════════════════════════════════════════════════════════════ */

/* Focus ring universel — accessibilité */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Smooth scroll pour les panneaux */
.panel-body,
.slides-panel-body,
.properties-panel-body {
  scroll-behavior: smooth;
}

/* Amélioration du logo mark — gradient subtil */
.logo-mark {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.dashboard-brand-mark {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Status bar — séparateur subtil et ombre */
.status-bar {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.03);
}

/* Sidebar — ombre interne */
.sidebar {
  box-shadow: 1px 0 8px rgba(0, 0, 0, 0.03);
}

/* Dropdown menu — meilleure animation */
.dropdown-menu {
  animation: dropdownIn 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   Toolbar de formatage texte — améliorations mobiles
   ══════════════════════════════════════════════════════════════ */

/* Floating toolbar — meilleure ombre et plus aérée */
.floating-text-toolbar {
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Boutons de la toolbar — plus grands sur mobile */
@media (max-width: 768px) {
  .floating-text-toolbar {
    padding: 10px 12px;
    gap: 4px;
    flex-wrap: wrap;
    max-width: calc(100vw - 24px);
    border-radius: 12px;
    /* Reste au-dessus du clavier virtuel */
    position: fixed !important;
    z-index: 10001 !important;
  }

  .format-btn {
    width: 40px;
    height: 40px;
    font-size: 15px;
    border-radius: var(--radius-md);
  }

  .format-btn [data-lucide] {
    width: 20px;
    height: 20px;
  }

  .floating-text-select {
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
    max-width: 120px;
    border-radius: var(--radius-md);
  }

  .floating-text-size {
    width: 52px;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: var(--radius-md);
  }

  .floating-text-separator {
    height: 28px;
    margin: 0 6px;
  }

  .highlight-submenu {
    gap: 6px;
    padding: 10px 12px;
  }

  .highlight-swatch {
    width: 32px;
    height: 32px;
  }

  /* Clavier virtuel — garder la toolbar visible */
  .text-editor-overlay {
    margin-bottom: env(keyboard-inset-height, 0px);
  }
}

/* Toolbar dans le panneau propriétés — plus aéré */
.text-format-toolbar {
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.text-format-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.text-format-btn:hover {
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
  .text-format-toolbar {
    padding: 8px;
    gap: 4px;
    flex-wrap: wrap;
  }

  .text-format-btn {
    width: 38px;
    height: 38px;
  }

  .text-format-select {
    height: 36px;
    font-size: 13px;
  }

  .text-format-size {
    height: 36px;
    width: 56px;
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Mode présentation — overlay et contrôles
   ══════════════════════════════════════════════════════════════ */

/* Quand le mode présentation est actif, masquer l'UI de l'éditeur */
body.presentation-active .navbar,
body.presentation-active .sidebar,
body.presentation-active .status-bar,
body.presentation-active .minimap,
body.presentation-active .properties-panel,
body.presentation-active .sidebar-overlay,
body.presentation-active .canvas-empty-state,
body.presentation-active .canvas-tool-hint,
body.presentation-active .slides-panel {
  display: none !important;
}

body.presentation-active .main-layout {
  top: 0;
  bottom: 0;
}

body.presentation-active .canvas-container {
  cursor: default;
}

/* Overlay du mode présentation */
.presentation-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.presentation-overlay.visible {
  opacity: 1;
}

/* Spotlight — fond sombre semi-transparent */
.presentation-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.15) 100%
  );
  pointer-events: none;
}

/* Barre de contrôle en bas */
.presentation-controls {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  animation: presControlsIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
  z-index: 9001;
}

@keyframes presControlsIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.pres-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pres-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.pres-ctrl-btn:active {
  transform: scale(0.92);
}

.pres-ctrl-btn [data-lucide] {
  width: 20px;
  height: 20px;
}

.pres-ctrl-exit {
  margin-left: 8px;
}

.pres-ctrl-exit:hover {
  background: rgba(220, 38, 38, 0.3);
  color: #fff;
}

/* Boutons enregistrement video + micro */
.pres-ctrl-mic.active {
  background: rgba(59, 130, 246, 0.35);
  color: #fff;
}

.pres-ctrl-record {
  color: #fca5a5;
}

.pres-ctrl-record:hover {
  background: rgba(220, 38, 38, 0.25);
  color: #fff;
}

.pres-ctrl-record.recording {
  background: rgba(220, 38, 38, 0.5);
  color: #fff;
  animation: pres-record-pulse 1.5s ease-in-out infinite;
}

@keyframes pres-record-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

.pres-counter {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  justify-content: center;
}

.pres-counter-current {
  color: #fff;
  font-size: 16px;
}

.pres-counter-sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}

.pres-counter-total {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* Barre de progression */
.pres-progress-bar {
  position: absolute;
  bottom: -4px;
  left: 16px;
  right: 16px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.pres-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (max-width: 768px) {
  .presentation-controls {
    bottom: 16px;
    padding: 8px 12px;
    gap: 8px;
  }

  .pres-ctrl-btn {
    width: 44px;
    height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Panneau de gestion des slides
   ══════════════════════════════════════════════════════════════ */

.slides-panel {
  position: fixed;
  top: var(--navbar-height);
  right: 0;
  width: 340px;
  bottom: var(--status-height);
  background: var(--color-card);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  animation: slidesPanelIn 0.2s ease;
}

@keyframes slidesPanelIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Cadre en pointillés visualisant la zone de presentation quand le
   panneau Slides est ouvert. Non-interactif (pointer-events: none). */
.presentation-frame-overlay {
  position: fixed;
  pointer-events: none;
  z-index: 180;
  box-sizing: border-box;
  border: 2px dashed rgba(37, 99, 235, 0.55);
  border-radius: 4px;
}

.presentation-frame-overlay .presentation-frame-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(37, 99, 235, 0.7);
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.08);
}

.presentation-frame-overlay .presentation-frame-center::before,
.presentation-frame-overlay .presentation-frame-center::after {
  content: '';
  position: absolute;
  background: rgba(37, 99, 235, 0.7);
}

.presentation-frame-overlay .presentation-frame-center::before {
  left: 50%;
  top: -10px;
  width: 1.5px;
  height: 48px;
  transform: translateX(-50%);
}

.presentation-frame-overlay .presentation-frame-center::after {
  top: 50%;
  left: -10px;
  width: 48px;
  height: 1.5px;
  transform: translateY(-50%);
}

.presentation-frame-overlay .presentation-frame-label {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(37, 99, 235, 0.85);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.anim-field-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Presence : avatars des utilisateurs connectes ───────── */
.presence-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}

.presence-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  border: 2px solid var(--color-card, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  margin-left: -6px;
  cursor: default;
  transition: transform 0.12s ease;
}

.presence-avatar:first-child {
  margin-left: 0;
}

.presence-avatar:hover {
  transform: scale(1.08);
  z-index: 1;
}

.presence-overflow {
  background: var(--color-muted, #94a3b8);
}

/* ── URL primaire du board dans la modal de partage ──────── */
.share-primary-url {
  margin-bottom: 20px;
  padding: 14px;
  background: var(--color-bg, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
}

.share-primary-url-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted, #64748b);
  margin-bottom: 8px;
}

.share-primary-url-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.share-primary-url-input {
  flex: 1 1 auto;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text, #1e293b);
  min-width: 0;
}

.share-primary-url-input:focus {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: -1px;
}

.share-primary-url-hint {
  margin: 8px 0 0 0;
  font-size: 11px;
  color: var(--color-muted, #64748b);
  line-height: 1.5;
}

.share-primary-url-hint [data-lucide] {
  display: inline-block;
  vertical-align: text-bottom;
  width: 12px;
  height: 12px;
}

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

.slides-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.slides-panel-title [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.slides-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

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

.slides-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slides-panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* Slide item */
.slide-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.slide-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.slide-item-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.slide-item-body {
  flex: 1;
  min-width: 0;
}

.slide-item-label {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.slide-item-label:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}

.slide-item-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.slide-item-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.slide-item:hover .slide-item-actions {
  opacity: 1;
}

.slide-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.slide-action-btn:hover:not(:disabled) {
  background: var(--color-card);
  color: var(--color-text);
}

.slide-action-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.slide-action-btn [data-lucide] {
  width: 14px;
  height: 14px;
}

.slide-action-danger:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
}

/* Boutons du footer */
.slides-add-btn {
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
}

.slides-add-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.slides-present-btn {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
}

/* État vide */
.slides-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-muted);
}

.slides-empty [data-lucide] {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  color: var(--color-text-soft);
}

.slides-empty p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.slides-empty-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-top: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .slides-panel {
    width: 100%;
    top: 0;
    bottom: 0;
    border-left: none;
    z-index: 500;
  }

  .slide-item-actions {
    opacity: 1;
  }
}

/* Dark mode — slides panel */
:root.dark .slide-item {
  background: rgba(255, 255, 255, 0.04);
}

:root.dark .slide-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

:root.dark .slide-item-label {
  color: var(--color-text);
}

:root.dark .presentation-controls {
  background: rgba(15, 23, 42, 0.92);
}

/* ══════════════════════════════════════════════════════════════
   Dark mode — améliorations supplémentaires
   ══════════════════════════════════════════════════════════════ */

:root.dark .btn-primary {
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.4);
}

:root.dark .btn-primary:hover:not(:disabled) {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.5);
}

:root.dark .board-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:root.dark .tool-btn.active {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

:root.dark .toast {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:root.dark .login-brand-mark {
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}

:root.dark .logo-mark {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

:root.dark .dashboard-brand-mark {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

:root.dark .properties-panel.open {
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.2);
}

:root.dark .status-bar {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}

:root.dark .sidebar {
  box-shadow: 1px 0 8px rgba(0, 0, 0, 0.15);
}

:root.dark .dashboard-empty-icon {
  background: rgba(37, 99, 235, 0.15);
}

:root.dark .canvas-empty-icon {
  background: rgba(37, 99, 235, 0.15);
}

/* ══════════════════════════════════════════════════════════════
   Scrollbar styling — subtile et cohérente
   ══════════════════════════════════════════════════════════════ */

.panel-body::-webkit-scrollbar,
.slides-panel-body::-webkit-scrollbar,
.share-modal-body::-webkit-scrollbar,
.shortcuts-body::-webkit-scrollbar,
.dashboard-view::-webkit-scrollbar {
  width: 6px;
}

.panel-body::-webkit-scrollbar-track,
.slides-panel-body::-webkit-scrollbar-track,
.share-modal-body::-webkit-scrollbar-track,
.shortcuts-body::-webkit-scrollbar-track,
.dashboard-view::-webkit-scrollbar-track {
  background: transparent;
}

.panel-body::-webkit-scrollbar-thumb,
.slides-panel-body::-webkit-scrollbar-thumb,
.share-modal-body::-webkit-scrollbar-thumb,
.shortcuts-body::-webkit-scrollbar-thumb,
.dashboard-view::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}

.panel-body::-webkit-scrollbar-thumb:hover,
.slides-panel-body::-webkit-scrollbar-thumb:hover,
.share-modal-body::-webkit-scrollbar-thumb:hover,
.shortcuts-body::-webkit-scrollbar-thumb:hover,
.dashboard-view::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-soft);
}


/* ========================================================
   Export vers Pocket Consultant — dialog specifique
   ========================================================
   Reutilise .share-modal-overlay/.share-modal comme base
   et ajoute les styles de l'arbre organizer + hint + status.
*/

.export-to-poco-modal {
  max-width: 640px;
  width: 100%;
}

.poco-dialog-hint {
  font-size: 13px;
  color: var(--color-text-muted, #64748b);
  line-height: 1.5;
  padding: 10px 14px;
  background: var(--color-bg-subtle, #f8fafc);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary, #4f46e5);
  margin: 0 0 14px 0;
}

.export-to-poco-modal .form-field {
  margin-bottom: 16px;
}

.export-to-poco-modal .form-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #0f172a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.export-to-poco-modal .form-input {
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text, #0f172a);
  transition: border-color 0.15s;
}

.export-to-poco-modal .form-input:focus {
  outline: none;
  border-color: var(--color-primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.poco-tree-selection {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-bg-subtle, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--color-text, #0f172a);
}

.poco-tree-selection .poco-selection-empty {
  color: var(--color-text-muted, #94a3b8);
  font-style: italic;
}

.poco-tree-selection i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary, #4f46e5);
}

.poco-tree-container {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  background: #fff;
  padding: 8px;
}

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

.poco-tree-children {
  list-style: none;
  margin: 0;
  padding-left: 22px;
  border-left: 1px dashed var(--color-border, #e2e8f0);
  margin-left: 10px;
}

.poco-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text, #0f172a);
  transition: background 0.12s;
}

.poco-tree-row:hover {
  background: var(--color-bg-subtle, #f1f5f9);
}

.poco-tree-row.selected {
  background: var(--color-primary-soft, #ede9fe);
  color: var(--color-primary, #4f46e5);
  font-weight: 600;
}

.poco-tree-row i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.poco-tree-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poco-tree-loading,
.poco-tree-empty {
  padding: 16px;
  text-align: center;
  color: var(--color-text-muted, #94a3b8);
  font-size: 13px;
}

.poco-tree-loading i.spin {
  animation: poco-spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes poco-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.export-to-poco-modal .dialog-status {
  min-height: 20px;
  font-size: 12px;
  color: var(--color-text-muted, #64748b);
  padding: 6px 0;
}

.export-to-poco-modal .dialog-error {
  color: var(--color-danger, #dc2626);
  font-weight: 500;
}

/* ─── Template gallery (nouveau depuis template) ─────────────── */

.pn-template-gallery-overlay { align-items: flex-start; padding-top: 40px; }
.pn-template-gallery {
  max-width: 1040px;
  width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pn-template-gallery .pn-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.pn-template-gallery .pn-dialog-close {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 24px;
  color: var(--color-text-dim, #64748B);
  cursor: pointer;
  transition: background 0.15s;
}
.pn-template-gallery .pn-dialog-close:hover { background: var(--color-surface-hover, #F1F5F9); }
.pn-template-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border, #E2E8F0);
}
.pn-template-filter-btn {
  background: transparent;
  border: 1px solid var(--color-border, #E2E8F0);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-text, #1E293B);
  cursor: pointer;
  transition: all 0.15s;
}
.pn-template-filter-btn:hover {
  background: var(--color-surface-hover, #F8FAFC);
}
.pn-template-filter-btn.active {
  background: var(--color-primary, #4F46E5);
  color: #fff;
  border-color: var(--color-primary, #4F46E5);
}
.pn-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  overflow-y: auto;
  padding-right: 4px;
  flex: 1;
  min-height: 0;
}
.pn-template-card {
  display: flex;
  flex-direction: column;
  background: var(--color-card, #FFF);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pn-template-card:hover {
  border-color: var(--color-primary, #4F46E5);
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08);
  transform: translateY(-2px);
}
.pn-template-card.is-loading { opacity: 0.5; pointer-events: none; }
.pn-template-thumb {
  width: 100%;
  aspect-ratio: 200 / 130;
  background: var(--color-surface, #F8FAFC);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pn-template-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pn-template-meta {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pn-template-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text, #0F172A);
}
.pn-template-desc {
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
  line-height: 1.4;
}
.pn-template-loading,
.pn-template-error {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--color-text-dim, #64748B);
  font-size: 14px;
}
.pn-template-error { color: var(--color-danger, #dc2626); }

@media (max-width: 700px) {
  .pn-template-gallery { width: calc(100vw - 16px); padding: 16px 18px; }
  .pn-template-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ─── Versions dialog (historique snapshots) ─────────────────── */

.pn-versions-overlay { align-items: flex-start; padding-top: 40px; }
.pn-versions-dialog {
  max-width: 680px;
  width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pn-versions-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--color-border, #E2E8F0);
}
.pn-versions-count {
  font-size: 13px;
  color: var(--color-text-dim, #64748B);
}
.pn-versions-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}
.pn-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pn-version-row:hover { border-color: var(--color-primary, #4F46E5); }
.pn-version-row.pre-restore { border-left: 3px solid #f59e0b; }
.pn-version-row.manual      { border-left: 3px solid #4F46E5; }
.pn-version-row.auto        { border-left: 3px solid #10b981; }
.pn-version-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pn-version-time {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.pn-version-time strong { color: var(--color-text, #0F172A); font-weight: 600; }
.pn-version-reason {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.pn-version-reason.reason-auto        { background: #D1FAE5; color: #065F46; }
.pn-version-reason.reason-manual      { background: #E0E7FF; color: #3730A3; }
.pn-version-reason.reason-pre-restore { background: #FEF3C7; color: #92400E; }
.pn-version-latest {
  font-size: 11px;
  color: var(--color-primary, #4F46E5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pn-version-label {
  font-size: 13px;
  color: var(--color-text, #0F172A);
  font-style: italic;
}
.pn-version-meta {
  font-size: 11px;
  color: var(--color-text-dim, #64748B);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pn-versions-loading,
.pn-versions-empty,
.pn-versions-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-dim, #64748B);
  font-size: 13px;
}
.pn-versions-error { color: var(--color-danger, #dc2626); }
.pn-versions-empty p + p { margin-top: 8px; font-size: 12px; }
.btn.btn-sm { padding: 5px 12px; font-size: 12px; }
.pn-version-restore { flex-shrink: 0; }

@media (max-width: 600px) {
  .pn-versions-dialog { width: calc(100vw - 16px); padding: 16px 18px; }
  .pn-version-row { flex-direction: column; align-items: stretch; }
  .pn-version-restore { width: 100%; }
}

/* ─── Comments panel (drawer lateral) ─────────────────────────── */

.pn-comments-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 420px;
  max-width: 95vw;
  background: var(--color-card, #fff);
  border-left: 1px solid var(--color-border, #E2E8F0);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 900;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.pn-comments-panel.open { transform: translateX(0); }
.pn-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  gap: 8px;
}
.pn-comments-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
.pn-comments-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pn-comments-filter-label {
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.pn-comments-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--color-text-dim, #64748B);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
}
.pn-comments-close:hover { background: var(--color-surface-hover, #F1F5F9); }
.pn-comments-compose {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pn-comments-compose textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 56px;
}
.pn-comments-compose textarea:focus {
  outline: 2px solid var(--color-primary, #4F46E5);
  outline-offset: -1px;
  border-color: var(--color-primary, #4F46E5);
}
.pn-comments-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pn-comments-anchor-hint {
  font-size: 11px;
  color: var(--color-text-dim, #64748B);
}
.pn-comments-anchor-hint.has-anchor {
  color: var(--color-primary, #4F46E5);
  font-weight: 500;
}
.pn-comments-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pn-comments-loading,
.pn-comments-empty,
.pn-comments-error {
  padding: 40px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-dim, #64748B);
}
.pn-comments-error { color: var(--color-danger, #dc2626); }
.pn-thread {
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-left: 3px solid var(--color-primary, #4F46E5);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.pn-thread.resolved {
  opacity: 0.6;
  border-left-color: #10b981;
}
.pn-thread-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.pn-thread-author {
  font-weight: 600;
  color: var(--color-text, #0F172A);
}
.pn-thread-focus {
  border: 1px solid var(--color-border, #E2E8F0);
  background: transparent;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--color-primary, #4F46E5);
  cursor: pointer;
}
.pn-thread-anchor {
  font-size: 11px;
  color: var(--color-text-dim, #64748B);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pn-thread-status {
  font-size: 11px;
  color: #065F46;
  background: #D1FAE5;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
}
.pn-thread-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.pn-thread-msg {
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 6px;
}
.pn-thread-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 3px;
}
.pn-thread-msg-head strong { color: var(--color-text, #0F172A); }
.pn-thread-msg-time { color: var(--color-text-dim, #64748B); }
.pn-thread-msg-body {
  white-space: pre-wrap;
  font-size: 13px;
  color: var(--color-text, #0F172A);
  line-height: 1.4;
}
.pn-thread-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.pn-thread-actions textarea {
  flex: 1;
  min-width: 130px;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #E2E8F0);
  resize: vertical;
  min-height: 28px;
}
.pn-thread-actions .btn.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

/* ─── AI dialog (Generer / Resumer / Photo) ─────────────────── */

.pn-ai-overlay {
  align-items: flex-start;
  padding: 24px 24px 24px;
  overflow-y: auto;
}
.pn-ai-dialog {
  max-width: 720px;
  width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.pn-ai-dialog .pn-ai-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 4px;
}
.pn-ai-dialog .pn-dialog-close {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 24px;
  color: var(--color-text-dim, #64748B);
  cursor: pointer;
}
.pn-ai-dialog .pn-dialog-close:hover { background: var(--color-surface-hover, #F1F5F9); }
/* Barre d'intentions (cartes en haut du dialog IA) */
.pn-ai-intent-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 2px 0 4px;
}
.pn-ai-intent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--color-text, #0F172A);
  cursor: pointer;
  transition: all 0.15s;
}
.pn-ai-intent:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}
.pn-ai-intent.active {
  background: #EEF2FF;
  border-color: var(--color-primary, #4F46E5);
  box-shadow: 0 0 0 1px var(--color-primary, #4F46E5) inset;
}
.pn-ai-intent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pn-ai-intent-icon {
  font-size: 22px;
  line-height: 1;
  margin-top: 1px;
}
.pn-ai-intent-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pn-ai-intent-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #0F172A);
  line-height: 1.3;
}
.pn-ai-intent.active .pn-ai-intent-title {
  color: var(--color-primary, #4F46E5);
}
.pn-ai-intent-desc {
  font-size: 11px;
  color: var(--color-text-dim, #64748B);
  line-height: 1.35;
}
/* Intro courte en haut de chaque pane */
.pn-ai-pane-intro {
  font-size: 13px;
  color: var(--color-text, #0F172A);
  line-height: 1.5;
  margin: 0 0 4px;
  padding: 10px 12px;
  background: var(--color-surface, #F8FAFC);
  border-left: 3px solid #CBD5E1;
  border-radius: 4px;
}
/* Fieldsets de sous-axes (Source / Destination) dans Générer */
.pn-ai-subaxis {
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
  padding: 10px 14px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface, #F8FAFC);
}
.pn-ai-subaxis legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-dim, #64748B);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pn-ai-subaxis label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  line-height: 1.4;
  font-size: 13px;
  color: var(--color-text, #0F172A);
  padding: 4px 2px;
  border-radius: 4px;
}
.pn-ai-subaxis label:hover {
  background: rgba(15, 23, 42, 0.03);
}
.pn-ai-subaxis input[type="radio"] {
  margin-top: 3px;
}
.pn-ai-subaxis label strong {
  font-weight: 600;
}
.pn-ai-source-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Footer unique */
.pn-ai-footer {
  border-top: 1px solid var(--color-border, #E2E8F0);
  padding-top: 12px;
  margin-top: 4px;
}

/* ─── Tracker restitutions (bottom banner) ───────────────────── */
.pn-restitution-tracker {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 900;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: white;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18),
              0 2px 6px rgba(15, 23, 42, 0.08);
  font-size: 13px;
  overflow: hidden;
  animation: pn-rest-slide 0.2s ease-out;
}
.dark .pn-restitution-tracker {
  background: var(--color-bg, #0F172A);
  color: var(--color-text, #E2E8F0);
}
@keyframes pn-rest-slide {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pn-restitution-tracker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  color: white;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.pn-restitution-tracker-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pn-restitution-tracker-collapse {
  background: transparent;
  border: 0;
  color: white;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.pn-restitution-tracker-collapse:hover { background: rgba(255, 255, 255, 0.15); }
.pn-restitution-tracker.collapsed .pn-restitution-tracker-list { display: none; }
.pn-restitution-tracker.collapsed .pn-restitution-tracker-collapse { transform: rotate(180deg); }
.pn-restitution-tracker-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 4px 0;
}
.pn-restitution-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border, #F1F5F9);
  transition: background 0.15s;
}
.pn-restitution-item:last-child { border-bottom: none; }
.pn-restitution-item[data-status="done"]  { background: #ECFDF5; }
.pn-restitution-item[data-status="error"] { background: #FEF2F2; }
.dark .pn-restitution-item[data-status="done"]  { background: rgba(16, 185, 129, 0.08); }
.dark .pn-restitution-item[data-status="error"] { background: rgba(239, 68, 68, 0.08); }
.pn-restitution-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.pn-restitution-item[data-status="done"] .pn-restitution-icon  { color: #10B981; font-weight: 700; }
.pn-restitution-item[data-status="error"] .pn-restitution-icon { color: #EF4444; }
.pn-restitution-item[data-status="pending"] .pn-restitution-icon { color: #94A3B8; }
.pn-restitution-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #CBD5E1;
  border-top-color: #4F46E5;
  border-radius: 50%;
  animation: pn-rest-spin 0.8s linear infinite;
}
@keyframes pn-rest-spin { to { transform: rotate(360deg); } }
.pn-restitution-body {
  flex: 1;
  min-width: 0;
}
.pn-restitution-title {
  font-weight: 600;
  color: var(--color-text, #0F172A);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pn-restitution-type-badge {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
}
.pn-restitution-summary {
  font-size: 11px;
  color: var(--color-text-dim, #64748B);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.pn-restitution-step {
  font-size: 11px;
  color: var(--color-text-dim, #64748B);
  margin-top: 2px;
  line-height: 1.35;
}
.pn-restitution-progress {
  height: 4px;
  background: #E2E8F0;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.pn-restitution-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4F46E5 0%, #6366F1 100%);
  border-radius: 2px;
  transition: width 0.5s ease-out;
}
.pn-restitution-item[data-status="done"] .pn-restitution-progress-bar  { background: #10B981; }
.pn-restitution-item[data-status="error"] .pn-restitution-progress-bar { background: #EF4444; }
.pn-restitution-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pn-restitution-pct {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-dim, #64748B);
  font-weight: 500;
}
.pn-restitution-error-msg {
  color: #EF4444;
  font-size: 16px;
  cursor: help;
}
.pn-restitution-dismiss {
  background: transparent;
  border: 0;
  color: var(--color-text-dim, #64748B);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.pn-restitution-dismiss:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--color-text, #0F172A);
}
.pn-restitution-actions .btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}
/* Restitution d'atelier */
.pn-ai-workshop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.pn-ai-workshop-count {
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
  font-variant-numeric: tabular-nums;
}
.pn-ai-workshop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.pn-ai-workshop-slot {
  border: 1px solid var(--color-border, #E2E8F0);
  border-left: 3px solid #CBD5E1;
  border-radius: 8px;
  padding: 10px 14px 12px;
  background: var(--color-surface, #F8FAFC);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.pn-ai-workshop-slot[data-status="processing"] {
  border-left-color: #3B82F6;
  background: #EFF6FF;
}
.pn-ai-workshop-slot[data-status="done"] {
  border-left-color: #10B981;
  background: #ECFDF5;
}
.pn-ai-workshop-slot[data-status="error"] {
  border-left-color: #EF4444;
  background: #FEF2F2;
}
.pn-ai-workshop-slot-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pn-ai-workshop-slot-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-dim, #64748B);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pn-ai-workshop-slot-state {
  flex: 1;
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
}
.pn-ai-workshop-slot[data-status="done"] .pn-ai-workshop-slot-state {
  color: #065F46;
  font-weight: 500;
}
.pn-ai-workshop-slot[data-status="error"] .pn-ai-workshop-slot-state {
  color: #991B1B;
  font-weight: 500;
}
.pn-ai-workshop-slot-remove {
  background: transparent;
  border: 0;
  color: var(--color-text-dim, #64748B);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 4px;
}
.pn-ai-workshop-slot-remove:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--color-text, #0F172A);
}
.pn-ai-workshop-filelist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
}
.pn-ai-workshop-file {
  color: var(--color-text, #0F172A);
  background: rgba(59, 130, 246, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}
.pn-ai-workshop-nofile {
  color: var(--color-text-dim, #94A3B8);
  font-style: italic;
}
.pn-ai-selection-hint {
  padding: 8px 12px;
  background: #EFF6FF;
  border-left: 3px solid #2563EB;
  border-radius: 4px;
  font-size: 12px;
  color: #1E40AF;
}
.pn-ai-selection-hint-empty {
  background: #FFFBEB;
  border-left-color: #F59E0B;
  color: #92400E;
}
.pn-ai-footnote {
  font-size: 11px;
  color: var(--color-text-dim, #64748B);
  margin: 4px 0 0;
  font-style: italic;
}
.pn-ai-body { min-height: 260px; }
.pn-ai-pane { display: flex; flex-direction: column; gap: 10px; }
.pn-ai-pane[hidden] { display: none !important; }
.pn-ai-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text, #0F172A);
  font-weight: 500;
}
.pn-ai-prompt,
.pn-ai-hint,
.pn-ai-file {
  padding: 8px 10px;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}
.pn-ai-prompt { resize: vertical; min-height: 80px; }
.pn-ai-hint-text {
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
  margin: 0;
  line-height: 1.5;
}
.pn-ai-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.pn-ai-status {
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
}
.pn-ai-status.success { color: #10b981; }
.pn-ai-status.error { color: var(--color-danger, #dc2626); }
.pn-ai-summary {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 10px;
}
.pn-ai-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pn-ai-summary-text {
  white-space: pre-wrap;
  font: inherit;
  font-size: 13px;
  color: var(--color-text, #0F172A);
  line-height: 1.6;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  background: #fff;
  border-radius: 6px;
}

.pn-ai-status-banner {
  padding: 12px 16px;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.pn-ai-status-banner strong { color: #78350F; }

/* ─── Settings dialog (Configuration compte) ─────────────────── */

.pn-settings-overlay { align-items: flex-start; padding-top: 50px; }
.pn-settings-dialog {
  max-width: 680px;
  width: calc(100vw - 48px);
  max-height: calc(100vh - 100px);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}
.pn-settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pn-settings-section h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-dim, #64748B);
}
.pn-settings-hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
  line-height: 1.5;
}
.pn-settings-keys {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pn-settings-provider {
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--color-surface, #F8FAFC);
}
.pn-settings-provider.configured {
  border-color: #10b981;
  background: #F0FDF4;
}
.pn-settings-provider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pn-settings-provider-head strong {
  color: var(--color-text, #0F172A);
  font-size: 14px;
}
.pn-settings-status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-dim, #64748B);
}
.pn-settings-status.configured {
  color: #065F46;
  background: #D1FAE5;
  padding: 2px 8px;
  border-radius: 999px;
}
.pn-settings-provider-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text, #0F172A);
}
.pn-settings-masked code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #fff;
  border: 1px solid var(--color-border, #E2E8F0);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-text, #0F172A);
}
.pn-settings-updated {
  font-size: 11px;
  color: var(--color-text-dim, #64748B);
}
.pn-settings-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.pn-settings-input {
  flex: 1;
  min-width: 200px;
  padding: 7px 10px;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pn-settings-input:focus {
  outline: 2px solid var(--color-primary, #4F46E5);
  outline-offset: -1px;
  border-color: var(--color-primary, #4F46E5);
}
.pn-settings-signup {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-primary, #4F46E5);
  text-decoration: none;
}
.pn-settings-signup:hover { text-decoration: underline; }
.pn-settings-loading,
.pn-settings-error {
  padding: 30px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-dim, #64748B);
}
.pn-settings-error { color: var(--color-danger, #dc2626); }

/* ─── Aide repliable (provider help, ex : Miro) ─────────────── */
.pn-settings-help {
  margin: 0 0 4px;
  padding: 10px 12px;
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: 8px;
  font-size: 12px;
  color: #1E293B;
  line-height: 1.55;
}
.dark .pn-settings-help {
  background: rgba(79, 70, 229, 0.10);
  border-color: rgba(165, 180, 252, 0.3);
  color: var(--color-text, #E2E8F0);
}
.pn-settings-help summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary, #4F46E5);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.pn-settings-help summary::-webkit-details-marker { display: none; }
.pn-settings-help summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s ease;
  display: inline-block;
}
.pn-settings-help[open] summary::before { transform: rotate(90deg); }
.pn-settings-help ol {
  margin: 8px 0 6px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pn-settings-help ol li { padding-left: 2px; }
.pn-settings-help code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(15, 23, 42, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.dark .pn-settings-help code { background: rgba(255, 255, 255, 0.10); }
.pn-settings-help a {
  color: var(--color-primary, #4F46E5);
  text-decoration: underline;
}
.pn-settings-help-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--color-text-dim, #64748B);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   Modale Export Miro
   ══════════════════════════════════════════════════════════════ */

.pn-miro-export-dialog {
  max-width: 520px;
  width: calc(100vw - 32px);
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
  overflow: hidden;
}
.pn-miro-export-dialog .pn-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--color-border, #E2E8F0);
}
.pn-miro-export-dialog .pn-dialog-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text, #0F172A);
}
.pn-miro-export-dialog .pn-dialog-message {
  font-size: 13px;
  margin: 0;
  color: var(--color-text-dim, #64748B);
  line-height: 1.5;
}
.pn-miro-export-dialog .pn-dialog-close {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-dim, #64748B);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.pn-miro-export-dialog .pn-dialog-close:hover {
  background: var(--color-surface-hover, #F1F5F9);
  color: var(--color-text, #0F172A);
}
.pn-miro-body {
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.pn-miro-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--color-border, #E2E8F0);
  background: var(--color-surface, #F8FAFC);
}
.pn-miro-footer .btn {
  min-height: 40px;
  padding: 0 18px;
}

/* Champs ──────────────────────────────────────────────────── */
.pn-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pn-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #0F172A);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pn-field-input {
  padding: 10px 12px;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
  background: var(--color-bg, #fff);
  color: var(--color-text, #0F172A);
  font: inherit;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pn-field-input:focus {
  outline: none;
  border-color: var(--color-primary, #4F46E5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.pn-field-help {
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
}

/* Notice "À savoir" ────────────────────────────────────────── */
.pn-miro-notice {
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--color-text, #0F172A);
  line-height: 1.5;
}
.pn-miro-notice strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text-dim, #64748B);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pn-miro-notice ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pn-miro-notice em {
  font-style: italic;
  font-weight: 600;
}

/* Progression ────────────────────────────────────────────── */
.pn-miro-progress {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: 8px;
}
.dark .pn-miro-progress {
  background: rgba(79, 70, 229, 0.10);
  border-color: rgba(165, 180, 252, 0.3);
}
.pn-miro-progress[hidden] { display: none; }
.pn-miro-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(79, 70, 229, 0.18);
  border-top-color: var(--color-primary, #4F46E5);
  animation: pn-miro-spin 0.8s linear infinite;
  flex-shrink: 0;
  margin-top: 1px;
}
@keyframes pn-miro-spin {
  to { transform: rotate(360deg); }
}
.pn-miro-progress-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--color-text, #0F172A);
  line-height: 1.4;
}
.pn-miro-progress-text strong {
  font-weight: 600;
}
.pn-miro-progress-text span {
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
}

/* Résultat succès ───────────────────────────────────────── */
.pn-miro-result[hidden] { display: none; }
.pn-miro-success,
.pn-miro-error {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid;
}
.pn-miro-success {
  background: #F0FDF4;
  border-color: #BBF7D0;
}
.dark .pn-miro-success {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(110, 231, 183, 0.35);
}
.pn-miro-error {
  background: #FEF2F2;
  border-color: #FECACA;
}
.dark .pn-miro-error {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(252, 165, 165, 0.35);
}
.pn-miro-success-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text, #0F172A);
}
.pn-miro-success-icon,
.pn-miro-error-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}
.pn-miro-success-icon { background: #10B981; }
.pn-miro-error-icon { background: #DC2626; }
.pn-miro-success-stats {
  margin: 0;
  font-size: 13px;
  color: var(--color-text, #0F172A);
}
.pn-miro-success-note {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
  line-height: 1.5;
}
.pn-miro-open-btn {
  align-self: flex-start;
  min-height: 40px;
  padding: 0 16px;
  margin-top: 4px;
}

/* Mobile ───────────────────────────────────────────────── */
@media (max-width: 560px) {
  .pn-miro-export-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  .pn-miro-export-dialog .pn-dialog-header { padding: 18px 18px 12px; }
  .pn-miro-body { padding: 16px 18px; gap: 14px; }
  .pn-miro-footer {
    flex-direction: column-reverse;
    padding: 14px 18px 18px;
  }
  .pn-miro-footer .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
  .pn-miro-open-btn {
    align-self: stretch;
    width: 100%;
    justify-content: center;
  }
}

.pn-ai-model-picker {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
  margin-bottom: 10px;
}
.pn-ai-model-picker label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-dim, #64748B);
}
.pn-ai-model-picker select {
  padding: 6px 10px;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.pn-ai-model-picker select:disabled { opacity: 0.6; }
.pn-ai-set-default-row {
  grid-column: 1 / -1;
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--color-text-dim, #64748B) !important;
  padding-top: 4px;
}

/* ─── AI edit board — preview des operations ────────────────── */

.pn-ai-edit-preview {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--color-surface, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 10px;
}
.pn-ai-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
  flex-wrap: wrap;
}
.pn-ai-preview-header strong {
  color: var(--color-text, #0F172A);
  font-size: 13px;
}
.pn-ai-preview-counts {
  display: flex;
  gap: 10px;
  font-size: 12px;
}
.pn-ai-preview-counts .op-add    { color: #10b981; font-weight: 600; }
.pn-ai-preview-counts .op-update { color: #f59e0b; font-weight: 600; }
.pn-ai-preview-counts .op-delete { color: #dc2626; font-weight: 600; }

.pn-ai-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pn-ai-preview-list li {
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.pn-ai-preview-list li.op-add    { border-left: 3px solid #10b981; }
.pn-ai-preview-list li.op-update { border-left: 3px solid #f59e0b; }
.pn-ai-preview-list li.op-delete { border-left: 3px solid #dc2626; }
.pn-ai-preview-list .op-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
}
.pn-ai-preview-list li.op-add    .op-label { color: #10b981; }
.pn-ai-preview-list li.op-update .op-label { color: #f59e0b; }
.pn-ai-preview-list li.op-delete .op-label { color: #dc2626; }
.pn-ai-preview-list code {
  background: var(--color-surface, #F8FAFC);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}
.pn-ai-preview-list .op-detail {
  color: var(--color-text-dim, #64748B);
  font-size: 11px;
}
.pn-ai-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ── Menu contextuel (clic droit objet) ───────────────────────── */
.pn-context-menu {
  position: fixed;
  z-index: calc(var(--z-toast) - 1);
  min-width: 224px;
  padding: 6px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: pn-context-menu-in var(--transition-fast);
}

@keyframes pn-context-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pn-context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.pn-context-menu-item:hover,
.pn-context-menu-item:focus-visible {
  background: var(--color-bg);
  outline: none;
}

.pn-context-menu-item i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.pn-context-menu-item-danger {
  color: var(--color-danger);
}

.pn-context-menu-item-danger i {
  color: var(--color-danger);
}

.pn-context-menu-item-danger:hover {
  background: #fef2f2;
}

.pn-context-menu-sep {
  height: 1px;
  margin: 5px 6px;
  background: var(--color-border);
}

/* ── Mode balais : force le curseur pinceau sur tout le canvas ─── */
.format-painter-active #canvas-container,
.format-painter-active #canvas-container * {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M20 3l9 9-3 3-9-9 3-3z' fill='%232563eb'/%3E%3Cpath d='M16 7l9 9-9 9c-2 2-6 2-8 0l-1 1-4-1 1-4 1-1c-2-2-2-6 0-8l11-5z' fill='%23fff' stroke='%232563eb' stroke-width='1.5'/%3E%3C/svg%3E") 4 28, copy !important;
}

/* Bandeau de mode persistant (indicateur + sortie découvrable, mobile inclus) */
.format-painter-banner {
  position: fixed;
  left: 50%;
  /* Aligné sur le pattern .toast-container : ne chevauche jamais la
     barre de statut (--status-height 32px desktop / 44px tactile). */
  bottom: calc(var(--status-height) + 16px);
  transform: translateX(-50%);
  z-index: calc(var(--z-toast) - 1);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  background: var(--color-text);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  animation: pn-context-menu-in var(--transition-base);
  max-width: calc(100vw - 32px);
}

.format-painter-banner i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary-light);
}

.format-painter-banner-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.format-painter-banner-hint {
  flex-shrink: 0;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.format-painter-banner-stop {
  flex-shrink: 0;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.format-painter-banner-stop:hover {
  background: var(--color-primary-hover);
}

/* Flash de confirmation sur l'objet ciblé (changement parfois subtil) */
.pn-fp-flash {
  animation: pn-fp-flash 0.45s ease-out;
}

@keyframes pn-fp-flash {
  0%   { filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0)); }
  35%  { filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.85)); }
  100% { filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0)); }
}

/* Toast info : variante manquante (message de lock pendant le balais) */
.toast.toast-info { border-left-color: var(--color-primary); }

/* Cible tactile : items du menu ≥ 44px au doigt (persona en déplacement) */
@media (pointer: coarse) {
  .pn-context-menu-item {
    padding: 12px 14px;
  }
  .pn-context-menu { min-width: 240px; }
}

/* Hover Supprimer en thème sombre (le rouge clair jurerait sinon) */
:root.dark .pn-context-menu-item-danger:hover {
  background: rgba(220, 38, 38, 0.16);
}

/* En thème sombre, --color-text s'inverse (clair) : le fond du bandeau
   deviendrait quasi-blanc avec texte blanc (contraste ~1.2:1). On fige
   un fond foncé pour garder le texte blanc lisible (~15:1). */
:root.dark .format-painter-banner {
  background: #1e293b;
}