/* Hallmark redesign · genre: modern-minimal · scope: app shell (voix partagée)
 * 18 thèmes préservés · accent: vert de marque · Space Grotesk + Inter
 * non-destructif : sélecteurs et tokens de thème inchangés */
/* ── Polices auto-hébergées (CSP self-only) ── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/space-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter.woff2') format('woff2');
}

/* ── Thèmes ── */
:root {
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --color-success: #16a34a; /* défaut global, surchargé par thème si besoin */

  /* ── Redesign 2026 : échelles partagées (additif, ne casse aucun thème) ── */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05);

  /* Teintes d'icônes par section (désaturées, défaut light).
     Chaque thème peut surcharger ces tokens dans son bloc [data-theme].
     --icon-home suit l'accent du thème (--btn-primary). */
  --icon-tags: oklch(70% 0.14 70);     /* ambre */
  --icon-folders: oklch(62% 0.13 250); /* bleu */
  --icon-settings: var(--text-muted);  /* neutre */
  --icon-public: oklch(65% 0.12 200);  /* cyan */
  --icon-admin: oklch(58% 0.15 300);   /* violet */
}

:root, [data-theme="light"] {
  --bg: oklch(99% 0.004 145);
  --bg-alt: #F8F8F8;
  --border: #E8E8E8;
  --text: #1A1A1A;
  --text-muted: #757575;
  --text-link: #2BB24C;
  --tag-bg: #E8F5EC;
  --tag-text: #1A7A35;
  --sidebar-bg: #f3f4f6;
  --sidebar-active: #E8F5EC;
  --sidebar-active-text: #1A7A35;
  --btn-primary: #2BB24C;
  --btn-primary-hover: #239940;
  --btn-danger: #ef4444;
  --input-bg: oklch(99.5% 0.004 145);
  --input-border: #d1d5db;
  --card-hover: #f9fafb;
  --color-success: #16a34a;
}

/* Teintes d'icônes relevées en clarté pour les thèmes à fond sombre */
[data-theme="dark"],
[data-theme="dracula"],
[data-theme="nord-dark"],
[data-theme="catppuccin"],
[data-theme="gruvbox"],
[data-theme="rosepine"],
[data-theme="solarized-dark"] {
  --icon-tags: oklch(80% 0.13 75);
  --icon-folders: oklch(74% 0.12 250);
  --icon-public: oklch(76% 0.11 200);
  --icon-admin: oklch(74% 0.14 300);
}

[data-theme="dark"] {
  --bg: #111827;
  --bg-alt: #1f2937;
  --border: #374151;
  --text: #f9fafb;
  --text-muted: #9ca3af;
  --text-link: #60a5fa;
  --tag-bg: #1e3a5f;
  --tag-text: #93c5fd;
  --sidebar-bg: #1f2937;
  --sidebar-active: #1e3a5f;
  --sidebar-active-text: #93c5fd;
  --btn-primary: #3b82f6;
  --btn-primary-hover: #2563eb;
  --btn-danger: #ef4444;
  --input-bg: #1f2937;
  --input-border: #374151;
  --card-hover: #1f2937;
}

[data-theme="dracula"] {
  --bg: #282a36;
  --bg-alt: #21222c;
  --border: #44475a;
  --text: #f8f8f2;
  --text-muted: #6272a4;
  --text-link: #bd93f9;
  --tag-bg: #44475a;
  --tag-text: #bd93f9;
  --sidebar-bg: #21222c;
  --sidebar-active: #383a4a;
  --sidebar-active-text: #bd93f9;
  --btn-primary: #bd93f9;
  --btn-primary-hover: #a673e8;
  --btn-danger: #ff5555;
  --input-bg: #21222c;
  --input-border: #44475a;
  --card-hover: #21222c;
}

[data-theme="nord"] {
  --bg: #eceff4;
  --bg-alt: #e5e9f0;
  --border: #d8dee9;
  --text: #2e3440;
  --text-muted: #4c566a;
  --text-link: #5e81ac;
  --tag-bg: #d8dee9;
  --tag-text: #5e81ac;
  --sidebar-bg: #e5e9f0;
  --sidebar-active: #d8dee9;
  --sidebar-active-text: #5e81ac;
  --btn-primary: #5e81ac;
  --btn-primary-hover: #4c6f9a;
  --btn-danger: #bf616a;
  --input-bg: #eceff4;
  --input-border: #d8dee9;
  --card-hover: #e5e9f0;
}

