/* ---------- bureau « Actu IA », Sofia (personnage + bulle) et fenêtre de discussion ---------- */

/* écran du bureau : les titres défilent doucement */
.actu-live{gap:6px}
.ui .bar small.live{color:#34d399;font-weight:700;letter-spacing:.04em}
.nw-view{position:relative;flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent)}
.nw-track{display:flex;flex-direction:column;gap:7px;animation:nwscroll 70s linear infinite}
.nw{display:flex;flex-direction:column;gap:1px;padding:6px 9px;border-radius:7px;background:rgba(56,225,255,.06);border:1px solid rgba(56,225,255,.16)}
.nw span{font:700 9.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.nw b{font:600 12.5px/1.3 var(--font-body);color:#eaf2ff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@keyframes nwscroll{to{transform:translateY(calc(-50% - 3.5px))}}
@media (prefers-reduced-motion:reduce){.nw-track{animation:none}}

/* fiche « L'actu de l'IA » */
.panel-card.actu{width:min(780px,100%)}
.actu-meta{display:flex;align-items:flex-start;gap:9px;margin:2px 0 14px;font:500 13px/1.45 var(--font-body);color:#9db0cf}
.actu-meta .dot{flex:none;width:9px;height:9px;margin-top:5px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399}
.actu-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.actu-tabs button{border:1px solid rgba(138,155,184,.45);background:rgba(8,13,28,.6);color:#d3deef;border-radius:999px;padding:8px 15px;font:600 13px var(--font-body);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.actu-tabs button:hover{border-color:var(--cyan)}
.actu-tabs button.on{background:rgba(56,225,255,.16);border-color:var(--cyan);color:#fff}
.actu-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.actu-list li a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(138,155,184,.25);color:inherit;text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.actu-list li a:hover,.actu-list li a:focus-visible{border-color:var(--cyan);background:rgba(56,225,255,.09);transform:translateX(3px)}
.n-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:500 12px var(--font-body);color:#8fa3c4}
.n-meta b{font-weight:700;color:var(--cyan)}
.n-t{font:600 15px/1.35 var(--font-body);color:#eaf2ff}
.tg{font:700 10px var(--font-body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:1px 6px;border:1px solid}
.tg.en{color:#c4b5fd;border-color:rgba(196,181,253,.5)}
.tg.cl{color:var(--cyan);border-color:rgba(56,225,255,.5)}
.tg.av{color:#fbbf24;border-color:rgba(251,191,36,.55)}
.n-o{font:400 12px/1.4 var(--font-body);font-style:italic;color:#7f93b5}
.actu-list .empty{padding:18px;text-align:center;color:#9db0cf;font-size:14px}
.actu-note{margin:0 0 16px;font:400 12px/1.5 var(--font-body);color:#8397b8}

/* Sofia : un halo vert d'eau au sol, puis la bulle au-dessus du personnage en pointillé */
.sofia-bubble,.sofia-hit{cursor:pointer}
.sofia-bubble{display:flex;align-items:flex-end;justify-content:center}
.sb-in{position:relative;width:100%;padding:13px 18px 14px;text-align:center;border-radius:20px;background:linear-gradient(160deg,rgba(18,30,64,.96),rgba(9,16,34,.96));border:1.5px solid rgba(56,225,255,.75);box-shadow:0 0 36px rgba(56,225,255,.4);animation:sbfloat 3.4s ease-in-out infinite}
.sb-in::after{content:"";position:absolute;left:50%;bottom:-11px;width:20px;height:20px;margin-left:-10px;transform:rotate(45deg);background:rgba(9,16,34,.98);border-right:1.5px solid rgba(56,225,255,.75);border-bottom:1.5px solid rgba(56,225,255,.75)}
.sb-in b{display:block;font:700 24px var(--font-title);color:#fff;letter-spacing:-.01em}
.sb-in span{display:block;margin-top:2px;font:600 15px var(--font-body);color:var(--cyan)}
.sb-in{transition:opacity .7s,box-shadow .2s,border-color .2s}
.intro .sb-in{opacity:0}
.sofia-bubble.hot .sb-in{box-shadow:0 0 70px rgba(56,225,255,.85);border-color:#fff}
@keyframes sbfloat{50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.sb-in{animation:none}}

/* la fenêtre de discussion */
.chip-chat{border-color:rgba(56,225,255,.7);background:rgba(56,225,255,.14)}
.chat{position:fixed;right:24px;bottom:24px;z-index:14;width:min(400px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 110px));display:flex;flex-direction:column;border-radius:20px;background:linear-gradient(160deg,#10193a,#09101f);border:1px solid rgba(56,225,255,.55);box-shadow:0 0 70px rgba(37,99,235,.45),0 24px 70px rgba(0,0,0,.55);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .25s,transform .25s var(--ease);overflow:hidden}
.chat[hidden]{display:none}
.chat.on{opacity:1;transform:none}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(138,155,184,.25)}
.chat-head div{flex:1;min-width:0}
.chat-head b{display:block;font:700 17px var(--font-title)}
.chat-head small{display:block;font:500 12px var(--font-body);color:var(--cyan)}
.chat-av{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(110,255,200,.55),rgba(56,225,255,.12) 62%,transparent 64%);border:1px dashed rgba(110,255,200,.8)}
.chat-av i{position:absolute;left:50%;top:9px;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:1.5px dotted #b8ffe5}
.chat-av i::after{content:"";position:absolute;left:-7px;top:15px;width:26px;height:12px;border-radius:13px 13px 0 0;border:1.5px dotted #b8ffe5;border-bottom:0}
.chat-log{flex:1;min-height:150px;overflow-y:auto;padding:14px 16px 6px;display:flex;flex-direction:column;gap:9px;overscroll-behavior:contain}
.cm{max-width:88%;padding:10px 13px;border-radius:16px;font:500 14.5px/1.45 var(--font-body);white-space:pre-wrap;overflow-wrap:anywhere}
.cm.bot{align-self:flex-start;background:rgba(56,225,255,.1);border:1px solid rgba(56,225,255,.3);border-bottom-left-radius:5px}
.cm.me{align-self:flex-end;background:linear-gradient(120deg,rgba(124,58,237,.75),rgba(37,99,235,.8));border-bottom-right-radius:5px}
.cm.note{align-self:center;max-width:100%;text-align:center;background:none;color:#9db0cf;font-size:12.5px;padding:2px 8px}
.cm.typing{letter-spacing:.3em;color:var(--cyan);animation:chtyping 1s ease-in-out infinite}
@keyframes chtyping{50%{opacity:.35}}
.chat-sug{display:flex;flex-wrap:wrap;gap:7px;padding:4px 16px 8px}
.chat-sug:empty{display:none}
.chat-sug button{border:1px solid rgba(56,225,255,.5);background:rgba(56,225,255,.08);color:#dff6ff;border-radius:999px;padding:7px 12px;font:600 12.5px var(--font-body);cursor:pointer;text-align:left}
.chat-sug button:hover{background:rgba(56,225,255,.2)}
.chat-form{display:flex;gap:8px;padding:10px 14px 8px;border-top:1px solid rgba(138,155,184,.25)}
.chat-form input{flex:1;min-width:0;border-radius:999px;border:1px solid rgba(138,155,184,.5);background:rgba(5,8,15,.7);color:#fff;padding:11px 16px;font:500 15px var(--font-body)}
.chat-form input:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent}
.chat-form .btn{padding:10px 18px;font-size:14px;box-shadow:none}
.chat-form.busy .btn{opacity:.5;pointer-events:none}
.chat-note{margin:0;padding:2px 16px 12px;font:400 11px/1.4 var(--font-body);color:#7f93b5}
@media (max-width:560px){.chat{right:8px;left:8px;bottom:8px;width:auto;max-height:78vh}.sb-in b{font-size:20px}}

/* barre du haut : plus d'éléments qu'avant (Actu IA, Poser une question) → on la resserre sur les écrans moyens */
#btn-help .sh{display:none}
@media (min-width:901px) and (max-width:1700px){
  .hud .brand span{display:none}
  .topnav{margin:0 8px}
  .topnav button{padding:8px 9px;font-size:12px}
  .hud-right{gap:7px}
  .hud-right .chip{padding:8px 12px;font-size:12px}
  #btn-full{display:none}
  #btn-help .lg{display:none}#btn-help .sh{display:inline}
}
/* en dessous de 1200 px il n'y a plus la place pour tous les raccourcis : les points à droite de l'écran les remplacent */
@media (min-width:901px) and (max-width:1200px){.topnav{display:none}.hud .brand span{display:inline}}

.sofia-pool{background:radial-gradient(closest-side,rgba(110,255,200,.45),rgba(56,225,255,.12) 60%,transparent);pointer-events:none}