/* ===================================================================
 * VCF Ninja World — thème « circuit board »
 * Palette et vocabulaire visuels repris de la maquette VCF World Hub.
 * =================================================================== */

:root{
  /* ---- Carte ---- */
  --board-bg:      #060a08;
  --board-bg-2:    #0a1310;
  --trace-idle:    #1f4a3d;
  --trace-glow:    #0d2b22;
  --electric:      #4dffb0;
  --electric-dim:  #2a9d76;
  --gold:          #ffcc66;
  --console-orange:#ff8a3d;

  /* ---- Encre ---- */
  --ink:           #dff2e9;
  --ink-dim:       #6d8a7e;
  --ink-faint:     #35473e;

  /* ---- Composants ---- */
  --chip-fill:     #0b1512;
  --chip-stroke:   #24473b;
  --panel:         #0b1512;
  --panel-2:       #0e1b17;
  --line:          #1b332b;

  /* ---- États ---- */
  --danger:        #ff6b4d;
  --danger-bg:     #2a1310;
  --success-bg:    #0d2b22;
  --warning:       #ffcc66;
  --warning-bg:    #2a2310;

  /* ---- Typographie ---- */
  --f-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --f-console: 'Share Tech Mono', 'JetBrains Mono', monospace;
  --f-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px;
  --r-5: 20px; --r-6: 24px; --r-7: 32px; --r-8: 48px;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html, body{
  background: radial-gradient(ellipse at 50% 40%, var(--board-bg-2) 0%, var(--board-bg) 70%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea{ font: inherit; color: inherit; background: none; border: 0; }
button{ cursor: pointer; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ list-style: none; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ================================================================ */
/*  FOND DE CARTE                                                   */
/* ================================================================ */
.board{
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 32px;
  z-index: 1;              /* au-dessus du décor de bordure, qui reste en 0 */
}
/* Le décor du bas occupe 190 px : sans cette réserve, le pied de page
   se superposerait aux pistes et deviendrait illisible. */
.board > .footer-note{ margin-bottom: 96px; }
.board::before{
  content:"";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--ink-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-faint) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .12;
  pointer-events: none;
}

/* ================================================================ */
/*  EN-TÊTE                                                         */
/* ================================================================ */
.header{
  position: relative;
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  gap: var(--r-5);
  padding: 0 4px 18px;
  z-index: 2;
  flex-wrap: wrap;
}
.eyebrow{
  font-family: var(--f-console);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--console-orange);
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,138,61,.45);
}
.header-spacer{ flex: 1; }

.nav{ display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.nav-link{
  font-family: var(--f-console);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.nav-link:hover{
  color: var(--electric);
  border-color: var(--chip-stroke);
  background: rgba(77,255,176,.05);
}
.nav-link.active{ color: var(--gold); border-color: rgba(255,204,102,.35); }

.session{
  display: flex; align-items: center; gap: 9px;
  padding-left: var(--r-4);
  margin-left: 4px;
  border-left: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-dim);
}
.session .who{ color: var(--ink); }
.led{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 7px var(--electric);
  flex-shrink: 0;
}
.tag-admin{
  font-family: var(--f-console);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--console-orange);
  border: 1px solid rgba(255,138,61,.4);
  border-radius: var(--r-1);
  padding: 1px 6px;
}

/* ================================================================ */
/*  PLAN DU CIRCUIT                                                 */
/* ================================================================ */
.circuit-wrap{
  position: relative;
  width: 100%;
  max-width: 1200px;
  z-index: 2;
  margin-top: -18px;
}
svg.circuit-svg{ width: 100%; height: auto; display: block; overflow: visible; }

.trace{
  fill: none; stroke: var(--trace-idle);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.trace.dead{ stroke: #16241f; stroke-dasharray: 5 6; }
.trace-glow{
  fill: none; stroke: var(--electric-dim);
  stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  opacity: .10; filter: blur(2px);
}
.pulse{
  fill: var(--electric);
  filter: drop-shadow(0 0 6px var(--electric)) drop-shadow(0 0 12px var(--electric-dim));
}

.pin{ fill: var(--ink-faint); }
.pin-dim{ fill: #274238; }
.pin-live{ fill: var(--gold); filter: drop-shadow(0 0 4px rgba(255,204,102,.6)); }
.pin-off{ fill: #1c2c26; }

/* ---- Puces applicatives ---- */
.node-link{ cursor: pointer; }
.chip-body{
  fill: var(--chip-fill);
  stroke: var(--chip-stroke);
  stroke-width: 1.5;
  transition: stroke .25s ease, filter .25s ease;
}
.chip-notch{ fill: var(--board-bg); stroke: var(--chip-stroke); stroke-width: 1; }
.chip-title{
  font-family: var(--f-display);
  font-size: 20px; font-weight: 600;
  fill: var(--ink); text-anchor: middle;
  transition: fill .25s ease;
}
.chip-sub{
  font-family: var(--f-mono);
  font-size: 11px; fill: var(--ink-dim);
  text-anchor: middle; letter-spacing: .02em;
}
.chip-arrow{
  font-size: 14px; fill: var(--ink-faint);
  transition: fill .25s ease, transform .25s ease;
  transform-box: fill-box; transform-origin: center;
}
.node-link:hover .chip-body,
.node-link:focus-visible .chip-body{
  stroke: var(--electric);
  filter: drop-shadow(0 0 14px rgba(77,255,176,.35));
}
.node-link:hover .chip-title,
.node-link:focus-visible .chip-title{ fill: var(--electric); }
.node-link:hover .chip-arrow,
.node-link:focus-visible .chip-arrow{ fill: var(--electric); transform: translate(2px,-2px); }
.node-link:focus-visible{ outline: none; }
.node-link:focus-visible .chip-body{ stroke-width: 2.5; }

/* ---- Puce non autorisée : composant non alimenté ---- */
.node-locked{ cursor: not-allowed; }
.node-locked .chip-body{ fill: #080d0b; stroke: #182a24; }
.node-locked .chip-title{ fill: #3d5148; }
.node-locked .chip-sub{ fill: #2c3d36; }
.node-locked .chip-notch{ stroke: #182a24; }
.lock-glyph{ fill: none; stroke: #4a6157; stroke-width: 1.6; stroke-linecap: round; }
.lock-label{
  font-family: var(--f-console);
  font-size: 10px; fill: #4a6157;
  text-anchor: middle; letter-spacing: .1em;
}

/* ---- Processeur central ---- */
.cpu-link{ cursor: pointer; outline: none; }
.cpu-body{
  fill: var(--chip-fill);
  stroke: var(--gold);
  stroke-width: 2.5;
  animation: cpu-breathe 3.4s ease-in-out infinite;
}
@keyframes cpu-breathe{
  0%,100%{ filter: drop-shadow(0 0 14px rgba(255,204,102,.3)); }
  50%{ filter: drop-shadow(0 0 34px rgba(255,204,102,.6)); }
}
.cpu-notch{ fill: var(--board-bg); stroke: var(--gold); stroke-width: 1; opacity: .6; }
.cpu-sub{
  font-family: var(--f-console);
  font-size: 15px; fill: var(--console-orange);
  text-anchor: middle; letter-spacing: .08em;
}
.cpu-link.overheating .cpu-body{ stroke: #ff5a1f; filter: drop-shadow(0 0 26px rgba(255,90,31,.6)); }
.cpu-logo-group{ transform-box: fill-box; transform-origin: center; transition: transform .3s ease; }
@keyframes overheat{
  0%{ transform: scale(1); filter: none; }
  35%{ transform: scale(1.9); filter: drop-shadow(0 0 10px #ff5a1f) brightness(1.5) saturate(2.2); }
  65%{ transform: scale(2.1); filter: drop-shadow(0 0 22px #ff2d00) drop-shadow(0 0 40px #ff2d00) brightness(1.9) saturate(3); }
  100%{ transform: scale(1); filter: none; }
}
.cpu-link.overheating .cpu-logo-group{ animation: overheat 1.5s ease; }

.silk-ref{ font-size: 9px; fill: var(--ink-faint); opacity: .5; letter-spacing: .03em; }

.footer-note{
  position: relative;
  max-width: 1200px; width: 100%;
  margin-top: 14px; padding: 0 4px;
  font-size: 11px; color: var(--ink-faint);
  text-align: center; z-index: 2;
}

/* ---- Applications au-delà des quatre emplacements du circuit ---- */
.extra-modules{
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px;
  margin-top: var(--r-6);
}
.extra-title{
  font-family: var(--f-console);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: var(--r-3);
}
.extra-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--r-3);
}
.extra-chip{
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px;
  background: var(--chip-fill);
  border: 1px solid var(--chip-stroke);
  border-radius: var(--r-2);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.extra-chip:hover{ border-color: var(--electric); box-shadow: 0 0 16px rgba(77,255,176,.15); }
.extra-chip.locked{ opacity: .45; border-color: #182a24; }
.extra-chip .name{ font-family: var(--f-display); font-weight: 600; font-size: 14px; }
.extra-chip .code{ font-size: 10.5px; color: var(--ink-dim); letter-spacing: .06em; }

/* ================================================================ */
/*  CONNEXION                                                       */
/* ================================================================ */
.login-board{
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--r-5);
  position: relative;
}
.login-board::before{
  content:"";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--ink-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-faint) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .12;
  pointer-events: none;
}

/* La carte de connexion reprend la silhouette d'un composant :
   encoche de détrompage, brochage sur les flancs, boîtier sombre. */
.login-chip{
  position: relative;
  width: 100%; max-width: 400px;
  background: var(--chip-fill);
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  padding: var(--r-7) var(--r-6) var(--r-6);
  z-index: 2;
  animation: chip-power 3.4s ease-in-out infinite;
}
@keyframes chip-power{
  0%,100%{ box-shadow: 0 0 24px rgba(255,204,102,.14), 0 18px 50px rgba(0,0,0,.6); }
  50%{ box-shadow: 0 0 46px rgba(255,204,102,.3), 0 18px 50px rgba(0,0,0,.6); }
}
.login-chip::before{
  content:"";
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 13px;
  background: var(--board-bg);
  border: 1px solid var(--gold);
  border-radius: 3px;
  opacity: .75;
}
.login-pins{
  position: absolute; top: 34px; bottom: 34px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-pins.left{ left: -13px; }
.login-pins.right{ right: -13px; }
.login-pins i{
  display: block; width: 13px; height: 4px;
  background: #274238; border-radius: 1px;
}
.login-pins i.live{ background: var(--gold); box-shadow: 0 0 5px rgba(255,204,102,.6); }

.login-head{ text-align: center; margin-bottom: var(--r-6); }
.login-logo{ width: 62px; height: 62px; margin: 0 auto var(--r-4); }
.login-eyebrow{
  font-family: var(--f-console);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--console-orange);
  text-shadow: 0 0 8px rgba(255,138,61,.45);
}
.login-title{ font-family: var(--f-display); font-size: 19px; font-weight: 600; margin-top: 5px; }
.login-sub{ font-size: 11.5px; color: var(--ink-dim); margin-top: 5px; }

/* ================================================================ */
/*  FORMULAIRES                                                     */
/* ================================================================ */
.field{ margin-bottom: var(--r-4); }
.label{
  display: block;
  font-family: var(--f-console);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 7px;
}
.input, .select, .textarea{
  width: 100%; height: 40px; padding: 0 13px;
  background: var(--board-bg);
  border: 1px solid var(--chip-stroke);
  border-radius: var(--r-1);
  color: var(--ink);
  font-family: var(--f-mono); font-size: 13.5px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.textarea{ height: auto; min-height: 74px; padding: 9px 13px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus{
  outline: 0;
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(77,255,176,.12), 0 0 14px rgba(77,255,176,.18);
}
.input::placeholder{ color: #33453d; }
.select{ appearance: none; padding-right: 30px; cursor: pointer; }
.select option{ background: var(--panel); color: var(--ink); }
.hint{ font-size: 11px; color: var(--ink-faint); margin-top: 6px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 18px;
  border-radius: var(--r-1);
  font-family: var(--f-console);
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary{
  background: rgba(77,255,176,.1);
  border-color: var(--electric-dim);
  color: var(--electric);
}
.btn-primary:hover{
  background: rgba(77,255,176,.18);
  border-color: var(--electric);
  box-shadow: 0 0 18px rgba(77,255,176,.25);
}
.btn-block{ width: 100%; height: 43px; }
.btn-ghost{ border-color: var(--chip-stroke); color: var(--ink-dim); }
.btn-ghost:hover{ border-color: var(--ink-dim); color: var(--ink); }
.btn-danger{ border-color: rgba(255,107,77,.4); color: var(--danger); }
.btn-danger:hover{ background: rgba(255,107,77,.12); border-color: var(--danger); }
.btn-sm{ height: 29px; padding: 0 11px; font-size: 11px; }
.btn-icon{ width: 29px; padding: 0; }

/* ================================================================ */
/*  PANNEAUX (administration, compte)                               */
/* ================================================================ */
.wrap{
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px;
  padding: var(--r-6) 4px var(--r-8);
}
.wrap-narrow{ max-width: 680px; }

.page-head{ margin-bottom: var(--r-6); }
.page-title{ font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.page-sub{ font-size: 12.5px; color: var(--ink-dim); margin-top: 4px; }

.panel{
  background: var(--panel);
  border: 1px solid var(--chip-stroke);
  border-radius: var(--r-2);
  margin-bottom: var(--r-5);
  overflow: hidden;
}
.panel-head{
  display: flex; align-items: center; gap: var(--r-3);
  padding: 13px var(--r-5);
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.panel-title{
  font-family: var(--f-console);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.panel-head .spacer{ flex: 1; }
.panel-body{ padding: var(--r-5); }

.table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th{
  text-align: left;
  font-family: var(--f-console);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
  padding: 10px var(--r-4);
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  white-space: nowrap;
}
.table td{ padding: 10px var(--r-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td{ border-bottom: 0; }
.table tbody tr:hover{ background: rgba(77,255,176,.03); }
.table th.center, .table td.center{ text-align: center; }
.table-scroll{ overflow-x: auto; }

.cell-user{ display: flex; align-items: center; gap: 10px; }
.uname{ color: var(--ink); }
.umeta{ font-size: 10.5px; color: var(--ink-faint); }

/* Bascule de droit : voyant de brochage */
.perm{
  width: 27px; height: 27px; border-radius: var(--r-1);
  display: inline-grid; place-items: center;
  border: 1px solid var(--chip-stroke);
  background: var(--board-bg);
  color: #2c3d36;
  transition: all .15s ease;
}
.perm:hover{ border-color: var(--electric-dim); }
.perm.on{
  background: rgba(77,255,176,.12);
  border-color: var(--electric-dim);
  color: var(--electric);
  box-shadow: 0 0 10px rgba(77,255,176,.2);
}
.perm.locked{ opacity: .4; cursor: not-allowed; }
.perm svg{ width: 13px; height: 13px; }

.pill{
  display: inline-flex; align-items: center; height: 21px; padding: 0 9px;
  border-radius: var(--r-1);
  font-family: var(--f-console);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid transparent;
}
.pill-admin{ color: var(--console-orange); border-color: rgba(255,138,61,.4); }
.pill-user{ color: var(--ink-dim); border-color: var(--chip-stroke); }
.pill-off{ color: var(--danger); border-color: rgba(255,107,77,.4); }
.row-actions{ display: flex; gap: 5px; justify-content: flex-end; }
.row-actions form{ display: inline-flex; }

/* ================================================================ */
/*  MESSAGES                                                        */
/* ================================================================ */
.flashes{
  position: relative; z-index: 3;
  width: 100%; max-width: 1200px;
  margin: 0 auto var(--r-4);
  display: flex; flex-direction: column; gap: var(--r-2);
}
.flash{
  padding: 11px var(--r-4);
  border-radius: var(--r-1);
  font-size: 12.5px;
  border: 1px solid transparent;
  border-left-width: 3px;
}
.flash::before{ font-family: var(--f-console); margin-right: 8px; opacity: .8; }
.flash-success{ background: var(--success-bg); border-color: var(--electric-dim); color: var(--electric); }
.flash-success::before{ content: "[OK]"; }
.flash-error{ background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.flash-error::before{ content: "[ERR]"; }
.flash-warning{ background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.flash-warning::before{ content: "[!]"; }
.flash-info{ background: var(--trace-glow); border-color: var(--electric-dim); color: var(--ink); }
.flash-info::before{ content: "[i]"; }

.notice{
  padding: 12px var(--r-4);
  background: var(--warning-bg);
  border: 1px solid rgba(255,204,102,.4);
  border-left-width: 3px;
  border-radius: var(--r-1);
  color: var(--warning);
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: var(--r-4);
}
/* La police console n'a pas de chasse variable : sans cela, `strong`
   provoque des ruptures de mot disgracieuses dans les encadrés. */
.notice strong{ font-weight: 700; white-space: nowrap; }

.collapse{ display: none; }
.collapse.open{ display: block; }

.check{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-dim); cursor: pointer; }
.check input{ accent-color: var(--electric-dim); }

/* ================================================================ */
/*  ÉTATS / ERREURS                                                 */
/* ================================================================ */
.state-page{
  position: relative; z-index: 2;
  min-height: 72vh;
  display: grid; place-items: center; text-align: center;
}
.state-code{
  font-family: var(--f-console);
  font-size: 62px; color: var(--ink-faint); line-height: 1;
  letter-spacing: .06em;
}
.state-msg{ font-size: 13.5px; color: var(--ink-dim); margin: var(--r-4) 0 var(--r-5); }
.state-icon{
  width: 74px; height: 74px; margin: 0 auto var(--r-4);
  border: 1.5px solid rgba(255,107,77,.4);
  border-radius: var(--r-2);
  display: grid; place-items: center;
  color: var(--danger);
  background: var(--chip-fill);
}
.state-icon svg{ width: 34px; height: 34px; }

@media (max-width: 700px){
  .header{ gap: var(--r-3); }
  .session{ border-left: 0; padding-left: 0; margin-left: 0; }
  .extra-grid{ grid-template-columns: 1fr; }
}

/* ================================================================ */
/*  THÈME CLAIR — « white PCB »                                     */
/* ----------------------------------------------------------------
 *  Monochrome assumé : gris pour le cuivre, encre noire pour le
 *  courant. La seule couleur est l'orange de la marque, réservé au
 *  logo et à la ligne d'en-tête. Pour un gris intégral, remplacer
 *  --console-orange par #4B5563 ci-dessous.
 * ---------------------------------------------------------------- */
[data-theme="light"]{
  --board-bg:      #FFFFFF;
  --board-bg-2:    #F6F7F9;
  --trace-idle:    #C3C9D2;
  --trace-glow:    #E8EBF0;
  --electric:      #111827;   /* courant : encre noire */
  --electric-dim:  #6B7280;
  --gold:          #374151;   /* boîtier du processeur */
  --console-orange:#EA580C;   /* unique touche de couleur */

  --ink:           #111827;
  --ink-dim:       #6B7280;
  --ink-faint:     #C8CFD8;

  --chip-fill:     #FFFFFF;
  --chip-stroke:   #D3D9E0;
  --panel:         #FFFFFF;
  --panel-2:       #F6F7F9;
  --line:          #E4E8ED;

  --danger:        #B91C1C;
  --danger-bg:     #FEF2F2;
  --success-bg:    #F3F4F6;
  --warning:       #92400E;
  --warning-bg:    #FFFBEB;
}

/* ---- La grille de fond doit rester discrète sur blanc ---- */
[data-theme="light"] .board::before,
[data-theme="light"] .login-board::before{ opacity: .35; }
[data-theme="light"] .footer-note{ color: var(--ink-dim); }
[data-theme="light"] .silk-ref{ fill: #B4BCC6; opacity: 1; }

/* ---- Les halos lumineux n'ont pas de sens sur fond clair :
        ils deviennent des ombres portées douces. ---- */
[data-theme="light"] .pulse{
  fill: var(--electric);
  filter: drop-shadow(0 0 3px rgba(17,24,39,.35));
}
[data-theme="light"] .pin-live{
  fill: #4B5563;
  filter: none;
}
[data-theme="light"] .pin-dim{ fill: #D8DDE4; }
[data-theme="light"] .pin-off{ fill: #E5E9EE; }
[data-theme="light"] .trace.dead{ stroke: #E2E6EB; }
[data-theme="light"] .trace-glow{ opacity: .35; stroke: #EDF0F4; }

[data-theme="light"] .chip-body{
  fill: #FFFFFF;
  stroke: var(--chip-stroke);
  filter: drop-shadow(0 1px 2px rgba(17,24,39,.06));
}
[data-theme="light"] .node-link:hover .chip-body,
[data-theme="light"] .node-link:focus-visible .chip-body{
  stroke: var(--electric);
  filter: drop-shadow(0 4px 12px rgba(17,24,39,.14));
}
[data-theme="light"] .node-locked .chip-body{ fill: #FAFBFC; stroke: #E2E6EB; }
[data-theme="light"] .node-locked .chip-title{ fill: #B4BCC6; }
[data-theme="light"] .node-locked .chip-sub{ fill: #C8CFD8; }
[data-theme="light"] .node-locked .chip-notch{ stroke: #E2E6EB; }
[data-theme="light"] .lock-glyph{ stroke: #A8B2BE; }
[data-theme="light"] .lock-label{ fill: #A8B2BE; }
[data-theme="light"] .chip-arrow{ fill: #B4BCC6; }

/* Le processeur respire par l'ombre plutôt que par la lueur */
[data-theme="light"] .cpu-body{
  fill: #FFFFFF;
  stroke: var(--gold);
  stroke-width: 2;
  animation: cpu-breathe-light 3.4s ease-in-out infinite;
}
@keyframes cpu-breathe-light{
  0%,100%{ filter: drop-shadow(0 2px 6px rgba(17,24,39,.10)); }
  50%{ filter: drop-shadow(0 6px 18px rgba(17,24,39,.20)); }
}
[data-theme="light"] .cpu-notch{ fill: #FFFFFF; stroke: var(--gold); opacity: .5; }
[data-theme="light"] .cpu-link.overheating .cpu-body{
  stroke: #EA580C;
  filter: drop-shadow(0 0 18px rgba(234,88,12,.35));
}
[data-theme="light"] .silk-ref{ fill: #C8CFD8; opacity: .9; }

[data-theme="light"] .led{
  background: #16A34A;
  box-shadow: 0 0 0 2px rgba(22,163,74,.15);
}
[data-theme="light"] .login-chip{
  border-color: var(--chip-stroke);
  border-width: 1px;
  animation: chip-power-light 3.4s ease-in-out infinite;
}
@keyframes chip-power-light{
  0%,100%{ box-shadow: 0 2px 10px rgba(17,24,39,.06), 0 12px 40px rgba(17,24,39,.07); }
  50%{ box-shadow: 0 4px 18px rgba(17,24,39,.10), 0 12px 40px rgba(17,24,39,.10); }
}
[data-theme="light"] .login-chip::before{ background: #FFFFFF; border-color: var(--chip-stroke); }
[data-theme="light"] .login-pins i{ background: #DDE2E8; }
[data-theme="light"] .login-pins i.live{ background: #6B7280; box-shadow: none; }

[data-theme="light"] .btn-primary{
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}
[data-theme="light"] .btn-primary:hover{
  background: #000000;
  border-color: #000000;
  box-shadow: 0 3px 12px rgba(17,24,39,.22);
}
[data-theme="light"] .btn-primary .led{ background: #4ADE80; box-shadow: none; }
[data-theme="light"] .input:focus,
[data-theme="light"] .select:focus,
[data-theme="light"] .textarea:focus{
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(17,24,39,.08);
}
[data-theme="light"] .perm.on{
  background: #111827;
  border-color: #111827;
  color: #FFFFFF;
  box-shadow: none;
}
[data-theme="light"] .perm{ color: #C8CFD8; }
[data-theme="light"] .nav-link:hover{ color: var(--ink); background: #F1F3F6; border-color: #E4E8ED; }
[data-theme="light"] .nav-link.active{ color: var(--ink); border-color: var(--ink); }
[data-theme="light"] .panel{ box-shadow: 0 1px 2px rgba(17,24,39,.05); }
[data-theme="light"] .table tbody tr:hover{ background: #F8F9FB; }
[data-theme="light"] .flash-success{ background: #F3F4F6; border-color: #111827; color: #111827; }
[data-theme="light"] .flash-info{ background: #F6F7F9; border-color: #9CA3AF; color: #374151; }
[data-theme="light"] .tag-admin{ color: #EA580C; border-color: rgba(234,88,12,.35); }
[data-theme="light"] .extra-chip:hover{ border-color: var(--ink); box-shadow: 0 2px 10px rgba(17,24,39,.08); }

/* ================================================================ */
/*  DÉCOR DE BORDURE — pistes entrant par le haut et le bas         */
/* ================================================================ */
.edge-circuit{
  position: fixed;
  left: 0; right: 0;
  height: 190px;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}
.edge-circuit.top{ top: 0; }
.edge-circuit.bottom{ bottom: 0; transform: scaleY(-1); }
.edge-circuit svg{ width: 100%; height: 100%; display: block; }
.edge-trace{
  fill: none;
  stroke: var(--trace-idle);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.edge-via{ fill: none; stroke: var(--trace-idle); stroke-width: 1.2; }
.edge-pad{ fill: var(--trace-idle); }

/* Les pistes décoratives s'estompent lentement, par groupes décalés :
   la carte semble parcourue de courant sans distraire du contenu. */
.edge-group{ animation: edge-fade 9s ease-in-out infinite; }
.edge-group:nth-child(2){ animation-delay: -3s; }
.edge-group:nth-child(3){ animation-delay: -6s; }
@keyframes edge-fade{
  0%, 100%{ opacity: .35; }
  50%{ opacity: .95; }
}
[data-theme="light"] .edge-circuit{ opacity: .85; }

/* ---- Bascule de thème ---- */
.theme-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--chip-stroke);
  border-radius: var(--r-1);
  color: var(--ink-dim);
  transition: all .2s ease;
}
.theme-toggle:hover{ color: var(--ink); border-color: var(--ink-dim); }
.theme-toggle svg{ width: 15px; height: 15px; }
.theme-toggle .icon-sun{ display: none; }
[data-theme="light"] .theme-toggle .icon-sun{ display: block; }
[data-theme="light"] .theme-toggle .icon-moon{ display: none; }

@media (max-width: 700px){
  .edge-circuit{ height: 120px; opacity: .4; }
}