[data-theme="nord-dark"] {
  --bg: #2e3440;
  --bg-alt: #3b4252;
  --border: #434c5e;
  --text: #eceff4;
  --text-muted: #9099ab;
  --text-link: #88c0d0;
  --tag-bg: #434c5e;
  --tag-text: #88c0d0;
  --sidebar-bg: #3b4252;
  --sidebar-active: #434c5e;
  --sidebar-active-text: #88c0d0;
  --btn-primary: #5e81ac;
  --btn-primary-hover: #4c6f9a;
  --btn-danger: #bf616a;
  --input-bg: #3b4252;
  --input-border: #434c5e;
  --card-hover: #3b4252;
}

[data-theme="catppuccin"] {
  --bg: #1e1e2e;
  --bg-alt: #181825;
  --border: #313244;
  --text: #cdd6f4;
  --text-muted: #7f849c;
  --text-link: #89b4fa;
  --tag-bg: #313244;
  --tag-text: #cba6f7;
  --sidebar-bg: #181825;
  --sidebar-active: #313244;
  --sidebar-active-text: #cba6f7;
  --btn-primary: #cba6f7;
  --btn-primary-hover: #b793e0;
  --btn-danger: #f38ba8;
  --input-bg: #181825;
  --input-border: #313244;
  --card-hover: #181825;
}

[data-theme="gruvbox"] {
  --bg: #282828;
  --bg-alt: #1d2021;
  --border: #3c3836;
  --text: #ebdbb2;
  --text-muted: #928374;
  --text-link: #83a598;
  --tag-bg: #3c3836;
  --tag-text: #fabd2f;
  --sidebar-bg: #1d2021;
  --sidebar-active: #3c3836;
  --sidebar-active-text: #fabd2f;
  --btn-primary: #83a598;
  --btn-primary-hover: #689d6a;
  --btn-danger: #cc241d;
  --input-bg: #1d2021;
  --input-border: #3c3836;
  --card-hover: #1d2021;
}

[data-theme="solarized"] {
  --bg: #fdf6e3;
  --bg-alt: #eee8d5;
  --border: #dfd5b0;
  --text: #657b83;
  --text-muted: #93a1a1;
  --text-link: #268bd2;
  --tag-bg: #eee8d5;
  --tag-text: #2aa198;
  --sidebar-bg: #eee8d5;
  --sidebar-active: #dfd5b0;
  --sidebar-active-text: #268bd2;
  --btn-primary: #268bd2;
  --btn-primary-hover: #1a6fa8;
  --btn-danger: #dc322f;
  --input-bg: #fdf6e3;
  --input-border: #dfd5b0;
  --card-hover: #eee8d5;
  --icon-tags: #b58900; /* yellow solarized, plus foncé sur fond crème */
}

[data-theme="rosepine"] {
  --bg: #191724;
  --bg-alt: #1f1d2e;
  --border: #26233a;
  --text: #e0def4;
  --text-muted: #6e6a86;
  --text-link: #9ccfd8;
  --tag-bg: #26233a;
  --tag-text: #c4a7e7;
  --sidebar-bg: #1f1d2e;
  --sidebar-active: #26233a;
  --sidebar-active-text: #c4a7e7;
  --btn-primary: #c4a7e7;
  --btn-primary-hover: #ad8fd0;
  --btn-danger: #eb6f92;
  --input-bg: #1f1d2e;
  --input-border: #26233a;
  --card-hover: #1f1d2e;
}

/* Catppuccin Latte (light) */
[data-theme="catppuccin-latte"] {
  --bg: #eff1f5; --bg-alt: #e6e9ef; --border: #ccd0da; --text: #4c4f69;
  --text-muted: #8c8fa1; --text-link: #1e66f5; --tag-bg: #ccd0da; --tag-text: #8839ef;
  --sidebar-bg: #e6e9ef; --sidebar-active: #ccd0da; --sidebar-active-text: #8839ef;
  --btn-primary: #8839ef; --btn-primary-hover: #7527d7; --btn-danger: #d20f39;
  --input-bg: #eff1f5; --input-border: #ccd0da; --card-hover: #e6e9ef;
}

