/* ============================================================================
   DICTIONNAIRE DE COULEURS — Styles

   DICTIONNAIRE DE COULEURS — Feuille de styles

   Styles de la vue Dictionnaire refondue (dictionary.js) :
   barre d'outils, recherche visuelle, groupes par famille chromatique,
   cartes de couleur et bandeau de nom poétique.

   Toutes les couleurs proviennent des variables de thème de style.css :
   le dictionnaire suit donc automatiquement les sept thèmes de l'application,
   sans valeur codée en dur.

   Préfixe des classes : .dict-*  (aucun risque de collision avec l'existant)

   Auteur : Émile SNYERS
   Version : 15.1
   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. BARRE D'OUTILS
   ========================================================================== */

.dict-toolbar {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dict-toolbar-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.dict-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

/* Le champ qui absorbe l'espace restant (recherche, tolérance). */
.dict-field-grow { flex: 1 1 280px; }

/* Aligne un bouton à droite de sa ligne. */
.dict-field-end {
  margin-left: auto;
  min-width: auto;
  justify-content: flex-end;
}

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

/* --- Champ de recherche --- */

.dict-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.dict-search-icon {
  position: absolute;
  left: 10px;
  font-size: 11pt;
  pointer-events: none;
  opacity: 0.7;
}

.dict-search {
  width: 100%;
  padding: 9px 34px 9px 34px;
  font-size: 11pt;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.dict-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.dict-search-clear {
  position: absolute;
  right: 6px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10pt;
}

.dict-search-clear:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}

/* --- Listes déroulantes --- */

.dict-select {
  padding: 9px 10px;
  font-size: 10pt;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  min-height: 40px;
}

.dict-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* --- Interrupteur de la recherche visuelle --- */

.dict-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 10pt;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.dict-toggle-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.2s;
}

.dict-toggle.is-on {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}

.dict-toggle.is-on .dict-toggle-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* La ligne entière se met en évidence quand la recherche visuelle est active,
   pour signaler que les résultats sont classés par proximité et non par famille. */
.dict-visual-row {
  padding: 12px;
  border-radius: 10px;
  border: 2px dashed var(--border);
  transition: all 0.3s;
}

.dict-visual-row.is-active {
  border-style: solid;
  border-color: var(--accent);
  background: var(--bg-secondary);
}

.dict-color-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.dict-hex-input {
  width: 96px;
  padding: 9px 8px;
  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);
}

.dict-range {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.dict-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.dict-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.dict-range:disabled { opacity: 0.4; cursor: default; }

/* Petite pastille « ? » d'aide contextuelle. */
.dict-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 8pt;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
}

.dict-reset-btn {
  padding: 9px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 10pt;
  font-weight: 600;
  cursor: pointer;
}

.dict-reset-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ==========================================================================
   2. COMPTEUR DE RÉSULTATS
   ========================================================================== */

.dict-count {
  font-size: 10pt;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dict-count strong { color: var(--accent); font-size: 12pt; }

.dict-count-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 9pt;
  font-weight: 600;
}

/* ==========================================================================
   3. GROUPES PAR FAMILLE
   ========================================================================== */

.dict-group { margin-bottom: 28px; }

.dict-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12pt;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

.dict-group-icon { font-size: 14pt; }

.dict-group-count {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 9pt;
  font-weight: 600;
}

/* ==========================================================================
   4. CARTES DE COULEUR
   ========================================================================== */

.dict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.dict-card {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}

.dict-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

/* --- Bandeau du nom poétique, placé AU-DESSUS de la couleur --- */

.dict-poetic {
  padding: 6px 10px;
  font-size: 9.5pt;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.2px;
  line-height: 1.3;
}

/* Correspondance hexadécimale exacte : présentée comme un fait. */
.dict-poetic-exact {
  background: var(--accent-light);
  color: var(--accent);
}

/* Nuance approchée : présentation volontairement distincte (italique, teinte
   neutre, signe ≈ et écart ΔE) pour qu'aucune confusion ne soit possible
   avec une correspondance exacte. */
.dict-poetic-approx {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-weight: 600;
  font-style: italic;
}

.dict-delta {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-primary);
  font-size: 8pt;
  font-style: normal;
  font-family: 'Consolas', 'Courier New', monospace;
}

/* --- Aplat de couleur --- */

.dict-swatch {
  position: relative;
  height: 92px;
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: none;
}

.dict-swatch:hover { transform: none; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35); }

.dict-swatch-hex {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 10pt;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dict-card:hover .dict-swatch-hex { opacity: 1; }

.dict-card-delta {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 8pt;
  font-weight: 700;
  font-family: 'Consolas', 'Courier New', monospace;
}

/* --- Corps de la carte --- */

.dict-card-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }

.dict-card-name {
  font-size: 10pt;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: break-word;
}

.dict-card-code {
  display: inline-block;
  margin-right: 5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 8pt;
  font-family: 'Consolas', 'Courier New', monospace;
  vertical-align: middle;
}

.dict-card-source {
  font-size: 8pt;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dict-card-values {
  margin: 0;
  font-size: 8pt;
  font-family: 'Consolas', 'Courier New', monospace;
  color: var(--text-secondary);
  line-height: 1.5;
}

.dict-card-values div { display: flex; gap: 6px; }
.dict-card-values dt { font-weight: 700; min-width: 30px; }
.dict-card-values dd { margin: 0; }

.dict-card-actions {
  display: flex;
  gap: 5px;
  margin-top: 2px;
}

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

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

.dict-mini-btn:disabled { opacity: 0.4; cursor: default; }

/* ==========================================================================
   5. ÉTAT VIDE ET PANNEAU LATÉRAL
   ========================================================================== */

.dict-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}

.dict-empty-icon { font-size: 42pt; margin-bottom: 12px; opacity: 0.6; }
.dict-empty p { margin-bottom: 8px; font-size: 11pt; }
.dict-empty-hint { font-size: 9pt; margin-bottom: 16px; }

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

.dict-panel-source {
  font-size: 8.5pt;
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
  padding-left: 10px;
  border-left: 3px solid var(--border);
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 768px) {
  .dict-toolbar { padding: 12px; gap: 12px; }

  .dict-toolbar-row { flex-direction: column; align-items: stretch; gap: 12px; }

  .dict-field { min-width: 0; width: 100%; }

  .dict-field-end { margin-left: 0; }

  .dict-reset-btn { width: 100%; }

  .dict-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

  .dict-swatch { height: 76px; }

  /* Sur écran tactile il n'y a pas de survol : le code hexadécimal reste visible. */
  .dict-swatch-hex { opacity: 1; }

  .dict-group-title { font-size: 11pt; }
}

@media screen and (max-width: 480px) {
  .dict-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .dict-swatch { height: 64px; }
  .dict-card-values { font-size: 7.5pt; }
}

@media (hover: none) and (pointer: coarse) {
  .dict-mini-btn,
  .dict-toggle,
  .dict-reset-btn { min-height: 44px; min-width: 44px; }
  .dict-search-clear { min-height: 32px; min-width: 32px; }
}

/* Impression : on garde les couleurs et les noms, on retire les commandes. */
@media print {
  .dict-toolbar,
  .dict-card-actions,
  .dict-count-badge { display: none !important; }

  .dict-grid { grid-template-columns: repeat(4, 1fr); }
  .dict-card { break-inside: avoid; box-shadow: none; }
  .dict-swatch-hex { opacity: 1; }
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  .dict-card,
  .dict-toggle,
  .dict-toggle-dot,
  .dict-visual-row { transition: none !important; }
  .dict-card:hover { transform: none; }
}