/* 01 · Aujourd'hui : vraies captures de HUB IA Collaboration (données fictives).
   Fondu enchaîné, lent travelling vers l'élément isolé, projecteur à bord adouci. */
.areel{--lime:#bdee63;--nuit:#101211;margin-top:2.2rem}
.areel__scene{position:relative;aspect-ratio:1440/900;border-radius:18px;overflow:hidden;background:#e9eaec;box-shadow:0 40px 80px -40px rgba(16,18,17,.55),0 0 0 1px rgba(16,18,17,.08);isolation:isolate}
.areel__plan{position:absolute;inset:0;opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1);will-change:opacity}
.areel__plan.est-vu{opacity:1;z-index:2}
.areel__cam{position:absolute;inset:0;transform-origin:0 0;transform:translate3d(0,0,0) scale(1);will-change:transform}
.areel__plan.est-vu .areel__cam{transition:transform 6.2s cubic-bezier(.33,.0,.2,1)}
.areel__cam img{display:block;width:100%;height:100%;object-fit:cover}
.areel__spot{position:absolute;border-radius:14px;opacity:0;box-shadow:0 0 56px 9999px rgba(12,14,13,.58);transition:opacity .9s ease .7s}
.areel__spot::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--lime);box-shadow:0 0 0 6px rgba(189,238,99,.22),0 0 34px rgba(189,238,99,.35)}
.areel__plan.est-vu .areel__spot{opacity:1}
.areel__fictif{position:absolute;top:.9rem;right:.9rem;z-index:5;font:500 .7rem/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:.45em .85em;border-radius:999px;background:var(--nuit);color:#eceeed}
.areel__vue{position:relative}
.areel__bulle{position:absolute;z-index:4;left:1rem;bottom:1rem;max-width:min(30rem,calc(100% - 2rem));background:rgba(16,18,17,.92);color:#f2f3f1;border-radius:14px;padding:.8rem 1rem;transform:translateY(10px);opacity:0;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(6px)}
.areel__bulle.est-vu{opacity:1;transform:none}
.areel__bulle.en-haut{bottom:auto;top:1rem;left:auto;right:1rem;margin-top:1.6rem}
.areel__bulle b{display:flex;gap:.6rem;align-items:center;font-size:1.02rem;font-weight:600}
.areel__bulle b small{font:500 .7rem/1 "IBM Plex Mono",monospace;color:var(--lime);letter-spacing:.04em}
.areel__bulle span{display:block;font-size:.92rem;line-height:1.45;color:#d9dbd8;margin-top:.25rem}
.areel__encours{font:500 .66rem/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;background:var(--lime);color:var(--nuit);padding:.35em .6em;border-radius:999px}
.areel__cmd{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem}
.areel__cmd button,.areel__pas button{font:500 .85rem/1 "Instrument Sans",Arial,sans-serif;color:#101211;background:#fdfdfc;border:1px solid #c9c8c4;border-radius:999px;padding:.6em 1em;cursor:pointer;min-height:44px}
.areel__cmd button:hover,.areel__pas button:hover{border-color:#101211}
.areel button:focus-visible{outline:3px solid #3f5a12;outline-offset:2px}
.areel__num{font:500 .78rem/1 "IBM Plex Mono",monospace;color:#3f5a12;background:#e9f8cb;padding:.5em .7em;border-radius:999px}
.areel__barre{flex:1 1 8rem;height:3px;background:#dad9d6;border-radius:3px;overflow:hidden;min-width:6rem}
.areel__barre i{display:block;height:100%;width:0;background:#101211;transform-origin:0 50%}
.areel__pas{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.areel__pas button{font-size:.8rem;min-height:40px}
.areel__pas button[aria-current]{background:#101211;color:#fdfdfc;border-color:#101211}
.areel__source{font-size:.8rem!important;color:#55554f!important;margin-top:.8rem!important}
@media (max-width:640px){.areel__scene{border-radius:12px}.areel__bulle,.areel__bulle.en-haut{position:static;max-width:none;margin:.8rem 0 0;transform:none;background:#101211}.areel__bulle.est-vu{opacity:1}.areel__fictif{top:.5rem;right:.5rem;font-size:.6rem}}
/* mouvement réduit : liste fixe des plans, chaque élément encadré */
.areel.sans-anim .areel__scene{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none;display:grid;gap:1.6rem}
.areel.sans-anim .areel__plan{position:relative;opacity:1}
.areel.sans-anim .areel__cam{position:relative;aspect-ratio:1440/900;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(16,18,17,.1);transform:none!important;transition:none}
.areel.sans-anim .areel__fictif{display:none}
.areel.sans-anim .areel__spot{opacity:1;transition:none;box-shadow:0 0 0 9999px rgba(12,14,13,.35)}
.areel.sans-anim .areel__bulle,.areel.sans-anim .areel__cmd,.areel.sans-anim .areel__pas{display:none}
.areel__fig{display:none}
.areel.sans-anim .areel__fig{display:block;margin:.5rem 0 0;font-size:.95rem;color:#2c2c29}
.areel.sans-anim .areel__fig b{display:block;color:#101211}
.areel__bulle .areel__encours{display:inline-block;margin:0;color:#101211}