/* ============================================================================
   COULEURS PAR CATÉGORIE — Styles

   COULEURS PAR CATÉGORIE — Feuille de styles

   Styles de la grille à colonnes réglables, des cartes de catégorie, du
   contrôle de lisibilité, des fiches de symbolique et des jeux d'exemple.

   Les trois registres de la symbolique reçoivent chacun une couleur de
   liseré distincte : une norme technique et une impression personnelle ne
   doivent jamais avoir la même apparence.

   Préfixe des classes : .cat-*

   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 REPLIABLE
   ========================================================================== */

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

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

.cat-about summary::-webkit-details-marker { display: none; }
.cat-about summary::marker { content: ''; }
.cat-about summary:hover { background: var(--bg-secondary); }
.cat-about summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.cat-about-icon { font-size: 15pt; flex-shrink: 0; }

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

.cat-about-chevron { font-size: 12pt; color: var(--accent); transition: transform 0.25s; flex-shrink: 0; }
.cat-about[open] .cat-about-chevron { transform: rotate(180deg); }

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

.cat-about-body h4 { font-size: 10pt; font-weight: 700; color: var(--text-primary); margin: 16px 0 5px; }
.cat-about-body p { margin: 9px 0; }
.cat-about-body ul, .cat-about-body ol { margin: 8px 0 8px 20px; padding: 0; }
.cat-about-body li { margin-bottom: 6px; }

/* ==========================================================================
   2. AVERTISSEMENT DE STOCKAGE
   ==========================================================================
   Toujours visible, jamais replié : un utilisateur qui perd son travail
   parce qu'il a changé de navigateur n'aura pas déplié une section.
   ========================================================================== */

.cat-storage {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-left: 4px solid var(--warning);
  box-shadow: var(--shadow-sm);
}

.cat-storage-icon { font-size: 17pt; line-height: 1.2; flex-shrink: 0; }

.cat-storage-text {
  flex: 1;
  min-width: 240px;
  font-size: 9.5pt;
  line-height: 1.65;
  color: var(--text-secondary);
}

.cat-storage-text strong { color: var(--text-primary); }

.cat-storage-action {
  padding: 8px 16px;
  border: 2px solid var(--warning);
  border-radius: 8px;
  background: transparent;
  color: var(--warning);
  font-size: 9pt;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  align-self: center;
}

.cat-storage-action:hover { background: var(--bg-secondary); transform: none; }

/* ==========================================================================
   3. BARRE D'OUTILS
   ========================================================================== */

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

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

.cat-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }

/* --- Indicateur d'écart minimal --- */

.cat-gap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 6px 14px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg-secondary);
  cursor: help;
}