/* Gruvbox Light */
[data-theme="gruvbox-light"] {
  --bg: #fbf1c7; --bg-alt: #f2e5bc; --border: #d5c4a1; --text: #3c3836;
  --text-muted: #7c6f64; --text-link: #076678; --tag-bg: #d5c4a1; --tag-text: #b57614;
  --sidebar-bg: #f2e5bc; --sidebar-active: #ebdbb2; --sidebar-active-text: #b57614;
  --btn-primary: #458588; --btn-primary-hover: #357577; --btn-danger: #cc241d;
  --input-bg: #fbf1c7; --input-border: #d5c4a1; --card-hover: #f2e5bc;
}

/* Solarized Dark */
[data-theme="solarized-dark"] {
  --bg: #002b36; --bg-alt: #073642; --border: #586e75; --text: #839496;
  --text-muted: #657b83; --text-link: #268bd2; --tag-bg: #073642; --tag-text: #2aa198;
  --sidebar-bg: #073642; --sidebar-active: #586e75; --sidebar-active-text: #93a1a1;
  --btn-primary: #268bd2; --btn-primary-hover: #1a6fa8; --btn-danger: #dc322f;
  --input-bg: #073642; --input-border: #586e75; --card-hover: #073642;
}

/* Dracula Light */
[data-theme="dracula-light"] {
  --bg: #f8f8f2; --bg-alt: #f0f0ea; --border: #e0dfd5; --text: #282a36;
  --text-muted: #6272a4; --text-link: #6272a4; --tag-bg: #e4deff; --tag-text: #6272a4;
  --sidebar-bg: #f0f0ea; --sidebar-active: #e4deff; --sidebar-active-text: #6272a4;
  --btn-primary: #bd93f9; --btn-primary-hover: #a673e8; --btn-danger: #ff5555;
  --input-bg: #f8f8f2; --input-border: #e0dfd5; --card-hover: #f0f0ea;
}

/* Rosé Pine Dawn (light) */
[data-theme="rosepine-dawn"] {
  --bg: #faf4ed; --bg-alt: #fffaf3; --border: #dfdad9; --text: #575279;
  --text-muted: #9893a5; --text-link: #286983; --tag-bg: #dfdad9; --tag-text: #907aa9;
  --sidebar-bg: #fffaf3; --sidebar-active: #f2e9e1; --sidebar-active-text: #907aa9;
  --btn-primary: #286983; --btn-primary-hover: #1f5470; --btn-danger: #b4637a;
  --input-bg: #faf4ed; --input-border: #dfdad9; --card-hover: #f2e9e1;
}

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

html, body { height: 100%; margin: 0; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .form-card h2, .sidebar-logo {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.15;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ── */
.layout { display: flex; height: 100dvh; overflow: hidden; }

.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform 0.2s var(--ease-out);
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.content { flex: 1; overflow-y: auto; padding: 1.25rem; }
.content-wrap { max-width: none; }

/* ── Sidebar ── */
.sidebar-logo {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.03em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.sidebar-section {
  padding: var(--space-md) var(--space-sm) var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted);
}

.sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  margin: 1px var(--space-2xs);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.sidebar-item:hover { background: var(--card-hover); text-decoration: none; }
.sidebar-item.active { background: var(--sidebar-active); color: var(--sidebar-active-text); font-weight: 600; }
.sidebar-item.drop-target { background: var(--sidebar-active); outline: 2px solid var(--sidebar-active-text); }

/* Teintes d'icônes par section. Le SVG porte sa couleur via le token ;
   l'item actif reprend currentColor pour garder le signal "tu es ici". */
.sidebar-item .icon-home    { color: var(--btn-primary); }
.sidebar-item .icon-tags    { color: var(--icon-tags); }
.sidebar-item .icon-folders { color: var(--icon-folders); }
.sidebar-item .icon-settings{ color: var(--icon-settings); }
.sidebar-item .icon-public  { color: var(--icon-public); }
.sidebar-item .icon-admin   { color: var(--icon-admin); }
.sidebar-item.active svg { color: var(--sidebar-active-text); }

/* Dossiers listés : teinte "dossier" cohérente avec la section Dossiers */
.sidebar-folder-item .folder-glyph { color: var(--icon-folders); }
.sidebar-folder-item.active .folder-glyph { color: var(--sidebar-active-text); }

.sidebar-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--border);
  border-radius: 9999px;
  padding: 0.1rem 0.45rem;
  flex-shrink: 0;
}

