/* ============================================================================
   SYSTÈME DE SUCCÈS — Styles

   SYSTÈME DE SUCCÈS — Feuille de styles

   Styles des cartes de succès, des filtres par catégorie et par difficulté,
   du bandeau de progression et de la notification de déblocage.

   Les quatre niveaux disposent chacun d'un jeu de trois couleurs, redéfini
   pour les thèmes sombres : aucune pastille pastel ne vient trouer un fond
   noir.

   Préfixe des classes : .ach-*

   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.  
  //  
  // 🇦🇪 العربية:  
  // - يُسمح لك باستخدام هذا الرمز، سواء كان معدلاً أو غير معدل، مجانًا وبدون طلب مسبق، بموجب الشروط التالية:  
  // - يُسمح للشركات أو الجمعيات العاملة في قطاع الطاقة النووية بالاستخدام مجانًا وبدون أي قيود.  
  // - يُسمح للشركات أو الجمعيات خارج قطاع الطاقة النووية بالاستخدام فقط في إطار غير ربحي.  
============================================================================ */

/* ==========================================================================
   0. COULEURS DES QUATRE NIVEAUX
   ==========================================================================
   Chaque niveau possède une couleur d'accent, une couleur de fond très
   diluée et une couleur de texte lisible. Les trois sont redéfinies pour les
   thèmes sombres : c'est ce qui évite les pavés pastel sur fond noir.
   ========================================================================== */

:root {
  --ach-facile-c:     #16a34a;
  --ach-facile-bg:    rgba(22, 163, 74, 0.10);
  --ach-difficile-c:  #ea580c;
  --ach-difficile-bg: rgba(234, 88, 12, 0.10);
  --ach-legendaire-c: #7c3aed;
  --ach-legendaire-bg:rgba(124, 58, 237, 0.10);
  --ach-extreme-c:    #dc2626;
  --ach-extreme-bg:   rgba(220, 38, 38, 0.10);
}

[data-theme="dark"],
[data-theme="nuclear"] {
  --ach-facile-c:     #4ade80;
  --ach-facile-bg:    rgba(74, 222, 128, 0.14);
  --ach-difficile-c:  #fb923c;
  --ach-difficile-bg: rgba(251, 146, 60, 0.14);
  --ach-legendaire-c: #c084fc;
  --ach-legendaire-bg:rgba(192, 132, 252, 0.14);
  --ach-extreme-c:    #f87171;
  --ach-extreme-bg:   rgba(248, 113, 113, 0.14);
}

/* Un seul jeu de règles applique la bonne couleur selon le niveau. */
.ach-lvl-facile     { --ach-c: var(--ach-facile-c);     --ach-bg: var(--ach-facile-bg); }
.ach-lvl-difficile  { --ach-c: var(--ach-difficile-c);  --ach-bg: var(--ach-difficile-bg); }
.ach-lvl-legendaire { --ach-c: var(--ach-legendaire-c); --ach-bg: var(--ach-legendaire-bg); }
.ach-lvl-extreme    { --ach-c: var(--ach-extreme-c);    --ach-bg: var(--ach-extreme-bg); }

/* ==========================================================================
   1. BANDEAU DE PROGRESSION
   ========================================================================== */

.ach-hero {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 22px;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  align-items: center;
}

.ach-hero-rank {
  text-align: center;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
}

.ach-hero-rank-icon { font-size: 34pt; line-height: 1; margin-bottom: 6px; }

.ach-hero-rank-title {
  font-size: 12pt;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.25;
}

.ach-hero-rank-points {
  font-size: 9pt;
  color: var(--text-muted);
  margin-top: 4px;
  font-family: 'Consolas', 'Courier New', monospace;
}

.ach-hero-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10pt;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.ach-hero-line strong { font-size: 18pt; color: var(--accent); }

.ach-hero-levels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ach-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 16px;
  border: 2px solid var(--ach-c);
  background: var(--ach-bg);
  color: var(--ach-c);
  font-size: 9pt;
  font-weight: 600;
}

.ach-level-chip-count {
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: 700;
}

/* ==========================================================================
   2. BARRES DE PROGRESSION
   ========================================================================== */

.ach-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  overflow: hidden;
}

.ach-bar-lg { height: 14px; border-radius: 7px; }

.ach-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ach-c, var(--accent));
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sur le bandeau principal, la barre suit l'accent du thème. */
.ach-hero-progress .ach-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--ach-legendaire-c));
}

/* ==========================================================================
   3. FILTRES
   ========================================================================== */

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

.ach-filter-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ach-filter-label {
  font-size: 9pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  min-width: 78px;
}

.ach-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.ach-chip {
  padding: 5px 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;
}

