/* ARPANTA · socle de l'interface V6 (validée le 02/10/2026 sur la maquette ux50/29f) : barre du haut avec le dock des agents,
   cadran qui écoute, pastille d'agent entourée de son cadran, boutons, bulle, message. Toutes les classes commencent par v6-. */
:root {
  --nuit: #0B0572; --clair: #CFEAFF; --vif: #3542E8; --gris: #5C5A7A; --doux: #F5F6FB; --blanc: #FFFFFF;
  --nuit-90: #1A1480; --nuit-80: #2B2690; --ligne: rgba(11, 5, 114, .10); --ligne-f: rgba(11, 5, 114, .18);
  --ok: #23B79A; --attente: #C79534; --ease: cubic-bezier(.2, .8, .2, 1);
  --ombre: 0 1px 2px rgba(11, 5, 114, .06), 0 8px 24px rgba(11, 5, 114, .06);
  --ombre-f: 0 24px 64px rgba(11, 5, 114, .18);
  --v6-haut: 76px;
}
body.v6 { margin: 0; font-family: Montserrat, system-ui, sans-serif; font-weight: 500; color: var(--nuit); background: var(--doux); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.45 }
body.v6 *, body.v6 *::before, body.v6 *::after { box-sizing: border-box }
body.v6 button, body.v6 input, body.v6 select, body.v6 textarea { font: inherit; color: inherit }
body.v6 button { background: none; border: 0; cursor: pointer; padding: 0 }
body.v6 a { color: inherit; text-decoration: none }
body.v6 .ia { font-weight: 400 }
@keyframes v6-tourne { to { transform: rotate(360deg) } }
@keyframes v6-monte { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes v6-onde { from { opacity: .6; transform: scale(1) } to { opacity: 0; transform: scale(1.7) } }
@keyframes v6-vague { 50% { opacity: .15 } }
@keyframes v6-souffle { 50% { transform: scale(.92) } }

/* ===== barre du haut : logo, dock des agents, avatar ===== */
.v6-haut { position: sticky; top: 0; z-index: 900; height: var(--v6-haut); background: rgba(245, 246, 251, .78); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); transition: box-shadow .3s }
.v6-haut.v6-ombre { box-shadow: 0 1px 0 var(--ligne), 0 8px 24px rgba(11, 5, 114, .05) }
.v6-top { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 32px }
.v6-logo img { height: 24px; width: auto; display: block }
.v6-droite { display: flex; align-items: center; justify-content: flex-end; gap: 12px }
.v6-dock { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre) }
.v6-grp { display: flex; align-items: center; gap: 4px }
.v6-grp + .v6-grp::before { content: ""; width: 1px; height: 22px; background: var(--ligne-f); margin: 0 6px }
.v6-ag { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px }
.v6-ag img { width: 36px; height: 36px; border-radius: 10px; display: block; transition: transform .25s var(--ease), filter .2s }
.v6-ag:hover img { transform: translateY(-3px) scale(1.18) }
.v6-ag.v6-voisin img { transform: scale(1.06) }
.v6-ag.v6-verrou img { filter: grayscale(1); opacity: .45 }
.v6-ag.v6-actif::after { content: ""; position: absolute; bottom: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--nuit) }
.v6-bulle { position: fixed; z-index: 950; pointer-events: none; padding: 7px 12px; border-radius: 10px; background: var(--nuit); color: var(--blanc); font-size: 12px; white-space: nowrap; opacity: 0; transform: translate(-50%, -4px); transition: opacity .15s, transform .2s var(--ease) }
.v6-bulle.v6-on { opacity: 1; transform: translate(-50%, 0) }
.v6-bulle small { display: block; font-size: 11px; color: var(--clair); opacity: .85 }
.v6-moi { position: relative }
.v6-moi > button { display: block; border-radius: 50% }
.v6-moi > button:hover { box-shadow: 0 0 0 3px var(--clair) }
.v6-av { width: 40px; height: 40px; border-radius: 50%; background: var(--nuit); color: var(--blanc); display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none }
.v6-menu { position: absolute; right: 0; top: 52px; width: 280px; background: var(--blanc); border-radius: 18px; box-shadow: var(--ombre-f); padding: 8px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: all .2s var(--ease) }
.v6-menu.v6-on { opacity: 1; transform: none; pointer-events: auto }
.v6-menu .v6-qui { padding: 12px 10px 10px; border-bottom: 1px solid var(--ligne); margin-bottom: 6px }
.v6-menu .v6-qui b { display: block; font-size: 15px; font-weight: 600 }
.v6-menu .v6-qui small { color: var(--gris); font-size: 12px }
.v6-menu a, .v6-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; font-size: 13px; text-align: left }
.v6-menu a:hover, .v6-menu button:hover { background: var(--doux) }
@media (max-width: 1100px) { .v6-top { padding: 0 16px } .v6-ag { width: 36px } .v6-ag img { width: 30px; height: 30px } .v6-grp + .v6-grp::before { margin: 0 3px } }

