/* Netscope UI — theme + base
   Toggle <html data-theme="light|dark"> or .app-scope data-theme to switch.
   ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Geist', 'Inter Tight', -apple-system, BlinkMacSystemFont,
               'Segoe UI', system-ui, sans-serif;
}
#root { height: 100vh; }

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ---- THEME : dark ------------------------------------------------------ */
.app-scope[data-theme="dark"] {
  --bg:           #14110e;
  --bg-raised:    #1b1714;
  --bg-hover:     #241f1a;
  --bg-deep:      #0e0b09;
  --bg-inset:     #0c0a08;
  --border:       #2c2620;
  --border-hi:    #3a332b;
  --border-strong:#4c4338;
  --text:         #efe9e1;
  --text-dim:     #b5ab9d;
  --text-mute:    #7c7163;
  --text-faint:   #4a4138;
  --accent:       #e08a5f;
  --accent-soft:  rgba(224,138,95,0.15);
  --accent-line:  rgba(224,138,95,0.32);
  --pink:         #f08cb0;
  --green:        #9bcb6b;
  --green-soft:   rgba(155,203,107,0.13);
  --amber:        #e6b54d;
  --amber-soft:   rgba(230,181,77,0.14);
  --red:          #f0705c;
  --red-soft:     rgba(240,112,92,0.14);
  --cyan:         #5fd0e0;
  --shadow-card:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-pop:   0 8px 24px rgba(0,0,0,0.65), 0 0 0 1px var(--border-hi);
  --scroll:       #3a332b;
  --scrollHi:     #4c4338;
  --grid-line:    rgba(255,240,225,0.05);
  --gradient-hero:radial-gradient(900px 500px at 90% -10%, rgba(224,138,95,0.10), transparent 60%);
  color-scheme: dark;
}

/* ---- THEME : light ----------------------------------------------------- */
.app-scope[data-theme="light"] {
  --bg:           #faf7f2;
  --bg-raised:    #fffdf9;
  --bg-hover:     #f3ede4;
  --bg-deep:      #f0e9df;
  --bg-inset:     #f6f1e9;
  --border:       #ebe4d8;
  --border-hi:    #ddd4c5;
  --border-strong:#c4b9a6;
  --text:         #2a2622;
  --text-dim:     #6b6256;
  --text-mute:    #8a8073;
  --text-faint:   #b3a899;
  --accent:       #c75d3a;
  --accent-soft:  rgba(199,93,58,0.10);
  --accent-line:  rgba(199,93,58,0.30);
  --pink:         #be3f74;
  --green:        #4d7c2f;
  --green-soft:   rgba(77,124,47,0.12);
  --amber:        #a87a12;
  --amber-soft:   rgba(168,122,18,0.12);
  --red:          #a82a1f;
  --red-soft:     rgba(168,42,31,0.10);
  --cyan:         #0e7490;
  --shadow-card:  0 1px 2px rgba(60,40,25,0.07);
  --shadow-pop:   0 12px 28px rgba(60,40,25,0.14), 0 0 0 1px var(--border);
  --scroll:       #ddd4c5;
  --scrollHi:     #b3a899;
  --grid-line:    rgba(120,90,60,0.06);
  --gradient-hero:radial-gradient(900px 500px at 90% -10%, rgba(199,93,58,0.08), transparent 60%);
  color-scheme: light;
}

/* ---- Base wrapper ------------------------------------------------------ */
.app-scope {
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', 'Inter Tight', -apple-system, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  transition: background-color .2s, color .2s;
  height: 100%;
  width: 100%;
}

.app-scope input,
.app-scope textarea,
.app-scope select {
  background: transparent;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.app-scope input:focus,
.app-scope textarea:focus,
.app-scope select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.app-scope input::placeholder,
.app-scope textarea::placeholder { color: var(--text-faint); }

.app-scope code,
.app-scope .mono {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* ---- Scrollbars -------------------------------------------------------- */
.app-scope ::-webkit-scrollbar { width: 10px; height: 10px; }
.app-scope ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; }
.app-scope ::-webkit-scrollbar-track { background: transparent; }
.app-scope ::-webkit-scrollbar-thumb:hover { background: var(--scrollHi); }

/* ---- Animations -------------------------------------------------------- */
@keyframes ns-dash-flow { to { stroke-dashoffset: -200; } }

/* ---- Carte isométrique (Topologie) ------------------------------------- */
@keyframes iso-halo {
  0%, 100% { opacity: .26; transform: scale(1); }
  50%      { opacity: .60; transform: scale(1.14); }
}
@keyframes iso-halo-strong {
  0%, 100% { opacity: .44; transform: scale(1); }
  50%      { opacity: .92; transform: scale(1.24); }
}
/* transform-box: fill-box → le scale tourne autour du centre propre de la forme,
   pas de l'origine du SVG (sinon le halo "vole" en s'agrandissant). */
.iso-halo, .iso-halo-strong { transform-box: fill-box; transform-origin: center; }
.iso-halo        { animation: iso-halo 2.6s ease-in-out infinite; }
.iso-halo-strong { animation: iso-halo-strong 1.9s ease-in-out infinite; }

/* Pas de transform au survol : un device est positionné par un attribut
   transform SVG que le CSS écraserait. On joue donc sur filter uniquement. */
.iso-device        { cursor: pointer; transition: filter .12s ease; }
.iso-device:hover  { filter: brightness(1.13) drop-shadow(0 6px 13px rgba(0,0,0,.5)); }
.iso-device.sel    { filter: brightness(1.18) drop-shadow(0 6px 16px rgba(0,0,0,.6)); }

.iso-stage          { cursor: grab; }
.iso-stage.dragging { cursor: grabbing; }

@keyframes iso-fade { from { opacity: 0 } to { opacity: 1 } }
.iso-fade { animation: iso-fade .35s ease both; }


/* ---- Accessibilité (démo publique) : contrastes WCAG 2.1 AA --------------
   Correctifs ciblés sur la palette actuelle, sans modifier le code des écrans. */
.app-scope[data-theme="dark"]  { --text-mute:#b3aa9f; --text-faint:#b2aa9f; --accent:#e49974; --red:#f39181; }
.app-scope[data-theme="light"] { --text-mute:#5b5248; --text-faint:#5a5248; --accent:#863b22; --green:#395b23;
  --amber:#6b4e0b; --cyan:#0b596f; --red:#97261c; --pink:#8b2e55; }
/* Valeurs calculées pour rester ≥ 4,6:1 sur tous les fonds, y compris les
   pastilles teintées (couleur à 10–22 % sur le fond). */
/* Boutons pleins « accent » à texte blanc : fond plus foncé en thème sombre */
.app-scope[data-theme="dark"] [style*="background: var(--accent);"] { background: #b04f2f !important; }
/* Sections grisées par transparence : on garde le texte lisible, l'état
   inactif reste signalé par la désaturation et le curseur */
.app-scope [style*="opacity: 0.55"] { opacity: 1 !important; filter: saturate(.25); }
.app-scope [style*="opacity: 0.85"] { opacity: 1 !important; }
/* Couleurs codées en dur dans certains écrans */
.app-scope[data-theme="light"] [style*="color: rgb(234, 179, 8)"] { color: #8a6905 !important; }
/* Aperçu du rapport : « papier » toujours blanc, quel que soit le thème */
.app-scope [style*="color: rgb(153, 153, 153)"] { color: #6b6b6b !important; }