/* ============================================================================
   PARAMÈTRES ET PERSONNALISATION — Feuille de style

   PARAMÈTRES ET PERSONNALISATION — Module autonome

   Remplace la vue « Paramètres » d'origine, qui se limitait au choix du
   thème et de la taille de police — deux réglages déjà accessibles depuis la
   barre supérieure.

   Ce que l'on peut désormais régler :

     • MISE EN PAGE   — menu à gauche ou à droite, barre supérieure complète,
       réduite ou masquée, densité compacte / normale / aérée ;
     • TYPOGRAPHIE    — huit piles de polices, taille et interlignage ;
     • THÈME          — les sept thèmes fournis d'abord, chacun avec son
       aperçu réel et son rapport de contraste mesuré, puis le thème
       personnel : trois couleurs (fond, texte, accent) dont tout le reste
       est dérivé, avec contrôle WCAG en direct, reprise depuis la palette et
       proposition aléatoire garantie conforme ;
     • ARRIÈRE-PLAN   — dix motifs, un « niveau de fond » réglable, et une
       scène « centrale nucléaire » animée et interactive ;
     • CURSEUR        — dix formes dessinées en SVG, dont une baguette de
       pain, avec taille réglable ;
     • TRACÉS LUMINEUX— sept tracés qui suivent la souris — points, comète,
       étincelles, neutrons, ruban, bulles, miettes de pain — chacun réglable
       séparément en couleur, taille, longueur, vivacité et opacité ;
     • EFFETS SONORES — cinq profils synthétisés à la volée, avec volume ;
     • CONFORT        — animations, contour de focus renforcé, messages
       surprises ;
     • SAUVEGARDE COMPLÈTE — tout ce que le site conserve, dans un fichier
       unique qui se restaure en un clic sur n'importe quel appareil.

   PRINCIPES DE MISE EN ŒUVRE
   --------------------------
   Aucune ressource externe : les polices sont celles déjà présentes sur
   l'appareil, les motifs de fond sont du CSS pur, les curseurs des SVG en
   URI de données, les tracés lumineux sont dessinés sur un canvas, et les
   sons sont synthétisés par l'API Web Audio à partir de simples oscillateurs.
   Le site ne télécharge pas un octet de plus.

   Un seul élément <style> est injecté dans la page et réécrit à chaque
   changement. Aucun style n'est posé en dur sur un élément : une remise à
   zéro suffit à tout annuler, et retirer ce fichier laisse l'application
   exactement dans son état d'origine.

   Auteur : Émile SNYERS
   Version : 15.3
   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. PANNEAUX
   ========================================================================== */

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

.set-panel:last-of-type { margin-bottom: 60px; }

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

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

.set-sub {
  font-size: 8.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 18px 0 8px;
}

.set-sub:first-of-type { margin-top: 0; }

.set-text {
  font-size: 9.5pt;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 14px;
  max-width: 74ch;
}

.set-text-small { font-size: 8.5pt; color: var(--text-muted); margin-top: 12px; margin-bottom: 0; }

/* ==========================================================================
   2. CHOIX EN CARTES
   ========================================================================== */

.set-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

.set-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  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;
}

.set-choice:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.set-choice.is-active {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.set-choice-icon { font-size: 15pt; line-height: 1; color: var(--accent); }
.set-choice-name { font-size: 10pt; font-weight: 600; color: var(--text-primary); }
.set-choice-desc { font-size: 8.5pt; color: var(--text-muted); line-height: 1.4; }

/* ==========================================================================
   3. POLICES
   ========================================================================== */

.set-fonts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.set-font {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
}

.set-font:hover { border-color: var(--accent); transform: none; }

.set-font.is-active { border-color: var(--accent); background: var(--accent-light); }

.set-font-name { font-size: 10.5pt; font-weight: 700; color: var(--text-primary); }
.set-font-sample { font-size: 9.5pt; color: var(--text-secondary); }
.set-font-abc { font-size: 8.5pt; color: var(--text-muted); letter-spacing: 0.5px; }

/* ==========================================================================
   4. CURSEURS DE RÉGLAGE
   ========================================================================== */

.set-sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 24px;
  align-items: end;
  margin-top: 4px;
}

/* Section neutralisée quand l'option maîtresse est désactivée : visible mais
   clairement inopérante, plutôt que masquée — l'utilisateur comprend qu'il
   existe un réglage, et pourquoi il ne s'applique pas. */
.set-sliders.is-off,
.set-theme.is-off { opacity: 0.4; pointer-events: none; }

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

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

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