.sidebar-bottom {
  margin-top: auto;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ── Topbar ── */
.search-input {
  flex: 1;
  max-width: 440px;
  padding: 0.5rem 0.95rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: var(--text-sm);
  outline: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.search-input:focus-visible { border-color: var(--btn-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-primary) 22%, transparent); outline: none; }

.btn {
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.btn-primary { background: var(--btn-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--btn-primary-hover); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--card-hover); text-decoration: none; color: var(--text); border-color: var(--text-muted); }
.btn-danger { background: var(--btn-danger); color: #fff; }
.btn-sm { padding: 0.25rem 0.6rem; font-size: var(--text-xs); }
.btn:focus-visible { outline: 2px solid var(--btn-primary); outline-offset: 2px; }
.btn-danger:focus-visible { outline-color: var(--btn-danger); }

/* ── Link cards (Feedly style) ── */
.links-list { display: flex; flex-direction: column; }

.link-card {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  box-shadow: inset 3px 0 0 transparent;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.link-card:hover { background: var(--card-hover); box-shadow: inset 3px 0 0 var(--btn-primary); }
.link-card:hover .link-actions,
.link-card:focus-within .link-actions { opacity: 1; }

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

.link-thumbnail {
  flex-shrink: 0;
  width: 110px;
  height: 74px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  display: block;
  align-self: flex-start;
  margin-top: 2px;
}

.link-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.link-thumbnail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  user-select: none;
  letter-spacing: -0.02em;
}

.link-source {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.link-favicon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 2px;
}

.link-domain {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.link-title {
  font-weight: 700;
  color: var(--text);
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  display: block;
  line-height: 1.35;
  margin-bottom: 0.3rem;
}

.link-title:hover { color: var(--text-link); text-decoration: none; }

.link-description {
  font-size: 0.9rem;
  color: var(--text);
  opacity: 0.72;
  line-height: 1.65;
  margin-bottom: 0.45rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.link-note {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.75;
  border-left: 3px solid var(--sidebar-active-text);
  padding: 0.35rem 0.875rem;
  background: var(--bg-alt);
  border-radius: 0 4px 4px 0;
}

.link-note p { margin: 0 0 0.5rem; }
.link-note p:last-child { margin-bottom: 0; }
.link-note a { color: var(--text-link); }
.link-note code { font-size: 0.8em; background: var(--border); padding: 0.1em 0.3em; border-radius: 3px; }

.link-footer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.link-date {
  font-size: 0.8rem;
  color: var(--tag-text);
  background: var(--tag-bg);
  border-radius: 9999px;
  padding: 0.15rem 0.65rem;
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.link-actions {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.15s var(--ease-out);
}

/* ── Broken link badge ── */
.broken-badge {
  font-size: 0.75rem;
  color: var(--btn-danger);
  flex-shrink: 0;
}

/* ── Surlignage des résultats de recherche ── */
.link-title mark {
  background: var(--btn-primary);
  color: #fff;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Link card: broken state ── */
.link-broken { border-left: 3px solid var(--btn-danger); }
.link-recovery {
  display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
  margin: 0.25rem 0 0.4rem; font-size: 0.8rem; color: var(--btn-danger);
}
.link-recovery a { color: var(--btn-primary); text-decoration: underline; }

/* ── Link select checkbox ── */
.link-select-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 0.35rem 0 0;
  opacity: 0;
  transition: opacity 0.15s var(--ease-out);
  cursor: pointer;
}
.link-card:hover .link-select-wrap,
.link-selected .link-select-wrap { opacity: 1; }

/* ── Bulk action bar ── */
.bulk-bar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  font-size: 0.85rem;
}
.bulk-bar--visible { display: flex; }

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}

.pagination-info {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Tags ── */
.tag {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--tag-bg);
  color: var(--tag-text);
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.link-folder-tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  background: var(--sidebar-active);
  color: var(--sidebar-active-text);
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
}

.tag:hover { opacity: 0.8; text-decoration: none; }

/* ── Form ── */
.form-card {
  max-width: 700px;
  margin: 0 auto;
}

.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem; color: var(--text-muted); }

.form-input, .form-textarea {
  width: 100%;
  padding: 0.55rem 0.8rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.form-input:focus-visible, .form-textarea:focus-visible {
  border-color: var(--btn-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-primary) 18%, transparent);
  outline: none;
}

.form-textarea { resize: vertical; min-height: 80px; }
.form-textarea.tall { min-height: 160px; }

.form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check input { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--btn-primary); }

.form-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }

