/* ============================================================
   assistant.css — bot « Une question ? » + nouveau bouton
   accessibilité (2026-10-12). Chargé sur toutes les pages publiques.
   ============================================================ */

/* ── Bouton accessibilité (bas gauche) ─────────────────────── */
html body.ng-site:not(.ng-admin) .ng-a11y-fab {
  position: relative; width: auto; height: 52px; min-width: 52px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 0;
  border-radius: 999px; border: 0;
  background: var(--mb-1, #141414); color: var(--pro-bg, #fff);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.55);
  transition: gap .35s cubic-bezier(.22,.8,.3,1), padding .35s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease;
}
html body.ng-site:not(.ng-admin) .ng-a11y-fab:hover { transform: none; box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); }
.ng-a11y-fab-ico { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; }
.ng-a11y-fab-ico svg { width: 24px; height: 24px; }
.ng-a11y-fab-label {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  transition: max-width .4s cubic-bezier(.22,.8,.3,1), opacity .25s ease;
}
html body.ng-site:not(.ng-admin) .ng-a11y-fab:is(:hover, :focus-visible, [aria-expanded="true"]) { gap: 9px; padding: 0 18px 0 14px; }
.ng-a11y-fab:is(:hover, :focus-visible, [aria-expanded="true"]) .ng-a11y-fab-label { max-width: 160px; opacity: 1; }
/* Anneau animé (2026-10-12, v2) : piste bleu pâle toujours visible + comète
   (traînée qui s'intensifie jusqu'à une tête claire) qui en fait le tour,
   halo flouté qui la suit (::before du bouton) et onde discrète toutes les
   5 s (::after). Mouvement autorisé seulement ; figé = piste + comète fixes. */
