/* ─────────────────────────────────────────────────────────────────────────────
   components.css — Palette : Composition Colorimétrique
   Styles de tous les composants UI
   © Code propriétaire — Tous droits réservés.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════════
   WINDOW MANAGER — Float layer, fenêtres flottantes, snap, resize, groupes
   ═══════════════════════════════════════════════════════════════════════════ */

/* Conteneur pour les fenêtres flottantes, au-dessus de tout le reste */
.float-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 590;
}

.float-layer>* {
  pointer-events: auto;
}

/* Panneau en mode flottant */
.panel--floating {
  position: fixed;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 600;
  /* w / h / left / top pilotés par JS */
}

.panel--floating .panel-body,
.panel--floating .panel-body--preview,
.panel--floating .panel-body--access {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.panel--floating .panel-body--viz,
.panel--floating .panel-body--palette {
  padding: 0;
  overflow: hidden;
}

.panel--floating .panel-body--viz {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
}

/* Panels ancrés aux bords */
.panel--snapped-l,
.panel--snapped-r,
.panel--snapped-t,
.panel--snapped-b,
.panel--snapped-tl,
.panel--snapped-tr,
.panel--snapped-bl,
.panel--snapped-br {
  position: fixed !important;
  border-radius: 0 !important;
  z-index: 600;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel--snapped-l {
  border-left: none;
}

.panel--snapped-r {
  border-right: none;
}

.panel--snapped-t {
  border-top: none;
}

.panel--snapped-b {
  border-bottom: none;
}

.panel--snapped-tl {
  border-left: none;
  border-top: none;
}

.panel--snapped-tr {
  border-right: none;
  border-top: none;
}

.panel--snapped-bl {
  border-left: none;
  border-bottom: none;
}

.panel--snapped-br {
  border-right: none;
  border-bottom: none;
}

/* Grab cursor sur les headers glissables */
[data-wm-drag] {
  cursor: grab;
}

[data-wm-drag]:active {
  cursor: grabbing;
}

/* Drop target : highlight quand un panneau est glissé dessus */
.panel--drop-target .panel-header,
.panel--drop-target .wm-group-tabbar {
  background: var(--accent-subtle);
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ── Poignées de redimensionnement ── */

.resize-handle {
  position: absolute;
  z-index: 1000 !important;
  opacity: 0;
  pointer-events: auto !important;
  transition: opacity 120ms, background-color 120ms;
}

/* Montrer les poignées au survol du panneau */
.panel:hover .resize-handle,
.panel-group:hover .resize-handle {
  opacity: 0.6;
}

.resize-handle:hover,
.resize-handle:active {
  opacity: 1 !important;
  background: var(--accent) !important;
}

/* Bords */
.resize-handle--n {
  top: -5px;
  left: 0;
  right: 0;
  height: 10px;
  cursor: row-resize !important;
}

.resize-handle--s {
  bottom: -5px;
  left: 0;
  right: 0;
  height: 10px;
  cursor: row-resize !important;
}

.resize-handle--e {
  top: 0;
  right: -5px;
  bottom: 0;
  width: 10px;
  cursor: col-resize !important;
}

.resize-handle--w {
  top: 0;
  left: -5px;
  bottom: 0;
  width: 10px;
  cursor: col-resize !important;
}

/* Coins */
.resize-handle--ne {
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  cursor: ne-resize;
}

.resize-handle--nw {
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  cursor: nw-resize;
}

.resize-handle--se {
  bottom: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  cursor: se-resize;
}

.resize-handle--sw {
  bottom: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  cursor: sw-resize;
}

/* Indicateur visuel de coin (petit triangle) */
.resize-handle--se::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 7px 7px;
  border-color: transparent transparent var(--border-strong) transparent;
  opacity: 0.7;
}

/* Masquage des poignées de redimensionnement inactives pour les panneaux aimantés */
.panel--snapped-l .resize-handle:not(.resize-handle--e) {
  display: none !important;
}

.panel--snapped-r .resize-handle:not(.resize-handle--w) {
  display: none !important;
}

.panel--snapped-t .resize-handle:not(.resize-handle--s) {
  display: none !important;
}

.panel--snapped-b .resize-handle:not(.resize-handle--n) {
  display: none !important;
}

.panel--snapped-tl .resize-handle:not(.resize-handle--e):not(.resize-handle--s):not(.resize-handle--se) {
  display: none !important;
}
.panel--snapped-tr .resize-handle:not(.resize-handle--w):not(.resize-handle--s):not(.resize-handle--sw) {
  display: none !important;
}
.panel--snapped-bl .resize-handle:not(.resize-handle--e):not(.resize-handle--n):not(.resize-handle--ne) {
  display: none !important;
}
.panel--snapped-br .resize-handle:not(.resize-handle--w):not(.resize-handle--n):not(.resize-handle--nw) {
  display: none !important;
}

/* ── Ghost de snap (aperçu avant ancrage) ── */

.wm-snap-ghost {
  position: fixed;
  z-index: 9000;
  display: none;
  background: var(--accent-subtle-2);
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  pointer-events: none;
  transition: all 80ms ease;
}

/* ── Groupes de panneaux (onglets partagés) ── */

.panel-group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

/* Barre d'onglets du groupe (remplace les headers individuels) */
.wm-group-tabbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--s-2) 0 var(--s-3);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  min-height: 44px;
}

.wm-group-tabbar::-webkit-scrollbar {
  display: none;
}

.wm-group-tabbar .panel-close {
  margin-left: auto;
  flex-shrink: 0;
}

/* Onglet individuel dans un groupe */
.wm-tab {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px var(--s-3);
  min-width: 120px;
  max-width: min(280px, 42vw);
  flex: 0 0 auto;
  font-size: 9.9px;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  white-space: nowrap;
  transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
  letter-spacing: 0.01em;
}

.wm-tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.wm-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.wm-tab-label {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.wm-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  font-size: 8.1px;
  line-height: 1;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-fast), color var(--t-fast);
}

.wm-tab-close:hover {
  background: rgba(248, 113, 113, 0.2);
  color: var(--color-error);
}

.wm-group-tabbar .wm-tab:first-child .wm-tab-close {
  display: none !important;
}

.wm-tab-context-menu {
  position: fixed;
  z-index: 12000;
  min-width: 220px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  box-shadow: var(--shadow-lg);
}

.wm-tab-context-menu button {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  font-size: 10.8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.wm-tab-context-menu button:hover {
  background: var(--bg-hover);
}

/* Panel à l'intérieur d'un groupe : prend toute la hauteur dispo */
.panel--in-group {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.panel--in-group .resize-handle {
  display: none !important;
}


.panel--in-group .panel-body,
.panel--in-group .panel-body--preview,
.panel--in-group .panel-body--access {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.panel--in-group .panel-body--viz {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE MODE (Roue / Photo)
   ═══════════════════════════════════════════════════════════════════════════ */

.mode-switcher {
  display: flex;
  gap: 2px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 3px;
  margin: 0 var(--s-2);
  flex-shrink: 0;
}

.mode-tab {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-3);
  font-size: 10.8px;
  font-weight: 500;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: calc(var(--r-md) - 2px);
  background: transparent;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
  white-space: nowrap;
}

.mode-tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.mode-tab.active,
.mode-tab[aria-selected="true"] {
  background: var(--bg-surface-3);
  border-color: var(--border);
  color: var(--text-primary);
}

.mode-tab-icon {
  font-size: 11.7px;
  opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MENUS DÉROULANTS DE LA BARRE DE MENU
   ═══════════════════════════════════════════════════════════════════════════ */

.menubar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-menu {
  position: relative;
}

.nav-menu-trigger {
  padding: 5px var(--s-3);
  font-size: 10.8px;
  font-weight: 400;
  color: var(--text-muted);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.nav-menu-trigger:hover,
.nav-menu-trigger[aria-expanded="true"] {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.nav-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 210px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-1);
  box-shadow: var(--shadow-lg);
  z-index: 400;
  animation: menuFadeIn 100ms ease;
}

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

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  font-size: 10.8px;
  font-weight: 400;
  color: var(--text-primary);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast);
  gap: var(--s-2);
}

.nav-menu-item:hover:not(:disabled) {
  background: var(--bg-hover);
}

.nav-menu-item:disabled {
  color: var(--text-faint);
  cursor: default;
}

/* Checkmarks pour Vue menu */
.nav-menu-item--check::before {
  content: '✓';
  font-size: 9.9px;
  color: var(--accent);
  width: 14px;
  flex-shrink: 0;
  visibility: hidden;
}

.nav-menu-item--check.active::before {
  visibility: visible;
}

.nav-menu-item--radio::before {
  content: '●';
  font-size: 8px;
  color: var(--accent);
  width: 14px;
  flex-shrink: 0;
  visibility: hidden;
  text-align: center;
}

.nav-menu-item--radio.active::before {
  visibility: visible;
}

.nav-menu-separator {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--s-1) var(--s-2);
}

.nav-menu-label {
  padding: var(--s-1) var(--s-3);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.nav-menu-badge {
  font-size: 9px;
  padding: 1px 6px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-faint);
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACTIONS RAPIDES (toolbar droite de la menubar)
   ═══════════════════════════════════════════════════════════════════════════ */

.menubar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  padding-left: var(--s-3);
  border-left: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px var(--s-3);
  font-size: 10.8px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
  white-space: nowrap;
  min-width: 32px;
}

.action-btn:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.action-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.action-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PANNEAUX MODULAIRES
   ═══════════════════════════════════════════════════════════════════════════ */

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base);
}

.panel:hover {
  box-shadow: var(--shadow-md);
}

/* Panneau caché via le bouton × (géré par JS via hidden) */
.panel[hidden] {
  display: none !important;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--s-3);
  min-height: 44px;
}

.panel-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: 11.7px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.panel-count {
  font-size: 10.8px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 9.9px;
  color: var(--text-faint);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
  line-height: 1;
}

.panel-close:hover {
  background: rgba(248, 113, 113, 0.14);
  color: var(--color-error);
}

.panel-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.panel-body {
  padding: var(--s-5);
  flex: 1;
  min-height: 0;
  container-type: inline-size;
}

.panel-body--palette {
  padding: 0;
  min-height: 0;
  height: auto;
  overflow: visible;
}

/* Viz : roue + info côte à côte */
.panel-body--viz {
  display: flex;
  align-items: stretch;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

.panel--viz.dragging-file {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}

.viz-main-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center the wheel block horizontally */
}

#wheelBlock {
  flex-shrink: 0;
  min-width: 260px;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#wheelBlock.wheel-block--image {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 100% !important;
}

/* ── Mode compact responsive si la hauteur ou la largeur du panneau est restreinte ── */
@container (max-height: 360px) {
  .viz-main-content {
    padding: var(--s-2) var(--s-4);
    justify-content: center;
  }

  #wheelBlock:not(.wheel-block--image) {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    width: 100%;
    max-width: 480px;
  }

  #wheelBlock:not(.wheel-block--image) .wheel-wrap {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
  }

  #wheelBlock:not(.wheel-block--image) #colorWheel,
  #wheelBlock:not(.wheel-block--image) #wheelLines {
    width: 160px !important;
    height: 160px !important;
  }

  #wheelBlock:not(.wheel-block--image) .viz-sliders-col {
    flex: 1;
    margin-top: 0;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-2);
  }
}

