/* ============================================================================
   ABiL — home page styles ported from AbilHomeV3.tsx (SHELL_CSS 521-560 and
   1141-1600). The .v3-* class names are kept on purpose: a rule here maps one
   to one onto a rule in the React source when the two are compared.
   Colour literals are replaced by the tokens from tokens.css.
   ============================================================================ */

/* ---------- preloader ---------- */
.v3-pre{position:fixed;inset:0;z-index:2100;background:var(--ab-alpin);color:var(--ab-noir);margin:0;padding:2vw;
  display:flex;flex-direction:row;justify-content:center;align-items:center;gap:14px;
  font-family:"mundial","Figtree","Helvetica Neue",sans-serif;
  clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.645,.045,.355,1)}
.v3-pre.out{clip-path:inset(0 0 100% 0)}
.v3-pre.done{display:none}
.v3-pre img{display:block;height:19.4px;width:auto;margin:0}
.v3-pre-logo{display:flex;align-items:baseline;gap:2px;font-size:8px;line-height:1}
.v3-pre-foot{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1;
  text-transform:uppercase;letter-spacing:-.03em}
.v3-pre-bar{display:block;width:64px;height:1px;background:var(--ab-leman);overflow:hidden}
.v3-pre-bar i{display:block;height:100%;width:100%;background:var(--ab-noir);transform-origin:left center;
  transition:transform .07s linear;transform:scaleX(0)}

/* ---------- page transition ---------- */
.v3-trans{position:fixed;inset:0;z-index:2000;background:var(--ab-noir);color:var(--ab-alpin);margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  clip-path:inset(100% 0 0 0);transition:none}
.v3-trans.in{clip-path:inset(0 0 0 0);transition:clip-path .8s cubic-bezier(.24,.36,0,1)}
.v3-trans.out{clip-path:inset(0 0 110% 0);transform:translateY(-10%);
  transition:clip-path 1s cubic-bezier(.24,.36,0,1),transform 1s cubic-bezier(.24,.36,0,1)}
.v3-trans-mask{display:block;overflow:hidden;padding:.32em .06em .44em;margin:-.32em -.06em -.44em}
.v3-trans-mask img{display:block;height:56px;width:auto;transform:translateY(140%);
  transition:transform .8s cubic-bezier(.24,.36,0,1)}
.v3-trans.in .v3-trans-mask img,.v3-trans.out .v3-trans-mask img{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){ .v3-pre,.v3-trans{display:none} }

/* ---------- base ---------- */
body{position:relative;background:var(--ab-tela);color:var(--ab-noir);
  font-family:"mundial","Figtree","Helvetica Neue",sans-serif;
  font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
body *{box-sizing:border-box;margin:0;padding:0;box-shadow:none !important}
body ::selection{background:var(--ab-violette);color:var(--ab-noir)}
body img{display:block;max-width:100%}
body button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
body a{color:inherit;text-decoration:none}
body address{font-style:normal}

/* Type scale. At a 1440px base: XL 7vw = 101px, L 4.86vw = 70px,
   M 2.8vw = 40px, S 1.5vw = 22px, XS 14, XXS 12, p 16. */
.v3-xl,.v3-l,.v3-m,.v3-s,.v3-xs,.v3-xxs{text-transform:uppercase;letter-spacing:-.03em;margin-left:-.03em;line-height:1}
.v3-xl{font-size:7vw;line-height:.8;font-weight:300}
.v3-l{font-size:4.86vw;line-height:.8;font-weight:300}
.v3-m{font-size:2.8vw;line-height:.9;font-weight:300}
.v3-s{font-size:1.5vw;line-height:.9;font-weight:400}
.v3-xs{font-size:14px;line-height:1.2;font-weight:400}
.v3-xxs{font-size:12px;line-height:1.17;font-weight:400}
.v3-p{font-size:1.111vw;line-height:1.2;font-weight:300;font-family:"mundial","Figtree","Helvetica Neue",sans-serif;letter-spacing:-.01em}
body p{margin-bottom:8px}
.v3-it{font-style:italic}
.v3-grey{color:var(--ab-rhone)}
.v3-margin{margin-left:2vw;margin-right:2vw}
.v3-main{padding-top:55px;padding-bottom:2vw}

/* ---------- masks and entrances ---------- */
.v3-wm,.v3-rm{display:inline-block;overflow:hidden;vertical-align:top;padding:.32em .06em .44em;margin:-.32em -.06em -.44em}
/* Clipped only during the entrance, then released by the unclip class from
   main.js; otherwise diacritics and descenders get cut off. */
.unclip .v3-wm,.unclip .v3-rm,.unclip [class*="-head"],.unclip [class*="-title"]{overflow:visible}
.v3-lnk,.v3-nav a,.v3-nav button{white-space:nowrap}
.v3-w,.v3-rise{display:inline-block;transform:translateY(165%);transition:transform 1.5s cubic-bezier(.075,.82,.165,1);transition-delay:var(--d,0s);will-change:transform}
.v3-io.in .v3-w,.v3-io.in .v3-rise,.v3-ready .v3-nav .v3-rise{transform:translateY(0)}
/* Safety net: if the observer never fires — printing, a background tab, a search
   engine — the content still has to be visible. */
@media print{.v3-w,.v3-rise,.v3-imgfx,.v3-imgup{transform:none !important;opacity:1 !important}
  .v3-fillw{width:100% !important}}
.v3-imgfx{opacity:0;transform:scale(1.3) rotate(8deg);transition:opacity 1s cubic-bezier(.075,0,.165,0),transform 1.5s cubic-bezier(.075,.82,.165,1);transition-delay:var(--d,0s);will-change:transform}
.v3-io.in .v3-imgfx{opacity:1;transform:scale(1) rotate(0deg)}
.v3-imgup{transform:translateY(120%);transition:transform 2.4s cubic-bezier(.4,.4,.1,1);transition-delay:var(--d,0s);will-change:transform}
.v3-io.in .v3-imgup{transform:translateY(0)}
.v3-fillw{width:0;height:1px;background:var(--ab-noir);transition:width 1s cubic-bezier(.3,.3,0,1);transition-delay:var(--d,0s)}
.v3-io.in .v3-fillw{width:100%}
.v3-fillw.fill-on,.v3-io.in .v3-fillw.fill-on{width:100%;transition:none}
.v3-fadeup{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.075,0,.165,0),transform 1.5s cubic-bezier(.075,.82,.165,1);transition-delay:var(--d,0s)}
.v3-io.in .v3-fadeup{opacity:1;transform:translateY(0)}