@property --ng-ring-a { syntax: '<angle>'; inherits: false; initial-value: 40deg; }
.ng-a11y-fab-ring, html body.ng-site:not(.ng-admin) .ng-a11y-fab::before {
  --ng-ring-comet: conic-gradient(from var(--ng-ring-a), transparent 0 68%, color-mix(in srgb, var(--acc, #2f4cf0) 25%, transparent) 84%, color-mix(in srgb, var(--acc, #2f4cf0) 75%, transparent) 97%, transparent 99.5%);
}
.ng-a11y-fab-ring {
  position: absolute; inset: -4px; border-radius: inherit; pointer-events: none; padding: 2px;
  background: var(--ng-ring-comet), color-mix(in srgb, var(--acc, #2f4cf0) 12%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .3s ease;
}
html body.ng-site:not(.ng-admin) .ng-a11y-fab::before {
  content: ''; position: absolute; inset: -7px; border-radius: inherit; pointer-events: none; z-index: -1;
  background: var(--ng-ring-comet); filter: blur(6px); opacity: 0; transition: opacity .4s ease;
}
html body.ng-site:not(.ng-admin) .ng-a11y-fab::after {
  content: ''; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--acc, #2f4cf0); opacity: 0;
}
html body.ng-site:not(.ng-admin) .ng-a11y-fab:is(:hover, :focus-visible)::before { opacity: .4; }
html.m-on .ng-a11y-fab-ring,
html.m-on body.ng-site:not(.ng-admin) .ng-a11y-fab::before { animation: ngRing 7s linear infinite; }
body.a11y-stop .ng-a11y-fab-ring,
html body.ng-site.a11y-stop:not(.ng-admin) .ng-a11y-fab::before,
html body.ng-site.a11y-stop:not(.ng-admin) .ng-a11y-fab::after { animation: none !important; }
@keyframes ngRing { from { --ng-ring-a: 40deg; } to { --ng-ring-a: 400deg; } }
@keyframes ngPing {
  0% { opacity: .6; transform: scale(1); }
  32% { opacity: 0; transform: scale(1.32, 1.5); }
  100% { opacity: 0; transform: scale(1.32, 1.5); }
}
/* Point : une option d'accessibilité est active */
.ng-a11y-fab-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--acc-solid, #2f4cf0); box-shadow: 0 0 0 2.5px var(--pro-bg, #fff); display: none; }
body:is(.a11y-lineheight, .a11y-titles, .a11y-links, .a11y-dys, .a11y-spacing, .a11y-weight, .a11y-cursor, .a11y-stop, .a11y-hc, .a11y-mono, .a11y-sat-low, .a11y-sat-high) .ng-a11y-fab-dot { display: block; }

/* ── Bot (bas droite) ─────────────────────────────────────── */
.asst { position: fixed; right: 18px; bottom: 18px; z-index: 100000; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--v3-font, inherit); }
@media (min-width: 768px) { .asst { right: 26px; bottom: 26px; } }

.asst-fab {
  display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px 0 15px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--acc-solid, #2f4cf0); color: #fff;
  font-size: 14px; font-weight: 600; box-shadow: 0 16px 36px -14px rgba(47,76,240,.65);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.asst-fab:hover { box-shadow: 0 20px 40px -14px rgba(47,76,240,.75); }
.asst-fab:focus-visible { outline: 3px solid var(--mb-1, #141414); outline-offset: 3px; }
.asst-fab-ico { display: grid; place-items: center; width: 24px; height: 24px; }
.asst-fab-ico svg { width: 23px; height: 23px; }
.asst.is-open .asst-fab { transform: scale(.94); }
@media (max-width: 600px) { .asst-fab { width: 52px; padding: 0; justify-content: center; } .asst-fab-label { display: none; } }
html.m-on .asst-fab { animation: asstIn .6s cubic-bezier(.34,1.56,.64,1) both 1.2s; }
@keyframes asstIn { from { opacity: 0; transform: translateY(16px) scale(.8); } }

/* Bulle d'invitation */
.asst-teaser {
  position: relative; max-width: 250px; padding: 13px 34px 13px 15px; border-radius: 18px 18px 6px 18px;
  background: var(--pro-menu, #fff); color: var(--mb-1, #141414); font-size: 13.5px; line-height: 1.45; cursor: pointer;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.45);
}
.asst-teaser[hidden] { display: none; }
html.m-on .asst-teaser { animation: asstIn .5s cubic-bezier(.34,1.56,.64,1) both; }
.asst-teaser-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--mb-2, #717171); font-size: 18px; line-height: 1; cursor: pointer; }
.asst-teaser-x:hover { background: var(--pro-s2); }

/* Panneau */
.asst-panel {
  position: absolute; right: 0; bottom: 66px; width: min(380px, calc(100vw - 36px)); height: min(580px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 24px;
  background: var(--pro-menu, #fff); color: var(--mb-1, #141414);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.55), 0 0 0 1px var(--pro-line, rgba(0,0,0,.06));
  transform-origin: bottom right;
}
.asst-panel[hidden] { display: none; }
html.m-on .asst.is-open .asst-panel { animation: asstOpen .35s cubic-bezier(.22,.8,.3,1) both; }
@keyframes asstOpen { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@media (max-width: 600px) {
  .asst-panel { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; height: min(78vh, calc(100dvh - 90px)); }
  .asst.is-open .asst-fab { display: none; }
}

.asst-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: var(--pro-s2); }
.asst-avatar { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-solid, #2f4cf0); color: #fff; font-weight: 700; }
.asst-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.asst-avatar i { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2.5px var(--pro-s2); }
.asst-head-txt { flex: 1; min-width: 0; }
.asst-head h2 { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.25; color: var(--mb-1, #141414); }
.asst-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--mb-2, #717171); }
.asst-close { flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--mb-2, #717171); cursor: pointer; }
.asst-close:hover { background: var(--pro-s3); color: var(--mb-1, #141414); }
.asst-close svg { width: 18px; height: 18px; }

.asst-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.asst-msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.asst-msg p { margin: 0; white-space: pre-line; }
.asst-bot { align-self: flex-start; background: var(--pro-s2); color: var(--mb-1, #141414); border-bottom-left-radius: 6px; }
.asst-user { align-self: flex-end; background: var(--acc-solid, #2f4cf0); color: #fff; border-bottom-right-radius: 6px; }
html.m-on .asst-log .asst-msg { animation: asstMsg .3s cubic-bezier(.22,.8,.3,1) both; }
@keyframes asstMsg { from { opacity: 0; transform: translateY(6px); } }
.asst-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.asst-links a { padding: 5px 11px; border-radius: 999px; background: var(--pro-menu, #fff); color: var(--acc, #2f4cf0); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.asst-links a:hover { text-decoration: underline; }
.asst-typing { display: inline-flex; gap: 4px; padding: 13px 15px; }
.asst-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--mb-3, #8a8a8a); }
html.m-on .asst-typing span { animation: asstDot 1.1s ease-in-out infinite; }
html.m-on .asst-typing span:nth-child(2) { animation-delay: .15s; }
html.m-on .asst-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes asstDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.asst-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.asst-chips[hidden] { display: none; }
.asst-chip { padding: 7px 12px; border: 0; border-radius: 999px; background: var(--acc-bg, rgba(47,76,240,.1)); color: var(--acc, #2f4cf0); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.asst-chip:hover { background: var(--acc-solid, #2f4cf0); color: #fff; }

.asst-form { display: flex; gap: 8px; padding: 10px 12px; background: var(--pro-s2); }
.asst-form input { flex: 1; min-width: 0; height: 42px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--pro-menu, #fff); color: var(--mb-1, #141414); font: inherit; font-size: 14px; }
.asst-form input::placeholder { color: var(--mb-2, #717171); }
.asst-form input:focus-visible { outline: 2px solid var(--acc, #2f4cf0); outline-offset: 1px; }
.asst-send { flex-shrink: 0; width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--acc-solid, #2f4cf0); color: #fff; cursor: pointer; }
.asst-send svg { width: 19px; height: 19px; }
.asst.is-busy .asst-send { opacity: .5; pointer-events: none; }
.asst-note { margin: 0; padding: 0 16px 12px; background: var(--pro-s2); font-size: 11px; line-height: 1.4; color: var(--mb-2, #717171); }

body.a11y-stop .asst *, body.a11y-stop .asst { animation: none !important; }
@media print { .asst { display: none; } }
html:is(.a11y-text-lg, .a11y-text-xl) .ng-a11y-fab-dot { display: block; }