/* ============================================================================
   HARMONIES DE COULEURS — Styles

   HARMONIES DE COULEURS — Feuille de styles

   Styles du disque chromatique, du sélecteur de couleur de base, des neuf
   figures, de la maquette d'aperçu, de la matrice de lisibilité et de
   l'encart explicatif repliable.

   Toutes les couleurs proviennent des variables de thème : la vue suit
   automatiquement les sept thèmes de l'application. La matrice de lisibilité
   utilise color-mix() avec un repli explicite pour les navigateurs antérieurs
   à 2023.

   Préfixe des classes : .harm-*

   Auteur : Émile SNYERS
   Version : 15.2
   Licence : © Tous droits réservés
   Utilisation à but non commercial autorisé .
   Non-commercial use permitted.
  // 🌍 Vous êtes autorisé à utiliser ce code, modifié ou non modifié, gratuitement et sans demande préalable, sous les conditions suivantes :  
  //  
  // 🇫🇷 Français :  
  // - Pour les entreprises ou associations opérant dans le secteur du nucléaire, l'utilisation est libre et sans aucune restriction.  
  // - Pour les entreprises ou associations exerçant en dehors du secteur du nucléaire, l'utilisation est permise uniquement dans un cadre non lucratif.  
  //  
  // 🇬🇧 English:  
  // - You are allowed to use this code, modified or unmodified, for free and without prior request, under the following conditions:  
  // - For companies or organizations operating in the nuclear sector, usage is free and without any restrictions.  
  // - For companies or organizations outside the nuclear sector, usage is allowed only in a non-profit context.  
  //  
  // 🇪🇸 Español:  
  // - Se le permite utilizar este código, modificado o no modificado, de forma gratuita y sin solicitud previa, bajo las siguientes condiciones:  
  // - Para empresas u organizaciones que operan en el sector nuclear, el uso es libre y sin restricciones.  
  // - Para empresas u organizaciones fuera del sector nuclear, el uso está permitido solo en un contexto sin fines de lucro.  
  //  
  // 🇩🇪 Deutsch:  
  // - Sie dürfen diesen Code, verändert oder unverändert, kostenlos und ohne vorherige Anfrage unter den folgenden Bedingungen verwenden:  
  // - Für Unternehmen oder Organisationen im Nuklearsektor ist die Nutzung kostenlos und uneingeschränkt.  
  // - Für Unternehmen oder Organisationen außerhalb des Nuklearsektors ist die Nutzung nur im gemeinnützigen Rahmen erlaubt.  
  //  
  // 🇮🇹 Italiano:  
  // - È consentito utilizzare questo codice, modificato o non modificato, gratuitamente e senza previa richiesta, alle seguenti condizioni:  
  // - Per le aziende o associazioni che operano nel settore nucleare, l'uso è gratuito e senza restrizioni.  
  // - Per le aziende o associazioni al di fuori del settore nucleare, l'uso è consentito solo in un contesto non profit.  
  //  
  // 🇷🇺 Русский:  
  // - Вам разрешено использовать этот код, измененный или неизмененный, бесплатно и без предварительного запроса на следующих условиях:  
  // - Для компаний или организаций, работающих в ядерной отрасли, использование бесплатно и без ограничений.  
  // - Для компаний или организаций за пределами ядерной отрасли использование разрешено только в некоммерческом контексте.  
  //  
  // 🇨🇳 中文:  
  // - 您可以在以下条件下免费使用此代码，无论是否经过修改，无需事先请求：  
  // - 对于在核能领域运营的企业或组织，可免费且无限制地使用。  
  // - 对于非核能领域的企业或组织，仅允许在非营利背景下使用。  
  //  
  // 🇯🇵 日本語:  
  // - 本コードを修正済みまたは未修正の状態で、以下の条件に基づき、事前の要請なしに無料で使用することが許可されています：  
  // - 原子力分野で活動する企業や団体は、自由かつ無制限に使用できます。  
  // - 原子力分野以外の企業や団体は、非営利目的の場合のみ使用が許可されます。  
  //  
  // 🇰🇷 한국어:  
  // - 이 코드를 수정하거나 수정하지 않은 상태로 다음 조건에 따라 사전 요청 없이 무료로 사용할 수 있습니다:  
  // - 핵 분야에서 활동하는 기업이나 단체는 무료로 제한 없이 사용할 수 있습니다.  
  // - 핵 분야 이외의 기업이나 단체는 비영리 목적으로만 사용이 허용됩니다.  
  //  
  // 🇧🇷 Português:  
  // - Você está autorizado a usar este código, modificado ou não modificado, gratuitamente e sem solicitação prévia, sob as seguintes condições:  
  // - Para empresas ou organizações que operam no setor nuclear, o uso é gratuito e sem restrições.  
  // - Para empresas ou organizações fora do setor nuclear, o uso é permitido apenas em um contexto sem fins lucrativos.  
  //  
  // 🇦🇪 العربية:  
  // - يُسمح لك باستخدام هذا الرمز، سواء كان معدلاً أو غير معدل، مجانًا وبدون طلب مسبق، بموجب الشروط التالية:  
  // - يُسمح للشركات أو الجمعيات العاملة في قطاع الطاقة النووية بالاستخدام مجانًا وبدون أي قيود.  
  // - يُسمح للشركات أو الجمعيات خارج قطاع الطاقة النووية بالاستخدام فقط في إطار غير ربحي.  
============================================================================ */