.v3-lnk{position:relative;padding-bottom:2px;text-transform:uppercase;cursor:pointer;display:inline-block}
.v3-lnk:after{content:"";position:absolute;width:100%;height:1px;bottom:0;left:0;transform:scaleX(0);transform-origin:bottom right;transition:transform .3s;background:var(--ab-noir)}
.v3-lnk:hover:after,.v3-lnk.on:after{transform:scaleX(1);transform-origin:bottom left}

/* ---------- navigation (56px, fixed) ----------
   After 2px of scrolling the bar stays visible while the links roll upwards and
   "Menu +" replaces them. The bar leaves the screen through translateY(-370px)
   only once the footer reaches 80 percent. */
.v3-nav{position:fixed;top:0;left:0;right:0;height:56px;padding:0 2vw;z-index:3010;color:var(--ab-noir);background:transparent;
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;column-gap:2vw;align-items:center;
  transition:transform 1s cubic-bezier(.215,.61,.355,1),background .45s ease}
.v3-nav.hide{transform:translateY(-370px)}
.v3-nav.menuaberto{opacity:0;pointer-events:none}
.v3-nav.rolled{background:var(--ab-citron);box-shadow:none}
/* "Menu +" clicked: the links come back while the reader is partway down the
   page. On the home page the bar is transparent by default, because it sits
   over the hero, so in this state it has to be painted or the menu lands on top
   of whatever is behind it. The inner pages are white here already. */
.v3-nav.peek{background:var(--ab-alpin)}
.v3-logo-wrap{display:block;overflow:hidden;line-height:0}
.v3-logo{display:flex;align-items:baseline;gap:2px}
.v3-nav .v3-logo{display:inline-flex;align-items:center;gap:2px;flex-wrap:nowrap;white-space:nowrap;width:auto}
.v3-logo img{height:19.4px;width:auto}
.v3-foot-logo{display:block;height:19.4px;width:auto}
.v3-foot-home{display:block;background:none;border:0;padding:0;margin:0;cursor:pointer;line-height:0}
.v3-logo sup{font-size:8px;transform:translateY(-4px)}
.v3-nav-dash{display:inline-block;overflow:hidden;width:14px;margin:0 .35em;text-align:center;white-space:nowrap;
  opacity:0;transition:opacity .6s cubic-bezier(.4,.4,.1,1)}
.v3-nav.named .v3-nav-dash{opacity:1}
.v3-nav-name{display:inline-block;overflow:hidden;vertical-align:top;padding:.32em .06em .44em;margin:-.32em -.06em -.44em}
.v3-nav-name span{display:inline-block;transform:translateY(260%);transition:transform .8s cubic-bezier(.075,.82,.165,1)}
.v3-nav.named .v3-nav-name span{transform:translateY(0)}
.v3-tagline{display:flex;flex-direction:column;gap:2px}
.v3-langs{display:flex;gap:10px;justify-self:start}
.v3-navlinks{position:relative;justify-self:end;display:flex;align-items:baseline;
  overflow:hidden;padding:.32em .06em .44em;margin:-.32em -.06em -.44em}
.v3-links{display:flex;gap:16px;align-items:baseline}
.v3-links>*{transition:transform .92s cubic-bezier(.075,.82,.165,1)}
.v3-links>*:nth-child(1){transition-delay:.24s}
.v3-links>*:nth-child(2){transition-delay:.18s}
.v3-links>*:nth-child(3){transition-delay:.12s}
.v3-links>*:nth-child(4){transition-delay:.06s}
.v3-links>*:nth-child(5){transition-delay:0s}
.v3-nav.rolled .v3-links{pointer-events:none}
.v3-nav.rolled .v3-links>*{transform:translateY(-160%)}
.v3-nav.rolled .v3-links>*:nth-child(1){transition-delay:0s}
.v3-nav.rolled .v3-links>*:nth-child(2){transition-delay:.06s}
.v3-nav.rolled .v3-links>*:nth-child(3){transition-delay:.12s}
.v3-nav.rolled .v3-links>*:nth-child(4){transition-delay:.18s}
.v3-nav.rolled .v3-links>*:nth-child(5){transition-delay:.24s}
.v3-navmenu{position:absolute;right:.06em;top:.32em;transform:translateY(160%);
  transition:transform .92s cubic-bezier(.075,.82,.165,1);transition-delay:.12s;text-transform:uppercase}
.v3-nav.rolled .v3-navmenu{transform:translateY(0)}
.v3-count{display:none;font-size:9px;vertical-align:super;margin-left:3px;color:var(--ab-rhone)}

/* ---------- overlay menu ---------- */
/* The six links are sized from the viewport height. On a short window they no
   longer fit above the tagline and the two run into each other -- the same
   happens on the React site, and the WordPress toolbar brings it on 32px
   sooner by taking that much off the overlay. --ab-ovfit is the largest a link
   can be and still leave room for what sits around it: the top row, the
   tagline, the language codes and the padding, measured at 173px plus the 4vw
   margin under the tagline. It only ever wins when the window is too short. */
.v3-overlay{--ab-ovh:100vh;--ab-ovsub:0px;--ab-ovfit:calc((var(--ab-ovh) - 173px - 4vw - var(--ab-ovsub)) / 6)}
body.admin-bar .v3-overlay{--ab-ovh:calc(100vh - var(--ab-adminbar))}
.v3-overlay{position:fixed;inset:0;z-index:60;background:var(--ab-alpin);display:flex;flex-direction:column;justify-content:space-between;padding:16px 4vw 3vh;overflow:hidden;
  transform:translateY(-100%);visibility:hidden;pointer-events:none;
  transition:transform 1s cubic-bezier(.165,.84,.44,1),visibility 0s linear 1s}
.v3-overlay.open{transform:translateY(0);visibility:visible;pointer-events:auto;
  transition:transform 1s cubic-bezier(.165,.84,.44,1),visibility 0s linear 0s}