@container (max-width: 320px) {
  .viz-main-content {
    padding: var(--s-2);
  }

  #wheelBlock:not(.wheel-block--image) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #wheelBlock:not(.wheel-block--image) .wheel-wrap {
    width: 150px !important;
    height: 150px !important;
    flex-shrink: 0;
  }

  #wheelBlock:not(.wheel-block--image) #colorWheel,
  #wheelBlock:not(.wheel-block--image) #wheelLines {
    width: 150px !important;
    height: 150px !important;
  }

  #wheelBlock:not(.wheel-block--image) .viz-sliders-col {
    width: 100% !important;
    max-width: 220px !important;
    margin-top: var(--s-2) !important;
  }
}

.viz-info {
  flex: 1;
  min-width: 0;
}

.panel-body--access {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 0;
}

.panel-body--preview {
  padding: var(--s-7);
  background: var(--bg-surface-3);
  /* Contrast canvas backdrop */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACCORDIONS SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar-accordion {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
}

.accordion-trigger {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-3) var(--s-3);
  font-size: 10.8px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface-2);
  border: none;
  border-top-left-radius: calc(var(--r-md) - 1px);
  border-top-right-radius: calc(var(--r-md) - 1px);
  cursor: pointer;
  text-align: left;
  transition: color var(--t-base), background var(--t-base);
}

.accordion-trigger:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.accordion-trigger[aria-expanded="true"] {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.accordion-icon {
  font-size: 10.8px;
  opacity: 0.7;
  flex-shrink: 0;
}

.accordion-label {
  flex: 1;
}

.accordion-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
  transition: transform var(--t-base);
}

.accordion-chevron::before {
  content: '';
  position: absolute;
  inset: 3px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform var(--t-base);
}

.accordion-trigger[aria-expanded="true"] .accordion-chevron::before {
  transform: rotate(45deg);
}

.accordion-body {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.accordion-body[hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTIONS SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.sidebar-section-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-faint);
}

.sidebar-section--saved {
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--s-2);
}

/* ── Utilitaire bouton pleine largeur ──────────────────────────────────── */

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

/* ── Lien d'évitement ──────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-3);
  z-index: 9999;
  padding: var(--s-2) var(--s-4);
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 11.7px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: 0;
}



/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 2 — SIMULATION DALTONISME
   ═══════════════════════════════════════════════════════════════════════════ */

.daltonism-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}

.daltonism-bar-label {
  font-size: 9.9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.daltonism-btns {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  margin-left: auto;
}

.daltonism-btn {
  font-size: 10.8px;
  font-weight: 500;
  padding: 6px var(--s-3);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-surface-3);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base),
    color var(--t-base);
  white-space: nowrap;
}

.daltonism-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.daltonism-btn.active {
  background: var(--accent-subtle);
  border-color: rgba(108, 99, 255, 0.38);
  color: var(--accent);
}

.daltonism-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.daltonism-desc {
  font-size: 11.7px;
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
  min-width: 180px;
  transition: color var(--t-base);
}

