/* ═══ JARVIS PWA — design system ═══ */
:root{
  --fond:#070b14; --fond2:#0c1322; --carte:#101a2e; --carte2:#152238;
  --bord:#1d2c47; --cyan:#39d0ff; --cyan-fonce:#0e7fb0; --or:#ffc93c;
  --texte:#e8f0ff; --gris:#8fa3c4; --rouge:#ff5d6c; --vert:#2fd67b;
  --ombre:0 10px 40px rgba(0,0,0,.45);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 700px at 80% -10%,#0e1c38 0%,var(--fond) 55%);
  color:var(--texte);overflow:hidden}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit;color:var(--texte)}

/* ── réacteur arc ── */
.reactor{width:46px;height:46px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle,#bdf3ff 0%,var(--cyan) 28%,#0b3550 62%,transparent 70%);
  box-shadow:0 0 18px rgba(57,208,255,.75),0 0 60px rgba(57,208,255,.25),inset 0 0 10px #012;
  animation:pulse 2.6s ease-in-out infinite}
.reactor.small{width:22px;height:22px;box-shadow:0 0 10px rgba(57,208,255,.7)}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* ── boutons / champs ── */
.btn{border:1px solid var(--bord);background:var(--carte2);color:var(--texte);
  border-radius:12px;padding:11px 18px;font-size:15px;font-weight:600;transition:.15s}
.btn:hover{border-color:var(--cyan-fonce);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#1288c9,#39d0ff);border:none;color:#04121e}
.btn.ghost{background:transparent}
.btn.petit{padding:8px 13px;font-size:13px;border-radius:10px}
.btn.rond{border-radius:50%;width:46px;height:46px;padding:0;font-size:18px;flex:none}
.champ{width:100%;background:var(--fond2);border:1px solid var(--bord);border-radius:11px;
  padding:12px 13px;font-size:15px;margin:6px 0;outline:none;resize:vertical}
.champ:focus{border-color:var(--cyan-fonce);box-shadow:0 0 0 3px rgba(57,208,255,.12)}
.champ-label{font-size:12px;color:var(--gris);margin-top:8px;text-transform:uppercase;letter-spacing:.4px}
.aide{color:var(--gris);font-size:13.5px;line-height:1.55;margin:6px 0 10px}
.aide code{background:var(--fond2);padding:2px 6px;border-radius:6px}
.ligne-2{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.ligne-btn{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
.toggle{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:15px;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--cyan)}
.toggle-mini{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gris);cursor:pointer}
.toggle-mini input{accent-color:var(--cyan)}

/* ── layout app ── */
#app{display:flex;height:100dvh}
#nav{width:210px;flex:none;background:rgba(9,14,26,.92);border-right:1px solid var(--bord);
  display:flex;flex-direction:column;gap:4px;padding:18px 12px}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;
  letter-spacing:2px;padding:4px 10px 18px}
.nav-btn{display:flex;align-items:center;gap:12px;background:none;border:none;color:var(--gris);
  padding:12px 14px;border-radius:12px;font-size:15px;font-weight:600;text-align:left;position:relative;transition:.15s}
.nav-btn .ic{font-size:17px;width:22px;text-align:center}
.nav-btn:hover{color:var(--texte);background:var(--carte)}
.nav-btn.actif{color:var(--cyan);background:linear-gradient(90deg,rgba(57,208,255,.14),transparent)}
.badge{position:absolute;right:10px;top:9px;background:var(--rouge);color:#fff;border-radius:99px;
  font-size:11px;font-weight:800;padding:2px 7px}
.nav-fin{margin-top:auto;padding:10px}
.statut{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gris)}
.pastille{width:9px;height:9px;border-radius:50%;background:var(--gris);flex:none}
.statut.ok .pastille{background:var(--vert);box-shadow:0 0 8px var(--vert)}
.statut.cloud .pastille{background:var(--or);box-shadow:0 0 8px var(--or)}
.statut.ko .pastille{background:var(--rouge)}