.v3-overlay-top{display:flex;justify-content:space-between;align-items:center;height:40px}
/* The list scrolls when it has to. justify-content:center cannot be used for
   that -- centred overflow spills past the top edge, out of the scroller's
   reach -- so the group is centred by auto margins on the first and last row
   instead, which collapse to nothing the moment there is no room to spare. */
.v3-overlay-links{display:flex;flex-direction:column;gap:min(1vw,1.2vh);flex:1 1 auto;min-height:0;
  justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.v3-overlay-links::-webkit-scrollbar{display:none}
/* Nothing here may shrink: every link is a mask with overflow:hidden, so a
   row squeezed by the column would cut the word inside it. */
.v3-overlay-links>*{flex:0 0 auto}
/* The two spacers that do the centring. They are pseudo-elements rather than
   auto margins on the first and last row because the rows already carry a
   margin shorthand at the same weight, which would win on source order. */
.v3-overlay-links::before,.v3-overlay-links::after{content:"";flex:0 0 auto;margin:auto}
/* The floor keeps the size usable on a phone held sideways, where the space
   left over is small or, with the second level open, none at all: below it the
   list scrolls rather than shrinking further. Without it --ab-ovfit can turn
   negative there and take the whole declaration down with it. */
.v3-overlay-links .v3-biglink{font-size:max(22px, min(6.6vw, 10.2vh, var(--ab-ovfit)));text-transform:uppercase;letter-spacing:-.03em;font-weight:300;line-height:1;
  display:block;overflow:hidden;padding:.5em .06em .44em;margin:-.5em -.06em -.44em}
.v3-overlay-links .v3-biglink>span{display:inline-block;transform:translateY(120%);
  transition:transform 0s linear 1s}
.v3-overlay.open .v3-biglink>span{transform:translateY(0);
  transition:transform .9s cubic-bezier(.165,.84,.44,1);transition-delay:calc(.12s + var(--i,0) * .05s)}
/* The section being viewed. In the bar and the footer the hairline of .v3-lnk
   is simply held open; a rule under a 9.5vw word would be far too heavy, so the
   overlay marks its entry with a dot instead. */
.v3-overlay-links .v3-biglink.on>span:after{content:"";display:inline-block;vertical-align:middle;
  width:.13em;height:.13em;border-radius:50%;background:currentColor;margin:0 0 .3em .22em}
/* A section that folds out already has a sign next to it; a dot beside the
   sign is one mark too many, so the sign carries the state instead. */
.v3-bigrow.has-sub .v3-biglink.on>span:after{display:none}
/* The close control: a ring with a cross in it, the same pairing as the back
   to top button in the footer. Pointing at it -- or holding it, which is all a
   touch screen offers -- fills the ring and turns the cross a quarter turn. */
.v3-overlay-close{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-right:-4px;flex:0 0 auto;
  color:var(--ab-noir);background:transparent;border:1px solid var(--ab-noir);border-radius:50%;
  transition:background .35s cubic-bezier(.33,1,.68,1),color .35s cubic-bezier(.33,1,.68,1),
    border-color .35s cubic-bezier(.33,1,.68,1)}
/* The mask is exactly one cross tall, so only ever one is in view. */
.v3-close-mask{display:block;width:16px;height:16px;overflow:hidden}
.v3-close-icons{display:block;transition:transform .45s cubic-bezier(.33,1,.68,1)}
.v3-close-icons svg{display:block;width:16px;height:16px}
.v3-overlay-close:hover,.v3-overlay-close:focus-visible,.v3-overlay-close:active{
  background:var(--ab-noir);border-color:var(--ab-noir);color:var(--ab-alpin)}
.v3-overlay-close:hover .v3-close-icons,.v3-overlay-close:focus-visible .v3-close-icons,
.v3-overlay-close:active .v3-close-icons{transform:translateY(-16px)}
@media (prefers-reduced-motion: reduce){
  .v3-overlay-close,.v3-close-icons{transition:none}
}
.v3-overlay-tag{opacity:0;transition:opacity 0s linear 1s}
.v3-overlay.open .v3-overlay-tag{opacity:1;transition:opacity .4s linear;transition-delay:.5s}

/* ---------- hero ---------- */
.v3-hero{padding:6vw 0 4vw;display:grid;grid-template-columns:repeat(8,1fr);column-gap:2vw}
.v3-hero h1{grid-column:1/-1}
.v3-hero-sub{grid-column:1/3;margin-top:3vw;margin-bottom:0;display:flex;flex-direction:column;align-items:flex-start}

/* ---------- project grid with the central line ---------- */
.v3-workgrid{position:relative;margin:0 1vw;min-height:100vh}
.v3-bordv{position:absolute;left:50%;top:0;width:1px;height:0;background:var(--ab-noir);transition:height 6s cubic-bezier(.3,.3,0,1);transition-delay:var(--d,0s)}
.v3-io.in .v3-bordv{height:100%}
.v3-works{position:relative;display:grid;grid-template-columns:1fr 1fr}
.v3-work{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:1vw 1vw 0;cursor:pointer}
.v3-work:nth-child(-n+2){padding-top:0}
.v3-work-visual{position:relative;width:100%;height:34vw;overflow:hidden;display:flex;align-items:center;justify-content:center}
.v3-work-visual img,.v3-work-visual video{width:100%;height:100%;object-fit:cover;transition:transform 1.5s cubic-bezier(.075,.82,.165,1)}
.v3-work:hover .v3-work-visual img,.v3-work:hover .v3-work-visual video{transform:scale(1.045)}
.v3-work-info{display:flex;flex-direction:column;align-items:flex-start;margin-top:1.2vw;margin-bottom:0;width:100%;flex:1}
.v3-work-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.v3-work-dash{margin:0 4px}
.v3-work-title{margin-top:.8vw;font-size:1.48vw;line-height:.9}
.v3-work-line{width:100%;overflow:hidden;display:flex;justify-content:flex-start;margin-top:3vw}
.v3-work:last-child .v3-work-line,.v3-work:nth-last-child(2) .v3-work-line{display:none}
.v3-work:nth-last-child(-n+2) .v3-work-info{margin-bottom:0}
.v3-work:nth-child(even) .v3-work-line{justify-content:flex-end}

/* ---------- about ---------- */
.v3-about{margin-top:12vw;margin-bottom:12vw;display:grid;grid-template-columns:repeat(8,1fr);column-gap:2vw;row-gap:2vw}
.v3-about-h{grid-column:1/-1;overflow:hidden;display:flex;padding:.32em 0 .44em;margin:-.32em 0 -.44em}
.v3-about-sub{grid-column:1/5;width:96%}
.v3-about-inner{grid-column:5/8}
.v3-about-inner .v3-p{margin-bottom:2.4vw}

/* ---------- promo ---------- */
.v3-lrg{margin-top:4vw;margin-bottom:6vw;display:flex;justify-content:center;overflow:hidden}
.v3-lrg-box{position:relative;width:100%;height:45vw;overflow:hidden;background:var(--ab-leman);transform:scaleX(var(--sx,1));transform-origin:center;will-change:transform;backface-visibility:hidden}
.v3-lrg-box.v3-promo{height:auto;aspect-ratio:16/9;background:var(--ab-noir)}
.v3-promo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.v3-promo-scrim{position:absolute;inset:0;background:rgba(0,0,0,.15);pointer-events:none;transition:opacity .5s ease}
.v3-promo.on .v3-promo-scrim{opacity:0}
body button.v3-promo-play{position:absolute;left:50%;top:50%;width:96px;height:96px;
  border-radius:999px;border:3px solid var(--ab-alpin);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  animation:v3PlayPulse 1.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes v3PlayPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
.v3-promo-play:hover{animation-play-state:paused;transform:translate(-50%,-50%) scale(1.12)}
@media (prefers-reduced-motion:reduce){.v3-promo-play{animation:none;transform:translate(-50%,-50%)}}
.v3-promo-play:focus-visible{outline:2px solid var(--ab-alpin);outline-offset:4px}
.v3-promo-play span{display:block;width:0;height:0;margin-left:7px;
  border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:24px solid var(--ab-alpin)}
.v3-lrg-up{position:absolute;inset:0;overflow:hidden;transform:scaleX(var(--inv,1));transform-origin:center;will-change:transform}
.v3-lrg-box img{position:absolute;top:0;left:0;width:100%;height:118%;object-fit:cover;
  transform:translateY(calc(-14% + 14% * var(--p,1)))}

/* ---------- reel ----------
   Grows from 47vw to 100vw while scrolling, on wide screens only. */
.v3-reel{margin-top:4vw;margin-bottom:8vw;display:flex;justify-content:center;overflow:hidden}
.v3-reel-in{position:relative;width:calc(47vw + (100% - 47vw) * var(--p,1));height:56.25vw;background:var(--ab-leman);display:flex;align-items:center;justify-content:center;overflow:hidden}
.v3-reel-in img,.v3-reel-in video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v3-loader{overflow:hidden;height:1px;width:10vw;background:var(--ab-rhone)}
.v3-loader div{height:100%;width:100%;background:var(--ab-noir);animation:v3-load 2s linear 0s infinite forwards}
@keyframes v3-load{0%{transform:translateX(-100%)}50%{transform:translateX(0)}to{transform:translateX(100%)}}
.v3-reel-badge{display:none;position:absolute;left:2vw;bottom:2vw;padding:3px 6px 4px;
  border:1px solid var(--ab-noir);background:var(--ab-noir);color:var(--ab-alpin);text-transform:uppercase}
@media (pointer: coarse){.v3-reel-badge{display:block}}

/* ---------- sectors (22.5vw cards) ---------- */
.v3-clients{margin-top:4vw;margin-bottom:8vw}
.v3-clients-head{margin-left:2vw;overflow:hidden;padding:.32em 0 .44em;margin-top:-.32em;margin-bottom:-.44em}
.v3-cards{display:flex;gap:2vw;padding:4vw 2vw;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.v3-cards::-webkit-scrollbar{display:none}
.v3-card{flex:0 0 22.5vw;display:flex;flex-direction:column;justify-content:space-between;scroll-snap-align:start}
.v3-card-logo{width:64%;margin-bottom:1vw;font-weight:300}
.v3-card .v3-p{margin-bottom:2vw;color:var(--ab-noir)}

/* ---------- métiers (accordion) ---------- */
.v3-list{margin:2vw}
.v3-row-head{width:100%;padding:1.4vw 0;display:grid;grid-template-columns:repeat(8,1fr);column-gap:2vw;align-items:center}
.v3-row-name{grid-column:1/5;justify-self:start}
.v3-row-tags{grid-column:5/8;justify-self:start}
.v3-row-toggle{grid-column:8/9;justify-self:end;white-space:nowrap}
.v3-acc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s cubic-bezier(.165,.84,.44,1),opacity .6s cubic-bezier(.165,.84,.44,1)}
.v3-acc.open{grid-template-rows:1fr;opacity:1}
.v3-acc>div{overflow:hidden;min-height:0;display:grid;grid-template-columns:repeat(8,1fr);column-gap:2vw}
.v3-acc .v3-p{grid-column:5/8;padding:0 0 1.4vw}
/* The way through to the service itself, under its description. */
.v3-acc-cta{grid-column:5/8;padding:0 0 2vw}
.v3-rowline{position:relative;height:1px;width:100%;overflow:hidden;background:var(--ab-leman)}
/* On hover the hairline sweeps in from the left over 1.4s and exits to the right
   more slowly, over 1.6s. It stays put while the row is open. */
.v3-rowline i{position:absolute;inset:0;background:var(--ab-noir);transform:scaleX(0);transform-origin:right center;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.v3-rowwrap:hover .v3-rowline i{transform:scaleX(1);transform-origin:left center;transition-duration:1.4s}
.v3-rowline.on i{transform:scaleX(1);transform-origin:left center;transition:transform .6s cubic-bezier(.165,.84,.44,1)}

/* ---------- image strip ---------- */
.v3-stripwrap{margin-top:8vw;margin-bottom:0}
.v3-strip{display:flex;gap:2vw;height:24vw;overflow-x:auto;padding:0 2vw;scrollbar-width:none;cursor:grab}
.v3-strip.drag{cursor:grabbing}
.v3-strip::-webkit-scrollbar{display:none}
.v3-strip img{height:100%;width:auto;flex:0 0 auto;object-fit:cover;pointer-events:none;user-select:none}

/* ---------- repères ---------- */
.v3-rep{margin-top:8vw;margin-bottom:8vw;display:grid;grid-template-columns:repeat(8,1fr);column-gap:2vw;row-gap:3vw}
.v3-rep-title{grid-column:1/5;grid-row:1;max-width:34.75vw;overflow:hidden;padding:.32em 0 .44em;margin:-.32em 0 -.44em}
.v3-rep-desc{grid-column:1/5;grid-row:2}
.v3-rep-wrap{grid-column:5/9;grid-row:2}
.v3-rep-block{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2.25vw;
  border-bottom:1px solid var(--ab-leman);padding:2.25vw 0}
.v3-rep-block:first-child{padding-top:0}
.v3-rep-block:last-child{border-bottom:0}
.v3-rep-block h3{font-weight:400}
.v3-rep-block li{list-style:none;margin-bottom:.2vw}

/* ---------- journal ---------- */
.v3-news{margin-top:6vw}
.v3-news-head{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2vw;margin-bottom:3.2vw;align-items:end}
.v3-news-head .v3-btnwrap{justify-self:end}
.v3-news-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2vw;border-top:1px solid var(--ab-leman)}
.v3-article{display:grid;grid-template-columns:1fr 1fr;column-gap:2vw;padding:2vw 0;cursor:pointer;position:relative}
.v3-article-img{position:relative;overflow:hidden}
.v3-article-img img{width:100%;height:16vw;object-fit:cover;transition:transform 1.5s cubic-bezier(.075,.82,.165,1)}
.v3-article:hover .v3-article-img img{transform:scale(1.045)}
.v3-article-info{display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.v3-article-meta{display:flex;gap:.3vw;align-items:baseline}
.v3-article-title{margin-top:.4vw}

/* ---------- full viewport footer ---------- */
.v3-footer{position:relative;min-height:100vh;margin-top:0;background:var(--ab-violette);color:var(--ab-noir);display:flex;flex-direction:column;overflow:hidden}
.v3-footer-nav{height:56px;padding:0 2vw;display:grid;grid-template-columns:1fr 1fr 2fr;align-items:center;z-index: 10;}
.v3-footer-menu{display:flex;justify-content:space-between;grid-column:3/4}
.v3-footer-in{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 2vw;
  overflow:hidden;transform:translateY(calc(-80px + 80px * var(--fp,1)))}
.v3-footer-grid{display:grid;grid-template-columns:repeat(8,1fr);column-gap:2vw;row-gap:3vw;align-items:start;padding-bottom:4vw}
.v3-next{grid-column:1/5;grid-row:1;display:flex;flex-direction:column;gap:.5vw;margin-bottom:8vw}
.v3-next-row{display:flex;align-items:flex-start;cursor:pointer}
.v3-next-count{margin-top:.45vw;margin-left:.6vw}
.v3-contact{grid-column:1/3;grid-row:2/4}
.v3-contact-h{margin-bottom:2vw;width:76%}
.v3-cols{display:contents}
.v3-col{width:22.5vw}
/* Five columns now that the addresses are split three ways: the two rows of
   contacts first, the opening hours on their own underneath. */
.v3-col:nth-child(1){grid-column:5/7;grid-row:2}
.v3-col:nth-child(2){grid-column:7/9;grid-row:2}
.v3-col:nth-child(3){grid-column:5/7;grid-row:3}
.v3-col:nth-child(4){grid-column:7/9;grid-row:3}
.v3-col:nth-child(5){grid-column:5/7;grid-row:4}
.v3-colh{color:#ffffff}
.v3-nextlbl{color:#ffffff;margin-bottom:1vw}
.v3-col li{list-style:none;margin-bottom:6px}
.v3-footer-base{padding:2vw;display:flex;justify-content:space-between;align-items:center;gap:2vw;border-top:1px solid var(--ab-leman)}
.v3-socials{display:flex;align-items:center;gap:1.4vw}
/* Icons, not the "Instagram / LinkedIn / Facebook" labels of the source: sized off
   the .v3-xs context they sit in so they track the same fluid type scale, resting
   at the footer's dim grey and darkening with a small confident grow on hover --
   the same scale(1.12) the promo play button uses elsewhere in this file. */
.v3-social{display:flex;color:var(--ab-noir);transition:color .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1)}
.v3-social svg{width:1.5em;height:1.5em;display:block}
.v3-social:hover{color:var(--ab-citron);transform:scale(1.12)}
.v3-legalinks{display:flex;gap:1.2vw;flex-wrap:wrap}

/* ---------- cursor label ---------- */
.v3-cursor{pointer-events:none;position:fixed;top:0;left:0;z-index:1000;padding:3px 6px 4px;
  border:1px solid var(--ab-noir);background:var(--ab-noir);color:var(--ab-alpin);font-size:14px;text-transform:uppercase;
  white-space:nowrap;opacity:0;transition:opacity .3s linear}

/* The violet ring that stands in for the system cursor. Port of CursorAbil.tsx:
   a filled dot by default, growing into a hollow ring with a thin border over
   anything clickable. Its colour switches to near-black wherever the violet
   would not read against the background -- see abilCursorColour() in main.js. */
.v3-dot{position:fixed;top:0;left:0;z-index:2147483647;pointer-events:none;
  width:22px;height:22px;opacity:0;display:flex;align-items:center;justify-content:center;
  transition:width .5s ease-out,height .5s ease-out,opacity .2s linear;
  --v3-dot-color:var(--ab-violette)}
.v3-dot.on{opacity:1}
.v3-dot.clickable{width:44px;height:44px}
.v3-dot span{display:block;border-radius:50%;width:60%;height:60%;background:var(--v3-dot-color);border:none;
  transition:width .3s ease,height .3s ease,background .25s ease,border-color .25s ease}
.v3-dot.clickable span{width:100%;height:100%;background:transparent;border:1.5px solid var(--v3-dot-color)}

/* Higher specificity than any .v3-lnk / button cursor:pointer rule, on purpose:
   this has to win regardless of where it sits in the file. Scoped to the class
   the ring's own JS toggles once the pointer is actually a mouse and has moved,
   which is also when the source turns the native cursor off. */
@media (pointer:fine){
  body.v3-cursor-on,
  body.v3-cursor-on a,
  body.v3-cursor-on button,
  body.v3-cursor-on [role="button"],
  body.v3-cursor-on select,
  body.v3-cursor-on label,
  body.v3-cursor-on input,
  body.v3-cursor-on textarea,
  body.v3-cursor-on [contenteditable],
  body.v3-cursor-on [data-cursor="clickable"],
  body.v3-cursor-on [data-v3hover]{cursor:none}
}


/* ---------- PillBtn ---------- */
.v3-btn{display:inline-block;line-height:14px;user-select:none}
.v3-btn-in{position:relative;display:inline-block}
.v3-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px 26px;border-radius:999px}
.v3-mask-hidden{position:relative;visibility:hidden}
/* The hidden layer gives the box the width of the longer of the two labels. */
.v3-btn-sizer{display:grid;justify-items:start}
.v3-btn-sizer>*{grid-area:1/1}
/* --diff is measured in JS. At rest both layers end with the resting label; on
   hover the citron layer expands to the full width. */
.v3-mask-bottom{background:var(--ab-citron);color:var(--ab-noir);clip-path:inset(1px 1px 1px 1px round 999px);
  right:var(--diff,0px);transition:right .6s cubic-bezier(.4,.4,.1,1)}
.v3-btn:hover .v3-mask-bottom{right:0}
.v3-mask-top{background:var(--ab-noir);color:var(--ab-alpin);right:var(--diff,0px);clip-path:inset(0px 0px 0px 0px round 999px);transition:clip-path .6s cubic-bezier(.4,.4,.1,1)}
.v3-btn:hover .v3-mask-top{clip-path:inset(4px var(--cut,60%) 4px 4px round 999px)}
.v3-btn-t{font-size:12px;line-height:1;white-space:nowrap;text-transform:uppercase;letter-spacing:-.01em;display:block;transform:translateY(-.085em)}

.v3-hidden-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* The skip link stays invisible until focused: without it, reaching main takes
   11 tab stops on every visit. */
.v3-skip{position:absolute;left:-9999px;top:0}
.v3-skip:focus{position:fixed;left:2vw;top:8px;z-index:70;background:var(--ab-noir);color:var(--ab-alpin);padding:8px 12px}
.v3-main:focus{outline:none}
:focus-visible{outline:2px solid var(--ab-citron);outline-offset:2px}
:focus:not(:focus-visible){outline:none}

/* Animated logo in the header (port of AbilLogoLoop). */
.abil-loop-wrap{position:relative;display:inline-block;line-height:0;margin-left:.316vw;margin-bottom:4.88px}
.abil-loop-gif{height:26.77px;width:auto;display:block;transition:opacity .2s linear}
.abil-loop-still{position:absolute;left:0;top:0;height:100%;width:100%;display:block;opacity:0;pointer-events:none;transition:opacity .2s linear}
.abil-loop-wrap.stilled .abil-loop-gif{opacity:0}
.abil-loop-wrap.stilled .abil-loop-still{opacity:1}

/* ============================ responsive ============================ */
@media (max-width: 768px){
  .v3-xl{font-size:11vw;line-height:.9}
  .v3-l{font-size:9.5vw}
  .v3-m{font-size:6.9vw;line-height:1.1}
  .v3-s{font-size:4.4vw;line-height:1}
  .v3-p{font-size:16px}
  .v3-margin{margin-left:4vw;margin-right:4vw}
  .v3-nav{padding:0 4vw}
  .v3-tagline,.v3-nav-dash,.v3-nav-name{display:none}
  .v3-navlinks{font-size:12px}
  .v3-links{gap:10px}
  .v3-langs{gap:6px}
  .v3-lrg-box{height:64vw;transform:none}
  .v3-reel-in{width:100%}
  .v3-hero{padding:24vw 0 16vw}
  .v3-hero-sub{grid-column:1/-1}
  .v3-workgrid{margin:0 4vw}
  .v3-works{grid-template-columns:1fr;row-gap:3vw;padding-top:3vw}
  .v3-bordv{display:none}
  .v3-work{padding:0}
  .v3-work-visual{height:64vw}
  .v3-about{margin-top:24vw;margin-bottom:24vw;row-gap:4vw}
  .v3-about-sub{grid-column:1/-1;width:100%}
  .v3-about-inner{grid-column:1/-1}
  .v3-card{flex:0 0 80vw}
  .v3-cards{padding:16vw 4vw 12vw}
  .v3-row-head{padding:3.4vw 0;grid-template-columns:1fr auto;column-gap:4vw}
  .v3-row-name{grid-column:auto}
  .v3-row-tags{display:none}
  .v3-row-toggle{grid-column:auto}
  .v3-acc>div{display:block}
  .v3-acc .v3-p{width:100%}
  .v3-acc-cta{padding:0 0 5vw}
  .v3-strip{height:44vw;padding:0 4vw;gap:4vw}
  .v3-rep{margin-top:20vw;margin-bottom:20vw}
  .v3-rep-title{grid-column:1/-1;max-width:none}
  .v3-rep-desc{grid-column:1/-1;grid-row:auto}
  .v3-rep-wrap{grid-column:1/-1;grid-row:auto}
  .v3-rep-block{grid-template-columns:1fr;row-gap:2vw;padding:6vw 0}
  .v3-news{margin-top:24vw}
  .v3-news-head,.v3-news-grid{grid-template-columns:1fr}
  .v3-news-head{row-gap:4vw}
  .v3-news-head .v3-btnwrap{justify-self:start}
  .v3-article{grid-template-columns:1fr;row-gap:6vw;padding:8vw 0}
  .v3-article-img img{height:56vw}
  .v3-footer-nav{grid-template-columns:1fr;padding:0 4vw}
  .v3-footer-menu{display:none}
  .v3-footer{min-height:auto}
  .v3-footer-in{padding:18vw 4vw 20vw;transform:none;justify-content:flex-start}
  .v3-reel{margin-top:20vw;margin-bottom:20vw}
  .v3-trans-mask img{height:10vw}
  .v3-pre{padding:4vw}
  .v3-footer-grid{grid-template-columns:1fr;padding-bottom:0}
  .v3-next{grid-column:auto;grid-row:auto;margin-bottom:6vw}
  .v3-contact{grid-column:auto;grid-row:auto}
  .v3-contact-h{width:100%}
  .v3-cols{display:grid;grid-template-columns:1fr 1fr;grid-column:auto;column-gap:2vw;row-gap:2vw}
  .v3-cols .v3-col{width:auto;grid-column:auto;grid-row:auto}
  .v3-footer-base{padding:4vw;flex-wrap:wrap}
  .v3-socials{gap:5vw}
  .v3-social svg{width:22px;height:22px}
}

@media (max-width: 480px){
  .v3-nav{grid-template-columns:auto 1fr auto;column-gap:3vw}
  .v3-logo{grid-column:1;flex:0 0 auto;min-width:0}
  .v3-logo img{height:17px;width:auto;max-width:none}
  .v3-langs{grid-column:2;justify-self:center}
  .v3-navlinks{grid-column:3;justify-self:end}
  .v3-langs,.v3-links{display:none}
  .v3-navlinks{overflow:visible}
  .v3-navmenu{position:static;transform:none !important;transition:none}
  .v3-overlay-links .v3-biglink{font-size:max(22px, min(9.6vw, 9.6vh, var(--ab-ovfit)))}
  /* The count rides on a word some 45px tall. vertical-align:super lifts it by
     a third of that, clear out of the mask the links rise through, so it is
     hung from the top of the line box instead and sized against the word. */
  .v3-overlay .v3-count{display:inline-block;font-size:.22em;line-height:1;
    vertical-align:top;margin:.45em 0 0 .3em}
}

/* A phone held sideways. The list is scrollable by now, but a shorter second
   level buys the section names back some of the room first. */
@media (max-height: 480px){
  .v3-bigsublnk{font-size:14px}
  .v3-overlay-tag .v3-tagline{margin-bottom:2vw !important}
}

@media (min-width: 1281px){ .v3-links{width:36vw;justify-content:space-between;gap:0} }
@media (min-width: 1441px){ .v3-xxs{font-size:.9vw} .v3-xs{font-size:1vw} }
@media (min-width: 1921px){ .v3-xxs{font-size:.6vw} .v3-xs{font-size:.7vw} .v3-s{font-size:1.4vw} .v3-p{font-size:.9vw} }

/* Reduced motion: everything stays visible and nothing animates. */
@media (prefers-reduced-motion: reduce){
  body *{transition-duration:.01s !important;animation:none !important}
  .v3-w,.v3-rise,.v3-imgfx,.v3-fadeup,.v3-imgup{transform:none !important;opacity:1 !important}
  .v3-fillw{width:100% !important}
  .v3-bordv{height:100% !important}
  .v3-loader{display:none}
  /* The navigation states (rolled / named / menu) remain, because they are
     behaviour rather than decoration. They simply become instantaneous. */
  .v3-lrg-box{transform:none}
  .v3-lrg-box img{transform:none !important}
  .v3-reel-in{width:100%}
  .v3-footer-in{transform:none !important}
}

/* ---------- header between the phone and the desktop layouts ----------
   The bar gives each of its four parts an equal quarter, which the menu cannot
   live in: measured, the five items start running over the language switcher
   just under 1024px in French and around 1140px in German, where the words are
   longer. Below 480px the layout already changes; between the two there was no
   plan at all.

   Two steps. First the tagline goes -- it is decorative, and its column is
   exactly what the menu is short of, which keeps the items readable into the
   900s. When even that is not enough they give way to the "Menu +" button the
   design already uses once the page has scrolled. The 940px floor is measured,
   not guessed: the tightest case on the site -- the German menu beside a long
   project title in the bar -- still has room there and runs out at about 860.

   The lower bound of 481px keeps these rules clear of the phone layout, which
   is written further up the file and would otherwise be overridden by them. */
@media (min-width:481px) and (max-width:1200px){
  .v3-nav{grid-template-columns:auto 1fr auto;column-gap:3vw}
  .v3-tagline{display:none}
  .v3-logo{grid-column:1;min-width:0}
  .v3-nav-name{max-width:22vw;text-overflow:ellipsis;white-space:nowrap}
  .v3-langs{grid-column:2;justify-self:center}
  .v3-navlinks{grid-column:3;justify-self:end}
}

@media (min-width:481px) and (max-width:940px){
  .v3-links{display:none}
  .v3-navlinks{overflow:visible}
  .v3-navmenu{position:static;transform:none !important;transition:none}
}

/* WordPress pins its toolbar over the top of the window and compensates with a
   margin on <html>. A fixed element ignores that margin, so the toolbar ended
   up covering the site navigation. Everything the theme pins to the top moves
   down by the toolbar's own height instead.

   Only where the toolbar is really fixed: below 600px WordPress makes it
   absolute so it scrolls away with the page, and an offset there would leave a
   band of empty space above the navigation for the rest of the visit. */
body.admin-bar{--ab-adminbar:0px}
@media screen and (min-width:601px){ body.admin-bar{--ab-adminbar:46px} }
@media screen and (min-width:783px){ body.admin-bar{--ab-adminbar:32px} }

body.admin-bar .v3-nav{top:var(--ab-adminbar)}
body.admin-bar .v3-overlay{top:var(--ab-adminbar)}
body.admin-bar .v3-skip:focus{top:calc(8px + var(--ab-adminbar))}
body.admin-bar .v3d-lb{top:calc(56px + var(--ab-adminbar))}

/* ---------- header dropdown ----------
   The panel is a child of the bar, not of .v3-navlinks: that box hides its
   overflow so the links can roll out of sight when the page scrolls, and a
   panel inside it would be cut at the bar's edge. */
.v3-navitem{position:relative;display:inline-flex;align-items:baseline}
.v3-navsign{display:inline-block;margin-left:.4em;line-height:1;
  color:var(--ab-rhone);transition:color .3s ease}
.v3-navitem:hover .v3-navsign,.v3-navitem.open .v3-navsign{color:var(--ab-noir)}
/* The panel is white on white, so it needs a shadow to sit above the page. It
   is drawn as a gradient below the panel rather than a box-shadow, which the
   reset at the top of this file strips from everything; and since a clip-path
   cuts whatever falls outside the box, the open state clips 60px lower than
   the panel's edge to leave the strip room. */
.v3-subnav{position:absolute;top:100%;left:0;right:0;
  background:var(--ab-alpin);color:var(--ab-noir);border-top:1px solid var(--ab-leman);
  clip-path:inset(0 0 100% 0);pointer-events:none;visibility:hidden;
  transition:clip-path .6s cubic-bezier(.24,.36,0,1),visibility 0s linear .6s}
.v3-subnav::after{content:"";position:absolute;left:0;right:0;top:100%;height:44px;
  background:linear-gradient(rgba(10,10,11,.13),rgba(10,10,11,0));pointer-events:none}
.v3-subnav.open{clip-path:inset(0 0 -44px 0);pointer-events:auto;visibility:visible;
  transition:clip-path .6s cubic-bezier(.24,.36,0,1),visibility 0s linear 0s}
.v3-nav.subopen{background:var(--ab-alpin)}
.v3-subnav-in{display:grid;grid-template-columns:repeat(4,1fr);column-gap:2vw;padding:1.4vw 2vw 2vw}
.v3-sublnk{position:relative;display:block;padding:1vw 0 1.1vw}
.v3-subrm{display:block;overflow:hidden;padding:.32em .06em .44em;margin:-.32em -.06em -.44em;
  transition:transform .5s cubic-bezier(.33,1,.68,1)}
.v3-subrm>span{display:block;transform:translateY(150%);
  transition:transform .8s cubic-bezier(.075,.82,.165,1);transition-delay:var(--d,0s)}
.v3-subnav.open .v3-subrm>span{transform:translateY(0)}
.v3-subt{text-transform:uppercase;letter-spacing:-.03em}
.v3-subnote{color:var(--ab-rhone);margin-top:4px;text-transform:none;letter-spacing:0}
.v3-sublnk:hover .v3-subrm{transform:translateX(.5vw)}
.v3-sublnk i{position:absolute;left:0;right:0;bottom:0;height:1px;overflow:hidden;background:var(--ab-leman)}
.v3-sublnk i::after{content:"";position:absolute;inset:0;background:var(--ab-noir);
  transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.v3-sublnk:hover i::after{transform:scaleX(1)}
@media (max-width:1024px){ .v3-subnav-in{grid-template-columns:repeat(3,1fr)} }
@media (max-width:768px){ .v3-subnav-in{grid-template-columns:repeat(2,1fr);padding:3vw 4vw 4vw} }
@media (max-width:480px){ .v3-subnav{display:none} }
@media (prefers-reduced-motion: reduce){
  .v3-subnav{transition:none}
  .v3-subrm>span{transform:none !important}
}

/* ---------- overlay submenu ----------
   The same list on a phone, folded under its section until it is asked for. */
/* The row is a flex line so the sign sits beside the word it opens rather than
   against the far edge of the screen. */
.v3-bigrow{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.06em}
/* An inline-block, not a flex box: a flex container takes its baseline from
   the item inside it, which centred the sign well below the word it belongs
   to. The padding keeps a thumb-sized target and is pulled back out again so
   it does not push the rows apart. */
.v3-bigtoggle{display:inline-block;align-self:center;font-size:min(5.4vw,24px);line-height:1;
  padding:.5em .45em;margin:-.5em -.3em;color:var(--ab-rhone);
  opacity:0;transition:opacity .4s linear,color .3s ease;transition-delay:.3s}
.v3-bigsub{flex:0 0 100%}
.v3-overlay.open .v3-bigtoggle{opacity:1}
.v3-bigtoggle:hover,.v3-bigrow.open .v3-bigtoggle,.v3-bigrow.on .v3-bigtoggle{color:var(--ab-noir)}
.v3-bigsub{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s cubic-bezier(.165,.84,.44,1),opacity .45s linear}
.v3-bigsub.open{grid-template-rows:1fr;opacity:1}
.v3-bigsub>div{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:.4em;
  padding-left:1.2em}
.v3-bigsub.open>div{padding-top:.7em;padding-bottom:.3em}
.v3-bigsublnk{position:relative;display:block;padding-left:1.1em;color:var(--ab-rhone);
  font-size:min(4.6vw,17px);
  transition:color .3s ease,transform .4s cubic-bezier(.33,1,.68,1)}
.v3-bigsublnk::before{content:"";position:absolute;left:0;top:.55em;width:.6em;height:1px;background:currentColor}
.v3-bigsublnk:hover{color:var(--ab-noir);transform:translateX(.25em)}
@media (prefers-reduced-motion: reduce){
  .v3-bigsub{transition:none}
}

/* ---------- back to top ----------
   A ring with an arrow in it. On hover the ring fills and the arrow leaves
   through the top while a second one rises into its place, the same masked
   movement the rest of the site uses for its labels. */
.v3-totop{display:inline-flex;align-items:center;gap:.8em;color:var(--ab-noir);
  text-transform:uppercase;letter-spacing:-.03em;white-space:nowrap}
.v3-totop-ic{position:relative;display:flex;align-items:center;justify-content:center;
  width:2.6em;height:2.6em;flex:0 0 auto;border:1px solid var(--ab-noir);border-radius:50%;overflow:hidden;
  transition:background .35s cubic-bezier(.33,1,.68,1),border-color .35s cubic-bezier(.33,1,.68,1)}
/* The mask is one arrow tall, so only one is ever in view: the second waits
   below the edge until the pointer calls it up. */
.v3-totop-mask{display:block;width:1.15em;height:1.15em;overflow:hidden}
.v3-totop-arrows{display:flex;flex-direction:column;align-items:center;
  transition:transform .55s cubic-bezier(.16,1,.3,1)}
.v3-totop-ic svg{display:block;width:1.15em;height:1.15em;flex:0 0 auto}
.v3-totop:hover .v3-totop-ic{background:var(--ab-noir);border-color:var(--ab-noir)}
.v3-totop:hover .v3-totop-ic svg{color:var(--ab-citron)}
.v3-totop:hover .v3-totop-arrows{transform:translateY(-50%)}
.v3-totop:focus-visible .v3-totop-ic{outline:2px solid var(--ab-noir);outline-offset:3px}
@media (max-width:768px){ .v3-totop{gap:2vw} }
@media (prefers-reduced-motion: reduce){
  .v3-totop-arrows{transition:none;transform:none !important}
}