.daltonism-desc--normal {
  color: var(--text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 2 — SECTION CONTRASTE (toggle)
   ═══════════════════════════════════════════════════════════════════════════ */

.contrast-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.contrast-toggle {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.toggle-chevron {
  display: inline-block;
  font-size: 14.4px;
  line-height: 1;
  transition: transform var(--t-base);
}

.contrast-toggle.active .toggle-chevron {
  transform: rotate(90deg);
}

.contrast-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 2 — SCORE D'ACCESSIBILITÉ
   ═══════════════════════════════════════════════════════════════════════════ */

.score-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.score-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.score-label {
  font-size: 9.9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

.score-value {
  font-size: 10.8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.score-bar-track {
  height: 6px;
  background: var(--bg-surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width var(--t-slow);
}

.score-bar-fill--good {
  background: var(--color-success);
}

.score-bar-fill--mid {
  background: var(--color-warning);
}

.score-bar-fill--low {
  background: var(--color-error);
}

.score-aaa {
  font-size: 9.9px;
  color: var(--color-success);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 2 — MATRICE DE CONTRASTE N×N
   ═══════════════════════════════════════════════════════════════════════════ */

.contrast-table-wrap {
  overflow-x: auto;
}

/* SVG de filtres daltonisme (caché, sert uniquement à définir les filtres) */
.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.contrast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
  width: 100%;
}

.contrast-card {
  position: relative;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer;
  isolation: isolate;
}

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

.contrast-card-preview {
  position: relative;
  padding: var(--s-6) var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  text-align: center;
  font-weight: 500;
  user-select: none;
  min-height: 90px;
}

.contrast-copy-btn {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 20, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff !important;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast);
  gap: var(--s-1);
  border-radius: inherit;
}

.contrast-copy-title {
  font-size: 11.7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.contrast-copy-subtitle {
  font-family: var(--font-mono);
  font-size: 9.9px;
  font-weight: 500;
  opacity: 0.85;
}

.contrast-card:hover .contrast-copy-btn,
.contrast-card:focus-within .contrast-copy-btn {
  opacity: 1;
}

.contrast-preview-big {
  font-size: 23.4px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.contrast-preview-sample {
  font-size: 9.9px;
  opacity: 0.9;
  letter-spacing: 0.01em;
}

.contrast-card-info {
  padding: var(--s-4) var(--s-4);
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-subtle);
}

.contrast-card-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
}

.contrast-card-ratio {
  font-family: var(--font-mono);
  font-size: 10.8px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Badges WCAG */
.wcag-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: var(--r-full);
  vertical-align: middle;
  line-height: 1.6;
}

.badge--aaa {
  background: rgba(74, 222, 128, 0.22);
  color: #4ade80;
  border: none;
}

.badge--aa {
  background: rgba(74, 222, 128, 0.12);
  color: #86efac;
  border: none;
}

.badge--aa-large {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: none;
}

.badge--fail {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: none;
}

/* Légende */
.contrast-legend {
  font-size: 10.8px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-left: auto;
}

/* Talon/barre de pied de la légende de contraste */
.panel-contrast-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

.contrast-bar-label {
  font-size: 9.9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Filtres de contraste */
.contrast-filters {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--s-2);
}

.contrast-filters-label {
  font-size: 9.9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.contrast-filter-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: opacity var(--t-fast);
}

.contrast-filter-btn input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  pointer-events: none;
}

/* Style quand le checkbox est coché (signifie Masqué/Désactivé) */
.contrast-filter-btn:has(input:checked) {
  opacity: 0.25;
  text-decoration: line-through;
}

.contrast-filter-btn:hover {
  opacity: 0.8;
}

.contrast-filter-btn:has(input:checked):hover {
  opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 2 — SUGGESTIONS DE CORRECTION DE LUMINOSITÉ
   ═══════════════════════════════════════════════════════════════════════════ */

.suggestions-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: rgba(248, 113, 113, 0.07);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: var(--r-md);
}

.suggestions-heading {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-error);
  margin-bottom: var(--s-1);
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.suggestion-ratio {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9px;
}

.suggestion-text {
  font-size: 11.7px;
  color: var(--text-primary);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 2 — APERÇU CONTEXTUEL (section wrapper)
   ═══════════════════════════════════════════════════════════════════════════ */

.preview-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.preview-empty {
  font-size: 11.7px;
  color: var(--text-faint);
  padding: var(--s-4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 2 — CARTE D'IDENTITÉ VISUELLE (charte graphique)
   ═══════════════════════════════════════════════════════════════════════════ */

.id-card {
  width: 720px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  font-size: 11.7px;
  line-height: 1.55;
  box-shadow: var(--shadow-md);
}

/* ── Zone typographique principale ── */

.id-card-stage {
  display: flex;
  height: 280px;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  overflow: hidden;
}

.id-brandboard {
  width: 100%;
  height: 100%;
  padding: var(--s-6) var(--s-8);
  display: flex;
  gap: var(--s-8);
  align-items: center;
  box-sizing: border-box;
}

/* ── Colonnes du Brandboard ── */

.id-brandboard-left {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.id-brandboard-letter {
  font-size: 86.4px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-family: var(--font-heading), "Outfit", "Inter", sans-serif;
}

.id-brandboard-right {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  flex: 1;
  align-items: flex-start;
}

.id-brandboard-category {
  font-size: 8.1px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0;
  margin-bottom: 4px;
}

.id-brandboard-title {
  font-size: 23.4px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}

.id-brandboard-subtitle {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  opacity: 0.85;
}

.id-brandboard-body {
  font-size: 10.8px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.75;
  max-width: 380px;
}

.id-brandboard-accent-pill {
  font-size: 8.1px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-full);
  letter-spacing: 0.05em;
}

.id-brandboard-accent-pills {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

/* ── Gabarit: Landing Page ── */
.id-landing {
  width: 100%;
  height: 100%;
  padding: var(--s-6) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  justify-content: space-between;
  box-sizing: border-box;
}

.id-landing-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  padding-bottom: var(--s-3);
}

.id-landing-logo {
  font-size: 14.4px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.id-landing-nav-links {
  display: flex;
  gap: var(--s-4);
}

.id-landing-nav-link {
  font-size: 9.9px;
  font-weight: 500;
  opacity: 0.8;
}

.id-landing-nav-btn {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-md);
  border: 1px solid;
  background: transparent;
  cursor: default;
}

.id-landing-hero {
  display: flex;
  gap: var(--s-8);
  align-items: center;
}

.id-landing-hero-text {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-start;
  min-width: 0;
}

.id-landing-badge {
  font-size: 8.1px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-full);
  border: 1px solid;
  margin-bottom: var(--s-1);
}

.id-landing-title {
  font-size: 25.2px;
  font-weight: 850;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.03em;
}

.id-landing-desc {
  font-size: 10.8px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.85;
}

.id-landing-ctas {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.id-landing-btn-primary {
  font-size: 9.9px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--r-lg);
  border: none;
  cursor: default;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.id-landing-btn-secondary {
  font-size: 9.9px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-lg);
  border: 1px solid;
  background: transparent;
  cursor: default;
}

.id-landing-hero-visual {
  flex: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.id-landing-viz-card {
  width: 130px;
  height: 95px;
  border-radius: var(--r-lg);
  border: 1px solid;
  padding: var(--s-3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
}

.id-landing-viz-dot {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
}

.id-landing-viz-line,
.id-landing-viz-line-short {
  height: 4.5px;
  border-radius: var(--r-sm);
}

.id-landing-viz-line {
  width: 90%;
}

.id-landing-viz-line-short {
  width: 50%;
}

/* ── Gabarit: Interface (Dashboard) ── */
.id-interface {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
}

.id-interface-sidebar {
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  flex-shrink: 0;
}

.id-interface-side-logo {
  width: 18px;
  height: 18px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-2);
}

.id-interface-side-item {
  width: 16px;
  height: 16px;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
}

.id-interface-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
}

.id-interface-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
}

.id-interface-search {
  font-size: 9px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-md);
  width: 130px;
  text-align: left;
}

.id-interface-avatar {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
}

.id-interface-grid {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  justify-content: center;
  flex: 1;
}

.id-interface-card {
  width: 130px;
  height: 95px;
  border-radius: var(--r-md);
  border: 1px solid;
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  min-width: 0;
}

.id-interface-card-title {
  font-size: 8.1px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.id-interface-card-val {
  font-size: 19.8px;
  font-weight: 800;
  line-height: 1.1;
  margin: var(--s-1) 0;
}

.id-interface-prog-bar {
  height: 5px;
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: auto;
}

.id-interface-prog-fill {
  height: 100%;
  border-radius: var(--r-full);
}

.id-interface-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  margin-top: auto;
}

.id-interface-spark-bar {
  flex: 1;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

/* ── Gabarit: Affiche (Poster/Editorial) ── */
.id-poster {
  width: 100%;
  height: 100%;
  padding: var(--s-6) var(--s-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.id-poster-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.1px;
  font-weight: 700;
  letter-spacing: 0.15em;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  padding-bottom: var(--s-2);
}

.id-poster-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin: var(--s-2) 0;
}

.id-poster-artwrap {
  position: relative;
  width: 130px;
  height: 95px;
  flex-shrink: 0;
}

.id-poster-shape-circle {
  width: 65px;
  height: 65px;
  border-radius: var(--r-full);
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.id-poster-shape-square {
  width: 60px;
  height: 60px;
  border-radius: var(--r-md);
  position: absolute;
  right: 15px;
  bottom: 5px;
  transform: rotate(15deg);
  opacity: 0.85;
}

.id-poster-textwrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 0;
  flex: 1;
}

.id-poster-title {
  font-size: 34.2px;
  font-weight: 900;
  line-height: 0.85;
  margin: 0;
  letter-spacing: -0.04em;
}

.id-poster-title-outline {
  font-size: 34.2px;
  font-weight: 900;
  line-height: 0.85;
  margin: 0;
  letter-spacing: -0.04em;
  -webkit-text-stroke-width: 1px;
}

.id-poster-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
  padding-top: var(--s-2);
}

.id-poster-desc {
  font-size: 8.1px;
  line-height: 1.4;
  margin: 0;
  max-width: 320px;
  opacity: 0.8;
}

.id-poster-date {
  font-size: 8.1px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Pied de page : sélection de gabarits de mockup ── */

.panel-preview-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

.preview-bar-label {
  font-size: 9.9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.preview-bar-templates {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}

.preview-template-btn {
  font-size: 9.9px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.preview-template-btn:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
  border-color: var(--border);
}

.preview-template-btn.active {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  border-color: var(--accent);
  font-weight: 600;
}

.preview-template-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Bande de swatches rôles ── */

.id-swatch-row {
  display: flex;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.id-swatch-row::-webkit-scrollbar {
  display: none;
}

.id-swatch-item {
  flex: 1;
  min-width: clamp(56px, 18cqi, 92px);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  user-select: none;
  position: relative;
  transition: background-color 0.2s ease, outline 0.2s ease, opacity 0.2s ease;
}

.id-swatch-item.dragging {
  opacity: 0.4;
}

.id-swatch-item.drag-over {
  background-color: var(--accent-subtle) !important;
  outline: 2px dashed var(--accent) !important;
  outline-offset: -2px;
}

.id-swatch-item:last-child {
  border-right: none;
}

.id-swatch-block {
  height: clamp(34px, 12cqi, 52px);
  cursor: grab;
  position: relative;
  touch-action: none;
  /* Prevent browser scrolling while dragging on touch screens */
}

.id-swatch-block:active {
  cursor: grabbing;
}

.id-swatch-grab-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11.7px;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.id-swatch-item:hover .id-swatch-grab-handle {
  opacity: 0.85;
}

.id-swatch-item.is-dragging .id-swatch-grab-handle {
  opacity: 0 !important;
}

/* 
   Hover effect: Swatch block does NOT change scale or translate, and colored shadow/glow is removed.
   Instead, a pseudo-element blends and bleeds onto the adjacent swatches using horizontal linear gradients.
   We use high opacity to make it clear and visible that the colors slide horizontally.
*/
.id-swatch-item {
  z-index: 1;
}

.id-swatch-item:hover {
  z-index: 10;
}

.id-swatch-block::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 5;
}

/* Make it clearly visible on hover */
.id-swatch-item:hover .id-swatch-block::after {
  opacity: 1;
}

/* Disable hover bleeding overlay while dragging to keep visual feedback clean */
.id-swatch-row:has(.is-dragging) .id-swatch-block::after {
  opacity: 0 !important;
}

/* Leftmost item: bleeds to the right neighbor (100% to 0%) */
.id-swatch-item.is-leftmost .id-swatch-block::after {
  left: 0;
  right: -100%;
  background: linear-gradient(to right, var(--swatch-color) 0%, var(--swatch-color) 33%, transparent 100%);
}

/* Central items: bleed left and right neighbors (0% to 100% to 0%) */
.id-swatch-item.is-central .id-swatch-block::after {
  left: -100%;
  right: -100%;
  background: linear-gradient(to right, transparent 0%, var(--swatch-color) 33%, var(--swatch-color) 66%, transparent 100%);
}

/* Rightmost item: bleeds to the left neighbor (0% to 100%) */
.id-swatch-item.is-rightmost .id-swatch-block::after {
  left: -100%;
  right: 0;
  background: linear-gradient(to right, transparent 0%, var(--swatch-color) 66%, var(--swatch-color) 100%);
}

.id-swatch-meta {
  padding: var(--s-2) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.id-swatch-role {
  font-size: clamp(7.2px, 2.3cqi, 9px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

.id-swatch-hex {
  font-size: clamp(8.1px, 2.7cqi, 10px);
  font-family: var(--font-mono);
  color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PANNEAU — éléments de la sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section image : dropzone ────────────────────────────────────────────── */

.image-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4);
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.image-dropzone:hover,
.image-dropzone:focus-within {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.05);
}

.image-dropzone.dragging {
  border-color: var(--accent);
  background: rgba(108, 99, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
}

.image-dropzone-icon {
  font-size: 19.8px;
  opacity: 0.55;
}

.image-dropzone-text {
  font-size: 11.7px;
  font-weight: 600;
  color: var(--text-primary);
}

.image-dropzone-hint {
  font-size: 9.9px;
  color: var(--text-faint);
}

.image-preview-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
}

.image-preview-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

.image-preview-name {
  font-size: 9.9px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-count-row {
  margin-top: var(--s-1);
}

.image-error {
  font-size: 10.8px;
  color: var(--color-error, #f87171);
  padding: var(--s-2) var(--s-3);
  background: rgba(248, 113, 113, 0.1);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--color-error, #f87171);
}

/* ── Section palettes sauvegardées ──────────────────────────────────────── */

.panel-section--saved {
  padding-bottom: var(--s-4);
}

.saved-empty {
  font-size: 10.8px;
  color: var(--text-faint);
  text-align: center;
  padding: var(--s-3) 0;
}

.saved-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.saved-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--bg-surface);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  transition: border-color 0.12s;
}

.saved-item:hover {
  border-color: rgba(108, 99, 255, 0.35);
}

.saved-swatches {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.saved-swatch {
  width: 18px;
  height: 18px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.saved-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.saved-name {
  font-size: 10.8px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saved-date {
  font-size: 9px;
  color: var(--text-faint);
}

.saved-actions {
  display: flex;
  gap: var(--s-2);
}

.saved-btn-delete {
  margin-left: auto;
  color: var(--color-error, #f87171) !important;
  opacity: 0.75;
}

.saved-btn-delete:hover {
  opacity: 1;
}

/* ── Utilitaire : accessibilité bouton invisible ─────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.panel-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.panel-heading {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-faint);
}

/* ── Aperçu couleur de base (cliquable → ouvre native picker) ────────────── */

.picker-swatch {
  display: block;
  width: 100%;
  height: 68px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.picker-swatch:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.picker-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ── Champs de saisie ────────────────────────────────────────────────────── */

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.input-row {
  display: flex;
  gap: var(--s-2);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

/* Champ HEX — plus large dans sa rangée */
.field--hex {
  flex: 2;
}

.field-label {
  font-size: 8.1px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  padding-left: 2px;
}

.field-input {
  width: 100%;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 10.8px;
  padding: 6px var(--s-2);
  transition: border-color var(--t-base), background var(--t-base),
    box-shadow var(--t-base);
  outline: none;
  text-align: center;
}

.field-input:hover {
  border-color: var(--border-strong);
}

.field-input:focus {
  border-color: var(--accent);
  background: var(--bg-surface-3);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.field-input--hex {
  font-size: 11.7px;
  letter-spacing: 0.04em;
  text-align: left;
  padding-left: var(--s-3);
  text-transform: uppercase;
}

/* ── Boutons d'harmonie ──────────────────────────────────────────────────── */

.harmony-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding-right: 4px;
}

.harmony-list::-webkit-scrollbar {
  width: 4px;
}

.harmony-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--r-full);
}

.harmony-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 10.8px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background var(--t-base), border-color var(--t-base),
    color var(--t-base);
}

.harmony-item:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

.harmony-item.active {
  background: var(--accent-subtle);
  border-color: rgba(108, 99, 255, 0.28);
  color: var(--accent);
  font-weight: 500;
}

/* Variante "Personnalisé" — s'affiche uniquement lors de l'édition manuelle */
.harmony-item--custom {
  margin-top: var(--s-1);
  border-style: dashed;
  border-color: var(--border);
}

.harmony-item--custom:hover {
  border-color: rgba(108, 99, 255, 0.4);
}

.harmony-item--custom.active {
  border-style: dashed;
  border-color: rgba(108, 99, 255, 0.45);
}

.harmony-custom-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.6px;
  opacity: 0.65;
}

/* Mini canvas SVG représentant l'harmonie */
.harmony-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

/* ── Description de l'harmonie sélectionnée ──────────────────────────────── */

.harmony-desc {
  padding: var(--s-3) var(--s-3);
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  font-size: 10.8px;
  color: var(--text-muted);
  line-height: 1.65;
  min-height: 52px;
  transition: background var(--t-base);
}

/* ── Barre Latérale : Rangées et Popups d'aide ─────────────────────────── */

.harmony-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  position: relative;
}

.harmony-row .harmony-item {
  flex: 1;
}

.harmony-info-wrapper {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.harmony-info-btn {
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-surface-2);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-base);
  padding: 0;
  line-height: 1;
}

.harmony-info-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.harmony-tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  width: 260px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), transform var(--t-base);
  pointer-events: none;
}

/* Triangle indicateur vers la gauche */
.harmony-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent var(--bg-surface-3) transparent transparent;
}

/* Affichage sur hover ou classe active pour mobile */
.harmony-info-wrapper:hover .harmony-tooltip,
.harmony-info-wrapper.active .harmony-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(14px);
  pointer-events: auto;
}

.harmony-tooltip h4 {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.harmony-tooltip p {
  margin: 0 0 10px 0;
  font-size: 10.5px;
  color: var(--text-primary);
  line-height: 1.5;
}

.harmony-tooltip h5 {
  margin: 0 0 4px 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.harmony-tooltip ul {
  margin: 0;
  padding-left: 12px;
  font-size: 10px;
  color: var(--text-muted);
}

.harmony-tooltip li {
  margin-bottom: 4px;
  line-height: 1.4;
}

/* Positionnement mobile sous la ligne */
@media (max-width: 486px) {
  .harmony-tooltip {
    left: auto;
    right: 0;
    top: 100%;
    transform: translateY(6px) translateX(0);
    width: calc(100vw - 32px);
    max-width: 280px;
    margin-right: -10px;
  }

  .harmony-tooltip::before {
    bottom: 100%;
    top: auto;
    right: 12px;
    transform: none;
    border-color: transparent transparent var(--bg-surface-3) transparent;
  }

  .harmony-info-wrapper:hover .harmony-tooltip,
  .harmony-info-wrapper.active .harmony-tooltip {
    transform: translateY(10px) translateX(0);
  }
}


/* ── Panneau Visualisation : Menu latéral droit des harmonies ─────────── */

.viz-right-menu {
  display: flex;
  flex-direction: row;
  height: 100%;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  z-index: 10;
}

.viz-menu-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-2);
  width: 38px;
  background: var(--bg-surface-2);
  flex-shrink: 0;
  box-sizing: border-box;
}

.viz-menu-item {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all var(--t-base);
  padding: 0;
}

.viz-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.viz-menu-item.active {
  background: var(--accent-subtle);
  border-color: rgba(108, 99, 255, 0.28);
  color: var(--accent);
}

.viz-harmony-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.viz-harmony-custom-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0.65;
}

.viz-menu-btn-info {
  margin-top: auto;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface-3);
  color: var(--text-primary);
  font-weight: bold;
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-base);
  padding: 0;
  line-height: 1;
}

.viz-menu-btn-info:hover,
.viz-menu-btn-info.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Tiroir d'explications */
.viz-menu-drawer {
  width: 0;
  max-width: 0;
  min-width: 0;
  overflow: hidden;
  transition: width var(--t-base) cubic-bezier(0.4, 0, 0.2, 1),
    max-width var(--t-base) cubic-bezier(0.4, 0, 0.2, 1),
    min-width var(--t-base) cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-surface);
  box-sizing: border-box;
}

