/* ============================================================================
   MODULE STATISTIQUES — Styles

   MODULE STATISTIQUES — Feuille de styles

   Styles des graphiques SVG, des tuiles de synthèse et du tiroir de bas de
   page. La palette des graphiques est définie en tête de fichier et
   redéfinie pour les thèmes sombres, afin que les courbes et les secteurs
   restent lisibles en toutes circonstances.

   Préfixe des classes : .sv-*

   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. PALETTE DES GRAPHIQUES
   ==========================================================================
   Huit teintes distinctes, choisies pour rester discernables aussi bien en
   thème clair qu'en thème sombre, et pour demeurer différenciables en cas de
   deutéranopie ou de protanopie (les deux formes de daltonisme les plus
   répandues) : on ne s'appuie jamais sur l'opposition rouge/vert seule, les
   clartés sont volontairement échelonnées.
   ========================================================================== */

:root {
  --sv-1: #3b82f6;  /* bleu     */
  --sv-2: #f59e0b;  /* ambre    */
  --sv-3: #10b981;  /* émeraude */
  --sv-4: #8b5cf6;  /* violet   */
  --sv-5: #ec4899;  /* rose     */
  --sv-6: #06b6d4;  /* cyan     */
  --sv-7: #84cc16;  /* citron   */
  --sv-8: #f97316;  /* orange   */
  --sv-grid: rgba(0, 0, 0, 0.08);
  --sv-axis: #6c757d;
}

/* En thème sombre, la grille doit être claire pour rester visible. */
[data-theme="dark"],
[data-theme="nuclear"] {
  --sv-grid: rgba(255, 255, 255, 0.12);
  --sv-axis: #adb5bd;
}

/* ==========================================================================
   1. BANDEAU DE CONFIDENTIALITÉ ET TUILES
   ========================================================================== */

.sv-privacy {
  background: var(--bg-primary);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 9.5pt;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.sv-tiles {
  display: grid;
  /* Six tuiles : en auto-fit, une largeur intermédiaire laissait une tuile
     seule sur la seconde ligne. Trois colonnes donnent deux lignes pleines. */
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media screen and (max-width: 1100px) {
  .sv-tiles { grid-template-columns: repeat(2, 1fr); }
}

.sv-tile {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

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

.sv-tile-icon { font-size: 20pt; margin-bottom: 6px; }

.sv-tile-value {
  font-size: 22pt;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Consolas', 'Courier New', monospace;
  line-height: 1.1;
}

.sv-tile-label {
  font-size: 8.5pt;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}

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

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

.sv-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

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

.sv-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.sv-range { display: flex; gap: 4px; }

.sv-range-btn {
  padding: 4px 12px;
  font-size: 9pt;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: none;
  min-height: 0;
}

.sv-range-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Le blanc sur accent ne convient pas aux thèmes à accent très clair :
   on rebascule sur du texte foncé pour ces deux thèmes. */
[data-theme="nuclear"] .sv-range-btn.is-active,
[data-theme="sunset"] .sv-range-btn.is-active { color: #101010; }

/* ==========================================================================
   3. COURBE
   ========================================================================== */

.sv-chart { width: 100%; height: auto; display: block; overflow: visible; }

.sv-grid { stroke: var(--sv-grid); stroke-width: 1; }

.sv-axis {
  fill: var(--sv-axis);
  font-size: 9px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.sv-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sv-dot {
  fill: var(--bg-primary);
  stroke: var(--accent);
  stroke-width: 2;
}

.sv-fill-top    { stop-color: var(--accent); stop-opacity: 0.30; }
.sv-fill-bottom { stop-color: var(--accent); stop-opacity: 0.02; }

/* ==========================================================================
   4. BARRES HORIZONTALES
   ========================================================================== */

.sv-bars { display: flex; flex-direction: column; gap: 9px; }

.sv-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) 3fr auto;
  align-items: center;
  gap: 10px;
  font-size: 9.5pt;
}

.sv-bar-label {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-bar-track {
  height: 12px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  overflow: hidden;
  display: block;
}

.sv-bar-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--sv-6));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sv-bar-value {
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: 700;
  color: var(--accent);
  min-width: 34px;
  text-align: right;
}

/* ==========================================================================
   5. ANNEAU
   ========================================================================== */

.sv-donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.sv-donut { width: 170px; height: 170px; flex-shrink: 0; }

.sv-slice { transition: opacity 0.2s; cursor: default; }
.sv-slice:hover { opacity: 0.78; }

.sv-slice-0 { fill: var(--sv-1); background: var(--sv-1); }
.sv-slice-1 { fill: var(--sv-2); background: var(--sv-2); }
.sv-slice-2 { fill: var(--sv-3); background: var(--sv-3); }
.sv-slice-3 { fill: var(--sv-4); background: var(--sv-4); }
.sv-slice-4 { fill: var(--sv-5); background: var(--sv-5); }
.sv-slice-5 { fill: var(--sv-6); background: var(--sv-6); }
.sv-slice-6 { fill: var(--sv-7); background: var(--sv-7); }
.sv-slice-7 { fill: var(--sv-8); background: var(--sv-8); }

.sv-donut-value {
  fill: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
  font-family: 'Consolas', 'Courier New', monospace;
}

.sv-donut-label {
  fill: var(--text-muted);
  font-size: 10px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.sv-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 9.5pt;
  color: var(--text-secondary);
  flex: 1;
  min-width: 140px;
}

.sv-legend li { display: flex; align-items: center; gap: 8px; }

.sv-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

.sv-legend strong { margin-left: auto; color: var(--text-primary); }

/* ==========================================================================
   6. HEURES ET JOURS
   ========================================================================== */

.sv-hours {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  align-items: end;
}

.sv-hour { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* L'intensité est passée en variable inline par le JS : une seule règle
   suffit pour les 24 cases, sans style en dur dans le HTML généré. */
.sv-hour-cell {
  width: 100%;
  height: 34px;
  border-radius: 4px;
  background: var(--accent);
  opacity: calc(0.10 + 0.90 * var(--sv-intensite, 0));
  transition: opacity 0.3s;
}

.sv-hour-label {
  font-size: 7.5pt;
  color: var(--text-muted);
  min-height: 12px;
}

.sv-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  height: 130px;
  align-items: end;
}

.sv-week-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
}

.sv-week-bar {
  width: 100%;
  max-width: 42px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--sv-6));
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sv-week-label { font-size: 8.5pt; color: var(--text-muted); }

