/* AXIMETRE 3.0.12 — eight bespoke technology sculptures.
 * All declarations are limited to AXIMETRE's shortcode subtree.
 * The art is decorative; no synthetic operational data is implied. */
.axi-root.axi3-root .axi-lab-service-hero-inner{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(26px,4vw,75px);
}
.axi-root.axi3-root .axi312-stage{
  --axi312-x:0deg;
  --axi312-y:0deg;
  position:relative;
  isolation:isolate;
  justify-self:center;
  width:min(100%,470px);
  aspect-ratio:1.075;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:19px 21px;
  border:1px solid rgba(95,162,222,.41);
  border-radius:25px;
  background:radial-gradient(ellipse at 55% 44%,rgba(35,105,177,.37),rgba(11,36,65,.72) 59%,rgba(7,22,43,.82) 100%);
  box-shadow:inset 0 0 0 1px rgba(10,44,79,.9),0 34px 80px rgba(0,0,0,.23),0 0 85px rgba(30,113,205,.16);
  perspective:1000px;
  overflow:hidden;
}
.axi-root.axi3-root .axi312-stage::before{
  content:"";
  position:absolute;
  inset:12px;
  pointer-events:none;
  border:1px solid rgba(105,173,223,.12);
  border-radius:17px;
  background:linear-gradient(90deg,transparent 49.9%,rgba(117,185,235,.045) 50%,transparent 50.1%),linear-gradient(transparent 49.9%,rgba(117,185,235,.045) 50%,transparent 50.1%);
}
.axi-root.axi3-root .axi312-stage::after{
  content:"";
  position:absolute;
  inset:auto -25% -54% -25%;
  height:80%;
  background:radial-gradient(ellipse,rgba(58,164,236,.16),transparent 72%);
  pointer-events:none;
}
.axi-root.axi3-root .axi312-stage-top,
.axi-root.axi3-root .axi312-stage-bottom{
  display:flex;
  position:relative;
  z-index:3;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#a6c8e9;
  font:750 10px/1.3 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.18em;
}
.axi-root.axi3-root .axi312-stage-star{color:#59e2dd;font-size:18px}
.axi-root.axi3-root .axi312-stage-bottom{color:#8cb8dd;font-size:9px}
.axi-root.axi3-root .axi312-stage-indicator{display:flex;gap:5px}
.axi-root.axi3-root .axi312-stage-indicator i{width:5px;height:5px;border-radius:50%;background:#4b97cf;animation:axi312-indicator 2.6s ease-in-out infinite}
.axi-root.axi3-root .axi312-stage-indicator i:nth-child(2){animation-delay:-.85s}
.axi-root.axi3-root .axi312-stage-indicator i:nth-child(3){animation-delay:-1.7s}
.axi-root.axi3-root .axi312-stage-depth{
  position:relative;
  z-index:1;
  width:100%;
  flex:1;
  min-height:0;
  transform:rotateX(var(--axi312-x)) rotateY(var(--axi312-y));
  transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.2,.78,.2,1);
}
.axi-root.axi3-root .axi312-sculpture{display:block;width:100%;height:100%;overflow:visible;max-height:390px}
.axi-root.axi3-root .axi312-sculpture g,
.axi-root.axi3-root .axi312-sculpture path,
.axi-root.axi3-root .axi312-sculpture circle,
.axi-root.axi3-root .axi312-sculpture rect{transform-box:fill-box;transform-origin:center}

/* 01 / WEB — front glass pane approaches while a scan sweeps vertically. */
.axi-root.axi3-root [data-axi312-scene="web"] .axi312-web-back{animation:axi312-web-recede 10s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="web"] .axi312-web-mid{animation:axi312-web-middle 10s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="web"] .axi312-web-front{animation:axi312-web-reveal 10s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="web"] .axi312-web-scanner{animation:axi312-web-scan 5s cubic-bezier(.46,.03,.53,.98) infinite}
@keyframes axi312-web-recede{0%,100%{transform:translate(-10px,-11px) scale(.96);opacity:.55}50%{transform:translate(10px,-19px) scale(.91);opacity:.8}}
@keyframes axi312-web-middle{0%,100%{transform:translate(-12px,0) skewY(-2deg)}50%{transform:translate(9px,8px) skewY(3deg)}}
@keyframes axi312-web-reveal{0%,100%{transform:perspective(650px) rotateY(-9deg) translateX(0);opacity:.91}50%{transform:perspective(650px) rotateY(5deg) translateX(13px);opacity:1}}
@keyframes axi312-web-scan{0%,100%{transform:translateY(0);opacity:0}12%,83%{opacity:.9}80%{transform:translateY(128px)}}

/* 02 / APPS — three independent UI planes travel in perspective. */
.axi-root.axi3-root [data-axi312-scene="apps"] .axi312-app-phone-left{animation:axi312-app-left 8s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="apps"] .axi312-app-phone-right{animation:axi312-app-right 8s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="apps"] .axi312-app-chip{animation:axi312-app-chip 8s cubic-bezier(.45,0,.35,1) infinite}
@keyframes axi312-app-left{0%,100%{transform:perspective(550px) rotateY(21deg) rotateZ(-5deg) translateX(-3px)}50%{transform:perspective(550px) rotateY(-13deg) rotateZ(2deg) translateX(-18px)}}
@keyframes axi312-app-right{0%,100%{transform:perspective(550px) rotateY(-22deg) rotateZ(7deg) translateX(6px)}50%{transform:perspective(550px) rotateY(14deg) rotateZ(-2deg) translateX(15px)}}
@keyframes axi312-app-chip{0%,100%{transform:perspective(440px) rotateY(-21deg) scale(.96)}50%{transform:perspective(440px) rotateY(27deg) scale(1.08)}}

/* 03 / TELEPHONY — expanding acoustic circles and a travelling waveform. */
.axi-root.axi3-root [data-axi312-scene="telephonie"] .axi312-voice-wave{animation:axi312-voice-radiate 5.8s ease-out infinite}
.axi-root.axi3-root [data-axi312-scene="telephonie"] .axi312-voice-wave-b{animation-delay:-1.9s}
.axi-root.axi3-root [data-axi312-scene="telephonie"] .axi312-voice-wave-c{animation-delay:-3.8s}
.axi-root.axi3-root [data-axi312-scene="telephonie"] .axi312-voice-pulse{stroke-dasharray:23 300;animation:axi312-voice-travel 5.4s linear infinite}
.axi-root.axi3-root [data-axi312-scene="telephonie"] .axi312-voice-receiver{animation:axi312-voice-pickup 7s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="telephonie"] .axi312-voice-satellite{animation:axi312-voice-blink 3.8s ease-in-out infinite alternate}
.axi-root.axi3-root [data-axi312-scene="telephonie"] .axi312-voice-satellite-b{animation-delay:-2s}
@keyframes axi312-voice-radiate{0%{transform:scale(.73);opacity:0}30%{opacity:.8}100%{transform:scale(1.24);opacity:0}}
@keyframes axi312-voice-travel{to{stroke-dashoffset:-970}}
@keyframes axi312-voice-pickup{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(12deg)}}
@keyframes axi312-voice-blink{from{opacity:.4}to{opacity:1}}

/* 04 / IT — a motherboard disassembles into three hardware layers. */
.axi-root.axi3-root [data-axi312-scene="informatique"] .axi312-it-bottom{animation:axi312-it-base 9s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="informatique"] .axi312-it-middle{animation:axi312-it-middle 9s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="informatique"] .axi312-it-top{animation:axi312-it-top 9s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="informatique"] .axi312-it-scan{animation:axi312-it-diagnostic 5s linear infinite}
@keyframes axi312-it-base{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}}
@keyframes axi312-it-middle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes axi312-it-top{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
@keyframes axi312-it-diagnostic{0%,100%{opacity:0;transform:translateY(-12px)}50%{opacity:1;transform:translateY(24px)}}

/* 05 / NETWORKS — moving packets traverse a luminous 3D topology. */
.axi-root.axi3-root [data-axi312-scene="reseaux"] .axi312-net-links{stroke-dasharray:8 10;animation:axi312-network-flow 5s linear infinite}
.axi-root.axi3-root [data-axi312-scene="reseaux"] .axi312-net-nodes circle{fill:#21669b;stroke:#8ae8ed;stroke-width:3;animation:axi312-network-node 4.5s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="reseaux"] .axi312-net-nodes circle:nth-child(2n){animation-delay:-1.7s}
.axi-root.axi3-root [data-axi312-scene="reseaux"] .axi312-net-nodes circle:nth-child(3n){animation-delay:-3.4s}
.axi-root.axi3-root [data-axi312-scene="reseaux"] .axi312-net-packet{offset-path:path("M66 139L200 70 345 130 212 210 66 139");animation:axi312-network-packet 8s linear infinite}
.axi-root.axi3-root [data-axi312-scene="reseaux"] .axi312-net-packet-two{offset-path:path("M345 130L212 210 203 320");animation-duration:5.2s}
@keyframes axi312-network-flow{to{stroke-dashoffset:-200}}
@keyframes axi312-network-node{0%,100%{opacity:.65;stroke-width:2}50%{opacity:1;stroke-width:5}}
@keyframes axi312-network-packet{to{offset-distance:100%}}

/* 06 / CLOUD — encrypted-looking data streams travel between racks and a cloud. */
.axi-root.axi3-root [data-axi312-scene="cloud"] .axi312-cloud-body{animation:axi312-cloud-expand 9s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="cloud"] .axi312-cloud-flow path{stroke-dasharray:7 14;animation:axi312-cloud-transfer 2.7s linear infinite}
.axi-root.axi3-root [data-axi312-scene="cloud"] .axi312-cloud-flow path:nth-child(2){animation-delay:-1.35s}
.axi-root.axi3-root [data-axi312-scene="cloud"] .axi312-cloud-racks rect{animation:axi312-cloud-rack 4.7s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="cloud"] .axi312-cloud-racks rect:nth-child(2){animation-delay:-1.2s}
.axi-root.axi3-root [data-axi312-scene="cloud"] .axi312-cloud-racks rect:nth-child(3){animation-delay:-2.4s}
@keyframes axi312-cloud-expand{0%,100%{transform:scaleX(.98);opacity:.89}50%{transform:scaleX(1.025);opacity:1}}
@keyframes axi312-cloud-transfer{to{stroke-dashoffset:-126}}
@keyframes axi312-cloud-rack{0%,100%{stroke:#4f94c4}50%{stroke:#9debea}}

/* 07 / MESSAGING — the envelope opens and releases a document. */
.axi-root.axi3-root [data-axi312-scene="messagerie"] .axi312-mail-flap{transform-origin:50% 0%;animation:axi312-mail-open 9s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="messagerie"] .axi312-mail-letter{animation:axi312-mail-letter 9s cubic-bezier(.46,.05,.5,.97) infinite}
.axi-root.axi3-root [data-axi312-scene="messagerie"] .axi312-mail-seal{animation:axi312-mail-seal 9s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="messagerie"] .axi312-mail-trail{animation:axi312-mail-trail 9s linear infinite;stroke-dasharray:3 12}
@keyframes axi312-mail-open{0%,12%,90%,100%{transform:perspective(450px) rotateX(0deg)}36%,68%{transform:perspective(450px) rotateX(68deg)}}
@keyframes axi312-mail-letter{0%,15%,90%,100%{transform:translateY(40px);opacity:.72}42%,65%{transform:translateY(-25px);opacity:1}}
@keyframes axi312-mail-seal{0%,100%{opacity:.8;transform:scale(.92)}48%{opacity:1;transform:scale(1.05)}}
@keyframes axi312-mail-trail{to{stroke-dashoffset:-180}}

/* 08 / STRATEGY — a compass rotates while decision routes illuminate. */
.axi-root.axi3-root [data-axi312-scene="conseil"] .axi312-strategy-compass{animation:axi312-strategy-orient 16s cubic-bezier(.42,0,.58,1) infinite}
.axi-root.axi3-root [data-axi312-scene="conseil"] .axi312-strategy-platform{animation:axi312-strategy-platform 12s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="conseil"] .axi312-strategy-route path{stroke-dasharray:5 10;animation:axi312-strategy-path 6s linear infinite}
.axi-root.axi3-root [data-axi312-scene="conseil"] .axi312-strategy-route circle{fill:#2b88bd;stroke:#9ee7ef;stroke-width:3;animation:axi312-strategy-node 6s ease-in-out infinite}
.axi-root.axi3-root [data-axi312-scene="conseil"] .axi312-strategy-route circle:nth-child(2){animation-delay:-2s}
.axi-root.axi3-root [data-axi312-scene="conseil"] .axi312-strategy-route circle:nth-child(3){animation-delay:-4s}
@keyframes axi312-strategy-orient{0%,100%{transform:rotate(-25deg)}25%{transform:rotate(28deg)}50%{transform:rotate(75deg)}75%{transform:rotate(22deg)}}
@keyframes axi312-strategy-platform{0%,100%{transform:perspective(700px) rotateX(0)}50%{transform:perspective(700px) rotateX(12deg)}}
@keyframes axi312-strategy-path{to{stroke-dashoffset:-180}}
@keyframes axi312-strategy-node{0%,100%{opacity:.45}45%,55%{opacity:1}}
@keyframes axi312-indicator{0%,100%{opacity:.3}50%{opacity:1}}

/* The three complementary site pages keep their own visual vocabulary:
 * interactive constellation on home, architectural gyroscope on company,
 * progressive communication beam on contact. */
.axi-root.axi3-root[data-axi-page="home"] .axi3-live-map::after{
  content:"";
  position:absolute;
  inset:14%;
  border:1px solid transparent;
  border-top-color:rgba(103,235,235,.62);
  border-bottom-color:rgba(116,169,240,.41);
  border-radius:50%;
  pointer-events:none;
  animation:axi312-home-compass 26s linear infinite;
}
.axi-root.axi3-root[data-axi-page="about"] .axi-about-hero .axi-orbit-b{
  animation:axi312-about-gyroscope 15s ease-in-out infinite;
}
.axi-root.axi3-root[data-axi-page="about"] .axi-about-hero .axi-orbit-axis{
  animation:axi312-about-axis 13s ease-in-out infinite;
}
.axi-root.axi3-root[data-axi-page="about"] .axi-about-hero .axi-orbit-axis-b{
  animation-delay:-6.5s;
}
.axi-root.axi3-root[data-axi-page="contact"] .axi-contact-hero::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  inset:-30% -12%;
  background:conic-gradient(from 0deg at 72% 53%,transparent 0deg,transparent 40deg,rgba(89,202,230,.14) 52deg,transparent 67deg,transparent 180deg,rgba(71,130,216,.12) 195deg,transparent 207deg);
  animation:axi312-contact-beam 24s linear infinite;
}
.axi-root.axi3-root[data-axi-page="contact"] .axi-contact-hero::after{
  border-style:dashed;
  border-color:rgba(117,194,231,.32);
  animation:axi312-contact-transmit 18s linear infinite;
}
@keyframes axi312-home-compass{to{transform:rotate(360deg)}}
@keyframes axi312-about-gyroscope{0%,100%{transform:rotateX(64deg) rotate(-23deg)}50%{transform:rotateX(18deg) rotate(67deg)}}
@keyframes axi312-about-axis{0%,100%{transform:rotate(35deg);opacity:.25}50%{transform:rotate(135deg);opacity:.72}}
@keyframes axi312-contact-beam{to{transform:rotate(360deg)}}
@keyframes axi312-contact-transmit{to{transform:rotate(360deg)}}

@container axi-page (max-width:900px){
  .axi-root.axi3-root .axi-lab-service-hero-inner{grid-template-columns:minmax(0,1fr);gap:39px}
  .axi-root.axi3-root .axi312-stage{justify-self:center;width:min(100%,440px)}
}
@container axi-page (max-width:540px){
  .axi-root.axi3-root .axi312-stage{width:min(100%,340px);padding:13px;border-radius:18px}
  .axi-root.axi3-root .axi312-stage-top,.axi-root.axi3-root .axi312-stage-bottom{font-size:8px;letter-spacing:.1em}
  .axi-root.axi3-root .axi-lab-service-hero-inner{gap:25px}
}
@media (prefers-reduced-motion:reduce){
  .axi-root.axi3-root .axi312-stage *,
  .axi-root.axi3-root .axi312-stage *::before,
  .axi-root.axi3-root .axi312-stage *::after{animation:none!important;transition:none!important}
  .axi-root.axi3-root .axi312-stage-depth{transform:none!important}
}

/* 3.0.13 — expertise navigation must open pages, not scroll the home catalogue. */
.axi-root.axi3-root .axi-nav button.axi-nav-services{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding-inline:0;
  margin:0;
  border:0;
  background:transparent;
  color:#dae9fc;
  font:inherit;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.025em;
  white-space:nowrap;
  cursor:pointer;
}
.axi-root.axi3-root .axi-nav button.axi-nav-services:hover,
.axi-root.axi3-root .axi-nav button.axi-nav-services[aria-expanded="true"]{color:#86d8f7}
/* The Expertise chevron remains white on the navy navigation background. */
.axi-root.axi3-root .axi-nav button.axi-nav-services > span[aria-hidden="true"]{color:#fff}
.axi-root.axi3-root .axi-nav-group.is-open .axi-nav-dropdown{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}
.axi-root.axi3-root a.axi-lab-preview{
  text-decoration:none;
  cursor:pointer;
}
@container axi-page (max-width:980px){
  .axi-root.axi3-root .axi-nav button.axi-nav-services{
    display:flex;
    width:100%;
    justify-content:space-between;
    min-height:44px;
    padding:12px 10px;
    font-size:14px;
  }
  .axi-root.axi3-root .axi-nav-group .axi-nav-dropdown{display:none}
  .axi-root.axi3-root .axi-nav-group.is-open .axi-nav-dropdown{display:grid}
}

/* 3.0.14 — keep navigation errors inside the AXIMETRE experience. */
.axi-root.axi3-root .axi-route-error{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  padding:15px 20px;
  background:#153453;
  border-bottom:1px solid #4c8abb;
  color:#f3f8ff;
  font-size:14px;
  text-align:center;
}
.axi-root.axi3-root .axi-route-error button{
  min-height:44px;
  padding:9px 16px;
  border:1px solid #84c5f9;
  border-radius:5px;
  background:#204b73;
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.axi-root.axi3-root .axi-route-error button:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
}