.viz-menu-drawer.expanded {
  width: 240px;
  max-width: 240px;
  min-width: 240px;
  border-left: 1px solid var(--border-subtle);
}

.viz-drawer-content {
  padding: var(--s-4);
  width: 240px;
  box-sizing: border-box;
  overflow-y: auto;
  height: 100%;
}

.viz-drawer-title {
  margin: 0 0 var(--s-2) 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.viz-drawer-desc {
  margin: 0 0 var(--s-4) 0;
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.6;
}

.viz-drawer-facts-wrap {
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}

.viz-drawer-facts-wrap .theory-heading {
  margin: 0 0 var(--s-2) 0;
}

.viz-drawer-facts-wrap .theory-list {
  margin: 0;
  padding-left: 14px;
}

/* Swatch de couleur dans le tiroir de répartition */
.viz-prop-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* Tooltips pour la bande d'icônes Visualisation */
.viz-menu-tooltip {
  position: absolute;
  right: 120%;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  background: var(--bg-surface-3);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.viz-menu-tooltip--distribution,
.viz-menu-tooltip--eyedropper {
  white-space: normal !important;
  min-width: 160px;
  padding: var(--s-3) !important;
  line-height: 1.4;
  text-align: left;
}

.viz-menu-tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: transparent transparent transparent var(--bg-surface-3);
}

.viz-menu-item:hover .viz-menu-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  font-size: 11.7px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base),
    color var(--t-base), transform var(--t-fast),
    box-shadow var(--t-base);
  outline: none;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-subtle-2);
}

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

/* Primaire */
.btn--primary {
  background: var(--accent);
  color: #fff;
  width: 100%;
  padding: var(--s-3) var(--s-4);
}

.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 16px rgba(108, 99, 255, 0.35);
}

/* Fantôme */
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
  width: 100%;
  padding: var(--s-3) var(--s-4);
}

.btn--ghost:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Contour */
.btn--outline {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

.btn--outline:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-surface-2);
}

/* Petit */
.btn--sm {
  font-size: 9.9px;
  padding: 4px var(--s-3);
  border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PALETTE — swatches
   ═══════════════════════════════════════════════════════════════════════════ */

.palette-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(86px, 24cqi, 180px), 1fr));
  grid-auto-rows: minmax(130px, 1fr);
  min-height: 130px;
  height: auto;
  border-radius: 0;
  overflow: hidden;
  border: none;
  background: var(--bg-surface-2);
  position: relative;
  isolation: isolate;
}

.palette-swatches--empty {
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 12.6px;
}

/* ── Un swatch ───────────────────────────────────────────────────────────── */

.swatch {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
  transition: background var(--t-base);
  container-type: inline-size;
}

.swatch+.swatch {
  border-left: 1px solid rgba(0, 0, 0, 0.25);
}

.palette-swatches .swatch+.swatch {
  border-left: none;
}

.swatch:hover {
  background: rgba(255, 255, 255, 0.015);
}

/* Zone colorée : remplit tout l'espace disponible au-dessus du footer */
.swatch-color {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 24px;
  transition: flex var(--t-slow);
}

/* Bouton Copier (pill-shaped aligné en haut de la zone de couleur au survol) */
.swatch-copy-btn {
  position: absolute;
  top: var(--s-2);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px var(--s-2);
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff !important;
  font-size: 9.9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base), background var(--t-base);
  white-space: nowrap;
  z-index: 5;
}

.swatch:hover .swatch-copy-btn,
.swatch:focus-within .swatch-copy-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.swatch-copy-btn:hover {
  background: rgba(108, 99, 255, 0.6);
  border-color: rgba(108, 99, 255, 0.8);
}

.swatch-copy-btn.copied {
  background: rgba(74, 222, 128, 0.72);
  border-color: rgba(74, 222, 128, 0.85);
}

.swatch-copy-text {
  font-size: 9.9px;
  font-weight: 600;
}

/* ── Bouton d'édition de couleur (top-left du swatch, au survol) ─────────── */

.swatch-edit-label {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), background var(--t-base);
}

.swatch:hover .swatch-edit-label,
.swatch:focus-within .swatch-edit-label {
  opacity: 1;
  pointer-events: auto;
}

.swatch-edit-label:hover {
  background: rgba(108, 99, 255, 0.55);
  border-color: rgba(108, 99, 255, 0.7);
}

.swatch-edit-icon {
  font-size: 10.8px;
  color: #fff;
  line-height: 1;
}

/* Pied de swatch (nom + formats) */
.swatch-footer {
  padding: var(--s-3) var(--s-3) var(--s-2);
  background: var(--bg-surface-2);
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  transition: background var(--t-base);
}

.swatch:hover .swatch-footer,
.swatch:focus-within .swatch-footer {
  background: var(--bg-surface-3);
}

.swatch-name {
  font-size: 10.8px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.swatch-hex {
  font-family: var(--font-mono);
  font-size: 12.6px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  transition: color var(--t-fast);
  white-space: nowrap;
}

.swatch-hex:hover {
  color: var(--accent);
}

/* Formats additionnels (visibles uniquement au survol/focus) */
.swatch-formats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-slow);
}

.swatch:hover .swatch-formats,
.swatch:focus-within .swatch-formats {
  max-height: 64px;
}

@container (max-width: 760px) {
  .panel-body--viz {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  #wheelBlock {
    min-width: 0;
    align-self: center;
  }

  .wheel-wrap,
  .lightness-ctrl,
  .image-edit-bar {
    width: min(100%, clamp(190px, 76cqi, 340px));
  }

  .palette-swatches {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    grid-auto-rows: minmax(130px, 1fr);
  }

  .swatch-footer {
    padding: var(--s-2) var(--s-2) var(--s-2);
  }

  .swatch-name {
    font-size: 9.9px;
  }

  .swatch-hex {
    font-size: 10.8px;
  }
}

.format-tag {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--t-fast);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.format-tag:hover .format-tag-value {
  color: var(--text-muted);
}

.format-tag-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  min-width: 26px;
  flex-shrink: 0;
}

.format-tag-value {
  font-family: var(--font-mono);
  font-size: 9.9px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ROUE CHROMATIQUE
   ═══════════════════════════════════════════════════════════════════════════ */

.wheel-block {
  flex-shrink: 0;
}

.block-title {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-faint);
  margin-bottom: var(--s-3);
}

.wheel-wrap {
  position: relative;
  width: 260px;
  height: auto;
  aspect-ratio: 1 / 1;
}

.wheel-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

#colorWheel {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* ── Curseur de teinte, luminosité et Saturation ───────────────────────────── */

.viz-sliders-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 260px;
  margin-top: var(--s-3);
}

.hue-ctrl,
.lightness-ctrl,
.saturation-ctrl {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
}

.hue-label-text,
.lightness-label-text,
.saturation-label-text {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
}

.hue-slider,
.lightness-slider,
.saturation-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: var(--r-full);
  outline: none;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hue-slider {
  /* gradient spectral complet mis à jour en JS selon saturation+luminosité courantes */
  background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%));
}

.lightness-slider {
  /* gradient mis à jour en JS selon teinte+saturation courante */
  background: linear-gradient(to right, #111, #888, #fff);
}

.saturation-slider {
  /* gradient mis à jour en JS selon teinte+luminosité courante */
  background: linear-gradient(to right, #888, #f00);
}

.hue-slider::-webkit-slider-thumb,
.lightness-slider::-webkit-slider-thumb,
.saturation-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--thumb-color, #fff);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform var(--t-fast);
}

.hue-slider::-moz-range-thumb,
.lightness-slider::-moz-range-thumb,
.saturation-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--thumb-color, #fff);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform var(--t-fast);
}

