:root{
    --bg:#eef7fc; --bg-deep:#e2f0fa; --bg-card:#ffffff; --bg-sunk:#e2f3e6;
    --tx:#1f2b28; --tx-soft:#4c5d58; --tx-mute:#71827d;
    --line:#cfe3d6; --line-soft:#ddeee2;
    --azure:#2b8fd8; --emerald:#0f9d63; --emerald-btn:#12a05f; --emerald-btn-h:#0c8a50;
    --gold:#e08a1c;
    --sans:-apple-system,"system-ui","Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  }
/* Coquille Webzzle — règles copiées telles quelles de Webzzle/public/index.html (ne pas éditer ici : éditer Webzzle, recopier). */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);line-height:1.55;
    -webkit-font-smoothing:antialiased;overflow:hidden}
  ::selection{background:rgba(0,136,89,.22)}
  a{color:inherit;text-decoration:none}
  .shell{height:100dvh;display:flex;flex-direction:column}
  .ghead{flex-shrink:0;background:#fff;border-bottom:1px solid #E8EDF2;padding:0 1.5rem;height:89px;
    display:flex;align-items:center;justify-content:space-between;position:relative;z-index:90}
  .ghead .brand{display:inline-flex;align-items:center;gap:0.625rem;text-decoration:none}
  .ghead .brand img{width:50px;height:50px}
  .app{flex:1;display:flex;min-height:0}
  .sidebar{width:272px;flex:none;background:var(--bg-sunk);border-right:1px solid var(--line);
    display:flex;flex-direction:column;min-height:0}
  .sb-head{padding:16px 16px 10px}
  .brand{font-family:var(--mono);font-weight:700;font-size:18.5px}
  .brand b{color:var(--azure)}
  .sb-tag{font-size:12.5px;color:var(--tx-mute);margin-top:2px;line-height:1.35}
  .newbtn{margin:10px 12px 6px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
    color:var(--tx-soft);border:1px dashed var(--line);border-radius:9px;padding:9px 12px;cursor:pointer;
    background:transparent}
  .newbtn:hover{border-color:var(--azure);color:var(--azure)}
  .sbsearch{margin:2px 12px 2px;padding:7px 10px;font:inherit;font-size:14.5px;border:1px solid var(--line);
    border-radius:8px;background:var(--bg-card);color:var(--tx)}
  .sbsearch:focus{outline:2px solid var(--azure);outline-offset:1px;border-color:var(--azure)}
  .sb-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--tx-mute);
    padding:12px 16px 4px;text-transform:uppercase}
  .plist{flex:1;overflow:auto;padding:2px 10px 12px;display:flex;flex-direction:column;gap:3px}
  .pitem{padding:9px 12px;border-radius:8px;font-size:15px;color:var(--tx-soft);cursor:pointer;
    border:1px solid transparent;display:flex;align-items:center;gap:6px}
  .pitem .pitem-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pitem .pdel,.pitem .pren{flex:none;visibility:hidden;border:0;background:none;padding:2px;cursor:pointer;
    color:var(--tx-mute);border-radius:5px;display:inline-flex;align-items:center;line-height:0}
  .pitem:hover .pdel,.pitem.active .pdel,.pitem:hover .pren,.pitem.active .pren{visibility:visible}
  .pitem .pdel:hover{color:#c0452c;background:rgba(192,69,44,.1)}
  .pitem .pren:hover{color:var(--azure);background:rgba(63,151,221,.12)}
  .pitem .prename{flex:1;min-width:0;font:inherit;font-size:15px;padding:1px 4px;border:1px solid var(--azure);
    border-radius:5px;background:var(--bg-card);color:var(--tx);outline:none}
  .pitem:hover{background:var(--bg-card)}
  .pitem.active{background:var(--bg-card);border-color:var(--line);color:var(--tx)}
  .hmenu{position:relative;flex:none}
  .hmenu-btn{display:inline-flex;align-items:center;gap:9px;border:1px solid transparent;
    background:none;padding:5px 6px 5px 12px;border-radius:999px;cursor:pointer;font:inherit;
    font-size:15.5px;color:var(--tx-soft)}
  .hmenu-btn:hover{background:#f1f6fb;border-color:#E8EDF2}
  .hmenu-btn[aria-expanded="true"]{background:#f1f6fb;border-color:#E8EDF2}
  .hmenu-hi{font-weight:600;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
  .hmenu-av{flex:none;width:32px;height:32px;border-radius:999px;background:#2B5BC8;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
    letter-spacing:.02em}
  .hmenu-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:252px;background:#fff;
    border:1px solid #E8EDF2;border-radius:12px;box-shadow:0 12px 34px -12px rgba(25,60,85,.28);
    padding:6px 0;z-index:60}
  .hmenu-pop[hidden]{display:none}
  .hmenu-head{padding:10px 16px 8px}
  .hmenu-name{font-weight:700;font-size:16px;color:var(--tx)}
  .hmenu-mail{font-size:14px;color:var(--tx-mute);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;margin-top:1px}
  .hmenu-unver{font-size:13px;color:var(--gold);margin-top:6px}
  .hmenu-unver button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--gold);
    text-decoration:underline;cursor:pointer}
  .hmenu-sep{height:1px;background:#EEF2F7;margin:6px 0}
  .hmenu-pop a,.hmenu-pop .hmenu-item{display:flex;align-items:center;gap:11px;padding:9px 16px;
    font-size:15.5px;color:var(--tx);text-decoration:none;border:0;background:none;width:100%;
    font:inherit;cursor:pointer;text-align:left}
  .hmenu-pop a:hover,.hmenu-pop .hmenu-item:hover{background:#f4f8fc;color:#2B5BC8}
  .hmenu-pop svg{flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;opacity:.75}
  .hmenu-out{color:#c0452c}
  .hmenu-out:hover{background:#fdf1ef;color:#a33d20}
  @media (max-width:640px){ .hmenu-hi{display:none} }
  .pempty{font-size:14px;color:var(--tx-mute);padding:8px 14px;line-height:1.5}
  .convo{flex:1;display:flex;flex-direction:column;min-height:0}
  .cscroll{flex:0 1 auto;min-height:0;overflow:auto;padding:8px clamp(14px,3vw,40px) 0}
  .cinner{max-width:780px;margin:0 auto}
  .gquote{max-width:660px;margin:10px auto 2px;text-align:center;
    font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:16px;line-height:1.6;
    color:var(--tx-soft)}
  .gquote .who{display:block;font-family:var(--mono);font-style:normal;font-size:12px;
    letter-spacing:.04em;color:var(--tx-mute);margin-top:5px}
  .msgs{padding:4px 0 6px}
  .msgs:empty{display:none}
  .msg{display:flex;margin:14px 0}
  .msg.user{justify-content:flex-end}
  .bubble{max-width:82%;padding:11px 15px;border-radius:14px;font-size:16px;line-height:1.55}
  .msg.user .bubble{background:#d3ebfb;border:1px solid #aed7f2;border-bottom-right-radius:5px}
  .msg.wz .bubble{background:var(--bg-card);border:1px solid var(--line);border-bottom-left-radius:5px}
  .wzname{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;font-weight:700;
    color:var(--emerald);margin:0 0 6px}
  .wzname i{width:8px;height:8px;border-radius:50%;background:var(--emerald);display:inline-block}
  .bubble a{color:var(--azure);text-decoration:underline}
  .spin{display:inline-block;width:11px;height:11px;border:2px solid var(--line);border-top-color:var(--azure);
    border-radius:50%;animation:sp .8s linear infinite;vertical-align:-1px;margin-right:6px}
  @keyframes sp{to{transform:rotate(360deg)}}
  .composer{flex:none;padding:10px clamp(14px,3vw,40px) 8px;background:var(--bg)}
  .cfill{flex:1}
  .cbox{max-width:780px;margin:0 auto;display:flex;gap:10px;align-items:flex-end;background:var(--bg-card);
    border:1px solid var(--line);border-radius:16px;padding:10px 12px}
  .cbox:focus-within{border-color:var(--azure)}
  .cbox textarea{flex:1;border:none;outline:none;background:transparent;resize:none;font-family:var(--sans);
    font-size:16.5px;color:var(--tx);line-height:1.5;max-height:132px;padding:6px 2px}
  .clip{flex:none;cursor:pointer;color:var(--tx-mute);font-size:20px;padding:6px 4px;border-radius:8px}
  .clip:hover{color:#ef8a1e}
  .cbox input[type=file]{display:none}
  .send{flex:none;width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#f7b733,#ef8a1e);
    color:#fff;font-size:18.5px;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .send:hover{background:linear-gradient(135deg,#f5a71c,#e07a10)}
  .send:disabled{background:var(--line);cursor:default}
  .cnote{max-width:780px;margin:6px auto 0;display:flex;justify-content:space-between;gap:10px;
    font-size:12.5px;color:var(--tx-mute)}
  .sbtoggle{display:none;flex:none;border:0;background:none;padding:6px;margin-right:2px;cursor:pointer;
    color:var(--tx-soft);border-radius:8px;line-height:0}
  .sbtoggle:hover{background:#f1f6fb}
  .sbtoggle svg{display:block;width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round}
  .sbscrim{display:none;position:fixed;inset:0;background:rgba(20,40,55,.38);z-index:70}
  .wznote{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(10px);z-index:95;
    max-width:min(92vw,560px);background:#243b4a;color:#fff;padding:.62rem .95rem;border-radius:10px;
    font-size:0.946rem;line-height:1.35;box-shadow:0 10px 30px -10px rgba(20,40,55,.5);
    opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
  .wznote.on{opacity:1;transform:translateX(-50%)}
  .sbscrim.on{display:block}
  @media(max-width:760px){
    .sbtoggle{display:inline-flex}
    .ghead{padding:0 1rem}
    .sidebar{position:fixed;top:0;bottom:0;left:0;width:min(86vw,310px);z-index:80;
      padding-top:89px;transform:translateX(-100%);transition:transform .22s ease;
      box-shadow:0 0 40px -8px rgba(20,40,55,.35)}
    .sidebar.open{transform:none}
  }
  .gfoot{flex-shrink:0;background:#fff;border-top:1px solid #E2E6F2;height:60px;display:flex;
    align-items:center;justify-content:space-between;padding:0 1.5rem}
  .gfoot-links{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
  .gfoot-links a{font-size:0.894rem;color:#686868;text-decoration:none}
  .gfoot-links a:hover{color:#2B5BC8}
  .gfoot-gi img{height:28px;width:auto;object-fit:contain;display:block}
  .msg.user .msgacts{justify-content:flex-end}