/* ════════════════════════════════════════════════════════════════
   ARTIS — polish.css (v2.24.0)
   Couche de finition TRANSVERSALE, chargée en dernier :
   micro-interactions, focus visibles, animations de modales,
   barres de défilement, cohérence des barres d'outils.
   Purement additive — aucune règle de layout.
   ════════════════════════════════════════════════════════════════ */

/* ── Sélection de texte aux couleurs de l'accent ── */
::selection { background: color-mix(in srgb, var(--c-forest, #1B4332) 22%, transparent); }

/* ── Focus clavier visible partout (jamais au simple clic) ── */
:where(button, a, input, select, textarea, [contenteditable], [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring, rgba(27, 67, 50, 0.35));
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* ── Micro-interactions : réponses douces au survol et à l'appui ── */
:where(.btn, .carnet-btn-icon, .carnet-add-btn, .ink-btn, .nav-item,
       .carnet-tpl-card, .astyle-theme-btn, .astyle-palette, .cn-ai-chip,
       .cn-ai-row, .ink-lrow, .reg-add-btn, .carnet-swatch, .astyle-swatch) {
  transition: background-color 0.13s ease, border-color 0.13s ease,
              color 0.13s ease, box-shadow 0.16s ease, transform 0.1s ease;
}
:where(.btn, .carnet-btn-icon, .carnet-add-btn, .ink-btn,
       .astyle-theme-btn, .cn-ai-chip, .reg-add-btn):active {
  transform: scale(0.97);
}
.carnet-card { transition: box-shadow 0.18s ease, transform 0.18s ease; }
.carnet-card:hover { transform: translateY(-1px); }

/* ── Modales : fondu du voile + montée du panneau ── */
.carnet-tpl-overlay { animation: pol-fade 0.16s ease both; }
.carnet-tpl-overlay .carnet-tpl-modal { animation: pol-rise 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.ink-overlay { animation: pol-fade 0.14s ease both; }
.ink-panel { animation: pol-slide-right 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.cn-ai-pop:not([hidden]), .cn-palette-pop:not([hidden]), .ink-palette-pop:not([hidden]) {
  animation: pol-pop 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes pol-fade { from { opacity: 0; } }
@keyframes pol-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes pol-slide-right { from { opacity: 0; transform: translateX(14px); } }
@keyframes pol-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }

/* ── Barres de défilement fines et discrètes (Chromium) ── */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #E8E5DD);
  border-radius: 8px;
  border: 2.5px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--ink-dim, #97A19D); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Barre d'ajout du carnet : pilules cohérentes et lisibles ── */
.carnet-add-bar .carnet-add-btn {
  border-radius: 999px;
  padding: 4px 11px;
  border: 1px solid transparent;
}
.carnet-add-bar .carnet-add-btn:hover {
  background: color-mix(in srgb, var(--cn-accent, var(--c-forest, #0F6E56)) 9%, transparent);
  border-color: color-mix(in srgb, var(--cn-accent, var(--c-forest, #0F6E56)) 30%, transparent);
}
.carnet-add-bar .carnet-add-btn-primary {
  border-color: color-mix(in srgb, var(--cn-accent, var(--c-forest, #0F6E56)) 40%, transparent);
  background: color-mix(in srgb, var(--cn-accent, var(--c-forest, #0F6E56)) 7%, transparent);
}

/* ── Éditeur d'encre : groupes d'outils mieux détachés ── */
.ink-toolbar { backdrop-filter: blur(6px); }
.ink-sep { opacity: 0.55; }
.ink-btn.active {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--accent, #0F6E56) 30%, transparent);
}

/* ── Images du carnet : apparition douce ── */
.carnet-img, .reg-ink-thumb, .carnet-ink-thumb { transition: box-shadow 0.16s ease; }
.cn-img-box.cn-selected .carnet-img { box-shadow: 0 0 0 2px var(--cn-accent, #0F6E56); }

/* ── Toasts / badges : chiffres tabulaires partout où ça compte ── */
.carnet-nav-item-count, .ink-lcount, .kbd { font-variant-numeric: tabular-nums; }

/* ── Respect du réglage système « réduire les animations » ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}