.cat-gap-label {
  font-size: 7.5pt;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.cat-gap-value {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12pt;
  font-weight: 700;
  line-height: 1.1;
}

.cat-gap.is-good { border-color: var(--success); }
.cat-gap.is-good .cat-gap-value { color: var(--success); }
.cat-gap.is-warn { border-color: var(--warning); }
.cat-gap.is-warn .cat-gap-value { color: var(--warning); }
.cat-gap.is-bad { border-color: var(--danger); }
.cat-gap.is-bad .cat-gap-value { color: var(--danger); }

/* --- Options d'affichage --- */

.cat-options { padding-top: 12px; border-top: 1px solid var(--border); }

.cat-option { display: flex; flex-direction: column; gap: 5px; }
.cat-option-grow { flex: 1; min-width: 180px; }
.cat-option-checks { flex-direction: row; gap: 16px; align-items: center; padding-top: 16px; }

.cat-option-label {
  font-size: 8.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin: 0;
}

.cat-segment {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.cat-seg {
  width: 34px;
  min-width: 34px;
  min-height: 30px;
  padding: 5px 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 9.5pt;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}

.cat-seg:hover { color: var(--accent); background: transparent; transform: none; }
.cat-seg.is-active { background: var(--accent); color: var(--on-accent, #fff); }

.cat-select,
.cat-search {
  padding: 8px 10px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 9.5pt;
  min-height: 38px;
}

.cat-select { cursor: pointer; }
.cat-search { width: 100%; }

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

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

/* ==========================================================================
   4. GRILLE ET CARTES
   ==========================================================================
   Le nombre de colonnes est choisi par l'utilisateur, mais jamais au prix de
   la lisibilité : minmax() empêche une carte de descendre sous 220 px, et les
   media queries reprennent la main sur petit écran.
   ========================================================================== */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(var(--cat-cols, 3), minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

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

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

.cat-card-swatch {
  position: relative;
  height: 74px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 10px;
}

.cat-card-order {
  font-size: 8pt;
  font-weight: 700;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.cat-card-copy {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  font-size: 10pt;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.cat-card:hover .cat-card-copy { opacity: 1; }
.cat-card-copy:hover { background: rgba(255, 255, 255, 0.3); transform: none; }

.cat-card-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.cat-card-name {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary);
  font-size: 11pt;
  font-weight: 700;
  font-family: inherit;
}

.cat-card-name:hover { border-color: var(--border); background: var(--bg-secondary); }
.cat-card-name:focus { border-color: var(--accent); background: var(--bg-primary); outline: none; }

.cat-card-color { display: flex; align-items: center; gap: 10px; }

.cat-card-color input[type="color"] {
  width: 42px;
  height: 36px;
  min-width: 42px;
  padding: 2px;
  border: 2px solid var(--border);
  border-radius: 7px;
  background: var(--bg-primary);
  cursor: pointer;
}

.cat-card-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

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

.cat-frname-none { font-weight: 400; font-style: italic; color: var(--text-muted); }

.cat-hex {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 8.5pt;
  color: var(--text-muted);
}

/* --- Contrôle de lisibilité --- */

.cat-contrast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--text-muted);
  font-size: 8.5pt;
  color: var(--text-secondary);
}

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

.cat-contrast-samples { display: flex; gap: 3px; flex-shrink: 0; }

.cat-contrast-samples span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  border-radius: 5px;
  font-size: 9pt;
  font-weight: 700;
}

.cat-contrast-text { line-height: 1.35; }

/* --- Fiche de symbolique --- */

.cat-symb {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.cat-symb summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  cursor: pointer;
  list-style: none;
  font-size: 8.5pt;
}

.cat-symb summary::-webkit-details-marker { display: none; }
.cat-symb summary::marker { content: ''; }
.cat-symb summary:hover { background: var(--bg-tertiary); }
.cat-symb summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.cat-symb-family { font-weight: 700; color: var(--text-primary); }
.cat-symb-more { color: var(--accent); font-weight: 600; }
.cat-symb[open] .cat-symb-more { opacity: 0.6; }

.cat-symb-body {
  padding: 4px 11px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Les trois registres sont visuellement distincts : c'est le point essentiel.
   Une norme technique et une impression personnelle ne doivent jamais avoir
   la même apparence. */
.cat-symb-block { padding-left: 10px; border-left: 3px solid var(--border); }

.cat-symb-block h5 {
  font-size: 8.5pt;
  font-weight: 700;
  margin: 8px 0 2px;
  color: var(--text-primary);
}

.cat-symb-kind {
  font-size: 7.5pt;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0 0 6px;
  font-style: italic;
}

.cat-symb-block ul { margin: 0; padding-left: 16px; }

.cat-symb-block li {
  font-size: 8.5pt;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.cat-symb-norme { border-left-color: var(--info); }
.cat-symb-culture { border-left-color: var(--accent); }
.cat-symb-reve { border-left-color: var(--warning); }

.cat-symb-poem {
  font-size: 8.5pt;
  line-height: 1.65;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

/* --- Outils de la carte --- */

.cat-card-tools { display: flex; gap: 4px; margin-top: auto; padding-top: 4px; }

.cat-tool {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 10pt;
  cursor: pointer;
  box-shadow: none;
}

.cat-tool:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
  transform: none;
}

.cat-tool:disabled { opacity: 0.35; cursor: default; }

.cat-tool-danger:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
  background: transparent;
}

/* ==========================================================================
   5. ÉTAT VIDE
   ========================================================================== */

.cat-empty {
  text-align: center;
  padding: 48px 24px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-primary);
  margin-bottom: 24px;
  color: var(--text-muted);
}

.cat-empty-icon { font-size: 42pt; margin-bottom: 10px; opacity: 0.55; }
.cat-empty h3 { font-size: 13pt; color: var(--text-primary); margin: 0 0 6px; }
.cat-empty p { font-size: 10pt; margin: 0 0 18px; }

/* ==========================================================================
   6. JEUX PRÊTS À L'EMPLOI
   ========================================================================== */

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

.cat-presets-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.cat-presets-head h3 { font-size: 12pt; font-weight: 700; color: var(--text-primary); margin: 0; }
.cat-presets-head span { font-size: 9pt; color: var(--text-muted); }

.cat-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.cat-preset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
}

.cat-preset-head { display: flex; align-items: center; gap: 8px; }
.cat-preset-icon { font-size: 14pt; }
.cat-preset-name { font-size: 10pt; font-weight: 700; color: var(--text-primary); line-height: 1.25; }

.cat-preset-desc { font-size: 8.5pt; line-height: 1.5; color: var(--text-muted); margin: 0; flex: 1; }

.cat-preset-strip {
  display: flex;
  height: 20px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.cat-preset-strip i { flex: 1; display: block; }

.cat-preset-count { font-size: 8pt; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.cat-preset-actions { display: flex; gap: 6px; }

.cat-preset-btn {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-size: 9pt;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  min-height: 0;
}

.cat-preset-btn:hover { opacity: 0.88; transform: none; }

.cat-preset-btn-ghost {
  background: transparent;
  color: var(--accent);
}

.cat-preset-btn-ghost:hover { background: var(--accent-light); }

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

.cat-panel-big {
  font-size: 30pt;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Consolas', 'Courier New', monospace;
  line-height: 1;
  margin-bottom: 2px;
}

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

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 1200px) {
  /* Au-delà de trois colonnes, les cartes deviennent trop étroites pour
     afficher le nom et le contrôle de lisibilité. */
  .cat-grid { grid-template-columns: repeat(min(var(--cat-cols, 3), 3), minmax(0, 1fr)); }
}

@media screen and (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(min(var(--cat-cols, 3), 2), minmax(0, 1fr)); }
}

@media screen and (max-width: 640px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-toolbar { padding: 12px; }
  .cat-actions .btn { width: 100%; justify-content: center; }
  .cat-toolbar-row { flex-direction: column; align-items: stretch; }
  .cat-gap { flex-direction: row; align-items: center; justify-content: space-between; }
  .cat-option-checks { padding-top: 0; }
  .cat-storage-action { width: 100%; }
  .cat-presets-grid { grid-template-columns: 1fr; }
}

@media (hover: none) and (pointer: coarse) {
  .cat-tool, .cat-seg, .cat-preset-btn { min-height: 40px; }
  /* Pas de survol sur tactile : le bouton de copie doit rester visible. */
  .cat-card-copy { opacity: 1; min-height: 34px; min-width: 34px; }
}

@media print {
  .cat-about, .cat-storage, .cat-toolbar, .cat-presets,
  .cat-card-tools, .cat-card-copy { display: none !important; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-card { break-inside: avoid; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-card, .cat-card-copy, .cat-about-chevron { transition: none !important; }
  .cat-card:hover { transform: none; }
}