/* ==========================================================================
   Arobaz — V4
   Crème and encre are the ground; framboise = the site, pistache = the app,
   abricot = the link between them. Colour always means something.
   ========================================================================== */

:root {
  --creme: #F6F1E7;
  --creme-2: #EDE6D8;
  --encre: #141215;
  --encre-2: #221F23;
  --framboise: #FF4D7E;
  --framboise-d: #C8215A;
  --pistache: #BFE36B;
  --abricot: #FFB23F;
  --mute: #6B656E;
  --mute-ink: #A8A1AA;

  --m: clamp(20px, 4vw, 64px);
  --r: 26px;

  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --dv: "wdth" 125;            /* display: Archivo Expanded */
  --dv-m: "wdth" 112;          /* display, medium sizes */
  --serif: "Newsreader", Georgia, serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --pop: cubic-bezier(.34, 1.4, .64, 1);
}
[data-typo="b"] {
  --disp: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --dv: "wdth" 100, "opsz" 96;
  --dv-m: "wdth" 100, "opsz" 40;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--creme); color: var(--encre);
  font: 400 17px/1.5 var(--text); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p, h1, h2, h3, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
em { font-style: normal; }
::selection { background: var(--framboise); color: var(--encre); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--encre); color: var(--creme); padding: 12px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--framboise); outline-offset: 3px; border-radius: 6px; }
.m-only { display: none; }

/* display type */
.disp, .hero-title, .sec-title, .band-t, .statement, .sig-title, .cta-title, .quote blockquote {
  font-family: var(--disp); font-variation-settings: var(--dv);
}

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px;
  border: 0; border-radius: 999px; font: 650 16px/1 var(--text); text-decoration: none; cursor: pointer;
  transition: transform .25s var(--pop), box-shadow .25s var(--ease), background-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active, .hd-cta:active, .ph-btn:active, .sugg button:active, .sw-ui:active, .menu-cta:active { transform: scale(.96); }
.btn-f { background: var(--framboise); color: var(--encre); }
.btn-f:hover { box-shadow: 0 12px 26px rgba(255, 77, 126, .35); }
.btn-e { background: var(--encre); color: var(--creme); }
.btn-e i { width: 9px; height: 9px; border-radius: 50%; background: var(--framboise); }
.link { font-weight: 650; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; transition: color .2s, border-color .2s; }
.link:hover { color: var(--framboise-d); border-bottom-width: 3px; }
.ft a:hover { color: var(--framboise); }

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro { position: fixed; inset: 0; z-index: 150; background: #E1D0B3; display: grid; place-items: center; visibility: hidden; }
.js .intro { visibility: visible; }
.intro-vu .intro { display: none; }
.intro-logo { width: min(46vw, 64svh * 1.72); fill: var(--encre); overflow: visible; }
.intro-logo .o-ring { fill: var(--encre); }
.intro-line { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--encre); transform: scaleY(0); transform-origin: 50% 0; }

               

/* mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 120; background: var(--encre); color: var(--creme);
  display: flex; flex-direction: column; padding: 18px var(--m) 32px;
}
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-logo { width: 62px; height: 36px; color: var(--creme); }
.menu-close { height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--creme); color: var(--encre); font-weight: 650; }
.menu-links { margin-top: auto; display: flex; flex-direction: column; }
.menu-links a { font-family: var(--disp); font-variation-settings: var(--dv); font-weight: 800; font-size: 11vw; line-height: 1.05; letter-spacing: -.045em; text-decoration: none; white-space: nowrap; }
.menu-links a:active { color: var(--framboise); }
.menu-cta { margin-top: 32px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: var(--framboise); color: var(--encre); font-weight: 700; text-decoration: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: 1vw;
  padding: 120px var(--m) 80px; overflow: clip; background: #E1D0B3;
  z-index: 2; border-radius: 0 0 clamp(28px, 3.4vw, 56px) clamp(28px, 3.4vw, 56px); box-shadow: 0 2.4vw 4.4vw -2vw rgba(20, 18, 21, .32), 0 .6vw 1.2vw -.6vw rgba(20, 18, 21, .14);
}
.hero-txt { position: relative; z-index: 3; }
.hero-title { font-weight: 800; font-size: clamp(52px, 6.5vw, 124px); line-height: .88; letter-spacing: -.056em; }
[data-typo="b"] .hero-title { letter-spacing: -.025em; font-size: clamp(46px, 6vw, 112px); }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .ln > span { display: inline-block; white-space: nowrap; }
.hl { position: relative; z-index: 0; display: inline-block; }
.hl::before {
  content: ""; position: absolute; z-index: -1; left: -.08em; right: -.08em; top: .16em; bottom: .02em; border-radius: .5em;
  transform: scaleX(var(--hl, 1)); transform-origin: 0 50%;
}
.hl-site::before { background: var(--framboise); }
.hl-app::before { background: var(--pistache); }
/* the line under the title: where we are, what we make, highlighted like the title */
.hero-sub { margin-top: 4.2vh; max-width: 30em; font-size: clamp(18px, 1.45vw, 24px); line-height: 1.45; color: var(--encre); font-weight: 500; }
.hx-loc { display: inline-flex; align-items: center; gap: 9px; margin: 0 6px .5em 0; padding: 8px 15px 8px 12px; border-radius: 999px; background: var(--encre); color: var(--creme); font: 700 .7em/1 var(--text); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; transform: rotate(-2deg); }
.hx-loc i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--pistache); }
.hx-loc i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pistache); animation: hd-ping 2.4s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes hd-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3); opacity: 0; } }
.hx-w { display: block; }
.hx-w u { text-decoration: none; background: linear-gradient(var(--c), var(--c)) 0 88% / 100% .45em no-repeat; padding: 0 .08em; }
.hx-w .u1 { --c: rgba(255, 77, 126, .55); } .hx-w .u2 { --c: rgba(191, 227, 107, .95); }
.hx-w b { font-weight: 800; font-variation-settings: "wdth" 112; }

.hero-actions { margin-top: 4.4vh; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* main call: big ink pill, a framboise disc whose arrow runs; the pill lifts and the disc turns to face the click */
.hx-go {
  position: relative; display: inline-flex; align-items: center; gap: 22px; height: 70px; padding: 0 8px 0 32px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--encre); color: var(--creme); text-decoration: none; font: 800 19px/1 var(--text); font-variation-settings: "wdth" 118; letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 34px -16px rgba(20, 18, 21, .55); transition: transform .45s var(--pop), box-shadow .45s;
}
.hx-go::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(120px 60px at var(--mx, 85%) 50%, rgba(255, 77, 126, .35), transparent 70%); opacity: 0; transition: opacity .4s; }
.hx-go i { position: relative; display: block; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: var(--framboise); color: var(--encre); transform: rotate(-45deg); transition: transform .55s var(--pop); }
.hx-go svg { position: absolute; left: 15px; top: 15px; width: 24px; height: 24px; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.hx-go svg + svg { transform: translateX(-46px); }
.hx-go:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 26px 44px -16px rgba(255, 77, 126, .55); }
.hx-go:hover::before { opacity: 1; }
.hx-go:hover i { transform: rotate(0); }
.hx-go:hover svg:first-child { transform: translateX(46px); }
.hx-go:hover svg + svg { transform: none; transition-delay: .07s; }
.hx-go:active { transform: scale(.97); }
/* second call: our work in three thumbnails that fan out */
.hx-see {
  display: inline-flex; align-items: center; gap: 16px; height: 70px; padding: 0 28px 0 12px; border-radius: 999px; color: var(--encre); text-decoration: none;
  font: 700 17px/1 var(--text); font-variation-settings: "wdth" 112; background: rgba(246, 241, 231, .55); box-shadow: inset 0 0 0 2px rgba(20, 18, 21, .14);
  transition: background-color .35s, box-shadow .35s;
}
.hx-th { position: relative; display: block; width: 92px; height: 46px; }
.hx-th img { position: absolute; top: 4px; left: 0; width: 56px; height: 38px; object-fit: cover; object-position: top; border-radius: 8px; box-shadow: 0 0 0 2px var(--creme), 0 6px 14px -6px rgba(20, 18, 21, .5);
  transition: transform .55s var(--pop); }
.hx-th img:nth-child(1) { z-index: 3; transform: rotate(-6deg); }
.hx-th img:nth-child(2) { z-index: 2; transform: translateX(18px) rotate(2deg); }
.hx-th img:nth-child(3) { z-index: 1; transform: translateX(36px) rotate(8deg); }
.hx-see:hover { background: var(--creme); box-shadow: inset 0 0 0 2px var(--encre); }
.hx-see:hover .hx-th img:nth-child(1) { transform: translate(-6px, -6px) rotate(-14deg); }
.hx-see:hover .hx-th img:nth-child(2) { transform: translate(20px, -9px) rotate(0deg); }
.hx-see:hover .hx-th img:nth-child(3) { transform: translate(46px, -4px) rotate(14deg); }
@media (max-width: 899px) { .hx-go { height: 62px; font-size: 17px; padding-left: 26px; } .hx-go i { width: 48px; height: 48px; } .hx-go svg { left: 12px; top: 12px; } .hx-see { height: 62px; } }
.hero-scroll { position: absolute; left: var(--m); bottom: 28px; display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--mute); }
.hero-scroll i { width: 8px; height: 22px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px currentColor; position: relative; }
.hero-scroll i::after { content: ""; position: absolute; left: 3px; top: 4px; width: 2px; height: 5px; border-radius: 2px; background: currentColor; animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 60% { transform: translateY(7px); opacity: 0; } 100% { opacity: 0; } }