/* ===== boutons, message ===== */
.v6-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 13px; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s var(--ease), opacity .2s }
body.v6 .v6-btn { padding: 0 20px }
.v6-btn.v6-p { background: var(--nuit); color: var(--blanc) }
.v6-btn.v6-p:hover { background: var(--vif) }
.v6-btn.v6-g { border: 1px solid var(--ligne-f); background: var(--blanc) }
.v6-btn.v6-g:hover { border-color: var(--nuit) }
.v6-btn:active { transform: scale(.97) }
.v6-btn:disabled { opacity: .45; pointer-events: none }
.v6-btn svg { width: 16px; height: 16px }
.v6-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; padding: 12px 18px; border-radius: 14px; background: var(--nuit); color: var(--blanc); font-size: 13px; transition: all .3s var(--ease); z-index: 990; pointer-events: none }
.v6-toast.v6-on { opacity: 1; transform: translate(-50%, 0) }

/* ===== pastille d'agent entourée de son cadran (taille donnée par le parent) ===== */
.v6-orbi { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: var(--t0, transparent) }
.v6-orbi .v6-anneau { position: absolute; inset: 3px; animation: v6-tourne 40s linear infinite }
.v6-orbi .v6-anneau svg { width: 100%; height: 100%; display: block }
.v6-orbi.v6-vif .v6-anneau { animation-duration: 10s }
.v6-orbi .v6-pastille { width: 60%; height: 60%; border-radius: 50%; background: var(--blanc); box-shadow: var(--ombre); display: grid; place-items: center }
.v6-orbi .v6-pastille img { width: 62%; height: 62%; border-radius: 28%; display: block }
*:hover > .v6-orbi .v6-anneau { animation-duration: 6s }

/* ===== cadran qui écoute (grand ou petit) ===== */
.v6-orbe { position: relative; aspect-ratio: 1; cursor: pointer; border-radius: 50%; outline: 0 }
.v6-orbe .v6-c1 { position: absolute; inset: 0; animation: v6-tourne 90s linear infinite }
.v6-orbe .v6-c2 { position: absolute; inset: 0; animation: v6-tourne 7s linear infinite; animation-play-state: paused }
.v6-orbe .v6-c2 svg { width: 100%; height: 100%; display: block }
.v6-orbe .v6-coeur { position: absolute; inset: 25%; border-radius: 50%; background: var(--blanc); box-shadow: var(--ombre-f); display: grid; place-items: center; transition: transform .4s var(--ease) }
.v6-orbe .v6-coeur::before, .v6-orbe .v6-coeur::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--teinte, var(--vif)); opacity: 0 }
.v6-orbe .v6-coeur img { width: 44%; height: 44%; border-radius: 24%; transition: opacity .25s }
.v6-orbe:hover .v6-coeur { transform: scale(1.04) }
.v6-ecoute .v6-orbe .v6-c2 { animation-play-state: running }
.v6-ecoute .v6-orbe .v6-c2 path { animation: v6-vague 1.1s ease-in-out infinite }
.v6-ecoute .v6-orbe .v6-coeur { transform: scale(1.06) }
.v6-ecoute .v6-orbe .v6-coeur::before { animation: v6-onde 1.6s var(--ease) infinite }
.v6-ecoute .v6-orbe .v6-coeur::after { animation: v6-onde 1.6s var(--ease) .8s infinite }
.v6-ecoute .v6-orbe .v6-coeur img { animation: v6-souffle 1.6s ease-in-out infinite }
.v6-travail .v6-orbe .v6-c2 { animation-play-state: running; animation-duration: 2.4s }
body.v6 .v6-ecrit { display: block; width: 100%; border: 0; outline: 0; background: none; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--nuit); caret-color: var(--vif) }
body.v6 .v6-ecrit::placeholder { color: var(--nuit); opacity: .28 }
.v6-etat-l { font-size: 13px; color: var(--gris) }