.set-slider input[type="range"] {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

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

.set-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* ==========================================================================
   5. INTERRUPTEURS
   ========================================================================== */

.set-switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  cursor: pointer;
  font-weight: 400;
  margin: 0;
  border-bottom: 1px solid var(--rule, var(--border));
}

.set-switch:last-of-type { border-bottom: none; }

.set-switch input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.set-switch-body { display: flex; flex-direction: column; gap: 2px; }
.set-switch-label { font-size: 10pt; font-weight: 600; color: var(--text-primary); }
.set-switch-help { font-size: 8.5pt; line-height: 1.5; color: var(--text-muted); max-width: 68ch; }

/* ==========================================================================
   6. THÈME PERSONNALISÉ
   ========================================================================== */

.set-theme {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  margin-top: 16px;
  transition: opacity 0.2s;
}

.set-theme-fields { display: flex; flex-direction: column; gap: 12px; }

.set-theme-field { display: flex; align-items: center; gap: 10px; }

.set-theme-field label {
  font-size: 9pt;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 58px;
  margin: 0;
}

.set-theme-field input[type="color"] {
  width: 46px;
  height: 36px;
  padding: 2px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.set-theme-field code {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 8.5pt;
  color: var(--text-muted);
}

.set-theme-preview {
  grid-row: span 3;
  padding: 18px 20px;
  border-radius: 10px;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.set-theme-preview-title { font-size: 13pt; font-weight: 700; margin-bottom: 8px; }
.set-theme-preview p { font-size: 10pt; line-height: 1.6; margin: 0 0 14px; opacity: 0.9; }

.set-theme-preview-btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 7px;
  font-size: 9.5pt;
  font-weight: 600;
  margin-right: 12px;
}

.set-theme-preview-link { font-size: 9.5pt; text-decoration: underline; }

.set-theme-checks { grid-column: 1; display: flex; flex-direction: column; gap: 6px; }

.set-check-line {
  font-size: 9pt;
  margin: 0;
  padding: 7px 11px;
  border-radius: 7px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--text-muted);
  color: var(--text-secondary);
}

.set-check-line.is-ok { border-left-color: var(--success); }
.set-check-line.is-warn { border-left-color: var(--warning); }
.set-check-line.is-bad { border-left-color: var(--danger); }

.set-theme-actions { grid-column: 1; display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   7. ARRIÈRE-PLANS
   ========================================================================== */

.set-bgs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 9px;
  margin-bottom: 18px;
}

.set-bg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 13px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
}

.set-bg:hover { border-color: var(--accent); transform: none; }
.set-bg.is-active { border-color: var(--accent); background: var(--accent-light); }

.set-bg-icon { font-size: 14pt; line-height: 1.1; }
.set-bg-name { font-size: 9.5pt; font-weight: 600; color: var(--text-primary); }
.set-bg-desc { font-size: 8pt; color: var(--text-muted); line-height: 1.4; }

/* ==========================================================================
   7 bis. VIGNETTES DE THÈME
   ==========================================================================
   Chaque vignette montre le thème avec ses propres couleurs — un aperçu réel
   plutôt qu'une pastille — et affiche le rapport de contraste mesuré entre
   son texte et son fond. Sur un site consacré au contraste, annoncer le
   chiffre est la moindre des politesses.
   ========================================================================== */

.set-theme-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.set-theme-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 9px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg-primary);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
}

.set-theme-card:hover { border-color: var(--accent); transform: none; }

.set-theme-card.is-active {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 13, 110, 253), 0.18);
}

/* L'aperçu : le fond, le texte et l'accent du thème, côte à côte. */
.set-theme-card-vue {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(128, 128, 128, .28);
  overflow: hidden;
}

.set-theme-card-icone { font-size: 15pt; line-height: 1; }
.set-theme-card-aa { font-size: 15pt; font-weight: 700; line-height: 1; }

.set-theme-card-pastille {
  position: absolute;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
}

.set-theme-card-nom {
  font-size: 10pt;
  font-weight: 700;
  color: var(--text-primary);
  padding: 0 2px;
}

.set-theme-card-note {
  font-size: 8pt;
  line-height: 1.4;
  color: var(--text-muted);
  padding: 0 2px;
  flex: 1;
}

