/* copiercoller.ch — design tokens from the Figma file copiercoller-01 (variables), then base, layout and blocks. */

@font-face{font-family:Geist;src:url(/assets/fonts/geist-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(/assets/fonts/geist-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono-bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --up-font:Geist,ui-sans-serif,system-ui,sans-serif;
  --up-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --up-bg:#f9f9f7;
  --up-surface:#fff;
  --up-ink:#21221d;
  --up-text:#454545;
  --up-on-accent:#f4f5f1;
  --up-accent:#fe5227;
  --up-warm:#c8c1b6;
  --up-warm-2:#b6ae9e;
  --up-line:#c8c1b6;
  --up-luna:#fede9e;
  --up-candy:#f79ce0;
  --up-opale:#83dbdb;
  --up-lila:#8fa6ff;
  --up-pastel:var(--up-luna);
  --up-s1:16px;
  --up-s15:24px;
  --up-s3:48px;
  --up-s4:64px;
  --up-radius-btn:32px;
  --up-radius-img:40px;
  --up-measure:44rem;
  --up-wide:1408px;
  --up-band:1568px;
  font-size:100%;
}

[data-accent=luna]{--up-pastel:var(--up-luna)}
[data-accent=candy]{--up-pastel:var(--up-candy)}
[data-accent=opale]{--up-pastel:var(--up-opale)}
[data-accent=lila]{--up-pastel:var(--up-lila)}

/* Base */
*{box-sizing:border-box}
body{margin:0;background:var(--up-bg);color:var(--up-text);font:400 17px/26px var(--up-font);letter-spacing:-.25px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{color:var(--up-ink);font-weight:700;letter-spacing:0;margin:0 0 .5em}
h1{font-size:clamp(34px,4vw,48px);line-height:1.25}
h2{font-size:clamp(28px,3vw,38px);line-height:1.32}
h3,h4{font-size:24px;line-height:36px}
h5{font-size:18px;line-height:30px}
p{margin:0 0 16px}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.lead{font-size:clamp(20px,2.2vw,28px);line-height:1.3;letter-spacing:.25px;color:var(--up-ink)}
.big{font-size:22px;line-height:32px;letter-spacing:-.5px}
.mini{font-size:14px;line-height:18px;letter-spacing:.25px}

/* Layout */
.wrap{max-width:calc(var(--up-wide) + 2*var(--up-s1));margin-inline:auto;padding-inline:var(--up-s1)}
.band{max-width:var(--up-band);margin-inline:auto}
.narrow{max-width:var(--up-measure)}
.wrap.narrow,.wrap.prose.narrow{max-width:calc(696px + 2*var(--up-s1))}
section.block{padding-block:var(--up-s3)}

/* Button — an ink pill; the zone styles « Bouton » (btn primary) and « Bouton secondaire » (btn secondary) wear it. */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--up-s15) var(--up-s4);border-radius:var(--up-radius-btn);background:var(--up-ink);color:#fff;font-size:clamp(18px,2vw,24px);line-height:.71em;letter-spacing:0;text-decoration:none;border:0;cursor:pointer}
.btn.secondary{background:transparent;color:var(--up-ink);box-shadow:inset 0 0 0 1px var(--up-ink)}
.btn:hover{opacity:.88}

/* Header — logo left, nav centered (Figma: gap 48, nav/menu 14/24 +0.25), active item underlined 40×2 in accent. */
header.site{background:var(--up-bg);z-index:10;position:sticky;top:0}
header.site .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--up-s15);min-height:112px}
.logo{justify-self:start;text-decoration:none}
.logo img{width:190px;height:auto}
nav.main ul{margin:0;padding:0;list-style:none}
nav.main>ul{display:flex;gap:var(--up-s3)}
nav.main>ul>li{position:relative}
nav.main a{display:inline-block;padding-block:var(--up-s1);font-size:14px;line-height:24px;letter-spacing:.25px;color:var(--up-ink);text-decoration:none}
nav.main>ul>li>a[aria-current=page]::after{content:"";display:block;width:40px;height:2px;margin-top:2px;background:var(--up-accent)}
nav.main a:hover{color:var(--up-accent)}
@media (max-width:900px){
  header.site{position:relative}
  header.site .wrap{grid-template-columns:1fr;justify-items:start;min-height:0;padding-block:var(--up-s1)}
  .logo img{width:140px}
  nav.main>ul{flex-wrap:wrap;gap:0 var(--up-s15)}
  nav.main a{padding-block:6px}
}

/* Footer — black band answering the dark hero: light logo on top, the brand sentence set large on the left, contact on
   the right with the email as the only accent, the legal line under a hairline. Single column under 720px. */
footer.site{background:var(--up-tint);color:var(--up-text);padding-block:clamp(64px,7vw,104px) var(--up-s3)}
footer.site .foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--up-s3) var(--up-s4);align-items:start}
footer.site .foot-logo{display:inline-block;width:190px}
footer.site .foot-contact{font-style:normal;display:flex;flex-direction:column;gap:4px;font-size:22px;line-height:32px;letter-spacing:-.5px;color:var(--up-ink)}
footer.site .foot-contact a[href^=mailto]{color:var(--up-accent)}
footer.site a{text-decoration:none}
footer.site a:hover,footer.site a:focus-visible{text-decoration:underline;text-underline-offset:4px}
footer.site .foot-legal{margin-top:var(--up-s4);padding-top:var(--up-s1);border-top:1px solid var(--up-warm);color:var(--up-text)}
footer.site .foot-legal>div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--up-s1)}
footer.site .mini{margin:0}
@media (max-width:720px){footer.site .foot{grid-template-columns:1fr;gap:var(--up-s3)}footer.site .foot-contact{font-size:17px;line-height:26px;letter-spacing:-.25px}}

/* Hero — the accent and theme are classes on .hero (written from the record's fields at creation); main:has() lifts
   the accent to the whole page so blocks below can use --up-pastel. */