.ach-chip:hover { border-color: var(--accent); color: var(--accent); transform: none; }

.ach-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Les puces de difficulté prennent la couleur de leur niveau. */
.ach-chip-facile.is-active     { background: var(--ach-facile-c);     border-color: var(--ach-facile-c); }
.ach-chip-difficile.is-active  { background: var(--ach-difficile-c);  border-color: var(--ach-difficile-c); }
.ach-chip-legendaire.is-active { background: var(--ach-legendaire-c); border-color: var(--ach-legendaire-c); }
.ach-chip-extreme.is-active    { background: var(--ach-extreme-c);    border-color: var(--ach-extreme-c); }

[data-theme="nuclear"] .ach-chip.is-active,
[data-theme="sunset"] .ach-chip.is-active { color: #101010; }

.ach-chip-pts {
  font-size: 7.5pt;
  opacity: 0.75;
  font-family: 'Consolas', 'Courier New', monospace;
}

/* ==========================================================================
   4. CATÉGORIES ET CARTES
   ========================================================================== */

.ach-cat { margin-bottom: 26px; }

.ach-cat-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);
}

.ach-cat-icon { font-size: 15pt; }

.ach-cat-count {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 9pt;
  font-weight: 700;
  font-family: 'Consolas', 'Courier New', monospace;
}

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

.ach-card {
  position: relative;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-left: 5px solid var(--ach-c);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

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

/* Verrouillé : atténué mais toujours lisible — l'objectif doit rester clair. */
.ach-card.is-locked .ach-card-icon { filter: grayscale(1); opacity: 0.45; }
.ach-card.is-locked { opacity: 0.88; }

.ach-card.is-unlocked {
  background: linear-gradient(135deg, var(--ach-bg), var(--bg-primary) 65%);
  border-color: var(--ach-c);
}

.ach-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

.ach-card-icon { font-size: 26pt; line-height: 1; }

.ach-card-badge {
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--ach-bg);
  color: var(--ach-c);
  border: 1px solid var(--ach-c);
  font-size: 8pt;
  font-weight: 700;
  white-space: nowrap;
}

.ach-card-title {
  font-size: 11pt;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.ach-card-desc {
  font-size: 9pt;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
  flex: 1;
}

.ach-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5pt;
  color: var(--text-muted);
}

.ach-card-progress { font-family: 'Consolas', 'Courier New', monospace; }

.ach-card-done { color: var(--ach-c); font-weight: 700; }

.ach-card-points {
  font-weight: 700;
  color: var(--ach-c);
  font-family: 'Consolas', 'Courier New', monospace;
}

.ach-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

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

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

.ach-panel-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--ach-c);
  margin-right: 6px;
  vertical-align: middle;
}

.ach-panel-note { font-size: 8.5pt; color: var(--text-muted); line-height: 1.5; }

/* ==========================================================================
   6. BANDEAU DE DÉBLOCAGE
   ========================================================================== */

.ach-popup {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 300px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 14px 20px;
  border-radius: 14px;
  border: 2px solid var(--ach-c);
  background: var(--bg-primary);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -140%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
  /* La notification passe brièvement au-dessus du ruban : elle ne doit en
     aucun cas intercepter un clic destiné aux boutons qu'elle recouvre. */
  pointer-events: none;
}

.ach-popup.is-visible { transform: translate(-50%, 0); opacity: 1; }

.ach-popup-icon {
  font-size: 30pt;
  line-height: 1;
  flex-shrink: 0;
}

.ach-popup-kicker {
  font-size: 8.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ach-c);
}

.ach-popup-title {
  font-size: 13pt;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 2px 0;
}

.ach-popup-desc { font-size: 8.5pt; color: var(--text-muted); }

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 768px) {
  .ach-hero { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .ach-hero-rank-icon { font-size: 26pt; }
  .ach-hero-line strong { font-size: 15pt; }
  .ach-filter-group { flex-direction: column; align-items: stretch; gap: 8px; }
  .ach-filter-label { min-width: 0; }
  .ach-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .ach-chip { flex-shrink: 0; }
  .ach-grid { grid-template-columns: 1fr; }
  .ach-popup { top: 12px; padding: 12px 14px; gap: 10px; }
  .ach-popup-icon { font-size: 22pt; }
  .ach-popup-title { font-size: 11pt; }
}

@media (hover: none) and (pointer: coarse) {
  .ach-chip { min-height: 40px; }
}

@media print {
  .ach-filters, .ach-popup { display: none !important; }
  .ach-card { break-inside: avoid; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ach-card, .ach-bar-fill, .ach-popup { transition: none !important; }
  .ach-card:hover { transform: none; }
  .ach-popup { transform: translate(-50%, 0); }
}