/* La Fenêtre Allumée · feuille de style
   Concept : le bureau est un immeuble la nuit. Chaque application est une vitre éclairée. */
:root{
  --nuit:#0B0820; --nuit2:#151038; --facade:#1B1542; --facade2:#221A52; --joint:#2C2362;
  --violet:#8F6BFF; --cyan:#3FE0F5; --or:#F2C14E; --lampe:#FFD98A; --encre:#ECE8FF; --brume:#9C94C8;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --titre:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --texte:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--nuit);color:var(--encre);font:400 16px/1.55 var(--texte);overflow:hidden;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cache{display:none!important}

#ciel{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* ------------------------------------------------------------------ HUD */
.hud{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:40;display:flex;gap:1rem;align-items:center;
  padding:.6rem 1rem;font:500 .9rem var(--titre);color:var(--brume)}
.hud-retour{color:var(--brume);text-decoration:none}
.hud-retour:hover{color:var(--encre)}
.hud-os{margin-left:auto;color:var(--encre);letter-spacing:.3em}
.hud-heure{font-family:var(--mono);color:var(--cyan)}
.hud-btn{background:none;border:1px solid var(--joint);border-radius:999px;padding:.2rem .8rem;cursor:pointer;color:var(--brume)}
.hud-btn[aria-pressed="true"]{color:var(--or);border-color:var(--or)}

/* ------------------------------------------------------------------ Immeuble */
#scene{position:fixed;inset:0;z-index:5;pointer-events:none}
.immeuble{position:absolute;bottom:0;right:max(6vw,1rem);width:min(400px,86vw);height:min(86vh,760px);
  display:flex;flex-direction:column;pointer-events:auto}
.toit{height:26px;margin:0 14px;background:var(--nuit2);border-top:3px solid var(--joint);position:relative}
/* La lanterne ne répond qu'à l'envers : tape « enretnal » dans le terminal. */
.antenne{position:absolute;left:22%;bottom:100%;width:2px;height:48px;background:var(--joint)}
.antenne::after{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:#FF5A7A;
  box-shadow:0 0 12px #FF5A7A;animation:balise 2.4s infinite}
@keyframes balise{0%,60%{opacity:1}70%,100%{opacity:.15}}
.antenne.or::after{background:var(--or);box-shadow:0 0 18px var(--or),0 0 60px rgba(242,193,78,.6);animation:none;width:10px;height:10px;left:-4px;top:-6px}

.etages{flex:1;display:flex;flex-direction:column-reverse;
  background:
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(0,0,0,.18) 22px 23px),
    repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,0,0,.12) 46px 47px),
    linear-gradient(90deg,var(--facade) 0%,var(--facade2) 55%,var(--facade) 100%);
  border-left:6px solid var(--nuit2);border-right:6px solid var(--nuit2)}

.etage{flex:1;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:9%;padding:12px 9% 10px;
  border-top:4px solid rgba(0,0,0,.35)}
.plaque{position:absolute;left:-6px;top:50%;transform:translate(-100%,-50%);font:500 .78rem var(--titre);color:var(--brume);
  white-space:nowrap;padding-right:.8rem;opacity:.0;transition:opacity .3s}
.etage:hover .plaque,.etage.serrure .plaque,.etage.allume .plaque{opacity:.85}
.plaque b{color:var(--encre);font-weight:600}

