@layer components{
  /* ── Toasts ── */
  .toasts{position:fixed;right:18px;bottom:18px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--sp-10);max-width:360px}
  .toast{position:relative;background:var(--card);border:1px solid var(--line);border-left-width:4px;border-radius:var(--radius);
    padding:var(--sp-12) var(--sp-32) var(--sp-12) var(--sp-14);box-shadow:var(--shadow);font-size:var(--fs-md);animation:slidein .2s ease}
  .toast.err{border-left-color:var(--err)} .toast.ok{border-left-color:var(--ok)} .toast.info{border-left-color:var(--accent)}
  .toast .toast-x{position:absolute;top:7px;right:7px;width:18px;height:18px;display:grid;place-items:center;
    border:none;background:none;padding:0;margin:0;color:inherit;opacity:.45;cursor:pointer;
    font-size:var(--fs-base);line-height:var(--lh-flat);border-radius:var(--radius-sm)}
  .toast .toast-x:hover{opacity:.9;background:color-mix(in srgb,currentColor 12%,transparent)}
  @keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

  /* ── Toast festif « nouvelle version » (PWA) - moderne, minimaliste ── */
  .toast-update{display:flex;align-items:center;gap:var(--sp-12);cursor:pointer;
    border:0;border-radius:var(--radius);padding:var(--sp-12) var(--sp-12);background:var(--card);box-shadow:none;
    transition:transform .16s ease,opacity .3s ease}
  .toast-update:hover{transform:translateY(-2px)}
  .toast-update .tu-spark{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius);
    background:color-mix(in srgb,var(--accent) 12%,var(--card));
    animation:tu-pop .5s cubic-bezier(.34,1.56,.64,1) both}
  .toast-update .tu-spark svg{display:block}
  .toast-update .tu-spark .tu-burst{transform-origin:12px 11px;animation:tu-spin 6s linear 1s infinite}
  .toast-update .tu-body{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;flex:1 1 auto}
  .toast-update .tu-title{font-size:var(--fs-md);font-weight:var(--fw-strong);line-height:1.25;letter-spacing:-.01em}
  .toast-update .tu-sub{font-size:var(--fs-xs);opacity:.6}
  .toast-update.tu-go{animation:tu-celebrate .45s ease both}
  @keyframes tu-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
  @keyframes tu-spin{to{transform:rotate(360deg)}}
  @keyframes tu-celebrate{40%{transform:scale(1.04)}100%{transform:scale(.85);opacity:0}}
  @media (prefers-reduced-motion: reduce){
    .toast-update .tu-spark,.toast-update .tu-burst{animation:none}
    .toast-update.tu-go{animation:none;opacity:0}
  }

  /* ── Bandeau d'état réseau (PWA - cf. CDC_PWA.md, Lot 4) ── */
  .net-banner{position:fixed;top:0;left:0;right:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;gap:var(--sp-8);
    padding:var(--sp-8) var(--sp-14);font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--on-solid);
    background:var(--warn);box-shadow:var(--elev-1);
    animation:slidedown .22s ease}
  .net-banner[hidden]{display:none}
  .net-banner .net-dot{width:8px;height:8px;border-radius:50%;background:#fde68a;
    animation:pulse 1.4s ease-in-out infinite}
  @keyframes slidedown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}

  /* ── Badge toggle Interactions ── */
  .vt-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;
    padding:0 var(--sp-4);border-radius:var(--radius);font-size:var(--fs-2xs);font-weight:var(--fw-bold);line-height:16px;
    background:var(--err);color:var(--on-solid);text-align:center;pointer-events:none}
  .vt-seg{position:relative}

  /* ── Centre de notifications (Interactions) ── */
  .interactions-panel{width:100%;animation:fadein .15s ease}
  .notif-page{max-width:680px;margin:0 auto;padding:32px 16px 60px}
  .notif-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-24);gap:var(--sp-12)}
  .notif-title{display:flex;align-items:center;gap:var(--sp-10);font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--txt)}
  .notif-title .ic{width:24px;height:24px;stroke:var(--accent);stroke-width:1.8;fill:none}
  .notif-count{background:var(--err);color:var(--on-solid);border-radius:var(--radius);padding:var(--sp-1) var(--sp-8);font-size:var(--fs-md);font-weight:var(--fw-bold)}
  .notif-head-acts{display:flex;align-items:center;gap:var(--sp-6)}
  .notif-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 20px;color:var(--mut);gap:var(--sp-12)}
  .notif-empty-ic{width:56px;height:56px;stroke:var(--mut);stroke-width:1.2;fill:none;opacity:.5}
  .notif-empty p{margin:0;font-size:var(--fs-base)}
  .notif-empty p.small{font-size:var(--fs-md);opacity:.7}
  .notif-list{display:flex;flex-direction:column;gap:var(--sp-1)}
  .notif-item{display:flex;align-items:flex-start;gap:var(--sp-14);padding:var(--sp-16);background:var(--card);border-radius:var(--radius);border:1px solid var(--line);margin-bottom:var(--sp-8);transition:background .15s}
  .notif-item.unread{border-left:3px solid var(--accent);padding-left:var(--sp-14)}
  .notif-item:hover{background:var(--card2)}
  .notif-type-ic{width:36px;height:36px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex:none;font-size:var(--fs-base);background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .notif-t-update .notif-type-ic, .notif-type-ic.notif-t-update{background:color-mix(in srgb,var(--info) 14%,transparent)}
  .notif-t-warning .notif-type-ic, .notif-type-ic.notif-t-warning{background:color-mix(in srgb,var(--warn) 14%,transparent)}
  .notif-t-deploy .notif-type-ic, .notif-type-ic.notif-t-deploy{background:color-mix(in srgb,var(--ok) 14%,transparent)}
  .notif-t-mission .notif-type-ic, .notif-type-ic.notif-t-mission{background:color-mix(in srgb,var(--accent) 14%,transparent)}
  .notif-body{flex:1;min-width:0}
  .notif-item-title{font-size:var(--fs-base);font-weight:var(--fw-strong);color:var(--txt);margin-bottom:var(--sp-2)}
  .notif-item-body{font-size:var(--fs-md);color:var(--mut);line-height:var(--lh-normal);margin-bottom:var(--sp-6)}
  .notif-meta{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap}
  .notif-ts{font-size:var(--fs-sm);color:var(--mut);opacity:.7}
  .notif-cta{font-size:var(--fs-sm)}
  .notif-acts{display:flex;align-items:center;gap:var(--sp-4);flex:none}
  .notif-act{background:none;border:none;cursor:pointer;padding:var(--sp-4);border-radius:var(--radius-sm);color:var(--mut);opacity:.6;transition:opacity .15s}
  .notif-act:hover{opacity:1;background:var(--line)}
  .notif-act .ic{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;display:block}

  /* ── Poste de commande : FIL (scroll) + CHAT Pilote (épinglé) - Lot 3 ── */
  .ix-cmd{max-width:680px;margin:0 auto;display:flex;flex-direction:column;height:calc(100dvh - 70px)}
  .ix-feed{flex:1 1 auto;overflow-y:auto;min-height:0}
  .ix-chat{flex:none;display:flex;flex-direction:column;gap:var(--sp-8);border-top:1px solid var(--line);padding:var(--sp-12) var(--sp-16) var(--sp-16)}
  .ix-chat-head{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--txt)}
  .ix-chat-head .ic{width:16px;height:16px;stroke:var(--accent);stroke-width:1.8;fill:none}
  .ix-chat-sub{font-weight:var(--fw-regular);font-size:var(--fs-xs);color:var(--mut);opacity:.8}
  .ix-chat-thread{max-height:40vh;min-height:72px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-4) var(--sp-2)}
  .ix-chat-empty{color:var(--mut);font-size:var(--fs-md);line-height:var(--lh-normal);padding:var(--sp-14) var(--sp-8);text-align:center}
  .ix-msg{max-width:85%;padding:var(--sp-8) var(--sp-12);border-radius:var(--radius);font-size:var(--fs-md);line-height:var(--lh-normal);white-space:pre-wrap;word-wrap:break-word}
  .ix-msg.ix-me{align-self:flex-end;background:var(--accent);color:var(--on-solid);border-bottom-right-radius:4px}
  .ix-msg.ix-ai{align-self:flex-start;background:var(--card2);color:var(--txt);border:1px solid var(--line);border-bottom-left-radius:4px}
  .ix-typing{display:flex;gap:var(--sp-4);align-items:center}
  .ix-typing span{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:ixblink 1s infinite}
  .ix-typing span:nth-child(2){animation-delay:.2s}
  .ix-typing span:nth-child(3){animation-delay:.4s}
  @keyframes ixblink{0%,60%,100%{opacity:.25}30%{opacity:.9}}
  .ix-chat-form{display:flex;gap:var(--sp-8);align-items:center}
  .ix-chat-input{flex:1;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-modal);padding:var(--sp-8) var(--sp-14);font-size:var(--fs-base);color:var(--txt);outline:none}
  .ix-chat-input:focus{border-color:var(--accent)}
  .ix-chat-send{flex:none;width:38px;height:38px;border-radius:50%;border:none;background:var(--accent);color:var(--on-solid);cursor:pointer;display:flex;align-items:center;justify-content:center}
  .ix-chat-send .ic{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
  .ix-chat-send:hover{filter:brightness(1.08)}

  /* ── Tooltip ── */
  .tooltip{position:fixed;inset:auto;margin:0;z-index:var(--z-tooltip);max-width:260px;overflow:visible;
    /* INVERSÉ : sur fond clair le tooltip est sombre, et l'inverse en sombre.
       Une infobulle n'est pas une surface de l'interface — elle se pose
       PAR-DESSUS, et le contraste inversé le dit sans avoir besoin d'un filet.
       17,4:1 en clair, 14,6:1 en sombre ; détachement sur la page ≈ 16:1. */
    background:var(--txt);color:var(--card);border:0;
    /* Allégé : plus d'ombre (le contraste inversé détache déjà), pas de
       flèche (la proximité suffit à désigner la cible), rayon court, texte
       au cran méta et calage resserré. Une infobulle doit se lire et
       disparaître, pas s'installer. */
    border-radius:var(--radius-xs);padding:var(--sp-4) var(--sp-8);
    font-size:var(--fs-xs);line-height:1.35;white-space:normal;word-wrap:break-word;
    box-shadow:none;pointer-events:none;
    opacity:0;transition:none} /* apparition/disparition instantanées : neutralise la transition globale de 01-tokens.css */
  .tooltip.show{opacity:1}
  .tooltip .tip-arrow{display:none;position:absolute;width:8px;height:8px;
    background:var(--txt);border:0;transform:rotate(45deg);
    transition:none} /* pas d'anim sur la flèche : la transition globale de 01-tokens créait un accroc à l'apparition */
  .tooltip.pos-top .tip-arrow{bottom:-5px;border-top:none;border-left:none}
  .tooltip.pos-bottom .tip-arrow{top:-5px;border-bottom:none;border-right:none}
  .tooltip.pos-left .tip-arrow{right:-5px;border-bottom:none;border-left:none}
  .tooltip.pos-right .tip-arrow{left:-5px;border-top:none;border-right:none}


}