.bci-mm {
  --mm-blue: var(--accent-color, #000091);
  --mm-red: var(--primary-color, #e1000f);
  --mm-ink: #0d0f2e;
  --mm-muted: #5d6280;
  --mm-hover: #f3f4fa;
  --mm-tint: #eceefb;
  --mm-ease: cubic-bezier(.22, .8, .24, 1);
  --mm-ease-back: cubic-bezier(.3, 1.5, .5, 1);
  --sc-bg: #000091;
  --sc-tile: #1b20a6;
  --sc-line: #ffffff;
  --sc-dim: rgba(255, 255, 255, .38);
  --sc-fill: rgba(255, 255, 255, .08);
  --sc-fill2: rgba(255, 255, 255, .2);
  --sc-red: #ff5c66;
  --sc-ok: #3fdc98;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 50;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 24px;
  box-shadow: 6px 12px 20px rgba(0, 0, 0, .08);
  overflow: hidden;
}
/* Pont de survol : la barre d'en-tête laisse ~28 px entre le déclencheur et le panneau. */
.bci-mm::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px; }
.bci-mm--list { width: 700px; margin-left: -350px; }
.bci-mm--groups { width: 960px; margin-left: -480px; }
.bci-mm-inner { display: flex; align-items: stretch; }
.bci-mm-list { flex: 1; min-width: 0; padding: 14px; }
.bci-mm-list ul { list-style: none; margin: 0; padding: 0; }

.js-dropdown-container.is-open .bci-mm-stg { animation: bci-mm-stg .4s var(--mm-ease) both; animation-delay: calc(var(--i, 0) * 28ms + 40ms); }
@keyframes bci-mm-stg { from { opacity: 0; transform: translateY(6px); } }

.bci-mm-item {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px;
  color: var(--mm-ink); text-decoration: none; transition: background-color .18s;
}
.bci-mm-item:hover, .bci-mm-item:focus-visible, .bci-mm-item.is-current { background: var(--mm-hover); outline: none; }
.bci-mm-item:focus-visible { box-shadow: inset 0 0 0 2px var(--mm-blue); }
.bci-mm-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--mm-tint); color: var(--mm-blue); transition: background-color .2s, color .2s;
}
.bci-mm-ico svg { width: 19px; height: 19px; stroke-width: 1.8; }
.bci-mm-item:hover .bci-mm-ico, .bci-mm-item:focus-visible .bci-mm-ico, .bci-mm-item.is-current .bci-mm-ico,
.bci-mm-item.is-active .bci-mm-ico { background: var(--mm-blue); color: #ffffff; }
/* pathLength="1" est posé par navbar.js (classe is-drawable) : sans lui, dasharray 1 rendrait l'icône en pointillés. */
.bci-mm-item:hover .bci-mm-ico svg.is-drawable > *, .bci-mm-item:focus-visible .bci-mm-ico svg.is-drawable > * {
  stroke-dasharray: 1; animation: bci-mm-icodraw .75s var(--mm-ease) both;
}
@keyframes bci-mm-icodraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.bci-mm-text { min-width: 0; flex: 1; }
.bci-mm-label { display: block; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 15px; line-height: 1.25; }
.bci-mm-item.is-active .bci-mm-label { color: var(--mm-blue); }
.bci-mm-desc { display: block; font-size: 13px; line-height: 1.35; color: var(--mm-muted); margin-top: 2px; }
.bci-mm-ext { display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; opacity: .55; }
.bci-mm-go { flex: 0 0 auto; width: 16px; height: 16px; color: var(--mm-blue); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .25s var(--mm-ease); }
.bci-mm-item:hover .bci-mm-go, .bci-mm-item:focus-visible .bci-mm-go { opacity: 1; transform: none; }

.bci-mm-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px 10px; }
.bci-mm-groups > :first-child { grid-row: span 2; }
.bci-mm-group-title { margin: 0; padding: 8px 10px 6px; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--mm-muted); }
.bci-mm-groups .bci-mm-item { padding: 7px 10px; gap: 10px; }
.bci-mm-groups .bci-mm-ico { width: 32px; height: 32px; border-radius: 9px; }
.bci-mm-groups .bci-mm-ico svg { width: 17px; height: 17px; }
.bci-mm-groups .bci-mm-label { font-size: 14.5px; }
.bci-mm-groups .bci-mm-desc { font-size: 12.5px; }

