/* The original glass artwork remains the source of truth, including the fallback. */
.hero.hero{height:100svh;min-height:740px;max-height:980px;padding:110px 0 75px;display:flex;align-items:center;isolation:isolate;background:#e7effb}
.hero .hero-background,.hero .hero-shade{display:none}
.hero-artwork {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  container-type: size;
}
.hero-image-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, calc(100cqh * 1671 / 941));
  aspect-ratio: 1671 / 941;
  transform: translate(-50%, -50%);
}
.hero-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
}
/* The circle samples the same source image as the full-size artwork. */
.hero-orb {
  position: absolute;
  left: 71.33453%;
  top: 62.59299%;
  width: 11.01137%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  mask-image: radial-gradient(circle closest-side, #000 82%, transparent);
}
.hero-orb-image {
  width: 100%;
  height: 100%;
  background: url("aaia-ecosysteme-lumiere.png") 73.97445% 65.65390% / 908.15217% 511.41304% no-repeat;
  animation: hero-orb-spin 18s linear infinite;
}
@keyframes hero-orb-spin { to { transform: rotate(1turn); } }
.hero .hero-copy{width:min(48%,650px);margin:0 0 0 4%;padding:32px;transform:perspective(1600px) rotateY(3deg) rotateZ(-.5deg);border-radius:20px;background:linear-gradient(120deg,#ffffffeb,#f7faffc9);box-shadow:4px 7px 0 -3px #bdd0e69c,0 18px 45px #35557a13;backdrop-filter:blur(5px)}
.hero .hero-copy h1{font-size:clamp(32px,3.5vw,54px);line-height:1.13}
.hero .hero-copy .intro{font-size:15px;line-height:1.8}
.hero .hero-copy .eyebrow{font-size:8px;letter-spacing:1.2px}
.hub-scene .satellite-one{left:12%;top:8%}
.hub-scene .satellite-two{right:12%;top:10%}
.hub-scene .satellite-three{left:10%;bottom:9%}
.hub-scene .satellite-four{right:9%;bottom:8%}
@media(max-width:900px){
 .hero.hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;align-items:stretch;padding:160px 0 70px;background:linear-gradient(#e9f1fe,#e7effb)}
 .hero .hero-copy{width:88%;max-width:650px;margin:0 auto;padding:28px;z-index:2}
 .hero .hero-copy h1{font-size:clamp(29px,4.8vw,40px)}
 .hero .hero-copy .intro{font-size:14px;margin:20px 0 24px}
 .hero-artwork{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1671/941;max-height:360px;order:1;margin-top:0;mask-image:linear-gradient(transparent,#000 12%,#000 86%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 86%,transparent)}
 .hero-bottom{order:2}
}
@media(max-width:480px){
 .hero.hero{padding-top:138px}
 .hero .hero-copy{width:90%;padding:23px;transform:perspective(1600px) rotateY(2deg)}
 .hero .hero-copy h1{font-size:clamp(27px,7vw,34px)}
 .hero .hero-copy .intro{font-size:13px}
 .hero .hero-copy .eyebrow{font-size:7px;letter-spacing:.7px}
 .hero-artwork{min-height:210px}
}

/* Share the header's left edge while retaining the card's static perspective. */
.hero .hero-copy{margin-left:max(6%,calc((100% - 1280px)/2));transform:perspective(1600px) rotateY(3deg);transform-origin:left center}
@media(max-width:900px){.hero .hero-copy{margin-left:6%;margin-right:auto}}
@media(max-width:639px){.hero .hero-copy{margin-left:3%;margin-right:auto}}

/* Full-bleed artwork fades directly into the page background underneath. */
.hero.hero{background:linear-gradient(to bottom,#e7effb 0%,#e7effb 60%,#e7effb00 100%)}
.hero-artwork{background:transparent;mask-image:linear-gradient(to bottom,#000 77%,#000c 86%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 77%,#000c 86%,transparent 100%)}
@media(max-width:900px){
 .hero.hero{background:linear-gradient(to bottom,#e9f1fe 0%,#e7effb 58%,#e7effb00 100%)}
 .hero-artwork{mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 76%,#0008 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 76%,#0008 88%,transparent 100%)}
}

/* Open editorial hero, matching the supplied reference. */
header.header.wrap{width:100%;max-width:none;margin:0;border-radius:0;padding-inline:max(24px,calc((100% - 1280px)/2));background:rgba(255,255,255,.94)}
.hero .hero-copy{width:min(49%,660px);max-width:none;margin-left:max(5%,calc((100% - 1380px)/2));padding:0;transform:none;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero .hero-copy h1{font-size:clamp(34px,3.7vw,59px);line-height:1.12;font-weight:450;letter-spacing:-.045em}
.hero .hero-copy h1 em{font-weight:800;color:#0752ed}
.hero .hero-copy .eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:34px}
.hero .hero-copy .intro{font-size:16px;line-height:1.7;margin:30px 0 34px;color:#445268}
.hero .hero-appointment{border-radius:8px;background:linear-gradient(115deg,#124cdb,#003bb9);border-color:#1250e0;padding:18px 25px;font-weight:550;box-shadow:0 9px 22px #1946ac13}
@media(max-width:1100px) and (min-width:901px){.hero .hero-copy{width:49%;margin-left:4%}.hero .hero-copy h1{font-size:38px}.hero .hero-copy .eyebrow{font-size:8px;letter-spacing:1px}}
@media(max-width:900px){
 .hero.hero{padding-top:158px;padding-bottom:65px}
 .hero .hero-copy{width:88%;margin:0 6%;padding:0;transform:none}
 .hero .hero-copy h1{font-size:clamp(32px,5.4vw,48px);font-weight:450}
 .hero .hero-copy .intro{font-size:15px;line-height:1.7;margin:25px 0 28px}
 .hero .hero-copy .eyebrow{font-size:9px;letter-spacing:1.3px;margin-bottom:28px}
 .hero-artwork{max-height:none;margin-top:24px;aspect-ratio:1671/941}
}
@media(max-width:480px){
 header.header.wrap{padding-inline:16px;gap:8px}
 .hero.hero{padding-top:142px}
 .hero .hero-copy{width:90%;margin-inline:5%}
 .hero .hero-copy h1{font-size:clamp(30px,8.2vw,39px)}
 .hero .hero-copy .eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:25px}
 .hero .hero-copy .intro{font-size:14px}
 .hero-artwork{min-height:0}
}

/* Avoid repeatedly blurring large translucent surfaces during scrolling. */
body main#contenu *, body header.header, body footer, body .motion-control {backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.motion-offscreen *, .motion-offscreen *::before, .motion-offscreen *::after {animation-play-state:paused!important}

/* Static background and bounded previews reduce paint work on the main page. */
html { scroll-behavior: auto; }
body:has(.aaia-home) {
  position: relative;
  background: #e7effb;
}
body:has(.aaia-home) .site-background {
  position: absolute;
  inset: 0 0 auto;
  height: 100svh;
}
.hero-scroll-marker {
  position: absolute;
  top: 24px;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.hero-artwork {
  mask-image: none;
  -webkit-mask-image: none;
}
.hero-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 77%, #e7effb 100%);
}
@media (max-width: 900px) {
  .hero-artwork { mask-image: none; -webkit-mask-image: none; }
  .hero-artwork::after {
    background: linear-gradient(#e7effb, transparent 12%, transparent 76%, #e7effb);
  }
}
.demo-shell { contain: paint; }
.demo-shell:not([data-scroll-active]) :is(.demo-viewport, .jbo-sidebar, .ah-nav, .ah-main) {
  overflow-y: hidden;
}
#exemple-hub :is(.ah-nav, .ah-main) { overscroll-behavior-y: auto; }
.demo-scroll-controls {
  padding: 8px 16px;
  background: #eff5ff;
}
.demo-scroll-toggle {
  padding: 5px 9px;
  border: 1px solid #b6c9e8;
  border-radius: 6px;
  background: #fff;
  color: #244873;
  font-size: 12px;
}
button[data-demo-target] {
  background: transparent;
  text-align: start;
  cursor: pointer;
}
.demo-nav button[data-demo-target] { border: 0; cursor: pointer; }
.jbo-nav button[data-demo-target] { cursor: pointer; }
.ticker-track { will-change: auto; }
.hub-connections { animation: none; }