/* The scene spans the viewport; the unchanged copy and actions stay above it. */
.hero.hero-animated{--hero-field:#1B4B87;position:relative;overflow:hidden;background:var(--hero-field);color:#fff;--couleur-signe:#B9D5EA;isolation:isolate;min-height:0;height:var(--hero-height,630px);padding-top:calc(var(--esp-hero)/2);padding-bottom:0}.hero-animated .hero-grille{position:relative;display:block;z-index:2;pointer-events:none}.hero-animated .hero-grille>div:first-child{max-width:1104px;pointer-events:auto}.hero-animated h1{max-width:1104px;text-wrap:initial;font-size:clamp(2.1rem,4vw,3.375rem)}.hero-title-line,.hero-subtitle-line{display:block;white-space:nowrap}.hero-animated .lede{max-width:820px;text-wrap:initial}.hero-animated .groupe-btn{position:relative;z-index:3}.hero-scene-animation{position:absolute;inset:0;width:100%;margin-bottom:0;display:block;container-type:normal;pointer-events:none}.animation-window{position:absolute;width:100%;height:50vw;left:0;top:calc(610px - 32vw);pointer-events:none}.animation-window iframe{border:0;display:block;width:100%;height:100%;max-width:none}.hero-animated .motion-toggle{position:absolute;left:auto;right:max(8px,env(safe-area-inset-right));bottom:6px;transform:none;z-index:3;padding:5px 11px;border:1px solid #ffffff66;border-radius:22px;background:#ffffff12;color:#fff;font:12px system-ui;cursor:pointer;pointer-events:auto}.motion-toggle span{font-size:10px;margin-left:5px}
@media(max-width:1100px){.hero.hero-animated{min-height:0;height:auto;padding-bottom:0}.hero-animated .hero-grille>div:first-child{max-width:none}.hero-subtitle-line{display:inline;white-space:normal}.hero-scene-animation{position:relative;inset:auto;height:calc(clamp(240px,42vw,350px)*.835897 + 62px);margin-top:12px}.animation-window{width:100%;height:100%;left:0;top:0}}
@media(max-width:760px){.hero-animated h1{font-size:clamp(1.625rem,7vw,2.1rem)}.hero-title-line{white-space:normal}.hero-animated .trace{white-space:normal}.hero-animated .kicker{font-size:clamp(.6rem,2.4vw,.74rem)}}

/* A single solid color carries the whole hero, including its copy and actions. */
.hero-animated h1{color:#fff}.hero-animated .kicker{color:#fff}.hero-animated .kicker::before{background:#fff}.hero-animated .lede{color:#fff}.hero-animated .btn{border-color:#fff;color:#fff;background:var(--hero-field)}.hero-animated .btn:hover{background:#fff;color:#0E2238;border-color:#fff}.hero-animated .btn-primaire{background:#F7F5F0;border-color:#F7F5F0;color:#0E2238}.hero-animated .btn-primaire:hover{background:#fff;border-color:#fff;color:#0E2238}.hero-animated .btn:focus-visible,.hero-animated .motion-toggle:focus-visible{outline:3px solid #fff;outline-offset:5px}.hero-animated .motion-toggle:hover{background:#ffffff26}

.hero-animated .groupe-btn .btn:not(.btn-primaire){background-color:var(--hero-field);isolation:isolate}.hero-animated .groupe-btn .btn:not(.btn-primaire):hover{background:#fff;color:#0E2238}

/* The existing English headline is longer; keep its two desktop lines. */
html[lang="en"] .hero-animated h1{font-size:clamp(1.85rem,3.25vw,2.85rem)}
@media(max-width:1100px){html[lang="en"] .hero-title-line{white-space:normal}}
@media(max-width:760px){html[lang="en"] .hero-animated h1{font-size:clamp(1.625rem,7vw,2.1rem)}}

@media(max-width:580px){html[lang="en"] .section .trace{white-space:normal}}

/* First paint: native scene at 7.8 s. Bubble crop: x=790, 950×960.
   Keep its center (462,482) and the wave center (960,558.32135) aligned. */
.hero-poster{position:absolute;inset:0;opacity:.28;pointer-events:none;transition:opacity .3s ease}
.hero-poster img{position:absolute;max-width:none;height:auto;display:block}
.hero-poster-wave{width:100%;left:0;top:0}
.hero-poster-bubble{width:31.666667%;left:61.1625%;top:var(--poster-bubble-top,2.1625vw)}
.hero-scene-animation iframe{opacity:0;transition:opacity .3s ease}
.hero-scene-animation.scene-ready iframe{opacity:1}
.hero-scene-animation.scene-ready .hero-poster{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
@media(max-width:1100px){
  .hero-poster{--poster-bubble-width:clamp(240px,42vw,350px)}
  .hero-poster-bubble{width:calc(var(--poster-bubble-width)*1.217948718);left:calc(50% - var(--poster-bubble-width)*.592307692);top:calc(100% - 38px - var(--poster-bubble-width)*1.035897436)}
  .hero-poster-wave{top:calc(100% - 38px - var(--poster-bubble-width)*.417948718 - 29.079237vw)}
}
@media(prefers-reduced-motion:reduce){.hero-poster,.hero-scene-animation iframe{transition:none}.hero-scene-animation.scene-ready .hero-poster{transition:none}}

/* Both faces are long pages: reserve the scrollbar before head layout runs. */
html{overflow-y:scroll}
/* The control keeps its dimensions while waiting, playing, and paused. */
.hero-animated .motion-toggle{height:28px;min-width:68px;white-space:nowrap;box-sizing:border-box}
.hero-scene-animation:not(.scene-ready) .motion-toggle{visibility:hidden;pointer-events:none}

/* Give the copy a little more air between kicker, title, lede, and actions. */
.hero-animated .kicker{margin-bottom:2rem}.hero-animated h1{margin-bottom:2.1rem}.hero-animated .lede{margin-bottom:3.1rem}