/* ============================================================
   gassgass.fr — terminal / cybersécu
   Palette phosphore vert sur noir.
   ============================================================ */
:root{
  --bg:#000000;
  --bg-glow:#0a120b;
  --panel:#060b07;
  --panel-2:#0a150c;
  --line:#17381f;
  --line-2:#14301d;
  --green:#37f07a;
  --green-bright:#5bff95;
  --green-dim:#4e5f46;
  --text:#c6d2c8;
  --text-bright:#edefea;
  --muted:#7c8b7e;
  --mute-2:#5c6e60;
  --red:#ff5a48;
  --red-dim:#b0564c;
  --amber:#ffb020;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pixel:"VT323",var(--mono);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(120% 120% at 50% 45%,var(--bg-glow) 0%,#000 70%);
  color:var(--text);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.5;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- CRT overlays ---------- */
.crt{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.18) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:multiply;
  animation:flicker 5s infinite steps(60);
}
.vignette{
  position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(130% 130% at 50% 50%,transparent 55%,rgba(0,0,0,.75) 100%);
}
@keyframes flicker{
  0%,100%{opacity:.9}
  48%{opacity:.86}
  50%{opacity:.98}
  52%{opacity:.88}
}
@media (prefers-reduced-motion:reduce){
  .crt{animation:none}
  *{animation-duration:.001ms !important;transition-duration:.06s !important}
}

