/* A quiet editorial header, with playback controls separate from the story. */
html body #expertises .film .film-title{top:5%;left:6%;width:60%;height:auto;padding:0;margin:0;display:block;text-align:left;font-size:clamp(13px,1.25vw,17px);font-weight:600;line-height:1.4;letter-spacing:-.02em;color:#fff}
.service-playback{position:absolute;z-index:15;top:4%;right:5%;display:flex;align-items:center;gap:9px;color:#fff;font:500 10px/1.3 Manrope,sans-serif}
.playback-toggle{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff66;border-radius:50%;background:#17334c24;color:#fff;cursor:pointer;backdrop-filter:blur(12px);font-size:13px}
.playback-toggle:hover{background:#17334c55}.playback-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.playback-status{position:absolute;right:0;top:42px;white-space:nowrap;opacity:.85;font-variant-numeric:tabular-nums}
.playback-track{width:46px;height:3px;border-radius:5px;overflow:hidden;background:#ffffff40}.playback-track i{display:block;width:100%;height:100%;background:#fff;border-radius:inherit;transform:scaleX(0);transform-origin:left}
.playback-page{font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.04em}
html body #expertises .scene-navigation,html body #expertises [data-next-axis]{display:none!important}
@media(max-width:850px){html body #expertises .film .film-title{font-size:12px;max-width:52%}.service-playback{gap:6px}.playback-track{width:26px}.playback-toggle{width:32px;height:32px}.playback-status{top:36px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.playback-track i{transition:none}}

/* Minimal bottom rail: one progress line and a quiet pause control. */
html body #expertises .service-playback{top:auto;bottom:8px;left:7%;right:7%;height:40px;gap:16px;justify-content:center}
html body #expertises .playback-status,html body #expertises .playback-page{display:none}
html body #expertises .playback-track{order:0;width:clamp(90px,18vw,148px);height:4px;background:#ffffff45;border-radius:99px}
html body #expertises .playback-track i{background:linear-gradient(90deg,#ffffffa8,#fff);box-shadow:none}
html body #expertises .playback-toggle{order:1;width:44px;height:40px;padding:0;border:0;border-radius:12px;background:transparent;backdrop-filter:none;transition:background .25s,opacity .25s}
html body #expertises .playback-toggle:hover{background:#ffffff20}
html body #expertises .playback-toggle:disabled{opacity:.25;cursor:default}
html body #expertises .playback-toggle span{font-size:0;position:relative;width:12px;height:14px;display:block}
html body #expertises .playback-toggle span:before,html body #expertises .playback-toggle span:after{content:'';position:absolute;top:0;width:3px;height:14px;background:currentColor;border-radius:2px}
html body #expertises .playback-toggle span:before{left:1px}html body #expertises .playback-toggle span:after{right:1px}
html body #expertises .playback-toggle[aria-label^="Reprendre"] span:before{left:1px;width:12px;clip-path:polygon(0 0,100% 50%,0 100%);border-radius:0}
html body #expertises .playback-toggle[aria-label^="Reprendre"] span:after{display:none}
html body #expertises[data-active-axis="2"] .service-playback{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:850px){html body #expertises .service-playback{bottom:4px;height:36px;gap:12px}html body #expertises .playback-track{width:100px}html body #expertises .playback-toggle{height:36px}}/* Navigation integrated with the existing destination buttons. */
html body #expertises .service-playback{bottom:10px;height:114px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
html body #expertises .service-playback.playback-ready{opacity:1;visibility:visible}
html body #expertises[data-active-axis="2"] .service-playback{opacity:0;visibility:hidden}
.playback-next{order:0;display:flex;justify-content:center}
html body #expertises .playback-next [data-next-axis]{display:inline-flex!important;animation:none;opacity:1;visibility:visible;margin:0}
html body #expertises .playback-next [data-next-axis][hidden]{display:none!important}
html body #expertises .playback-track{order:1;width:155px;height:6px;flex-shrink:0}
html body #expertises .playback-toggle{order:2;height:32px;min-height:32px;flex-shrink:0}
html body #expertises .film-strategy .position-story{translate:0 -9%}
html body #expertises .film-brand .film-web,html body #expertises .film-brand .film-ending,html body #expertises .film-brand .laptop-model,html body #expertises .film-brand .phone-model{translate:0 -35px}
@media(max-width:850px){html body #expertises .service-playback{height:105px;bottom:6px;gap:8px}html body #expertises .film-strategy .position-story{translate:0 -8%}html body #expertises .film-brand .film-web,html body #expertises .film-brand .film-ending,html body #expertises .film-brand .laptop-model,html body #expertises .film-brand .phone-model{translate:0 -32px}}
/* Clear composition and separate navigation / playback actions. */
html body #expertises .service-playback{height:80px;bottom:22px;justify-content:center;gap:12px}
html body #expertises .playback-toggle{position:absolute;right:0;bottom:-10px;width:44px;height:44px}
html body #expertises .film-strategy .position-story{translate:0 -65px}
html body #expertises .film-brand .film-web{translate:0 -65px}
html body #expertises .film-brand .film-ending,html body #expertises .film-brand .laptop-model,html body #expertises .film-brand .phone-model{translate:0 -85px}
html body #expertises .film-marketing .discovery-story{translate:0 -45px}
html body #expertises .film-marketing .discovery-payoff{translate:0 -24px}
@media(max-width:850px){html body #expertises .service-playback{height:76px;bottom:16px}html body #expertises .film-strategy .position-story{translate:0 -24px}html body #expertises .film-brand .film-web{translate:0 -36px}html body #expertises .film-brand .film-ending,html body #expertises .film-brand .laptop-model,html body #expertises .film-brand .phone-model{translate:0 -72px}html body #expertises .film-marketing .discovery-story{translate:0 -12px}html body #expertises .film-marketing .discovery-payoff{translate:0 -12px}}
/* Layout offsets stay independent of animated translate keyframes. */
html body #expertises .film-brand .film-web{margin-top:-65px;translate:none}
html body #expertises .film-brand .film-ending{margin-top:-65px;translate:none}
html body #expertises .film-brand .laptop-model,html body #expertises .film-brand .phone-model{margin-bottom:85px;translate:none}
@media(max-width:850px){
html body #expertises .film-brand .film-web{margin-top:-36px}
html body #expertises .film-brand .film-ending{margin-top:0;margin-bottom:72px}
html body #expertises .film-brand .laptop-model,html body #expertises .film-brand .phone-model{margin-bottom:72px}
}/* The destination button itself carries the countdown. */
html body #expertises .playback-track{display:none}
html body #expertises .playback-next [data-next-axis]{
 background-color:rgba(255,255,255,.1);
 background-image:linear-gradient(90deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.28) var(--playback-progress,0%),transparent var(--playback-progress,0%),transparent 100%);
 background-origin:border-box;
 background-clip:border-box;
 overflow:hidden;
 transition:background-color .25s,border-color .25s,box-shadow .25s;
}
html body #expertises .playback-next [data-next-axis]:hover{background-color:rgba(255,255,255,.18)}/* Balance the composition around the scene, with the original glass CTA. */
html body #expertises .film-strategy .position-story{translate:0 -30px}
html body #expertises .film-brand .film-web{margin-top:-30px}
html body #expertises .film-brand .film-ending{margin-top:-30px}
html body #expertises .film-brand .laptop-model,html body #expertises .film-brand .phone-model{margin-bottom:45px}
html body #expertises .film-marketing .discovery-story{translate:0 -20px}
html body #expertises .film-marketing .discovery-payoff{translate:0 -8px}
html body #expertises .playback-next [data-next-axis]{
 min-height:52px;padding:7px 8px 7px 22px;gap:18px;font-size:13px;font-weight:700;
 border:1px solid #ffffff80;border-radius:999px;color:#fff;
 background-color:#ffffff20;
 background-image:linear-gradient(90deg,#ffffff26 0%,#ffffff26 var(--playback-progress,0%),transparent var(--playback-progress,0%),transparent 100%);
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 box-shadow:inset 0 1px 0 #ffffff40,0 8px 24px -14px #18375155;
}
html body #expertises .playback-next [data-next-axis]>span[aria-hidden]{width:36px;height:36px;flex-basis:36px;border:1px solid #ffffff70;background:#ffffff18;font-size:16px}
@media(max-width:850px){
html body #expertises .film-strategy .position-story{translate:0 -12px}
html body #expertises .film-brand .film-web{margin-top:-18px}
html body #expertises .film-brand .film-ending{margin-top:0;margin-bottom:48px}
html body #expertises .film-brand .laptop-model,html body #expertises .film-brand .phone-model{margin-bottom:48px}
html body #expertises .film-marketing .discovery-story{translate:0 -6px}
html body #expertises .film-marketing .discovery-payoff{translate:0 -6px}
html body #expertises .playback-next [data-next-axis]{min-height:46px;font-size:12px;padding:6px 7px 6px 18px;gap:14px}
html body #expertises .playback-next [data-next-axis]>span[aria-hidden]{width:32px;height:32px;flex-basis:32px}
}/* Restore the saved CTA geometry and glass treatment exactly. */
html body #expertises .playback-next .ui-cta.scene-next{
 --cta-bg:#ffffff20;--cta-ink:#fff;--cta-border:#ffffff65;--cta-icon:#ffffff18;
 min-height:46px;font-size:12px;padding:6px 7px 6px 18px;gap:14px;
 border:1px solid var(--cta-border);border-radius:999px;
 background-color:var(--cta-bg);box-shadow:none;
 background-image:linear-gradient(90deg,#ffffff26 calc(var(--playback-progress,0%) - 12%),#ffffff16 calc(var(--playback-progress,0%) - 5%),#ffffff00 var(--playback-progress,0%));
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html body #expertises .playback-next .ui-cta.scene-next>span[aria-hidden]{width:32px;height:32px;flex-basis:32px;font-size:15px;border:1px solid var(--cta-border);background:var(--cta-icon)}
html body #expertises .playback-next .ui-cta.scene-next:hover{background-color:#ffffff35;box-shadow:none}
html body #expertises .playback-next .ui-cta.scene-next:hover>span[aria-hidden]{background:#ffffff25}
html body #expertises .playback-manual .playback-toggle{display:none}
html body #expertises .playback-manual .playback-next .ui-cta.scene-next{background-image:none}
@media(max-width:550px){html body #expertises .playback-next .ui-cta.scene-next{font-size:11px;gap:9px;padding-left:13px;min-height:50px}}/* Keep the completed fill visible throughout the exit, then change scenes. */
html body #expertises .service-playback.playback-leaving{opacity:0;pointer-events:none;transition:opacity .4s ease}/* Anchor pause to the destination button rather than the scene corner. */
html body #expertises .playback-next{position:relative}
html body #expertises .playback-toggle{right:auto;left:calc(50% + 112px);bottom:auto;top:50%;transform:translateY(-50%);width:36px;height:36px;min-height:36px;border-radius:50%;opacity:.75}
html body #expertises .playback-toggle:hover,html body #expertises .playback-toggle:focus-visible{opacity:1;background:#ffffff18}
html body #expertises[data-active-axis="1"] .playback-toggle{left:calc(50% + 92px)}
@media(max-width:550px){html body #expertises .playback-toggle{left:calc(50% + 102px)}html body #expertises[data-active-axis="1"] .playback-toggle{left:calc(50% + 82px)}}
html body #expertises .playback-next .playback-toggle,html body #expertises[data-active-axis="1"] .playback-next .playback-toggle{left:calc(100% + 14px);top:50%}
/* Never reveal the replacement label during scene initialization. */
html body #expertises .service-playback.playback-switching{opacity:0;visibility:hidden;pointer-events:none;transition:none}
html body #expertises .film .film-title{display:none}/* Keep the outgoing film over the incoming one during the crossfade. */
html body #expertises .service-stage .scene-crossfade-out{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:3;pointer-events:none}/* Shift the complete composition together, without changing internal spacing. */
html body #expertises .demo-scene{top:var(--composition-shift,0px)}
html body #expertises .service-playback{transform:translateY(var(--composition-shift,0px))}/* All films share the same positioning context, including while fading out.
   Switching relative/grid positioning to absolute was moving the outgoing film. */
html body #expertises .service-stage .demo-scene,
html body #expertises .service-stage .demo-scene.scene-crossfade-out{
 position:absolute;inset:0;top:0;width:100%;height:100%;max-width:none;
 transform:translateY(var(--composition-shift,0px));
}/* Mobile navigation belongs to the film, not to a second row below it. */
@media(max-width:850px){
 html body #expertises .service-stage{height:520px;min-height:520px}
 html body #expertises .mobile-service-tabs{position:absolute;z-index:20;bottom:16px;left:14px;right:14px;width:auto;display:flex;gap:3px;padding:5px;border-radius:20px;border:1px solid #ffffff70;background:#ffffffbd;box-shadow:0 8px 25px #17394d15,inset 0 1px 0 #fff9;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
 html body #expertises .mobile-service-tabs button{position:relative;isolation:isolate;overflow:hidden;flex:1;min-width:0;min-height:46px;padding:8px 3px;border-radius:15px;background:transparent;color:#34516b;font-size:11px;font-weight:650;line-height:1.3;letter-spacing:-.025em;box-shadow:none;transition:background .3s,color .3s,box-shadow .3s}
 html body #expertises .mobile-service-tabs button[aria-pressed=true]{background:#fff;color:#153b58;box-shadow:0 2px 8px #18395212,inset 0 0 0 1px #fff}
 html body #expertises .mobile-service-tabs button[aria-pressed=true]:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#bad9f0aa calc(var(--playback-progress,0%) - 14%),#d7d1f080 calc(var(--playback-progress,0%) - 5%),transparent var(--playback-progress,0%));pointer-events:none}
 html body #expertises .playback-manual .mobile-service-tabs button:before,html body #expertises[data-active-axis="2"] .mobile-service-tabs button:before{display:none}
 html body #expertises .playback-next [data-next-axis]{display:none!important}
 html body #expertises .service-playback{top:auto!important;bottom:80px!important;left:auto;right:18px;width:32px;height:32px!important;transform:none}
 html body #expertises .playback-next .playback-toggle,html body #expertises[data-active-axis="1"] .playback-next .playback-toggle{position:relative;left:auto;top:auto;right:auto;bottom:auto;transform:none;width:32px;height:32px;min-height:32px;background:#ffffff18}
 html body #expertises .film-marketing .discovery-payoff{bottom:100px;translate:none}
}
@media(max-width:370px){html body #expertises .mobile-service-tabs{left:10px;right:10px}html body #expertises .mobile-service-tabs button{font-size:10px}}/* Mobile countdown: a quiet ink line, not a colored wash. */
@media(max-width:850px){
 html body #expertises .mobile-service-tabs button[aria-pressed=true]:before{
  inset:auto 12px 5px;height:2px;border-radius:999px;z-index:0;
  background:linear-gradient(90deg,#234b7655,#234b76);
  transform:none;clip-path:inset(0 calc(100% - var(--playback-progress,0%)) 0 0 round 999px);
  opacity:.65;
 }
}/* Mobile service navigation: translucent shell and a precise active capsule. */
@media(max-width:850px){
 html body #expertises .mobile-service-tabs{
  padding:6px;gap:4px;bottom:18px;left:14px;right:14px;
  background:rgba(244,249,255,.62);border:1px solid rgba(255,255,255,.75);
  border-radius:22px;box-shadow:inset 0 1px 0 #fff,0 8px 24px #15364a12;
  backdrop-filter:blur(26px) saturate(125%);-webkit-backdrop-filter:blur(26px) saturate(125%);
 }
 html body #expertises .mobile-service-tabs button{
  min-height:48px;border-radius:16px;color:#29485bcc;font-size:11px;
  font-weight:600;letter-spacing:-.02em;transition:color .35s,background .35s,box-shadow .35s;
 }
 html body #expertises .mobile-service-tabs button[aria-pressed=true]{
  background:linear-gradient(160deg,#fff,#f7faff);color:#15354c;
  box-shadow:0 3px 10px #17394d12,inset 0 0 0 1px #fff;font-weight:750;
 }
 html body #expertises .mobile-service-tabs button[aria-pressed=true]:before{
  inset:0;height:auto;border-radius:inherit;opacity:.48;clip-path:none;transform:none;
  padding:1.5px;
  background:conic-gradient(from -90deg,#315c78 var(--playback-progress,0%),transparent 0);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
 }
 html body #expertises .mobile-service-tabs button:focus-visible{outline:2px solid #204b69;outline-offset:2px}
 html body #expertises .mobile-service-tabs button:active{background:#edf4f9}
}
@media(max-width:370px){html body #expertises .mobile-service-tabs button{font-size:10px}}/* Quiet linear countdown within the selected tab. */
@media(max-width:850px){
 html body #expertises .mobile-service-tabs button[aria-pressed=true]:before{
  inset:auto 14px 6px;height:2px;padding:0;border-radius:999px;opacity:.45;
  background:#315c78;-webkit-mask:none;mask:none;-webkit-mask-composite:source-over;mask-composite:add;
  clip-path:inset(0 calc(100% - var(--playback-progress,0%)) 0 0 round 999px);
 }
}/* Return navigation below the film with a restrained segmented control. */
@media(max-width:850px){
 html body #expertises .mobile-service-tabs{position:relative;inset:auto;width:100%;margin-top:-10px;padding:5px;gap:5px;background:#f3f5f8;border:1px solid #e5eaf0;border-radius:19px;box-shadow:inset 0 1px 0 #fff;backdrop-filter:none;-webkit-backdrop-filter:none}
 html body #expertises .mobile-service-tabs button{min-height:48px;border-radius:14px;font-size:11px;font-weight:600;color:#607184;background:transparent}
 html body #expertises .mobile-service-tabs button[aria-pressed=true]{color:#fff;background:#193b58;font-weight:700;box-shadow:0 3px 8px #193b5820,inset 0 1px 0 #ffffff18}
 html body #expertises .mobile-service-tabs button[aria-pressed=true]:before{background:#fff;opacity:.5;bottom:5px}
 html body #expertises.playback-manual .mobile-service-tabs button:before{display:none}
 html body #expertises .service-stage{height:480px;min-height:480px}
 html body #expertises .film-marketing .discovery-payoff{bottom:38px}
 html body #expertises .service-playback{bottom:12px!important;right:14px}
}
@media(max-width:370px){html body #expertises .mobile-service-tabs button{font-size:10px}}/* Typography-led mobile navigation, aligned with the site's white canvas. */
@media(max-width:850px){
 html body #expertises .mobile-service-tabs{padding:0;gap:8px;background:none;border:0;border-radius:0;box-shadow:none;margin-top:-6px}
 html body #expertises .mobile-service-tabs button{border-radius:0;background:none;color:#8795a3;min-height:48px;font-size:11px;font-weight:600;border-bottom:1px solid #e3e9ee;box-shadow:none}
 html body #expertises .mobile-service-tabs button[aria-pressed=true]{background:none;color:#193b58;box-shadow:none;border-bottom-color:#193b5840;font-weight:750}
 html body #expertises .mobile-service-tabs button[aria-pressed=true]:before{inset:auto 0 0;height:2px;background:#193b58;opacity:1;border-radius:2px}
 html body #expertises.playback-manual .mobile-service-tabs button[aria-pressed=true]{border-bottom:2px solid #193b58}
 html body #expertises .mobile-service-tabs button:active{background:none}
}.mobile-countdown{display:none}
@media(max-width:850px){
 html body #expertises .mobile-service-tabs button[aria-pressed=true]:before{display:none}
 html body #expertises .mobile-service-tabs button[aria-pressed=true]{border-bottom:2px solid #193b58}
 html body #expertises .service-playback{right:17px;bottom:12px!important;width:auto;height:36px!important;left:auto}
 html body #expertises .playback-next{display:flex;align-items:center;gap:8px}
 html body #expertises .mobile-countdown{position:relative;display:grid;place-items:center;width:36px;height:36px;color:#fff;font:600 12px/1 Manrope,sans-serif;font-variant-numeric:tabular-nums}
 .mobile-countdown svg{position:absolute;inset:0;width:36px;height:36px;transform:rotate(-90deg);fill:none;stroke-width:1.5}
 .countdown-base{stroke:#ffffff25}.countdown-ring{stroke:#ffffffe6;stroke-dasharray:100;stroke-linecap:round}
 html body #expertises .playback-next .playback-toggle,html body #expertises[data-active-axis="1"] .playback-next .playback-toggle{width:36px;height:36px;min-height:36px;background:transparent;opacity:.8}
 html body #expertises .service-playback.playback-manual{display:none}
}