.set-theme-card-ratio {
  font-size: 8pt;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px;
  border-radius: 6px;
  align-self: flex-start;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.set-theme-card-ratio.is-ok { color: var(--success); }
.set-theme-card-ratio.is-warn { color: var(--warning); }

/* Rappel, dans le panneau latéral, que le thème personnalisé prend le dessus. */
.set-panel-avert {
  margin-top: 8px;
  padding: 7px 10px;
  border-left: 3px solid var(--warning);
  border-radius: 0 6px 6px 0;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* ==========================================================================
   8. CURSEURS
   ========================================================================== */

.set-cursors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.set-cursor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 13px 8px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary);
  cursor: pointer;
  box-shadow: none;
}

.set-cursor:hover { border-color: var(--accent); transform: none; }
.set-cursor.is-active { border-color: var(--accent); background: var(--accent-light); }

.set-cursor-icon { font-size: 19pt; line-height: 1; }
.set-cursor-name { font-size: 8.5pt; font-weight: 600; color: var(--text-secondary); text-align: center; }

/* Traînée de curseur : des pastilles fixées, sans interaction possible. */
/* Le tracé lumineux est dessiné sur un unique canvas plein écran posé
   au-dessus de la page. En pointer-events: none il ne bloque jamais un clic,
   et il n'existe dans le document que lorsqu'un tracé est réellement choisi. */
.set-trainee-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
}

/* ==========================================================================
   9. SONS
   ========================================================================== */

.set-sounds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.set-sound {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-primary);
}

.set-sound.is-active { border-color: var(--accent); background: var(--accent-light); }

.set-sound-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 13px;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  min-width: 0;
}

.set-sound-main:hover { background: transparent; transform: none; }

.set-sound-icon { font-size: 14pt; line-height: 1.1; }
.set-sound-name { font-size: 9.5pt; font-weight: 600; color: var(--text-primary); }
.set-sound-desc { font-size: 8pt; color: var(--text-muted); line-height: 1.4; }

.set-sound-try {
  width: 42px;
  min-width: 42px;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-secondary);
  color: var(--accent);
  font-size: 11pt;
  cursor: pointer;
  box-shadow: none;
}

.set-sound-try:hover { background: var(--bg-tertiary); transform: none; }

/* ==========================================================================
   10. SAUVEGARDE
   ========================================================================== */

.set-storage {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.set-storage-size { display: flex; flex-direction: column; align-items: center; min-width: 92px; }

.set-storage-value {
  font-size: 24pt;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Consolas', 'Courier New', monospace;
  line-height: 1;
}

.set-storage-unit {
  font-size: 8pt;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
}

.set-storage-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }

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

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

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

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 900px) {
  .set-theme { grid-template-columns: minmax(0, 1fr); }
  .set-theme-preview { grid-row: auto; }
  .set-theme-checks, .set-theme-actions { grid-column: auto; }
}

@media screen and (max-width: 768px) {
  .set-panel { padding: 14px; }
  .set-choices { grid-template-columns: 1fr; }
  .set-fonts { grid-template-columns: 1fr; }
  .set-bgs { grid-template-columns: repeat(2, 1fr); }
  .set-cursors { grid-template-columns: repeat(3, 1fr); }
  .set-sounds { grid-template-columns: 1fr; }
  .set-sliders { grid-template-columns: 1fr; }
  .set-storage-actions .btn { width: 100%; justify-content: center; }
  /* La traînée n'a aucun sens sans souris. */
  .set-trainee-canvas { display: none; }
}

@media (hover: none) and (pointer: coarse) {
  .set-choice, .set-font, .set-bg, .set-cursor, .set-sound-main { min-height: 44px; }
  .set-sound-try { min-width: 46px; }
  .set-trainee-canvas { display: none; }
}

@media print {
  .set-panel { break-inside: avoid; box-shadow: none; }
  .set-trainee-canvas { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .set-choice { transition: none !important; }
  .set-choice:hover { transform: none; }
  .set-trainee-canvas { display: none !important; }
}

/* ==========================================================================
   14. NOTE DE LA CENTRALE
   ==========================================================================
   Affichée uniquement quand l'arrière-plan « Centrale nucléaire » est choisi.
   Elle explique ce qui est interactif, et — sur un thème clair — propose les
   deux thèmes qui rendent la scène lisible, sans pour autant interdire quoi
   que ce soit : le réglage reste celui de l'utilisateur.
   ========================================================================== */

.set-note-centrale {
  margin-top: 14px;
  padding: 13px 16px;
  border: 2px solid var(--border);
  border-left: 4px solid var(--info);
  border-radius: 0 10px 10px 0;
  background: var(--bg-tertiary);
}

.set-note-centrale p {
  font-size: 9.5pt;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.set-note-centrale p:last-child { margin-bottom: 0; }
.set-note-centrale strong { color: var(--text-primary); }

.set-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}