/* ---------- Layout ---------- */
.app{position:relative;height:100dvh;width:100%}
.screen{
  position:absolute;inset:0;
  display:none;
  align-items:center;justify-content:center;
  flex-direction:column;
  padding:24px;
}
.screen.is-active{display:flex;animation:screenIn .32s ease-out}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Window chrome ---------- */
.window{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 0 44px rgba(55,240,122,.16), inset 0 0 0 1px rgba(55,240,122,.02);
  overflow:hidden;
}
.window--sm{max-width:560px}
.window--lg{max-width:840px}
.window__bar{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.dot{width:9px;height:9px;display:inline-block;border-radius:1px}
.dot--red{background:var(--red)}
.dot--amber{background:var(--amber)}
.dot--green{background:var(--green)}
.window__title{
  margin-left:6px;font-size:12px;color:var(--mute-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.winback{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid var(--line);color:var(--green);
  font-family:var(--mono);font-size:11px;letter-spacing:.5px;
  padding:5px 11px;border-radius:2px;cursor:pointer;transition:.14s;flex:none;
}
.winback:hover{background:#0e2a18;border-color:#2e7d4e;box-shadow:0 0 12px rgba(55,240,122,.22)}
.winback[hidden]{display:none}
.window__body{padding:26px 30px 30px}
.window__body--center{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:34px 40px 38px;text-align:center;
}

/* ---------- Typography helpers ---------- */
.glow{color:var(--green);text-shadow:0 0 8px rgba(55,240,122,.55)}
.muted{color:var(--mute-2)}
.ttl{font-size:15px;font-weight:600;letter-spacing:2px}
.sub{font-size:13px;color:var(--mute-2)}
.hint{font-size:11px;color:var(--green-dim)}
.status{font-size:10px;color:var(--mute-2);letter-spacing:1px}
.lock{color:var(--green);filter:drop-shadow(0 0 8px rgba(55,240,122,.5))}

/* ---------- Password prompt ---------- */
.prompt{
  display:flex;align-items:center;gap:9px;
  width:100%;
  background:#000;
  border:1px solid var(--line);
  padding:14px 16px;
}
.prompt__caret{color:var(--green);font-size:16px}
.prompt__input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--text-bright);font-family:var(--mono);
  font-size:17px;letter-spacing:3px;caret-color:transparent;
}
.prompt__cursor{
  width:9px;height:19px;background:var(--green);
  animation:blink 1s steps(1) infinite;
  box-shadow:0 0 8px rgba(55,240,122,.6);
}
@keyframes blink{50%{opacity:0}}

.window--sm.shake{animation:shake .32s}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  30%,70%{transform:translateX(4px)}
  50%{transform:translateX(-6px)}
}
.gate-error .ttl{color:var(--red);text-shadow:0 0 8px rgba(255,90,72,.5)}
.gate-error .prompt{border-color:var(--red)}

/* enter helper button (mobile) */
.skip{
  margin-top:22px;background:transparent;border:1px solid var(--line);
  color:var(--green);font-family:var(--mono);font-size:12px;letter-spacing:2px;
  padding:10px 20px;cursor:pointer;border-radius:2px;transition:.15s;
}
.skip:hover{background:var(--panel-2);box-shadow:0 0 16px rgba(55,240,122,.2)}

/* ---------- Loader ---------- */
.loader{width:100%;max-width:640px;display:flex;flex-direction:column;gap:10px}
.brand{font-size:12px;letter-spacing:1px;margin-bottom:12px}
.loader__logs{display:flex;flex-direction:column;gap:8px;min-height:96px}
.log{font-size:13px;color:var(--green);opacity:0;animation:logIn .2s forwards}
.log .ok{color:var(--green-bright)}
.log--warn{color:var(--amber)}
@keyframes logIn{to{opacity:1}}
.loader__barhead{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;font-size:11px;letter-spacing:1.5px;color:var(--text);
}
.bar{height:20px;background:#0d140e;border:1px solid var(--line);padding:3px}
.bar__fill{height:100%;width:0;background:var(--text-bright);
  box-shadow:0 0 12px rgba(237,239,234,.4);transition:width .1s linear}

/* ---------- Desktop / terminal body ---------- */
.line{font-size:13px;color:var(--text);margin-bottom:12px}
.line .p{color:var(--green)}
.line--dim{color:var(--green-dim);font-size:11px;margin-bottom:14px}
.line--ok{color:var(--green)}

.list{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border:1px solid var(--line-2);border-radius:4px;
  background:#0a140c;cursor:pointer;transition:.14s;text-decoration:none;color:inherit;
}
.item:hover,.item.is-sel{
  background:#0e2a18;border-color:#1e5233;
  box-shadow:0 0 18px rgba(55,240,122,.14);
}
.item--locked{background:#150a0a;border-color:#3a1414}
.item--locked:hover,.item--locked.is-sel{background:#241010;border-color:#5a2020;box-shadow:0 0 18px rgba(255,90,72,.14)}
.item__left{display:flex;align-items:center;gap:14px;min-width:0}
.item__ico{width:22px;height:22px;flex:none;color:var(--green)}
.item--locked .item__ico{color:var(--red)}
.item__name{font-size:16px;font-weight:500;color:var(--text-bright)}
.item--locked .item__name{color:var(--red)}
.item__desc{font-size:11px;color:var(--muted)}
.item--locked .item__desc{color:var(--red-dim)}
.item__meta{font-size:11px;color:var(--mute-2);white-space:nowrap}
.item--locked .item__meta{color:#8a4038}

/* file download row */
.file__tags{display:flex;align-items:center;gap:12px}
.tag{font-size:11px;font-weight:500;color:var(--green);
  border:1px solid #2e7d4e;background:#0e2a18;border-radius:3px;padding:5px 9px}
.btn-dl{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:500;color:var(--green);
  border:1px solid #2e7d4e;background:#12331f;border-radius:4px;padding:10px 16px;
  text-decoration:none;transition:.14s;white-space:nowrap;
}
.btn-dl:hover{background:#164227;box-shadow:0 0 16px rgba(55,240,122,.25)}
.btn-dl svg{width:15px;height:15px}

.sep{height:1px;background:var(--line);margin:16px 0}
.clink{color:var(--green);text-decoration:none;border-bottom:1px dotted var(--green-dim)}
.clink:hover{text-shadow:0 0 8px rgba(55,240,122,.5);border-bottom-color:var(--green)}
.back{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  background:none;border:0;color:var(--green);font-family:var(--mono);font-size:13px;cursor:pointer;
}
.back .cur{width:9px;height:18px;background:var(--green);display:inline-block;animation:blink 1s steps(1) infinite}
.back:hover{text-shadow:0 0 8px rgba(55,240,122,.5)}

/* other-gate (red) inside desk */
.desk-gate{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:14px 4px}
.desk-gate .lock{color:var(--red);filter:drop-shadow(0 0 8px rgba(255,90,72,.5))}
.desk-gate .ttl{color:var(--red);text-shadow:0 0 8px rgba(255,90,72,.5)}
.desk-gate .prompt{border-color:#3a1414}
.desk-gate .prompt__caret,.desk-gate .prompt__cursor{background:var(--red);color:var(--red)}
.desk-gate .prompt__cursor{box-shadow:0 0 8px rgba(255,90,72,.6)}
.warn-banner{
  font-size:11px;letter-spacing:1.5px;color:var(--red);
  border:1px solid #3a1414;background:#150a0a;padding:8px 12px;border-radius:3px;
}

/* content lists (film/music/livre/liens) */
.subgrid{display:flex;flex-direction:column;gap:8px}
.cx{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--line-2);border-radius:4px;background:#0a140c;
}
.cx__l{display:flex;align-items:center;gap:12px;min-width:0}
.cx__ico{width:18px;height:18px;color:var(--green);flex:none}
.cx__t{font-size:14px;color:var(--text-bright)}
.cx__s{font-size:11px;color:var(--muted)}
.cx__meta{font-size:11px;color:var(--mute-2)}
.link-row .cx__ico{width:20px;height:20px}
.link-row a{color:var(--green);text-decoration:none;font-size:13px}
.link-row a:hover{text-shadow:0 0 8px rgba(55,240,122,.5)}
.tabs{display:flex;gap:8px;margin:2px 0 14px;flex-wrap:wrap}
.tab{
  font-size:12px;color:var(--muted);border:1px solid var(--line-2);
  background:#0a140c;padding:7px 12px;border-radius:3px;cursor:pointer;transition:.14s;
}
.tab.is-on{color:var(--green);border-color:#2e7d4e;background:#0e2a18}
.tab:hover{color:var(--green)}

.type-cursor::after{content:"▋";color:var(--green);animation:blink 1s steps(1) infinite;margin-left:2px}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  body{font-size:15px}
  .window__body{padding:20px 16px 24px}
  .window__body--center{padding:26px 18px 28px}
  .item{padding:13px 12px}
  .item__desc,.item__meta{display:none}
  .file__tags{flex-direction:column;align-items:flex-end;gap:8px}
  .window__title{font-size:11px}
  .loader{max-width:100%}
}