/* REGEN SITE MANAGER · base.css
   Brand tokens, the two themes, the scaled stage, the entry screen and the small pieces shared by the three accounts.

   Themes: app.js sets <html data-theme="dark|light" data-account="accueil|mur|pilotage|responsable">.
     dark  = wall display, workstation, entry screen (brand ink, graphite tiles, steel hairlines, paper text)
     light = manager space (paper page, white tiles, silver hairlines, ink text). Its own rules live in manager.css,
             scoped under .acc-responsable.
   Rules of the brand kept here: square corners, hairline borders, no shadow, no gradient, green as a signal only
   (fills with ink text; never green text on a light surface), amber for attention and limits, red for faults. */

:root{
  --ink:#171717; --graphite:#2E2E2E; --steel:#5A5A5A; --silver:#E0DFDC; --paper:#F8F8F7; --white:#FFFFFF;
  --green:#00FF8C; --amber:#FF7A1A; --red:#D83826;
  --cell:#1F1F1F;                 /* dark surface between ink and graphite (brand dark grid cell) */
  --idle:#3D3D3D;                 /* neutral fill for "free" on dark */
  --display:"Anton","Arial Narrow",sans-serif;
  --body:"Space Grotesk",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
html[data-theme="dark"]{
  --bg:var(--ink); --surface:var(--cell); --surface2:var(--graphite); --line:var(--steel); --line2:var(--graphite);
  --text:var(--paper); --text2:var(--silver); --dim:#A3A29F; color-scheme:dark;
}
html[data-theme="light"]{
  --bg:var(--paper); --surface:var(--white); --surface2:var(--paper); --line:var(--silver); --line2:var(--silver);
  --text:var(--ink); --text2:var(--steel); --dim:var(--steel); color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:14px;line-height:1.4;
  -webkit-font-smoothing:antialiased;-webkit-print-color-adjust:exact;print-color-adjust:exact}
html[data-theme="dark"] body{overflow:hidden}
html[data-theme="dark"] #app{position:fixed;inset:0;overflow:hidden;background:var(--ink)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}
button{cursor:pointer}
svg.ico{display:inline-block;flex:none;vertical-align:middle;shape-rendering:crispEdges}
img.logo{display:block;width:auto;flex:none}
[hidden]{display:none !important}
.nw{white-space:nowrap}

.mono{font-family:var(--mono);letter-spacing:.04em}
.u{text-transform:none}                 /* a unit symbol keeps its own case inside a label set in capitals (kWh, Ah, min) */
.dim{color:var(--dim)}

/* fixed-size stage, centred and scaled to the window by core.js (wall 1920 x 1080, workstation and entry 1600 x 900) */
.stage{position:absolute;left:50%;top:50%;transform-origin:50% 50%;overflow:hidden;background:var(--ink);color:var(--paper)}

/* discreet label carried by every screen */
.illus{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);padding:3px 8px;white-space:nowrap}
/* tag of every modelled value or suggestion (amber text on dark; ink text with an amber keyline on light, for contrast) */
.tier{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--amber);
  border:1px solid var(--amber);padding:2px 7px;white-space:nowrap}
html[data-theme="light"] .tier{color:var(--ink);border-left-width:4px;font-size:11px}
.chip{display:inline-block;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--green);color:var(--ink);padding:2px 8px;white-space:nowrap;font-style:normal}
.chip.red{background:var(--red);color:var(--white)}
.chip.amber{background:var(--amber);color:var(--ink)}  /* attention that does not stop the poste: a fan fault to report */

/* role switch and language toggle, kept in a corner of every account */
.roles{display:flex;align-items:stretch;border:1px solid var(--line);flex:none}
.roles .rs{display:flex;align-items:center;gap:7px;height:30px;padding:0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--text2);background:transparent;border:0;border-right:1px solid var(--line);white-space:nowrap}
.roles .rs:last-child{border-right:0}
.roles .rs b{font-weight:700;color:var(--text)}
.roles .rs.on{background:var(--green);color:var(--ink)}
.roles .rs.on b{color:var(--ink)}
.roles .rs:hover{color:var(--text)}
.roles .rs.on:hover{color:var(--ink)}
.roles .rs.lang b{color:var(--text)}

/* ------------------------------------------------------------------ entry screen (1600 x 900 stage) */
.entry .e-frame{position:absolute;inset:0;padding:44px 72px 40px;display:flex;flex-direction:column;
  background-color:var(--ink);
  background-image:linear-gradient(var(--cell) 1px,transparent 1px),linear-gradient(90deg,var(--cell) 1px,transparent 1px);
  background-size:80px 80px;background-position:-1px -1px}
.e-top{display:flex;align-items:center;gap:20px;height:36px}
.e-top .illus{margin-left:auto;font-size:12px}
.e-lang{height:30px;padding:0 12px;background:var(--ink);border:1px solid var(--steel);color:var(--silver);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.e-lang b{color:var(--paper)}
.e-hero{margin-top:64px}
.e-hero .mono{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.e-hero h1{font-family:var(--display);font-weight:400;font-size:124px;line-height:.95;letter-spacing:.005em;text-transform:uppercase;margin:14px 0 22px}
.e-hero p{font-size:22px;line-height:1.4;max-width:980px;margin:0;color:var(--silver)}
.e-pick{margin-top:52px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.e-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:14px}
.e-card{display:flex;flex-direction:column;min-height:272px;padding:22px 24px 18px;background:var(--graphite);border:1px solid var(--steel);
  border-top:6px solid var(--steel);color:var(--paper);text-decoration:none}
.e-card:hover,.e-card:focus-visible{border-color:var(--green);outline:0}
.e-ch{display:flex;align-items:center;justify-content:space-between;color:var(--silver)}
.e-ch .key{display:grid;place-items:center;width:34px;height:34px;background:var(--green);color:var(--ink);font-family:var(--mono);font-weight:700;font-size:17px}
.e-card h2{font-family:var(--display);font-weight:400;font-size:42px;line-height:1;text-transform:uppercase;letter-spacing:.01em;margin:22px 0 12px}
.e-card p{font-size:16.5px;line-height:1.45;margin:0 0 16px;color:var(--silver)}
.e-cf{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--steel);padding-top:12px}
.e-cf .mono{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--silver)}
.e-cf .open{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.e-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;border-top:1px solid var(--steel);padding-top:14px}
.e-foot p{margin:0;font-size:15px;color:var(--paper);max-width:600px}
.e-foot .mono{font-size:11.5px;letter-spacing:.04em;color:var(--dim);text-align:right}

@keyframes rsm-blink{0%,49%{opacity:1}50%,100%{opacity:.25}}

/* the dark screens (wall, workstation, entry) are not meant for paper: a one-line note prints instead */
.print-note{display:none}
@media print{
  html[data-theme="dark"] #app{display:none !important}
  html[data-theme="dark"] body{background:var(--white) !important;overflow:visible}
  html[data-theme="dark"] .print-note{display:block;margin:20mm 15mm;font-family:var(--body);font-size:12pt;color:var(--ink)}
}
.chip.check{background:var(--amber);color:var(--ink)}