.sv-empty {
  padding: 26px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 9.5pt;
  font-style: italic;
}

.sv-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 60px; /* dégage le tiroir de bas de page */
}

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

/* ==========================================================================
   7. TIROIR DE BAS DE PAGE
   ========================================================================== */

.sv-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.sv-dock-tab {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border: 2px solid var(--border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 9.5pt;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
  min-height: 0;
}

.sv-dock-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: none;
}

.sv-dock-tab-icon { font-size: 12pt; }

.sv-dock-tab-count {
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 8.5pt;
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: 700;
}

.sv-dock-tab-chevron { font-size: 8pt; transition: transform 0.3s; }

.sv-dock.is-open .sv-dock-tab-chevron { transform: rotate(180deg); }

.sv-dock-panel {
  pointer-events: auto;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
  border-top: 2px solid var(--border);
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sv-dock.is-open .sv-dock-panel {
  max-height: 62vh;
  overflow-y: auto;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
}

.sv-dock-content { padding: 16px 20px 20px; }

.sv-dock-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 0.8fr;
  gap: 22px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.sv-dock-col h4 {
  font-size: 9.5pt;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

.sv-dock-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 9.5pt;
}

.sv-dock-list li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.sv-dock-list li:last-child { border-bottom: none; }
.sv-dock-list strong { color: var(--accent); font-family: 'Consolas', 'Courier New', monospace; }

.sv-dock-more {
  width: 100%;
  padding: 8px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-size: 9.5pt;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.sv-dock-more:hover { background: var(--accent-light); transform: none; }

/* La barre d'état de l'application ne doit pas passer sous le tiroir. */
.status-bar { padding-bottom: 34px; }

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

@media screen and (max-width: 900px) {
  .sv-dock-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media screen and (max-width: 768px) {
  .sv-tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .sv-tile { padding: 12px 8px; }
  .sv-tile-value { font-size: 17pt; }
  .sv-grid2 { grid-template-columns: 1fr; }
  .sv-bar-row { grid-template-columns: minmax(90px, 1fr) 2fr auto; font-size: 8.5pt; }
  .sv-donut-wrap { justify-content: center; }
  .sv-hour-cell { height: 26px; }

  /* Le tiroir se transforme en pastille compacte, décalée pour ne pas
     recouvrir le bouton de menu mobile. */
  .sv-dock { align-items: flex-end; }
  .sv-dock-tab { margin-right: 12px; padding: 6px 12px; }
  .sv-dock-tab-text { display: none; }
  .sv-dock.is-open .sv-dock-panel { max-height: 70vh; }
  .sv-dock-content { padding: 12px; }
}

@media screen and (max-width: 480px) {
  .sv-hours { grid-template-columns: repeat(12, 1fr); }
  .sv-hour-cell { height: 20px; }
}

/* Impression : les graphiques sont conservés, les commandes retirées. */
@media print {
  .sv-dock, .sv-actions, .sv-range { display: none !important; }
  .sv-panel { break-inside: avoid; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-bar-fill,
  .sv-week-bar,
  .sv-hour-cell,
  .sv-dock-panel,
  .sv-tile { transition: none !important; }
  .sv-tile:hover { transform: none; }
}