/* ── Theme select ── */
.theme-select {
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  color: var(--text);
  cursor: pointer;
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-muted);
}

.empty-state a { color: var(--text-link); }

/* ── Mobile ── */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.25rem; color: var(--text); }

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 20;
    transform: translateX(-100%);
    width: 85vw;
    max-width: 260px;
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-overlay.open { display: block; }
  .hamburger { display: block; }
  .link-actions { opacity: 1; flex-direction: row; }
  .link-thumbnail { display: none; }
  .btn-label { display: none; }
  .topbar form { max-width: none; }
  .content { padding: 0.75rem; }
  .pagination { gap: 0.5rem; flex-wrap: wrap; }
  .pagination-info { width: 100%; text-align: center; order: -1; }
}
/* Pointeurs grossiers (tactile) : pas de hover → actions et sélection toujours visibles */
@media (hover: none) {
  .link-actions,
  .link-select-wrap,
  .view-grid .link-actions { opacity: 1; }
  .sidebar-folder-item .drag-handle { opacity: 0.6; }
}

/* Drag & Drop dossiers sidebar */
.drag-handle {
  opacity: 0;
  cursor: grab;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: opacity 0.1s var(--ease-out);
  user-select: none;
  padding-right: 0.15rem;
}
.sidebar-folder-item:hover .drag-handle { opacity: 1; }
.drag-handle:active { cursor: grabbing; }

.folder-node { position: relative; }
.folder-children { min-height: 4px; }
.folder-children .folder-children { padding-left: 0.875rem; }

/* Plier / déplier l'arborescence */
.folder-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  margin-right: 0.1rem; flex-shrink: 0; line-height: 0;
  color: var(--text-muted); display: inline-flex; align-items: center;
}
.folder-toggle:hover { color: var(--text); }
.folder-toggle svg { transition: transform 0.15s var(--ease-out); }
.folder-node.collapsed > .folder-children { display: none; }
.folder-node.collapsed > .sidebar-folder-item .folder-toggle svg { transform: rotate(-90deg); }

.sortable-ghost > .sidebar-folder-item,
.sortable-ghost > a { opacity: 0.35; background: var(--sidebar-active); border-radius: 0.375rem; }
.sortable-chosen > .sidebar-folder-item,
.sortable-chosen > a { background: var(--card-hover); }

/* Logo sidebar — suit la couleur d'accentuation du thème */
.sidebar-logo { color: var(--sidebar-active-text); font-family: var(--font-display); }

/* Fix CSP: hover sidebar add button */
.sidebar-add-btn { color: var(--text-muted); transition: color 0.15s var(--ease-out); }
.sidebar-add-btn:hover { color: var(--text); }

/* ── Vue grille ── */
.links-list.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  align-items: start;
}

.view-grid .link-card {
  flex-direction: column;
  padding: 0;
  border-bottom: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  gap: 0;
  cursor: default;
  box-shadow: none;
}

.view-grid .link-card:hover { box-shadow: var(--shadow-card); }

.view-grid .link-thumbnail,
.view-grid .link-thumbnail-placeholder {
  width: 100%;
  height: 160px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  margin: 0;
  align-self: auto;
}

.view-grid .link-body { padding: 0.75rem 1rem 0.5rem; }

.view-grid .link-note { display: none; }

.view-grid .link-description {
  -webkit-line-clamp: 2;
  margin-bottom: 0.35rem;
}

.view-grid .link-actions {
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 0.75rem 0.6rem;
  opacity: 0;
}

.view-grid .link-card:hover .link-actions { opacity: 1; }

.view-grid .link-footer { margin-top: 0.35rem; }

/* ── Sidebar tag actions ── */
.sidebar-tag-input {
  flex: 1; min-width: 0; font-size: 0.875rem;
  border: 1px solid var(--btn-primary); border-radius: 3px;
  padding: 0 0.25rem; background: var(--bg); color: var(--text); outline: none;
}
.sidebar-tag-btn {
  background: none; border: none; cursor: pointer;
  padding: 0 0.1rem; font-size: 0.8rem; color: var(--text-muted); line-height: 1;
}
.sidebar-tag-btn:hover { color: var(--text); }

/* ── Link deleting (optimistic hide) ── */
.link-deleting {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out);
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}