/* ==========================================================================
   1. ENCART EXPLICATIF REPLIABLE
   ==========================================================================
   Seul le titre est visible au chargement. L'élément <details> natif gère
   l'ouverture et la fermeture sans une ligne de JavaScript, reste accessible
   au clavier et fonctionne même si le script est bloqué.
   ========================================================================== */

.harm-about {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.harm-about summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Retrait du triangle natif, remplacé par notre propre chevron. */
.harm-about summary::-webkit-details-marker { display: none; }
.harm-about summary::marker { content: ''; }

.harm-about summary:hover { background: var(--bg-secondary); }
.harm-about summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.harm-about-icon { font-size: 16pt; flex-shrink: 0; }

.harm-about-title {
  flex: 1;
  font-size: 10.5pt;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.harm-about-chevron {
  font-size: 12pt;
  color: var(--accent);
  transition: transform 0.25s;
  flex-shrink: 0;
}

.harm-about[open] .harm-about-chevron { transform: rotate(180deg); }

.harm-about-body {
  padding: 4px 18px 20px;
  border-top: 1px solid var(--border);
  font-size: 10pt;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 78ch;
}

.harm-about-body h4 {
  font-size: 10pt;
  font-weight: 700;
  color: var(--text-primary);
  margin: 18px 0 6px;
}

.harm-about-body p { margin: 10px 0; }
.harm-about-body ul,
.harm-about-body ol { margin: 8px 0 8px 20px; padding: 0; }
.harm-about-body li { margin-bottom: 6px; }

.harm-about-caveat {
  margin-top: 16px !important;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-secondary);
  font-size: 9pt;
  color: var(--text-muted);
}

/* ==========================================================================
   2. PANNEAUX
   ========================================================================== */

.harm-panel {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.harm-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.harm-panel-head h3 {
  font-size: 12pt;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.harm-panel-note { font-size: 9pt; color: var(--text-muted); }

.harm-panel-text { font-size: 9pt; line-height: 1.6; color: var(--text-secondary); margin-bottom: 8px; }

.harm-explain {
  font-size: 10pt;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 16px;
  max-width: 72ch;
}

/* ==========================================================================
   3. SÉLECTEUR DE COULEUR DE BASE
   ========================================================================== */

.harm-picker-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* --- Disque chromatique --- */

.harm-wheel-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.harm-wheel {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
  box-shadow: var(--shadow-md);
  /* Teinte sur le pourtour, saturation vers le centre : c'est exactement la
     lecture qu'en fait depuisRoue() — angle = teinte, rayon = saturation. */
  background:
    radial-gradient(circle closest-side, #ffffff 0%, rgba(255,255,255,0) 78%),
    conic-gradient(from -90deg,
      hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%), hsl(90,100%,50%),
      hsl(120,100%,50%), hsl(150,100%,50%), hsl(180,100%,50%), hsl(210,100%,50%),
      hsl(240,100%,50%), hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%),
      hsl(360,100%,50%));
}

.harm-wheel-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Le polygone matérialise la figure géométrique de l'harmonie : c'est lui qui
   fait comprendre d'un coup d'œil ce que « triadique » signifie. */
.harm-wheel-shape {
  fill: rgba(255, 255, 255, 0.16);
  stroke: #ffffff;
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linejoin: round;
}

.harm-wheel-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 9.5pt;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.harm-wheel-figure {
  font-size: 13pt;
  color: var(--accent);
}

.harm-wheel-hint {
  width: 100%;
  font-size: 8pt;
  font-weight: 400;
  color: var(--text-muted);
}

/* --- Colonne de commandes --- */

.harm-picker-controls { display: flex; flex-direction: column; gap: 14px; }

.harm-base-preview {
  border-radius: 10px;
  padding: 16px 18px;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 76px;
  justify-content: center;
}

.harm-base-hex {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 17pt;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.harm-base-name { font-size: 9.5pt; opacity: 0.92; }
.harm-base-name em { font-style: normal; opacity: 0.7; margin-left: 6px; font-size: 8.5pt; }

.harm-field-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.harm-field-row label {
  font-size: 9pt;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.harm-field-row input[type="color"] {
  width: 46px;
  height: 40px;
  padding: 2px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  cursor: pointer;
}

.harm-hex {
  width: 104px;
  padding: 9px 10px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 10pt;
  text-transform: uppercase;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* --- Curseurs H / S / L --- */

.harm-slider { display: flex; flex-direction: column; gap: 5px; }

.harm-slider label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9pt;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.harm-slider output {
  font-family: 'Consolas', 'Courier New', monospace;
  color: var(--accent);
  font-size: 9.5pt;
}

.harm-slider input[type="range"] {
  width: 100%;
  height: 14px;
  border-radius: 7px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

.harm-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.harm-slider input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

/* Version compacte, dans le bloc de réglages de la figure. */
.harm-slider-inline input[type="range"] {
  height: 8px;
  background: var(--bg-tertiary);
  box-shadow: none;
}

.harm-slider-inline input[type="range"]::-webkit-slider-thumb {
  width: 18px; height: 18px; border-width: 3px;
  background: var(--bg-primary);
}
.harm-slider-inline input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-width: 3px;
  background: var(--bg-primary);
}

/* --- Sources de couleur --- */

.harm-sources { display: flex; flex-wrap: wrap; gap: 6px; }

.harm-source {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 9pt;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  min-height: 0;
}

.harm-source:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
  transform: none;
}

.harm-mini {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 11pt;
  cursor: pointer;
  box-shadow: none;
}

.harm-mini:hover { background: var(--accent-light); border-color: var(--accent); transform: none; }

/* ==========================================================================
   4. CHOIX DE LA FIGURE
   ========================================================================== */

.harm-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}

.harm-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.harm-type:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.harm-type.is-active {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.harm-type-figure { font-size: 15pt; color: var(--accent); line-height: 1; }

.harm-type-name {
  font-size: 9.5pt;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

.harm-type-preview {
  display: flex;
  width: 100%;
  height: 18px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.harm-type-preview i { flex: 1; display: block; }

.harm-tuning {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 20px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   5. RÉSULTAT
   ========================================================================== */

.harm-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.harm-swatch {
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.harm-swatch:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.harm-swatch.is-base { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }

.harm-swatch-fill {
  position: relative;
  width: 100%;
  height: 108px;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  box-shadow: none;
}

.harm-swatch-fill:hover { transform: none; }

.harm-swatch-hex {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 10pt;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.harm-swatch-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.harm-swatch-body { padding: 10px; display: flex; flex-direction: column; gap: 5px; }

.harm-swatch-name {
  font-size: 9.5pt;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.harm-swatch-values {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 8pt;
  color: var(--text-muted);
}

.harm-swatch-actions { display: flex; gap: 5px; margin-top: 2px; }

.harm-swatch-actions .harm-mini { width: 30px; height: 30px; min-width: 30px; min-height: 30px; font-size: 10pt; }

.harm-sim-notice {
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent);
  font-size: 9pt;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.harm-apply { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Répartition 60/30/10 --- */

.harm-proportions { margin-bottom: 18px; }

.harm-proportions-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 9pt;
  color: var(--text-muted);
}

.harm-proportions-head strong { color: var(--text-primary); font-size: 9.5pt; }

.harm-proportions-bar {
  display: flex;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border);
}

.harm-proportions-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.harm-proportions-bar em {
  font-style: normal;
  font-size: 9pt;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   6. APERÇU EN SITUATION
   ========================================================================== */

.harm-mock {
  border-radius: 12px;
  border: 2px solid var(--border);
  overflow: hidden;
  padding: 0 0 16px;
}

.harm-mock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 10pt;
  font-weight: 600;
}

.harm-mock-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; opacity: 0.85; }
.harm-mock-bar-right { margin-left: auto; font-weight: 400; opacity: 0.85; font-size: 9pt; }

.harm-mock-card {
  margin: 16px;
  padding: 18px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.harm-mock-card h4 { font-size: 13pt; font-weight: 700; margin: 0 0 8px; }
.harm-mock-card p { font-size: 10pt; line-height: 1.65; margin: 0 0 14px; opacity: 0.9; max-width: 62ch; }

.harm-mock-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.harm-mock-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 9.5pt;
  font-weight: 600;
}

.harm-mock-btn-ghost { background: transparent; border: 2px solid; }

.harm-mock-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.harm-mock-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 0 16px;
  font-size: 8.5pt;
  /* La couleur est calculée par le JavaScript à partir du fond de la maquette :
     une valeur figée serait illisible sur une harmonie sombre. */
}

.harm-mock-legend span { display: inline-flex; align-items: center; gap: 6px; }
.harm-mock-legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); }

.harm-verdict {
  margin-top: 14px;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 9.5pt;
  border-left: 4px solid var(--text-muted);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.harm-verdict.is-ok { border-left-color: var(--success); }
.harm-verdict.is-warn { border-left-color: var(--warning); }
.harm-verdict.is-bad { border-left-color: var(--danger); }

/* ==========================================================================
   7. MATRICE DE LISIBILITÉ
   ========================================================================== */

.harm-matrix-wrap { overflow-x: auto; }

.harm-matrix {
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 9pt;
  font-family: 'Consolas', 'Courier New', monospace;
}

.harm-matrix th { padding: 2px; background: none; border: none; }

.harm-matrix td {
  width: 54px;
  padding: 8px 4px;
  text-align: center;
  border-radius: 5px;
  font-weight: 600;
  border: none;
}

.harm-matrix-chip {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--border);
}

.harm-matrix-self { background: var(--bg-tertiary); color: var(--text-muted); }

/* Les quatre niveaux utilisent les variables sémantiques du thème, en fond
   dilué : lisibles en thème clair comme en thème sombre. */
.harm-matrix-aaa   { background: color-mix(in srgb, var(--success) 22%, var(--bg-primary)); color: var(--success); }
.harm-matrix-aa    { background: color-mix(in srgb, var(--success) 12%, var(--bg-primary)); color: var(--success); }
.harm-matrix-large { background: color-mix(in srgb, var(--warning) 16%, var(--bg-primary)); color: var(--warning); }
.harm-matrix-fail  { background: color-mix(in srgb, var(--danger) 14%, var(--bg-primary)); color: var(--danger); }

/* Repli pour les navigateurs sans color-mix (avant 2023). */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .harm-matrix-aaa   { background: var(--bg-secondary); color: var(--success); }
  .harm-matrix-aa    { background: var(--bg-secondary); color: var(--success); }
  .harm-matrix-large { background: var(--bg-secondary); color: var(--warning); }
  .harm-matrix-fail  { background: var(--bg-secondary); color: var(--danger); }
}

.harm-matrix-key {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 8.5pt;
}

.harm-matrix-key span { padding: 3px 10px; border-radius: 10px; font-weight: 600; }

/* ==========================================================================
   8. EXPORT
   ========================================================================== */

.harm-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }

.harm-tab {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 9pt;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  min-height: 0;
}

.harm-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent, #fff);
}

.harm-code {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 9pt;
  line-height: 1.6;
  color: var(--text-primary);
  overflow-x: auto;
  white-space: pre;
  max-height: 320px;
  overflow-y: auto;
}

/* ==========================================================================
   9. PANNEAU LATÉRAL
   ========================================================================== */

.harm-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9.5pt;
  color: var(--text-secondary);
  margin-bottom: 9px;
  cursor: pointer;
  font-weight: 400;
}

.harm-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.harm-select {
  width: 100%;
  padding: 8px 10px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 9.5pt;
  cursor: pointer;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 900px) {
  .harm-picker-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .harm-wheel-wrap { order: -1; }
}

@media screen and (max-width: 768px) {
  .harm-panel { padding: 14px; }
  .harm-wheel { width: 190px; height: 190px; }
  .harm-types { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .harm-swatches { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
  .harm-swatch-fill { height: 88px; }
  .harm-mock-card { margin: 12px; padding: 14px; }
  .harm-about-title { font-size: 9.5pt; }
  .harm-about-body { padding: 4px 14px 16px; font-size: 9.5pt; }
  .harm-tuning { grid-template-columns: 1fr; }
  .harm-apply .btn { width: 100%; justify-content: center; }
}

@media screen and (max-width: 480px) {
  .harm-wheel { width: 160px; height: 160px; }
  .harm-swatches { grid-template-columns: repeat(2, 1fr); }
  .harm-sources { gap: 5px; }
  .harm-source { font-size: 8.5pt; padding: 6px 10px; }
}

@media (hover: none) and (pointer: coarse) {
  .harm-source, .harm-tab, .harm-type { min-height: 44px; }
  .harm-mini { min-height: 40px; min-width: 40px; }
}

@media print {
  .harm-about, .harm-sources, .harm-tabs, .harm-apply,
  .harm-swatch-actions, .harm-tuning { display: none !important; }
  .harm-panel { break-inside: avoid; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .harm-type, .harm-swatch, .harm-about-chevron { transition: none !important; }
  .harm-type:hover, .harm-swatch:hover { transform: none; }
}