/* Une fenêtre de la façade */
.fen{position:relative;border:3px solid #0E0A26;background:#0D0A24;min-height:0;padding:0;cursor:default;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.fen::before{/* croisillon */content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent calc(50% - 1.5px),#0E0A26 calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px)),
             linear-gradient(0deg,transparent calc(42% - 1.5px),#0E0A26 calc(42% - 1.5px) calc(42% + 1.5px),transparent calc(42% + 1.5px))}
.fen span{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;
  font:600 .75rem var(--mono);color:var(--encre);background:rgba(11,8,32,.92);border:1px solid var(--joint);
  padding:.15rem .45rem;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:3}
button.fen{cursor:pointer}
button.fen:hover span,button.fen:focus-visible span{opacity:1}

.fen.lum{background:radial-gradient(ellipse at 50% 30%,#FFF1C9 0%,var(--lampe) 35%,#E8A838 100%);
  box-shadow:0 0 18px rgba(242,193,78,.55),0 0 60px rgba(242,193,78,.18)}
.fen.lum::after{/* la lumière qui coule sur la façade */content:"";position:absolute;left:-30%;right:-30%;top:100%;height:140%;
  background:radial-gradient(ellipse at 50% 0%,rgba(242,193,78,.22),transparent 70%);pointer-events:none}
.fen.lum.cyan{background:radial-gradient(ellipse at 50% 30%,#E6FDFF 0%,#8FEFFA 40%,#1FA9C2 100%);
  box-shadow:0 0 18px rgba(63,224,245,.55),0 0 60px rgba(63,224,245,.18)}
.fen.lum.cyan::after{background:radial-gradient(ellipse at 50% 0%,rgba(63,224,245,.22),transparent 70%)}
.fen.rideau{background:linear-gradient(90deg,#C98A2E 0 18%,var(--lampe) 18% 82%,#C98A2E 82%);
  box-shadow:0 0 14px rgba(242,193,78,.35)}
.fen.silhouette{background:
  radial-gradient(circle at 60% 48%,#3A2A1A 0 9%,transparent 10%),
  radial-gradient(ellipse at 60% 80%,#3A2A1A 0 22%,transparent 23%),
  radial-gradient(ellipse at 50% 30%,#FFF1C9 0%,var(--lampe) 40%,#E8A838 100%);
  box-shadow:0 0 16px rgba(242,193,78,.45)}
.fen.cle{background:#130E33;border-color:var(--violet);box-shadow:0 0 0 1px var(--violet),0 0 22px rgba(143,107,255,.5);
  animation:respire 2.6s ease-in-out infinite}
@keyframes respire{50%{box-shadow:0 0 0 1px var(--violet),0 0 36px rgba(143,107,255,.85)}}
.etage.allumage .fen.lum,.etage.allumage .fen.rideau,.etage.allumage .fen.silhouette{animation:allumage 1.2s steps(1) both}
@keyframes allumage{0%{filter:brightness(.1)}12%{filter:brightness(1)}18%{filter:brightness(.2)}30%{filter:brightness(1)}36%{filter:brightness(.4)}46%,100%{filter:brightness(1)}}

/* Rez-de-chaussée */
.rdc{height:74px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:10px 14px 0;background:var(--nuit2);
  border-top:6px solid #0E0A26}
.porte{position:relative;border:2px solid #0E0A26;border-bottom:none;background:linear-gradient(180deg,#2A2160,#1A1446);cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;border-radius:12px 12px 0 0;
  font:600 .72rem var(--mono);color:var(--brume);transition:color .15s,box-shadow .15s}
.porte:hover,.porte:focus-visible{color:var(--encre);box-shadow:inset 0 -30px 30px -20px rgba(143,107,255,.5)}
.porte-cyan:hover,.porte-cyan:focus-visible{box-shadow:inset 0 -30px 30px -20px rgba(63,224,245,.5)}
.porte-or:hover,.porte-or:focus-visible{box-shadow:inset 0 -30px 30px -20px rgba(242,193,78,.5)}
.badge{position:absolute;top:-8px;right:-4px;min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:999px;background:var(--or);color:#2A1C08;
  font:700 .72rem/1.3rem var(--mono);text-align:center;box-shadow:0 0 12px rgba(242,193,78,.7)}

/* Immeuble voisin : la jauge des soutiens */
.voisin{position:absolute;bottom:10px;right:calc(max(6vw,1rem) + min(400px,86vw) + 150px);width:120px;display:flex;flex-wrap:wrap-reverse;
  gap:14px;padding:16px 18px 20px;background:linear-gradient(90deg,#150F38,#1A1344);border-top:4px solid var(--joint);pointer-events:auto}
.voisin .fen{aspect-ratio:3/4;width:calc(50% - 7px)}
.voisin::before{content:"Soutiens";position:absolute;bottom:100%;left:0;right:0;text-align:center;font:600 .7rem var(--titre);color:var(--brume);padding-bottom:.4rem;opacity:.7}

/* L'œil du gardien */
.oeil{width:28px;height:16px;border-radius:50%/60%;border:2px solid var(--cyan);display:grid;place-items:center;transition:border-color .4s}
.oeil i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);transition:background .4s,box-shadow .4s}
.oeil[data-niveau="1"]{border-color:var(--violet)}.oeil[data-niveau="1"] i{background:var(--violet);box-shadow:0 0 8px var(--violet)}
.oeil[data-niveau="2"]{border-color:var(--or)}.oeil[data-niveau="2"] i{background:var(--or);box-shadow:0 0 8px var(--or)}
.oeil[data-niveau="3"]{border-color:#FF5A7A}.oeil[data-niveau="3"] i{background:#FF5A7A;box-shadow:0 0 10px #FF5A7A;animation:balise 1s infinite}

/* Messagerie et secrets */
.messages{list-style:none;margin:0;padding:.4rem 0}
.messages li{padding:.8rem 1.1rem;border-bottom:1px solid var(--joint)}
.messages .de{font:600 .8rem var(--mono);color:var(--violet);display:block;margin-bottom:.2rem}
.messages .de time{color:var(--brume);font-weight:400;margin-left:.5rem}
.messages li.neuf{background:rgba(143,107,255,.08)}
.secrets{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.6rem;margin:.6rem 0 0}
.secrets div{border:2px solid #0E0A26;background:#0D0A24;padding:.6rem .7rem;font-size:.85rem;color:var(--brume)}
.secrets div b{display:block;font:600 .9rem var(--titre);color:var(--brume)}
.secrets div.on{background:rgba(242,193,78,.1);border-color:rgba(242,193,78,.5)}
.secrets div.on b{color:var(--lampe)}
.trottoir{height:10px;background:#07051A;margin:0 -30px}

/* ------------------------------------------------------------------ Vitres (fenêtres d'application) */
#bureau{position:fixed;inset:0;z-index:20;pointer-events:none}
.vitre{position:absolute;pointer-events:auto;display:flex;flex-direction:column;min-width:260px;
  max-width:calc(100vw - 16px);max-height:calc(100vh - 70px);
  border:7px solid #0E0A26;border-radius:4px;background:#0E0A26;
  box-shadow:0 0 0 1px rgba(242,193,78,.35),0 0 40px rgba(242,193,78,.18),0 30px 80px -20px rgba(0,0,0,.8)}
.vitre.cyan{box-shadow:0 0 0 1px rgba(63,224,245,.4),0 0 40px rgba(63,224,245,.18),0 30px 80px -20px rgba(0,0,0,.8)}
.vitre.violet{box-shadow:0 0 0 1px rgba(143,107,255,.5),0 0 40px rgba(143,107,255,.25),0 30px 80px -20px rgba(0,0,0,.8)}
.vitre::after{/* le rebord */content:"";position:absolute;left:-14px;right:-14px;bottom:-15px;height:8px;background:#2C2362;
  border-radius:2px;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.linteau{display:flex;align-items:center;gap:.6rem;padding:.35rem .4rem .45rem .7rem;cursor:grab;user-select:none;touch-action:none;
  font:600 .85rem var(--titre);color:var(--brume);background:#0E0A26}
.linteau:active{cursor:grabbing}
.linteau .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linteau .t::before{content:"";display:inline-block;width:.55rem;height:.55rem;margin-right:.55rem;background:var(--or);
  box-shadow:0 0 8px var(--or);vertical-align:.05rem}
.vitre.cyan .linteau .t::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.vitre.violet .linteau .t::before{background:var(--violet);box-shadow:0 0 8px var(--violet)}
.fermer{background:none;border:none;cursor:pointer;width:1.8rem;height:1.8rem;color:var(--brume);font-size:1.1rem;border-radius:3px}
.fermer:hover{color:var(--encre);background:rgba(255,255,255,.06)}
.verre{flex:1;overflow:auto;position:relative;
  background:linear-gradient(160deg,rgba(255,241,201,.07),transparent 40%),linear-gradient(180deg,#1A1440,#120E30)}
.verre::before{/* reflet */content:"";position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.035) 31%,rgba(255,255,255,.035) 38%,transparent 39%)}
.vitre.cyan .verre{background:linear-gradient(160deg,rgba(63,224,245,.07),transparent 40%),#07051A}

/* Terminal */
.term{font:400 .88rem/1.55 var(--mono);color:#CFFAFE;padding:.8rem 1rem 1rem;min-height:100%}
.term .ligne{white-space:pre-wrap;word-break:break-word}
.term .err{color:#FF8FA8}.term .ok{color:var(--cyan)}.term .or{color:var(--or)}.term .dim{color:#7C74A8}
.term .invite{display:flex;gap:.5rem}
.term .invite b{color:var(--violet);font-weight:600;white-space:nowrap}
.term input{flex:1;background:none;border:none;outline:none;color:#fff;font:inherit;padding:0;caret-color:var(--cyan);min-width:0}

/* Lecteur, fichiers, divers */
.lecteur{font:400 .92rem/1.6 var(--mono);white-space:pre-wrap;padding:1rem 1.2rem;color:var(--encre)}
.arbre{list-style:none;margin:0;padding:.6rem .4rem;font:400 .9rem var(--mono)}
.arbre li button{display:block;width:100%;text-align:left;background:none;border:none;padding:.3rem .6rem;cursor:pointer;color:var(--encre);border-radius:3px}
.arbre li button:hover,.arbre li button:focus-visible{background:rgba(242,193,78,.1);color:var(--lampe)}
.arbre .dossier{color:var(--brume);padding:.45rem .6rem .15rem;font-weight:600}
.bloc{padding:1rem 1.2rem}
.bloc p{margin:.2rem 0 .8rem}
.btn{background:rgba(242,193,78,.12);border:1px solid var(--or);color:var(--lampe);padding:.45rem 1rem;border-radius:3px;cursor:pointer;font-weight:700}
.btn:hover{background:rgba(242,193,78,.22)}
.champ{width:100%;background:#07051A;border:1px solid var(--joint);color:#fff;padding:.6rem .7rem;font:400 1rem var(--mono);border-radius:3px;margin:.2rem 0 .7rem}
.champ:focus{border-color:var(--violet);outline:none}
.msg-err{color:#FF8FA8;min-height:1.4em}
.msg-ok{color:var(--cyan);min-height:1.4em}
.fragments{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0 1rem}
.fragments span{width:3rem;height:3.6rem;display:grid;place-items:center;font:700 1.5rem var(--titre);border:2px solid #0E0A26;
  background:#0D0A24;color:transparent}
.fragments span.on{background:radial-gradient(ellipse at 50% 30%,#FFF1C9,var(--lampe) 45%,#E8A838);color:#3A2A1A;box-shadow:0 0 18px rgba(242,193,78,.5)}
.radio-lampe{width:90px;height:90px;border-radius:50%;margin:.5rem auto 1rem;background:#1A1446;border:3px solid #0E0A26;transition:background .04s,box-shadow .04s}
.radio-lampe.on{background:var(--cyan);box-shadow:0 0 40px var(--cyan)}
.radio-trace{font:600 1.3rem var(--mono);letter-spacing:.15em;text-align:center;min-height:2rem;color:var(--cyan);word-break:break-all}
.visionneuse canvas{display:block;width:100%;height:auto;background:#050318}
.final{padding:1.6rem 1.6rem 2rem;font:400 1rem/1.75 var(--texte);white-space:pre-wrap}

/* ------------------------------------------------------------------ Toast */
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 3.2rem);transform:translate(-50%,-20px);z-index:60;
  background:rgba(11,8,32,.94);border:1px solid var(--or);color:var(--lampe);padding:.7rem 1.2rem;border-radius:3px;
  font:600 .95rem var(--titre);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;max-width:90vw;text-align:center}
#toast.vu{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------------ Démarrage & verrou */
.plein{position:fixed;inset:0;z-index:50}
#demarrage{background:#050318;display:flex;align-items:flex-start;justify-content:flex-start;padding:max(2rem,env(safe-area-inset-top,0px)) 1.4rem 1.4rem}
#demarrage pre{font:400 .95rem/1.7 var(--mono);color:#CFFAFE;margin:0;white-space:pre-wrap}
#demarrage .ok{color:var(--cyan)}#demarrage .or{color:var(--or)}#demarrage .dim{color:#7C74A8}
#verrou{display:flex;align-items:center;justify-content:center;background:rgba(5,3,24,.55);backdrop-filter:blur(3px);padding:1rem}
.verrou-vitre{width:min(380px,100%);border:7px solid #0E0A26;background:linear-gradient(180deg,#1A1440,#120E30);padding:2rem 1.6rem 1.4rem;text-align:center;
  box-shadow:0 0 0 1px rgba(143,107,255,.5),0 0 60px rgba(143,107,255,.25)}
.verrou-user{font:700 1.6rem var(--titre);margin:0}
.verrou-sous{color:var(--brume);margin:.1rem 0 1.4rem}
#verrou-form input{width:100%;background:#07051A;border:1px solid var(--joint);color:#fff;padding:.7rem;font:400 1rem var(--mono);text-align:center;border-radius:3px}
#verrou-form input:focus{outline:none;border-color:var(--violet)}
#verrou-form button{margin-top:.7rem;width:100%;background:var(--violet);color:#fff;border:none;padding:.7rem;font-weight:700;border-radius:3px;cursor:pointer}
.verrou-msg{color:#FF8FA8;min-height:1.4em;margin:.6rem 0 .2rem}
.lien{background:none;border:none;color:var(--brume);text-decoration:underline;cursor:pointer;font-size:.9rem}
.verrou-indices{color:var(--lampe);font-size:.92rem;text-align:left;white-space:pre-line;margin:.8rem 0 0}
.postit{position:absolute;left:max(4vw,1rem);bottom:max(8vh,1rem);width:min(260px,78vw);padding:1rem 1rem 1.2rem;background:#F7E27A;color:#3A2A1A;
  font:400 .85rem/1.5 var(--mono);white-space:pre;transform:rotate(-4deg);box-shadow:0 12px 30px rgba(0,0,0,.5);overflow:hidden}
.postit::before{content:"";position:absolute;top:-8px;left:50%;width:70px;height:20px;transform:translateX(-50%) rotate(2deg);background:rgba(255,255,255,.4)}

/* ------------------------------------------------------------------ Mobile */
@media (max-width:1060px){.voisin{display:none}}
@media (max-width:760px){
  .immeuble{right:50%;transform:translateX(50%);height:min(78vh,640px)}
  .plaque{display:none}
  .vitre{left:6px!important;right:6px;top:calc(env(safe-area-inset-top,0px) + 2.8rem)!important;width:auto!important;height:auto!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 16px);min-width:0}
  .linteau{cursor:default}
  .postit{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 3rem);left:1rem}
  .hud-retour{display:none}
  .voisin{display:none}
  .porte{font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ------------------------------------------------------------------ V4 : décor 3D, immeuble en volume, pluie sur les vitres */
body.decor3d #ciel{z-index:1;pointer-events:none}
body.decor3d #scene{perspective:1600px;perspective-origin:30% 40%}
body.decor3d .immeuble{transform-style:preserve-3d;transform:rotateY(14deg);transform-origin:100% 100%}
body.decor3d .immeuble::before{content:"";position:absolute;top:26px;bottom:10px;left:0;width:90px;transform-origin:left center;transform:rotateY(90deg);
  background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(0,0,0,.25) 22px 23px),linear-gradient(90deg,#120d33,#0b0826);pointer-events:none}
body.decor3d .fen.lum::after{height:220%;background:radial-gradient(ellipse at 50% 0%,rgba(242,193,78,.28),transparent 72%)}
body.decor3d .fen.lum.cyan::after{background:radial-gradient(ellipse at 50% 0%,rgba(63,224,245,.28),transparent 72%)}
body.eclat .immeuble{animation:eclat 1.4s ease-out}
@keyframes eclat{0%{filter:brightness(2.2) saturate(1.2)}100%{filter:none}}
/* pluie sur les vitres des fenêtres d'application (soirs de pluie) */
body.pluie .verre::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(2px 3px at 12% 18%,rgba(200,220,255,.55),transparent 70%),
    radial-gradient(1.5px 2.5px at 37% 62%,rgba(200,220,255,.5),transparent 70%),
    radial-gradient(2.5px 3.5px at 68% 27%,rgba(200,220,255,.55),transparent 70%),
    radial-gradient(1.5px 2px at 83% 74%,rgba(200,220,255,.45),transparent 70%),
    radial-gradient(2px 3px at 54% 88%,rgba(200,220,255,.5),transparent 70%),
    linear-gradient(180deg,transparent 0 40%,rgba(160,190,255,.14) 40.4%,transparent 41%);
  background-size:180px 160px,140px 190px,210px 170px,160px 150px,190px 210px,70px 260px;
  animation:ruisselle 7s linear infinite}
@keyframes ruisselle{to{background-position:0 160px,0 190px,0 170px,0 150px,0 210px,0 520px}}
@media (max-width:760px){body.decor3d .immeuble{transform:translateX(50%) rotateY(10deg);transform-origin:50% 100%}}
@media (prefers-reduced-motion:reduce){body.pluie .verre::after{animation:none}}