.hue-slider:focus-visible,
.lightness-slider:focus-visible,
.saturation-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ctrl-value-wrap {
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 44px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.hue-value,
.lightness-value,
.saturation-value {
  font-size: 9.9px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 1px 2px;
  cursor: pointer;
  outline: none;
  transition: all var(--t-fast);
  -moz-appearance: textfield;
}

.hue-value::-webkit-inner-spin-button,
.hue-value::-webkit-outer-spin-button,
.lightness-value::-webkit-inner-spin-button,
.lightness-value::-webkit-outer-spin-button,
.saturation-value::-webkit-inner-spin-button,
.saturation-value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hue-value:hover,
.lightness-value:hover,
.saturation-value:hover {
  background: var(--bg-surface-3);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.hue-value:focus-visible,
.lightness-value:focus-visible,
.saturation-value:focus-visible {
  background: var(--bg-surface-3);
  border-color: var(--accent);
  color: var(--text-primary);
  cursor: text;
}

.ctrl-value-unit {
  font-size: 9px;
  color: var(--text-faint);
  user-select: none;
}



/* ── Éditeur de couleur extraite (mode image) ────────────────────────────── */

.image-edit-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: min(100%, clamp(220px, 52cqi, 380px));
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.image-edit-swatch {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.image-edit-label {
  font-size: 9.9px;
  font-weight: 600;
  color: var(--text-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-edit-picker-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.image-edit-btn {
  font-size: 9.9px;
  font-weight: 600;
  padding: 3px var(--s-3);
  border-radius: var(--r-md);
  background: var(--accent-subtle);
  border: 1px solid rgba(108, 99, 255, 0.3);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-base);
}

.image-edit-picker-label:hover .image-edit-btn {
  background: var(--accent-subtle-2);
}

.image-edit-close {
  padding: 3px var(--s-2);
  font-size: 10.8px;
  flex-shrink: 0;
}

.image-count-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 260px;
  margin-top: var(--s-3);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  box-sizing: border-box;
}

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

.image-count-range {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 6px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  outline: none;
  cursor: pointer;
  transition: border-color var(--t-fast);
}

.image-count-range:hover {
  border-color: var(--border-hover);
}

.image-count-range:focus-visible {
  border-color: var(--accent);
}

.image-count-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform var(--t-fast);
}

.image-count-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.image-count-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform var(--t-fast);
}

.image-count-range::-moz-range-thumb:hover {
  transform: scale(1.1);
}

/* ── Cercle central (couleur de base) ────────────────────────────────────── */
/* Taille = INNER_RATIO (0.30) × wheel-size */

.wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--wheel-size) * 0.297);
  height: calc(var(--wheel-size) * 0.297);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.55);
  transition: background var(--t-base);
  pointer-events: none;
  z-index: 2;
}

.wheel-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wheel-markers .interactive-color-point {
  pointer-events: auto;
}

/* ── Sélecteur image (remplace la roue en mode extraction) ───────────────── */

#imagePickerWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-picker-canvas {
  display: block;
  border-radius: var(--r-xl);
  width: 100%;
  height: 100%;
}

/* En mode image, le wrap sort du flux absolu et définit sa propre taille */
.wheel-block--image #imagePickerWrap {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
}

.wheel-block--image .wheel-wrap {
  width: 400px !important;
  max-width: 100% !important;
  height: auto !important;
}

.wheel-block--image .wheel-lines {
  display: none !important;
}

.viz-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  z-index: 5;
  border-radius: var(--r-xl);
}

.wheel-block--image .image-picker-canvas {
  width: 100%;
  height: auto;
  display: block;
}

.wheel-block--image .lightness-ctrl,
.wheel-block--image .image-edit-bar {
  width: min(100%, 400px) !important;
}

@media (max-width: 900px) {
  .wheel-block--image .image-picker-canvas {
    width: 100%;
    height: 100%;
  }

  .wheel-block--image .lightness-ctrl,
  .wheel-block--image .image-edit-bar {
    width: 100%;
  }
}

/* Points de sélection interactifs unifiés */
.interactive-color-point {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--point-color, #ffffff);
  border: 2px solid var(--point-border-color, var(--text-primary));
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  padding: 0;
}

.interactive-color-point:active {
  cursor: grabbing;
}

.interactive-color-point .point-center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: bold;
  user-select: none;
  color: var(--point-text-color, var(--text-primary));
  width: 100%;
  height: 100%;
}

.interactive-color-point:focus-visible,
.interactive-color-point.selected {
  outline: none;
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4), var(--shadow-lg);
  z-index: 11;
}

.wheel-marker {
  /* Hérite de .interactive-color-point */
}

.wheel-marker--base {
  border-width: 3px;
}

/* ── Bloc info harmonie ───────────────────────────────────────────────────── */

.info-card {
  flex: 1;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.info-card-title {
  font-size: 15.3px;
  font-weight: 600;
  color: var(--text-primary);
}

.info-card-desc {
  font-size: 11.7px;
  color: var(--text-muted);
  line-height: 1.7;
}

.theory-heading {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
}

.theory-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.theory-list li {
  font-size: 10.8px;
  color: var(--text-muted);
  padding-left: var(--s-4);
  position: relative;
  line-height: 1.55;
}

.theory-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOAST (notification de copie)
   ═══════════════════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: var(--s-8);
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + var(--s-8)));
  background: var(--bg-surface-3);
  color: var(--text-primary);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-full);
  font-size: 11.7px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-slow);
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}

.toast--visible {
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACTIONS DU PANNEAU
   ═══════════════════════════════════════════════════════════════════════════ */

.panel-section--actions {
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EN-TÊTE DE SECTION (règle manquante)
   ═══════════════════════════════════════════════════════════════════════════ */

.section-header-right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LIEN D'ÉVITEMENT — Skip link (WCAG 2.4.1)
   ═══════════════════════════════════════════════════════════════════════════ */

.skip-link {
  position: fixed;
  top: -100%;
  left: var(--s-4);
  z-index: 9999;
  background: var(--accent);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  font-size: 12.6px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: var(--s-3);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOCUS VISIBLE — tous les éléments interactifs
   Remplace le outline par défaut du navigateur pour cohérence visuelle.
   On utilise :focus-visible pour ne pas affecter les clics souris.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inputs et champs */
.field-input:focus-visible {
  border-color: var(--accent);
  background: var(--bg-surface-3);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

/* Picker swatch — focus via l'input natif en dessous */
.picker-swatch:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-subtle);
}

/* Boutons d'harmonie (radiogroup) */
.harmony-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--bg-surface-2);
}

/* Bouton Copier dans la zone colorée */
.swatch-copy-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  opacity: 1;
  pointer-events: auto;
}

/* Valeur HEX dans le pied de swatch */
.swatch-hex:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
  color: var(--accent);
}

/* Boutons de format (RGB, HSL, CMJN) */
.format-tag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.format-tag:focus-visible .format-tag-value {
  color: var(--text-muted);
}

/* Formats visibles au focus clavier dans le footer (accessibilité) */
.swatch-footer:focus-within .swatch-formats {
  max-height: 80px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LARGEUR MINIMUM DES SWATCHES
   Évite que les swatches deviennent illisibles avec beaucoup de couleurs
   ═══════════════════════════════════════════════════════════════════════════ */

.swatch {
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT — prefers-reduced-motion (WCAG 2.3.3)
   Désactive toutes les animations/transitions pour les utilisateurs
   ayant activé cette préférence système.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .swatch:hover {
    background: rgba(255, 255, 255, 0.015);
  }

  .swatch-formats {
    max-height: 80px;
    /* Toujours visible si réduction de mouvement active */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COULEURS FORCÉES — Mode contraste élevé (Windows HCM)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (forced-colors: active) {
  .btn {
    border: 1px solid ButtonText;
  }

  .harmony-item.active {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .swatch-copy-btn {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }

  .toast {
    border: 1px solid ButtonText;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SPLIT PANEL GROUPS & RESIZABLE DIVIDERS
   ═══════════════════════════════════════════════════════════════════════════ */

.panel-group--split-v {
  display: flex !important;
  flex-direction: column !important;
}

/* Specific body adjustment for split panels to prevent overflow issues */
.panel-group--split-v>.panel {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  min-height: 0 !important;
}

/* Specific body adjustment for split panels to prevent overflow issues */
.panel-group--split-v>.panel .panel-body,
.panel-group--split-v>.panel .panel-body--preview,
.panel-group--split-v>.panel .panel-body--access {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.panel-group--split-v>.panel .panel-body--viz {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  padding: 0;
}

.wm-split-divider {
  height: 6px;
  background: var(--border-subtle, #374151);
  cursor: row-resize;
  flex-shrink: 0;
  transition: background 0.2s;
  z-index: 10;
}

.wm-split-divider:hover {
  background: var(--accent, #3b82f6);
}

/* Style drop target bottom for split indicators */
.panel--drop-target-bottom {
  box-shadow: inset 0 -4px 0 var(--accent, #3b82f6) !important;
}

/* Dragging state for panels */
.panel--dragging {
  opacity: 0.8 !important;
  box-shadow: var(--shadow-xl), 0 0 0 2px var(--accent) !important;
  pointer-events: none !important;
}

.panel-daltonism-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

.panel-palette-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

.palette-bar-label {
  font-size: 9.9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.daltonism-bar-left {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

.daltonism-bar-label {
  font-size: 9.9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.daltonism-btn-wrapper {
  position: relative;
  display: inline-flex;
}

.daltonism-tooltip {
  position: absolute;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg-surface-3, #222230);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  font-size: 10px;
  width: max-content;
  max-width: 220px;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all var(--t-base);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.daltonism-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--border) transparent transparent transparent;
}

.daltonism-btn-wrapper:hover .daltonism-btn.active+.daltonism-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


/* Adaptation responsive micro-swatches (Container Queries) */
@container (max-width: 110px) {
  .format-tag {
    gap: 2px;
  }

  .format-tag-label {
    min-width: 18px;
    font-size: 7.2px;
  }

  .format-tag-value {
    font-size: 8.1px;
  }

  .swatch-footer {
    padding: 4px;
  }

  .swatch-name {
    font-size: 9px;
  }

  .swatch-hex {
    font-size: 9.9px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PANNEAU DEGRADES DE COULEURS
   ────────────────────────────────────────────────────────────────────────── */

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

/* Zone d'affichage du dégradé */
.gradient-stage-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 120px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
  background: var(--bg-surface-3);
}

.gradient-stage {
  width: 100%;
  height: 100%;
  background-size: cover;
  position: relative;
}

/* Barre en surcouche (Overlay Bar) du dégradé, désormais au-dessus du canevas */
.gradient-overlay-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 16px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  z-index: 10;
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
}

.overlay-bar-section {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.overlay-bar-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.overlay-select {
  background: var(--bg-surface-3);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: border-color var(--t-fast);
}

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

.overlay-control-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 10px;
  color: var(--text-muted);
}

.overlay-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.overlay-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-primary);
  min-width: 25px;
  display: inline-block;
}

.overlay-range {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--r-full);
  outline: none;
  cursor: pointer;
}

.overlay-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
}

.overlay-range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
}

.overlay-info {
  font-size: 9.5px;
  color: var(--text-faint);
  font-style: italic;
  white-space: nowrap;
}

/* Canevas du dégradé libre */
.gradient-libre-canvas {
  image-rendering: auto; /* Bilinear stretch for smooth blending */
}

/* Zone libre avec points interactifs */
.gradient-freeform-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* Points de contrôle en mode libre */
/* Points de contrôle en mode libre */
.gradient-point-handle {
  /* Hérite de .interactive-color-point */
}

.gradient-point-handle:active {
  cursor: grabbing;
}

.gradient-point-handle.selected {
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4), var(--shadow-lg);
}

/* Anneau de rayon d'influence visible au survol/sélection */
.gradient-point-influence {
  position: absolute;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1), 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 5;
  mix-blend-mode: difference;
}

/* Annotateur de dégradé Illustrator (Barre de stops horizontale) */
.gradient-annotator {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  height: 36px;
  background: rgba(19, 19, 28, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  z-index: 10;
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
}

.gradient-annotator-track {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
  cursor: pointer;
}

/* Stops interactifs */
.gradient-annotator-stop {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.2);
  cursor: grab;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.gradient-annotator-stop:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.15);
}

.gradient-annotator-stop.active {
  box-shadow: 0 0 0 2px var(--accent), 0 3px 8px rgba(0,0,0,0.6);
  border-color: var(--accent);
}

/* Points de milieu (midpoints / inter-points) */
.gradient-annotator-midpoint {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #d1d5db;
  border: 1px solid #4b5563;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  cursor: grab;
  z-index: 9;
  transition: background-color 0.1s ease, transform 0.1s ease;
}

.gradient-annotator-midpoint:hover {
  background: #ffffff;
  transform: translate(-50%, -50%) rotate(45deg) scale(1.15);
}

.gradient-annotator-midpoint:active {
  cursor: grabbing;
  background: var(--accent);
  border-color: var(--accent);
}

/* Popover de choix de couleur au-dessus du stop */
.gradient-annotator-popover {
  position: absolute;
  bottom: 50px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  box-shadow: var(--shadow-xl);
  z-index: 20;
  min-width: 130px;
}

.popover-title {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.popover-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-1);
}

.popover-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.popover-swatch:hover {
  transform: scale(1.15);
}

.popover-swatch.active {
  border: 2px solid var(--accent);
}

/* Poignée de Foyer/Centre (Radial / Conic) */
.gradient-focal-handle {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: move;
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gradient-focal-handle::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* Cadran rotatif d'angle flottant (Linear / Conic) */
.gradient-angle-dial {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(19, 19, 28, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-md);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dial-track {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.25);
}

.dial-pointer {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 16px;
  background: var(--accent);
  transform-origin: bottom center;
  transform: translateX(-50%);
}

/* Contrôles */
.gradient-controls {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.gradient-stops-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.gradient-instructions {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-3);
  font-size: 9.9px;
  color: var(--text-muted);
}

.gradient-instructions p {
  margin-bottom: var(--s-1);
}

.gradient-instructions ul {
  padding-left: var(--s-4);
  list-style-type: disc;
}

.gradient-instructions li {
  margin-bottom: 2px;
}

/* Surlignage du swatch actif */
.swatch.active {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Pied de page du panneau dégradé */
.panel-gradient-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

.gradient-bar-label {
  font-size: 9.9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.gradient-bar-modes {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}

.gradient-mode-btn {
  font-size: 9.9px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.gradient-mode-btn:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
  border-color: var(--border);
}

.gradient-mode-btn.active {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  border-color: var(--accent);
  font-weight: 600;
}


/* Loupe pixel-art zoomée pour le mode photo */
.pixel-loupe {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 0 8px rgba(0, 0, 0, 0.2);
  width: 90px;
  height: 90px;
  display: none;
  background: #000000;
}

/* ── Panneau Humeur & Mots-clés ────────────────────────────────────────── */
.mood-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-1);
}

.mood-slider-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1.5);
}

.mood-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9.9px;
  color: var(--text-muted);
  font-weight: 500;
}

.mood-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  outline: none;
  cursor: pointer;
  transition: border-color var(--t-fast);
}