main:has(.hero.accent-luna){--up-pastel:var(--up-luna)}
main:has(.hero.accent-candy){--up-pastel:var(--up-candy)}
main:has(.hero.accent-opale){--up-pastel:var(--up-opale)}
main:has(.hero.accent-lila){--up-pastel:var(--up-lila)}
.hero{padding-block:var(--up-s3) var(--up-s4)}
.hero-media{margin:0 auto;max-width:calc(var(--up-band) + 2*var(--up-s1));padding-inline:var(--up-s1)}
.hero-media img{width:100%;aspect-ratio:1568/526;object-fit:cover}
.hero-media:has(img:not([src]),img[src=""]){display:none}
.hero .crumbs{margin:0 0 var(--up-s3);color:var(--up-ink)}
.hero .crumbs a{text-decoration:none}
.hero .crumbs strong{text-transform:uppercase}
.hero-body{display:grid;grid-template-columns:minmax(0,696px) 1fr;gap:var(--up-s3);align-items:center}
.hero-body>*{grid-column:1}
.hero h1{max-width:489px;margin-bottom:40px}
.hero .lead{color:#2e2e2e;margin:0}
/* Dark hero (Figma 7459:5633 / 7507:6760): a black 1568×526 band, the animation 50.51 % wide in its bottom-right corner,
   crumbs and the 72px mono title in a 696px column 80px into it; the runtime adds .hl and hides the poster on mount. */
.hero-dark{padding-block:10px 0}
.hero-dark:has(.hero-media){position:relative}
.hero-dark .hero-media{position:relative;box-sizing:content-box;max-width:var(--up-band);aspect-ratio:1568/526;background:#000 content-box}
.hero-dark .hero-media img{width:auto;aspect-ratio:auto;margin:0;padding:0}
/* The animation box sits in the band's right half. A scene with a ground (city, desk, hills) sits on the band's bottom
   edge; a scene whose bottom is text or sky (Sites' INTRANET title, the rocket in space) is centred with a 40px margin
   above and below. The box keeps its aspect ratio from the runtime. */
.hero-dark .hero-anim{position:absolute;right:var(--up-s1);bottom:0;width:calc((100% - 2*var(--up-s1))*.5051);background:#000}
main[data-record=sites-plateformes] .hero-dark .hero-anim,main[data-record=performance-digitale] .hero-dark .hero-anim{bottom:auto;top:50%;translate:0 -50%;max-height:calc(100% - 80px)}
.hero-dark .hero-anim>img{display:block;width:100%}
.hero-dark .hero-anim.hl>img{display:none}
.hero-dark .hero-media+.hero-body{position:absolute;top:10px;left:var(--up-s1);right:var(--up-s1);max-width:var(--up-band);margin-inline:auto;padding:73px 80px 0;row-gap:0}
.hero-dark .crumbs{font-size:13px;line-height:13px;letter-spacing:0;margin:0 0 40px;color:var(--up-on-accent)}
.hero-dark .crumbs a{color:var(--up-warm)}
.hero-dark .crumbs strong{color:var(--up-on-accent);font-weight:600}
.hero-dark h1{font-family:var(--up-mono);font-size:72px;line-height:72px;letter-spacing:0;color:var(--up-accent);max-width:696px;margin-bottom:39px}
.hero-dark .lead{display:none}
/* Under a full band the 696px column would reach the animation box: the text keeps a 46 % column and the title scales
   with it so its longest word (« Automatisations », 15 mono glyphs of .6em) fits. */
@media (min-width:1101px) and (max-width:1599px){.hero-dark .hero-media+.hero-body{grid-template-columns:minmax(0,46%) 1fr}.hero-dark h1{font-size:min(72px,calc((100vw - 2*var(--up-s1) - 160px)*.051));line-height:1}}
/* At 1100px and below the dark hero stacks: beside the animation box the title column would get too narrow. */
@media (max-width:1100px){
  .hero-dark .hero-media{aspect-ratio:auto;max-width:none;padding-inline:0}
  .hero-dark h1{font-size:clamp(40px,5.6vw,72px);line-height:1}
  .hero-dark .hero-anim,main[data-record] .hero-dark .hero-anim{position:relative;right:auto;top:auto;bottom:auto;translate:none;max-height:none;width:100%}
  .hero-dark .hero-media+.hero-body{position:static;background:#000;max-width:none;padding:var(--up-s15) var(--up-s1) var(--up-s3);row-gap:0}
}
.hero .ctas{flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;display:flex}
@media (max-width:800px){
  .hero-body{grid-template-columns:1fr;gap:var(--up-s1)}
  .hero h1{margin-bottom:0}
  .hero .crumbs{margin-bottom:var(--up-s1)}
  .hero-dark h1{font-size:36px;line-height:44px}
}

/* Blocks */
.prose{max-width:933px}
.prose.narrow{max-width:696px}
.prose h2{margin-top:1.6em}
.prose :first-child{margin-top:0}
.prose h5,.prose h4{margin-bottom:8px}
/* À propos: the certification badge beside the « Qui est derrière » paragraph, above it on phones. */
.prose:has(>img.badge){display:flow-root}
.prose img.badge{float:right;width:96px;height:auto;margin:0 0 var(--up-s1) var(--up-s15)}
@media (max-width:700px){.prose img.badge{float:none;margin:0 0 var(--up-s1)}}

/* Service page rhythm — a hero image marks a service page: blocks sit 80px apart and a text block hangs on the content
   edge instead of being centred. */
main:has(.hero-media) [data-up-blocks]>section.block{padding-block:40px}
main:has(.hero-media) .wrap.prose:not(.narrow){max-width:calc(var(--up-wide) + 2*var(--up-s1))}
main:has(.hero-media) .prose>:last-child{margin-bottom:0}
main:has(.hero-media) .prose .lead{color:var(--up-text);margin-bottom:25px}
main:has(.hero-media) .prose.narrow h2{margin-bottom:4.5px}
/* Dark service page (Figma 7425:2174): the incise rides in the background-coloured tab (776×120 on a full band, flush
   with the band's bottom-left, the accent square 42px down; drawn 1px taller to cover the band's anti-aliased bottom
   edge); every section then sits 80px from the next, a warm rule after the cards, both media/list pairs and the boxed
   text. The tab is 49.49 % of the band so it ends where the animation box (50.51 %) starts on narrower bands too; the
   48px taken off 100vw (the 32px gutters plus a classic scrollbar) keeps it short of the animation, never over it. */
main:has(.hero-dark) [data-up-blocks]>section.incise{padding-block:0 106px;margin-top:-78px}
main:has(.hero-dark) .incise-row{position:relative;z-index:0;max-width:548px}
main:has(.hero-dark) .incise-row::before{content:"";position:absolute;z-index:-1;top:-42px;height:121px;left:calc((var(--up-band) - var(--up-wide))/-2);width:min(776px,calc((100vw - 48px)*.4949));background:var(--up-bg)}
/* The incise text lines up with the hero text, 80px into the band: its .wrap takes the band's box (the same box as the
   default .wrap from 1600px up, so only narrower screens change). */
@media (min-width:1101px){main:has(.hero-dark) [data-up-blocks]>section.incise .wrap{max-width:calc(var(--up-band) + 2*var(--up-s1));padding-inline:calc(var(--up-s1) + 80px)}}
main:has(.hero-dark) .wrap.prose:not(.narrow)>*{max-width:800px}
main:has(.hero-dark) [data-up-block=illustratedCards]::after,main:has(.hero-dark) [data-up-block=mediaList]::after,main:has(.hero-dark) [data-up-block=listMedia]::after,main:has(.hero-dark) [data-up-block=richTextBoxed]::after{content:"";display:block;max-width:var(--up-band);margin:80px auto 0;border-top:1px solid var(--up-line);transform:scaleX(var(--rule,1));transform-origin:left center}
main:has(.hero-dark) .split-body h2{color:var(--up-accent)}
main:has(.hero-dark) .split-row{grid-template-columns:776fr 560fr;column-gap:71px}
main:has(.hero-dark) .split-media{margin:0}
main:has(.hero-dark) .split-body{padding-left:40px}
main:has(.hero-dark) .split--reverse .split-row{grid-template-columns:695fr 672fr;column-gap:40px}
main:has(.hero-dark) .split--reverse .split-body{padding-left:0}
main:has(.hero-dark) .boxed{min-height:760px}
main:has(.hero-dark) .split--reverse .split-body p{max-width:640px}
main:has(.hero-dark) [data-up-blocks]>section[data-up-block=illustratedCards]{padding-bottom:31px}
main:has(.hero-dark) [data-up-block=illustratedCards]::after{margin-top:114px}
main:has(.hero-dark) [data-up-blocks]>section[data-up-block=mediaList]{padding-top:24.6px}
main:has(.hero-dark) [data-up-block=mediaList]::after,main:has(.hero-dark) [data-up-block=listMedia]::after{margin-top:72px}
main:has(.hero-dark) [data-up-blocks]>section[data-up-block=listMedia]{padding-top:30.6px}
main:has(.hero-dark) [data-up-blocks]>section.faq{padding-top:28.3px}
/* Below 1440px the half-band tab gets too short for the incise row: the incise leaves the tab and sits under the band. */
@media (max-width:1439px){
  main:has(.hero-dark) [data-up-blocks]>section.incise{margin-top:0;padding-block:var(--up-s3) var(--up-s15)}
  main:has(.hero-dark) .incise-row::before{content:none}
}

@media (max-width:800px){
  main:has(.hero-media) [data-up-blocks]>section.block{padding-block:var(--up-s15)}
  main:has(.hero-dark) [data-up-blocks]>section.incise{margin-top:0;padding-block:var(--up-s15)}
  main:has(.hero-dark) .incise-row::before{content:none}
  main:has(.hero-dark) [data-up-block]::after{margin-top:var(--up-s3)}
  main:has(.hero-dark) .split-row,main:has(.hero-dark) .split--reverse .split-row{grid-template-columns:1fr}
  main:has(.hero-dark) .split-body{padding:0}
  main:has(.hero-dark) .boxed{min-height:0}
}

/* Incise — accent square + accent text (Figma « Rectangle 23/24 »). */
.incise-row{display:flex;gap:26px;align-items:flex-start;max-width:621px}
.incise-mark{flex:none;width:48px;height:48px;background:var(--up-accent)}
.incise-row p{color:var(--up-accent);margin:0}

/* Cards — 4 icon/title/text cards, one « Mise en avant » on the accent. */
ul.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--up-s3) 80px}
ul.cards>li{padding:var(--up-s1) var(--up-s1) 9px;display:flex;flex-direction:column;gap:var(--up-s15)}
ul.cards>li>img{width:24px;height:24px}
ul.cards h4{margin:-10px 0 0;padding-bottom:8px}
ul.cards p{margin:0}
ul.cards h4+p{margin-top:-24.5px}
.is-featured{background:var(--up-accent);color:#f5f5f5}
ul.cards>li.is-featured{padding-bottom:var(--up-s15)}
.is-featured h4,.is-featured h5{color:var(--up-on-accent)}

/* Grids fed by up:list (services, references). */
.grid{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:var(--up-s15);display:grid}
ul.grid{list-style:none;margin:0;padding:0}
ul.grid>li{display:contents}
.card{background:var(--up-surface);flex-direction:column;gap:.5rem;padding:var(--up-s15);text-decoration:none;display:flex}
.card h3{margin:0}
.card p{margin:0}

/* Media + list / list + media (Figma 7425:2120, 7425:2131). */
/* Figma: two 695px columns 16px apart; the image column keeps 72px free on its inner side, the text column starts 104px
   in. Reversed (text left): columns 655/735, the image column keeps 80px free on its inner side. */
.split-row{display:grid;grid-template-columns:695fr 695fr;gap:var(--up-s1);align-items:center}
.split-media{margin:0 72px 0 0;aspect-ratio:623/750;border-radius:var(--up-radius-img);overflow:hidden;background:#000}
.split-body{padding-left:104px}
.split--reverse .split-row{grid-template-columns:655fr 735fr}
.split--reverse .split-media{margin:0 0 0 80px;aspect-ratio:644/740}
.split--reverse .split-body{padding-left:0}
.split-media img{width:100%;height:100%;object-fit:contain;will-change:transform}
.split-media:has(img:not([src]),img[src=""]){background:var(--up-warm)}
.split-media img:not([src]),.split-media img[src=""]{display:none}
.split--reverse .split-media{order:2}
.split-body h2{font-size:clamp(34px,4vw,48px);line-height:1.25;margin-bottom:42px}
.split-body h4{margin:23px 0 7px}
.split-body h2+h4{margin-top:0}
/* Kicker above a split title (Figma « NOTRE APPROCHE »: h5 18/30 bold accent, 32px above the title's cap). */
.split-body .eyebrow{color:var(--up-accent);font-weight:700;font-size:18px;line-height:30px;letter-spacing:0;margin:0 0 10px}
.split-body p{font-size:18px;line-height:28px;letter-spacing:0;margin:0;max-width:520px}
.split--reverse .split-body p{max-width:none}
@media (max-width:800px){
  .split-row,.split--reverse .split-row{grid-template-columns:1fr;gap:var(--up-s3)}
  .split-media,.split--reverse .split-media{margin:0}
  .split-body{padding:0}
  .split--reverse .split-media{order:0}
}

/* Illustrated cards + audience aside (Figma 7425:2192/2204/2658 + 7425:2670): three 280px cards ~30px apart, the
   aside 459px wide, 48px after them; card = image 280×225, mono tag, 16px bold title, muted 17px text. */
.illustrated-row{display:grid;grid-template-columns:901fr 459fr;gap:var(--up-s3);align-items:start}
ul.illustrated{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--up-s15) 30.5px}
ul.illustrated img{width:100%;aspect-ratio:280/225;object-fit:cover;margin-bottom:19.5px}
ul.illustrated .mini{margin:0;font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:16.5px;letter-spacing:.88px;text-transform:uppercase;color:#737373}
ul.illustrated li>p:not(.mini){margin:0;color:rgb(0 0 0/.6)}
ul.illustrated img:not([src]),ul.illustrated img[src=""]{visibility:hidden}
ul.illustrated li:has(img:not([src]),img[src=""])::before{content:"";display:block;aspect-ratio:280/225;margin-bottom:calc(-1*(100% * 225/280));background:var(--up-warm)}
ul.illustrated h5{margin:-1.7px 0 3.75px;font-size:16px;line-height:22px;color:#000}
.audience{padding-inline:var(--up-s15);margin-top:-8.7px}
.audience h5{margin-bottom:7.3px}
.audience .lead{color:var(--up-text);margin-bottom:23.8px}
.audience ul{list-style:none;margin:0;padding:0}
.audience li,.boxed ul.ruled li{position:relative;padding:15.7px 0 8.9px;font-size:22px;line-height:32px;letter-spacing:-.5px;color:var(--up-text)}
.audience li:first-child,.boxed ul.ruled li:first-child{padding-top:0}
.audience li::before{content:"- "}
@media (max-width:800px){.illustrated-row{grid-template-columns:1fr}}

/* Boxed text on the page pastel at 25 %, with a ruled list (Figma 7425:2802: pt88 pb64, a 696px column). */
.boxed{background:color-mix(in srgb,var(--up-pastel) 25%,transparent);padding:76.3px var(--up-s1) 64px;max-width:var(--up-band);margin-inline:auto}
.boxed>*{max-width:696px;margin-inline:auto}
.boxed h2{margin-bottom:4.5px}
.boxed .lead{color:var(--up-text);margin-bottom:25px}
.boxed ul.ruled{margin-block:8.8px 0}
ul.ruled{list-style:none;padding:0}
ul.ruled li{position:relative;padding-block:8px 9px}

/* Steps — a pastel band (50 %), 280px tall, steps centred; a 29×140 chevron (accent, 50 %) 40px on each side of it
   between steps (Figma 7425:2110). */
[data-up-block=steps] h5{font-size:24px;line-height:36px;margin-bottom:46px}
.steps-band{background:color-mix(in srgb,var(--up-pastel) 50%,transparent);padding:40px 41px 40px 80px;min-height:280px;display:flex;align-items:center}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:109px;align-items:center;width:100%}
.steps li{position:relative}
.steps li+li::before{content:"";position:absolute;left:-71px;top:50%;width:33px;height:144px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='144' viewBox='0 0 33 144'%3E%3Cpath d='M2 2S31 66.9 31 72.68C31 77.78 2 142 2 142' fill='none' stroke='%23fe5227' stroke-opacity='.5' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
.steps h4{margin:0 0 2.5px;padding-bottom:8px}
.steps p{margin:0}
/* Four steps in one row need ~1200px (chevron gaps of 109px): 2×2 below that, one column on phones. */
@media (max-width:1199px){
  .steps-band{padding:var(--up-s3) var(--up-s15)}
  .steps{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--up-s3) var(--up-s4)}
  .steps li+li::before{display:none}
}
@media (max-width:800px){
  .steps-band{padding:var(--up-s15)}
  .steps{grid-template-columns:1fr;gap:var(--up-s15)}
}

/* FAQ — open question/answer pairs. */
.faq h2{margin-bottom:12px}
/* Each question is a <details> (a repeat unit the studio can duplicate): the question in the summary, the answer in
   its div. A warm rule separates the items; the native marker is replaced by a chevron that turns when open. */
.faq p{font-size:clamp(18px,1.8vw,22px);line-height:calc(1em + 10px);letter-spacing:-.5px}
.faq details{position:relative;padding-top:1px;max-width:var(--up-measure)}
.faq details:last-of-type{padding-bottom:1px}
/* The rules are 1px borders on pseudo-elements scaled by --rule, so site-motion.js can draw them in (the chevron fades
   in with its rule). */
.faq details::before,.faq details:last-of-type::after{content:"";position:absolute;left:0;right:0;top:0;border-top:1px solid var(--up-line);transform:scaleX(var(--rule,1));transform-origin:left center}
.faq details:last-of-type::after{top:auto;bottom:0}
.faq summary{display:flex;align-items:flex-start;gap:16px;padding-block:18px;cursor:pointer;list-style:none;color:var(--up-ink);font-weight:700;font-size:22px;line-height:32px;letter-spacing:-.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin:10px 4px 0 auto;border-right:2px solid var(--up-ink);border-bottom:2px solid var(--up-ink);transform:rotate(45deg);transition:transform .25s;opacity:var(--rule,1)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:16px}
.faq details>div{padding:0 0 22px}
.faq details>div>p:last-child{margin-bottom:0}

/* CTA « Vous avez un projet » (Figma 7459:5894): black band, the desk illustration 560px wide at left (its SVG planes
   follow the pointer, see desk-parallax.js), mono title 48/52, then « Contactez-nous ! » and the red pill button. */
.cta-projet{background:var(--up-ink);color:var(--up-on-accent)}
.cta-row{display:grid;grid-template-columns:minmax(0,560px) 1fr;gap:80px;align-items:center;padding:56px 80px}
.cta-media{margin:0;perspective:1600px;transform-style:preserve-3d}
.cta-media .desk,.cta-media svg{display:block;width:100%;height:auto;overflow:visible}
.cta-body{max-width:720px}
.cta-body h2{font-family:var(--up-mono);font-size:48px;line-height:52px;letter-spacing:-.5px;color:var(--up-on-accent);margin:0 0 64px}
.cta-body h4{color:var(--up-on-accent);margin:0 0 16px}
.cta-body p{font-size:18px;line-height:28px;letter-spacing:0;max-width:640px;margin:0}
.cta-body p:has(.btn){margin-top:64px}
.cta-projet .btn.primary{background:var(--up-accent);color:#fff;font-size:24px;line-height:24px}
@media (max-width:800px){.cta-row{grid-template-columns:1fr;gap:var(--up-s3);padding:var(--up-s3) var(--up-s1)}.cta-media{max-width:420px}.cta-body h2{font-size:clamp(32px,8vw,48px);line-height:1.1;margin-bottom:var(--up-s3)}}

/* References */
/* Reference cards invite by the client's logo, centred in colour on a tinted 3:2 tile; the illustration explains, on
   the reference page. Under the tile: sector · year, the name, the promise. */
.ref-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.ref-card figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--up-tint);display:flex;align-items:center;justify-content:center}
.ref-card figure>img{width:var(--logo-w,60%);height:var(--logo-h,40%);object-fit:contain;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.ref-card:hover figure>img,.ref-card:focus-visible figure>img{transform:scale(1.06)}
/* Optical balance: in the same box a compact mark reads heavier than a long wordmark. */
.ref-card img[src$="/aurus.png"],.ref-card img[src$="/ssst.png"]{--logo-h:32%}
.ref-card img[src$="/montreux.png"],.ref-card img[src$="/ofrou.svg"]{--logo-w:76%}
.ref-body{padding-top:var(--up-s1);display:flex;flex-direction:column;gap:6px}
.ref-kicker{margin:0;font-family:var(--up-mono);font-size:11px;line-height:16px;letter-spacing:.88px;text-transform:uppercase;color:#737373}
.ref-card h3{margin:0;font-size:20px;line-height:28px}
.ref-card .meta{margin:0;font-size:14px;line-height:20px;color:var(--up-text)}
.logo-wall{flex-wrap:wrap;align-items:center;gap:2.5rem;display:flex}
.logo-wall img{filter:grayscale();opacity:.75;width:auto;max-height:3rem}

/* Contact form */
form.contact{max-width:var(--up-measure);gap:1rem;display:grid}
form.contact label{gap:.3rem;font-size:14px;font-weight:700;display:grid}
form.contact input,form.contact textarea{font:inherit;border:1px solid var(--up-line);background:var(--up-surface);padding:.6rem .75rem}
form.contact input:focus-visible,form.contact textarea:focus-visible{outline:2px solid var(--up-ink)}
form.contact button{justify-self:start}
.form-note{font-size:14px}

/* Follow-up link after a FAQ: a compact « Bouton secondaire », set apart from the last question. */
.faq .more{margin:var(--up-s3) 0 0}
.faq .more .btn{gap:12px;padding:16px 28px;font-size:19px;font-weight:700;line-height:1.2;transition:background .2s,color .2s}
.faq .more .btn::after{content:"→"/"";transition:transform .2s}
.faq .more .btn:hover{opacity:1;background:var(--up-ink);color:var(--up-on-accent)}
.faq .more .btn:hover::after{transform:translateX(4px)}

/* Services mega-menu — the header unfolded: a full-width band in the header's colour, hung from the header (not from
   « Services ») so its columns sit on the content grid. The four pillars in equal columns, each title a link to its
   page, each service marked with its record's pastel (test/mega-menu.test.ts keeps the two in step). It opens at
   once and closes after a short delay; its ::before bridges the header band between « Services » and the panel. */
nav.main>ul>li:has(>ul.mega){position:static}
nav.main ul.mega{--mega-bg:var(--up-bg);--mega-ink:var(--up-ink);--mega-line:var(--up-line);position:absolute;top:100%;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);padding:40px max(var(--up-s1),(100% - var(--up-wide))/2) 32px;background:var(--mega-bg);border-block:1px solid var(--mega-line);box-shadow:0 32px 40px -32px #00000029;opacity:0;visibility:hidden;translate:0 -8px;transition:opacity .16s .12s,translate .16s .12s,visibility 0s .28s}
nav.main ul.mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px}
nav.main>ul>li:has(>ul.mega):is(:hover,:focus-within)>ul.mega{opacity:1;visibility:visible;translate:none;transition:opacity .16s,translate .16s,visibility 0s}
nav.main>ul>li:has(>ul.mega):is(:hover,:focus-within)>a{color:var(--up-accent)}
nav.main ul.mega>li{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start;padding:0 var(--up-s15)}
nav.main ul.mega>li:first-child{padding-left:0}
nav.main ul.mega>li+li{border-left:1px solid var(--mega-line)}
nav.main ul.mega>li>a{justify-self:start;padding:0 0 var(--up-s1);font:700 14px/18px var(--up-mono);letter-spacing:1px;text-transform:uppercase;color:var(--mega-ink)}
nav.main ul.mega>li>a::after{content:"→"/"";display:inline-block;margin-left:8px;transition:translate .2s}
nav.main ul.mega>li>a:hover::after{translate:4px 0}
nav.main ul.mega ul a{display:grid;grid-template-columns:8px 1fr;column-gap:12px;padding-block:8px;font-size:16px;line-height:24px;letter-spacing:-.25px;color:var(--mega-ink)}
nav.main ul.mega ul a::before{content:"";width:8px;height:8px;margin-top:8px;background:var(--dot,var(--up-warm))}
nav.main ul.mega a:hover,nav.main ul.mega a[aria-current=page]{color:var(--up-accent)}
nav.main ul.mega a[data-ref=sites-plateformes],nav.main ul.mega a[data-ref=applications-outils-metier],nav.main ul.mega a[data-ref=design-ux-ui]{--dot:var(--up-luna)}
nav.main ul.mega a[data-ref=integrations-erp-crm-api],nav.main ul.mega a[data-ref=automatisations-ia]{--dot:var(--up-opale)}
nav.main ul.mega a[data-ref=seo-geo-visibilite],nav.main ul.mega a[data-ref=performance-digitale],nav.main ul.mega a[data-ref=ads-marketing-digital]{--dot:var(--up-candy)}
nav.main ul.mega a[data-ref=audit-strategie-digitale],nav.main ul.mega a[data-ref=formation-transfert-competences]{--dot:var(--up-lila)}
@media (prefers-reduced-motion:reduce){nav.main ul.mega,nav.main ul.mega>li>a:hover::after{translate:none}}
/* Under 900 px there is no hover: a tap on « Services » unfolds the band (site.js toggles li.open), the pillars in
   flowing columns, one on phones. */
@media (max-width:900px){
  nav.main ul.mega{display:none;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--up-s15) var(--up-s3);padding-block:var(--up-s15);opacity:1;visibility:visible;translate:none}
  nav.main>ul>li.open>ul.mega{display:grid}
  nav.main ul.mega>li{display:block;padding:0}
  nav.main ul.mega>li+li{border-left:0}
  nav.main ul.mega ul a{padding-block:6px}
}

/* Kicker above a record title (« Référence »). */
.kicker{margin:0 0 var(--up-s1);font-size:14px;line-height:18px;letter-spacing:.25px;text-transform:uppercase;color:var(--up-accent);font-weight:700}

/* Service cards carry the service's pastel as a top band (card templates are baked with the record's fields). */
.card[class*="accent-"]{border-top:8px solid var(--card-pastel,var(--up-warm));padding-top:var(--up-s15)}
.card.accent-luna,.pillar-filter .accent-luna{--card-pastel:var(--up-luna)}
.card.accent-candy,.pillar-filter .accent-candy{--card-pastel:var(--up-candy)}
.card.accent-opale,.pillar-filter .accent-opale{--card-pastel:var(--up-opale)}
.card.accent-lila,.pillar-filter .accent-lila{--card-pastel:var(--up-lila)}
.card h3{font-size:22px;line-height:30px}
/* Services page: the pillar chips are the cards' colour legend and, with scripts, their filter (site.js). The swatch is
   the card's band; the current chip is inked. A filtered-out card's li is display:contents, so [hidden] is restated. */
.pillar-filter ul{list-style:none;margin:0 0 var(--up-s3);padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pillar-filter a{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border:1.5px solid var(--up-ink);border-radius:999px;font-family:var(--up-mono);font-size:13px;line-height:20px;color:var(--up-ink);text-decoration:none}
.pillar-filter a[class*="accent-"]::before{content:"";width:10px;height:10px;background:var(--card-pastel)}
.pillar-filter a:hover{background:color-mix(in srgb,var(--card-pastel,var(--up-warm)) 50%,transparent)}
.pillar-filter a[aria-current]{background:var(--up-ink);color:var(--up-on-accent)}
ul.grid>li[hidden]{display:none}
/* The service's square vignette bleeds to the card's edges under the pastel band; the poster shows until the
   runtime mounts the animation (.hl). The runtime gives the scene its own ratio, so the square centres it. */
.card-anim{aspect-ratio:1;margin:calc(-1*var(--up-s15)) calc(-1*var(--up-s15)) var(--up-s1);background:#000;overflow:hidden;display:flex;align-items:center}
.card-anim__scene{width:100%}
.card-anim__scene>img{display:block;width:100%}
.card-anim__scene.hl>img{display:none}

/* Motion (site-motion.js): an inline script in partials/head.html adds html.motion-pending before first paint (unless
   reduced motion) and drops it after 3 s; site-motion.js lifts it when the hero intro starts, or at once when it bails
   out. A scripts-off page (the studio preview) hides nothing. The .hero-anim box is never hidden: its runtime plays its
   own intro inside it from the first frame. */
html.motion-pending .hero h1,html.motion-pending [data-editable=hero] h1,html.motion-pending .hero .kicker,html.motion-pending .hero .lead,html.motion-pending .hero .meta,html.motion-pending .hero .crumbs,html.motion-pending .hero .ctas{visibility:hidden}
/* Hooks merged into the layout rules above, keep them: .split-media overflow:hidden + border-radius (the parallax clip)
   and its img will-change, the dark hairlines' scaleX(var(--rule,1)), position:relative on .audience li / ul.ruled li. */
.split-line{will-change:transform}
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
/* Rules drawn in: the ruled lists' rules become 1px borders scaled by --rule (0 → 1), like the dark pages' section
   hairlines (a border, not a background, so forced colors keep it). */
.audience li::after,ul.ruled li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;border-top:1px solid #000;transform:scaleX(var(--rule,1));transform-origin:left center}

/* Use-case blocks: key/value sheet, tags, two columns, data table. An emptied title zone leaves an empty h2. */
.block h2:empty{display:none}
.kv{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;grid-auto-columns:minmax(0,max-content);gap:2px 56px;margin:0}
.kv dt{font-family:var(--up-mono);font-size:11px;line-height:20px;letter-spacing:.88px;text-transform:uppercase;color:#737373}
.kv dd{margin:0;font-size:18px;line-height:28px;color:var(--up-ink)}
@media (max-width:700px){.kv{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr;gap:0}.kv dd{margin-bottom:12px}}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:3px 12px;border:1.5px solid var(--up-ink);border-radius:999px;background:color-mix(in srgb,var(--up-pastel) 50%,transparent);font-family:var(--up-mono);font-size:13px;line-height:20px;color:var(--up-ink)}
.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--up-s3) var(--up-s4);max-width:calc(2*696px + var(--up-s4))}
.columns h5{margin-bottom:8px}
.columns ul{margin:0;padding-left:20px}
.columns li{margin-bottom:6px}
.columns li::marker{color:color-mix(in srgb,var(--up-accent) calc(var(--mark,1)*100%),transparent)}
/* Split in lines (site-motion.js), WebKit draws the marker inside the first line's mask: the masks clip with a clip-path
   that leaves the marker room on the left instead of SplitText's overflow:clip. */
.columns li>div{overflow:visible!important;clip-path:inset(0 0 0 -2em)}
.table-wrap{overflow-x:auto;container-type:inline-size}
.table-wrap table{width:100%;min-width:720px;border-collapse:collapse}
.table-wrap th,.table-wrap td{padding:12px 16px 12px 0;border-top:1px solid transparent;vertical-align:top;text-align:left}
.table-wrap th{font-family:var(--up-mono);font-size:11px;line-height:16px;letter-spacing:.88px;text-transform:uppercase;color:#737373;font-weight:400;border-top:0;border-bottom:1px solid transparent}
/* Row rules: the cell borders stay (transparent) for the geometry; the first cell draws its row's rule across the
   table (the wrap's width, 720px at least) as a pseudo-element scaled by --rule on the row (site-motion.js). */
.table-wrap tr>:first-child{position:relative}
.table-wrap tr>:first-child::before{content:"";position:absolute;left:0;top:-1px;width:max(100cqw,720px);border-top:1px solid var(--up-line);transform:scaleX(var(--rule,1));transform-origin:left center}
.table-wrap thead tr>:first-child::before{top:auto;bottom:-1px;border-top-color:var(--up-ink)}
.table-wrap tbody tr:first-child>:first-child::before{content:none}
.table-wrap td:first-child{font-weight:700;color:var(--up-ink)}
.table-wrap td.mono,.mono{font-family:var(--up-mono);font-size:14px}

/* Diagram: the texts live in the page, the geometry is inline custom properties written by scripts/diagrams
   (pnpm layout-diagrams), the arrows an SVG over the group frames and under the cards and labels (z 1/2/3). Sizes are
   fixed per kind, so a text edit never moves anything. site.js zooms the canvas to the column (floor .6); without
   scripts the figure scrolls. */
:root{--up-tint:color-mix(in srgb,var(--up-luna) 22%,var(--up-bg))}
.diagram figure{margin:0;overflow-x:auto}
.flow-canvas{position:relative;isolation:isolate;width:calc(var(--w)*1px);height:calc(var(--h)*1px);max-width:none;font-family:var(--up-font);line-height:1.2}
.flow-edges{position:absolute;z-index:1;inset:0;width:100%;height:100%;max-width:none}
.flow-group{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--h)*1px);margin:0;border:2px solid var(--up-ink);border-radius:12px;background:var(--up-surface)}
.flow-group h4{position:absolute;top:12px;left:16px;margin:0;font:700 11px/1 var(--up-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--up-ink)}
.flow-group ul,.flow-loose,.flow-labels{list-style:none;margin:0;padding:0}
.flow-group>ul{position:absolute;inset:-2px;display:flex;flex-direction:column;justify-content:flex-end}
.flow-canvas li[data-id]{position:absolute;z-index:2;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--h)*1px);padding:10px 12px 8px;border:2.5px solid var(--up-ink);border-radius:12px;background:#fff;color:var(--up-ink);display:flex;flex-direction:column;justify-content:space-between}
.flow-canvas li[data-id]:not([style]){position:static;width:auto;height:auto;margin:8px}
.flow-canvas li[data-id][data-kind=actor]{background:var(--up-luna)}
.flow-canvas li[data-id][data-kind=device]{border-style:dashed}
.flow-canvas li[data-id][data-kind=app]{background:var(--up-lila)}
.flow-canvas li[data-id][data-kind=platform]{background:var(--up-candy)}
.flow-canvas li[data-id][data-kind=document]{background:var(--up-opale)}
.flow-canvas li[data-id][data-kind=data]{background:#cdf1f1}
.flow-canvas li[data-id] strong{display:block;padding-left:24px;font-size:14px;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow-canvas li[data-id] strong::before{content:"◉";position:absolute;left:12px;width:16px;text-align:center;font-weight:400}
.flow-canvas li[data-id][data-kind=device] strong::before{content:"▭"}
.flow-canvas li[data-id][data-kind=app] strong::before{content:"▣"}
.flow-canvas li[data-id][data-kind=platform] strong::before{content:"⬢"}
.flow-canvas li[data-id][data-kind=document] strong::before{content:"▤"}
.flow-canvas li[data-id][data-kind=data] strong::before{content:"⛁"}
.flow-canvas li[data-id] span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;padding-left:24px;font-size:11px;line-height:1.25;color:#5b554e}
.flow-canvas li[data-id]::after{content:"ACTEUR";align-self:flex-start;padding:1px 6px;border:1.5px solid var(--up-ink);border-radius:5px;background:var(--up-bg);font:700 9px/1.3 var(--up-mono);letter-spacing:.1em}
.flow-canvas li[data-id][data-kind=device]::after{content:"MATÉRIEL"}
.flow-canvas li[data-id][data-kind=app]::after{content:"APPLICATION"}
.flow-canvas li[data-id][data-kind=platform]::after{content:"PLATEFORME"}
.flow-canvas li[data-id][data-kind=document]::after{content:"DOCUMENT"}
.flow-canvas li[data-id][data-kind=data]::after{content:"DONNÉES"}
.flow-labels li{position:absolute;z-index:3;left:calc(var(--x)*1px);top:calc(var(--y)*1px);translate:-50% -50%;padding:2px 6px;border-radius:4px;background:var(--up-bg);font:500 10px/1.3 var(--up-mono);color:var(--up-ink);max-width:104px;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.flow-labels li[data-align=start]{translate:0 -50%}
.flow-labels li[data-align=above]{translate:-50% calc(-100% - 4px)}
.flow-labels li[data-align=below]{translate:-50% 4px}
.flow-labels li[data-align=end]{translate:-100% -50%}
.flow-labels li:empty,.flow-labels li:not([style]){display:none}
.diagram figcaption{position:sticky;left:0;margin-top:var(--up-s1);font-size:14px;line-height:18px;letter-spacing:.25px;color:var(--up-text)}

/* Reference (use-case) pages: one 1120 px measure for the hero and every block; the table as stacked cards on narrow
   screens. */
main[data-type=CreativeWork] .wrap,main[data-type=CreativeWork] .wrap.prose.narrow{max-width:calc(1120px + 2*var(--up-s1))}
main[data-type=CreativeWork] .columns{max-width:none}
[data-up-block=keyValues]+[data-up-block=tags]{padding-top:0}
@media (max-width:700px){.table-wrap table{min-width:0}.table-wrap thead{display:none}.table-wrap tr{display:block;position:relative;padding:13px 0 12px}.table-wrap tr::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px solid var(--up-line);transform:scaleX(var(--rule,1));transform-origin:left center}.table-wrap tr>:first-child::before{content:none}.table-wrap th,.table-wrap td{display:block;padding:2px 0;border:0}.table-wrap td:first-child{font-weight:700;color:var(--up-ink)}}
/* Pills for short technical mentions (zone style « Pastille »): table cells, running text. */
.chip{display:inline-block;margin:2px 6px 2px 0;padding:1px 10px;border:1.5px solid var(--up-ink);border-radius:999px;font-family:var(--up-mono);font-size:12px;line-height:20px;color:var(--up-ink);white-space:nowrap}
.table-wrap td.techno{font-weight:400}
/* Rhythm: the hero on the luna tint, the approach table on the white surface, the impact band on the tint, the
   context illustration whole on black. */
main[data-type=CreativeWork] section.block{padding-block:var(--up-s4)}
main[data-type=CreativeWork] .hero{background:var(--up-tint);padding-bottom:var(--up-s4)}
main[data-type=CreativeWork] .hero .meta{margin:var(--up-s15) 0 0;font-family:var(--up-mono);font-size:13px;line-height:20px;letter-spacing:.5px;color:#737373}
main[data-type=CreativeWork] section.block[data-up-block=dataTable]{background:var(--up-surface)}
main[data-type=CreativeWork] [data-up-block=diagram]+section.block[data-up-block=twoColumns]{background:var(--up-tint)}
main[data-type=CreativeWork] .split-media{background:#000;aspect-ratio:2/3}
main[data-type=CreativeWork] .split-media img{object-fit:contain;object-position:center}
main[data-type=CreativeWork] .hero h1{max-width:none}
/* Home « traversée » (journey block). Static layout (scripts off, reduced motion, studio preview): the card, then each
   still followed by its text, then the steps and the button. Once the panorama mounts (.pano) the texts sit on the
   sticky stage and show by data-pano-active; the header turns black and fixed, hidden while the opening card shows. */
main:has(.journey) .hero-home{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
section.block.journey{margin:0;padding:0}
.journey{background:#000;color:#fff}
.journey__scroll{display:flex;flex-direction:column;gap:32px;padding:0 0 64px}
.journey__stills,.journey__text,.journey__acts{display:contents}
.journey__still{display:block;width:100%;height:auto}
.journey__intro{order:0;padding:var(--up-s3) var(--up-s1) 0;text-align:center}
.journey__card{display:inline-block;margin:0;padding:clamp(18px,2vw,26px) clamp(22px,2.6vw,34px);border-radius:var(--up-radius-btn);background:var(--up-bg);color:var(--up-ink);font:400 clamp(18px,1.7vw,24px)/1.2 var(--up-font)}
.journey__card img{display:block;width:min(52vw,260px);height:auto;margin:clamp(10px,1.2vw,14px) auto 0}
.journey__cue{display:none}
.journey__still[data-key=intro]{order:1}
.journey__still[data-key=act-1]{order:2}.journey__acts>li:nth-child(1){order:3}
.journey__still[data-key=act-2]{order:4}.journey__acts>li:nth-child(2){order:5}
.journey__still[data-key=act-3]{order:6}.journey__acts>li:nth-child(3){order:7}
.journey__still[data-key=act-4]{order:8}.journey__acts>li:nth-child(4){order:9}
.journey__still[data-key=end]{order:10}.journey__end{order:11}
.journey__acts>li,.journey__end{padding:0 var(--up-s1);list-style:none}
.journey h2{font:700 clamp(32px,3.4vw,54px)/1.02 var(--up-mono);margin:0 0 18px}
.journey h2 a{color:#fff;text-decoration:none}
.journey__acts ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.journey__acts ul a{font:400 12px/1.5 var(--up-mono);letter-spacing:.09em;text-transform:uppercase;color:#cfcfcf;text-decoration:none;border-bottom:1px solid #555}
.journey__acts ul a:hover{color:#fff;border-color:#fff}
.journey .steps{display:grid;grid-auto-flow:row;grid-auto-columns:auto;gap:18px;align-items:start;color:#fff}
.journey .steps h4{font:700 22px/1.2 var(--up-mono);margin:0 0 4px;padding:0;color:#fff}
.journey .steps p{margin:0;color:#cfcfcf;font-size:15px}
.journey .steps li+li::before{display:none}
.journey__cta p{margin:28px 0 0}
.journey .btn.primary{background:var(--up-accent);color:#fff;font-size:19px;font-weight:700;line-height:1;white-space:nowrap;padding:16px 28px}
html.motion-pending .journey__scroll:not(.pano) .journey__stills{visibility:hidden}
.journey__scroll.pano{display:block;padding:0}
.journey__scroll.pano .journey__stills{display:none}
.journey__scroll.pano .journey__text{display:block;position:sticky;top:0;height:100svh;margin-top:-100svh;z-index:1;pointer-events:none}
.journey__scroll.pano .journey__acts{display:block;margin:0;padding:0}
.journey__scroll.pano .journey__intro,.journey__scroll.pano .journey__acts>li,.journey__scroll.pano .journey__end{position:absolute;top:50%;translate:0 -50%;padding:0;opacity:0;pointer-events:none;transition:opacity .5s}
.journey__scroll.pano .journey__intro{inset:0;translate:none;display:grid;place-items:center}
.journey__scroll.pano .journey__cue{display:grid;place-items:center;position:absolute;left:50%;bottom:28px;width:44px;height:44px;margin-left:-22px;border:1.5px solid #fff;border-radius:50%;font:400 20px/1 var(--up-font);color:#fff;animation:journey-cue 2.2s ease-in-out infinite}
@keyframes journey-cue{0%,100%{translate:0 0}50%{translate:0 6px}}
.journey__scroll.pano .journey__acts>li,.journey__scroll.pano .journey__end{width:min(25vw,380px)}
/* The text column and its 4vw margin stay out of the panorama's fitted width: on a squarer window (1280×1000) the
   island shrinks instead of running under « Connecter ». */
.journey__scroll.pano{--pano-gutter:calc(min(25vw,380px) + 4vw)}
/* The scene fits under the fixed header (its 112 px min-height) instead of losing its top to it on a short window
   (1500×794). Under 900 px the scene is width-bound and centred with room to spare: no inset. */
.journey__scroll.pano{--pano-top:112px}
@media (max-width:900px){.journey__scroll.pano{--pano-top:0px}}
.journey__scroll.pano .journey__acts>li:nth-child(odd),.journey__scroll.pano .journey__end{left:4vw}
.journey__scroll.pano .journey__acts>li:nth-child(even){right:4vw}
.journey__scroll.pano[data-pano-active=intro] .journey__intro,
.journey__scroll.pano[data-pano-active=act-1] .journey__acts>li:nth-child(1),
.journey__scroll.pano[data-pano-active=act-2] .journey__acts>li:nth-child(2),
.journey__scroll.pano[data-pano-active=act-3] .journey__acts>li:nth-child(3),
.journey__scroll.pano[data-pano-active=act-4] .journey__acts>li:nth-child(4),
.journey__scroll.pano[data-pano-active=steps] .journey__end{opacity:1;transition:opacity .5s;pointer-events:auto}
.journey__scroll.pano .journey__acts>li:focus-within,.journey__scroll.pano .journey__end:focus-within{opacity:1;pointer-events:auto}
.journey__scroll.pano .journey__acts>li h2{overflow:hidden}
.journey__scroll.pano .journey__acts>li h2 a{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.77,0,.18,1)}
.journey__scroll.pano[data-pano-active=act-1] .journey__acts>li:nth-child(1) h2 a,
.journey__scroll.pano[data-pano-active=act-2] .journey__acts>li:nth-child(2) h2 a,
.journey__scroll.pano[data-pano-active=act-3] .journey__acts>li:nth-child(3) h2 a,
.journey__scroll.pano[data-pano-active=act-4] .journey__acts>li:nth-child(4) h2 a,
.journey__scroll.pano .journey__acts>li:focus-within h2 a{transform:none}
@media (max-width:1199px){
  .journey__scroll.pano{--pano-gutter:0px}
  .journey__scroll.pano .journey__acts>li,.journey__scroll.pano .journey__end{left:20px;right:20px;width:auto;top:auto;bottom:7svh;translate:none;padding-top:48px;background:linear-gradient(#0000,#000 48px)}
  .journey h2{font-size:34px;margin-bottom:10px}
  .journey__acts ul{gap:4px}
  .journey .steps{grid-template-columns:1fr}
  /* The closing slide under its scene: three steps and the button kept short enough to leave the table and its
     bubbles visible between the header and the text. */
  .journey__scroll.pano .journey__end{bottom:3svh}
  .journey .steps{gap:10px}
  .journey .steps h4{font-size:18px}
  .journey .steps p{font-size:14px;line-height:1.35}
  .journey__cta p{margin-top:18px}
  .journey .btn.primary{font-size:17px;padding:13px 24px}
}
/* The header of the home: black and fixed over the journey, hidden while the opening card shows, back at the first
   scroll (or when a link inside it takes the focus). Reduced motion keeps the site's light sticky header. */
@media (prefers-reduced-motion:no-preference){
  body:has(.journey__scroll.pano) header.site{position:fixed;inset:0 0 auto}
  body:has(.journey) header.site{background:#000;transition:opacity .45s,translate .45s}
  body:has(.journey) header.site .logo{background:url(/assets/img/logo-light.svg) left center/contain no-repeat}
  body:has(.journey) header.site .logo img{opacity:0}
  body:has(.journey) nav.main>ul>li>a{color:var(--up-on-accent)}
  body:has(.journey) nav.main>ul>li>a:hover{color:var(--up-accent)}
  body:has(.journey) nav.main ul.mega{--mega-bg:#000;--mega-ink:var(--up-on-accent);--mega-line:#ffffff38;box-shadow:none}
  html.motion-pending body:has(.journey) header.site:not(:focus-within),
  html.pano-pending body:has(.journey) header.site:not(:focus-within),
  body:has(.journey__scroll.pano[data-pano-active=intro]) header.site:not(:focus-within){opacity:0;translate:0 -100%;pointer-events:none}
  /* The texts wait for the panorama: hidden while the page or the panorama is pending, without transitions, so they
     never show stacked or fade out at load. Scripts off and reduced motion keep the static layout. */
  html.motion-pending .journey__scroll:not(.pano) .journey__text,
  html.pano-pending .journey__text{visibility:hidden}
  html.pano-pending .journey__text *{transition:none!important}
}
@media (prefers-reduced-motion:reduce){.journey__scroll.pano .journey__acts>li h2 a{transition:none;transform:none}.journey__scroll.pano .journey__cue{animation:none}}