#main{flex:1;overflow-y:auto;padding:26px 30px calc(24px + var(--safe-b));position:relative}
.ecran{display:none;max-width:920px;margin:0 auto;animation:app .3s ease}
.ecran.actif{display:block}
#ecran-chat.actif{display:flex;flex-direction:column;height:calc(100dvh - 50px - var(--safe-b))}
@keyframes app{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

.entete{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.entete h1{font-size:26px;letter-spacing:.3px}
.entete.compacte h1{font-size:21px}
.entete-actions{display:flex;align-items:center;gap:12px}
.sous-titre{color:var(--gris);font-size:14px;margin-top:4px}

.carte{background:linear-gradient(160deg,var(--carte),var(--carte2));border:1px solid var(--bord);
  border-radius:18px;padding:18px;box-shadow:var(--ombre);margin-bottom:14px}
.carte-titre{font-size:13px;font-weight:800;color:var(--cyan);letter-spacing:1.2px;
  text-transform:uppercase;margin-bottom:12px}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.brief{border-color:rgba(57,208,255,.35)}
#acc-brief-texte{line-height:1.6;font-size:15px}
.liste-mini{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:10px;align-items:baseline;font-size:14.5px;line-height:1.45}
.item .h{color:var(--cyan);font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.item .m{color:var(--gris);font-size:12.5px}
.item.echu .h{color:var(--rouge)}
.vide{color:var(--gris);font-size:13.5px;font-style:italic}

/* ── chat ── */
.chat-fil{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:6px 2px 16px}
.chat-accueil{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--gris)}
.suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:520px}
.sug{background:var(--carte);border:1px solid var(--bord);color:var(--texte);border-radius:99px;
  padding:8px 14px;font-size:13.5px;transition:.15s}
.sug:hover{border-color:var(--cyan-fonce)}
.msg{max-width:78%;padding:13px 16px;border-radius:16px;font-size:15px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word}
.msg.moi{align-self:flex-end;background:linear-gradient(135deg,#155a8a,#1288c9);border-bottom-right-radius:5px}
.msg.ia{align-self:flex-start;background:var(--carte);border:1px solid var(--bord);border-bottom-left-radius:5px}
.msg.ia .origine{display:block;font-size:11px;color:var(--gris);margin-top:8px}
.msg .phase{color:var(--cyan);font-size:12.5px;font-style:italic}
.msg pre{background:#08101f;border:1px solid var(--bord);border-radius:10px;padding:10px;
  overflow-x:auto;font-size:13px;margin:8px 0}
.chat-saisie{display:flex;gap:10px;align-items:flex-end;padding-top:12px}
.chat-saisie textarea{flex:1;max-height:130px;background:var(--carte);border:1px solid var(--bord);
  border-radius:16px;padding:13px 15px;font-size:15px;outline:none;resize:none}
.chat-saisie textarea:focus{border-color:var(--cyan-fonce)}

/* ── agenda ── */
.liste-jours .jour-titre{font-size:13px;font-weight:800;color:var(--cyan);letter-spacing:1px;
  text-transform:uppercase;margin:18px 0 8px}
.rdv{display:flex;gap:12px;align-items:baseline;background:var(--carte);border:1px solid var(--bord);
  border-radius:13px;padding:12px 14px;margin-bottom:8px;font-size:15px}
.rdv .h{color:var(--cyan);font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.rdv .lieu{color:var(--gris);font-size:13px}
.rdv .src{margin-left:auto;font-size:11px;color:var(--gris);border:1px solid var(--bord);
  border-radius:99px;padding:2px 8px;flex:none}

/* ── mails ── */
.mail{background:var(--carte);border:1px solid var(--bord);border-radius:14px;
  padding:14px;margin-bottom:10px}
.mail .de{font-weight:700;font-size:14.5px}
.mail .sujet{font-size:15px;margin:3px 0}
.mail .snippet{color:var(--gris);font-size:13.5px;line-height:1.5;margin:4px 0 10px}
.mail .date{color:var(--gris);font-size:12px;float:right}
.panneau{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.panneau-fond{position:absolute;inset:0;background:rgba(3,6,12,.7);backdrop-filter:blur(3px)}
.panneau-corps{position:relative;background:var(--fond2);border:1px solid var(--bord);
  border-radius:22px 22px 0 0;padding:20px 20px calc(20px + var(--safe-b));width:min(680px,100%);
  max-height:88dvh;overflow-y:auto;animation:monte .25s ease}
@keyframes monte{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* ── notes ── */
.note{background:var(--carte);border:1px solid var(--bord);border-radius:13px;
  padding:13px 15px;margin-bottom:8px;font-size:15px}
.note .m{color:var(--gris);font-size:12.5px;margin-top:3px}

/* ── onboarding ── */
#onboarding{position:fixed;inset:0;z-index:100;background:radial-gradient(900px 600px at 50% -10%,#0e1c38,var(--fond) 60%);
  display:flex;align-items:center;justify-content:center;overflow-y:auto}
.ob-halo{position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(57,208,255,.14),transparent 65%);pointer-events:none}
.ob-wrap{width:min(640px,92%);padding:34px 0 44px;position:relative}
.ob-head{margin-bottom:26px}
.ob-logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:3px;font-size:19px;margin-bottom:18px}
.ob-progress{height:5px;background:var(--carte);border-radius:99px;overflow:hidden}
#ob-bar{height:100%;width:0;background:linear-gradient(90deg,var(--cyan-fonce),var(--cyan));
  border-radius:99px;transition:width .35s ease}
.ob-etape-label{color:var(--gris);font-size:12.5px;margin-top:8px;letter-spacing:.5px;text-transform:uppercase}
.ob-contenu{min-height:320px;animation:app .3s ease}
.ob-contenu h2{font-size:24px;margin-bottom:6px;line-height:1.3}
.ob-contenu .ob-sous{color:var(--gris);font-size:14.5px;line-height:1.55;margin-bottom:20px}
.ob-q{margin-bottom:18px}
.ob-q .lbl{font-size:14px;font-weight:700;margin-bottom:8px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--carte);border:1px solid var(--bord);color:var(--texte);border-radius:99px;
  padding:9px 15px;font-size:14px;transition:.15s}
.chip.on{background:linear-gradient(135deg,#12557e,#1288c9);border-color:var(--cyan);color:#fff}
.slider-ligne{display:flex;align-items:center;gap:14px}
.slider-ligne input[type=range]{flex:1;accent-color:var(--cyan)}
.slider-val{font-weight:800;color:var(--cyan);width:34px;text-align:center;font-size:17px}
.ob-nav{display:flex;justify-content:space-between;margin-top:26px}
.contact-ligne{display:grid;grid-template-columns:1fr 1fr 40px;gap:8px;margin-bottom:8px}
.contact-ligne .btn{padding:0;height:44px}

/* ── toast ── */
.toast{position:fixed;bottom:calc(24px + var(--safe-b));left:50%;transform:translateX(-50%);
  background:var(--carte2);border:1px solid var(--cyan-fonce);color:var(--texte);
  padding:13px 20px;border-radius:14px;font-size:14.5px;z-index:200;box-shadow:var(--ombre);
  animation:monte .25s ease;max-width:90%}
.toast.erreur{border-color:var(--rouge)}

/* ── mobile ── */
@media (max-width:760px){
  #app{flex-direction:column-reverse}
  #nav{width:100%;flex-direction:row;justify-content:space-around;padding:8px 4px calc(8px + var(--safe-b));
    border-right:none;border-top:1px solid var(--bord)}
  .nav-logo,.nav-fin,.nav-btn span:not(.ic):not(.badge){display:none}
  .nav-btn{flex-direction:column;gap:2px;padding:8px 12px}
  .nav-btn .ic{font-size:21px}
  .badge{right:4px;top:2px}
  #main{padding:18px 14px 12px}
  .grille{grid-template-columns:1fr}
  .msg{max-width:88%}
  #ecran-chat.actif{height:calc(100dvh - 150px)}
  .entete h1{font-size:22px}
}