.mood-slider:hover {
  border-color: var(--border-hover);
}

.mood-slider:focus-visible {
  border-color: var(--accent);
}

.mood-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform var(--t-fast);
}

.mood-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.mood-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform var(--t-fast);
}

.mood-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.mood-keyword-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
}

#moodKeywordInput {
  text-align: left;
}

.mood-keyword-feedback {
  display: flex;
  align-items: center;
  gap: var(--s-1.5);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--bg-surface-3);
  border: 1px solid var(--border-subtle);
  color: var(--accent);
  margin-top: -2px;
  transition: all var(--t-fast);
}

.mood-keyword-feedback[hidden] {
  display: none !important;
}

.mood-keyword-feedback-text {
  color: var(--text-primary);
  font-weight: 600;
}

.synonym-hint {
  font-size: 9.5px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 4px;
}

.mood-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 160px;
  overflow-y: auto;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-sizing: border-box;
  margin-top: 4px;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.mood-suggestion-item {
  width: 100%;
  padding: 6px 12px;
  text-align: left;
  background: transparent;
  border: none;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  outline: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.mood-suggestion-item strong {
  color: var(--accent);
  font-weight: 700;
}

.mood-suggestion-item:hover,
.mood-suggestion-item:focus-visible,
.mood-suggestion-item.highlighted {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.mood-suggestion-item.active {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  font-weight: 600;
}

.mood-suggestion-item.active strong {
  color: inherit;
}

.mood-quick-tags,
.mood-quick-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--s-1.5);
}

.mood-tag-chip {
  padding: 2.5px 8px;
  font-size: 10px;
  font-weight: 500;
  border-radius: var(--r-full);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  outline: none;
  transition: all var(--t-fast);
}

.mood-tag-chip:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.mood-tag-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.mood-tag-chip.active,
.mood-tag-chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  border-color: var(--accent);
  font-weight: 600;
}

.mood-slider-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
  margin-top: -4px;
  pointer-events: none;
}

.mood-slider-ticks span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-subtle);
  transition: background var(--t-fast);
}

/* Optionnel : mettre en valeur les ticks lorsque le slider est survolé */
.mood-slider-row:hover .mood-slider-ticks span {
  background: var(--border);
}


/* ─────────────────────────────────────────────────────────────────────────────
   NOUVEAUX STYLES DE LA SIDEBAR REDESSINÉE (Onglets, Carré classique, Outils)
   ───────────────────────────────────────────────────────────────────────────── */

/* Onglets de saisie */
.input-tabs {
  margin-bottom: var(--s-3);
}

.tab-content[hidden] {
  display: none !important;
}

/* Sélecteur classique (Carré HSV + Hue slider) */
.classic-picker {
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.color-picker-square {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: var(--r-md);
  cursor: crosshair;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  user-select: none;
  -webkit-user-drag: none;
}

.color-picker-square::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff, transparent);
  pointer-events: none;
}

.color-picker-square::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000, transparent);
  pointer-events: none;
}

.picker-pointer {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

.classic-hue-slider-row {
  display: flex;
  align-items: center;
}

.classic-hue-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: var(--r-full);
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%));
}

.classic-hue-slider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: var(--r-full);
}

.classic-hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  margin-top: -2px;
  cursor: grab;
  transition: transform var(--t-fast);
}

.classic-hue-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
}

/* Outils simplifiés */
.sidebar-section--tools {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--s-4);
  margin-top: var(--s-2);
}

.tools-switcher {
  margin-bottom: var(--s-2);
}

.tool-body[hidden] {
  display: none !important;
}

.tool-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Grille adaptative pour les palettes sauvegardées dans le panneau palette */
.panel-section--saved {
  margin-top: var(--s-6);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--s-5);
  padding-bottom: var(--s-2);
}



.panel-section--saved .panel-section-title {
  font-size: 12.6px;
  font-weight: 600;
  margin-bottom: var(--s-4);
  color: var(--text-primary);
}

.panel-section--saved .saved-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-4);
  flex-direction: row;
}

.panel-section--saved .saved-item {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
}

.panel-section--saved .saved-item:hover {
  border-color: var(--accent);
  background: var(--bg-surface-3);
}

/* Style pour le bouton d'édition propre à l'application */
.swatch-edit-btn {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), background var(--t-base);
  color: var(--text-primary);
  padding: 0;
  z-index: 10;
}

.swatch:hover .swatch-edit-btn,
.swatch:focus-within .swatch-edit-btn {
  opacity: 1;
  pointer-events: auto;
}

.swatch-edit-btn:hover {
  background: rgba(108, 99, 255, 0.55);
  border-color: rgba(108, 99, 255, 0.7);
}

.image-edit-hint {
  font-size: 10.8px;
  color: var(--text-muted);
  margin-left: var(--s-3);
  font-style: italic;
}

/* ── Sidebar Dock Tabs ───────────────────────────────────────────────────── */
.dock-tab {
  background: transparent;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--t-base) cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  outline: none;
}

.dock-tab:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
}

.dock-tab.active {
  background: var(--bg-surface-1);
  color: var(--accent);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.dock-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 var(--r-full) var(--r-full) 0;
}

.dock-icon {
  font-size: 17.5px;
}

.dock-label {
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 486px) {
  .dock-tab.active::after {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 0;
    width: auto;
    height: 3px;
    border-radius: var(--r-full) var(--r-full) 0 0;
  }
}

/* ── Harmonies compactes sans ascenseur dans la sidebar ──────────────────── */
#toolContentWheel .harmony-list {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0;
  gap: 1px;
}

#toolContentWheel .harmony-item {
  padding: 4px 8px !important;
  font-size: 10px !important;
}

#toolContentWheel .harmony-icon {
  width: 18px !important;
  height: 18px !important;
}

#toolContentWheel .harmony-desc {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: 10px !important;
  min-height: auto !important;
}

/* ── Contrôleur du nombre de couleurs dans le panneau Palette ───────────── */
.panel-count-toolbar {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  margin-right: var(--s-3);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.panel-count-label {
  font-weight: 500;
  user-select: none;
}

.panel-count-range {
  width: 70px;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}

.panel-count-val {
  font-weight: 700;
  color: var(--accent);
  min-width: 14px;
  text-align: center;
}

/* ── Boutons cadenas et shaker sur swatch ───────────────────────────────── */
.swatch-lock-btn {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), background var(--t-base), border-color var(--t-base);
  color: var(--text-primary);
  padding: 0;
  z-index: 10;
}

.swatch:hover .swatch-lock-btn,
.swatch:focus .swatch-lock-btn,
.swatch:focus-within .swatch-lock-btn,
.swatch-lock-btn.is-locked {
  opacity: 1;
  pointer-events: auto;
}

.swatch-lock-btn:hover {
  background: rgba(108, 99, 255, 0.55);
  border-color: rgba(108, 99, 255, 0.7);
}

.swatch-lock-icon {
  font-size: 11px;
  color: #fff;
  line-height: 1;
}

.swatch-shake-btn {
  position: absolute;
  top: var(--s-2);
  left: calc(var(--s-2) + 28px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), background var(--t-base), border-color var(--t-base);
  color: var(--text-primary);
  padding: 0;
  z-index: 10;
}

.swatch:hover .swatch-shake-btn,
.swatch:focus .swatch-shake-btn,
.swatch:focus-within .swatch-shake-btn {
  opacity: 1;
  pointer-events: auto;
}