/* the stage: logo pieces turned into colour, carrying a site and its app */
.hero-stage { position: relative; height: min(76svh, 720px); container-type: inline-size; }
.hs-ring { position: absolute; width: 132cqw; height: 132cqw; right: -52cqw; top: -32cqw; color: var(--framboise); }
.hs-stem { position: absolute; left: 31cqw; bottom: -12cqw; width: 8cqw; height: 34cqw; background: var(--pistache); clip-path: polygon(0 0, 26% 0, 100% 9cqw, 100% 100%, 0 100%); }
/* devices drawn like product shots: a desktop browser window with real chrome, a phone with its frame and island */
/* the laptop: a base that stays put and a lid (the browser) hinged on it, so it can open */
.hs-laptop { position: absolute; right: -4cqw; top: 9cqw; width: 84cqw; aspect-ratio: 1.42; transform: perspective(2400px) rotateY(-13deg) rotateX(3deg); transform-style: preserve-3d; }
.hs-browser {
  position: absolute; inset: 0; padding: 1.5cqw 1.5cqw 1.6cqw; border-radius: 2.4cqw 2.4cqw 1cqw 1cqw; transform-origin: 50% 100%;
  background: radial-gradient(circle at 50% .78cqw, #2C2A31 .22cqw, #121014 .32cqw, transparent .4cqw), #1B191C;
  box-shadow: inset 0 0 0 .22cqw #4A454D, inset 0 0 0 .42cqw #0E0D0F, 0 .4cqw .8cqw rgba(20, 18, 21, .16), 0 4cqw 7cqw -1cqw rgba(20, 18, 21, .3), 0 9cqw 16cqw -4cqw rgba(20, 18, 21, .34);
}
.hs-base {
  position: absolute; left: -7%; right: -7%; top: 100%; height: 2.3cqw; border-radius: .3cqw .3cqw 2.6cqw 2.6cqw / .3cqw .3cqw 2cqw 2cqw;
  background: linear-gradient(#A9A39C, #A9A39C) 50% 0 / 15% .55cqw no-repeat, linear-gradient(#EFEBE5, #D3CDC5 55%, #9E978F);
  box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .7), 0 1.4cqw 2.4cqw -.6cqw rgba(20, 18, 21, .45);
}
.hs-browser::after { content: ""; position: absolute; inset: 1.5cqw 1.5cqw 1.6cqw; z-index: 5; pointer-events: none; border-radius: .6cqw; background: linear-gradient(115deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 32%); }
.hs-browser .bar { position: relative; height: 4.2cqw; border-radius: .6cqw .6cqw 0 0; background: linear-gradient(#F7F4EE, #ECE7DE); border-bottom: 1px solid rgba(20, 18, 21, .1); display: flex; align-items: center; gap: .75cqw; padding: 0 1.6cqw; }
.hs-browser .bar i { width: 1.15cqw; height: 1.15cqw; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.hs-browser .bar i:nth-child(2) { background: #FEBC2E; } .hs-browser .bar i:nth-child(3) { background: #28C840; }
.hs-browser .bar span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: .7cqw;
  width: 46%; height: 2.9cqw; margin: 0; padding: 0; font: 500 1.35cqw/1 var(--text); color: #4a454c; background: rgba(255, 255, 255, .85); border-radius: .8cqw;
  box-shadow: 0 0 0 1px rgba(20, 18, 21, .07), 0 1px 2px rgba(20, 18, 21, .06);
}
.hs-browser .bar span::before { content: ""; width: .9cqw; height: 1.05cqw; border-radius: .2cqw; background: #8b8378; clip-path: polygon(0 45%, 100% 45%, 100% 100%, 0 100%); box-shadow: 0 0 0 0 #8b8378; -webkit-mask: radial-gradient(circle at 50% 38%, transparent .26cqw, #000 .3cqw); }
/* one system, several trades: inside the Arobaz frame, each client has its own product */
.hs-browser .page { position: relative; height: calc(100% - 4.2cqw); overflow: hidden; background: #fff; border-radius: 0 0 .6cqw .6cqw; }
.tr, .ta { position: absolute; inset: 0; display: none; }
.hero-stage[data-m="build"] [data-tr="build"], .hero-stage[data-m="garage"] [data-tr="garage"],
.hero-stage[data-m="shop"] [data-tr="shop"], .hero-stage[data-m="home"] [data-tr="home"] { display: block; }
.tr .a, .ta .a { display: inline; } .tr .b, .ta .b { display: none; }
.tr.is-done .a, .ta.is-done .a { display: none; } .tr.is-done .b, .ta.is-done .b { display: inline; }
[data-hs-roll] { display: inline-block; }
.tr.is-hit [data-hs-target] { animation: hs-hit 1.1s var(--ease); }
@keyframes hs-hit { 0% { box-shadow: 0 0 0 0 rgba(255, 178, 63, .9); } 100% { box-shadow: 0 0 0 1.6cqw rgba(255, 178, 63, 0); } }

/* Monnet Bâti — IBM Plex, concrete and a single signal orange */
.tr-build { background: #eceae5; color: #1c1d1f; font-family: "IBM Plex Sans", sans-serif; }
.bx-nav { position: absolute; z-index: 2; left: 3cqw; right: 3cqw; top: 2cqw; display: flex; align-items: center; gap: 2cqw; font-size: 1.05cqw; color: #4a4c50; }
.bx-nav span:first-of-type { margin-left: auto; }
.bx-nav em { font-style: normal; font-weight: 600; color: #fff; background: #1c1d1f; padding: .75cqw 1.2cqw; }
.bx-logo { display: inline-flex; align-items: center; gap: .8cqw; font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 1.2cqw; letter-spacing: .14em; text-transform: uppercase; color: #1c1d1f; }
.bx-logo i { width: 1.4cqw; height: 1.4cqw; background: #1c1d1f; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%); }
.bx-hero { position: absolute; left: 3cqw; top: 7.4cqw; width: 50%; }
.bx-k { font-family: "IBM Plex Mono", monospace; font-size: 1cqw; letter-spacing: .08em; text-transform: uppercase; color: #ff5b14; }
.bx-h { margin-top: 1cqw; font-weight: 500; font-size: 5.2cqw; line-height: .96; letter-spacing: -.04em; }
.bx-p { margin-top: 1.3cqw; max-width: 30cqw; font-size: 1.12cqw; line-height: 1.5; color: #55575b; }
.bx-btns { margin-top: 1.5cqw; display: flex; gap: .8cqw; font-size: 1.05cqw; font-weight: 600; }
.bx-btns span { padding: .85cqw 1.4cqw; } .bx-b1 { background: #ff5b14; color: #1c1d1f; } .bx-b2 { box-shadow: inset 0 0 0 .12cqw #1c1d1f; }
.bx-stats { margin-top: 2cqw; display: flex; gap: 2.4cqw; font-size: .92cqw; color: #6c6e72; }
.bx-stats b { display: block; font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 1.9cqw; color: #1c1d1f; letter-spacing: -.02em; }
.bx-img { position: absolute; right: 0; top: 0; width: 41%; height: 100%; }
.bx-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(.2) contrast(1.05); }
.bx-img span { position: absolute; left: 1.4cqw; bottom: 1.4cqw; padding: .6cqw 1cqw; background: rgba(28, 29, 31, .88); color: #eceae5; font-size: .95cqw; }
.bx-card { position: absolute; z-index: 2; left: 30%; right: 25%; bottom: 2.4cqw; background: #fff; padding: 1.5cqw 1.8cqw 1.7cqw; border-left: .4cqw solid #ff5b14; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(28, 29, 31, .35); }
.bx-c1 { display: flex; justify-content: space-between; align-items: flex-start; font-size: 1.3cqw; font-weight: 600; }
.bx-c1 small { display: block; margin-top: .25cqw; font-weight: 400; font-size: .95cqw; color: #8a8c90; }
.bx-pc { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 1.9cqw; overflow: hidden; }
.bx-ph { margin-top: 1.2cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5cqw; }
.bx-ph li { padding-top: 1cqw; border-top: .4cqw solid #d6d4cf; font-size: .92cqw; color: #8a8c90; white-space: nowrap; transition: border-color .6s .2s, color .4s; }
.bx-ph li.ok { border-color: #1c1d1f; color: #1c1d1f; }
.bx-ph li.now { border-image: linear-gradient(90deg, #ff5b14 60%, #d6d4cf 60%) 1; color: #1c1d1f; font-weight: 600; }
.tr-build.is-done .bx-ph li.now { border-image: none; border-color: #1c1d1f; font-weight: 400; }
.tr-build.is-done .bx-ph li.now + li { border-image: linear-gradient(90deg, #ff5b14 25%, #d6d4cf 25%) 1; color: #1c1d1f; font-weight: 600; }

/* Garage du Pont — Barlow, dark workshop, a yellow you can't miss */
.tr-garage { background: #0d1418; color: #eef2f4; font-family: "Barlow Semi Condensed", sans-serif; }
.gx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: .6; }
.tr-garage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 20, 24, .95) 28%, rgba(13, 20, 24, .35)), linear-gradient(transparent 70%, rgba(13, 20, 24, .9)); }
.gx-top, .gx-nav, .gx-hero, .gx-book, .gx-chips { position: absolute; z-index: 1; }
.gx-top { left: 0; right: 0; top: 0; display: flex; justify-content: space-between; padding: .55cqw 3cqw; background: #ffc81e; color: #0d1418; font-size: .9cqw; font-weight: 600; letter-spacing: .03em; }
.gx-nav { left: 3cqw; right: 3cqw; top: 3.4cqw; display: flex; align-items: center; gap: 2cqw; font-size: 1.1cqw; font-weight: 500; color: #b8c2c7; text-transform: uppercase; letter-spacing: .06em; }
.gx-nav b { margin-right: auto; display: flex; align-items: center; gap: .8cqw; color: #fff; font-weight: 700; font-size: 1.5cqw; letter-spacing: .02em; }
.gx-nav b i { display: grid; place-items: center; width: 2.4cqw; height: 2.4cqw; background: #ffc81e; color: #0d1418; font-style: normal; font-size: 1.1cqw; }
.gx-nav em { font-style: normal; background: #ffc81e; color: #0d1418; padding: .7cqw 1.2cqw; font-weight: 700; }
.gx-hero { left: 3cqw; top: 9.6cqw; width: 46%; }
.gx-k { font-size: 1cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ffc81e; }
.gx-h { margin-top: .8cqw; font-weight: 700; font-size: 4.1cqw; line-height: .94; text-transform: uppercase; }
.gx-h em { font-style: normal; color: #ffc81e; }
.gx-p { margin-top: 1.2cqw; max-width: 28cqw; font-size: 1.15cqw; line-height: 1.45; color: #b8c2c7; font-family: "Inter", sans-serif; }
.gx-rate { margin-top: 1.4cqw; font-size: 1.05cqw; color: #b8c2c7; font-family: "Inter", sans-serif; }
.gx-rate span { color: #ffc81e; letter-spacing: .1em; margin-right: .5cqw; } .gx-rate b { color: #fff; }
.gx-book { right: 2.6cqw; top: 9cqw; width: 42%; background: #fff; color: #0d1418; padding: 1.5cqw 1.7cqw 1.7cqw; box-shadow: 0 2cqw 4cqw -1cqw rgba(0, 0, 0, .6); }
.gx-steps { display: flex; gap: .4cqw; font-size: .85cqw; font-weight: 600; color: #9aa5ab; text-transform: uppercase; letter-spacing: .04em; }
.gx-steps span { flex: 1; padding-top: .6cqw; border-top: .3cqw solid #e1e5e7; } .gx-steps .on { color: #0d1418; border-color: #ffc81e; }
.gx-svc { margin-top: 1.3cqw; display: flex; justify-content: space-between; align-items: baseline; padding: .9cqw 1cqw; background: #f3f5f6; font-size: 1.05cqw; color: #5f6b72; }
.gx-svc b { font-size: 1.4cqw; color: #0d1418; text-transform: uppercase; letter-spacing: .02em; }
.gx-days { margin-top: 1.1cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; }
.gx-days p { font-size: 1cqw; color: #5f6b72; text-transform: uppercase; }
.gx-days p b { color: #0d1418; font-size: 1.35cqw; }
.gx-days i { display: block; margin-top: .5cqw; padding: .5cqw 0; text-align: center; font-style: normal; font-weight: 600; font-size: 1.15cqw; border: .13cqw solid #0d1418; transition: background-color .4s, color .4s, border-color .4s; }
.gx-days i.x { border-color: #e1e5e7; color: #b3bcc1; text-decoration: line-through; }
.tr-garage.is-done .gx-days i.t { background: #ffc81e; border-color: #ffc81e; color: #0d1418; text-decoration: none; }
.gx-go { margin-top: 1.2cqw; padding: .9cqw 0; text-align: center; background: #0d1418; color: #fff; font-size: 1.1cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.gx-chips { left: 3cqw; bottom: 2.4cqw; display: flex; gap: .7cqw; font-size: .95cqw; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.gx-chips span { padding: .55cqw 1cqw; box-shadow: inset 0 0 0 .12cqw rgba(238, 242, 244, .3); color: #dfe5e8; }

/* Alba Cycles — Instrument Sans, white space, the product first */
.tr-shop { background: #fff; color: #111; font-family: "Instrument Sans", sans-serif; }
.sx-promo { position: absolute; left: 0; right: 0; top: 0; padding: .55cqw 0; text-align: center; background: #111; color: #fff; font-size: .9cqw; letter-spacing: .02em; }
.sx-nav { position: absolute; left: 3cqw; right: 3cqw; top: 3.3cqw; display: flex; align-items: center; gap: 2cqw; font-size: 1.1cqw; color: #444; }
.sx-nav b { margin-right: auto; font-size: 2.2cqw; font-weight: 700; letter-spacing: -.06em; color: #111; }
.sx-ic { width: 1.7cqw; height: 1.7cqw; fill: none; stroke: #111; stroke-width: 1.7; }
.sx-bag { position: relative; display: flex; } .sx-bag i { position: absolute; right: -.7cqw; top: -.6cqw; display: grid; place-items: center; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #111; color: #fff; font: 600 .75cqw/1 "Instrument Sans", sans-serif; font-style: normal; }
.sx-crumb { position: absolute; left: 3cqw; top: 7.4cqw; font-size: .95cqw; color: #888; } .sx-crumb b { color: #111; font-weight: 500; }
.sx-gal { position: absolute; left: 3cqw; top: 9.6cqw; bottom: 2.4cqw; width: 52%; display: flex; gap: .8cqw; }
.sx-th { display: flex; flex-direction: column; gap: .7cqw; width: 5.2cqw; }
.sx-th i { display: block; aspect-ratio: 1; background: #f1f1ef; overflow: hidden; box-shadow: inset 0 0 0 .12cqw transparent; }
.sx-th i.on { outline: .14cqw solid #111; outline-offset: .1cqw; }
.sx-th img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; } .sx-th i:nth-child(2) img { object-position: 15% 70%; transform: scale(1.8); } .sx-th i:nth-child(3) img { object-position: 80% 40%; transform: scale(2.2); }
.sx-img { position: relative; flex: 1; background: #f1f1ef; overflow: hidden; }
.sx-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; mix-blend-mode: multiply; }
.sx-img span { position: absolute; left: 1cqw; top: 1cqw; padding: .45cqw .8cqw; background: #fff; font-size: .85cqw; font-weight: 600; }
.sx-info { position: absolute; left: 60%; right: 3cqw; top: 9.4cqw; }
.sx-cat { font-size: .95cqw; color: #777; text-transform: uppercase; letter-spacing: .08em; }
.sx-name { margin-top: .5cqw; font-weight: 600; font-size: 3cqw; line-height: 1; letter-spacing: -.035em; }
.sx-rate { margin-top: .6cqw; font-size: .95cqw; color: #777; } .sx-rate span { color: #111; letter-spacing: .08em; }
.sx-price { margin-top: .8cqw; font-size: 1.6cqw; font-weight: 500; }
.sx-lab { margin-top: 1.2cqw; font-size: .95cqw; color: #777; } .sx-lab b { color: #111; font-weight: 500; }
.sx-sw { margin-top: .6cqw; display: flex; gap: .8cqw; }
.sx-sw i { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .1cqw rgba(0, 0, 0, .15); }
.sx-sw i.on { box-shadow: 0 0 0 .22cqw #fff, 0 0 0 .36cqw #111; }
.sx-size { margin-top: .6cqw; display: flex; gap: .5cqw; }
.sx-size span { flex: 1; text-align: center; padding: .6cqw 0; border: .12cqw solid #ddd; font-size: 1.05cqw; font-weight: 500; }
.sx-size .on { border-color: #111; }
.sx-stock { margin-top: 1.2cqw; display: flex; align-items: center; gap: .7cqw; font-size: 1.05cqw; font-weight: 500; color: #b4321f; }
.sx-stock i { width: .8cqw; height: .8cqw; border-radius: 50%; background: currentColor; }
.tr-shop.is-done .sx-stock { color: #1d7a46; }
.sx-cta { margin-top: 1cqw; padding: 1.1cqw 0; text-align: center; font-weight: 600; font-size: 1.15cqw; background: #e9e9e7; color: #9a9a98; transition: background-color .5s .15s, color .5s .15s; }
.tr-shop.is-done .sx-cta { background: #111; color: #fff; }
.sx-perks { margin-top: 1cqw; display: flex; gap: 1.4cqw; font-size: .9cqw; color: #666; } .sx-perks span::before { content: "✓ "; color: #1d7a46; }

/* Rive Immobilier — Cormorant and Inter, warm paper, photographs */
.tr-home { background: #f6f2ea; color: #1f2b2a; font-family: "Inter", sans-serif; }
.rx-nav { position: absolute; left: 3cqw; right: 3cqw; top: 2cqw; display: flex; align-items: center; gap: 2cqw; font-size: 1.05cqw; color: #5b625b; }
.rx-nav b { margin-right: auto; font: 600 2.5cqw/1 "Cormorant Garamond", serif; letter-spacing: .02em; color: #1f2b2a; }
.rx-nav em { font-style: normal; font-weight: 500; color: #f6f2ea; background: #1f2b2a; padding: .7cqw 1.2cqw; border-radius: 99px; }
.rx-head { position: absolute; left: 3cqw; right: 3cqw; top: 6.6cqw; display: flex; justify-content: space-between; align-items: baseline; }
.rx-h { font: 500 4cqw/1 "Cormorant Garamond", serif; letter-spacing: -.01em; }
.rx-n { font-size: 1.05cqw; color: #5b625b; }
.rx-filters { position: absolute; left: 3cqw; right: 3cqw; top: 12.2cqw; display: flex; gap: .7cqw; font-size: .95cqw; color: #1f2b2a; }
.rx-filters span { padding: .55cqw 1cqw; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 .1cqw #e2dacb; }
.rx-filters em { margin-left: auto; align-self: center; font-style: normal; color: #5b625b; }
.rx-grid { position: absolute; left: 3cqw; right: 3cqw; top: 16cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.rx-grid article { font-size: .98cqw; color: #5b625b; }
.rx-ph { position: relative; display: block; aspect-ratio: 1.3; overflow: hidden; border-radius: .5cqw; background: #e4ddd0; }
.rx-ph img { width: 100%; height: 100%; object-fit: cover; }
.rx-ph i { position: absolute; left: .7cqw; top: .7cqw; background: #1f2b2a; color: #f6f2ea; font: 600 .82cqw/1 "Inter", sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: .45cqw .7cqw; border-radius: 99px; }
.rx-ph i.lt { background: #fff; color: #1f2b2a; }
.rx-grid b { display: block; margin-top: .8cqw; font: 600 1.6cqw/1.1 "Cormorant Garamond", serif; color: #1f2b2a; }
.rx-grid span:not(.rx-ph) { display: block; margin-top: .25cqw; }
.rx-grid em { display: block; margin-top: .45cqw; font-style: normal; font-weight: 600; color: #1f2b2a; }
.rx-new { display: none; }
.tr-home.is-done .rx-grid article:nth-child(4) { display: none; }
.tr-home.is-done .rx-new { display: block; animation: ci-in .7s var(--ease); }
@keyframes ci-in { from { opacity: 0; transform: translateY(1.6cqw); } }

/* the device belongs to Arobaz; the app inside belongs to the client */
.hs-phone {
  position: absolute; z-index: 2; backface-visibility: hidden; left: 7cqw; top: 32cqw; width: 27cqw; aspect-ratio: .49;
  background: #1B191C; border-radius: 5cqw; padding: .95cqw; transform: perspective(2000px) rotateY(16deg) rotateX(2deg);
  box-shadow: inset 0 0 0 .3cqw #4A454D, inset 0 0 0 .55cqw #0E0D0F, 0 .4cqw .8cqw rgba(20, 18, 21, .2), 0 5cqw 9cqw -1cqw rgba(20, 18, 21, .42), 0 10cqw 18cqw -5cqw rgba(20, 18, 21, .38);
}
.hs-phone::before { content: ""; position: absolute; z-index: 6; left: 50%; top: 2.1cqw; width: 7.4cqw; height: 2.1cqw; margin-left: -3.7cqw; border-radius: 99px; background: #0B0A0C; }
.hs-phone::after { content: ""; position: absolute; left: -.45cqw; top: 15cqw; width: .45cqw; height: 6cqw; border-radius: .3cqw 0 0 .3cqw; background: #3A363C; box-shadow: 0 -5cqw 0 #3A363C, 27.4cqw 2cqw 0 #3A363C; }
.hs-phone .scr { position: relative; height: 100%; overflow: hidden; border-radius: 4.1cqw; background: #fff; }
.hs-phone .scr::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%); }
/* inside the phone: a real app shell, status bar, large title, tab bar */
.ta { padding: 1.4cqw 2cqw 0; font-size: 1.4cqw; }
.px-sb { display: flex; justify-content: space-between; align-items: center; height: 2.4cqw; padding: 0 1.4cqw 0 1.8cqw; font: 600 1.25cqw/1 -apple-system, "SF Pro Text", "Inter", sans-serif; }
.px-sb svg { width: 5.4cqw; height: 1.2cqw; fill: currentColor; }
.px-tb { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 1.3cqw 1.6cqw 3.2cqw; border-top: .1cqw solid var(--line, rgba(0, 0, 0, .08)); background: var(--bar, rgba(255, 255, 255, .92)); }
.px-tb svg { width: 2.3cqw; height: 2.3cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .38; }
.px-tb svg.on { opacity: 1; color: var(--acc); }
.px-hi { position: absolute; left: 50%; bottom: .9cqw; width: 9cqw; height: .45cqw; margin-left: -4.5cqw; border-radius: 99px; background: currentColor; opacity: .85; }
.ta [data-hs-src] { position: absolute; left: 2cqw; right: 2cqw; bottom: 8.6cqw; display: flex; align-items: center; justify-content: center; height: 4.2cqw; border-radius: 1.2cqw; font-weight: 600; font-size: 1.4cqw; transition: background-color .35s, color .35s, transform .25s var(--pop); }
.ta.is-press [data-hs-src] { transform: scale(.94); }
.ta [class$="-top"] { margin-top: 2.6cqw; display: flex; justify-content: space-between; align-items: baseline; }
.ta [class$="-top"] b { font-size: 3cqw; letter-spacing: -.03em; }
.ta [class$="-seg"] { margin-top: 1.4cqw; display: flex; padding: .3cqw; border-radius: 1cqw; background: var(--seg, rgba(0, 0, 0, .06)); font-size: 1.1cqw; font-weight: 600; }
.ta [class$="-seg"] span { flex: 1; text-align: center; padding: .65cqw 0; border-radius: .8cqw; opacity: .6; }
.ta [class$="-seg"] .on { opacity: 1; background: var(--segon, #fff); box-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .12); }

.ta-build { --acc: #ff5b14; --bar: rgba(28, 29, 31, .94); --line: #2f3134; --seg: #2a2c2f; --segon: #3a3c40; background: #1c1d1f; color: #eceae5; font-family: "IBM Plex Sans", sans-serif; }
.ba-top { font-family: "IBM Plex Sans", sans-serif; } .ba-top i { font-style: normal; font-size: 1.1cqw; color: #ff5b14; }
.ba-card { margin-top: 1.2cqw; padding: 1.3cqw 1.5cqw; border-radius: 1.4cqw; background: #26282b; }
.ba-name { display: flex; justify-content: space-between; align-items: center; }
.ba-name b { display: block; font-size: 1.8cqw; } .ba-name small { font-size: 1.05cqw; color: #8a8c90; }
.ba-ring { display: grid; place-items: center; width: 5.2cqw; height: 5.2cqw; border-radius: 50%; background: conic-gradient(#ff5b14 0 66%, #3a3c40 0); font: 600 1.05cqw/1 "IBM Plex Mono", monospace; position: relative; }
.ba-ring::before { content: ""; position: absolute; inset: .55cqw; border-radius: 50%; background: #26282b; } .ba-ring span { position: relative; }
.ta-build.is-done .ba-ring { background: conic-gradient(#ff5b14 0 78%, #3a3c40 0); }
.ba-steps { margin-top: 1.1cqw; display: grid; gap: .65cqw; }
.ba-steps li { display: flex; align-items: center; gap: .9cqw; font-size: 1.2cqw; color: #6c6e72; }
.ba-steps li::before { content: ""; flex: none; width: 1.3cqw; height: 1.3cqw; border: .18cqw solid #4a4c50; border-radius: 50%; }
.ba-steps li.ok, .ta-build.is-done .ba-steps li.now { color: #eceae5; }
.ba-steps li.ok::before, .ta-build.is-done .ba-steps li.now::before { background: #ff5b14; border-color: #ff5b14; box-shadow: inset 0 0 0 .3cqw #26282b; }
.ba-steps li.now, .ta-build.is-done .ba-steps li.now + li { color: #eceae5; font-weight: 600; }
.ba-steps li.now::before, .ta-build.is-done .ba-steps li.now + li::before { border-color: #ff5b14; }
.ta-build.is-done .ba-steps li.now { font-weight: 400; }
.ba-lab { margin-top: 1.1cqw; font-size: 1.05cqw; color: #8a8c90; text-transform: uppercase; letter-spacing: .08em; }
.ba-ph { margin-top: .8cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5cqw; }
.ba-ph img, .ba-ph i { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: .7cqw; filter: grayscale(.3); }
.ba-ph img:nth-child(2) { object-position: 80% 20%; } .ba-ph img:nth-child(3) { object-position: 20% 80%; }
.ba-ph i { display: grid; place-items: center; background: #2a2c2f; font-style: normal; font-size: 1.2cqw; color: #8a8c90; }
.ba-btn { background: #ff5b14; color: #1c1d1f; }
.ta-build.is-done .ba-btn { background: #2b2d30; color: #eceae5; }

.ta-garage { --acc: #ffc81e; --bar: rgba(18, 27, 32, .94); --line: #24323a; --seg: #1b262c; --segon: #2a3840; background: #121b20; color: #eef2f4; font-family: "Barlow Semi Condensed", sans-serif; }
.ga-top b { font-size: 3.2cqw !important; text-transform: uppercase; letter-spacing: .01em !important; } .ga-top span { font-size: 1.2cqw; font-weight: 600; color: #ffc81e; text-transform: uppercase; }
.ga-sum { margin-top: 1.3cqw; display: flex; gap: .6cqw; }
.ga-sum span { flex: 1; padding: .8cqw; border-radius: 1cqw; background: #1b262c; font-size: .95cqw; color: #8b989f; text-transform: uppercase; }
.ga-sum b { display: block; font-size: 1.9cqw; color: #fff; }
.ga-job { margin-top: .9cqw; display: grid; grid-template-columns: 4.6cqw 1fr; column-gap: .8cqw; padding: 1.1cqw 1.2cqw; border-radius: 1cqw; background: #1b262c; border-left: .35cqw solid #3a464d; }
.ga-x { border-color: #ffc81e; }
.ga-t { grid-row: span 3; font-weight: 700; font-size: 1.45cqw; }
.ga-car { font-weight: 700; font-size: 1.55cqw; text-transform: uppercase; } .ga-car small { font-weight: 500; font-size: .95cqw; color: #8b989f; margin-left: .4cqw; }
.ga-what { font-size: 1.15cqw; color: #8b989f; }
.ga-st { margin-top: .3cqw; font-size: 1.05cqw; font-weight: 600; color: #ff7a59; }
.ta-garage.is-done .ga-x { opacity: .45; border-color: #3a464d; }
.ga-btn { background: #ffc81e; color: #0d1418; text-transform: uppercase; letter-spacing: .04em; }
.ta-garage.is-done .ga-btn { background: #24323a; color: #ffc81e; }

.ta-shop { --acc: #111; background: #fff; color: #111; font-family: "Instrument Sans", sans-serif; }
.sa-q { font-size: 1.05cqw; color: #999; border-radius: 99px; background: #f2f2f2; padding: .55cqw 1.2cqw; }
.sa-prod { margin-top: 1.2cqw; display: flex; gap: 1.1cqw; align-items: center; padding: 1cqw; border-radius: 1.2cqw; background: #f6f6f4; }
.sa-prod img { width: 5.4cqw; height: 5.4cqw; object-fit: cover; background: #ececea; border-radius: .8cqw; mix-blend-mode: multiply; }
.sa-prod b { display: block; font-size: 1.45cqw; font-weight: 600; } .sa-prod span { font-size: 1cqw; color: #888; }
.sa-sizes { margin-top: 1.3cqw; }
.sa-sizes li { display: grid; grid-template-columns: 3cqw 1fr 2.4cqw; align-items: center; gap: 1cqw; padding: .6cqw .4cqw; border-bottom: .1cqw solid #eee; font-size: 1.3cqw; }
.sa-sizes li i { height: .6cqw; border-radius: 99px; background: linear-gradient(90deg, #111 calc(var(--v) * 100%), #eee 0); }
.sa-sizes li b { text-align: right; font-weight: 600; }
.sa-sizes li.sel { background: #fff4f2; border-radius: .8cqw; margin: 0 -.6cqw; padding-left: 1cqw; padding-right: 1cqw; }
.sa-sizes li.sel b { color: #b4321f; } .sa-m { --v: 0; }
.ta-shop.is-done .sa-sizes li.sel { background: #eef8f2; } .ta-shop.is-done .sa-sizes li.sel b { color: #1d7a46; } .ta-shop.is-done .sa-m { --v: .75; }
.sa-note { display: none; margin-top: 1cqw; font-size: 1cqw; color: #999; }
.sa-btn { background: #111; color: #fff; }
.ta-shop.is-done .sa-btn { background: #eaf6ef; color: #1d7a46; }

.ta-home { --acc: #1f2b2a; --bar: rgba(246, 242, 234, .94); --seg: #ebe5d9; background: #f6f2ea; color: #1f2b2a; font-family: "Inter", sans-serif; }
.ra-top b { font: 600 3.4cqw/1 "Cormorant Garamond", serif !important; letter-spacing: 0 !important; }
.ra-top span { display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: #1f2b2a; color: #f6f2ea; font-size: 1.8cqw; }
.ra-card { margin-top: 1.4cqw; background: #fff; padding: .9cqw .9cqw 1.2cqw; border-radius: 1.4cqw; box-shadow: 0 .4cqw 1.6cqw rgba(31, 43, 42, .1); }
.ra-ph { display: block; aspect-ratio: 1.55; overflow: hidden; border-radius: .9cqw; }
.ra-ph img { width: 100%; height: 100%; object-fit: cover; }
.ra-st { margin-top: .9cqw; display: inline-flex; align-items: center; gap: .5cqw; padding: .35cqw .8cqw; border-radius: 99px; background: #f1ebdd; font-size: .95cqw; font-weight: 600; color: #8a7d62; text-transform: uppercase; letter-spacing: .05em; }
.ra-st i { width: .7cqw; height: .7cqw; border-radius: 50%; background: currentColor; }
.ta-home.is-done .ra-st { color: #2f7a55; background: #e3eee7; }
.ra-name { margin-top: .5cqw; font: 600 1.85cqw/1.1 "Cormorant Garamond", serif; }
.ra-sub { font-size: 1cqw; color: #6b6f68; }
.ra-chk { margin-top: .7cqw; display: flex; flex-wrap: wrap; gap: .4cqw .8cqw; font-size: .95cqw; color: #6b6f68; }
.ra-chk span::before { content: "✓ "; color: #2f7a55; }
.ra-btn { background: #1f2b2a; color: #f6f2ea; }
.ta-home.is-done .ra-btn { background: #e3eee7; color: #2f7a55; }
.hs-tag { position: absolute; z-index: 3; left: 23cqw; top: 4.4cqw; overflow: hidden; background: var(--abricot); color: var(--encre); font: 700 2.1cqw/1 var(--text); padding: 1.3cqw 2.4cqw; border-radius: 99px; transform: rotate(-4deg); box-shadow: 0 1.2cqw 2.6cqw rgba(20, 18, 21, .16); }
.hs-tag span { display: inline-block; }
.hs-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.hs-trail path, .trail-path { fill: none; stroke: var(--abricot); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 10; }
.fly {
  position: absolute; left: 0; top: 0; z-index: 6; white-space: nowrap; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--creme); color: var(--encre); border-radius: 12px; padding: 9px 13px; font: 650 13.5px/1.1 var(--text);
  box-shadow: 0 16px 34px rgba(20, 18, 21, .26), 0 0 0 2px var(--abricot);
}
.fly i { width: 9px; height: 9px; border-radius: 50%; background: var(--abricot); box-shadow: 0 0 0 5px rgba(255, 178, 63, .3); }
.fly em { color: var(--framboise-d); }

/* ==========================================================================
   PRÉSENTATION
   ========================================================================== */
.about { padding: 16vh var(--m) 13vh; }
.statement {
  max-width: 21em; font-weight: 720; font-variation-settings: var(--dv-m);
  font-size: clamp(30px, 4.1vw, 76px); line-height: 1.1; letter-spacing: -.035em;
}
.statement em { background: linear-gradient(var(--framboise), var(--framboise)) 0 92% / 100% .14em no-repeat; }
.pill { display: inline-flex; vertical-align: -.08em; width: 2.3em; height: .82em; border-radius: 999px; overflow: hidden; position: relative; }
.pill-site { background: var(--framboise); }
.pill-site i { position: absolute; top: 18%; bottom: 18%; width: 34%; border-radius: .12em; background: var(--creme); animation: slide 4.5s var(--ease) infinite; }
.pill-site i:nth-child(1) { left: 10%; }
.pill-site i:nth-child(2) { left: 52%; background: var(--encre); animation-delay: -1.5s; }
.pill-site i:nth-child(3) { left: 94%; background: var(--abricot); animation-delay: -3s; }
@keyframes slide { 0%, 30% { transform: translateX(0); } 33%, 63% { transform: translateX(-125%); } 66%, 96% { transform: translateX(-250%); } 100% { transform: translateX(0); } }
.pill-app { background: var(--pistache); align-items: center; justify-content: space-evenly; }
.pill-app b { width: 1.25em; height: .5em; border-radius: 99px; background: rgba(20, 18, 21, .22); position: relative; animation: track 3s var(--ease) infinite; }
@keyframes track { 0%, 45% { background: rgba(20, 18, 21, .22); } 50%, 95% { background: var(--encre); } }
.pill-app b::after { content: ""; position: absolute; top: .07em; left: .07em; width: .36em; height: .36em; border-radius: 50%; background: var(--creme); animation: tog 3s var(--pop) infinite; }
@keyframes tog { 0%, 45% { transform: translateX(0); } 50%, 95% { transform: translateX(.75em); background: var(--pistache); } }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc { padding: 6vh var(--m) 16vh; }
.sec-title { font-weight: 800; font-size: clamp(40px, 6vw, 112px); line-height: .92; letter-spacing: -.052em; }
[data-typo="b"] .sec-title { letter-spacing: -.025em; }
.sec-title span { display: block; }
.bands { margin-top: 6vh; display: grid; gap: 14px; }
.band { border-radius: var(--r); overflow: hidden; }
.b-site { background: var(--framboise); }
.b-app { background: var(--pistache); }
.b-both { background: var(--encre); color: var(--creme); }
.band-head {
  width: 100%; display: grid; grid-template-columns: 1fr auto 56px; align-items: center; gap: 24px;
  padding: 30px 36px; border: 0; background: none; text-align: left; cursor: pointer;
}
.band-t { font-weight: 800; font-size: clamp(36px, 5.2vw, 98px); line-height: .95; letter-spacing: -.048em; }
[data-typo="b"] .band-t { letter-spacing: -.02em; }
.band-l { max-width: 24ch; font-size: 17px; font-weight: 600; line-height: 1.35; text-align: right; }
.band-ic { width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; position: relative; transition: transform .45s var(--pop); }
.band-ic::before, .band-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: currentColor; }
.band-ic::after { transform: rotate(90deg); transition: transform .45s var(--pop); }
.band.is-open .band-ic::after { transform: rotate(0deg); }
.band.is-open .band-ic { transform: rotate(180deg); }
.band-head:hover .band-ic { box-shadow: inset 0 0 0 26px currentColor; }
.band-head:hover .band-ic::before, .band-head:hover .band-ic::after { background: var(--bg-band); }
.b-site { --bg-band: var(--framboise); } .b-app { --bg-band: var(--pistache); } .b-both { --bg-band: var(--encre); }
.band-ic, .band-ic::before, .band-ic::after { transition: transform .45s var(--pop), box-shadow .3s var(--ease), background-color .3s; }
.band-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.band.is-open .band-body { grid-template-rows: 1fr; }
.band-in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: end; padding: 0 36px; }
.band.is-open .band-in { padding-bottom: 36px; }
.band-note { font-size: 18px; max-width: 30ch; padding-bottom: 6px; }
.band-note b { font-weight: 650; }

/* sites: one real-looking site (a florist), three identities — layout, type, colour and
   photography all change, the content stays. Sized in its own container units. */
.restyle {
  --rs-bg: #F5EFE6; --rs-ink: #2B211C; --rs-mute: rgba(43, 33, 28, .62); --rs-acc: #2B211C; --rs-acc-ink: #F5EFE6; --rs-em: #B4566B; --rs-card: #EDE4D7;
  --rs-tf: 'Newsreader', Georgia, serif; --rs-tw: 400; --rs-case: none; --rs-ls: -.02em; --rs-bf: 'Inter', var(--text);
  position: relative; container-type: inline-size; border-radius: 16px; overflow: hidden; background: var(--rs-bg); color: var(--rs-ink); aspect-ratio: 1.6;
  box-shadow: 0 24px 50px rgba(20, 18, 21, .22); font-family: var(--rs-bf); transition: background-color .6s, color .6s;
}
.restyle[data-theme="1"] { --rs-bg: #0F2A1F; --rs-ink: #F4F1E8; --rs-mute: rgba(244, 241, 232, .7); --rs-acc: #FF8FB1; --rs-acc-ink: #0F2A1F; --rs-em: #FF8FB1; --rs-card: #173A2C; --rs-tf: 'Barlow Semi Condensed', var(--text); --rs-tw: 700; --rs-case: uppercase; --rs-ls: -.01em; --rs-bf: 'Barlow Semi Condensed', var(--text); }
.restyle[data-theme="2"] { --rs-bg: #F8E6E4; --rs-ink: #5B1F2E; --rs-mute: rgba(91, 31, 46, .66); --rs-acc: #5B1F2E; --rs-acc-ink: #F8E6E4; --rs-em: #C2506D; --rs-card: #F2D6D3; --rs-tf: 'Jost', var(--text); --rs-tw: 400; --rs-case: none; --rs-ls: -.03em; --rs-bf: 'Jost', var(--text); }
.rs-bar { height: 4.4cqw; display: flex; gap: .9cqw; align-items: center; padding: 0 2cqw; background: rgba(127, 127, 127, .14); }
.rs-bar i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: rgba(127, 127, 127, .45); }
.rs-bar span { margin: 0 auto; transform: translateX(-3cqw); padding: .45cqw 4cqw; border-radius: 99px; background: rgba(127, 127, 127, .14); font: 500 1.35cqw/1 var(--text); opacity: .75; }
.rs-page { position: relative; height: calc(100% - 4.4cqw); display: flex; flex-direction: column; }
.rs-nav { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 3cqw; align-items: center; padding: 2.4cqw 4cqw; font-size: 1.5cqw; }
.rs-mark { font-family: var(--rs-tf); font-weight: var(--rs-tw); text-transform: var(--rs-case); font-size: 2.6cqw; letter-spacing: var(--rs-ls); }
.rs-links { display: flex; gap: 2.4cqw; justify-content: center; color: var(--rs-mute); }
.rs-cart { padding: .7cqw 1.6cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px currentColor; }
.rs-hero { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.rs-ph { position: relative; overflow: hidden; }
.rs-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.restyle[data-theme="0"] .rs-ph img:nth-child(1), .restyle[data-theme="1"] .rs-ph img:nth-child(2), .restyle[data-theme="2"] .rs-ph img:nth-child(3) { opacity: 1; }
.rs-txt { position: relative; z-index: 2; padding: 3cqw 4cqw 2cqw; display: flex; flex-direction: column; justify-content: center; }
.rs-eye { font-size: 1.35cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--rs-mute); }
.rs-title { margin-top: 1.4cqw; font-family: var(--rs-tf); font-weight: var(--rs-tw); text-transform: var(--rs-case); font-size: 5.2cqw; line-height: .98; letter-spacing: var(--rs-ls); }
.rs-title em { color: var(--rs-em); }
.rs-sub { margin-top: 1.6cqw; max-width: 34ch; font-size: 1.55cqw; line-height: 1.45; color: var(--rs-mute); }
.rs-cta { display: flex; gap: 1.2cqw; margin-top: 2.2cqw; }
.rs-btn, .rs-btn2 { padding: 1.2cqw 2cqw; font: 600 1.4cqw/1 var(--rs-bf); text-transform: none; }
.rs-btn { background: var(--rs-acc); color: var(--rs-acc-ink); }
.rs-btn2 { box-shadow: inset 0 0 0 1px currentColor; }
.rs-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 2.4cqw 4cqw 3cqw; }
.rs-shop li { display: grid; grid-template-columns: 6cqw 1fr; grid-template-rows: auto auto; column-gap: 1.2cqw; align-items: center; padding: 1cqw; background: var(--rs-card); font-size: 1.35cqw; }
.rs-shop img { grid-row: span 2; width: 6cqw; height: 6cqw; object-fit: cover; }
.rs-shop b { font-weight: 600; }
/* identity 0 — editorial: text left, photo right, square corners, serif */
.restyle[data-theme="0"] .rs-title em { font-style: italic; }
/* identity 1 — bold: full-bleed photo, condensed capitals, neon pink */
.restyle[data-theme="1"] .rs-hero { grid-template-columns: 1fr; }
.restyle[data-theme="1"] .rs-ph { position: absolute; inset: 0; }
.restyle[data-theme="1"] .rs-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 42, 31, .92) 0%, rgba(15, 42, 31, .55) 55%, rgba(15, 42, 31, .1) 100%); }
.restyle[data-theme="1"] .rs-title { font-size: 6cqw; line-height: .92; }
.restyle[data-theme="1"] .rs-title em { font-style: normal; }
.restyle[data-theme="1"] .rs-txt { max-width: 62%; }
.restyle[data-theme="1"] .rs-btn, .restyle[data-theme="1"] .rs-btn2 { text-transform: uppercase; letter-spacing: .06em; }
/* identity 2 — soft: arched photo on the left, rounded everything */
.restyle[data-theme="2"] .rs-hero { grid-template-columns: .9fr 1fr; }
.restyle[data-theme="2"] .rs-ph { order: -1; margin: 1cqw 0 0 4cqw; border-radius: 20cqw 20cqw 1.4cqw 1.4cqw; }
.restyle[data-theme="2"] .rs-btn, .restyle[data-theme="2"] .rs-btn2, .restyle[data-theme="2"] .rs-shop li, .restyle[data-theme="2"] .rs-shop img { border-radius: 99px; }
.restyle[data-theme="2"] .rs-shop li { border-radius: 2cqw; }
.restyle[data-theme="2"] .rs-shop img { border-radius: 1.4cqw; }
.restyle[data-theme="2"] .rs-title em { font-style: normal; font-weight: 500; }

/* apps: a real field-service app (a plumber-heating company), on the phone, over the team map */
.appdemo { position: relative; container-type: inline-size; aspect-ratio: 1.36; font-family: 'Instrument Sans', var(--text); color: #0F1F22; }
.ad-map { position: absolute; left: 22cqw; right: 0; top: 5cqw; bottom: 5cqw; overflow: hidden; border-radius: 18px; background: #EAEFE8; box-shadow: 0 24px 50px rgba(20, 18, 21, .18); }
.ad-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.adm-river { fill: none; stroke: #BFD9E3; stroke-width: 14; stroke-linecap: round; }
.adm-road { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.adm-road.thin { stroke-width: 2.5; opacity: .9; }
.adm-town { position: absolute; font-size: 1.6cqw; font-weight: 600; color: #5A6B66; letter-spacing: .02em; }
.adm-pin { position: absolute; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; margin: -2.3cqw 0 0 -2.3cqw; border-radius: 50%; border: .5cqw solid #fff; background: #0E6E6E; color: #fff; font: 600 1.5cqw/1 'Instrument Sans', var(--text); font-style: normal; box-shadow: 0 .6cqw 1.4cqw rgba(14, 110, 110, .35); }
.adm-pin.is-b { background: #FF7A1A; }
.adm-pin.is-c { background: #1F3A8A; }
.adm-card { position: absolute; right: 2.4cqw; top: 2.4cqw; padding: 1.4cqw 2cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, .08); }
.adm-card b { display: block; font-size: 2.2cqw; font-weight: 700; }
.adm-card span { font-size: 1.5cqw; color: #5A6B66; }
.ad-phone { position: absolute; z-index: 2; left: 3cqw; top: 2.4cqw; width: 36cqw; height: 71cqw; container-type: inline-size; overflow: hidden; border-radius: 6cqw; background: #F6F7F5; box-shadow: 0 0 0 1.8cqw #16171b, 0 0 0 2cqw #3a3c42, 0 4cqw 8cqw rgba(20, 18, 21, .35); padding: 7.4cqw 2.6cqw 0; }
.ad-phone::before { content: ""; position: absolute; z-index: 3; top: 3cqw; left: 50%; width: 28cqw; margin-left: -14cqw; height: 7cqw; border-radius: 99px; background: #000; }
.adp-sb { position: absolute; top: 4.61cqw; left: 8.96cqw; right: 7.68cqw; display: flex; justify-content: space-between; align-items: center; }
.adp-sb b { font-size: 5.38cqw; font-weight: 600; }
.adp-sb span { display: flex; gap: 0.9cqw; align-items: flex-end; }
.adp-sb i { width: 1.54cqw; border-radius: 0.38cqw; background: #0F1F22; }
.adp-sb i:nth-child(1) { height: 2.3cqw; } .adp-sb i:nth-child(2) { height: 3.33cqw; } .adp-sb i:nth-child(3) { height: 4.35cqw; }
.adp-sb i:nth-child(4) { width: 8.96cqw; height: 4.35cqw; margin-left: 1.54cqw; border-radius: 1.28cqw; background: none; box-shadow: inset 0 0 0 0.64cqw #0F1F22, inset 0 0 0 1.54cqw #F6F7F5, inset 0 0 0 5.12cqw #0F1F22; }
.adp-notif { position: absolute; z-index: 4; left: 3.84cqw; right: 3.84cqw; top: 3.84cqw; padding: 4.35cqw 5.12cqw; border-radius: 7.68cqw; background: rgba(255, 255, 255, .96); box-shadow: 0 2.56cqw 7.68cqw rgba(0, 0, 0, .18); font-size: 4.61cqw; line-height: 1.3; opacity: 0; transform: translateY(-140%); }
.adp-notif b { display: block; font-size: 4.1cqw; color: #0E6E6E; }
.adp-hi { font-size: 4.86cqw; color: #5A6B66; }
.ad-h { display: flex; flex-direction: column; gap: .4cqw; margin-top: 1.28cqw; }
.ad-h span { font-size: 11.52cqw; font-weight: 700; letter-spacing: -.03em; }
.ad-h b { font-size: 4.35cqw; font-weight: 600; color: #0E6E6E; white-space: nowrap; overflow: hidden; }
.ad-h b span { display: inline-block; font-size: inherit; font-weight: inherit; letter-spacing: 0; }
.adp-seg { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 5.12cqw; padding: 1.28cqw; border-radius: 3.84cqw; background: #E6EAE6; font-size: 4.35cqw; font-weight: 600; text-align: center; color: #5A6B66; }
.adp-seg span { padding: 2.3cqw 0; border-radius: 2.82cqw; }
.adp-seg .is-on { background: #fff; color: #0F1F22; box-shadow: 0 0.51cqw 1.28cqw rgba(0, 0, 0, .08); }
.ad-list { margin-top: 4.61cqw; display: grid; gap: 3.07cqw; }
.ad-list li { display: grid; grid-template-columns: 14.08cqw 1fr auto; gap: 3.07cqw; align-items: center; padding: 3.84cqw 4.1cqw; border-radius: 5.12cqw; background: #fff; box-shadow: 0 0.51cqw 1.79cqw rgba(0, 0, 0, .05); font-size: 4.1cqw; color: #5A6B66; }
.ad-list li > b { font-size: 4.86cqw; font-weight: 700; color: #0F1F22; }
.ad-list li strong { display: block; font-size: 4.99cqw; font-weight: 600; color: #0F1F22; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-list li > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-list li em { font-style: normal; font-size: 3.58cqw; font-weight: 600; padding: 1.28cqw 2.82cqw; border-radius: 99px; background: #EEF0EE; color: #5A6B66; }
.ad-list li em.st-go { background: #FFE9D8; color: #B4520B; }
.ad-list li em.st-ok { background: #DDF0EC; color: #0E6E6E; }
.ad-list li em.st-new { background: #0E6E6E; color: #fff; }
.ad-list li.new { box-shadow: inset 1.54cqw 0 0 #FF7A1A, 0 0.51cqw 1.79cqw rgba(0, 0, 0, .05); }
.adp-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 3.84cqw 3.84cqw 7.68cqw; background: rgba(255, 255, 255, .96); box-shadow: 0 -1px 0 #E3E7E3; font-size: 3.58cqw; font-weight: 600; text-align: center; color: #8A9792; }
.adp-tabs span { display: flex; flex-direction: column; align-items: center; gap: 1.28cqw; }
.adp-tabs i { width: 6.91cqw; height: 6.91cqw; border-radius: 2.05cqw; box-shadow: inset 0 0 0 0.77cqw currentColor; }
.adp-tabs .is-on { color: #0E6E6E; }
.adp-tabs .is-on i { background: currentColor; }

/* both: the workshop's tool on the phone, its booking page on the site */
.linkdemo { container-type: inline-size; display: grid; grid-template-columns: 31% 1fr 52%; align-items: center; gap: 0; padding: 2cqw 0; }
.ld-phone { position: relative; container-type: inline-size; aspect-ratio: .5; overflow: hidden; border-radius: 13% / 6.5%; background: #FBF7F2; color: #2D2420; padding: 6.6cqw 2.2cqw 0; font-family: 'Instrument Sans', var(--text); box-shadow: 0 0 0 1.1cqw #16171b, 0 0 0 1.26cqw #3a3c42, 0 2.5cqw 5cqw rgba(0, 0, 0, .35); }
.ld-phone::before { content: ""; position: absolute; top: 4.6cqw; left: 50%; width: 30cqw; margin-left: -15cqw; height: 8cqw; border-radius: 99px; background: #000; }
.ldp-sb { position: absolute; top: 5.4cqw; left: 9cqw; font-size: 5.4cqw; font-weight: 600; }
.ldp-k { font-size: 5cqw; color: #8C6B52; font-weight: 600; }
.ldp-t { margin-top: 1cqw; font-size: 12cqw; font-weight: 700; letter-spacing: -.03em; }
.ldp-card { margin-top: 5cqw; padding: 6cqw; border-radius: 6cqw; background: #fff; box-shadow: 0 1cqw 3cqw rgba(45, 36, 32, .07); }
.ldp-card.is-sel { box-shadow: inset 0 0 0 .8cqw #B5653A, 0 1cqw 3cqw rgba(45, 36, 32, .07); }
.ldp-n { font-size: 6cqw; font-weight: 700; }
.ldp-d { margin-top: 1cqw; font-size: 4.6cqw; color: #8C7B70; }
.ldp-v { margin-top: 3cqw; font-size: 4.6cqw; font-weight: 600; }
.ldp-v > span { display: block; overflow: hidden; }
.ldp-v [data-ld-app] { display: inline-block; }
.ldp-bar { display: block; margin-top: 2cqw; height: 2.4cqw; border-radius: 99px; background: #EFE7DF; overflow: hidden; }
.ldp-bar i { display: block; height: 100%; width: 75%; border-radius: inherit; background: #B5653A; transition: width .6s var(--ease); }
.ldp-btn { margin-top: 5cqw; padding: 4.4cqw; border-radius: 5cqw; background: #2D2420; color: #FBF7F2; text-align: center; font-size: 5cqw; font-weight: 600; }
.ld-path { width: 100%; height: 120px; overflow: visible; }
.ld-path path { fill: none; stroke: var(--abricot); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 10; vector-effect: non-scaling-stroke; }
.ld-spark { fill: var(--abricot); filter: drop-shadow(0 0 6px rgba(255, 178, 63, .9)); }
.ld-site { container-type: inline-size; overflow: hidden; border-radius: 14px; background: #FBF7F2; color: #2D2420; box-shadow: 0 24px 50px rgba(20, 18, 21, .22); }
.lds-bar { height: 7cqw; display: flex; gap: 1.6cqw; align-items: center; padding: 0 3.4cqw; background: #EFE7DF; }
.lds-bar i { width: 2cqw; height: 2cqw; border-radius: 50%; background: rgba(45, 36, 32, .25); }
.lds-bar span { margin: 0 auto; transform: translateX(-5cqw); padding: .8cqw 6cqw; border-radius: 99px; background: rgba(45, 36, 32, .07); font: 500 2.6cqw/1 var(--text); color: rgba(45, 36, 32, .7); }
.lds-ph { aspect-ratio: 2.3; overflow: hidden; }
.lds-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lds-in { padding: 4.6cqw 6cqw 6cqw; font-family: 'Inter', var(--text); }
.ld-m { font-family: 'Fraunces', var(--serif); font-size: 3.4cqw; letter-spacing: .14em; text-transform: uppercase; color: #8C6B52; }
.lds-t { margin-top: 1.4cqw; font-family: 'Fraunces', var(--serif); font-weight: 400; font-size: 7.6cqw; line-height: 1.02; letter-spacing: -.02em; }
.lds-p { margin-top: 1.6cqw; font-size: 3.4cqw; color: #7A6A60; }
.ld-row { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; margin-top: 4cqw; padding: 3cqw 3.4cqw; border-radius: 2.4cqw; background: #fff; font-size: 3.6cqw; transition: background-color .5s; }
.ld-row.is-hit { background: rgba(255, 178, 63, .3); }
.ld-row b { font-weight: 500; color: #B5653A; overflow: hidden; white-space: nowrap; }
.ld-row b span { display: inline-block; }
.ld-row.is-full b { color: #A33; }
.lds-btn { margin-top: 3cqw; padding: 3.6cqw; border-radius: 99px; background: #2D2420; color: #FBF7F2; text-align: center; font-size: 3.8cqw; font-weight: 500; transition: background-color .4s, color .4s; }
.lds-btn.is-off { background: #E6DED6; color: #9A8C82; }

/* ==========================================================================
   MÉTHODE
   ========================================================================== */
.method { padding: 14vh var(--m) 16vh; background: var(--creme); }
.track { position: relative; margin-top: 9vh; --p: 0; }
.track-line { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 46px; height: 3px; border-radius: 3px; background: rgba(20, 18, 21, .1); }
.tl-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--framboise); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.track-bead { position: absolute; z-index: 3; top: 46px; left: calc(100% / 12 + (100% - 100% / 6) * var(--p)); width: 34px; height: 34px; margin: -17px 0 0 -17px; color: var(--framboise); }
.stops { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.stop { text-align: center; }
.scene { position: relative; width: 104px; height: 92px; margin: 0 auto 26px; filter: grayscale(1); opacity: .45; transition: filter .6s var(--ease), opacity .6s var(--ease), transform .6s var(--pop); }
.stop.is-on .scene { filter: none; opacity: 1; transform: translateY(-4px); }
.stop h3 { font-family: var(--disp); font-variation-settings: var(--dv-m); font-weight: 760; font-size: clamp(19px, 1.5vw, 24px); letter-spacing: -.03em; }
.stop p { margin: 8px auto 0; max-width: 17ch; font-size: 15px; color: var(--mute); line-height: 1.4; }
.scene i { position: absolute; display: block; }
.sc-1 .b1 { left: 4px; top: 14px; width: 62px; height: 40px; border-radius: 18px 18px 18px 4px; background: var(--pistache); }
.sc-1 .b2 { right: 4px; top: 44px; width: 52px; height: 34px; border-radius: 16px 16px 4px 16px; background: var(--framboise); }
.sc-2 i { width: 40px; height: 40px; border-radius: 4px; }
.sc-2 i:nth-child(1) { left: 6px; top: 22px; background: var(--abricot); transform: rotate(-8deg); }
.sc-2 i:nth-child(2) { left: 32px; top: 10px; background: var(--pistache); transform: rotate(5deg); }
.sc-2 i:nth-child(3) { left: 58px; top: 34px; background: var(--framboise); transform: rotate(-3deg); }
.sc-3 .sk { left: 8px; top: 8px; width: 62px; height: 48px; border-radius: 8px; border: 2px dashed var(--encre); }
.sc-3 .sc { left: 34px; top: 34px; width: 62px; height: 48px; border-radius: 8px; background: var(--framboise); box-shadow: inset 0 9px 0 rgba(20, 18, 21, .15); }
.sc-4 i { left: 14px; height: 14px; border-radius: 4px; background: var(--encre); }
.sc-4 i:nth-child(1) { top: 10px; width: 76px; }
.sc-4 i:nth-child(2) { top: 30px; width: 48px; background: var(--pistache); }
.sc-4 i:nth-child(3) { top: 50px; width: 64px; }
.sc-4 i:nth-child(4) { top: 70px; width: 34px; background: var(--framboise); }
.sc-5 .sw { left: 12px; top: 22px; width: 80px; height: 46px; border-radius: 99px; background: var(--pistache); }
.sc-5 .sw::after { content: ""; position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border-radius: 50%; background: var(--encre); }
.sc-6 { display: grid; grid-template-columns: repeat(3, 26px); gap: 6px; justify-content: center; align-content: center; }
.sc-6 i { position: static; width: 26px; height: 26px; border-radius: 6px; background: rgba(20, 18, 21, .12); }
.sc-6 i.on { background: var(--abricot); }
.method-foot { margin-top: 9vh; text-align: center; font-size: clamp(18px, 1.5vw, 22px); }
.method-foot b { font-weight: 700; background: linear-gradient(var(--pistache), var(--pistache)) 0 88% / 100% .3em no-repeat; }

/* ==========================================================================
   PROJETS
   ========================================================================== */
.work { --tint: var(--creme); padding: 12vh var(--m) calc(16vh + 48px); background: var(--tint); transition: background-color .7s var(--ease); }
.work-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.work-note { font-size: 14px; color: var(--mute); }
.mosaic { margin-top: 6vh; display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px 18px; align-items: start; }
.card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.c-prov { grid-column: span 4; }
.c-bl, .c-reg { grid-column: span 4; }
.cv { position: relative; border-radius: 22px; overflow: hidden; container-type: inline-size; transition: transform .6s var(--pop), box-shadow .6s var(--ease); box-shadow: 0 2px 0 rgba(20, 18, 21, .04); }
.c-bl .cv { aspect-ratio: 2; }
.c-reg .cv { aspect-ratio: 2; }
.card:active .cv { transform: translateY(-4px) scale(.985); }
.card:hover .cv, .card:focus-visible .cv { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(20, 18, 21, .18); }
.ci { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; }
.ci b { font-family: var(--disp); font-variation-settings: var(--dv-m); font-size: 24px; font-weight: 760; letter-spacing: -.03em; }
.ci span { font-size: 15px; color: var(--mute); text-align: right; }
.ci .offer { display: inline-block; margin-right: 6px; padding: 5px 10px; border-radius: 99px; font-style: normal; font-size: 13px; font-weight: 650; color: var(--encre); vertical-align: 1px; }
.o-site { background: var(--framboise); } .o-app { background: var(--pistache); } .o-both { background: var(--abricot); }
.ci .real { color: var(--encre); font-weight: 650; font-size: inherit; }
.pv { position: absolute; inset: 0; overflow: hidden; }

/* La Régence (real site): the site itself, on a computer and on a phone, over its own
   parchment and wine tones */
.pv-reg { --u: .72cqw; background: radial-gradient(120% 90% at 20% 0%, #F3EADC 0%, #E6D6C1 60%, #D9C3A8 100%); }
.rgd { position: absolute; left: calc(var(--u) * 9); top: calc(var(--u) * 6.6); width: calc(var(--u) * 98); border-radius: calc(var(--u) * 1.4); overflow: hidden; background: #1a0c10; box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 5) rgba(58, 16, 30, .32), 0 0 0 1px rgba(58, 16, 30, .12); }
.rgd-bar { display: flex; align-items: center; gap: calc(var(--u) * .6); height: calc(var(--u) * 3.4); padding: 0 calc(var(--u) * 1.4); background: #24131a; }
.rgd-bar i { width: calc(var(--u) * .9); height: calc(var(--u) * .9); border-radius: 50%; background: rgba(245, 236, 217, .22); }
.rgd-bar span { margin: 0 auto; transform: translateX(calc(var(--u) * -2)); padding: calc(var(--u) * .35) calc(var(--u) * 3); border-radius: 99px; background: rgba(245, 236, 217, .09); color: rgba(245, 236, 217, .78); font: 500 calc(var(--u) * 1.1)/1 var(--text); letter-spacing: .02em; }
.rgd img { display: block; width: 100%; height: auto; }
.rgp { position: absolute; z-index: 2; left: calc(var(--u) * 100.5); top: calc(var(--u) * 8); width: calc(var(--u) * 25); height: calc(var(--u) * 54); border-radius: calc(var(--u) * 3.4); overflow: hidden; background: #1a0c10; box-shadow: 0 0 0 calc(var(--u) * 1) #16171b, 0 0 0 calc(var(--u) * 1.12) #3a3c42, 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(58, 16, 30, .38); }
.rgp::before { content: ""; position: absolute; z-index: 2; top: calc(var(--u) * 1.2); left: 50%; width: calc(var(--u) * 7); height: calc(var(--u) * 2); margin-left: calc(var(--u) * -3.5); border-radius: 99px; background: #000; }
.rgp-sb { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: calc(var(--u) * 4.2); display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--u) * 2.4) 0 calc(var(--u) * 2.6); background: #1a0c10; color: #f5ecd9; }
.rgp-sb b { font: 650 calc(var(--u) * 1.1)/1 var(--text); }
.rgp-sb span { display: flex; align-items: flex-end; gap: calc(var(--u) * .2); }
.rgp-sb i { width: calc(var(--u) * .35); border-radius: calc(var(--u) * .1); background: #f5ecd9; }
.rgp-sb i:nth-child(1) { height: calc(var(--u) * .5); } .rgp-sb i:nth-child(2) { height: calc(var(--u) * .75); } .rgp-sb i:nth-child(3) { height: calc(var(--u) * 1); }
.rgp-sb i:nth-child(4) { width: calc(var(--u) * 2); height: calc(var(--u) * 1); margin-left: calc(var(--u) * .5); border-radius: calc(var(--u) * .3); background: none; box-shadow: inset 0 0 0 calc(var(--u) * .14) #f5ecd9, inset 0 0 0 calc(var(--u) * .35) #1a0c10, inset 0 0 0 calc(var(--u) * 1) #f5ecd9; }
.rgp-scr { position: absolute; top: calc(var(--u) * 4.2); left: 0; right: 0; bottom: 0; overflow: hidden; }
.rgp-feed { will-change: transform; }
.rgp-feed img { display: block; width: 100%; height: auto; }

/* BatiLog (real): the boss's dashboard and the worker's phone, in BatiLog's own system
   (blue #1B6FD2, white cards, dark sidebar, Inter, the mountain drawing). Sizes use --u so
   the phone layout can scale the whole scene up instead of shrinking the text to nothing. */
.pv-bl { --u: .72cqw; --bl: #1B6FD2; background: #EDF2F9; font-family: 'Inter', var(--text); color: #111827; }
.pv-bl::before { content: ""; position: absolute; inset: auto 0 0; height: 70%; background: url(img/batilog/montagnes.webp) 50% 100% / 115% auto no-repeat; opacity: .55; }
.bld { position: absolute; left: calc(var(--u) * 11.5); top: calc(var(--u) * 6.4); width: calc(var(--u) * 92); height: calc(var(--u) * 61); display: grid; grid-template-columns: calc(var(--u) * 12.5) 1fr; border-radius: calc(var(--u) * 1.6); overflow: hidden; background: #FBFBFD; box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(20, 30, 60, .14), 0 0 0 1px rgba(20, 30, 60, .05); }
.bld-side { background: #14191F; padding: calc(var(--u) * 2.2) calc(var(--u) * 1.2); display: flex; flex-direction: column; gap: calc(var(--u) * .35); }
.bld-side p { display: flex; align-items: center; gap: calc(var(--u) * .8); color: #fff; font-size: calc(var(--u) * 1.45); font-weight: 650; margin-bottom: calc(var(--u) * 1.8); }
.bld-side img { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: calc(var(--u) * .6); }
.bld-side i { font-style: normal; font-size: calc(var(--u) * 1.1); color: #9CA3AF; padding: calc(var(--u) * .85) calc(var(--u) * 1); border-radius: calc(var(--u) * .7); white-space: nowrap; }
.bld-side i.is-on { background: #353C44; color: #fff; }
.bld-main { padding: calc(var(--u) * 2.4) calc(var(--u) * 2.4) 0; min-width: 0; }
.bld-h { font-size: calc(var(--u) * 2.1); font-weight: 700; letter-spacing: -.02em; }
.bld-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * 1.6); }
.bld-kpi p, .bld-card { background: #fff; border-radius: calc(var(--u) * 1.1); box-shadow: 0 0 0 1px #E5E7EB; }
.bld-kpi p { padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4); }
.bld-kpi span { display: block; font-size: calc(var(--u) * 1.1); font-weight: 600; color: #374151; }
.bld-kpi b { display: block; font-size: calc(var(--u) * 2.7); font-weight: 700; margin: calc(var(--u) * .5) 0 calc(var(--u) * .1); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bld-kpi small { font-size: calc(var(--u) * 1); color: #6B7280; }
.bld-kpi p.is-hit { box-shadow: 0 0 0 calc(var(--u) * .25) var(--bl); }
.bld-row { display: grid; grid-template-columns: 1.08fr 1fr; gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * 1.1); }
.bld-card { padding: calc(var(--u) * 1.4); }
.bld-ct { font-size: calc(var(--u) * 1.25); font-weight: 650; }
.bld-dn { display: flex; align-items: center; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.3); }
.bld-dn svg { flex: none; width: calc(var(--u) * 11.5); height: calc(var(--u) * 11.5); transform: rotate(-90deg); }
.bld-dn circle { fill: none; stroke: var(--c); stroke-width: 6.4; }
.bld-dn ul { flex: 1; min-width: 0; display: grid; gap: calc(var(--u) * .75); }
.bld-dn li { display: flex; align-items: center; gap: calc(var(--u) * .6); font-size: calc(var(--u) * 1.02); color: #374151; }
.bld-dn li::before { content: ""; flex: none; width: calc(var(--u) * .9); height: calc(var(--u) * .9); border-radius: 50%; background: var(--c); }
.bld-dn li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-dn li b { margin-left: auto; font-weight: 650; color: #111827; font-variant-numeric: tabular-nums; }
.bld-recent ul { margin-top: calc(var(--u) * .6); }
.bld-recent li { display: grid; grid-template-columns: calc(var(--u) * 2.3) 1fr auto auto; gap: calc(var(--u) * .8); align-items: center; padding: calc(var(--u) * .72) 0; border-top: 1px solid #F0F1F4; font-size: calc(var(--u) * 1.05); overflow: hidden; }
.bld-recent li:first-child { border-top: 0; }
.bld-recent li > span:nth-of-type(2) { font-weight: 600; font-variant-numeric: tabular-nums; }
.bld-recent b { font-weight: 600; white-space: nowrap; }
.pv-bl .av { width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: calc(var(--u) * 1.05); font-weight: 650; }
.pv-bl .bdg { font-style: normal; font-size: calc(var(--u) * .95); font-weight: 550; padding: calc(var(--u) * .3) calc(var(--u) * .8); border-radius: 99px; }
.pv-bl .bdg.sent { background: #E6F1EB; color: #3D7A5E; }
.pv-bl .bdg.ok { background: #E1F3EB; color: #2F6E4F; }
.bld-new.is-hit { background: #EAF2FE; }
.blp { position: absolute; z-index: 2; left: calc(var(--u) * 100.5); top: calc(var(--u) * 10.4); width: calc(var(--u) * 25); height: calc(var(--u) * 56); display: flex; flex-direction: column; padding: calc(var(--u) * 4.6) calc(var(--u) * 1.9) calc(var(--u) * 1.9); border-radius: calc(var(--u) * 3.4); background: #fff; box-shadow: 0 0 0 calc(var(--u) * 1) #16171b, 0 0 0 calc(var(--u) * 1.12) #3a3c42, 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(20, 30, 60, .3); }
/* a phone, not a card: dark bezel, island, status bar */
.blp::before { content: ""; position: absolute; top: calc(var(--u) * 1.2); left: 50%; width: calc(var(--u) * 7); height: calc(var(--u) * 2); margin-left: calc(var(--u) * -3.5); border-radius: 99px; background: #16171b; }
.blp-sb { position: absolute; top: calc(var(--u) * 1.35); left: calc(var(--u) * 2.6); right: calc(var(--u) * 2.4); display: flex; justify-content: space-between; align-items: center; }
.blp-sb b { font-size: calc(var(--u) * 1.1); font-weight: 650; }
.blp-sb span { display: flex; align-items: flex-end; gap: calc(var(--u) * .2); }
.blp-sb i { width: calc(var(--u) * .35); border-radius: calc(var(--u) * .1); background: #111827; }
.blp-sb i:nth-child(1) { height: calc(var(--u) * .5); } .blp-sb i:nth-child(2) { height: calc(var(--u) * .75); } .blp-sb i:nth-child(3) { height: calc(var(--u) * 1); }
.blp-sb i:nth-child(4) { width: calc(var(--u) * 2); height: calc(var(--u) * 1); margin-left: calc(var(--u) * .5); border-radius: calc(var(--u) * .3); background: none; box-shadow: inset 0 0 0 calc(var(--u) * .14) #111827, inset 0 0 0 calc(var(--u) * .35) #fff, inset 0 0 0 calc(var(--u) * 1) #111827; }
/* who is who: two Arobaz stickers slapped on the client's devices (Arobaz type and colours,
   not BatiLog's), each one on a corner that hides nothing important */
.bl-st { position: absolute; z-index: 3; display: flex; flex-direction: column; padding: calc(var(--u) * 1.3) calc(var(--u) * 2.2) calc(var(--u) * 1.5); border-radius: calc(var(--u) * 2); font-family: var(--disp); box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(20, 18, 21, .28); pointer-events: none; }
.bl-st small { font-family: var(--text); font-size: calc(var(--u) * 1.15); font-weight: 650; letter-spacing: .02em; }
.bl-st b { font-variation-settings: var(--dv); font-size: calc(var(--u) * 3.9); font-weight: 820; line-height: .95; letter-spacing: -.045em; margin-top: calc(var(--u) * .3); }
.st-pat { left: calc(var(--u) * 4.5); top: calc(var(--u) * 52); background: var(--encre); color: var(--creme); transform: rotate(-5deg); }
.st-pat small { color: var(--pistache); }
.st-ouv { left: calc(var(--u) * 113); top: calc(var(--u) * 2.6); background: var(--pistache); color: var(--encre); transform: rotate(4deg); }
.st-ouv small { opacity: .7; }
.blp-top { display: flex; justify-content: space-between; align-items: baseline; }
.blp-top b { font-size: calc(var(--u) * 1.85); font-weight: 700; letter-spacing: -.02em; }
.blp-top span { font-size: calc(var(--u) * 1.1); color: #6B7280; }
.blp-sum { margin-top: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.5) calc(var(--u) * 1); border-radius: calc(var(--u) * 1.5); background: var(--bl); color: #fff; text-align: center; }
.blp-sum span, .blp-sum small { display: block; font-size: calc(var(--u) * 1.08); opacity: .88; }
.blp-sum b { display: block; font-size: calc(var(--u) * 3.7); font-weight: 700; letter-spacing: -.02em; margin: calc(var(--u) * .2) 0; font-variant-numeric: tabular-nums; }
.blp-days { margin-top: calc(var(--u) * .8); }
.blp-day { display: grid; grid-template-columns: calc(var(--u) * 4.6) 1fr auto calc(var(--u) * 1.6); gap: calc(var(--u) * .7); align-items: center; padding: calc(var(--u) * 1.12) 0; border-top: 1px solid #EEF0F3; }
.blp-day:first-child { border-top: 0; }
.blp-day > b { font-size: calc(var(--u) * 1.15); font-weight: 700; }
.blp-c { font-size: calc(var(--u) * 1.02); color: #4B5563; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blp-c em { display: block; font-style: normal; color: #DC2626; font-size: calc(var(--u) * .95); }
.blp-h { font-size: calc(var(--u) * 1.3); font-weight: 700; font-variant-numeric: tabular-nums; }
.blp-din { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: calc(var(--u) * .4); box-shadow: inset 0 0 0 calc(var(--u) * .14) #CBD5E1; position: relative; }
.has-din .blp-din { background: var(--bl); box-shadow: none; }
.has-din .blp-din::after { content: ""; position: absolute; left: calc(var(--u) * .55); top: calc(var(--u) * .25); width: calc(var(--u) * .4); height: calc(var(--u) * .8); border: solid #fff; border-width: 0 calc(var(--u) * .18) calc(var(--u) * .18) 0; transform: rotate(45deg); }
.blp-day.is-empty .blp-c, .blp-day.is-empty .blp-h, .blp-day.is-empty .blp-din { opacity: 0; }
.blp-day.is-empty { background: repeating-linear-gradient(90deg, #E5E7EB 0 calc(var(--u) * .5), transparent calc(var(--u) * .5) calc(var(--u) * 1)) calc(var(--u) * 5.3) 50% / calc(100% - calc(var(--u) * 5.3)) 1px no-repeat; }
.bld-bars { margin-top: calc(var(--u) * 1.1); padding-bottom: calc(var(--u) * 1); }
.bld-bars .bld-ct span { font-weight: 450; color: #6B7280; }
.bld-bars ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 2.2); height: calc(var(--u) * 11); margin-top: calc(var(--u) * 1); align-items: end; }
.bld-bars li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: calc(var(--u) * .4); }
.bld-bars b { font-size: calc(var(--u) * .95); font-weight: 600; color: #374151; font-variant-numeric: tabular-nums; }
.bld-bars i { width: 100%; max-width: calc(var(--u) * 5.6); height: calc(var(--h, .8) * calc(var(--u) * 7.4)); border-radius: calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * .15) calc(var(--u) * .15); background: linear-gradient(#1B6FD2, #4F93E6); }
.bld-bars span { font-size: calc(var(--u) * .95); color: #6B7280; }
.blp-add { margin-top: calc(var(--u) * .9); padding: calc(var(--u) * .85); border-radius: calc(var(--u) * 1); border: calc(var(--u) * .12) dashed #CBD5E1; color: #6B7280; text-align: center; font-size: calc(var(--u) * 1.05); font-weight: 550; }
.blp-btn { margin-top: auto; padding: calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1.2); background: var(--bl); color: #fff; text-align: center; font-size: calc(var(--u) * 1.25); font-weight: 650; transition: background .4s, color .4s, transform .2s; }
.blp-btn.is-press { transform: scale(.95); }
.pv-bl .b { display: none; }
.pv-bl.is-sent .blp-btn { background: #E6F1EB; color: #2F6E4F; }
.pv-bl.is-sent .blp-btn .a { display: none; }
.pv-bl.is-sent .blp-btn .b { display: inline; }

.cursor {
  position: fixed; left: 0; top: 0; z-index: 95; width: 92px; height: 92px; margin: -46px 0 0 -46px;
  display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .25s;
}
.cursor svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--framboise); transform: scale(.35); transition: transform .4s var(--pop); }
.cursor span { position: relative; font-weight: 750; font-size: 13px; transform: scale(.35); transition: transform .4s var(--pop); }
.cursor.is-on { opacity: 1; }
.cursor.is-on svg, .cursor.is-on span { transform: scale(1); }

/* ==========================================================================
   PROVENZA — a real project in the mosaic: the menu, from the app to the site
   Two pieces of the real product, redrawn from the client's interface
   (Provenza colours and type stay inside them) and staged in Arobaz.
   ========================================================================== */
.pz-frame { position: relative; overflow: hidden; border-radius: 22px; background: var(--creme-2); padding: 4.4% 3.4% 4.2%; transition: box-shadow .6s var(--ease); }
.c-prov:hover .pz-frame { box-shadow: 0 30px 60px rgba(20, 18, 21, .1); }
.pz-stage { position: relative; max-width: 1400px; margin: 0 auto; aspect-ratio: 2.05; container-type: inline-size; }
.pz-ring { position: absolute; z-index: 0; right: -4cqw; top: -6cqw; width: 21cqw; aspect-ratio: 1; border-radius: 50%; border: 4.4cqw solid var(--framboise); }
.pz-slab { position: absolute; z-index: 0; left: 0; bottom: 0; width: 22cqw; height: 30cqw; background: var(--pistache); border-radius: 3cqw; }

/* the site — Provenza's own cream, Fraunces and Inter */
.pz-site {
  position: absolute; z-index: 1; left: 26cqw; right: 0; top: 0; height: 44cqw; overflow: hidden;
  container-type: inline-size; background: #fbf5e9; color: #241708; border-radius: 2.4cqw; padding: 5cqw 5.6cqw 0;
  box-shadow: 0 2.4cqw 5cqw rgba(20, 18, 21, .13); font-family: "Inter", system-ui, sans-serif; transition: box-shadow .5s var(--ease);
}
.pz-site.is-hit { box-shadow: 0 2.4cqw 5cqw rgba(20, 18, 21, .13), 0 0 0 .35cqw var(--abricot); }
.ps-eyebrow { font-size: 1.15cqw; letter-spacing: .32em; text-transform: uppercase; color: #ab7c3d; }
.ps-title { margin-top: 1.4cqw; font: 400 5.6cqw/1 "Fraunces", Georgia, serif; letter-spacing: -.01em; }
.ps-chips { margin-top: 2.8cqw; display: flex; gap: 1.1cqw; white-space: nowrap; }
.ps-chips span { flex: none; border: 1px solid rgba(36, 23, 8, .22); border-radius: 99px; padding: 1.1cqw 2.1cqw; font-size: 1.1cqw; letter-spacing: .2em; text-transform: uppercase; color: rgba(36, 23, 8, .7); }
.ps-chips .on { background: #241708; border-color: #241708; color: #f5ecd9; }
.ps-cols { margin-top: 3.4cqw; display: grid; grid-template-columns: 1fr 30cqw; gap: 5cqw; align-items: start; }
.ps-menu li { border-bottom: 1px solid rgba(36, 23, 8, .1); padding: 2.2cqw 0; opacity: .45; transition: background-color .9s var(--ease); }
.ps-menu li.is-active { opacity: 1; }
.ps-menu li.is-hit { background-color: rgba(255, 178, 63, .2); transition: none; }
.ps-row { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; }
.ps-n { position: relative; font: 400 2.9cqw/1.15 "Fraunces", Georgia, serif; transition: color .5s .1s; }
.ps-p { position: relative; font-size: 1.45cqw; color: #6e5a41; white-space: nowrap; }
.ps-right { display: flex; align-items: baseline; gap: 1.3cqw; }
.ps-out { font-size: 1.05cqw; letter-spacing: .2em; text-transform: uppercase; color: rgba(110, 90, 65, .75); opacity: 0; transform: translateX(1cqw); transition: opacity .4s .45s, transform .5s .45s var(--ease); }
.ps-strike { position: absolute; left: 0; right: 0; top: 56%; height: max(1px, .13cqw); background: rgba(36, 23, 8, .45); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease); }
.ps-p .ps-strike { transition-delay: .2s; background: rgba(36, 23, 8, .3); }
.ps-d { margin-top: .9cqw; max-width: 48cqw; font-size: 1.45cqw; line-height: 1.55; color: #6e5a41; }
.ps-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.ps-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
li.is-out .ps-n { color: rgba(36, 23, 8, .5); }
li.is-out .ps-strike { transform: scaleX(1); }
li.is-out .ps-out { opacity: 1; transform: none; }

/* the app — Provenza's dark warm interface (tokens from the client's code) */
.pz-app {
  position: absolute; z-index: 3; left: 2.5cqw; top: 7cqw; width: 29cqw; height: 41cqw; overflow: hidden;
  container-type: inline-size; background: #14100e; color: #f6ece0; border: 1px solid #3a2f27; border-radius: 2.6cqw;
  box-shadow: 0 3.4cqw 6.4cqw rgba(20, 18, 21, .34); transform: rotate(-3deg); font-family: "Inter", system-ui, sans-serif;
}
.pz-app svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pa-head { display: flex; align-items: center; gap: 3cqw; padding: 6.4cqw 6.4cqw 5.2cqw; border-bottom: 1px solid #2a221c; }
.pa-back, .pa-globe { display: grid; place-items: center; color: #b7a48e; }
.pa-back svg { width: 6.4cqw; height: 6.4cqw; }
.pa-globe { margin-left: auto; }
.pa-globe svg { width: 5.6cqw; height: 5.6cqw; }
.pa-title { font: 400 8cqw/1.1 "Fraunces", Georgia, serif; }
.pa-body { padding: 5.6cqw 6.4cqw 7cqw; }
.pa-sec { font-size: 2.9cqw; letter-spacing: .22em; text-transform: uppercase; color: #e8b657; margin-bottom: 3.6cqw; }
.pa-chips { display: flex; gap: 2cqw; white-space: nowrap; margin-bottom: 6.4cqw; }
.pa-chips span { flex: none; height: 10.4cqw; display: inline-flex; align-items: center; padding: 0 5.2cqw; border: 1px solid #3a2f27; border-radius: 99px; font-size: 3.6cqw; color: #b7a48e; }
.pa-chips .on { border-color: #e8b657; background: rgba(232, 182, 87, .12); color: #e8b657; }
.pa-card { background: #1d1714; border: 1px solid #2a221c; border-radius: 4.6cqw; padding: 4.6cqw; transition: opacity .45s var(--ease); }
.pa-card.is-out { opacity: .55; }
.pa-top { display: flex; align-items: flex-start; gap: 3.6cqw; }
.pa-thumb { flex: none; width: 15cqw; height: 15cqw; border-radius: 3.4cqw; object-fit: cover; }
.pa-txt { flex: 1; min-width: 0; }
.pa-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2cqw 1.6cqw; font-size: 4.2cqw; line-height: 1.25; }
.pa-out { font-size: 2.6cqw; letter-spacing: .12em; text-transform: uppercase; color: #7d6d5c; border: 1px solid #3a2f27; border-radius: 99px; padding: .5cqw 2.2cqw; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .45s var(--pop); }
.pa-card.is-out .pa-out { opacity: 1; transform: none; }
.pa-desc { margin-top: 1.2cqw; font-size: 3.1cqw; line-height: 1.45; color: #b7a48e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-price { flex: none; font-size: 3.7cqw; white-space: nowrap; }
.pa-actions { display: flex; align-items: center; gap: 1.6cqw; margin-top: 3.6cqw; }
.pa-btn, .pa-edit { display: inline-flex; align-items: center; gap: 2cqw; min-height: 11cqw; padding: 0 3.8cqw; border-radius: 99px; white-space: nowrap; font: 400 2.9cqw/1 "Inter", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #b7a48e; }
.pa-btn { position: relative; border: 1px solid transparent; background: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.pa-btn svg, .pa-edit svg { flex: none; width: 3.8cqw; height: 3.8cqw; }
.pa-btn:hover { background: #322822; color: #f6ece0; }
.pa-btn:focus-visible { outline: 2px solid var(--abricot); outline-offset: 2px; }
.pa-btn .i-ok, .pa-btn[aria-pressed="true"] .i-x { display: none; }
.pa-btn[aria-pressed="true"] .i-ok { display: block; }
.pa-btn[aria-pressed="true"] { border-color: rgba(126, 168, 106, .5); color: #7ea86a; }
.pa-btn[aria-pressed="true"]:hover { background: #22301d; }
/* Arobaz invitation: a pistache ring breathes around the one thing to touch */
.pa-btn::after { content: ""; position: absolute; inset: -1.6cqw; border-radius: 99px; border: .9cqw solid var(--pistache); opacity: 0; pointer-events: none; }
.pz-stage:not(.is-touched) .pa-btn.is-invite::after { animation: pz-invite 2.2s var(--ease) infinite; }
@keyframes pz-invite { 0% { opacity: 0; transform: scale(.9); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } }
.pa-next { margin-top: 2.8cqw; }

.pz-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
.pz-bead { position: absolute; left: 0; top: 0; z-index: 6; width: 2.3cqw; height: 2.3cqw; margin: -1.15cqw 0 0 -1.15cqw; border-radius: 50%; border: .7cqw solid var(--framboise); pointer-events: none; }
.pz-pulse { position: absolute; left: 0; top: 0; z-index: 6; width: 3cqw; height: 3cqw; margin: -1.5cqw 0 0 -1.5cqw; border-radius: 50%; border: .4cqw solid currentColor; pointer-events: none; }

/* ==========================================================================
   SIGNATURE — "Un geste dans l'outil. Le site suit." (a fictional hair salon)
   Valmé has its own brand: Instrument Serif + DM Sans, bone and garnet.
   Arobaz only brings the stage: ink, the ring, and the link drawn with the
   logo's geometry (right angles and 45° chamfers).
   ========================================================================== */
.sig { position: relative; z-index: 2; overflow: hidden; background: var(--encre); color: var(--creme); padding: 15vh var(--m) 17vh; margin-top: -48px; border-radius: 48px 48px 0 0; }
.sig-title { font-weight: 800; font-size: clamp(46px, 6.2vw, 116px); line-height: .92; letter-spacing: -.052em; }
[data-typo="b"] .sig-title { letter-spacing: -.025em; }
.sig-title span { display: block; }
.sig-title span + span { color: var(--framboise); padding-left: 1.2em; }
.sig-sub { margin-top: 3vh; font-size: 18px; color: var(--mute-ink); }

.nu { --nu-ink: #1E1C1A; --nu-bone: #F1ECE5; --nu-paper: #FBF9F6; --nu-line: #E6E0D8; --nu-mute: #857C73; --nu-garnet: #8C3B4A; --nu-garnet-2: #F3E3E4; --nu-sage: #4F7A5C;
  position: relative; max-width: 1400px; height: 660px; margin: 6vh auto 0; font-family: 'DM Sans', var(--text); }
.nu .b { display: none; }
.nu-ring { position: absolute; z-index: 0; right: -6%; top: -12%; width: 30%; aspect-ratio: 1; border-radius: 50%; border: clamp(40px, 5vw, 74px) solid var(--framboise); }

/* the salon's management app */
.nu-app { position: absolute; z-index: 2; left: 0; top: 0; width: 57%; height: 100%; display: grid; grid-template-columns: 172px 1fr; overflow: hidden; border-radius: 16px; background: var(--nu-paper); color: var(--nu-ink); box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.nua-side { display: flex; flex-direction: column; gap: 4px; padding: 20px 12px; background: var(--nu-ink); color: #B9B1A8; }
.nua-logo { padding: 0 10px 20px; font: 400 26px/1 'Instrument Serif', serif; color: var(--nu-bone); letter-spacing: -.01em; }
.nua-logo span { display: block; margin-top: 6px; font: 600 10px/1 'DM Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #8A827A; }
.nua-nav { position: relative; display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: inherit; font: 500 14px/1 'DM Sans', sans-serif; text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
.nua-nav svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nua-nav:hover { background: #2A2724; color: var(--nu-bone); }
.nua-nav.is-on { background: #34302C; color: #fff; }
.nua-nav.is-on::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nu-garnet-2); }
.nua-nav em { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--nu-garnet); color: #fff; font: 700 11px/20px 'DM Sans', sans-serif; font-style: normal; text-align: center; }
.nua-nav em:empty { display: none; }
.nua-nav:focus-visible, .nua-reset:focus-visible { outline: 2px solid var(--abricot); outline-offset: 2px; }
.nua-reset { margin-top: auto; height: 36px; border: 1px solid #3C3833; border-radius: 10px; background: none; color: #A39B92; font: 500 12.5px/1 'DM Sans', sans-serif; cursor: pointer; }
.nua-reset:hover { color: var(--nu-bone); border-color: #5A544D; }
.nua-main { position: relative; min-width: 0; overflow: hidden; }
.nua-pane { position: absolute; inset: 0; padding: 24px 26px; overflow: auto; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .35s var(--ease), visibility 0s .35s; }
.nua-pane.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .35s, transform .45s var(--ease); }
.nua-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--nu-line); }
.nua-k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nu-mute); }
.nua-h .nua-ht { margin-top: 4px; font: 400 32px/1 'Instrument Serif', serif; letter-spacing: -.01em; }
.nua-tip { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--nu-mute); text-align: right; }
.nua-tip::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--pistache); box-shadow: 0 0 0 4px rgba(191, 227, 107, .3); }

/* agenda */
.nua-grid { display: grid; grid-template-columns: 52px repeat(3, 1fr); gap: 6px; }
.nua-who { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; font-size: 13.5px; font-weight: 600; transition: opacity .4s; }
.nua-who img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.nua-t { align-self: center; font-size: 12px; font-weight: 600; color: var(--nu-mute); font-variant-numeric: tabular-nums; }
.nua-c { height: 50px; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; border-radius: 9px; font-size: 11.5px; line-height: 1.25; text-align: left; overflow: hidden; white-space: nowrap; transition: background-color .3s, color .3s, opacity .4s, box-shadow .3s; }
.nua-c b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.nua-c.is-bk { color: #4A2B31; background: #F3E3E4; box-shadow: inset 3px 0 0 var(--nu-garnet); }
.nua-c.is-bk.s1 { color: #2E3C33; background: #E4EEE7; box-shadow: inset 3px 0 0 var(--nu-sage); }
.nua-c.is-bk.s2 { color: #4A3A22; background: #F3EBDC; box-shadow: inset 3px 0 0 #B58A3E; }
.nua-c.is-free { border: 1.5px dashed #D6CEC4; background: transparent; color: #A39B92; font: 500 12px/1 'DM Sans', sans-serif; align-items: flex-start; cursor: pointer; }
.nua-c.is-free:hover { border-color: var(--nu-ink); color: var(--nu-ink); background: #fff; }
.nua-c.is-free:hover .a::before { content: "+ "; }
.nua-c.is-block { border-style: solid; border-color: #CFC7BE; background: repeating-linear-gradient(135deg, #EFEAE4 0 6px, #E6E0D8 6px 7px); color: #6F665E; }
.nua-c.is-block .a { display: none; } .nua-c.is-block .b { display: inline; }
.nua-c.is-off, .nua-who.is-off { opacity: .32; pointer-events: none; }
.nua-c:focus-visible { outline: 2px solid var(--abricot); outline-offset: 2px; }

/* prestations */
.nup-list { display: grid; }
.nup-list li { display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--nu-line); transition: opacity .3s; }
.nup-list li.is-hid .nup-n, .nup-list li.is-hid .nup-p { opacity: .4; }
.nup-n { font-size: 12.5px; color: var(--nu-mute); }
.nup-n b { display: block; font-size: 15px; font-weight: 600; color: var(--nu-ink); }
.nup-p { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: #F1ECE5; }
.nup-p button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: #fff; color: var(--nu-ink); font: 600 16px/1 'DM Sans', sans-serif; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.nup-p button:hover { background: var(--nu-ink); color: #fff; }
.nup-p b { min-width: 74px; text-align: center; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nup-p b::before { content: "CHF "; font-weight: 500; color: var(--nu-mute); }
.nu-sw { position: relative; width: 44px; height: 26px; border: 0; border-radius: 99px; background: #D6CEC4; cursor: pointer; transition: background-color .25s; }
.nu-sw i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .3s var(--pop); }
.nu-sw.is-on { background: var(--nu-sage); }
.nu-sw.is-on i { transform: translateX(18px); }
.nu-sw:focus-visible, .nup-p button:focus-visible, .nu-seg button:focus-visible, .nuv-ph button:focus-visible, .nu-btn:focus-visible { outline: 2px solid var(--abricot); outline-offset: 2px; }

/* équipe */
.nue-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nue-c { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px 8px; padding: 10px 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--nu-line); }
.nue-c img { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 1.15; object-fit: cover; border-radius: 9px; transition: filter .4s, opacity .4s; }
.nue-n { font-size: 12px; color: var(--nu-mute); }
.nue-n b { display: block; font-size: 15px; font-weight: 600; color: var(--nu-ink); }
.nue-st { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--nu-sage); }
.nue-c.is-off img { opacity: .45; }
.nue-c.is-off .nue-st { color: var(--nu-garnet); }
.nue-c.is-off .nue-st .a { display: none; } .nue-c.is-off .nue-st .b { display: inline; }

/* site web */
.nuv-l { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nu-mute); }
.nuv-l:first-child { margin-top: 0; }
.nuv-ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nuv-ph button { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1.6; cursor: pointer; background: none; box-shadow: 0 0 0 1px var(--nu-line); transition: box-shadow .25s, transform .25s var(--pop); }
.nuv-ph button:hover { transform: translateY(-2px); }
.nuv-ph button.is-on { box-shadow: 0 0 0 3px var(--nu-ink); }
.nuv-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nu-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: #F1ECE5; }
.nu-seg button { flex: 1; min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: #5E5750; font: 500 13px/1.2 'DM Sans', sans-serif; cursor: pointer; transition: background-color .2s, color .2s; }
.nu-seg button:hover { color: var(--nu-ink); }
.nu-seg button.is-on { background: #fff; color: var(--nu-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.nuv-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--nu-line); font-size: 12.5px; color: var(--nu-mute); }
.nuv-row b { display: block; font-size: 14px; font-weight: 600; color: var(--nu-ink); }

/* avis */
.nur-list { display: grid; gap: 12px; }
.nur-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--nu-line); transition: opacity .3s; }
.nur-s { grid-column: 1; color: #C2913A; letter-spacing: .1em; font-size: 13px; }
.nur-q { grid-column: 1; font: 400 19px/1.25 'Instrument Serif', serif; }
.nur-a { grid-column: 1; font-size: 12px; color: var(--nu-mute); }
.nu-btn { grid-column: 2; grid-row: 1 / span 3; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--nu-ink); color: #fff; font: 600 13px/1 'DM Sans', sans-serif; cursor: pointer; transition: background-color .2s, color .2s; }
.nu-btn:hover { background: var(--nu-garnet); }
.nur-list li.is-pub .nu-btn { background: #E4EEE7; color: var(--nu-sage); pointer-events: none; }
.nur-list li.is-pub .nu-btn .a { display: none; } .nur-list li.is-pub .nu-btn .b { display: inline; }

/* the Arobaz link: drawn from the control that changed to the place it lands */
.nu-link { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nu-wire { fill: none; stroke: var(--abricot); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.nu-bead { position: absolute; z-index: 4; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 7px solid var(--framboise); pointer-events: none; }

/* the salon's website */
.nu-site { position: absolute; z-index: 1; right: 0; top: 34px; width: 38%; height: calc(100% - 68px); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--nu-bone); color: var(--nu-ink); box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.nus-bar { flex: none; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #E4DDD4; }
.nus-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(30, 28, 26, .2); }
.nus-bar span { margin: 0 auto; transform: translateX(-20px); padding: 4px 18px; border-radius: 99px; background: rgba(30, 28, 26, .06); font: 500 11.5px/1 var(--text); color: rgba(30, 28, 26, .7); }
.nus-scroll { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.nus-ann { display: grid; grid-template-rows: 0fr; background: var(--nu-garnet); color: #fff; text-align: center; font-size: 12.5px; font-weight: 600; transition: grid-template-rows .45s var(--ease); }
.nus-ann span { min-height: 0; overflow: hidden; }
.nus-ann.is-on { grid-template-rows: 1fr; }
.nus-ann.is-on span { padding: 9px 12px; }
.nus-nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
.nus-logo { font: 400 26px/1 'Instrument Serif', serif; letter-spacing: -.01em; }
.nus-menu { display: flex; gap: 14px; font-size: 12px; color: #5E5750; }
.nus-hero { padding: 0 20px 22px; }
.nus-ph { position: relative; aspect-ratio: 1.5; overflow: hidden; border-radius: 120px 120px 10px 10px; }
.nus-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.nus-ph img.is-on { opacity: 1; transform: none; }
.nus-k { margin-top: 18px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--nu-mute); }
.nus-title { margin-top: 8px; font: 400 44px/.98 'Instrument Serif', serif; letter-spacing: -.02em; }
.nus-title em { color: var(--nu-garnet); }
.nus-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.nus-btn { padding: 12px 20px; border-radius: 99px; background: var(--nu-ink); color: var(--nu-bone); font-size: 13px; font-weight: 600; transition: background-color .4s; }
.nus-btn.is-call { background: transparent; color: var(--nu-ink); box-shadow: inset 0 0 0 1.5px var(--nu-ink); }
.nus-next { font-size: 12.5px; color: var(--nu-sage); font-weight: 600; }
.nus-next::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.nus-next.is-none { color: var(--nu-garnet); }
.nus-sec { margin: 0 20px; padding: 20px 0; border-top: 1px solid #DDD5CB; }
.nus-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 400 25px/1 'Instrument Serif', serif; margin-bottom: 14px; }
.nus-rate { font: 500 12.5px/1 'DM Sans', sans-serif; color: var(--nu-mute); }
.nus-rate b { color: var(--nu-ink); font-weight: 700; }
.nus-slots { display: flex; flex-wrap: wrap; gap: 7px; }
.nus-slots span { padding: 8px 12px; border-radius: 99px; background: #fff; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px #DDD5CB; }
.nus-slots span small { margin-left: 5px; font-weight: 500; color: var(--nu-mute); font-size: 11px; }
.nus-slots .is-empty { background: none; box-shadow: none; padding: 0; color: var(--nu-garnet); }
.nus-pl li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 14px; }
.nus-pl li::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted #BFB5AA; }
.nus-pl li b { order: 2; font-weight: 600; font-variant-numeric: tabular-nums; }
.nus-pl li s { order: 2; color: var(--nu-mute); font-size: 12px; }
.nus-pl li .pr { color: var(--nu-garnet); }
.nus-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nus-team li { font-size: 11.5px; color: var(--nu-mute); }
.nus-team b { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 600; color: var(--nu-ink); }
.nus-tph { position: relative; display: block; aspect-ratio: .82; overflow: hidden; border-radius: 60px 60px 8px 8px; }
.nus-tph img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.nus-tph em { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 5px 4px; border-radius: 6px; background: var(--nu-garnet); color: #fff; font: 600 9.5px/1.2 'DM Sans', sans-serif; font-style: normal; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--pop); }
.nus-team li.is-off img { opacity: .4; }
.nus-team li.is-off em { opacity: 1; transform: none; }
.nus-rv { display: grid; gap: 10px; }
.nus-rv li { padding: 14px 16px; border-radius: 12px; background: #fff; }
.nus-rv p { font: 400 17px/1.25 'Instrument Serif', serif; }
.nus-rv span { display: block; margin-top: 6px; font-size: 11.5px; color: var(--nu-mute); }
.nus-rv span::before { content: "★★★★★  "; color: #C2913A; letter-spacing: .06em; }
.nus-foot { margin-top: 10px; padding: 18px 20px 22px; background: var(--nu-ink); color: #B9B1A8; font-size: 11.5px; line-height: 1.5; }
/* where a change lands: a short abricot flash */
.nu-hit { animation: nu-hit 1.1s var(--ease); }
@keyframes nu-hit { 0% { outline-color: rgba(255, 178, 63, 0); } 20% { outline-color: rgba(255, 178, 63, 1); } 70% { outline-color: rgba(255, 178, 63, .8); } 100% { outline-color: rgba(255, 178, 63, 0); } }
.nu-hit { outline: 4px solid rgba(255, 178, 63, 0); outline-offset: 4px; }
.nus-sec.nu-hit, .nus-hero.nu-hit { border-radius: 12px; }
.nu-back { position: fixed; z-index: 90; left: 50%; bottom: 18px; transform: translateX(-50%); }
.nu-back button { height: 48px; padding: 0 22px; border: 0; border-radius: 99px; background: var(--creme); color: var(--encre); font: 650 15px/1 var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); cursor: pointer; }

/* ---- demo layout v2: the app on a phone, the site on a desktop browser ---- */
.sig-sub { max-width: 62ch; }
.sig-k { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 3vh; padding: 9px 16px; border-radius: 99px; background: rgba(246, 241, 231, .08); color: var(--creme); font: 650 14px/1 var(--text); letter-spacing: .02em; }
.sig-k i { width: 9px; height: 9px; border-radius: 50%; background: var(--pistache); box-shadow: 0 0 0 4px rgba(191, 227, 107, .25); }
.sig-title span + span { font-size: .62em; letter-spacing: -.04em; margin-top: .12em; }
.nu { height: 720px; margin-top: 9vh; }
.nu-app { left: 2%; top: 0; width: 360px; height: 690px; grid-template-columns: 1fr; grid-template-rows: 48px 1fr 74px; border-radius: 52px; overflow: hidden; background: var(--nu-paper); box-shadow: 0 0 0 11px #121214, 0 0 0 12.5px #3a3c42, 0 50px 100px rgba(0, 0, 0, .6); }
.nu-app::before { content: ""; position: absolute; z-index: 5; top: 11px; left: 50%; width: 112px; height: 32px; margin-left: -56px; border-radius: 99px; background: #000; }
.nua-sb { grid-row: 1; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 34px; background: var(--nu-paper); }
.nua-sb b { font-size: 15px; font-weight: 600; }
.nua-sb span { display: flex; gap: 2px; align-items: flex-end; }
.nua-sb i { width: 3.5px; border-radius: 1px; background: var(--nu-ink); }
.nua-sb i:nth-child(1) { height: 5px; } .nua-sb i:nth-child(2) { height: 7.5px; } .nua-sb i:nth-child(3) { height: 10px; }
.nua-sb i:nth-child(4) { width: 22px; height: 11px; margin-left: 5px; border-radius: 3px; background: none; box-shadow: inset 0 0 0 1.4px var(--nu-ink), inset 0 0 0 3px var(--nu-paper), inset 0 0 0 10px var(--nu-ink); }
.nua-main { grid-row: 2; }
.nua-side { grid-row: 3; flex-direction: row; justify-content: space-around; align-items: flex-start; gap: 0; padding: 8px 6px 0; background: rgba(251, 249, 246, .97); color: #9A9188; box-shadow: 0 -1px 0 var(--nu-line); }
.nua-logo { display: none; }
.nua-nav { flex: 1; flex-direction: column; justify-content: flex-start; gap: 4px; height: auto; padding: 6px 0; border-radius: 12px; font-size: 10.5px; font-weight: 600; text-align: center; }
.nua-nav svg { width: 22px; height: 22px; }
.nua-nav:hover { background: none; color: var(--nu-ink); }
.nua-nav.is-on { background: none; color: var(--nu-garnet); }
.nua-nav.is-on::before { display: none; }
.nua-nav em { position: absolute; top: 0; left: 50%; margin-left: 6px; min-width: 17px; height: 17px; padding: 0 5px; font-size: 10px; line-height: 17px; }
.nua-pane { padding: 14px 18px 18px; }
.nua-h { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; }
.nua-h .nua-ht { font-size: 30px; }
.nua-tip { text-align: left; font-size: 12px; }
.nua-grid { grid-template-columns: 38px repeat(3, 1fr); gap: 5px; }
.nua-who { flex-direction: column; gap: 4px; font-size: 12px; text-align: center; }
.nua-who img { width: 28px; height: 28px; }
.nua-t { font-size: 10.5px; }
.nua-c { height: 50px; padding: 0 7px; font-size: 10px; }
.nua-c b { font-size: 11px; }
.nua-c.is-free { font-size: 11px; }
.nup-list li { grid-template-columns: 1fr auto 44px; gap: 10px; padding: 12px 0; }
.nup-n b { font-size: 14px; }
.nup-p button { width: 28px; height: 28px; }
.nup-p b { min-width: 62px; font-size: 13px; }
.nue-list { grid-template-columns: 1fr; gap: 10px; }
.nue-c { grid-template-columns: 58px 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 12px; }
.nue-c img { grid-column: 1; grid-row: 1 / span 2; width: 58px; height: 58px; aspect-ratio: 1; border-radius: 50%; }
.nue-n { grid-column: 2; grid-row: 1; align-self: end; }
.nue-st { grid-column: 2; grid-row: 2; align-self: start; }
.nue-c .nu-sw { grid-column: 3; grid-row: 1 / span 2; }
.nuv-ph { gap: 8px; }
.nu-seg button { flex: 1 1 auto; font-size: 12.5px; }
.nuv-row { padding: 12px 14px; }
.nur-list li { grid-template-columns: 1fr; padding: 14px 16px; }
.nu-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
.nur-q { font-size: 18px; }
/* captions and reset, outside the devices */
.nu-cap { position: absolute; z-index: 2; top: -40px; font-size: 13px; font-weight: 650; letter-spacing: .04em; color: var(--mute-ink); }
.nu-cap::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--pistache); vertical-align: 1px; }
.nu-cap-app { left: 2%; }
.nu-cap-site { left: calc(2% + 360px + 130px); }
.nu-cap-site::before { background: var(--framboise); }
.nu-reset { position: absolute; z-index: 2; left: calc(2% + 180px); bottom: -24px; transform: translateX(-50%); height: 42px; padding: 0 18px; border: 1px solid rgba(246, 241, 231, .2); border-radius: 99px; background: none; color: var(--creme); font: 600 14px/1 var(--text); cursor: pointer; transition: background-color .25s, border-color .25s; }
.nu-reset:hover { background: rgba(246, 241, 231, .08); border-color: rgba(246, 241, 231, .4); }
.nu-reset:focus-visible { outline: 2px solid var(--abricot); outline-offset: 3px; }
/* the site, on a desktop browser */
.nu-site { left: calc(2% + 360px + 130px); right: 0; top: 24px; width: auto; height: 640px; }
.nus-bar { height: 40px; }
.nus-nav { padding: 22px 40px; }
.nus-logo { font-size: 32px; }
.nus-menu { gap: 26px; font-size: 13.5px; }
.nus-hero { display: grid; grid-template-columns: 1fr 1.05fr; grid-template-rows: auto auto auto 1fr; column-gap: 40px; padding: 10px 40px 34px; }
.nus-ph { grid-column: 2; grid-row: 1 / span 4; aspect-ratio: 1.05; border-radius: 200px 200px 14px 14px; }
.nus-k { grid-column: 1; margin-top: 40px; }
.nus-title { grid-column: 1; font-size: 58px; }
.nus-cta { grid-column: 1; align-self: start; margin-top: 24px; }
.nus-btn { padding: 14px 24px; font-size: 14px; }
.nus-sec { margin: 0 40px; padding: 30px 0; }
.nus-h { font-size: 32px; margin-bottom: 18px; }
.nus-slots span { padding: 9px 14px; font-size: 13.5px; }
.nus-pl { columns: 2; column-gap: 50px; }
.nus-pl li { break-inside: avoid; font-size: 15px; }
.nus-team { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nus-tph { aspect-ratio: 1.1; border-radius: 120px 120px 10px 10px; }
.nus-tph em { font-size: 11px; padding: 7px; }
.nus-team b { font-size: 15px; }
.nus-rv { grid-template-columns: 1fr 1fr; }
.nus-rv p { font-size: 19px; }
.nus-foot { padding: 24px 40px 28px; font-size: 13px; }

@media (max-width: 1250px) {
  .nu-app { left: 0; transform: scale(.9); transform-origin: 0 0; }
  .nu-cap-app { left: 0; }
  .nu-reset { left: 167px; bottom: 50px; }
  .nu-site, .nu-cap-site { left: 420px; }
  .nus-hero { grid-template-columns: 1fr; }
  .nus-ph { grid-column: 1; grid-row: auto; aspect-ratio: 2; }
  .nus-k { margin-top: 20px; }
  .nus-title { font-size: 46px; }
  .nus-pl { columns: 1; }
}
/* the demo is a desktop experience: on small screens it is not shown, nor the ways into it */
@media (max-width: 899px) {
  .sig, .d-only-link { display: none !important; }
  .work { padding-bottom: calc(6vh + 48px); }   /* the demo no longer sits between Projets and Confiance */
}
@media (prefers-reduced-motion: reduce) { .nus-ph img, .nua-pane, .nus-ann { transition: none; } .nu-hit { animation: none; outline: 3px solid var(--abricot); } }

/* ==========================================================================
   CONFIANCE
   ========================================================================== */
.trust { position: relative; z-index: 3; background: var(--creme); margin-top: -48px; border-radius: 48px 48px 0 0; padding: 15vh var(--m) 18vh; display: grid; grid-template-columns: 1.5fr 1fr; gap: 5vw 6vw; align-items: start; }
.quote blockquote { font-weight: 760; font-variation-settings: var(--dv-m); font-size: clamp(30px, 3.3vw, 60px); line-height: 1.06; letter-spacing: -.035em; }
[data-typo="b"] .quote blockquote { letter-spacing: -.015em; }
.quote figcaption { margin-top: 4vh; display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--mute); }
.quote figcaption b { display: block; color: var(--encre); font-size: 16px; }
.av { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--pistache); color: var(--encre); font: 800 22px/1 var(--text); }
.facts { display: grid; gap: 12px; }
.facts p { background: #fff; border-radius: 20px; padding: 20px 24px; display: flex; align-items: center; gap: 20px; box-shadow: 0 1px 0 rgba(20, 18, 21, .05); }
.facts b { flex: none; width: 4.6ch; font-family: var(--disp); font-variation-settings: var(--dv); font-size: 40px; font-weight: 800; letter-spacing: -.04em; }
.facts p:nth-child(1) b { color: var(--framboise-d); }
.facts span { font-size: 15.5px; line-height: 1.35; }
.person { grid-column: 1; display: flex; align-items: center; gap: 22px; background: var(--pistache); border-radius: 24px; padding: 20px 28px 20px 20px; max-width: 640px; }
.person .slot-tag { margin-top: 8px; }
.ph-portrait { flex: none; position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; overflow: hidden; }
.ph-portrait svg { width: 44%; height: 44%; margin-top: -14%; color: var(--framboise); }
.ph-portrait span { position: absolute; bottom: 10px; font-size: 9.5px; font-weight: 650; color: var(--mute); }
.p-k { font-size: 14px; font-weight: 600; }
.p-n { font-family: var(--disp); font-variation-settings: var(--dv-m); font-size: 26px; font-weight: 780; letter-spacing: -.03em; margin-top: 2px; }
.p-c { margin-top: 6px; font-size: 15.5px; }
.p-c a { font-weight: 650; }
/* the real founder (photo from arobaz.ch) */
.person { max-width: 720px; }
.ph-me { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; display: block; }
.p-c { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px; background: rgba(20, 18, 21, .08); color: var(--encre); font-size: 14.5px; text-decoration: none; transition: background .25s, color .25s, transform .25s; }
.chip svg { width: 16px; height: 16px; flex: none; }
.chip:hover, .chip:focus-visible { background: var(--encre); color: var(--creme); }
.chip-wa { background: var(--encre); color: var(--creme); }
.chip-wa:hover, .chip-wa:focus-visible { background: var(--framboise); color: var(--encre); }
.chip-ic { width: 38px; padding: 0; justify-content: center; }
.chip:active { transform: scale(.96); }
/* social: footer and mobile menu */
.ft-soc, .menu-soc { display: flex; gap: 10px; margin-top: 12px; }
.ft-cols .soc, .soc { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(246, 241, 231, .22); color: var(--creme); transition: background .25s, color .25s, box-shadow .25s; }
.soc svg { width: 19px; height: 19px; }
.ft-cols .soc:hover, .soc:focus-visible { background: var(--framboise); color: var(--encre); box-shadow: none; }
.soc-lg { width: 52px; height: 52px; }
.soc:active { background: var(--framboise); color: var(--encre); box-shadow: none; }
.menu-soc { justify-content: center; margin-top: 18px; gap: 12px; }
.alt-wa svg { width: 1.05em; height: 1.05em; vertical-align: -.18em; margin-right: 5px; }
.clients { grid-column: 1 / -1; margin-top: 2vh; }
.clients-h { font-weight: 650; font-size: 15px; margin-bottom: 14px; }
.logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.logos li { height: 104px; border-radius: 18px; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--mute); }
/* real client logos, shown in ink so five very different brands sit together; sizes balanced by eye */
.logos a { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; background: rgba(20, 18, 21, .035); transition: background .3s; }
.logos img { display: block; width: auto; height: 46px; max-width: 76%; object-fit: contain; opacity: .82; transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.logos a:hover, .logos a:focus-visible { background: rgba(20, 18, 21, .07); }
.logos a:hover img, .logos a:focus-visible img { opacity: 1; transform: scale(1.04); }
.lg-regence img { height: 62px; }
.lg-adn img { height: auto; width: 80%; max-width: 80%; }
.lg-rbd img { height: 40px; }
.lg-smartaura img { height: 62px; }
.lg-animalcom img { height: 78px; }
.clients .slot-tag { margin-top: 12px; }
/* placeholders: impossible to mistake for real content, impossible to forget */
.is-slot { position: relative; }
.logos li.is-slot, .ph-portrait.is-slot, .facts p.is-slot { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(20, 18, 21, .22); background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(20, 18, 21, .035) 10px 11px); }
.facts p.is-slot b { color: var(--mute); }
.quote.is-slot blockquote { color: rgba(20, 18, 21, .38); }
.quote.is-slot .av { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(20, 18, 21, .3); color: var(--mute); }
.slot-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--encre); background: var(--creme-2); border-radius: 99px; padding: 5px 11px; margin-left: 4px; }
.slot-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--encre); }
p.slot-tag { margin-left: 0; }
.lg-halde { background: #10271f; color: #efe6d4; font: 400 22px/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; }
.lg-soma { background: #ff5c8a; color: #3a0a1c; font: 900 34px/1 var(--text); font-variation-settings: "wdth" 125; letter-spacing: -.05em; }
.lg-echo { background: #1b24ff; color: #e2ff3b; font: 900 50px/1 var(--text); font-variation-settings: "wdth" 62; }
.lg-oss { background: #fff; color: #17181c; font: 800 22px/1 var(--text); letter-spacing: -.03em; display: flex !important; gap: 8px; align-items: center; justify-content: center; }
.lg-oss i { width: 15px; height: 15px; border-radius: 4px; background: #ff5a1f; }
.lg-mira { background: #efe9df; color: #1d1a16; font: italic 400 30px/1 var(--serif); }

/* ==========================================================================
   CONTACT — the answer changes the room, then four fields unfold
   ========================================================================== */
.cta {
  margin-top: -48px; border-radius: 48px; position: relative; z-index: 4; overflow: hidden; isolation: isolate;
  background: var(--framboise); color: var(--encre);
  padding: 16vh var(--m) 14vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 620px) 1fr; align-content: start; column-gap: 4vw;
}
.cta > *:not(.cta-bg) { grid-column: 1; position: relative; z-index: 2; }
.cta > .cta-form { position: static; }                 /* the stage inside the form is placed against the section */
.choice, .fields, .cta-msg { position: relative; z-index: 2; }
.cta [hidden] { display: none !important; }
.cta-bg { position: absolute; inset: 0; z-index: 0; background: var(--pistache); clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
/* a site template: the beige of « Prêt à l'emploi » (home band, collection page) */
.cta[data-mode="template"] .cta-bg { background: #E1D0B3; }
/* three real sites of the collection, as browser windows; one is drawn out and stamped */
.cs-tpl { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cta[data-mode="template"] .cs-a { z-index: 6; }
.cs-win { position: absolute; left: 0; top: 0; margin: 0; width: 300px; opacity: 0; visibility: hidden; border-radius: 12px; overflow: hidden; background: var(--creme);
  box-shadow: 0 30px 60px rgba(20, 18, 21, .28), 0 0 0 1px rgba(20, 18, 21, .08); container-type: inline-size; }
.cs-win .b { height: 7cqw; display: flex; align-items: center; gap: 1.6cqw; padding: 0 3cqw; background: var(--encre); }
.cs-win .b i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: rgba(246, 241, 231, .35); }
.cs-win .b span { margin: 0 auto; transform: translateX(-4cqw); padding: .8cqw 3cqw; border-radius: 99px; background: rgba(246, 241, 231, .12); color: rgba(246, 241, 231, .8); font: 600 2.6cqw/1 var(--text); }
.cs-win img { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; object-position: top; }
.cs-win.is-chosen .b i:first-child { background: var(--framboise); }
.cta-title { font-weight: 800; font-size: clamp(64px, 9vw, 176px); line-height: .86; letter-spacing: -.058em; }
[data-typo="b"] .cta-title { letter-spacing: -.03em; }
.cta-lead { margin-top: 3vh; font-size: 19px; font-weight: 550; max-width: 30ch; }
.cta-form { margin-top: 5vh; }
.choice { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.choice legend { font-weight: 650; font-size: 15px; margin-bottom: 12px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-flex; align-items: center; height: 54px; padding: 0 26px; border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--encre); font-weight: 650; font-size: 16.5px; cursor: pointer;
  transition: background-color .25s, color .25s, transform .3s var(--pop);
}
.choice label:hover span { transform: translateY(-2px); }
.choice label:active span { transform: scale(.96); }
.choice input:checked + span { background: var(--encre); color: var(--creme); }
.choice input:focus-visible + span { outline: 3px solid var(--encre); outline-offset: 3px; }

/* the stage: the big ring, and what it becomes */
.cta-stage { position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; right: 0; pointer-events: none; }
.cs-ring { position: absolute; left: 0; top: 0; width: 100px; height: 100px; color: var(--encre); }
.cs-b { opacity: 0; }
.cs-track { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: var(--encre); opacity: 0; }
.cs-link { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cs-ring, .cs-track { z-index: 1; }
.cs-site, .cs-app { z-index: 3; }
.cs-spark { z-index: 4; }
.cs-link path { fill: none; stroke: var(--abricot); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 12; }
.cs-spark { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--abricot); box-shadow: 0 0 0 8px rgba(255, 178, 63, .3), 0 0 30px rgba(255, 178, 63, .8); opacity: 0; }
.cs-site, .cs-app { position: absolute; left: 0; top: 0; opacity: 0; container-type: inline-size; }
.cs-site { width: 300px; aspect-ratio: 1.4; background: var(--creme); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(20, 18, 21, .28); }
.cs-site .b { height: 11cqw; background: var(--encre); display: flex; gap: 2cqw; align-items: center; padding: 0 4cqw; }
.cs-site .b i { width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--framboise); }
.cs-site .m { margin: 7cqw 7cqw 0; font: 800 9cqw/1 var(--text); font-variation-settings: "wdth" 125; letter-spacing: -.04em; }
.cs-site .l { margin: 5cqw 7cqw 0; height: 3.4cqw; width: 60%; border-radius: 99px; background: rgba(20, 18, 21, .14); }
.cs-site .l.s { width: 42%; margin-top: 3cqw; }
.cs-site .btn-mini { margin: 6cqw 7cqw 0; width: 32cqw; height: 9cqw; border-radius: 99px; background: var(--framboise); }
.cs-app { width: 220px; background: var(--creme); border-radius: 18px; padding: 14px 16px 10px; box-shadow: 0 30px 60px rgba(20, 18, 21, .22); }
.cs-app .h { font: 780 9cqw/1 var(--text); letter-spacing: -.03em; margin-bottom: 4cqw; }
.cs-app .r { display: flex; justify-content: space-between; align-items: center; padding: 4cqw 0; border-top: 1px solid rgba(20, 18, 21, .1); font: 600 6.6cqw/1 var(--text); }
.cs-app .r i { width: 15cqw; height: 8.6cqw; border-radius: 99px; background: rgba(20, 18, 21, .18); position: relative; }
.cs-app .r i::after { content: ""; position: absolute; top: 1.2cqw; left: 1.2cqw; width: 6.2cqw; height: 6.2cqw; border-radius: 50%; background: #fff; transition: transform .4s var(--pop); }
.cs-app .r i.on { background: var(--encre); }
.cs-app .r i.on::after { transform: translateX(6.4cqw); background: var(--pistache); }

/* step 2: four fields, part of the composition */
.fields { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease); }
.fields.is-open { grid-template-rows: 1fr; }
.fields-in { min-height: 0; overflow: hidden; display: grid; gap: 12px; padding-top: 0; transition: padding-top .8s var(--ease); }
.fields.is-open .fields-in { padding-top: 26px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f { display: block; background: var(--creme); border-radius: 22px; padding: 12px 20px 10px; transition: box-shadow .2s, transform .3s var(--pop); }
.f span { display: block; font-size: 12.5px; font-weight: 650; color: var(--mute); }
.f span em { font-weight: 500; margin-left: 4px; }
.f input, .f textarea { display: block; width: 100%; border: 0; background: none; outline: none; padding: 3px 0 2px; font-size: 17px; font-weight: 550; resize: none; }
.f textarea { line-height: 1.35; }
.f:focus-within { box-shadow: 0 0 0 3px var(--encre); }
.f.is-bad { box-shadow: 0 0 0 3px var(--encre), 0 0 0 6px var(--abricot); }
.f-send { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.f-send .btn { height: 58px; }
.f-note { font-size: 13.5px; font-weight: 550; opacity: .75; }
.cta-msg { margin-top: 12px; min-height: 1.4em; max-width: 40ch; font-weight: 650; }
.cta-done { margin-top: 5vh; }
.done-t { font-family: var(--disp); font-variation-settings: var(--dv); font-weight: 800; font-size: clamp(40px, 5vw, 84px); line-height: .95; letter-spacing: -.05em; }
.done-s { margin-top: 2vh; font-size: 18px; font-weight: 550; }
.done-s .link { background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0 0 2px; margin-left: 8px; cursor: pointer; font-size: 16px; }
.cta-alt { margin-top: 5vh; font-size: 15.5px; }
.cta-alt a { font-weight: 700; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ft { position: relative; z-index: 1; margin-top: -48px; background: var(--encre); color: var(--creme); padding: calc(12vh + 48px) var(--m) 28px; }
.ft-top { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.ft-logo { width: min(34vw, 380px); aspect-ratio: 700 / 407; height: auto; color: var(--creme); display: block; --o: var(--creme); transition: --o .4s; }
.ft-top:hover .ft-logo { --o: var(--framboise); }
.ft-line { font-size: 18px; color: var(--mute-ink); text-align: right; }
.ft-cols { margin-top: 9vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ft-cols a, .ft-cols span { display: block; padding: 5px 0; font-size: 16px; color: rgba(246, 241, 231, .86); text-decoration: none; }
.ft-cols a:hover { color: var(--framboise); }
.ft-h { font-size: 13px; font-weight: 650; color: var(--mute-ink); margin-bottom: 10px; }
.ft-bot { margin-top: 9vh; padding-top: 20px; border-top: 1px solid rgba(246, 241, 231, .12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--mute-ink); }

/* ==========================================================================
   TABLET & MOBILE — recomposed, not shrunk
   ========================================================================== */
@media (max-width: 1100px) {
  .linkdemo { grid-template-columns: 30% 1fr 52%; }
  .band-in { grid-template-columns: 1fr; gap: 20px; }
  .band-l { display: none; }
  .trust { grid-template-columns: 1fr; }
  .person { grid-column: auto; }
}

@media (max-width: 899px) {
  :root { --r: 22px; }
  .d-only { display: none; }
  .m-only { display: inline; }
  
  
  
  
  

  .hero { grid-template-columns: 1fr; padding: 104px var(--m) 72px; gap: 6vh; align-content: start; }
  .hero-title { font-size: min(12.4vw, 84px); }
  [data-typo="b"] .hero-title { font-size: 13vw; }
  .hero-stage { height: 90vw; max-height: 560px; margin: 0 -2vw; }
  .hs-ring { width: 96cqw; height: 96cqw; right: -30cqw; top: 0; }
  .hero-scroll { display: none; }

  .about { padding: 10vh var(--m) 12vh; }
  .statement { font-size: 8.4vw; }

  .band-head { grid-template-columns: 1fr 44px; padding: 22px 22px; }
  .band-ic { width: 44px; height: 44px; }
  .band-in { padding: 0 22px; }
  .band.is-open .band-in { padding-bottom: 22px; }
  .band-t { font-size: 10.4vw; }
  /* the florist site, as it would look on a phone */
  .restyle { aspect-ratio: .78; }
  .rs-bar { height: 8cqw; } .rs-bar span { font-size: 3cqw; padding: 1cqw 6cqw; } .rs-bar i { width: 2.2cqw; height: 2.2cqw; }
  .rs-page { height: calc(100% - 8cqw); }
  .rs-nav { grid-template-columns: 1fr auto; padding: 4cqw 5cqw; font-size: 3.2cqw; }
  .rs-links { display: none; }
  .rs-mark { font-size: 5.4cqw; }
  .rs-hero, .restyle[data-theme="2"] .rs-hero { grid-template-columns: 1fr; grid-template-rows: 42cqw auto; }
  .rs-txt { padding: 4cqw 5cqw; }
  .rs-eye { font-size: 2.8cqw; } .rs-title { font-size: 9.6cqw; } .restyle[data-theme="1"] .rs-title { font-size: 12cqw; }
  .rs-sub { font-size: 3.4cqw; } .rs-btn, .rs-btn2 { font-size: 3.2cqw; padding: 2.6cqw 4cqw; } .rs-cta { gap: 2cqw; margin-top: 4cqw; }
  .restyle[data-theme="1"] .rs-hero { grid-template-rows: 1fr; } .restyle[data-theme="1"] .rs-txt { max-width: none; justify-content: flex-end; }
  .restyle[data-theme="2"] .rs-ph { margin: 0 5cqw; border-radius: 40cqw 40cqw 3cqw 3cqw; }
  .rs-shop { display: none; }
  .appdemo { aspect-ratio: .86; }
  .ad-map { left: 18cqw; top: 8cqw; bottom: 8cqw; }
  .adm-town { font-size: 2.6cqw; } .adm-pin { width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; font-size: 2.4cqw; } .adm-card { display: none; }
  .ad-phone { left: 2cqw; width: 56cqw; height: 115cqw; }
  .linkdemo { grid-template-columns: 1fr; justify-items: center; }
  .ld-phone { width: 58%; padding: 12.4cqw 4cqw 0; box-shadow: 0 0 0 2cqw #16171b, 0 0 0 2.3cqw #3a3c42, 0 4cqw 8cqw rgba(0, 0, 0, .35); }
  .ld-path { width: 120px; height: 90px; transform: rotate(90deg); }
  .ld-site { width: 100%; }

  .track { padding-left: 64px; margin-top: 6vh; }
  .track-line { left: 22px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .tl-fill { transform: scaleY(var(--p)); transform-origin: 50% 0; }
  .track-bead { left: 23px; top: calc(var(--p) * 100%); width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .stops { grid-template-columns: 1fr; gap: 34px; }
  .stop { display: grid; grid-template-columns: 78px 1fr; grid-template-rows: auto auto; column-gap: 18px; text-align: left; align-items: center; }
  .scene { grid-row: 1 / span 2; width: 78px; height: 70px; margin: 0; transform: scale(.78); transform-origin: 0 50%; }
  .stop.is-on .scene { transform: scale(.78); }
  .stop p { margin: 4px 0 0; }

  .mosaic { grid-template-columns: 1fr; gap: 30px; }
  .c-reg, .c-bl { grid-column: auto; }
  /* phone: the computer runs off the right edge, the phone sits in front */
  .c-reg .cv { aspect-ratio: .86; }
  .pv-reg { --u: 1.72cqw; }
  .rgd { left: 4cqw; top: 5cqw; width: 150cqw; }
  .rgp { left: auto; right: 5cqw; top: auto; bottom: 5cqw; }
  /* phone: same scene, scaled up and cropped — the dashboard runs off the right edge, the phone sits on top */
  .c-bl .cv { aspect-ratio: .7; }
  .pv-bl { --u: 1.72cqw; }
  .bld { left: 4cqw; top: calc(var(--u) * 5.4); width: calc(100% - 8cqw); grid-template-columns: 1fr; }   /* no sidebar: the figures matter more */
  .bld-side { display: none; }
  .blp { left: auto; right: calc(var(--u) * 3.4); top: auto; bottom: calc(var(--u) * 3.2); }
  .bld-kpi { grid-template-columns: repeat(3, 1fr); }
  .bld-kpi p:nth-child(4) { display: none; }
  .bld { top: calc(var(--u) * 8); }
  .bl-st { --u: 1.15cqw; }   /* smaller stickers: the screens come first on a phone */
  .st-pat { left: 2.5cqw; top: 2.5cqw; }
  .st-ouv { left: 4cqw; top: auto; bottom: 6cqw; }   /* in the free corner beside the phone */
  .ci .offer { margin-bottom: 4px; }
  .pz-frame { padding: 7% 5% 8%; }
  .ci { flex-direction: column; gap: 2px; }
  .ci span { text-align: left; }

  .sig { padding: 13vh var(--m) 14vh; margin-top: -28px; border-radius: 28px 28px 0 0; }
  .sig-title { font-size: 12.6vw; }
  .sig-title span + span { padding-left: .6em; }
  .pz-stage { aspect-ratio: auto; padding-bottom: 6cqw; }
  .pz-ring { width: 38cqw; border-width: 8cqw; right: -10cqw; top: -9cqw; }
  .pz-slab { width: 52cqw; height: 70cqw; bottom: 0; }
  .pz-site { position: relative; left: auto; height: auto; padding: 8cqw 7cqw 2cqw; border-radius: 6cqw; }
  .ps-eyebrow { font-size: 3cqw; }
  .ps-title { font-size: 10cqw; margin-top: 2.4cqw; }
  .ps-chips { margin-top: 5cqw; gap: 2cqw; }
  .ps-chips span { font-size: 2.7cqw; padding: 2.4cqw 4cqw; }
  .ps-cols { grid-template-columns: 1fr; margin-top: 4cqw; }
  .ps-photo, .ps-menu li:nth-child(3), .ps-menu li:nth-child(2) .ps-d { display: none; }
  .ps-menu li { padding: 4.4cqw 0; }
  .ps-menu li:last-child { border-bottom: 0; }
  .ps-n { font-size: 6.2cqw; }
  .ps-p { font-size: 3.4cqw; }
  .ps-out { font-size: 2.5cqw; }
  .ps-row { flex-wrap: wrap; row-gap: 1cqw; }
  .ps-d { font-size: 3.5cqw; max-width: none; margin-top: 1.6cqw; }
  .pz-app { position: relative; left: auto; top: auto; width: min(86cqw, 400px); height: auto; aspect-ratio: .83; margin: max(-12cqw, -56px) 0 0 auto; transform: rotate(-2.5deg); border-radius: min(7cqw, 30px); }
  .pz-bead { width: 6cqw; height: 6cqw; margin: -3cqw 0 0 -3cqw; border-width: 1.8cqw; }
  .pz-pulse { width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; border-width: 1cqw; }
  .trust { margin-top: -28px; border-radius: 28px 28px 0 0; }
  .cta { margin-top: -28px; border-radius: 28px; }
  .ft { margin-top: -28px; padding-top: calc(10vh + 28px); }

  .logos { grid-template-columns: 1fr 1fr; }
  .logos li { height: 84px; }
  .logos li:last-child { grid-column: 1 / -1; }
  .lg-regence img { height: 52px; } .lg-smartaura img { height: 50px; } .lg-animalcom img { height: 62px; } .lg-rbd img { height: 34px; }
  .facts b { font-size: 34px; width: auto; min-width: 2.6ch; }
  .p-n { font-size: 22px; }
  .person { flex-direction: row; padding: 16px; }
  .ph-portrait { width: 76px; height: 76px; }
  .person { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .ph-me { width: 88px; height: 88px; }
  .chip { height: 42px; }
  .chip-ic { width: 42px; }

  .cta { display: block; padding: 12vh var(--m) 9vh; min-height: 0; }
  .cta-title { font-size: 19vw; }
  .cta-stage { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: min(74vw, 400px); margin: 18px calc(var(--m) * -1) 0; }
  .f-row { grid-template-columns: 1fr; }
  .f-send .btn { width: 100%; justify-content: center; }

  .ft-top { flex-direction: column; align-items: start; }
  .ft-logo { width: 56vw; }
  .ft-line { text-align: left; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .pz-stage:not(.is-touched) .pa-btn.is-invite::after { opacity: 1; }   /* the invitation stays, still */
}

/* ---------- projects: thumbnails that open into a full-size viewer ----------
   The thumbnail IS the scene (everything inside is sized in container units), so it
   can grow to full size without a cut: the same element moves into the viewer. */
.mosaic .card { position: relative; outline: none; }
.mosaic .card .pv, .mosaic .card .pz-stage { pointer-events: none; }   /* a thumbnail is looked at, not used */
.mosaic .c-bl .cv, .mosaic .c-reg .cv, .mosaic .c-prov .pz-frame { aspect-ratio: 1.85; }
.mosaic .c-prov .pz-frame { transition: transform .6s var(--pop), box-shadow .6s var(--ease); }
.mosaic .c-prov:hover .pz-frame, .mosaic .c-prov:focus-visible .pz-frame { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(20, 18, 21, .18); }
.mosaic .ci { flex-direction: column; align-items: flex-start; gap: 6px; }
.mosaic .ci b { font-size: 22px; }
.mosaic .ci span { text-align: left; font-size: 14px; }
.pj-plus { position: absolute; z-index: 6; bottom: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: var(--encre); box-shadow: 0 6px 16px rgba(20, 18, 21, .25); transition: transform .5s var(--pop), background .3s; }
.pj-plus::before, .pj-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; border-radius: 2px; background: var(--creme); }
.pj-plus::after { transform: rotate(90deg); }
.card:hover .pj-plus, .card:focus-visible .pj-plus { transform: rotate(90deg) scale(1.1); background: var(--framboise); }
.card:focus-visible .pj-plus { box-shadow: 0 0 0 3px var(--creme), 0 0 0 6px var(--encre); }

.pj-lock { overflow: hidden; }
.pj-modal { position: fixed; inset: 0; z-index: 300; overflow-y: auto; overscroll-behavior: contain; }
.pj-modal[hidden] { display: none; }
.pj-bg { position: fixed; inset: 0; background: var(--pj-tint, var(--creme)); }
.pj-wrap { position: relative; min-height: 100%; width: min(1400px, 92vw, calc((100svh - 250px) * 1.9)); margin: 0 auto; padding: 92px 0 48px; display: flex; flex-direction: column; justify-content: center; }
.pj-stage { position: relative; }
.pj-stage [data-pj-vis] { transition: none !important; box-shadow: 0 40px 100px rgba(20, 18, 21, .22); }
.pj-stage .pj-plus { display: none; }
.pj-cap .ci { margin-top: 22px; }
.pj-cap .ci b { font-size: clamp(26px, 3vw, 40px); }
.pj-close { position: fixed; z-index: 2; top: 22px; right: 22px; width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--encre); cursor: pointer; transition: transform .4s var(--pop), background .3s; }
.pj-close span::before, .pj-close span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2.5px; margin: -1.25px 0 0 -10px; border-radius: 2px; background: var(--creme); transform: rotate(45deg); }
.pj-close span::after { transform: rotate(-45deg); }
.pj-close:hover, .pj-close:focus-visible { transform: rotate(90deg); background: var(--framboise); }
.pj-close:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
@media (max-width: 899px) {
  /* thumbnails become a swipeable row; the viewer opens full screen, scrollable */
  .mosaic { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(var(--m) * -1); margin-right: calc(var(--m) * -1); padding: 0 var(--m) 8px; scrollbar-width: none; }
  .mosaic::-webkit-scrollbar { display: none; }
  .mosaic .card { flex: 0 0 80%; scroll-snap-align: start; scroll-margin-left: var(--m); }
  .mosaic .c-bl .cv, .mosaic .c-reg .cv, .mosaic .c-prov .pz-frame { aspect-ratio: 1; }
  .pj-wrap { width: auto; margin: 0 16px; padding: 84px 0 32px; justify-content: flex-start; }
  .pj-close { top: 16px; right: 16px; width: 52px; height: 52px; }
}

/* contact card: two people, one set of contacts */
.trust .person { display: block; max-width: 760px; padding: 22px 26px 24px; }
.p-team { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin-top: 14px; }
.p-team li { display: flex; align-items: center; gap: 14px; min-width: 0; }
.p-team .ph-me { width: 84px; height: 84px; }
.p-team .p-n { margin-top: 0; font-size: 22px; line-height: 1.1; }
.p-r { margin-top: 4px; font-size: 14.5px; font-weight: 600; color: rgba(20, 18, 21, .66); }
.trust .person .p-c { margin-top: 18px; }
@media (max-width: 899px) {
  .trust .person { padding: 20px; }
  .p-team { grid-template-columns: 1fr; gap: 12px; }
  .p-team .ph-me { width: 64px; height: 64px; }
  .p-team .p-n { font-size: 20px; }
}

/* service bands: the right column explains, the left one shows */
.band-in { align-items: center; }
.band-note { max-width: 44ch; padding-bottom: 0; font-size: 17px; }
.bn-lead { font-size: clamp(19px, 1.5vw, 23px); font-weight: 600; line-height: 1.32; letter-spacing: -.01em; }
.bn-list { margin-top: 22px; display: grid; gap: 10px; }
.bn-list li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.4; }
.bn-list li::before { content: ""; position: absolute; left: 0; top: .32em; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 4px currentColor; }
.bn-cap { margin-top: 22px; padding-top: 14px; border-top: 1px solid currentColor; font-size: 14px; font-weight: 600; opacity: .6; }
.btn-c { margin-top: 26px; background: var(--creme); color: var(--encre); }
.btn-c i { width: 9px; height: 9px; border-radius: 50%; background: var(--framboise); }
.btn-c:hover { box-shadow: 0 12px 26px rgba(246, 241, 231, .18); }

/* confiance v2: the two of us on the left, two facts on the right, then the clients, bigger */
.trust { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
.trust .person { grid-column: 1; max-width: none; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding: 30px 34px; }
.trust .facts { grid-column: 2; grid-template-rows: 1fr 1fr; }
.trust .facts p { padding: 24px 28px; }
.clients { margin-top: 7vh; }
.clients-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.clients-h { margin: 0; font-family: var(--disp); font-variation-settings: var(--dv); font-weight: 800; font-size: clamp(34px, 4.2vw, 76px); line-height: .95; letter-spacing: -.045em; }
.clients-l { max-width: 32ch; font-size: 16px; color: var(--mute); text-align: right; }
.logos { gap: 14px; }
.logos li { height: 150px; border-radius: 22px; }
.logos a { background: #fff; box-shadow: 0 1px 0 rgba(20, 18, 21, .05); }
.logos a:hover, .logos a:focus-visible { background: #fff; box-shadow: 0 18px 40px rgba(20, 18, 21, .12); transform: translateY(-4px); }
.logos a { transition: transform .35s var(--pop), box-shadow .35s var(--ease); }
.logos img { opacity: .9; }
.lg-regence img { height: 78px; } .lg-adn img { width: 82%; } .lg-rbd img { height: 50px; } .lg-smartaura img { height: 76px; } .lg-animalcom img { height: 92px; }
@media (max-width: 899px) {
  .trust { grid-template-columns: 1fr; }
  .trust .person, .trust .facts { grid-column: auto; }
  .clients-top { flex-direction: column; align-items: flex-start; }
  .clients-l { text-align: left; }
  .logos li { height: 104px; }
  .lg-regence img { height: 56px; } .lg-smartaura img { height: 54px; } .lg-animalcom img { height: 66px; } .lg-rbd img { height: 36px; }
}

/* footer: legal links */
.ft-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.ft-legal a { color: rgba(246, 241, 231, .78); text-decoration: none; }
.ft-legal a:hover { color: var(--framboise); }
.f-note a { color: inherit; font-weight: 650; }

/* footer v2: four columns, the logo draws itself (outline, then fill; the "o" in framboise) */
.ft { padding: calc(8vh + 48px) var(--m) 26px; }
.ft-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.ft-brand a { display: block; width: fit-content; }
.ft-brand .ft-logo { width: min(100%, 360px); height: auto; aspect-ratio: 708 / 416; display: block; overflow: visible; }
.fl-p, .fl-o { fill: var(--creme); stroke: var(--creme); stroke-width: 2.5; stroke-linejoin: round; }
.fl-o { fill: var(--framboise); stroke: var(--framboise); }
.ft-logo.is-ready .fl-p, .ft-logo.is-ready .fl-o { fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ft-logo.is-drawn .fl-p, .ft-logo.is-drawn .fl-o { fill-opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1) .2s, fill-opacity .8s var(--ease) 1.8s; }
.ft-logo.is-drawn .fl-o { transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1) .5s, fill-opacity .8s var(--ease) 2.1s; }
.ft-line { margin-top: 18px; max-width: 30ch; font-size: 15px; text-align: left; color: var(--mute-ink); }
.ft-col a, .ft-col span { display: block; padding: 5px 0; font-size: 15.5px; color: rgba(246, 241, 231, .86); text-decoration: none; }
.ft-col a:hover { color: var(--framboise); }
.ft-col .ft-soc { margin-top: 16px; }
.ft-col .ft-soc a { display: grid; padding: 0; }
.ft-h { font-size: 13px; font-weight: 650; color: var(--mute-ink); margin-bottom: 12px; letter-spacing: .04em; text-transform: uppercase; }
.ft-bot { margin-top: 7vh; }
@media (max-width: 1000px) { .ft-grid { grid-template-columns: 1fr 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 899px) { .ft { padding-top: calc(8vh + 28px); } .ft-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .ft-brand .ft-logo { width: 62vw; } .ft-col:last-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .ft-logo.is-drawn .fl-p, .ft-logo.is-drawn .fl-o { transition: none; } }

@media (max-width: 899px) {  }

/* Provenza: a real browser window for the site, a real phone for the app (like BatiLog and La Régence) */
.pz-site { padding-top: 8.4cqw; }
.ps-bar { position: absolute; left: 0; right: 0; top: 0; height: 4.4cqw; display: flex; align-items: center; gap: .9cqw; padding: 0 2cqw; background: #EFE5D3; }
.ps-bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: rgba(36, 23, 8, .22); }
.ps-bar span { margin: 0 auto; transform: translateX(-3cqw); padding: .5cqw 4cqw; border-radius: 99px; background: rgba(36, 23, 8, .07); font: 500 1.35cqw/1 "Inter", system-ui, sans-serif; color: rgba(36, 23, 8, .7); letter-spacing: 0; text-transform: none; }
.pz-app { width: 23cqw; height: 46cqw; top: 3cqw; left: 3cqw; border: 0; border-radius: 3.6cqw; box-shadow: 0 0 0 .9cqw #0b0908, 0 0 0 1.02cqw #3a3c42, 0 3.4cqw 6.4cqw rgba(20, 18, 21, .38); }
/* inside the phone, cqw is the phone's own width */
.pz-app::before { content: ""; position: absolute; z-index: 5; top: 3.4cqw; left: 50%; width: 30cqw; height: 8.6cqw; margin-left: -15cqw; border-radius: 99px; background: #000; }
.pa-sb { display: flex; justify-content: space-between; align-items: center; height: 15cqw; padding: 3cqw 11cqw 0 13cqw; }
.pa-sb b { font-size: 4.6cqw; font-weight: 600; }
.pa-sb span { display: flex; gap: .8cqw; align-items: flex-end; }
.pa-sb i { width: 1.3cqw; border-radius: .4cqw; background: #f6ece0; }
.pa-sb i:nth-child(1) { height: 2cqw; } .pa-sb i:nth-child(2) { height: 3cqw; } .pa-sb i:nth-child(3) { height: 4cqw; }
.pa-sb i:nth-child(4) { width: 8cqw; height: 4cqw; margin-left: 1.6cqw; border-radius: 1.2cqw; background: none; box-shadow: inset 0 0 0 .5cqw #f6ece0, inset 0 0 0 1.3cqw #14100e, inset 0 0 0 4cqw #f6ece0; }
.pz-app .pa-head { padding-top: 3cqw; }
@media (max-width: 899px) {
  .pz-site { padding-top: 14cqw; }
  .ps-bar { height: 8cqw; } .ps-bar i { width: 2cqw; height: 2cqw; } .ps-bar span { font-size: 2.8cqw; padding: 1cqw 6cqw; }
  .pz-app { width: min(64cqw, 300px); aspect-ratio: .5; border-radius: 9cqw; box-shadow: 0 0 0 2.2cqw #0b0908, 0 0 0 2.5cqw #3a3c42, 0 6cqw 12cqw rgba(20, 18, 21, .38); }
}

/* rendering fix: a hovered card (transform) must not make a neighbour's clipped, scrolling
   phone screen vanish (WebKit/Chrome compositing bug with overflow + radius + will-change) */
.rgp { transform: translateZ(0); }
.rgp-scr { isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.rgp-feed { will-change: auto; }
.mosaic .card .cv, .mosaic .c-prov .pz-frame { isolation: isolate; backface-visibility: hidden; }

/* Provenza laid out like the two other projects: the desktop site on the left, the phone on the right, upright */
@media (min-width: 900px) {
  .pz-site { left: 0; right: 22cqw; }
  .pz-app { left: auto; right: 3cqw; transform: none; }
  .pz-ring { right: auto; left: -4cqw; }
  .pz-slab { left: auto; right: 0; }
}

/* Provenza sized like BatiLog and La Régence (their unit is .72cqw: desktop 98u wide, phone 25u × 54u) */
@media (min-width: 900px) {
  .pz-site { left: 6.5cqw; right: 23cqw; top: 4.8cqw; height: 42cqw; }
  .pz-app { right: 9.6cqw; top: 5.8cqw; width: 18cqw; height: 39cqw; border-radius: 3cqw; }
}
@media (min-width: 900px) {
  .c-prov .pz-frame { padding: 0; display: flex; align-items: center; }
  .c-prov .pz-stage { flex: 1; max-width: none; }
}

/* the three project scenes share one geometry (La Régence's): desktop 70.5% × 42% at (6.5%, 4.6%),
   phone 18% × 39% at (72.4%, 5.8%) of the card width */
@media (min-width: 900px) {
  .pz-site { top: 2cqw; }
  .pz-app { top: 3.25cqw; }
  .bld { left: calc(var(--u) * 9.05); top: calc(var(--u) * 6.45); width: calc(var(--u) * 97.9); height: calc(var(--u) * 58.1); }
  .blp { left: calc(var(--u) * 100.5); top: calc(var(--u) * 8.05); height: calc(var(--u) * 54); }
  .st-pat { left: calc(var(--u) * 4); }
}

/* SEO pass (2026-10-12): service titles are real headings, the caption links to the project page */
.band-h { margin: 0; font: inherit; }
.ci-more { display: none; }
.pj-cap .ci-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 18px; border-radius: 99px; background: var(--encre); color: var(--creme); font-weight: 650; font-size: 15px; text-decoration: none; transition: background .25s, color .25s; }
.pj-cap .ci-more:hover, .pj-cap .ci-more:focus-visible { background: var(--framboise); color: var(--encre); }

/* ==========================================================================
   PRÊT À L'EMPLOI (first service band, generated by tools/collection.py, motion in home-collection.js)
   Beige: the ready-made sites. Its scene: three sites drawn with shapes, one is clicked, the ring of
   the logo stamps it "À vous", it takes a client's colours piece by piece, its address types in, live.
   ========================================================================== */
.b-ready { --bg-band: #E1D0B3; background: #E1D0B3; }
.b-ready .bn-lead b { font-weight: 700; }
.b-ready .bn-cap { font-size: 14px; line-height: 1.45; opacity: .75; }
.b-ready .band-note .btn { margin-top: 22px; }

/* the scene itself: scene.css (shared with the collection page) */

/* ==========================================================================
   MÉTHODE — compact: the steps on one side, a coloured stage on the other
   where each step plays on real devices (browser, phone) with real sites
   ========================================================================== */
.mt { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5vw; align-items: center; min-height: 100vh; min-height: 100svh; padding: 100px var(--m) 5vh; }
.mt-title { font-size: clamp(36px, 3.4vw, 64px); }
.mt-lead { margin-top: 2.4vh; max-width: 30ch; color: var(--mute); font-size: clamp(17px, 1.25vw, 20px); }
.mt-now { margin-top: 4vh; }
.mt-n { font-family: var(--disp); font-variation-settings: var(--dv); font-weight: 800; font-size: 15px; color: var(--mute); font-variant-numeric: tabular-nums; }
.mt-n b { color: var(--framboise); }
.mt-cap { position: relative; height: 96px; margin-top: 12px; overflow: hidden; }
.mt-cap > div { position: absolute; left: 0; right: 0; top: 0; }
.mt-cap h3 { font-family: var(--disp); font-variation-settings: var(--dv-m); font-weight: 800; font-size: clamp(26px, 2.3vw, 40px); line-height: 1; letter-spacing: -.045em; }
.mt-cap p { margin-top: 10px; color: var(--mute); font-size: 18px; }
.mt-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 2vh 0 0; padding: 0; list-style: none; }
.mt-steps button { position: relative; display: block; width: 100%; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.mt-steps button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mt-steps button::before, .mt-steps button i { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; background: rgba(20, 18, 21, .12); }
.mt-steps button i { background: var(--encre); transform: scaleX(0); transform-origin: 0 50%; }
.mt-steps button:hover::before { background: rgba(20, 18, 21, .28); }
.mt-steps button:focus-visible { outline: 2px solid var(--framboise); outline-offset: 3px; border-radius: 4px; }

.mt-stage { position: relative; justify-self: center; width: min(100%, 600px, (100svh - 240px) * 1.15); aspect-ratio: 1.15; border-radius: 30px; overflow: hidden; background: var(--framboise); container-type: inline-size; }
.mt-ring { position: absolute; width: 64cqw; height: 64cqw; right: -16cqw; top: -15cqw; color: var(--pistache); }
.mt-sc { position: absolute; inset: 0; visibility: hidden; }
.mt-sc.is-on { visibility: visible; }
.mt-sc > * { position: absolute; margin: 0; }

/* devices, drawn like the hero's */
.mt-bw { background: #fff; border-radius: 2cqw; overflow: hidden; box-shadow: 0 5cqw 9cqw rgba(20, 18, 21, .28), 0 .6cqw 1.6cqw rgba(20, 18, 21, .1); }
.mt-bar { display: flex; align-items: center; gap: .8cqw; height: 4.4cqw; margin: 0; padding: 0 1.8cqw; background: #efe9de; }
.mt-bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #d8cfbf; }
.mt-bar span { margin-left: 2cqw; min-width: 14cqw; padding: .6cqw 2cqw; border-radius: 1cqw; background: #f8f4ec; color: #8b8378; font-size: 1.5cqw; line-height: 1.3; }
.mt-pg { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.mt-pg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mt-ph { aspect-ratio: .47; padding: 1.1cqw; border-radius: 4.8cqw; background: var(--encre); box-shadow: 0 5cqw 9cqw rgba(20, 18, 21, .32); }
.mt-scr { position: relative; height: 100%; border-radius: 3.8cqw; overflow: hidden; background: #fff; }
.mt-scr > img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mt-tag { display: inline-flex; align-items: center; gap: 1cqw; padding: 1.3cqw 2.3cqw; border-radius: 99px; font: 700 1.9cqw/1 var(--text); transform: rotate(-3deg);
  box-shadow: 0 1.4cqw 3cqw rgba(20, 18, 21, .22); white-space: nowrap; }
.mt-tag-pk { background: var(--framboise); color: var(--encre); }
.mt-tag-dk { background: var(--encre); color: #fff; }
.mt-tag-ps { background: var(--pistache); color: var(--encre); }
.mt-tag-on { background: #fff; color: var(--encre); }
.mt-tag-on i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #5fb030; }

/* 1 · the call */
.mt-s1 .mt-ph { left: 54cqw; top: 9cqw; width: 30cqw; transform: rotate(4deg); }
.mt-call { display: flex; flex-direction: column; align-items: center; padding: 5cqw 2cqw 3.6cqw; background: linear-gradient(170deg, #2e272b, #141215); color: #fff; text-align: center; }
.mt-call p { margin: 0; }
.mt-call-k { font-size: 1.4cqw; opacity: .6; }
.mt-call-av { display: flex; margin-top: 3cqw !important; }
.mt-call-av img { width: 8.6cqw; height: 8.6cqw; border-radius: 50%; object-fit: cover; border: .5cqw solid #241f22; }
.mt-call-av img + img { margin-left: -2.4cqw; }
.mt-call-n { margin-top: 1.8cqw !important; font-family: var(--disp); font-variation-settings: var(--dv-m); font-weight: 800; font-size: 2.5cqw; letter-spacing: -.02em; }
.mt-call-t { margin-top: .6cqw !important; font-size: 1.6cqw; opacity: .7; font-variant-numeric: tabular-nums; }
.mt-call-b { display: flex; gap: 7cqw; margin-top: auto !important; }
.mt-call-b i { width: 6.2cqw; height: 6.2cqw; border-radius: 50%; }
.mt-call-b .no { background: var(--framboise); }
.mt-call-b .ok { background: #5fb030; }
.mt-call-b i { display: grid; place-items: center; }
.mt-call-b svg { width: 52%; height: 52%; fill: #fff; }
.mt-call-b .no svg { transform: rotate(135deg); }
.mt-msg { padding: 1.8cqw 2.2cqw; font-size: 2cqw; line-height: 1.3; box-shadow: 0 2cqw 4cqw rgba(20, 18, 21, .18); }
.mt-msg small { display: block; margin-bottom: .6cqw; color: var(--mute); font-size: 1.35cqw; }
.mt-msg-in { left: 7cqw; top: 24cqw; width: 42cqw; min-height: 11.6cqw; border-radius: 2.4cqw 2.4cqw 2.4cqw .6cqw; background: #fff; }
.mt-msg-out { left: 15cqw; top: 41cqw; border-radius: 2.4cqw 2.4cqw .6cqw 2.4cqw; background: var(--encre); color: #fff; }

/* 2 · the brief */
.mt-s2 .mt-bw { left: 8cqw; top: 10cqw; width: 80cqw; transform: rotate(-2deg); }
.mt-brief { padding: 3.4cqw 4.4cqw; background: var(--creme); }
.mt-brief p { margin: 0; }
.mt-brief-k { color: var(--framboise-d); font-weight: 700; font-size: 1.35cqw; letter-spacing: .08em; text-transform: uppercase; }
.mt-brief-h { margin-top: .8cqw !important; font-family: var(--disp); font-variation-settings: var(--dv); font-weight: 800; font-size: 3.8cqw; letter-spacing: -.045em; line-height: 1; }
.mt-f { margin-top: 2cqw; }
.mt-f small { display: block; color: var(--mute); font-size: 1.3cqw; }
.mt-f p { margin-top: .5cqw !important; min-height: 4.4cqw; padding: 1.1cqw 1.4cqw; border-radius: 1cqw; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 18, 21, .12); font-size: 1.8cqw; }
.mt-chips { display: flex; flex-wrap: wrap; gap: .8cqw; margin-top: 2.2cqw !important; }
.mt-chips span { padding: .7cqw 1.6cqw; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(20, 18, 21, .2); font-size: 1.5cqw; font-weight: 600; transition: background-color .3s, color .3s, box-shadow .3s; }
.mt-chips span.is-on { background: var(--encre); color: #fff; box-shadow: none; }
.mt-s2 .mt-tag { right: 6cqw; bottom: 9cqw; }

/* 3 · from sketch to design */
.mt-s3 .mt-bw { left: 6cqw; top: 9cqw; width: 78cqw; transform: rotate(-2deg); }
.mt-wire { position: absolute; inset: 0; background: #fff; }
.mt-wire i { position: absolute; border-radius: .6cqw; background: #e9e4dc; }
.mt-wire i:nth-child(1) { left: 6%; top: 8%; width: 18%; height: 4%; }
.mt-wire i:nth-child(2) { left: 6%; top: 26%; width: 44%; height: 9%; }
.mt-wire i:nth-child(3) { left: 6%; top: 39%; width: 34%; height: 9%; }
.mt-wire i:nth-child(4) { left: 6%; top: 60%; width: 18%; height: 8%; border-radius: 99px; }
.mt-wire i:nth-child(5) { right: 6%; top: 22%; width: 38%; height: 60%; border-radius: 1.2cqw; }
.mt-real { clip-path: inset(0 100% 0 0); }
.mt-cut { position: absolute; top: 0; bottom: 0; left: 0; width: .35cqw; background: var(--framboise); }
.mt-cut::after { content: ""; position: absolute; top: 50%; left: -1.3cqw; width: 2.9cqw; height: 2.9cqw; margin-top: -1.45cqw; border-radius: 50%; background: var(--framboise); box-shadow: 0 0 0 .8cqw rgba(255, 77, 126, .25); }
.mt-pal { right: 5cqw; bottom: 8cqw; padding: 1.6cqw 2cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 2cqw 4cqw rgba(20, 18, 21, .2); transform: rotate(3deg); }
.mt-pal small { font-size: 1.3cqw; color: var(--mute); font-weight: 600; }
.mt-pal p { display: flex; gap: .8cqw; margin: .8cqw 0 0; }
.mt-pal i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20, 18, 21, .1); }
.mt-s3 .mt-tag { left: 8cqw; bottom: 9cqw; }

/* 4 · development */
.mt-s4 .mt-bw { left: 5cqw; top: 10cqw; width: 86cqw; transform: rotate(-1.5deg); }
.mt-dev { display: grid; grid-template-columns: 46% 54%; }
.mt-code { padding: 2.2cqw 1.8cqw; background: #1d1a1e; color: #e8e2ea; font: 500 1.5cqw/2.15 ui-monospace, "SF Mono", Menlo, monospace; }
.mt-code p { margin: 0; white-space: nowrap; overflow: hidden; }
.mt-code b { display: inline-block; width: 2.4cqw; color: #6b636d; font-weight: 400; }
.mt-code em { font-style: normal; color: var(--framboise); }
.mt-code u { text-decoration: none; color: var(--pistache); }
.mt-code s { text-decoration: none; color: var(--abricot); }
.mt-prev { position: relative; overflow: hidden; }
.mt-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.mt-s4 .mt-tag { right: 7cqw; bottom: 9cqw; }

/* 5 · going live */
.mt-s5 .mt-bw { left: 5cqw; top: 11cqw; width: 74cqw; transform: rotate(-2.5deg); }
.mt-live { clip-path: inset(0 0 100% 0); }
.mt-s5 .mt-ph { right: 6cqw; top: 30cqw; width: 23cqw; transform: rotate(4deg); }
.mt-s5 .mt-tag { left: 8cqw; bottom: 8cqw; }

/* 6 · we stay */
.mt-s6 .mt-ph { left: 9cqw; top: 7cqw; width: 32cqw; transform: rotate(-3deg); }
.mt-toasts { right: 6cqw; top: 12cqw; width: 44cqw; display: grid; gap: 1.4cqw; }
.mt-toast { display: grid; grid-template-columns: 3.6cqw 1fr; column-gap: 1.4cqw; align-items: center; margin: 0; padding: 1.6cqw 2cqw; border-radius: 2cqw; background: #fff;
  box-shadow: 0 2cqw 4cqw rgba(20, 18, 21, .16); }
.mt-toast::before { content: "✓"; grid-row: span 2; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--encre); color: var(--pistache); font-weight: 700; font-size: 1.7cqw; }
.mt-toast b { font-size: 1.85cqw; line-height: 1.2; }
.mt-toast small { color: var(--mute); font-size: 1.35cqw; }
.mt-stat { right: 8cqw; bottom: 7cqw; width: 34cqw; padding: 2cqw 2.4cqw; border-radius: 2.4cqw; background: var(--encre); color: #fff; box-shadow: 0 2cqw 4cqw rgba(20, 18, 21, .25); }
.mt-stat small { display: block; font-size: 1.35cqw; opacity: .7; }
.mt-stat b { display: block; margin-top: .4cqw; font-family: var(--disp); font-variation-settings: var(--dv); font-weight: 800; font-size: 4.8cqw; line-height: 1; letter-spacing: -.04em; color: var(--pistache); }
.mt-stat p { display: flex; align-items: flex-end; gap: .8cqw; height: 6cqw; margin: 1.2cqw 0 0; }
.mt-stat i { flex: 1; border-radius: .5cqw; background: var(--framboise); }
.mt-stat i:nth-child(1) { height: 30%; } .mt-stat i:nth-child(2) { height: 46%; } .mt-stat i:nth-child(3) { height: 40%; }
.mt-stat i:nth-child(4) { height: 62%; } .mt-stat i:nth-child(5) { height: 74%; } .mt-stat i:nth-child(6) { height: 100%; background: var(--pistache); }

@media (max-width: 899px) {
  .mt { grid-template-columns: 1fr; gap: 0; align-content: center; padding: 84px var(--m) 3vh; }
  .mt-side { display: contents; }
  .mt-title { font-size: min(9vw, 52px); }
  .mt-lead { font-size: 15px; margin-top: 1.4vh; }
  .mt-stage { order: 3; justify-self: stretch; width: 100%; aspect-ratio: 1.3; margin-top: 3vh; border-radius: 22px; }
  .mt-now { order: 4; margin-top: 2.4vh; }
  .mt-steps { order: 5; }
  .mt-cap { height: 82px; margin-top: 6px; }
  .mt-cap h3 { font-size: 28px; }
  .mt-cap p { font-size: 16px; margin-top: 6px; }
}

/* services bands: a soft volume (light from the top, a little shade at the bottom), a real shadow, and a "+" that spins as you come near */
.bands .band {
  position: relative; transition: transform .5s var(--pop), box-shadow .5s var(--ease);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 38%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .06), 0 2px 4px rgba(20, 18, 21, .06), 0 14px 30px -14px rgba(20, 18, 21, .3), 0 34px 60px -34px rgba(20, 18, 21, .35);
}
.bands .b-both { background-image: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .25) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(20, 18, 21, .12), 0 14px 30px -14px rgba(20, 18, 21, .45), 0 34px 60px -34px rgba(20, 18, 21, .5); }
.bands .band:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .06), 0 4px 8px rgba(20, 18, 21, .08), 0 22px 40px -16px rgba(20, 18, 21, .38), 0 46px 80px -40px rgba(20, 18, 21, .4); }
.bands .band.is-open:hover { transform: none; }
.band-ic { transition: transform .7s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s var(--ease); }
.band-ic::before, .band-ic::after { transition: transform .7s cubic-bezier(.3, 1.6, .5, 1), background-color .3s, width .4s var(--pop); }
.band-ic { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 0 transparent; }
.band-head:hover .band-ic { transform: rotate(180deg) scale(1.12); box-shadow: inset 0 0 0 26px currentColor, 0 0 0 7px color-mix(in srgb, currentColor 14%, transparent); }
.band-head:hover .band-ic::before, .band-head:hover .band-ic::after { width: 22px; margin-left: -11px; }
.band.is-open .band-head:hover .band-ic { transform: rotate(360deg) scale(1.12); }
@media (prefers-reduced-motion: reduce) { .bands .band, .band-ic, .band-ic::before, .band-ic::after { transition: none; } .bands .band:hover { transform: none; } }

/* MÉTHODE v3 — a dark-beige panel with depth; the steps as pills on the left, the stage plays the one pointed at */
.mt { position: relative; z-index: 2; min-height: 0; margin: 8vh var(--m) 12vh; padding: clamp(36px, 5vw, 80px) clamp(28px, 4.4vw, 72px); border-radius: clamp(28px, 3vw, 44px); background: #E1D0B3;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .06));
  box-shadow: 0 2.4vw 4.4vw -2vw rgba(20, 18, 21, .32), 0 .6vw 1.2vw -.6vw rgba(20, 18, 21, .14);   /* the hero's shadow */
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 4vw; }
.mt-lead { color: #5b5459; }
.mt-steps { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 3vh 0 0; padding: 0; list-style: none; }
.mt-steps button {
  position: relative; display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 14px; width: 100%; height: auto; padding: 8px 18px 8px 8px; overflow: hidden;
  border: 0; border-radius: 999px; background: rgba(246, 241, 231, .55); color: var(--encre); text-align: left; cursor: pointer; font: inherit;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 21, .06); transition: background-color .35s, box-shadow .35s, transform .45s var(--pop);
}
.mt-steps button::before { content: none; }
.mt-steps button b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(20, 18, 21, .08); font: 800 14px/1 var(--disp); font-variation-settings: var(--dv); font-variant-numeric: tabular-nums; transition: background-color .35s, color .35s, transform .5s var(--pop); }
.mt-steps button span { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; }
.mt-steps strong { display: block; font: 800 clamp(18px, 1.45vw, 23px)/1.05 var(--disp); font-variation-settings: var(--dv-m); letter-spacing: -.035em; }
.mt-steps small { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: 14.5px; color: #5b5459; transition: max-height .45s var(--ease), opacity .35s, margin .45s var(--ease); }
.mt-steps small::before { content: none; }
.mt-steps button i { position: absolute; left: 30px; right: 30px; top: auto; bottom: 7px; height: 3px; border-radius: 3px; background: var(--encre); opacity: .5; transform: scaleX(0); transform-origin: 0 50%; }
.mt-steps button:hover { background: rgba(246, 241, 231, .85); transform: translateX(4px); }
.mt-steps button.is-on { background: #F6F1E7; transform: translateX(8px); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(20, 18, 21, .06), 0 14px 28px -12px rgba(20, 18, 21, .3); }
.mt-steps button.is-on b { background: var(--c); color: var(--encre); transform: rotate(-8deg) scale(1.06); }
.mt-steps button[style*="#141215"].is-on b { color: #F6F1E7; }
.mt-steps button.is-on small { max-height: 2.6em; opacity: 1; margin-top: 4px; }
.mt-stage { box-shadow: 0 2px 4px rgba(20, 18, 21, .08), 0 30px 60px -24px rgba(20, 18, 21, .4); width: min(100%, 640px); }
@media (max-width: 899px) {
  .mt { margin: 6vh 12px; padding: 30px 18px; gap: 26px; }
  .mt-steps button { padding: 9px 14px 9px 9px; grid-template-columns: 38px 1fr; } .mt-steps button b { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .mt-steps button, .mt-steps button b, .mt-steps small { transition: none; } }

/* MÉTHODE · 4 steps: each scene its own composition */
.mt-fig { left: 5cqw; top: 8cqw; width: 84cqw; border-radius: 1.8cqw; overflow: hidden; background: #1E1C20; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 3cqw 6cqw -1cqw rgba(20, 18, 21, .45); transform: perspective(1800px) rotateY(10deg) rotateX(3deg); }
.mt-fig-bar { display: flex; align-items: center; gap: .8cqw; height: 4.6cqw; margin: 0; padding: 0 1.6cqw; background: #2A272C; color: #CFC8C2; font: 600 1.35cqw/1 var(--text); }
.mt-fig-bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #FF5F57; } .mt-fig-bar i:nth-child(2) { background: #FEBC2E; } .mt-fig-bar i:nth-child(3) { background: #28C840; }
.mt-fig-bar span { margin-left: 1.6cqw; }
.mt-fig-av { margin-left: auto; display: flex; } .mt-fig-av img { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; object-fit: cover; border: .3cqw solid #2A272C; } .mt-fig-av img + img { margin-left: -1cqw; }
.mt-fig-bar b { margin-left: 1.2cqw; padding: .8cqw 1.4cqw; border-radius: .8cqw; background: #FF4D7E; color: #141215; font-size: 1.2cqw; }
.mt-fig-cv { position: relative; height: 50cqw; background: radial-gradient(circle, rgba(255, 255, 255, .09) .14cqw, transparent .2cqw) 0 0 / 2.2cqw 2.2cqw, #1E1C20; }
.mt-ab { position: absolute; margin: 0; }
.mt-ab small { display: block; margin-bottom: .8cqw; font: 600 1.15cqw/1 var(--text); color: #8D858B; }
.mt-ab img { display: block; width: 100%; border-radius: .6cqw; box-shadow: 0 1.6cqw 3cqw rgba(0, 0, 0, .45); }
.mt-ab-d { left: 4cqw; top: 5cqw; width: 52cqw; }
.mt-ab-m { right: 6cqw; top: 3cqw; width: 17cqw; }
.mt-ab-m img { aspect-ratio: .5; object-fit: cover; object-position: top; border-radius: 1.6cqw; box-shadow: 0 0 0 .5cqw #0E0D0F, 0 1.6cqw 3cqw rgba(0, 0, 0, .5); }
.mt-ab-d img { box-shadow: 0 0 0 .2cqw #3A363C, 0 1.6cqw 3cqw rgba(0, 0, 0, .45); outline: .25cqw solid #FF4D7E; outline-offset: .5cqw; }
.mt-cur { position: absolute; left: 40cqw; top: 31cqw; margin: 0; display: flex; align-items: flex-start; }
.mt-cur svg { width: 3cqw; height: 3cqw; fill: #BFE36B; stroke: #141215; stroke-width: 1.4; }
.mt-cur b { margin: 2.4cqw 0 0 -.4cqw; padding: .5cqw 1cqw; border-radius: .6cqw; background: #BFE36B; color: #141215; font: 700 1.2cqw/1 var(--text); }
.mt-cmt { position: absolute; left: 6cqw; bottom: 3cqw; margin: 0; display: flex; align-items: center; gap: 1cqw; padding: 1cqw 1.6cqw 1cqw 1cqw; border-radius: 1.6cqw 1.6cqw 1.6cqw .4cqw; background: #fff; box-shadow: 0 1.6cqw 3cqw rgba(0, 0, 0, .35); }
.mt-cmt img { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; object-fit: cover; }
.mt-cmt span { font-size: 1.3cqw; color: #4a454c; } .mt-cmt b { display: block; font-size: 1.2cqw; color: #141215; }
.mt-s3 .mt-pal { right: 4cqw; bottom: 6cqw; z-index: 2; }
.mt-s3 .mt-tag { left: 7cqw; bottom: 6cqw; z-index: 2; }
.mt-ggl { right: 4cqw; top: 6cqw; width: 40cqw; padding: 1.6cqw 2cqw; border-radius: 1.6cqw; background: #fff; color: #202124; box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .4); font-family: Arial, sans-serif; transform: rotate(2deg); z-index: 3; }
.mt-ggl small { display: flex; align-items: center; gap: .6cqw; font-size: 1.15cqw; color: #4d5156; } .mt-ggl small i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #E1D0B3; }
.mt-ggl b { display: block; margin-top: .6cqw; font-size: 1.7cqw; font-weight: 400; color: #1a0dab; }
.mt-ggl span { display: block; margin-top: .4cqw; font-size: 1.15cqw; color: #4d5156; line-height: 1.4; }
.mt-s5 .mt-bw.dv-pc { top: 18cqw; }
.mt-s5 .mt-ph.dv-ph { top: 36cqw; }

/* MÉTHODE · compact: no backdrop behind the devices, pills redrawn, devices at the hero's proportions */
.mt { margin: 6vh var(--m) 10vh; padding: clamp(28px, 3.4vw, 56px) clamp(24px, 3.6vw, 60px); gap: 3vw; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.mt-title { font-size: clamp(30px, 2.8vw, 50px); }
.mt-lead { margin-top: 1.6vh; font-size: 16px; }
.mt-stage { width: 100%; max-width: 620px; aspect-ratio: 1.35; background: none !important; box-shadow: none; overflow: visible; border-radius: 0; }
.mt-ring { display: none; }
.mt-steps { gap: 6px; margin-top: 2.6vh; }
.mt-steps button {
  grid-template-columns: 34px 1fr 20px; gap: 12px; padding: 9px 16px 9px 9px; border-radius: 16px;
  background: transparent; box-shadow: inset 0 0 0 1.5px rgba(20, 18, 21, .12); transform: none;
}
.mt-steps button b { width: 34px; height: 34px; border-radius: 10px; background: rgba(20, 18, 21, .07); font-size: 12.5px; transform: none; }
.mt-steps strong { font-size: clamp(16px, 1.2vw, 19px); }
.mt-steps small { font-size: 13.5px; }
.mt-steps button em { font-style: normal; font-weight: 700; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .45s var(--pop); }
.mt-steps button:hover { background: rgba(246, 241, 231, .5); transform: none; box-shadow: inset 0 0 0 1.5px rgba(20, 18, 21, .2); }
.mt-steps button.is-on { background: var(--encre); color: var(--creme); transform: none; box-shadow: 0 10px 22px -12px rgba(20, 18, 21, .55); }
.mt-steps button.is-on b { background: var(--c); color: var(--encre); transform: none; }
.mt-steps button[style*="#141215"].is-on b { background: #F6F1E7; color: var(--encre); }
.mt-steps button.is-on small { color: rgba(246, 241, 231, .7); margin-top: 3px; }
.mt-steps button.is-on em { opacity: 1; transform: none; color: var(--c); }
.mt-steps button[style*="#141215"].is-on em { color: var(--creme); }
/* the scenes, re-placed for the wider, backdrop-less stage */
.mt-s1 .mt-ph { left: 50cqw; top: 2cqw; width: 30cqw; }
.mt-s1 .mt-msg-in { left: 4cqw; top: 18cqw; } .mt-s1 .mt-msg-out { left: 14cqw; top: 36cqw; }
.mt-fig { left: 2cqw; top: 3cqw; width: 90cqw; }
.mt-fig-cv { height: 46cqw; }
.mt-s3 .mt-pal { right: 0; bottom: 2cqw; } .mt-s3 .mt-tag { left: 3cqw; bottom: 3cqw; }
.mt-s5 .mt-bw.dv-pc { left: 10cqw; top: 6cqw; width: 80cqw; }
.mt-s5 .mt-ph.dv-ph { right: auto; left: 0; top: 24cqw; width: 22cqw; }
.mt-s5 .mt-tag { left: 26cqw; bottom: 4cqw; } .mt-ggl { right: 0; top: 0; }
.mt-s6 .mt-ph { left: 10cqw; top: 1cqw; width: 30cqw; }
.mt-s6 .mt-toasts { right: 4cqw; top: 6cqw; } .mt-s6 .mt-stat { right: 6cqw; bottom: 3cqw; }
@media (max-width: 899px) { .mt-stage { aspect-ratio: 1.15; } }

/* MÉTHODE · « On conçoit »: a tablet holds the design, its ingredients pinned around it */
.mt-tab { left: 12cqw; top: 11cqw; width: 66cqw; aspect-ratio: 1.55; padding: 1.5cqw; border-radius: 3.4cqw; background: #1B191C;
  background-image: radial-gradient(circle at 50% .75cqw, #2C2A31 .25cqw, #121014 .35cqw, transparent .45cqw);
  box-shadow: inset 0 0 0 .22cqw #4A454D, inset 0 0 0 .45cqw #0E0D0F, 0 .4cqw .8cqw rgba(20, 18, 21, .16), 0 4cqw 7cqw -1cqw rgba(20, 18, 21, .32), 0 9cqw 16cqw -4cqw rgba(20, 18, 21, .34);
  transform: perspective(2200px) rotateY(8deg) rotateX(4deg); z-index: 1; }
.mt-tab-scr { position: relative; height: 100%; overflow: hidden; border-radius: 2cqw; background: #FFF6E0; }
.mt-tab-scr > img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mt-tab-scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 32%); }
.mt-sel { position: absolute; left: 20%; top: 86.3%; width: 10.2%; height: 6.6%; border: .25cqw solid #FF4D7E; border-radius: .3cqw; }
.mt-sel i { position: absolute; width: .9cqw; height: .9cqw; background: #fff; border: .2cqw solid #FF4D7E; }
.mt-sel i:nth-child(1) { left: -.55cqw; top: -.55cqw; } .mt-sel i:nth-child(2) { right: -.55cqw; top: -.55cqw; } .mt-sel i:nth-child(3) { left: -.55cqw; bottom: -.55cqw; } .mt-sel i:nth-child(4) { right: -.55cqw; bottom: -.55cqw; }
.mt-sel b { position: absolute; left: -.25cqw; top: -3cqw; padding: .35cqw .8cqw; border-radius: .4cqw; background: #FF4D7E; color: #141215; font: 700 1.05cqw/1 var(--text); white-space: nowrap; }
.mt-s3 .mt-cur { left: 29%; top: 89%; }
.mt-mood { left: 0; top: 2cqw; width: 22cqw; padding: 1cqw 1cqw 3.4cqw; background: #fff; box-shadow: 0 2cqw 4cqw -1cqw rgba(20, 18, 21, .35); transform: rotate(-7deg); z-index: 2; }
.mt-mood span { display: block; aspect-ratio: 1.1; overflow: hidden; } .mt-mood img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.9); transform-origin: 54% 55%; }
.mt-mood small { position: absolute; left: 1.2cqw; bottom: 1cqw; font: 600 1.2cqw/1 var(--text); color: #6B656E; }
.mt-mood::before { content: ""; position: absolute; left: 50%; top: -1.4cqw; width: 8cqw; height: 2.6cqw; margin-left: -4cqw; background: rgba(255, 178, 63, .75); transform: rotate(3deg); }
.mt-typo { right: 2cqw; top: 1cqw; width: 22cqw; padding: 1.8cqw 2cqw; border-radius: 2cqw; background: #1F3A2B; color: #F6D9A0; box-shadow: 0 2cqw 4cqw -1cqw rgba(20, 18, 21, .4); transform: rotate(5deg); z-index: 2; }
.mt-typo b { display: block; font: 800 9cqw/.9 "Barlow Semi Condensed", var(--text); letter-spacing: -.02em; }
.mt-typo p { margin: .8cqw 0 0; } .mt-typo strong { display: block; font: 700 1.4cqw/1.2 var(--text); } .mt-typo span { font-size: 1.15cqw; opacity: .7; }
.mt-sw { right: 0; top: 30cqw; width: 15cqw; display: grid; gap: .7cqw; z-index: 2; }
.mt-sw p { margin: 0; display: flex; align-items: flex-end; height: 5.4cqw; padding: .7cqw 1cqw; border-radius: 1.2cqw; background: var(--c); box-shadow: 0 1cqw 2cqw -.6cqw rgba(20, 18, 21, .35), inset 0 0 0 1px rgba(20, 18, 21, .08); }
.mt-sw span { font: 700 1.05cqw/1 "IBM Plex Mono", ui-monospace, monospace; color: #F6F1E7; } .mt-sw p:first-child span { color: #141215; }
.mt-s3 .mt-cmt { left: 2cqw; bottom: 3cqw; top: auto; z-index: 3; }
.mt-s3 .mt-tag { left: auto; right: 4cqw; bottom: 3cqw; z-index: 3; }

/* the two calls of the last band, side by side */
.bn-btns { display: flex; flex-wrap: nowrap; gap: 12px; width: max-content; max-width: none; margin-top: 26px; }
@media (max-width: 1100px) { .bn-btns { flex-wrap: wrap; width: auto; } }
.bn-btns .btn { margin: 0; white-space: nowrap; }

/* ==========================================================================
   PROJETS v2 — three real projects as big coloured cards that stack while you scroll:
   the name huge on the left, the work on a laptop and a phone on the right
   ========================================================================== */
.pj2 { position: relative; padding: 12vh var(--m) 14vh; }
.pj2-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 6vh; }
.pj2-title { font-size: clamp(56px, 9vw, 168px); line-height: .86; letter-spacing: -.06em; }
.pj2-title em { font-style: normal; position: relative; z-index: 0; }
.pj2-title em::before { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.06em; top: .16em; bottom: .02em; border-radius: .14em; background: var(--framboise); transform: rotate(-1.5deg); }
.pj2-note { max-width: 30ch; font-size: 17px; color: var(--mute); }
.pj2-stack { display: grid; gap: 4vh; }
.pjc {
  position: sticky; top: 100px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 2vw;
  min-height: min(76vh, 680px); padding: clamp(28px, 3.6vw, 60px); border-radius: clamp(28px, 3vw, 44px); overflow: hidden; color: var(--encre);
  background: var(--bg); background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .06));
  box-shadow: 0 2.4vw 4.4vw -2vw rgba(20, 18, 21, .32), 0 .6vw 1.2vw -.6vw rgba(20, 18, 21, .14); transform-origin: 50% 0;
}
.pjc::before { content: ""; position: absolute; right: -14%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: clamp(40px, 7vw, 120px) solid rgba(255, 255, 255, .22); pointer-events: none; }
.pjc-txt { position: relative; z-index: 2; }
.pjc-n { font: 800 15px/1 var(--disp); font-variation-settings: var(--dv); letter-spacing: .02em; opacity: .55; } .pjc-n b { opacity: 1; }
.pjc-name { margin-top: 2vh; font: 800 clamp(48px, 6.4vw, 118px)/.86 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.06em; }
.pjc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3vh; }
.pjc-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; background: rgba(20, 18, 21, .1); font-size: 14px; font-weight: 650; }
.pjc-tags .pjc-live { background: var(--encre); color: var(--creme); }
.pjc-live i { width: 7px; height: 7px; border-radius: 50%; background: #BFE36B; box-shadow: 0 0 0 0 rgba(191, 227, 107, .7); animation: pj-ping 2s infinite; }
.pjc-bl .pjc-live i { background: #FF4D7E; }
@keyframes pj-ping { 70%, 100% { box-shadow: 0 0 0 7px rgba(191, 227, 107, 0); } }
.pjc-d { margin-top: 2.6vh; max-width: 34ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.45; font-weight: 500; }
.pjc-go { display: inline-flex; align-items: center; gap: 16px; margin-top: 3.4vh; height: 60px; padding: 0 7px 0 26px; border-radius: 999px; background: var(--encre); color: var(--creme); text-decoration: none; font: 800 16px/1 var(--text); font-variation-settings: "wdth" 112; transition: transform .4s var(--pop), box-shadow .4s; }
.pjc-go i { position: relative; display: block; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--bg); color: var(--encre); transform: rotate(-45deg); transition: transform .5s var(--pop); }
.pjc-go svg { position: absolute; left: 13px; top: 13px; width: 20px; height: 20px; }
.pjc-go:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -14px rgba(20, 18, 21, .6); } .pjc-go:hover i { transform: rotate(0); }
/* the work: laptop at the back, phone in front, like the hero */
.pjc-dev { position: relative; z-index: 1; aspect-ratio: 1.3; container-type: inline-size; }
.pjc-lap.dv-pc { position: absolute; right: -2cqw; top: 6cqw; width: 86cqw; --bz: 1.3cqw; display: flex; flex-direction: column; transform: perspective(2400px) rotateY(-13deg) rotateX(3deg); transition: transform .8s var(--ease); }
.pjc-bar { display: flex; align-items: center; gap: .9cqw; height: 4.4cqw; padding: 0 2cqw; }
.pjc-bar i { width: 1.25cqw; height: 1.25cqw; border-radius: 50%; }
.pjc-bar span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .6cqw 5cqw; border-radius: .8cqw; font: 500 1.5cqw/1 var(--text); white-space: nowrap; }
.pjc-pg { position: relative; aspect-ratio: 1.6; background: #111; }
.pjc-pg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pjc-ph.dv-ph { left: 0; bottom: 4cqw; width: 25cqw; z-index: 2; transform: perspective(2000px) rotateY(16deg) rotateX(2deg); transition: transform .8s var(--ease); }
.pjc-scr { position: relative; height: 100%; overflow: hidden; background: #fff; }
.pjc-scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* BatiLog: one picture holds both the dashboard and the phone, each screen shows its part */
.pjc-pg img.pjc-bl-d { inset: auto; left: -9.9%; top: -11.1%; width: 153.8%; height: auto; object-fit: initial; }
.pjc-bl .pjc-pg { aspect-ratio: 1.556; }
.pjc-scr img.pjc-bl-m { position: absolute; left: -406%; top: -15.1%; width: 560%; height: auto; max-width: none; object-fit: initial; }
.pjc:hover .pjc-lap { transform: perspective(2400px) rotateY(-7deg) rotateX(2deg) translateY(-1cqw); }
.pjc:hover .pjc-ph { transform: perspective(2000px) rotateY(8deg) rotateX(1deg) translateY(-1.6cqw); }
@media (max-width: 899px) {
  .pjc { position: relative; top: 0; grid-template-columns: 1fr; min-height: 0; padding: 26px 20px 30px; }
  .pjc-dev { order: -1; }
  .pjc-name { font-size: 15vw; }
}
@media (prefers-reduced-motion: reduce) { .pjc { position: relative; top: 0; } .pjc-live i { animation: none; } }

/* PROJETS v2 · compact: three cards side by side, the work on top, the name below */
.pj2 { padding: 10vh var(--m) 11vh; }
.pj2-head { margin-bottom: 4vh; }
.pj2-title { font-size: clamp(44px, 6vw, 108px); }
.pj2-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.pjc { position: relative; top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 14px 14px 24px; border-radius: 30px; transition: transform .5s var(--pop), box-shadow .5s var(--ease); }
.pjc::before { right: -30%; top: -22%; width: 90%; border-width: clamp(28px, 3.4vw, 56px); }
.pjc-dev { order: -1; aspect-ratio: 1.32; margin: 0 -2px 6px; }
.pjc-lap.dv-pc { right: 1cqw; top: 9cqw; width: 84cqw; }
.pjc-ph.dv-ph { left: 3cqw; bottom: 3cqw; width: 25cqw; }
.pjc-txt { padding: 0 12px; }
.pjc-n { font-size: 12.5px; }
.pjc-name { margin-top: 10px; font-size: clamp(30px, 2.7vw, 48px); line-height: .92; letter-spacing: -.055em; }
.pjc-tags { gap: 6px; margin-top: 14px; }
.pjc-tags span { padding: 6px 11px; font-size: 12.5px; }
.pjc-d { margin-top: 14px; font-size: 15px; line-height: 1.42; max-width: none; min-height: 4.26em; }
.pjc-go { margin-top: 18px; height: 50px; gap: 12px; padding: 0 5px 0 20px; font-size: 14.5px; }
.pjc-go i { width: 40px; height: 40px; } .pjc-go svg { left: 10px; top: 10px; }
.pjc:hover { transform: translateY(-6px); box-shadow: 0 3vw 5vw -2vw rgba(20, 18, 21, .38), 0 .6vw 1.2vw -.6vw rgba(20, 18, 21, .14); }
@media (max-width: 1100px) { .pj2-stack { grid-template-columns: 1fr 1fr; } }
@media (max-width: 899px) { .pj2-stack { grid-template-columns: 1fr; } .pjc { padding: 12px 12px 22px; } .pjc-name { font-size: 11vw; } }
.pjc-lap, .pjc-ph { opacity: 0; translate: 0 50px; transition: opacity .7s, translate 1s cubic-bezier(.16, 1, .3, 1), transform .8s var(--ease); }
.pjc-ph { transition-delay: .12s, .12s, 0s; }
.pjc.is-in .pjc-lap, .pjc.is-in .pjc-ph { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .pjc-lap, .pjc-ph { opacity: 1; translate: none; transition: none; } }

/* PROJETS v3 · no cards: the work floats on the page, each project carries its colour in a ring of the logo,
   a giant outlined number, a sticker; the name gets the site's highlight */
.pjc, .pjc:hover { background: none; box-shadow: none; padding: 0; border-radius: 0; overflow: visible; transform: none; }
.pjc::before { content: none; }
.pj2-stack { gap: clamp(20px, 2.6vw, 44px); }
.pjc-dev { margin: 0 0 4px; overflow: visible; }
.pjc-stk { position: absolute; z-index: 3; right: 2cqw; top: 2cqw; margin: 0; padding: 2cqw 3.4cqw; border-radius: 99px; background: var(--encre); color: var(--bg); font: 800 4.2cqw/1 var(--disp); font-variation-settings: var(--dv-m); letter-spacing: -.02em; transform: rotate(var(--r)); box-shadow: 0 2cqw 4cqw -1.5cqw rgba(20, 18, 21, .5); transition: transform .6s var(--pop); }
.pjc:hover .pjc-stk { transform: rotate(calc(var(--r) * -1)) scale(1.08); }
.pjc-txt { padding: 0; }
.pjc-n { display: none; }
.pjc-name { margin-top: 0; font-size: clamp(34px, 3.2vw, 58px); }
.pjc-name { display: inline-block; position: relative; z-index: 0; }
.pjc-name::after { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.08em; bottom: .02em; height: .42em; border-radius: .1em; background: var(--bg); transform: scaleX(.35); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.pjc:hover .pjc-name::after { transform: scaleX(1); }
.pjc-tags span { background: none; padding: 0; font-size: 13.5px; color: #5b5459; }
.pjc-tags span + span::before { content: "·"; margin-right: 6px; color: #A8A1AA; }
.pjc-tags .pjc-live { background: none; color: var(--encre); }
.pjc-tags .pjc-live::before { content: none; }
.pjc-d { color: #3d383f; }
.pjc-go { background: none; color: var(--encre); padding: 0; height: auto; gap: 12px; font-size: 15px; }
.pjc-go span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; transition: background-size .4s var(--ease); }
.pjc-go:hover { transform: none; box-shadow: none; } .pjc-go:hover span { background-size: 0 2px; background-position: 100% 100%; }
.pjc-go i { width: 44px; height: 44px; background: var(--bg); }
.pjc-go:hover i { transform: rotate(0) scale(1.08); }

/* PROJETS v4 · pared back: only the laptop, the phone and the name. Pointing at a project scrolls its site
   in both screens and slides its kind in under the name; a click opens it big in a window with its story */
.pjc { cursor: pointer; outline: none; }
.pjc-tags, .pjc-d, .pjc-go { display: none; }
.pjc-name { margin-top: 6px; }
.pjc-txt { display: flex; flex-direction: column; align-items: flex-start; }
.pjc-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 650 14px/1 var(--text); color: #5b5459; opacity: 0; translate: 0 -8px; transition: opacity .4s, translate .6s cubic-bezier(.16, 1, .3, 1); }
.pjc-hint b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--encre); font-size: 15px; font-weight: 800; }
.pjc:hover .pjc-hint, .pjc:focus-visible .pjc-hint { opacity: 1; translate: 0 0; }
.pjc:focus-visible .pjc-name::after { transform: scaleX(1); }
/* the screens: the whole page sits at the top; pointing scrolls it to the bottom, leaving brings it back up */
.pjc-pg img:not(.pjc-crop), .pjc-scr img:not(.pjc-crop) { position: absolute; inset: 0 0 auto; height: auto; object-fit: initial; top: 0; translate: 0 0; transition: top 1.1s cubic-bezier(.65, 0, .35, 1), translate 1.1s cubic-bezier(.65, 0, .35, 1); }
.pjc:hover .pjc-pg img:not(.pjc-crop), .pjc:hover .pjc-scr img:not(.pjc-crop) { top: 100%; translate: 0 -100%; transition-duration: 7s; transition-timing-function: cubic-bezier(.45, 0, .55, 1); }
.pjc-crop { transition: scale 1.2s cubic-bezier(.16, 1, .3, 1); }
.pjc:hover .pjc-crop { scale: 1.06; }
@media (hover: none) { .pjc-hint { opacity: 1; translate: none; } }

/* the window */
.pjm { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 4vh var(--m); border: 0; background: transparent; display: none; place-items: center; overflow: auto; }
.pjm[open] { display: grid; }
.pjm::backdrop { background: rgba(20, 18, 21, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pjm-box { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 56px); width: min(1240px, 100%); padding: clamp(28px, 3.4vw, 56px); border-radius: clamp(28px, 3vw, 44px); background: var(--creme); box-shadow: 0 2.4vw 4.4vw -2vw rgba(20, 18, 21, .32), 0 .6vw 1.2vw -.6vw rgba(20, 18, 21, .14); }
.pjm[open] .pjm-box { animation: pjm-in .7s cubic-bezier(.16, 1, .3, 1); }
.pjm.is-out .pjm-box { animation: pjm-out .3s ease-in forwards; }
@keyframes pjm-in { from { opacity: 0; transform: translateY(40px) scale(.94); } }
@keyframes pjm-out { to { opacity: 0; transform: translateY(20px) scale(.97); } }
.pjm-dev .pjc-dev { margin: 0; }
.pjm-dev .pjc-lap, .pjm-dev .pjc-ph { opacity: 1; translate: none; }
/* in the window the site scrolls by itself, down and back up */
.pjm-dev .pjc-pg img:not(.pjc-crop), .pjm-dev .pjc-scr img:not(.pjc-crop) { transition: none; animation: pjm-scroll 16s cubic-bezier(.45, 0, .55, 1) 1s infinite alternate; }
.pjm-dev .pjc-scr img:not(.pjc-crop) { animation-delay: 1.6s; }
@keyframes pjm-scroll { 0%, 8% { top: 0; translate: 0 0; } 92%, 100% { top: 100%; translate: 0 -100%; } }
.pjm-txt .pjc-n { display: block; font: 800 14px/1 var(--disp); font-variation-settings: var(--dv); opacity: .5; }
.pjm-txt .pjc-name { margin-top: 14px; font-size: clamp(40px, 4.4vw, 76px); }
.pjm-txt .pjc-name::after { transform: scaleX(1); }
.pjm-txt .pjc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.pjm-txt .pjc-d { display: block; margin-top: 18px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; max-width: 38ch; min-height: 0; }
.pjm-txt .pjc-go { display: inline-flex; margin-top: 28px; }
.pjm-txt .pjc-hint { display: none; }
.pjm-x { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--encre); color: var(--creme); cursor: pointer; transition: transform .5s var(--pop), background .3s; }
.pjm-x svg { width: 18px; height: 18px; }
.pjm-x:hover { transform: rotate(90deg); background: var(--framboise); }
@media (max-width: 899px) {
  .pjm { padding: 12px; place-items: end center; }
  .pjm-box { grid-template-columns: 1fr; padding: 22px 18px 28px; border-radius: 28px; }
  .pjm-x { right: 12px; top: 12px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .pjc:hover .pjc-pg img, .pjc:hover .pjc-scr img { top: 0; translate: none; }
  .pjm-dev .pjc-pg img, .pjm-dev .pjc-scr img { animation: none; }
  .pjm[open] .pjm-box, .pjm.is-out .pjm-box { animation: none; }
}
/* the window lists everything the app runs */
.pjc-feat { display: none; }
.pjm-txt .pjc-feat { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; max-width: 44ch; }
.pjm-txt .pjc-feat li { padding: 8px 13px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 30%, transparent); box-shadow: inset 0 0 0 1.5px var(--bg); font: 650 13.5px/1 var(--text); }

/* PROJETS · arrival: one after the other, the laptop rises out of a blur and settles, the phone swings in
   from the side with a little bounce, then the name climbs out of its line and its colour bar draws in */
.pjc { --d: 0s; }
@media (min-width: 900px) { .pjc:nth-child(2) { --d: .16s; } .pjc:nth-child(3) { --d: .32s; } }
.pjc-lap, .pjc-ph { will-change: opacity, translate; }
.pj2 .pjc .pjc-lap { opacity: 0; translate: 0 22cqw; scale: .84;
  transition: opacity .7s var(--d), translate 1.2s cubic-bezier(.16, 1, .3, 1) var(--d), scale 1.2s cubic-bezier(.16, 1, .3, 1) var(--d), transform .8s var(--ease); }
.pj2 .pjc .pjc-ph { opacity: 0; translate: -18cqw 30cqw; rotate: -16deg; scale: .9;
  transition: opacity .5s calc(var(--d) + .3s), translate 1.1s cubic-bezier(.34, 1.45, .5, 1) calc(var(--d) + .3s), rotate 1.1s cubic-bezier(.34, 1.45, .5, 1) calc(var(--d) + .3s), scale 1.1s cubic-bezier(.34, 1.45, .5, 1) calc(var(--d) + .3s), transform .8s var(--ease); }
.pj2 .pjc.is-in .pjc-lap { opacity: 1; translate: 0 0; scale: 1; }
.pj2 .pjc.is-in .pjc-ph { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
.pjc-name { opacity: 0; translate: 0 .5em; will-change: opacity, translate; transition: translate 1s cubic-bezier(.16, 1, .3, 1) calc(var(--d) + .45s), opacity .6s calc(var(--d) + .45s); }
.pjc.is-in .pjc-name { opacity: 1; translate: 0 0; }
.pjc-name::after { transform: scaleX(0); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.pjc.is-in .pjc-name::after { transform: scaleX(.35); transition-delay: calc(var(--d) + .85s); }
.pjc.is-in:hover .pjc-name::after, .pjc.is-in:focus-visible .pjc-name::after { transform: scaleX(1); transition-delay: 0s; }
/* in the window, everything is already there */
.pj2 .pjm-dev .pjc-lap, .pj2 .pjm-dev .pjc-ph { opacity: 1; translate: none; scale: none; rotate: none; filter: none; transition: none; }
.pjm-txt .pjc-name { translate: none; opacity: 1; transition: none; }
.pjm-txt .pjc-name::after { transform: scaleX(1); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pj2 .pjc .pjc-lap, .pj2 .pjc .pjc-ph, .pjc-name { opacity: 1; translate: none; scale: none; rotate: none; filter: none; clip-path: none; transition: none; }
  .pjc-name::after { transform: scaleX(.35); }
}

/* smoothness: the pieces that move in the hero and in Projets get their own layer before they move */
.hs-laptop, .hs-phone, .hs-ring, .hero-title .ln > span { will-change: transform, opacity; }
.pj2 .pjc .pjc-lap, .pj2 .pjc .pjc-ph { will-change: transform, opacity, translate, scale; }

/* project names, rebuilt: the colour bar is its own element, painted before the text and never in a layer
   of its own, so it can never come up in front of the name (Safari did that with the old ::after) */
.pjc-name, .pjc.is-in .pjc-name { opacity: 1; translate: none; will-change: auto; transition: none; z-index: auto; }
.pjc-name::after { content: none; }
.pjc-hl { position: absolute; left: -.06em; right: -.08em; bottom: .02em; height: .42em; border-radius: .1em; background: var(--bg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.pjc-name > span { position: relative; display: inline-block; opacity: 0; translate: 0 .5em; transition: translate 1s cubic-bezier(.16, 1, .3, 1) calc(var(--d) + .45s), opacity .6s calc(var(--d) + .45s); }
.pjc.is-in .pjc-name > span { opacity: 1; translate: 0 0; }
.pjc.is-in .pjc-hl { transform: scaleX(.35); transition-delay: calc(var(--d) + 1.1s); }
.pjc.is-in:hover .pjc-hl, .pjc.is-in:focus-visible .pjc-hl { transform: scaleX(1); transition-delay: 0s; }
.pjm-txt .pjc-name > span { opacity: 1; translate: none; transition: none; }
.pjm-txt .pjc-hl { transform: scaleX(1); transition: none; }
@media (prefers-reduced-motion: reduce) { .pjc-name > span { opacity: 1; translate: none; transition: none; } .pjc-hl { transform: scaleX(.35); transition: none; } }

/* ==========================================================================
   DÉMO · closed by default: one big pill with the title on two lines and a "+" on the right, like the
   services bands; a click opens the demo inside it, scaled down so it never takes over the page
   ========================================================================== */
.sig { padding: 9vh var(--m) 10vh; }
.sig-band {
  position: relative; border-radius: var(--r); color: var(--creme);
  background: #262229 linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .22) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 0, 0, .2), 0 18px 40px -16px rgba(0, 0, 0, .55), 0 40px 80px -40px rgba(0, 0, 0, .6);
  transition: transform .5s var(--pop), box-shadow .5s var(--ease);
}
.sig-band:not(.is-open):hover { transform: translateY(-3px); }
.sig-h { margin: 0; font: inherit; }
.sig-head { width: 100%; display: grid; grid-template-columns: 1fr 56px; grid-template-rows: auto auto; align-items: center; column-gap: 24px; padding: 30px 36px 32px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.sig-head .sig-k { grid-column: 1; margin: 0 0 16px; justify-self: start; }
.sig-head .sig-title { grid-column: 1; display: block; font-size: clamp(36px, 4.4vw, 80px); }
.sig-head .sig-title span + span { padding-left: 0; }
.sig-ic { grid-column: 2; grid-row: 1 / span 2; position: relative; width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--creme); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s var(--ease); }
.sig-ic::before, .sig-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: var(--creme); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1), background-color .3s, width .4s var(--pop); }
.sig-ic::after { transform: rotate(90deg); }
.sig-head:hover .sig-ic { transform: rotate(180deg) scale(1.12); box-shadow: inset 0 0 0 28px var(--creme), 0 0 0 7px rgba(246, 241, 231, .14); }
.sig-head:hover .sig-ic::before, .sig-head:hover .sig-ic::after { width: 22px; margin-left: -11px; background: var(--encre); }
.sig-band.is-open .sig-ic::after { transform: rotate(0deg); }
.sig-band.is-open .sig-ic { transform: rotate(180deg); }
.sig-band.is-open .sig-head:hover .sig-ic { transform: rotate(360deg) scale(1.12); }
.sig-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease); }
.sig-band.is-open .sig-body { grid-template-rows: 1fr; }
.sig-in { min-height: 0; overflow: hidden; padding: 0 36px; }
.sig-band.is-open .sig-in { padding-bottom: 36px; }
.sig-in .sig-sub { margin-top: 0; font-size: 16px; }
/* the demo itself, at 78 %: drawn at full size, scaled down, its box shrunk to match */
.sig-in .nu { --nz: .78; width: calc(100% / var(--nz)); transform: scale(var(--nz)); transform-origin: 0 0; margin: 4vh 0 calc(720px * (var(--nz) - 1)); }
@media (prefers-reduced-motion: reduce) { .sig-band, .sig-ic, .sig-ic::before, .sig-ic::after, .sig-body { transition: none; } }

/* DÉMO v2 · the page is the background, only the dark pill remains; inside, the phone and the browser
   sit centred as one group (360 + 110 + 1080 px, scaled to fit by main.js through --nz) */
.sig { background: none; color: var(--encre); margin-top: 0; border-radius: 0; padding: 4vh var(--m) 10vh; overflow: visible; }
.sig-band.is-open .sig-in { padding-bottom: 64px; }
.sig-in .nu { --gx: calc(50% - 775px); margin-top: 7vh; }
.sig-in .nu-app { left: var(--gx); transform: none; }
.sig-in .nu-site { left: calc(var(--gx) + 470px); right: auto; width: 1080px; top: 10px; height: 670px; }
.sig-in .nu-cap-app { left: var(--gx); }
.sig-in .nu-cap-site { left: calc(var(--gx) + 470px); }
.sig-in .nu-reset { left: calc(var(--gx) + 180px); bottom: -34px; }
.sig-in .nu-ring { right: calc(var(--gx) - 90px); top: -14%; width: 380px; }
.sig + .trust { margin-top: 0; }
.sig-in .nu { max-width: none; }
.sig-in .nu { --gx: calc(50% - 760px); }
.sig-in .nu-site { width: 1050px; }
/* once open, the big O behind the browser may spill onto the pill (the clip only serves the folding) */
.sig-band.is-shown .sig-in { overflow: visible; }
.sig-in .nu-ring { right: calc(var(--gx) - 20px); }
/* the big O lives on the pill itself, outside the part that folds, so nothing can ever cut it */
.sig-in .nu-ring { display: none; }
.sig-body { position: relative; }
.sig-in { position: relative; z-index: 1; }
.sig-ring { position: absolute; z-index: 0; right: 3.6%; top: 0; width: clamp(240px, 21vw, 320px); aspect-ratio: 1; border-radius: 50%; border: clamp(46px, 4vw, 60px) solid var(--framboise); pointer-events: none; opacity: 0; scale: .6; transition: opacity .3s, scale .3s; }
.sig-band.is-open .sig-ring { opacity: 1; scale: 1; transition: opacity .6s .35s, scale 1s cubic-bezier(.34, 1.45, .5, 1) .35s; }
@media (prefers-reduced-motion: reduce) { .sig-ring { transition: none; } }

/* DÉMO v3 · a little smaller; a sticker invites to click; the salon's site opens on a real hero:
   the photo full width under a transparent menu, the title in white over it */
.sig-in .nu { margin-top: 5vh; }
.nu-try { position: absolute; z-index: 4; left: calc(var(--gx) + 250px); top: 64px; display: flex; align-items: flex-start; gap: 4px; margin: 0; pointer-events: none; transition: opacity .4s, scale .4s; }
.nu-try span { padding: 13px 22px; border-radius: 99px; background: var(--pistache); color: var(--encre); font: 800 20px/1 var(--disp); font-variation-settings: var(--dv-m, "wdth" 112); letter-spacing: -.02em; white-space: nowrap; rotate: -5deg; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55); animation: nu-try 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.nu-try svg { order: -1; width: 46px; height: 46px; margin-top: 26px; color: var(--pistache); rotate: 10deg; }
@keyframes nu-try { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.nu.is-tried .nu-try { opacity: 0; scale: .8; }
.nus-nav { position: relative; z-index: 2; color: #fff; }
.nus-menu { align-items: center; color: rgba(255, 255, 255, .86); }
.nus-nbtn { padding: 9px 16px; border-radius: 99px; background: #fff; color: var(--nu-ink); font-weight: 600; }
.nus-hero { position: relative; display: block; min-height: 560px; margin-top: -78px; padding: 170px 40px 44px; color: #fff; }
.nus-ph { position: absolute; z-index: 0; inset: 0; aspect-ratio: auto; border-radius: 0; }
.nus-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 16, 14, .78) 0%, rgba(24, 16, 14, .45) 45%, rgba(24, 16, 14, .08) 80%), linear-gradient(0deg, rgba(24, 16, 14, .55), rgba(24, 16, 14, 0) 45%), linear-gradient(180deg, rgba(24, 16, 14, .6), rgba(24, 16, 14, 0) 24%); }
.nus-k, .nus-title, .nus-cta { position: relative; z-index: 1; }
.nus-k { margin-top: 0; color: rgba(255, 255, 255, .78); }
.nus-title { margin-top: 14px; max-width: 8.5ch; font-size: 82px; line-height: .92; color: #fff; }
.nus-title em { color: #F2C4BF; }
.nus-cta { margin-top: 30px; }
.nus-btn { padding: 16px 28px; background: #fff; color: var(--nu-ink); font-size: 15px; }
.nus-btn.is-call { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.nus-next { padding: 10px 15px; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #D7EFC6; font-size: 13px; }
.nus-next.is-none { color: #F2C4BF; }
@media (prefers-reduced-motion: reduce) { .nu-try span { animation: none; } }
.nu-try { left: calc(var(--gx) + 175px); top: -78px; }
/* the sticker waits for the pill to be fully open (nothing clips it then), and has room above the phone */
.sig-in .nu { margin-top: max(9vh, 80px); }
.nu-try { opacity: 0; scale: .7; }
.sig-band.is-shown .nu-try { opacity: 1; scale: 1; transition: opacity .4s, scale .6s cubic-bezier(.34, 1.6, .5, 1); }
.sig-band.is-shown .nu.is-tried .nu-try { opacity: 0; scale: .8; }
/* the two labels over the mockups, readable: bigger, bolder, in cream (the demo is drawn at ~70 %) */
.sig-in .nu-cap { top: -54px; font-size: 24px; font-weight: 700; letter-spacing: .01em; color: var(--creme); }
.sig-in .nu-cap::before { width: 12px; height: 12px; margin-right: 12px; vertical-align: 2px; }
.sig-in .nu-try { left: calc(var(--gx) + 330px); top: -104px; }
.sig-in .nu { margin-top: max(11vh, 110px); }

/* ==========================================================================
   QUI SOMMES-NOUS · compact: one dark beige block like the hero. Two portraits as tilted capsules, the promise,
   the ways to reach us; along the bottom, the clients' logos slide by
   ========================================================================== */
.trust.us { display: block; padding: 4vh var(--m) 12vh; background: none; border-radius: 0; }
.us-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 36px clamp(28px, 3.6vw, 64px);
  padding: clamp(30px, 3.4vw, 52px) clamp(30px, 3.8vw, 60px) clamp(24px, 2.6vw, 38px); border-radius: clamp(28px, 3vw, 44px); overflow: hidden;
  background: #E1D0B3 radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%);
  box-shadow: 0 2.4vw 4.4vw -2vw rgba(20, 18, 21, .32), 0 .6vw 1.2vw -.6vw rgba(20, 18, 21, .14);
}
/* the faces: two capsules leaning on each other */
.us-team { display: flex; padding: 0 10px 18px 0; }
.us-p { position: relative; margin: 0; rotate: -5deg; transition: rotate .6s cubic-bezier(.34, 1.56, .64, 1), translate .6s cubic-bezier(.34, 1.56, .64, 1); }
.us-p + .us-p { margin-left: -22px; margin-top: 34px; rotate: 5deg; }
.us-p:hover { z-index: 2; rotate: 0deg; translate: 0 -6px; }
.us-ph { width: clamp(120px, 10.5vw, 168px); aspect-ratio: .74; overflow: hidden; border: 5px solid var(--creme); border-radius: 999px; background: var(--creme); box-shadow: 0 22px 36px -18px rgba(20, 18, 21, .55); }
.us-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .9s cubic-bezier(.16, 1, .3, 1); }
.us-p:hover .us-ph img { scale: 1.08; }
.us-p figcaption { position: absolute; left: 50%; bottom: -16px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
.us-p figcaption b { padding: 5px 12px 6px; border-radius: 99px; background: var(--c); color: var(--encre); font: 800 18px/1 var(--disp); font-variation-settings: var(--dv-m); letter-spacing: -.02em; box-shadow: 0 8px 16px -8px rgba(20, 18, 21, .5); }
.us-p figcaption span { padding: 4px 9px; border-radius: 99px; background: var(--encre); color: var(--creme); font: 650 11.5px/1 var(--text); }
/* the promise */
.us-k { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 13px; border-radius: 99px; background: rgba(20, 18, 21, .08); font: 650 13px/1 var(--text); }
.us-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--framboise); }
.us-title { margin-top: 14px; max-width: 15ch; font: 800 clamp(34px, 3.3vw, 60px)/.92 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.055em; }
.us-title em { position: relative; z-index: 0; font-style: normal; }
.us-title em::before { content: ""; position: absolute; z-index: -1; left: -.05em; right: -.07em; top: .14em; bottom: .02em; border-radius: .14em; background: var(--framboise); rotate: -2deg; }
.us-lead { margin-top: 14px; max-width: 46ch; font-size: 16.5px; line-height: 1.45; font-weight: 500; color: #3a3438; }
.us-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.us-facts span { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 99px; background: var(--creme); font: 600 13.5px/1 var(--text); color: #5b5459; box-shadow: 0 6px 14px -10px rgba(20, 18, 21, .4); }
.us-facts b { font: 800 16px/1 var(--disp); font-variation-settings: var(--dv-m); color: var(--encre); }
/* the ways to reach us */
.us-c { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.us-btn { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px 0 16px; border-radius: 99px; background: var(--creme); color: var(--encre); font: 700 14.5px/1 var(--text); text-decoration: none; white-space: nowrap; box-shadow: 0 8px 18px -12px rgba(20, 18, 21, .45); transition: translate .4s var(--pop), background .3s, color .3s; }
.us-btn svg { width: 18px; height: 18px; flex: none; }
.us-btn:hover, .us-btn:focus-visible { translate: 4px 0; background: var(--encre); color: var(--creme); }
.us-wa { background: var(--encre); color: var(--creme); }
.us-wa:hover, .us-wa:focus-visible { background: var(--pistache); color: var(--encre); }
/* the clients, along the bottom */
.us-clients { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; padding-top: 24px; border-top: 1.5px solid rgba(20, 18, 21, .14); }
.us-ch { margin: 0; font: 800 15px/1.1 var(--disp); font-variation-settings: var(--dv-m); letter-spacing: -.01em; max-width: 9ch; }
.us-marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.us-logos { display: flex; align-items: center; gap: clamp(40px, 4.4vw, 72px); width: max-content; margin: 0; padding: 4px 0; list-style: none; animation: us-marq 30s linear infinite; }
.us-marq:hover .us-logos { animation-play-state: paused; }
.us-logos a { display: block; }
.us-logos img { display: block; width: auto; height: 42px; max-width: 170px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1); opacity: .75; transition: opacity .3s, filter .3s, scale .4s var(--pop); }
.us-logos .lg-regence img, .us-logos .lg-animalcom img { height: 54px; }
.us-logos a:hover img, .us-logos a:focus-visible img { opacity: 1; filter: none; scale: 1.08; }
@keyframes us-marq { to { translate: calc(-50% - clamp(20px, 2.2vw, 36px)) 0; } }
@media (max-width: 1100px) {
  .us-card { grid-template-columns: auto minmax(0, 1fr); }
  .us-c { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 699px) {
  .us-card { grid-template-columns: 1fr; padding: 28px 20px 22px; }
  .us-team { justify-content: center; }
  .us-c { flex-direction: column; }
  .us-clients { grid-template-columns: 1fr; gap: 14px; }
  .us-ch { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .us-logos { animation: none; flex-wrap: wrap; width: auto; } .us-p, .us-ph img { transition: none; } }
/* the portraits show more of the photo: almost square, the photo framed from its centre, little zoom on hover */
.us-ph { width: clamp(132px, 11.5vw, 182px); aspect-ratio: .9; border-radius: 46% 46% 42% 42% / 40% 40% 36% 36%; }
.us-ph img { object-position: 50% 40%; }
.us-p:hover .us-ph img { scale: 1.03; }
/* square prints, a little smaller */
.us-ph { width: clamp(112px, 9.4vw, 150px); aspect-ratio: 1; border-radius: 14px; }
.us-ph img { object-position: 50% 50%; }
.us-p + .us-p { margin-left: -6px; }
/* the clients stand still: one row, spread out, no fade on the edges */
.us-marq { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.us-logos { width: auto; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; animation: none; }
.us-logos { justify-content: flex-start; gap: 18px clamp(36px, 3.6vw, 60px); }
/* logos a little bigger, packed to the right */
.us-logos { justify-content: flex-end; }
.us-logos img { height: 52px; max-width: 200px; }
.us-logos .lg-regence img, .us-logos .lg-animalcom img { height: 66px; }
.us-ch { max-width: 11ch; }
/* a thin upright rule between the words and the logos; the logos breathe a little more */
.us-clients { gap: 28px clamp(28px, 3vw, 48px); }
.us-ch { padding-right: clamp(28px, 3vw, 48px); border-right: 1.5px solid rgba(20, 18, 21, .16); }
.us-logos { gap: 18px clamp(44px, 4.4vw, 74px); }
@media (max-width: 699px) { .us-ch { padding-right: 0; border-right: 0; } }
.us-ch { max-width: none; width: 13ch; box-sizing: content-box; }
.us-logos { flex-wrap: nowrap; gap: 18px clamp(30px, 3.2vw, 54px); }
@media (max-width: 1100px) { .us-logos { flex-wrap: wrap; } }
.us-marq { min-width: 0; }
.us-logos { gap: 18px clamp(22px, 2.6vw, 54px); }
.us-logos img { height: clamp(36px, 3.6vw, 52px); max-width: clamp(120px, 12.5vw, 200px); }
.us-logos .lg-regence img, .us-logos .lg-animalcom img { height: clamp(46px, 4.6vw, 66px); }
.us-logos { gap: 18px clamp(30px, 3.6vw, 68px); }
.us-logos { gap: 18px clamp(30px, calc(8vw - 55px), 80px); }
/* the logos slide by slowly, in a loop (the list is there twice); pointing at them stops them */
.us-marq { --lg: clamp(40px, 4.4vw, 76px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.us-logos, .us-logos:is(*) { width: max-content; flex-wrap: nowrap; justify-content: flex-start; gap: 18px var(--lg); animation: us-loop 46s linear infinite; }
.us-marq:hover .us-logos { animation-play-state: paused; }
@keyframes us-loop { to { translate: calc(-50% - var(--lg) / 2) 0; } }
@media (max-width: 1100px) { .us-logos, .us-logos:is(*) { flex-wrap: nowrap; } }
@media (prefers-reduced-motion: reduce) { .us-logos, .us-logos:is(*) { animation: none; } .us-marq { overflow-x: auto; } }
.us-logos .lg-artisans a:hover img, .us-logos .lg-artisans a:focus-visible img { filter: grayscale(1) contrast(1.1); }   /* its red mark stays grey */
/* the loop runs on transform with a plain -50% (each logo carries its own gap on the right), so pausing it
   on hover leaves it exactly where it is; Safari nudged the old calc() + translate version when paused */
.us-logos, .us-logos:is(*) { gap: 18px 0; animation: us-loop2 46s linear infinite; }
.us-logos li { margin-right: var(--lg); }
.us-marq:hover .us-logos { animation-play-state: paused; }
.us-logos img, .us-logos a:hover img, .us-logos a:focus-visible img { scale: none; }
@keyframes us-loop2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .us-logos, .us-logos:is(*) { animation: none; } }
/* the pointed logo grows a little, on its own (transform on the image, the row itself never moves) */
.us-logos img { transform: scale(1); transition: opacity .3s, filter .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.us-logos a:hover img, .us-logos a:focus-visible img { transform: scale(1.12); }
/* the loop is driven by main.js now: no CSS animation, so nothing can jump when it stops */
.us-logos, .us-logos:is(*) { animation: none; will-change: transform; }
/* the demo pill sits right under the three projects, as part of the same section */
.pj2 { padding-bottom: 5vh; }
.sig { padding-top: 0; }

/* DÉMO v4 · a discreet bar under the projects; a click opens the demo in a window over the page */
.sig-band, .sig-band:not(.is-open):hover, .sig-band.is-open {
  background: rgba(20, 18, 21, .045); color: var(--encre); box-shadow: inset 0 0 0 1.5px rgba(20, 18, 21, .1); border-radius: 999px; transform: none; transition: background .3s, box-shadow .3s;
}
.sig-band:hover { background: rgba(20, 18, 21, .07); }
.sig-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; column-gap: 18px; padding: 12px 12px 12px 14px; }
.sig-head .sig-k { grid-column: 1; grid-row: 1; margin: 0; background: var(--encre); color: var(--creme); font-size: 13px; padding: 9px 14px; }
.sig-head .sig-title { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4em; font-size: clamp(19px, 1.6vw, 26px); line-height: 1.1; letter-spacing: -.035em; }
.sig-head .sig-title span + span { margin: 0; font-size: 1em; color: #6d6570; letter-spacing: -.02em; }
.sig-ic { grid-column: 3; grid-row: 1; width: 48px; height: 48px; box-shadow: none; background: var(--encre); }
.sig-ic::before, .sig-ic::after { background: var(--creme); }
.sig-head:hover .sig-ic { box-shadow: 0 0 0 6px rgba(20, 18, 21, .1); background: var(--framboise); }
.sig-head:hover .sig-ic::before, .sig-head:hover .sig-ic::after { background: var(--encre); }
.sig-band.is-open .sig-ic::after { transform: rotate(90deg); }
.sig-band.is-open .sig-ic { transform: none; }

/* the window */
.sigm.sig-body { position: fixed; inset: 0; display: none; width: min(1480px, calc(100vw - 48px)); height: fit-content; max-width: none; max-height: calc(100vh - 48px); margin: auto; padding: clamp(30px, 3vw, 48px) clamp(24px, 2.6vw, 40px) 58px; border: 0; border-radius: clamp(28px, 3vw, 44px); overflow: auto; overscroll-behavior: contain; color: var(--creme);
  background: #262229 linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 40%); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7); grid-template-rows: none; transition: none; }
.sigm[open] { display: block; animation: pjm-in .7s cubic-bezier(.16, 1, .3, 1); }
.sigm.is-out { animation: pjm-out .3s ease-in forwards; }
.sigm::backdrop { background: rgba(20, 18, 21, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sigm .sig-in, .sig-band.is-open .sigm .sig-in { padding: 0; overflow: visible; }
.sigm .sig-in .nu { margin-top: 70px; }
.sigm .sig-ring { right: 5%; top: 6%; }
.sigm-x { position: absolute; z-index: 6; right: 20px; top: 20px; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--creme); color: var(--encre); cursor: pointer; transition: transform .5s var(--pop), background .3s; }
.sigm-x svg { width: 18px; height: 18px; }
.sigm-x:hover { transform: rotate(90deg); background: var(--framboise); }
@media (prefers-reduced-motion: reduce) { .sigm[open], .sigm.is-out { animation: none; } }
.nus-scroll, .nua-main { overscroll-behavior: contain; }
.sigm.sig-body { overflow: hidden; }

/* ON EN PARLE · no more colour floods: the section stays in the hero's dark beige whatever is chosen;
   the drawn cards are now real devices, a laptop with a real site and a phone with a real app */
.cta, .cta[data-mode] { background: #E1D0B3 radial-gradient(90% 70% at 85% 0%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 60%); }
.cta-bg { display: none; }
.cs-site.dv-pc { --bz: 8px; display: flex; flex-direction: column; aspect-ratio: auto; border-radius: 0; background: none; }
.cs-bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; }
.cs-bar i { width: 7px; height: 7px; border-radius: 50%; }
.cs-bar span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 22px; border-radius: 5px; font: 500 9px/1 var(--text); white-space: nowrap; }
.cs-pg { position: relative; aspect-ratio: 1.6; background: #fff; }
.cs-pg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cs-app.dv-ph1 { --fr: 7px; width: 150px; aspect-ratio: .49; padding: 0; border-radius: 26px; overflow: hidden; background: #fff; }
.cs-app img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cs-isl { position: absolute; z-index: 2; left: 50%; top: 2.2%; width: 32%; height: 3.4%; translate: -50% 0; border-radius: 99px; background: #0B0A0C; }
.cta .choice input:not(:checked) + span { background: rgba(246, 241, 231, .55); }
/* no background at all: the section sits on the page's cream like the others */
.cta, .cta[data-mode] { background: var(--creme); }
.cta .choice input:not(:checked) + span { background: none; }
/* the fields read as fields on the cream: a black outline like the choice buttons */
.cta .f { background: none; box-shadow: inset 0 0 0 2px var(--encre); }
.cta .f:focus-within { box-shadow: inset 0 0 0 2px var(--encre), 0 0 0 3px rgba(20, 18, 21, .18); }
.cta .f.is-bad { box-shadow: inset 0 0 0 2px var(--encre), 0 0 0 4px var(--abricot); }
.cta .f span { color: #5b5459; }
/* without its own colour the contact section no longer overlaps the one above: the card's shadow stays whole */
.cta { margin-top: 0; background: transparent !important; overflow: visible; }
.cta-stage { overflow: hidden; }
/* the studio card sits above the contact section, so its shadow is drawn over it whatever Safari does with the layers below */
.trust.us { position: relative; z-index: 5; overflow: visible; }
.cta { isolation: auto; }

/* ==========================================================================
   THE GROUND · a warmer cream than before; pinned behind the whole page, the marks the big O left
   (pressed in, then lifted off), in relief; every section scrolls over it
   ========================================================================== */
:root { --sol: #F2EADC; }
html { background: var(--sol); }
body { background: transparent; }
.bg-prints { position: fixed; z-index: -1; inset: 0; pointer-events: none; transform: translateZ(0); }
.bg-prints svg { display: block; width: 100%; height: 100%; }
/* the crater is a still picture now, rendered once (it was live SVG filters, redrawn on every frame) */
.bg-prints { background: var(--sol) url("img/fond-cratere.webp") center / cover no-repeat; will-change: transform; }
/* the contact phone, built exactly like the hero's (same frame, rim, island, buttons, glint),
   in units of its own width so it holds at every size the stage gives it */
.cs-app, .cs-app.dv-ph1 { width: 150px; aspect-ratio: .49; padding: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none !important; container-type: inline-size; }
.cs-fr { position: absolute; inset: 0; background: #1B191C; border-radius: 18.5cqw; padding: 3.5cqw;
  box-shadow: inset 0 0 0 1.1cqw #4A454D, inset 0 0 0 2cqw #0E0D0F, 0 0 0 1px rgba(255, 255, 255, .1), 0 1.5cqw 3cqw rgba(20, 18, 21, .2), 0 18cqw 32cqw -4cqw rgba(20, 18, 21, .42), 0 36cqw 60cqw -18cqw rgba(20, 18, 21, .38); }
.cs-fr::before { content: ""; position: absolute; z-index: 6; left: 50%; top: 7.8cqw; width: 27cqw; height: 7.8cqw; margin-left: -13.5cqw; border-radius: 99px; background: #0B0A0C; }
.cs-fr::after { content: ""; position: absolute; left: -1.7cqw; top: 55cqw; width: 1.7cqw; height: 22cqw; border-radius: 1.1cqw 0 0 1.1cqw; background: #3A363C; box-shadow: 0 -18.5cqw 0 #3A363C, 101.5cqw 7.4cqw 0 #3A363C; }
.cs-scr { position: relative; height: 100%; overflow: hidden; border-radius: 15.2cqw; background: #fff; }
.cs-scr::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%); }
.cs-scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ==========================================================================
   SERVICE PAGES (built from this page by tools/service_pages.py): the hero takes the offer's colour,
   as on the home page's bands — framboise, pistache, abricot; the O and the highlights change to stay seen
   ========================================================================== */
.pg-site .hx-loc i, .pg-site .hx-loc i::after { background: var(--framboise); }
.pg-both .hx-loc i, .pg-both .hx-loc i::after { background: var(--abricot); }

/* service pages: the offer presented — its band open for good, then what's included as cards */
.svp .svp-band .band-head { cursor: default; }
.svp .svp-band:hover { transform: none; }
.svp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin: 12vh 0 4vh; }
.svp-title { font-size: clamp(44px, 6vw, 108px); line-height: .86; letter-spacing: -.06em; }
.svp-title em { font-style: normal; position: relative; z-index: 0; }
.svp-title em::before { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.06em; top: .16em; bottom: .02em; border-radius: .14em; background: var(--svp, var(--framboise)); transform: rotate(-1.5deg); }
.pg-app { --svp: #BFE36B; } .pg-both { --svp: #FFB23F; } .pg-site { --svp: #FF4D7E; }
.svp-note { max-width: 34ch; font-size: 17px; color: var(--mute); }
.svp-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); margin: 0; padding: 0; list-style: none; }
.svp-cards li { display: flex; flex-direction: column; min-height: 250px; padding: 24px 22px 26px; border-radius: 26px;
  background: #E1D0B3 linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 38%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .06), 0 2px 4px rgba(20, 18, 21, .06), 0 14px 30px -14px rgba(20, 18, 21, .3), 0 34px 60px -34px rgba(20, 18, 21, .35);
  transition: transform .5s var(--pop); }
.svp-cards li:hover { transform: translateY(-4px); }
.svp-cards small { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #5b5459; }
.svp-cards small::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--svp, var(--framboise)); }
.svp-cards b { margin-top: auto; font: 800 clamp(22px, 1.7vw, 30px)/1 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.04em; }
.svp-cards p { margin-top: 12px; font-size: 15px; line-height: 1.45; color: #3e3a40; }
@media (max-width: 1100px) { .svp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .svp-cards { grid-template-columns: 1fr; } .svp-cards li { min-height: 0; } .svp-cards b { margin-top: 26px; } }
@media (prefers-reduced-motion: reduce) { .svp-cards li { transition: none; } }
/* service heroes: the home hero's dark beige; only the highlight takes the offer's colour */
.pg-site .hero .hl::before { background: var(--framboise); }
.pg-app .hero .hl::before { background: var(--pistache); }
.pg-both .hero .hl::before { background: var(--abricot); }

/* ==========================================================================
   SERVICE PAGES · the offer, told at length (tools/service_pages.py)
   ========================================================================== */
/* its sentence, lit word by word as you read */
.svp-say { padding: 16vh var(--m) 10vh; }
.svp-say p { max-width: 24ch; font: 800 clamp(34px, 4.6vw, 86px)/1.02 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.045em; }
.svp-say .w { color: rgba(20, 18, 21, .14); transition: color .25s; }
.svp-say .w.on { color: var(--encre); }
.svp-say .chip { display: inline-block; vertical-align: middle; width: 1.6em; height: .8em; margin: 0 .1em; border-radius: 99px; background-size: cover; background-position: center; transform: scale(0); transition: transform .6s var(--pop); }
.svp-say .chip.on { transform: scale(1); }
/* its features beside its live mockup */
.svp-feat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 5vw; align-items: start; padding: 6vh var(--m) 12vh; }
.svp-feat-l { position: sticky; top: 110px; }
.svp-stage.band { position: relative; display: grid; place-items: center; aspect-ratio: 1.15; padding: 6% 5%; border-radius: 44px; overflow: hidden; isolation: isolate;
  background: #E1D0B3 radial-gradient(90% 70% at 85% 0%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 60%); color: var(--encre); box-shadow: 0 2.4vw 4.4vw -2vw rgba(20, 18, 21, .32), 0 .6vw 1.2vw -.6vw rgba(20, 18, 21, .14); }
.svp-stage > :not(.svp-ring) { position: relative; z-index: 1; width: 100%; }
.svp-ring { position: absolute; z-index: 0; right: -16%; top: -22%; width: 72%; aspect-ratio: 1; height: auto; color: var(--svp, var(--framboise)); transition: rotate 1.2s cubic-bezier(.16, 1, .3, 1); }
.svp-count { margin-top: 18px; font: 800 15px/1 var(--disp); font-variation-settings: var(--dv-m); color: #5b5459; }
.svp-count b { display: inline-block; min-width: 2ch; color: var(--encre); font-size: 22px; }
.svp-k { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border-radius: 99px; background: var(--encre); color: var(--creme); font: 700 13px/1 var(--text); letter-spacing: .04em; text-transform: uppercase; }
.svp-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--svp, var(--framboise)); }
.svp-title { margin-top: 20px; font: 800 clamp(44px, 5.4vw, 100px)/.88 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.06em; }
.svp-title > span { display: block; }
.svp-title em { font-style: normal; position: relative; z-index: 0; }
.svp-title em::before { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.06em; top: .16em; bottom: .02em; border-radius: .14em; background: var(--svp, var(--framboise)); transform: rotate(-1.5deg); }
.svp-lead { margin-top: 3.4vh; max-width: 44ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; font-weight: 500; }
.svp-points { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.svp-points li { position: relative; padding-left: 26px; font-weight: 600; }
.svp-points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--encre); }
.svp-its { display: grid; gap: 18px; margin: 9vh 0 0; padding: 0; list-style: none; }
.svp-it { padding: 30px 30px 32px; border-radius: 30px; background: rgba(225, 208, 179, .45); box-shadow: inset 0 0 0 1.5px rgba(20, 18, 21, .08);
  opacity: .35; transform: translateY(40px) scale(.97); transition: opacity .6s, transform .9s cubic-bezier(.16, 1, .3, 1), background .5s, box-shadow .5s; }
.svp-it.is-in { transform: none; }
.svp-it.is-on { opacity: 1; background: #E1D0B3 linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 38%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 4px rgba(20, 18, 21, .06), 0 14px 30px -14px rgba(20, 18, 21, .3), 0 34px 60px -34px rgba(20, 18, 21, .35); }
.svp-it-k { display: flex; align-items: center; gap: 12px; font: 700 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #5b5459; }
.svp-it-k b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(20, 18, 21, .07); color: var(--encre); font: 800 13px/1 var(--disp); font-variation-settings: var(--dv-m); letter-spacing: 0; transition: background .4s, transform .5s var(--pop); }
.svp-it.is-on .svp-it-k b { background: var(--svp, var(--framboise)); transform: rotate(-8deg); }
.svp-it h3 { margin-top: 20px; font: 800 clamp(28px, 2.6vw, 46px)/.95 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.045em; }
.svp-it-p { margin-top: 12px; max-width: 46ch; font-size: 17px; line-height: 1.5; color: #3e3a40; }
.svp-viz { margin-top: 24px; }
.svp-cap { margin-top: 5vh; max-width: 46ch; font-size: 15px; color: var(--mute); }
.svp-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
/* the little visuals of each feature, played when it comes in */
.svp-viz .viz-type { margin: 0; font-family: Georgia, serif; font-size: 96px; line-height: 1; }
.svp-viz .viz-swatch { display: flex; gap: 10px; }
.svp-viz .viz-swatch i { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5); }
.svp-viz .viz-devs { display: flex; align-items: flex-end; gap: 12px; height: 130px; }
.svp-viz .viz-devs i { display: block; border-radius: 10px; background: #1B191C; box-shadow: inset 0 0 0 5px #1B191C, inset 0 0 0 30px var(--creme); }
.svp-viz .viz-devs i:nth-child(1) { width: 180px; height: 114px; } .svp-viz .viz-devs i:nth-child(2) { width: 96px; height: 128px; border-radius: 12px; } .svp-viz .viz-devs i:nth-child(3) { width: 56px; height: 108px; border-radius: 14px; }
.svp-viz .viz-gauge { width: 150px; height: 84px; }
.svp-viz .viz-gauge path { fill: none; stroke-width: 14; stroke-linecap: round; }
.svp-viz .viz-gauge .bg { stroke: rgba(20, 18, 21, .12); }
.svp-viz .viz-gauge .fg { stroke: var(--encre); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.16, 1, .3, 1) .2s; }
.svp-it.is-in .viz-gauge .fg { stroke-dashoffset: 6; }
.svp-viz .viz-serp, .svp-viz .viz-list { display: grid; gap: 8px; max-width: 420px; }
.svp-viz .viz-serp p, .svp-viz .viz-list p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 11px 15px; border-radius: 14px; background: rgba(246, 241, 231, .8); font-size: 14px; font-weight: 600; }
.svp-viz .viz-serp p { display: block; font-weight: 400; }
.svp-viz .viz-serp p.me { background: #fff; box-shadow: 0 10px 24px -12px rgba(20, 18, 21, .4); }
.svp-viz .viz-serp b { display: block; color: #1a0dab; font-size: 15px; }
.svp-viz .viz-serp span { color: #1e7a3c; font-size: 12px; }
.svp-viz .viz-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.svp-viz .viz-roles span { padding: 10px 16px; border-radius: 99px; background: rgba(246, 241, 231, .8) !important; font-weight: 650; font-size: 14px; }
.svp-viz .viz-roles span.on { background: var(--encre) !important; color: var(--creme); }
.svp-viz .viz-big { margin: 0; font: 800 clamp(64px, 7vw, 120px)/.85 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.06em; }
.svp-viz [data-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .7s cubic-bezier(.34, 1.45, .5, 1); }
.svp-it.is-in .svp-viz [data-stagger] > * { opacity: 1; transform: none; }
.svp-it.is-in .svp-viz [data-stagger] > :nth-child(2) { transition-delay: .08s; } .svp-it.is-in .svp-viz [data-stagger] > :nth-child(3) { transition-delay: .16s; }
.svp-it.is-in .svp-viz [data-stagger] > :nth-child(4) { transition-delay: .24s; } .svp-it.is-in .svp-viz [data-stagger] > :nth-child(5) { transition-delay: .32s; }
/* a band of words, sliding */
.svp-mq { overflow: hidden; padding: 2.6vh 0; background: var(--encre); color: var(--creme); transform: rotate(-2deg); margin: 4vh -2vw 8vh; }
.svp-mq-row { display: flex; width: max-content; margin: 0; animation: svp-mq 40s linear infinite; }
.svp-mq-row + .svp-mq-row { animation-direction: reverse; animation-duration: 46s; }
.svp-mq-row span { display: inline-flex; align-items: center; gap: 3vw; padding-right: 3vw; font: 800 clamp(34px, 4.2vw, 80px)/1.05 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.05em; white-space: nowrap; }
.svp-mq-row i { width: .5em; height: .5em; border-radius: 50%; box-shadow: inset 0 0 0 .13em var(--svp, var(--framboise)); }
@keyframes svp-mq { to { transform: translateX(-50%); } }
/* the steps, along a line that draws itself */
.svp-steps { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6vw; align-items: start; padding: 8vh var(--m) 14vh; }
.svp-steps-h { position: sticky; top: 130px; }
.svp-steps-h p { margin-top: 22px; max-width: 34ch; font-size: 18px; color: #5b5459; }
.svp-tl { position: relative; display: grid; gap: 7vh; margin: 0; padding: 0 0 0 0; list-style: none; }
.svp-tl-line { position: absolute; left: 31px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: rgba(20, 18, 21, .1); }
.svp-tl-line i { position: absolute; inset: 0; border-radius: inherit; background: var(--encre); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
.svp-st { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 28px; align-items: start; opacity: .3; transform: translateX(40px); transition: opacity .6s, transform .9s cubic-bezier(.16, 1, .3, 1); }
.svp-st.is-in { opacity: 1; transform: none; }
.svp-st-n { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sol, #F2EADC); box-shadow: inset 0 0 0 3px var(--encre); font: 800 18px/1 var(--disp); font-variation-settings: var(--dv-m); transition: background .4s, color .4s, transform .6s var(--pop); }
.svp-st.is-in .svp-st-n { background: var(--svp, var(--framboise)); transform: rotate(-8deg); }
.svp-st h3 { margin-top: 10px; font: 800 clamp(30px, 3vw, 54px)/.95 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.045em; }
.svp-st p { margin-top: 14px; max-width: 48ch; font-size: 17.5px; line-height: 1.5; color: #3e3a40; }
@media (max-width: 899px) {
  .svp-feat, .svp-steps { grid-template-columns: 1fr; }
  .svp-feat-l { position: relative; top: 0; }
  .svp-stage.band { aspect-ratio: auto; padding: 8% 4%; border-radius: 28px; }
  .svp-steps-h { position: static; }
  .svp-it { padding: 24px 20px; }
  .svp-st { grid-template-columns: 52px 1fr; gap: 18px; }
  .svp-st-n { width: 52px; height: 52px; }
  .svp-tl-line { left: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .svp-it, .svp-st, .svp-viz [data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .svp-mq-row { animation: none; }
  .svp-say .w { color: var(--encre); } .svp-say .chip { transform: none; }
}
/* service pages: the body clips sideways without becoming a scroll box, so the mockup can stay sticky */
body.pg-site, body.pg-app, body.pg-both { overflow-x: clip; }
/* the photo pills in the sentence are not the contact chips */
.svp-say .chip { font-size: inherit; height: .8em; width: 1.6em; padding: 0; border-radius: 99px; box-shadow: none; background-color: transparent; }

/* ==========================================================================
   HERO DEVICES IN VOLUME (as the Collection's transformation, more quietly): a body behind the screens, their edge
   catching light, a glare sweeping the glass, a soft pool of light under them, and both floating gently.
   The float uses `translate`/`rotate`, so it never fights GSAP's `transform` on the devices.
   ========================================================================== */
.hs-back { position: absolute; inset: 0 0 0 0; border-radius: 2.4cqw 2.4cqw 1cqw 1cqw; transform: translateZ(-1.6cqw); background: linear-gradient(135deg, #2e2b33, #0d0c0e 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.hs-back::after { content: ""; position: absolute; top: 3%; bottom: 3%; left: 100%; width: 1.6cqw; transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #55505a, #1a181c); border-radius: 0 .5cqw .5cqw 0; }
.hs-browser { transform: translateZ(0); }
.hs-sweep { position: absolute; z-index: 6; inset: 1.5cqw 1.5cqw 1.6cqw; pointer-events: none; overflow: hidden; border-radius: .6cqw; }
.hs-sweep::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 28%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .2), transparent); transform: skewX(-12deg); animation: hs-sweep 8s ease-in-out 3s infinite; }
@keyframes hs-sweep { 0%, 60% { left: -40%; } 90%, 100% { left: 130%; } }
.hs-phone { transform-style: preserve-3d; }
.hs-pback { position: absolute; inset: 0; border-radius: 5cqw; transform: translateZ(-1cqw); background: linear-gradient(135deg, #2e2b33, #0d0c0e 60%); }
.hs-pback::after { content: ""; position: absolute; top: 4%; bottom: 4%; right: 100%; width: 1cqw; transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(270deg, #55505a, #1a181c); border-radius: .4cqw 0 0 .4cqw; }
.hs-floor { position: absolute; left: 4cqw; right: -2cqw; top: 76cqw; height: 18cqw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20, 18, 21, .26), rgba(20, 18, 21, 0) 70%); filter: blur(4px); animation: hs-floor 7s ease-in-out infinite; }
@keyframes hs-floor { 50% { transform: scale(.9); opacity: .7; } }
@media (prefers-reduced-motion: no-preference) {
  .hs-laptop { animation: hs-float 7s ease-in-out infinite; }
  .hs-phone { animation: hs-float 7s ease-in-out -2.4s infinite; }
}
@keyframes hs-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -1.1cqw; rotate: .6deg; } }
@media (max-width: 899px) { .hs-floor { top: auto; bottom: -4cqw; } }
@media (prefers-reduced-motion: reduce) { .hs-sweep::after, .hs-floor { animation: none; } }
/* lighter: no live blur on the pool of light, and the float on its own composited layer */
.hs-floor { filter: none; background: radial-gradient(50% 50% at 50% 50%, rgba(20, 18, 21, .2), rgba(20, 18, 21, 0) 72%); animation: none; }
.hs-laptop, .hs-phone { will-change: transform, translate, rotate; }


/* Le studio on ink (the Méthode stays as it was) */
/* ---- Le studio ---- */
.us-card { background: var(--encre) radial-gradient(90% 120% at 100% 0%, rgba(255, 77, 126, .16), rgba(255, 77, 126, 0) 55%) !important; color: var(--creme); }
.us-k { background: rgba(246, 241, 231, .1); color: var(--creme); }
.us-title { color: var(--creme); }
.us-title em { color: var(--encre); }
.us-lead { color: rgba(246, 241, 231, .78); }
.us-facts span { background: rgba(246, 241, 231, .08); color: rgba(246, 241, 231, .72); box-shadow: inset 0 0 0 1px rgba(246, 241, 231, .12); }
.us-facts b { color: var(--creme); }
.us-btn { background: rgba(246, 241, 231, .08); color: var(--creme); box-shadow: inset 0 0 0 1.5px rgba(246, 241, 231, .18); }
.us-btn:hover, .us-btn:focus-visible { background: var(--creme); color: var(--encre); }
.us-wa { background: var(--creme); color: var(--encre); }
.us-wa:hover, .us-wa:focus-visible { background: var(--pistache); color: var(--encre); }
.us-ph { border-color: rgba(246, 241, 231, .9); }
.us-clients { border-top-color: rgba(246, 241, 231, .14); }
.us-ch { color: var(--creme); border-right-color: rgba(246, 241, 231, .2) !important; }
.us-logos img { mix-blend-mode: normal; filter: grayscale(1) invert(1) brightness(1.6) contrast(.9); opacity: .7; }
.us-logos a:hover img, .us-logos a:focus-visible img { filter: grayscale(1) invert(1) brightness(2); opacity: 1; }
.us-logos .lg-artisans a:hover img, .us-logos .lg-artisans a:focus-visible img { filter: grayscale(1) invert(1) brightness(2); }
.mt .mt-msg-in { background: #fff; color: var(--encre); }
.mt .mt-msg-in small { color: #6B656E; }
.mt .mt-msg-out { background: var(--framboise); color: var(--encre); }
.mt .mt-msg-in span { color: var(--encre); }
@media (max-width: 899px) {
  .mt .mt-title { font-size: 12.4vw; }
  .mt .mt-title > span:nth-child(2) { padding-left: 0; }
  .mt-k { font-size: 11.5px; }
}
@media (max-width: 899px) { .mt { grid-template-columns: 1fr !important; } .mt-side { display: block; } .mt .mt-title { font-size: 12vw; } }

/* ==========================================================================
   MÉTHODE · bolder (same block, same scenes): the home page's big type with tilted highlights, a giant outlined
   step number behind each scene in the step's colour, the logo's O turning behind, the active step filled with its colour
   ========================================================================== */
.mt-k { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 8px 15px 8px 12px; border-radius: 99px; background: var(--encre); color: var(--creme); font: 700 13px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; }
.mt-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--framboise); box-shadow: 0 0 0 4px rgba(255, 77, 126, .25); }
.mt .mt-title { font-size: clamp(46px, 4.9vw, 92px); line-height: .88; letter-spacing: -.056em; }
.mt .mt-title > span { display: block; }
.mt .mt-title > span:nth-child(2) { padding-left: .5em; }
.mt .mt-title em { position: relative; z-index: 0; display: inline-block; font-style: normal; }
.mt .mt-title em::before { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.07em; top: .14em; bottom: .02em; border-radius: .14em; background: var(--framboise); transform: rotate(-1.5deg); }
.mt .mt-title em.mt-em2::before { background: var(--pistache); transform: rotate(1.5deg); }
.mt-lead { font-size: clamp(16px, 1.2vw, 19px) !important; }
/* the active step takes its own colour */
.mt .mt-steps button.is-on { background: var(--c); color: var(--encre); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--c) 80%, #000), inset 0 1px 0 rgba(255, 255, 255, .35); transform: translateX(10px) rotate(-1deg); }
.mt .mt-steps button.is-on b { background: var(--encre); color: var(--c); transform: rotate(-8deg); }
.mt .mt-steps button.is-on small { color: rgba(20, 18, 21, .72); }
.mt .mt-steps button.is-on em { color: var(--encre); }
.mt .mt-steps button[style*="#141215"].is-on { color: var(--creme); }
.mt .mt-steps button[style*="#141215"].is-on b { background: var(--creme); color: var(--encre); }
.mt .mt-steps button[style*="#141215"].is-on small { color: rgba(246, 241, 231, .7); }
.mt .mt-steps button[style*="#141215"].is-on em { color: var(--creme); }
.mt-steps button { transition: background .35s, color .35s, transform .5s cubic-bezier(.34, 1.4, .64, 1), box-shadow .35s; }
/* behind each scene: the O of the logo turning, and the giant outlined number of the step */
.mt-stage { isolation: isolate; }
.mt-ring { display: block !important; position: absolute; z-index: -2; width: 78cqw; height: 78cqw; right: -14cqw; top: -16cqw; opacity: .9; }
.mt-big { position: absolute; z-index: -1; left: -6cqw; bottom: -10cqw; margin: 0; display: flex; align-items: flex-start; pointer-events: none;
  font: 800 52cqw/.8 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.07em; color: transparent; -webkit-text-stroke: .35cqw var(--mc, var(--framboise)); }
.mt-big small { margin: 3cqw 0 0 1cqw; font-size: 6cqw; letter-spacing: -.03em; -webkit-text-stroke: 0; color: var(--encre); opacity: .5; }
@media (max-width: 899px) { .mt .mt-title > span:nth-child(2) { padding-left: 0; } .mt .mt-title { font-size: 12vw; } .mt-big { font-size: 46cqw; } }
@media (prefers-reduced-motion: reduce) { .mt-steps button { transition: none; } }
.mt-big small { display: none; }

/* ==========================================================================
   MÉTHODE · noir plein écran, ambiance « cinéma »: the section runs edge to edge on ink, a glow in the colour of the
   active step breathes behind the scene and changes with it; cream type, the steps light up in their colours
   ========================================================================== */
@property --glow { syntax: '<color>'; inherits: true; initial-value: #FF4D7E; }
.mt { --glow: #FF4D7E; margin: 10vh calc(50% - 50vw) !important; width: auto; border-radius: 0 !important; padding: 16vh var(--m) 16vh !important; color: var(--creme);
  background: var(--encre) !important; background-image:
    radial-gradient(42% 60% at 74% 48%, color-mix(in srgb, var(--glow) 38%, transparent), transparent 70%),
    radial-gradient(30% 40% at 12% 100%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 70%) !important;
  box-shadow: none !important; transition: --glow 1s ease; overflow: hidden; }
.mt-k { background: rgba(246, 241, 231, .1); color: var(--creme); }
.mt .mt-title { color: var(--creme); font-size: clamp(50px, 5.6vw, 108px); }
.mt .mt-title em { color: var(--encre); }
.mt-lead { color: rgba(246, 241, 231, .72) !important; }
.mt .mt-steps button { color: var(--creme); }
.mt .mt-steps button b { background: rgba(246, 241, 231, .1); color: var(--creme); }
.mt .mt-steps small { color: rgba(246, 241, 231, .6); }
.mt .mt-steps button:hover { background: rgba(246, 241, 231, .07); box-shadow: inset 0 0 0 1.5px rgba(246, 241, 231, .18); }
.mt .mt-steps button.is-on small { color: rgba(20, 18, 21, .72); }
.mt .mt-steps button[style*="#141215"].is-on { background: var(--creme); color: var(--encre); }
.mt .mt-steps button[style*="#141215"].is-on b { background: var(--encre); color: var(--creme); }
.mt .mt-steps button[style*="#141215"].is-on small { color: rgba(20, 18, 21, .72); }
.mt .mt-steps button[style*="#141215"].is-on em { color: var(--encre); }
.mt .mt-msg-in { background: #fff; color: var(--encre); }
.mt-big { -webkit-text-stroke-color: color-mix(in srgb, var(--mc, var(--framboise)) 70%, transparent); }
.mt-big[style], .mt-stage[style*="#141215"] .mt-big { }
.mt-stage { --mc-on-dark: var(--mc); }
@media (max-width: 899px) { .mt { padding: 10vh var(--m) !important; } }
.mt { padding: 11vh var(--m) 11vh !important; }
.mt .mt-title { font-size: clamp(46px, 4.8vw, 92px); }
.mt-toast, .mt-toast b, .mt-ggl, .mt-note, .mt-cmt, .mt-mood { color: var(--encre); }
.mt-toast small { color: #6B656E; }
.mt-stage[style*="#141215"] .mt-big { -webkit-text-stroke-color: rgba(246, 241, 231, .35); }
/* the active step keeps its colour under the pointer (the hover rule came later and washed it out) */
.mt .mt-steps button.is-on, .mt .mt-steps button.is-on:hover { background: var(--c); color: var(--encre); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--c) 80%, #000), inset 0 1px 0 rgba(255, 255, 255, .35); }
.mt .mt-steps button.is-on strong, .mt .mt-steps button.is-on:hover strong { color: inherit; }
.mt .mt-steps button[style*="#141215"].is-on, .mt .mt-steps button[style*="#141215"].is-on:hover { background: var(--creme); color: var(--encre); }

/* ==========================================================================
   MOBILE · the home hero reads: title, mockup, words, buttons
   ========================================================================== */
@media (max-width: 899px) {
  .hero { gap: 0; padding-bottom: 56px; }
  .hero-txt { display: contents; }
  .hero-title { order: 1; }
  .hero-stage { order: 2; height: 78vw; margin: 26px -2vw 6px; }
  .hero-sub { order: 3; margin-top: 18px; }
  .hero-actions { order: 4; margin-top: 22px; }
}

/* mobile · the site band's demo stays a laptop screen (desktop layout, scaled down) instead of a tall portrait page */
@media (max-width: 899px) {
  .band-in > .restyle { aspect-ratio: 1.6; }
  .band-in > .restyle .rs-bar { height: 4.4cqw; } .band-in > .restyle .rs-bar span { font-size: 1.35cqw; padding: .45cqw 4cqw; } .band-in > .restyle .rs-bar i { width: 1.2cqw; height: 1.2cqw; }
  .band-in > .restyle .rs-page { height: calc(100% - 4.4cqw); }
  .band-in > .restyle .rs-nav { grid-template-columns: auto 1fr auto; padding: 2.4cqw 4cqw; font-size: 1.5cqw; }
  .band-in > .restyle .rs-links { display: flex; }
  .band-in > .restyle .rs-mark { font-size: 2.6cqw; }
  .band-in > .restyle .rs-hero { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .band-in > .restyle[data-theme="1"] .rs-hero { grid-template-columns: 1fr; grid-template-rows: none; }
  .band-in > .restyle[data-theme="2"] .rs-hero { grid-template-columns: .9fr 1fr; grid-template-rows: none; }
  .band-in > .restyle .rs-txt { padding: 3cqw 4cqw 2cqw; }
  .band-in > .restyle[data-theme="1"] .rs-txt { max-width: 62%; justify-content: center; }
  .band-in > .restyle .rs-eye { font-size: 1.35cqw; } .band-in > .restyle .rs-title { font-size: 5.2cqw; } .band-in > .restyle[data-theme="1"] .rs-title { font-size: 6cqw; }
  .band-in > .restyle .rs-sub { font-size: 1.55cqw; } .band-in > .restyle .rs-btn, .band-in > .restyle .rs-btn2 { font-size: 1.4cqw; padding: 1.2cqw 2cqw; } .band-in > .restyle .rs-cta { gap: 1.2cqw; margin-top: 2.2cqw; }
  .band-in > .restyle[data-theme="2"] .rs-ph { margin: 1cqw 0 0 4cqw; border-radius: 20cqw 20cqw 1.4cqw 1.4cqw; }
  .band-in > .restyle .rs-shop { display: grid; }
}

/* ==========================================================================
   MOBILE MENU · organised: the four services as coloured rows (what each one is, in a line), then the rest,
   then the call to action and the contacts — all on one screen, no giant words
   ========================================================================== */
.menu { padding: 16px 16px 24px; overflow-y: auto; gap: 0; }
.menu-top { flex: none; }
.menu-close { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 20px; font: 700 15px/1 var(--text); }
.menu-close i { position: relative; width: 14px; height: 14px; }
.menu-close i::before, .menu-close i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; transform: rotate(45deg); }
.menu-close i::after { transform: rotate(-45deg); }
.menu-h { margin: 28px 0 10px; font: 700 12px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 241, 231, .5); }
.menu-links { margin-top: 0; }
.menu .menu-svc { display: grid; gap: 8px; }
.menu .menu-svc a { position: relative; display: grid; grid-template-columns: 1fr 40px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 14px 16px 18px; border-radius: 22px;
  background: var(--c); color: var(--encre); text-decoration: none; white-space: normal; font: inherit; line-height: 1; letter-spacing: 0; }
.menu .menu-svc a[style*="--b:1"] { background: rgba(246, 241, 231, .08); color: var(--creme); box-shadow: inset 0 0 0 1.5px rgba(246, 241, 231, .25); }
.menu .menu-svc b { grid-column: 1; font: 800 25px/1 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.04em; }
.menu .menu-svc small { grid-column: 1; margin-top: 6px; font: 600 13.5px/1.3 var(--text); opacity: .72; }
.menu .menu-svc i { grid-column: 2; grid-row: 1 / span 2; position: relative; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
.menu .menu-svc i::before { content: ""; position: absolute; left: 12px; top: 13px; width: 11px; height: 11px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.menu .menu-svc a:active { transform: scale(.98); }
.menu .menu-more { display: flex; flex-wrap: wrap; gap: 8px; }
.menu .menu-more a { padding: 12px 18px; border-radius: 99px; background: rgba(246, 241, 231, .08); color: var(--creme); box-shadow: inset 0 0 0 1px rgba(246, 241, 231, .14); font: 700 16px/1 var(--text); letter-spacing: 0; text-decoration: none; white-space: nowrap; }
.menu .menu-more a[aria-current] { background: var(--framboise); color: var(--encre); }
.menu .menu-cta { flex: none; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: auto; padding-top: 0; height: 58px; font-size: 17px; }
.menu-links ~ .menu-cta { margin-top: 28px; }
.menu-cta i { font-style: normal; }
.menu .menu-soc { margin-top: 14px; }

.menu .menu-svc a.is-dk { background: rgba(246, 241, 231, .08); color: var(--creme); box-shadow: inset 0 0 0 1.5px rgba(246, 241, 231, .25); }
/* mobile · the hero's laptop stays inside the screen */
@media (max-width: 899px) { .hs-laptop { right: 2cqw !important; width: 78cqw !important; } .hs-phone { left: 2cqw; } }

/* ==========================================================================
   MOBILE · report of 30.10 (iPhone): services closer to their neighbours, smaller band titles (the + stays on the
   same line), smaller demos in the « site » and « collection » bands
   ========================================================================== */
@media (max-width: 899px) {
  .svc { padding-top: 2vh !important; padding-bottom: 7vh !important; }
  .bands { margin-top: 2vh; }
  .band-head { grid-template-columns: minmax(0, 1fr) 44px !important; gap: 12px !important; padding: 20px 18px !important; }
  .band-t { font-size: clamp(26px, 7.6vw, 34px) !important; line-height: 1 !important; }
  .band-l { display: none; }
  .band-ic { width: 42px !important; height: 42px !important; }
  .band-in > .restyle { width: 86% !important; justify-self: center; }
  .band-in > .cx-scene, .band-in > [data-cx-stage], .band-in > .cx-stage { width: 86% !important; justify-self: center; }
}
@media (max-width: 899px) { .about { padding-bottom: 5vh !important; } }