.bci-mm-scene { flex: 0 0 300px; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: var(--sc-bg); color: #ffffff; }
.bci-mm-stage { position: relative; aspect-ratio: 260 / 150; max-width: 100%; }
.bci-mm-layer { position: absolute; inset: 0; transition: opacity .2s ease; }
.bci-mm-layer.is-out { opacity: 0; }
.bci-mm-caption { min-height: 74px; transition: opacity .18s; }
.bci-mm-caption.is-swapping { opacity: 0; }
.bci-mm-caption h3 { margin: 0 0 4px; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25; color: #ffffff; text-wrap: balance; }
.bci-mm-caption p { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.bci-mm-cta {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 999px; background: rgba(255, 255, 255, .12); color: #ffffff; text-decoration: none;
  font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 14px; transition: background-color .2s;
}
.bci-mm-cta:hover { background: rgba(255, 255, 255, .2); color: #ffffff; }
.bci-mm-cta svg { width: 16px; height: 16px; transition: transform .25s var(--mm-ease); }
.bci-mm-cta:hover svg { transform: translateX(3px); }

.bci-mm-ind {
  position: absolute; left: 0; top: 0; width: 1px; height: 2px; border-radius: 2px; background: var(--primary-color, #e1000f);
  transform-origin: 0 50%; transform: translate(var(--x, 0px), var(--y, 0px)) scaleX(var(--w, 0));
  opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.22, .8, .24, 1), opacity .2s;
}
.bci-mm-ind.is-on { opacity: 1; }
#site-desktop-nav.has-ind .nav-trigger.is-active > span:first-of-type::after,
#site-desktop-nav.has-ind .nav-link.is-active::after { opacity: 0; }

/* Scènes : l'état de repos est l'image finale, les keyframes partent de l'état initial (mouvement réduit = image finale). */
.bci-mm-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bci-mm-svg .s { fill: none; stroke: var(--sc-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bci-mm-svg .dim { stroke: var(--sc-dim); }
.bci-mm-svg .r { stroke: var(--sc-red); }
.bci-mm-svg .g { stroke: var(--sc-ok); }
.bci-mm-svg .k { stroke: var(--sc-bg); }
.bci-mm-svg .wf { fill: var(--sc-line); }
.bci-mm-svg .bf { fill: var(--sc-bg); }
.bci-mm-svg .tf { fill: var(--sc-tile); }
.bci-mm-svg .ff { fill: var(--sc-fill); }
.bci-mm-svg .ff2 { fill: var(--sc-fill2); }
.bci-mm-svg .rf { fill: var(--sc-red); }
.bci-mm-svg .gf { fill: var(--sc-ok); }
.bci-mm-svg .gl { fill: rgba(63, 220, 152, .22); }
.bci-mm-svg text { font-family: "DM Sans", sans-serif; font-size: 8.5px; font-weight: 600; letter-spacing: .05em; fill: rgba(255, 255, 255, .8); }
.bci-mm-svg .mid { text-anchor: middle; }
.bci-mm-svg .big { font-size: 20px; font-weight: 700; letter-spacing: .02em; fill: var(--sc-line); }
.bci-mm-svg .kt { fill: var(--sc-bg); }
.bci-mm-svg .gt { fill: var(--sc-ok); }
.bci-mm-svg .d { stroke-dasharray: 1; stroke-dashoffset: 0; animation: bci-mm-draw var(--t, .7s) var(--mm-ease) var(--w, 0s) both; }
.bci-mm-svg .p { transform-box: fill-box; transform-origin: center; animation: bci-mm-pop .45s var(--mm-ease-back) var(--w, 0s) both; }
.bci-mm-svg .f { animation: bci-mm-fade var(--t, .4s) ease var(--w, 0s) both; }
.bci-mm-svg .mv { animation: var(--k) var(--t, 1s) var(--mm-ease) var(--w, 0s) both; }
.bci-mm-svg .vb { transform-box: view-box; }
.bci-mm-svg .fb { transform-box: fill-box; }
.bci-mm-svg .needle { transform-origin: 130px 100px; transform-box: view-box; transform: rotate(-58deg); }
.bci-mm-svg .lift { transform: translateY(-38px); }
.bci-mm-svg .typing, .bci-mm-svg .scanl, .bci-mm-svg .pk { opacity: 0; }
@keyframes bci-mm-draw { from { stroke-dashoffset: 1; } }
@keyframes bci-mm-pop { from { transform: scale(0); } }
@keyframes bci-mm-fade { from { opacity: 0; } }
@keyframes bci-mm-k-clock { from { transform: rotate(-360deg); } }
@keyframes bci-mm-k-scan { 0% { opacity: 0; transform: none; } 6% { opacity: 1; } 35% { transform: translateY(30px); } 68% { transform: none; } 92% { opacity: 1; transform: translateY(30px); } 100% { opacity: 0; transform: translateY(30px); } }
@keyframes bci-mm-k-transfer { 0% { transform: translate(-154px, 0); } 50% { transform: translate(-77px, -34px); } 100% { transform: none; } }
@keyframes bci-mm-k-mail { 0% { transform: translate(-84px, 22px); } 50% { transform: translate(-42px, -10px); } 100% { transform: none; } }
@keyframes bci-mm-k-seek { 0%, 22% { transform: translateY(-54px); } 42% { transform: translateY(-36px); } 64% { transform: translateY(-18px); } 100% { transform: none; } }
@keyframes bci-mm-k-orient { 0%, 12% { transform: translate(-56px, -40px); } 32% { transform: translate(0, -40px); } 52% { transform: translate(56px, -40px); } 74% { transform: translate(-56px, 0); } 100% { transform: none; } }
@keyframes bci-mm-k-roll { from { transform: translate(-38.9px, 12.4px); } }
@keyframes bci-mm-k-turn { from { transform: rotate(-90deg); } }
@keyframes bci-mm-k-growy { from { transform: scaleY(0); } }
@keyframes bci-mm-k-growx { from { transform: scaleX(0); } }
@keyframes bci-mm-k-pk { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(188px); } }
@keyframes bci-mm-k-pkx { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 52% { transform: translateX(72px); opacity: 1; } 60% { transform: translateX(64px); } 70% { transform: translateX(68px); opacity: 0; } 100% { opacity: 0; transform: translateX(68px); } }
@keyframes bci-mm-k-shackle { from { transform: translateY(-7px); } }
@keyframes bci-mm-k-needle { 0% { transform: rotate(62deg); } 30% { transform: rotate(56deg); } 100% { transform: rotate(-58deg); } }
@keyframes bci-mm-k-stamp { 0% { transform: none; } 38% { transform: translateY(62px); } 55% { transform: translateY(62px); } 100% { transform: none; } }
@keyframes bci-mm-k-drive { from { transform: translateX(-70px); } }
@keyframes bci-mm-k-drive2 { from { transform: translateX(-96px); } }
@keyframes bci-mm-k-lift { from { transform: translateY(0); } to { transform: translateY(-38px); } }
@keyframes bci-mm-k-drop { from { opacity: 0; transform: translateY(-24px); } }
@keyframes bci-mm-k-push { from { transform: translateY(-34px); } }
@keyframes bci-mm-k-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes bci-mm-k-arrow { 0% { opacity: 0; transform: translateY(-14px); } 30% { opacity: 1; transform: none; } 55% { transform: translateY(6px); } 80%, 100% { transform: none; } }
@keyframes bci-mm-k-typing { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bci-mm-k-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .bci-mm-svg *, .bci-mm-stg, .bci-mm-ico svg > * { animation: none !important; }
  .bci-mm-ind, .bci-mm-layer, .bci-mm-caption { transition: none; }
}