.swatch-shake-btn:hover {
  background: rgba(108, 99, 255, 0.55);
  border-color: rgba(108, 99, 255, 0.7);
}

.swatch-shake-icon {
  font-size: 11px;
  color: #fff;
  line-height: 1;
}

/* ── Badge de contraste intelligent (Direct WCAG Micro-Badge) ────────────── */
.swatch-wcag-badge {
  position: absolute;
  bottom: var(--s-2);
  left: var(--s-2);
  display: flex;
  gap: var(--s-1);
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 3px 6px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: auto;
  z-index: 5;
  user-select: none;
}

.wcag-sub-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 3.5px;
  border-radius: var(--r-xs);
  display: inline-block;
  line-height: 1;
}

.wcag-white {
  background: #ffffff;
  color: #000000;
}

.wcag-black {
  background: #000000;
  color: #ffffff;
}

.wcag-sub-badge.fail {
  text-decoration: line-through;
  opacity: 0.3;
}

.wcag-sub-badge.pass {
  box-shadow: 0 0 3px rgba(74, 222, 128, 0.5);
}

/* ── Feedback de Réorganisation Drag & Drop ────────────────────────────── */
.swatch {
  transition: transform var(--t-base), opacity var(--t-base), outline var(--t-base);
}

.swatch.is-dragging {
  opacity: 0.3;
}

.swatch.drag-over {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  transform: scale(1.01);
}

/* ── Modal d'exportation ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity var(--t-base);
}

.modal-overlay[hidden] {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

.modal {
  background: var(--bg-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalScale var(--t-base) cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScale {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-header {
  padding: var(--s-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  margin: 0;
  font-size: 16.2px;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--s-1);
  line-height: 1;
  transition: color var(--t-fast);
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.modal-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: var(--s-2);
}

.modal-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--s-2) var(--s-3);
  font-size: 11.7px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.modal-tab:hover {
  color: var(--text-primary);
}

.modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.modal-content {
  display: flex;
}

.export-textarea {
  width: 100%;
  height: 200px;
  background: var(--bg-surface-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: var(--s-3);
  resize: none;
  outline: none;
}

.export-textarea:focus {
  border-color: var(--accent);
}

.modal-footer {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Modal des Paramètres ─────────────────────────────────────────────────── */
.modal--settings {
  max-width: 650px;
  width: 92%;
}

.settings-modal-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.settings-modal-tabs::-webkit-scrollbar {
  display: none;
}

.settings-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}

.settings-tab-panel[hidden] {
  display: none !important;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-surface-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast);
}

.settings-row:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.settings-row-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--bg-surface-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
}

.settings-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.settings-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.35;
}

.settings-select {
  background: var(--bg-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  padding: var(--s-2) var(--s-3);
  font-size: 12px;
  outline: none;
  cursor: pointer;
  min-width: 170px;
}

.settings-select:focus {
  border-color: var(--accent);
}

/* Switch toggle */
.settings-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.settings-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-surface-1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: .3s;
  border-radius: 24px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-muted);
  transition: .3s;
  border-radius: 50%;
}

input:checked+.switch-slider {
  background-color: var(--accent);
  border-color: var(--accent);
}

input:checked+.switch-slider:before {
  transform: translateX(20px);
  background-color: #fff;
}

/* Raccourcis preview */
.settings-shortcut-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.shortcut-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-surface-2);
  border-radius: var(--r-sm);
  font-size: 11.5px;
}

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

.shortcut-kbd {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}

.settings-row-actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}

.action-btn--danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.action-btn--danger:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

/* ── Modal À propos ──────────────────────────────────────────────────────── */
.modal--about {
  max-width: 520px;
  width: 90%;
}

.modal--about p {
  line-height: 1.5;
  margin-bottom: var(--s-3);
  font-size: 13.5px;
  color: var(--text-base);
}

.modal--about h4 {
  margin-top: var(--s-3);
  margin-bottom: var(--s-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary, var(--accent));
}

.modal--about ul {
  margin: var(--s-2) 0 var(--s-4) var(--s-4);
  padding: 0;
  list-style-type: disc;
}

.modal--about li {
  margin-bottom: var(--s-2);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.about-logo-wrapper {
  text-align: center;
  padding: var(--s-2) 0;
}

/* Data attributes overrides for Settings */
html[data-glassmorphism="reduced"] .modal-overlay,
html[data-glassmorphism="reduced"] .contrast-card,
html[data-glassmorphism="reduced"] .window-floating {
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}

html[data-glassmorphism="off"] .modal-overlay,
html[data-glassmorphism="off"] .contrast-card,
html[data-glassmorphism="off"] .window-floating {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: var(--bg-surface-2) !important;
}

html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *:before,
html[data-reduced-motion="true"] *:after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Simulation de Daltonisme Globale */
html[data-daltonism-global="protanopia"] .app-shell {
  filter: url(#filter-protanopia);
}

html[data-daltonism-global="deuteranopia"] .app-shell {
  filter: url(#filter-deuteranopia);
}

html[data-daltonism-global="tritanopia"] .app-shell {
  filter: url(#filter-tritanopia);
}

html[data-daltonism-global="achromatopsia"] .app-shell {
  filter: url(#filter-achromatopsia);
}

/* Desactivation de l'acceleration matérielle GPU */
html[data-hardware-accel="off"] * {
  will-change: auto !important;
}

/* Indicateur de glissement (grab handle) au centre du swatch */
.swatch-grab-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: 2;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.swatch-grab-handle svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.swatch:hover .swatch-grab-handle {
  opacity: 0.85;
}

/* Badges de lisibilité Noir & Blanc directement sur l'aperçu coloré des cartes de contraste */
.contrast-card-wcag-badge {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 2;
}

.contrast-wcag-text {
  font-size: 10px;
  font-weight: 800;
  user-select: none;
}

.contrast-wcag-text.text-white {
  color: #ffffff;
}

.contrast-wcag-text.text-black {
  color: #000000;
}

.contrast-wcag-text.fail {
  text-decoration: line-through;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PANEL SKETCH (DESSIN LIBRE) — Styles de l'ardoise de dessin libre
   ═══════════════════════════════════════════════════════════════════════════ */

/* Body du panneau dessin libre */
.panel-body--sketch {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  padding: 0;
  background: var(--bg-surface);
}

.panel--floating .panel-body--sketch {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Mode Plein écran pour le dessin */
.panel.panel--sketch.panel--full-page {
  position: fixed !important;
  left: calc(var(--sidebar-dock-w) + var(--sidebar-panel-w)) !important;
  top: var(--menubar-h) !important;
  width: calc(100vw - (var(--sidebar-dock-w) + var(--sidebar-panel-w))) !important;
  height: calc(100vh - var(--menubar-h)) !important;
  z-index: 500 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  transition: left var(--t-base) ease, width var(--t-base) ease;
}

/* Si la barre latérale gauche est repliée */
.sidebar-container.collapsed~.panels-area .panel.panel--sketch.panel--full-page,
body:has(.sidebar-container.collapsed) .panel.panel--sketch.panel--full-page {
  left: var(--sidebar-dock-w) !important;
  width: calc(100vw - var(--sidebar-dock-w)) !important;
}

/* Bouton Plein écran dans le header */
.panel-maximize {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}

.panel-maximize:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.panel.panel--full-page .panel-maximize {
  color: var(--accent);
}

/* Actions d'en-tête et alignement forcé */
.panel-header-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
}

.panel-header-actions .panel-maximize,
.panel-header-actions .panel-close {
  position: static !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Barre d'outils du dessin (monoligne unifiée) */
.sketch-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 6px var(--s-4);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
  min-height: 40px;
}

.sketch-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

/* Séparateurs verticaux */
.sketch-toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border-subtle);
  margin: 0 var(--s-1);
  flex-shrink: 0;
}

.sketch-toolbar-label,
.sketch-brush-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
}

/* Pastilles de couleurs */
.sketch-colors {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.sketch-color-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0;
  transition: transform var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
  position: relative;
}

.sketch-color-btn:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.5);
}

.sketch-color-btn.active {
  transform: scale(1.25);
  border-color: #ffffff;
  box-shadow: 0 0 0 2px var(--accent);
  z-index: 2;
}

/* Contrôles du pinceau (taille, opacité, lissage) */
.sketch-brush-ctrl {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.sketch-brush-select {
  padding: 2px var(--s-3);
  font-size: 11px;
  font-weight: 500;
  height: 24px;
  border-radius: var(--r-md);
  background: var(--bg-surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.sketch-brush-select:hover {
  background: var(--bg-hover);
}

.sketch-brush-select:focus {
  border-color: var(--accent);
}

.sketch-brush-range {
  width: 60px;
  height: 4px;
  background: var(--bg-surface-3);
  border-radius: var(--r-full);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sketch-brush-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--text-primary);
  cursor: pointer;
  transition: background var(--t-fast) ease, transform var(--t-fast) ease;
}

.sketch-brush-range::-webkit-slider-thumb:hover {
  background: var(--accent-hover);
  transform: scale(1.2);
}

.sketch-brush-val {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 20px;
  text-align: right;
}

.sketch-brush-unit {
  font-size: 9px;
  color: var(--text-muted);
}

/* Actions (Annuler, Retablir, Effacer, Exporter) — Boutons icones */
.sketch-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.sketch-actions .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--bg-surface-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.sketch-actions .action-btn svg {
  flex-shrink: 0;
}

.sketch-actions .action-btn:hover {
  background: var(--bg-surface-4);
  border-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.08);
}

.sketch-actions .action-btn--danger {
  border-color: rgba(255, 107, 107, 0.25);
  color: #ff6b6b;
}

.sketch-actions .action-btn--danger:hover {
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.4);
  color: #ff8787;
}

.sketch-actions .action-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Export wrapper et menu deroulant */
.sketch-export-wrapper {
  position: relative;
}

.sketch-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: rgba(20, 20, 29, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 4px;
  z-index: 1000;
  min-width: 80px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.sketch-export-menu.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.sketch-export-option {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.sketch-export-option:hover {
  background: var(--bg-surface-4);
  color: var(--accent);
}

/* Tooltip pour les boutons d'action du dessin */
.sketch-action-tooltip {
  position: fixed;
  background: rgba(20, 20, 29, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  color: var(--text-primary);
  pointer-events: none;
  z-index: 30000;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transition: opacity var(--t-base), transform var(--t-base);
  width: auto;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  font-size: 11.5px;
}

.sketch-action-tooltip.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sketch-action-tooltip-title {
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--accent);
}

.sketch-action-tooltip-desc {
  color: var(--text-muted);
  line-height: 1.4;
  font-size: 11px;
}

/* ── Volet Calques Intégré dans le Panneau Dessin Libre ───────────────────── */
.sketch-workspace {
  position: relative;
  display: flex;
  flex: 1;
  width: 100%;
  height: calc(100% - 44px);
  overflow: hidden;
}

.sketch-workspace.dock-left {
  flex-direction: row-reverse;
}

.sketch-workspace.dock-right {
  flex-direction: row;
}

.sketch-layers-sidebar {
  width: 270px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-2);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  z-index: 10;
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}

.sketch-workspace.dock-left .sketch-layers-sidebar {
  border-left: none;
  border-right: 1px solid var(--border-subtle);
}

.sketch-layers-sidebar[hidden] {
  display: none !important;
}

.sketch-layers-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.sketch-layers-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sketch-layers-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.sketch-layer-dock-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--bg-surface-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.sketch-layer-dock-toggle:hover {
  background: var(--bg-surface-4);
  color: var(--text-primary);
}

.sketch-layers-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sketch-layer-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--bg-surface-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.sketch-layer-tool-btn:hover {
  background: var(--bg-surface-4);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--accent);
}

.sketch-layer-tool-btn--danger:hover {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.4);
}

