:root{
    --navy:#1a1a4e; --navy-2:#272a63; --ink:#1f2147; --ink-2:#5a6072; --ink-3:#97a0b0;
    --bg:#fbfbfc; --surface:#ffffff; --surface-2:#f6f7f9;
    --line:#ecedf2; --line-2:#e0e2ea;
    --accent:#ee7a2e; --accent-hover:#d96a1f; --accent-soft:#fcefe1;
    --blue:#2f7fc4; --blue-soft:#eaf2fa; --orange:#dd8412; --orange-soft:#fcf0dd;
    --violet:#7c4dd6; --violet-soft:#f0eafb; --green:#2f9e5d; --green-soft:#e7f5ec;
    --gray:#98a0ae; --gray-soft:#eef0f3; --rose:#d6568a; --rose-soft:#fcebf2;
    --r:13px; --r-sm:10px;
    --sh:0 1px 2px rgba(26,26,78,.04),0 4px 14px rgba(26,26,78,.05);
    --sh-lift:0 12px 32px rgba(26,26,78,.12);
    --f:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{font-family:var(--f);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;position:relative}
  body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(560px 420px at 86% 2%,rgba(238,122,46,.08),transparent 60%),
      radial-gradient(520px 440px at 6% 14%,rgba(47,127,196,.07),transparent 60%),
      radial-gradient(540px 460px at 52% 116%,rgba(124,77,214,.05),transparent 55%);}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
  h1,h2,h3{letter-spacing:-.4px;color:var(--ink)}
  .screen{display:none;position:relative;z-index:1}.screen.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  .logo-img{height:30px;width:auto;display:block}

  .input{width:100%;height:44px;padding:0 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
  .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  textarea.input{height:auto;padding:11px 13px;resize:vertical;min-height:86px;line-height:1.55}
  select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%235a6072' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
  .field{margin-bottom:15px}.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}.req{color:var(--accent)}
  .btn{height:44px;padding:0 18px;border-radius:var(--r-sm);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,transform .08s}
  .btn:active{transform:translateY(1px)}
  .btn-acc{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(238,122,46,.28)}.btn-acc:hover{background:var(--accent-hover)}
  .btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-2)}
  .btn-soft{background:#fff;color:var(--ink-2);border:1px solid var(--line-2)}.btn-soft:hover{border-color:var(--ink-3);color:var(--ink)}
  .btn-block{width:100%}.btn-sm{height:40px;padding:0 15px;font-size:13.5px}
  .pill{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
  .pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
  .st-open{background:var(--blue-soft);color:var(--blue)}.st-wait{background:var(--accent-soft);color:var(--accent)}
  .st-study{background:var(--violet-soft);color:var(--violet)}.st-done{background:var(--green-soft);color:var(--green)}.st-auto{background:var(--gray-soft);color:var(--gray)}

  /* Halo translucide autour des formulaires flottants */
  .float{padding:15px;border-radius:24px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7);
    backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%);box-shadow:0 24px 70px rgba(26,26,78,.14)}

  /* ===== LOGIN ===== */
  #login{display:none;place-items:center;min-height:100vh;padding:30px}
  #login.active{display:grid}
  .lo-card{width:400px;max-width:90vw;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);overflow:hidden;animation:fade .4s ease}
  .lo-top{height:5px;background:linear-gradient(90deg,#13b3a6,#2f7fc4 28%,#7c4dd6 52%,#d6568a 74%,#ee7a2e)}
  .lo-in{padding:34px 36px 30px}.lo-in .logo-img{margin-bottom:24px;height:34px}
  .lo-in h1{font-size:23px;font-weight:800;margin-bottom:4px}.lo-in .sub{color:var(--ink-2);font-size:14px;margin-bottom:26px}
  .lo-row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 22px;font-size:13px}.lo-row a{color:var(--accent);text-decoration:none;font-weight:600}
  .cbx{display:flex;align-items:center;gap:7px;color:var(--ink-2);cursor:pointer}.cbx input{accent-color:var(--accent);width:15px;height:15px}
  .lo-alt{margin-top:20px;text-align:center;color:var(--ink-2);font-size:13px}.lo-alt a{color:var(--accent);font-weight:700;text-decoration:none}

  /* ===== EN-TÊTE (fidèle au site : bandeau navy + barre blanche) ===== */
  .appbar{position:sticky;top:0;z-index:20}
  .util{background:var(--navy);color:#c9cbe6}
  .util-in{max-width:1280px;margin:0 auto;height:38px;display:flex;align-items:center;padding:0 26px;font-size:12.5px;font-weight:500}
  .util-in .l{letter-spacing:.3px}.util-in .sp{flex:1}
  .util-in .u{color:#fff;font-weight:600;cursor:pointer}.util-in .u:hover{color:#ffd9bd}
  .util-in .div{width:1px;height:15px;background:rgba(255,255,255,.22);margin:0 13px}
  .util-in .out{color:#c9cbe6;cursor:pointer}.util-in .out:hover{color:#fff}
  .hdr{background:var(--surface);border-bottom:1px solid var(--line)}
  .hdr-in{max-width:1280px;margin:0 auto;height:64px;display:flex;align-items:center;gap:24px;padding:0 26px}
  .nav{display:flex;gap:2px}
  .nav a{padding:8px 14px;border-radius:9px;color:var(--ink-2);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;transition:background .14s,color .14s}
  .nav a:hover{background:var(--surface-2);color:var(--ink)}
  .nav a.active{color:var(--accent);background:var(--accent-soft)}
  .hdr-in .sp{flex:1}
  .tsearch{position:relative;width:220px}
  .tsearch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3)}
  .tsearch input{width:100%;height:40px;padding:0 12px 0 36px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);outline:none;transition:border-color .15s,background .15s}
  .tsearch input:focus{border-color:var(--accent);background:#fff}

  .wrap{max-width:1280px;margin:0 auto;padding:26px}
  .view{display:none}.view.active{display:block;animation:fade .25s ease}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}

  /* APERÇU */
  .hi{margin:2px 0 22px}.hi h1{font-size:27px;font-weight:800}.hi p{color:var(--ink-2);font-size:14.5px;margin-top:5px}
  .stats{display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:14px;margin-bottom:20px}
  .stat{padding:18px;cursor:pointer;transition:transform .14s,box-shadow .14s}.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
  .stat .h{display:flex;align-items:center;gap:9px;margin-bottom:14px}.stat .h .d{width:9px;height:9px;border-radius:50%}.stat .h span{font-size:12.5px;font-weight:600;color:var(--ink-2)}
  .stat .n{font-size:30px;font-weight:800;line-height:1}
  .cta{padding:18px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;background:var(--navy);color:#fff;border:none;transition:transform .14s,box-shadow .14s}
  .cta:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
  .cta .pl{width:38px;height:38px;border-radius:11px;background:var(--accent);display:grid;place-items:center;margin-bottom:12px}
  .cta h3{font-size:16px;font-weight:700;color:#fff;max-width:160px;line-height:1.25}
  .cta .go{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;margin-top:12px;color:#ffd9bd}
  .two{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
  .panel{padding:20px}.panel .ph{display:flex;align-items:center;margin-bottom:15px}.panel h3{font-size:16px;font-weight:700}.panel .ph button{margin-left:auto}
  .res{display:flex;gap:13px;padding:15px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:box-shadow .14s,transform .14s}.res+.res{margin-top:11px}.res:hover{box-shadow:var(--sh);transform:translateY(-2px)}
  .res .av{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none}
  .res .rt{font-weight:700;font-size:14px;margin-bottom:3px}.res .rp{color:var(--ink-2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.res .rm{font-size:11.5px;color:var(--ink-3);margin-top:7px}
  .mini .row{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:9px;cursor:pointer;transition:background .14s}.mini .row:hover{background:var(--surface-2)}
  .mini .row .d{width:9px;height:9px;border-radius:50%;flex:none}.mini .row .t{flex:1;min-width:0;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini .row .w{font-size:11.5px;color:var(--ink-3);flex:none}

  /* INBOX */
  .vh{display:flex;align-items:center;margin:2px 0 18px}.vh h1{font-size:23px;font-weight:800}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  .chip{padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line-2);font-weight:600;font-size:13px;color:var(--ink-2);cursor:pointer;transition:all .14s;display:inline-flex;gap:7px;align-items:center}
  .chip:hover{border-color:var(--ink-3);color:var(--ink)}.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}.chip .c{font-size:11px;font-weight:700;opacity:.7}
  .inbox{display:grid;grid-template-columns:380px 1fr;gap:18px;align-items:start}
  .ilist{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 250px);overflow:auto}
  .tk{padding:14px 15px;cursor:pointer;position:relative;border:1px solid var(--line);transition:box-shadow .14s,transform .14s,border-color .14s}
  .tk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--blue));border-radius:var(--r) 0 0 var(--r)}
  .tk:hover{box-shadow:var(--sh-lift);transform:translateY(-1px)}.tk.active{border-color:var(--accent);box-shadow:var(--sh-lift)}
  .tk .th{display:flex;gap:9px}.tk .tt{font-weight:700;font-size:13.5px;line-height:1.3;flex:1}.tk .tw{font-size:11px;color:var(--ink-3);flex:none}
  .tk .tp{color:var(--ink-2);font-size:12.5px;margin:7px 0 9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tk .tf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tk .soft{font-size:11.5px;color:var(--ink-3);font-weight:600}
  .conv{display:flex;flex-direction:column;max-height:calc(100vh - 250px);position:sticky;top:120px;overflow:hidden}
  .ch{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;gap:13px;align-items:flex-start}
  .ch .cb{flex:1;min-width:0}.ch .ref{font-size:11.5px;color:var(--ink-3);font-weight:600}.ch h2{font-size:18px;font-weight:700;margin:4px 0 9px;line-height:1.25}
  .thread{padding:19px 20px;overflow:auto;display:flex;flex-direction:column;gap:15px}
  .m{display:flex;gap:11px;max-width:86%}
  .m .av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none}
  .m .mh{display:flex;align-items:center;gap:8px;margin-bottom:5px}.m .mh b{font-size:13px}
  .m .mh .tag{font-size:10px;font-weight:700;color:#fff;background:var(--navy);padding:1px 8px;border-radius:999px}.m .mh .t{font-size:11px;color:var(--ink-3)}
  .m .bubble{background:var(--surface-2);border:1px solid var(--line);border-radius:4px 13px 13px 13px;padding:11px 14px;font-size:13.5px;line-height:1.6}
  .m.scoqi{align-self:flex-end;flex-direction:row-reverse}.m.scoqi .bubble{background:var(--accent-soft);border-color:transparent;border-radius:13px 4px 13px 13px}.m.scoqi .mh{flex-direction:row-reverse}
  .m .pj{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:12px;color:var(--accent);font-weight:600;cursor:pointer}
  .composer{padding:13px 18px;border-top:1px solid var(--line);background:var(--surface-2);display:flex;gap:9px;align-items:flex-end}
  .composer .cin{flex:1;background:#fff;border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;min-height:44px;outline:none;font-size:14px}
  .composer .cin:empty::before{content:attr(data-ph);color:var(--ink-3)}.composer .cin:focus{border-color:var(--accent)}
  .composer .b{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:none}
  .composer .attach{background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}.composer .send{background:var(--accent);color:#fff}

  /* FORMS */
  .fw{max-width:820px;margin:0 auto}
  .fh{display:flex;align-items:center;gap:13px;margin:2px 0 16px}.fh h1{font-size:22px;font-weight:800}
  .back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:600;font-size:13.5px}.back:hover{color:var(--accent)}
  .fsec{padding:21px 25px;border-bottom:1px solid var(--line)}.fsec:last-of-type{border-bottom:none}
  .fsec h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-3);margin-bottom:17px}
  .fg{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}.fg .full{grid-column:1/-1}
  .dxtag{display:inline-block;font-size:10px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:1px 7px;border-radius:6px;margin-left:8px;letter-spacing:.3px;vertical-align:1px}
  .urg{display:flex;gap:9px;flex-wrap:wrap}
  .ub{padding:9px 15px;border-radius:10px;border:1px solid var(--line-2);background:#fff;font-weight:600;font-size:13px;color:var(--ink-2);display:inline-flex;gap:8px;align-items:center;transition:all .14s}
  .ub .d{width:8px;height:8px;border-radius:50%}.ub:hover{border-color:var(--ink-3)}
  .ub.on{color:#fff;border-color:transparent}.ub.on.low{background:var(--green)}.ub.on.norm{background:var(--blue)}.ub.on.urg{background:var(--accent)}.ub.on.crit{background:var(--rose)}
  .editor{border:1px solid var(--line-2);border-radius:11px;overflow:hidden}
  .etb{display:flex;gap:2px;padding:6px 8px;background:var(--surface-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
  .etb button{width:30px;height:30px;border-radius:7px;color:var(--ink-2);font-weight:700;font-size:13px;display:grid;place-items:center}.etb button:hover{background:#e7e9ee;color:var(--ink)}
  .etb .sep{width:1px;height:18px;background:var(--line-2);margin:0 4px}
  .ebody{min-height:150px;padding:13px;outline:none;font-size:14px;line-height:1.6}.ebody:empty::before{content:attr(data-ph);color:var(--ink-3)}
  .drop{margin-top:13px;border:1.5px dashed var(--line-2);border-radius:12px;padding:22px;text-align:center;color:var(--ink-2);background:var(--surface-2);cursor:pointer;transition:all .15s}
  .drop:hover{border-color:var(--accent);background:var(--accent-soft)}.drop svg{width:26px;height:26px;color:var(--ink-3);margin-bottom:6px}.drop b{color:var(--accent)}.drop small{display:block;color:var(--ink-3);margin-top:4px;font-size:12px}
  .fact{padding:16px 25px;background:var(--surface-2);border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;border-radius:0 0 var(--r) var(--r)}
  .hint{color:var(--accent);font-weight:600;font-size:12.5px;margin-top:5px}

  @media(max-width:1000px){
    .util-in,.hdr-in{padding:0 16px}.hdr-in{gap:12px}.nav a{padding:8px 10px}.tsearch{display:none}
    .stats{grid-template-columns:repeat(2,1fr)}.two,.inbox,.fg{grid-template-columns:1fr}.conv{position:static;max-height:none}
  }

/* ===== Habillage DevExtreme aux couleurs ScoQi (navy/orange) ===== */
.dx-htmleditor{border:1px solid var(--line-2);border-radius:11px;overflow:hidden}
.dx-htmleditor .dx-htmleditor-toolbar-wrapper{background:var(--surface-2);border-bottom:1px solid var(--line)}
.dx-htmleditor-content{font-family:var(--f);font-size:14px;line-height:1.6;min-height:150px}
.reply .dx-htmleditor-content{min-height:60px}
.dx-button-mode-contained.dx-button-default{background:var(--accent)}
.dx-button-mode-contained.dx-button-default.dx-state-hover{background:var(--accent-hover)}
.dx-checkbox-checked .dx-checkbox-icon{background:var(--accent)}
.dx-fileuploader-wrapper{padding:0}
.dx-fileuploader-input-wrapper{border:1.5px dashed var(--line-2);border-radius:12px;background:var(--surface-2)}
.dx-texteditor.dx-state-focused.dx-editor-outlined{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.reply{display:flex;flex-direction:column;gap:9px;padding:13px 18px;border-top:1px solid var(--line);background:var(--surface-2)}
.reply .reply-actions{display:flex;justify-content:flex-end;gap:9px}
.msg-status{font-size:12.5px;font-weight:600;margin-top:6px}
.msg-status.err{color:var(--rose)}.msg-status.ok{color:var(--green)}
.muted{color:var(--ink-3)}

/* ===== Champ mot de passe avec œil afficher/masquer ===== */
.pass-wrap{position:relative}
.pass-wrap .input{padding-right:44px}
.eye-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;cursor:pointer;color:var(--ink-3);
  padding:8px;display:flex;align-items:center;justify-content:center;border-radius:8px}
.eye-btn:hover{color:var(--accent);background:var(--surface-2)}
.eye-btn:focus{outline:none;color:var(--accent)}