.sketch-layers-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
}

/* Item de calque dans la liste */
.sketch-layer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.sketch-layer-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sketch-layer-item.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: var(--accent);
}

.sketch-layer-item.dragging {
  opacity: 0.4;
  border-style: dashed;
  border-color: var(--accent);
}

.sketch-layer-item.drag-over-above {
  border-top: 2px solid var(--accent) !important;
}

.sketch-layer-item.drag-over-below {
  border-bottom: 2px solid var(--accent) !important;
}

.sketch-layer-item.is-clipping {
  margin-left: 14px;
}

.sketch-layer-clip-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.85;
}

.sketch-layer-thumb {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background-color: #14141d;
  background-image: linear-gradient(45deg, #1e1e28 25%, transparent 25%),
    linear-gradient(-45deg, #1e1e28 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1e1e28 75%),
    linear-gradient(-45deg, transparent 75%, #1e1e28 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.sketch-layer-name {
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 4px;
  border-radius: var(--r-sm);
}

.sketch-layer-name-input {
  flex: 1;
  font-size: 11px;
  font-family: inherit;
  background: var(--bg-surface-4);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  padding: 1px 4px;
  border-radius: var(--r-sm);
  outline: none;
}

.sketch-layer-reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sketch-layer-reorder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 10px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--t-fast), color var(--t-fast);
}

.sketch-layer-reorder-btn:hover {
  opacity: 1;
  color: var(--accent);
}

.sketch-layer-reorder-btn:disabled {
  opacity: 0.2 !important;
  pointer-events: none;
  cursor: default;
}

.sketch-layer-btns {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sketch-layer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}

.sketch-layer-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.sketch-layer-btn.active {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.2);
}

/* Footer d'options du calque actif */
.sketch-layer-footer {
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.15);
}

.sketch-layer-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sketch-layer-label {
  font-size: 10.5px;
  color: var(--text-muted);
  width: 52px;
  flex-shrink: 0;
}

.sketch-layer-select {
  flex: 1;
  font-size: 11px;
  padding: 3px 6px;
  background: var(--bg-surface-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-radius: var(--r-sm);
  outline: none;
}

.sketch-layer-range {
  flex: 1;
  accent-color: var(--accent);
}

.sketch-layer-val {
  font-size: 10.5px;
  color: var(--text-muted);
  width: 32px;
  text-align: right;
}

/* Conteneur de la zone de dessin */
.sketch-canvas-container {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
}

/* Canvas de dessin */
#sketchCanvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

/* Séparateurs verticaux de la sidebar */
.sidebar-divider {
  width: 32px;
  height: 1px;
  background-color: var(--border-subtle);
  margin: var(--s-1) 0;
  flex-shrink: 0;
}

/* Boutons icones de configuration du dessin (Pression du stylet) */
.sketch-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-md);
  background: var(--bg-surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast) ease;
  padding: 0;
  margin-left: 8px;
  flex-shrink: 0;
}

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

.sketch-icon-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

/* ── Custom Tooltips & Tips Cards ────────────────────────────────────────── */

/* Tooltip de dock */
.dock-tooltip {
  position: fixed;
  background: rgba(20, 20, 29, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  color: var(--text-primary);
  pointer-events: none;
  z-index: 30000;
  opacity: 0;
  transform: translateY(-50%) scale(0.95);
  transition: opacity var(--t-base), transform var(--t-base);
  width: 200px;
  box-shadow: var(--shadow-lg);
  font-size: 11.5px;
}

.dock-tooltip.visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.dock-tooltip::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 5px 5px 0;
  border-style: solid;
  border-color: transparent var(--border-strong) transparent transparent;
}

.dock-tooltip-title {
  font-weight: 700;
  margin-bottom: var(--s-1);
  color: var(--accent);
}

.dock-tooltip-desc {
  color: var(--text-muted);
  line-height: 1.4;
  font-size: 11px;
}

/* Astuces & Raccourcis dans la Sidebar */
.tool-tips-card {
  margin-top: var(--s-6);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 11.5px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.tool-tips-card:hover {
  border-color: var(--accent-subtle-2);
  box-shadow: var(--shadow-sm);
}

.tips-card-header {
  background: var(--bg-surface-3);
  padding: var(--s-2) var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.tips-card-icon {
  color: var(--accent);
}

.tips-card-body {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: var(--text-muted);
  line-height: 1.5;
}

.tips-description {
  margin: 0;
  font-style: italic;
  color: var(--text-primary);
}

.tips-subheading {
  margin: 0 0 var(--s-2) 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tips-shortcuts-list,
.tips-advices-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.tips-shortcuts-list li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.tips-kbd {
  background: var(--bg-surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 2px 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.tips-action {
  color: var(--text-muted);
}

.tips-advices-list li {
  position: relative;
  padding-left: var(--s-3);
}

.tips-advices-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* ==========================================================================
   SYSTEME DE SLIDERS UNIFIE (Design Humeur universel)
   ========================================================================== */

input[type="range"].field-input,
input[type="range"].sketch-brush-range,
input[type="range"].panel-count-range,
input[type="range"].count-range,
input[type="range"].image-count-range,
input[type="range"].sketch-layer-range,
input[type="range"].mood-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px !important;
  padding: 0 !important;
  margin: 4px 0;
  background: var(--bg-surface-3) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-sm) !important;
  outline: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

input[type="range"].field-input:hover,
input[type="range"].sketch-brush-range:hover,
input[type="range"].panel-count-range:hover,
input[type="range"].count-range:hover,
input[type="range"].image-count-range:hover,
input[type="range"].sketch-layer-range:hover,
input[type="range"].mood-slider:hover {
  border-color: var(--border-hover) !important;
  background: var(--bg-surface-4) !important;
}

input[type="range"].field-input:focus-visible,
input[type="range"].sketch-brush-range:focus-visible,
input[type="range"].panel-count-range:focus-visible,
input[type="range"].count-range:focus-visible,
input[type="range"].image-count-range:focus-visible,
input[type="range"].sketch-layer-range:focus-visible,
input[type="range"].mood-slider:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-subtle) !important;
}

/* Webkit Thumb */
input[type="range"].field-input::-webkit-slider-thumb,
input[type="range"].sketch-brush-range::-webkit-slider-thumb,
input[type="range"].panel-count-range::-webkit-slider-thumb,
input[type="range"].count-range::-webkit-slider-thumb,
input[type="range"].image-count-range::-webkit-slider-thumb,
input[type="range"].sketch-layer-range::-webkit-slider-thumb,
input[type="range"].mood-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer;
  transition: transform var(--t-fast) ease, background var(--t-fast) ease;
}

input[type="range"].field-input::-webkit-slider-thumb:hover,
input[type="range"].sketch-brush-range::-webkit-slider-thumb:hover,
input[type="range"].panel-count-range::-webkit-slider-thumb:hover,
input[type="range"].count-range::-webkit-slider-thumb:hover,
input[type="range"].image-count-range::-webkit-slider-thumb:hover,
input[type="range"].sketch-layer-range::-webkit-slider-thumb:hover,
input[type="range"].mood-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2) !important;
  background: var(--accent-hover) !important;
}

/* Firefox Thumb */
input[type="range"].field-input::-moz-range-thumb,
input[type="range"].sketch-brush-range::-moz-range-thumb,
input[type="range"].panel-count-range::-moz-range-thumb,
input[type="range"].count-range::-moz-range-thumb,
input[type="range"].image-count-range::-moz-range-thumb,
input[type="range"].sketch-layer-range::-moz-range-thumb,
input[type="range"].mood-slider::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer;
  transition: transform var(--t-fast) ease, background var(--t-fast) ease;
}

input[type="range"].field-input::-moz-range-thumb:hover,
input[type="range"].sketch-brush-range::-moz-range-thumb:hover,
input[type="range"].panel-count-range::-moz-range-thumb:hover,
input[type="range"].count-range::-moz-range-thumb:hover,
input[type="range"].image-count-range::-moz-range-thumb:hover,
input[type="range"].sketch-layer-range::-moz-range-thumb:hover,
input[type="range"].mood-slider::-moz-range-thumb:hover {
  transform: scale(1.2) !important;
  background: var(--accent-hover) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PANNEAU ÉCO-CONCEPTION (CMJN)
   ───────────────────────────────────────────────────────────────────────────── */

.panel-body--eco {
  padding: var(--s-5);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.eco-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.eco-summary-card {
  background: var(--bg-surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  box-shadow: var(--shadow-sm);
  min-height: 140px;
}

.eco-grade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border-subtle);
  padding-right: var(--s-3);
  flex-shrink: 0;
  min-width: 50px;
}

.eco-grade-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.eco-grade-letter {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.eco-grade-letter.grade--a,
.eco-grade-letter.grade--b {
  color: #4ade80;
}

.eco-grade-letter.grade--c,
.eco-grade-letter.grade--d {
  color: #fbbf24;
}

.eco-grade-letter.grade--e {
  color: #f87171;
}

.eco-summary-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.eco-summary-title {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.eco-summary-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.eco-summary-desc {
  font-size: 10px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
}

.eco-card {
  position: relative;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer;
  isolation: isolate;
  min-height: 140px;
}

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

.eco-card-preview {
  position: relative;
  min-height: 90px;
  width: 100%;
}

.eco-copy-btn {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 20, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff !important;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast);
  gap: var(--s-1);
  border-radius: inherit;
}

.eco-copy-title {
  font-size: 11.7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.eco-copy-subtitle {
  font-family: var(--font-mono);
  font-size: 9.9px;
  font-weight: 500;
  opacity: 0.85;
}

.eco-card:hover .eco-copy-btn,
.eco-card:focus-within .eco-copy-btn {
  opacity: 1;
}

.eco-card-info {
  padding: var(--s-4) var(--s-4);
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  justify-content: space-between;
}

.eco-card-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-card-index {
  color: var(--text-muted);
  font-weight: 400;
}

.eco-card-coverage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: 10px;
  margin-top: var(--s-1);
}

.eco-card-coverage-val {
  font-family: var(--font-mono);
  font-size: 10.8px;
  font-weight: 700;
  color: var(--text-primary);
}


.panel-eco-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

.eco-bar-label {
  font-size: 9.9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.eco-legend {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: auto;
}

.eco-legend-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-muted);
}