/* ==========================================================================
   DÉMESURE — Studio de création web
   ========================================================================== */

:root {
  --ink: #0b0b0a;
  --ink-2: #121210;
  --ink-3: #1a1a17;
  --bone: #ebe8df;
  --paper: #f4f2eb;
  --accent: #ff4a1c;

  --bg: var(--ink);
  --fg: var(--bone);
  --fg-dim: rgba(235, 232, 223, .58);
  --fg-faint: rgba(235, 232, 223, .32);
  --rule: rgba(235, 232, 223, .13);

  --display: "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --g: clamp(16px, 3.2vw, 44px);
  --ruler: 0px;
  --nav-h: 76px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

html.has-rulers { --ruler: 22px; }

html.is-light {
  --bg: var(--bone);
  --fg: var(--ink);
  --fg-dim: rgba(11, 11, 10, .6);
  --fg-faint: rgba(11, 11, 10, .35);
  --rule: rgba(11, 11, 10, .14);
}

/* ---------- Base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
  overflow-x: clip; /* garde-fou iPhone : la page ne glisse jamais de côté */
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  padding-left: var(--ruler);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--display);
  font-size: clamp(16px, 1.05vw, 18px);
  font-variation-settings: "wdth" 100, "wght" 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color .8s var(--ease-io), color .8s var(--ease-io);
}
body.is-loading { overflow: hidden; }

::selection { background: var(--accent); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
canvas { display: block; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: -.01em;
}

.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: .05em;
  line-height: 1.45;
  text-transform: uppercase;
}

.dim { color: var(--fg-dim); }

.skip {
  position: fixed; left: 12px; top: -80px; z-index: 300;
  background: var(--accent); color: var(--ink);
  padding: 10px 14px; font-family: var(--mono); font-size: 12px;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.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;
}

/* ---------- Grain --------------------------------------------------------- */

/* Le cadre reste aux dimensions de l'écran (sinon Safari iPhone élargit la page) ; le grain bouge dedans. */
.grain {
  position: fixed; inset: 0; z-index: 95;
  overflow: hidden;
  pointer-events: none;
  opacity: .055;
}
.grain::before {
  content: ""; position: absolute; inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); }
  80% { transform: translate(5%, 4%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Boutons ------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 26px 0 28px;
  border-radius: 999px;
  background: var(--accent); color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease-out);
  white-space: nowrap;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fg);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .6s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--bg); }
.btn__arrow {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: currentColor;
  transition: transform .6s var(--ease-out);
}
.btn__arrow svg { width: 10px; height: 10px; color: var(--accent); transition: color .5s var(--ease-out); }
.btn:hover .btn__arrow { transform: rotate(45deg); }
.btn:hover .btn__arrow svg { color: var(--fg); }

.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg-faint); }
.btn--ghost .btn__arrow svg { color: var(--bg); }
.btn--ghost:hover .btn__arrow svg { color: var(--fg); }

.btn--sm { height: 42px; padding: 0 18px; font-size: 11px; }

.roll { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: top; }
.roll > span { display: block; transition: transform .6s var(--ease-out); }
.roll > span::after { content: attr(data-t); display: block; }
a:hover .roll > span, button:hover .roll > span,
a:focus-visible .roll > span, button:focus-visible .roll > span { transform: translateY(-1.25em); }

/* ---------- Mode secret (« démesure ») ------------------------------------ */

.chaos {
  position: fixed; inset: 0; z-index: 96;
  pointer-events: none;
  mix-blend-mode: difference;
  background: var(--accent);
  opacity: 0;
  transition: opacity .9s var(--ease-io);
}
html.is-chaos .chaos { opacity: 1; animation: chaos 2.4s linear infinite; }
html.is-chaos .grain { opacity: .14; }
html.is-chaos .hero__title { animation: wobble 1.8s ease-in-out infinite; }
@keyframes chaos {
  0%, 100% { background: #ff4a1c; }
  33% { background: #1cc8ff; }
  66% { background: #c6ff1c; }
}
@keyframes wobble {
  0%, 100% { transform: skewX(0); }
  25% { transform: skewX(-9deg); }
  75% { transform: skewX(9deg); }
}

/* ---------- Préchargement ------------------------------------------------- */

.loader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--g);
  background: var(--ink); color: var(--bone);
  clip-path: inset(0 0 0 0);
}
html.no-js .loader { display: none; }
.loader__row { display: flex; justify-content: space-between; gap: 20px; }
.loader__row span:last-child { text-align: right; }
.loader__mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.loader__num {
  font-size: clamp(120px, 27vw, 440px);
  line-height: .78;
  font-variation-settings: "wdth" 62, "wght" 200;
  font-feature-settings: "tnum";
  letter-spacing: -.02em;
}
.loader__unit { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 7vw, 110px); line-height: 1; color: var(--accent); }
.loader__ruler {
  position: relative; height: 22px; margin-bottom: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(235,232,223,.35) 0 1px, transparent 1px 10px) left bottom / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(235,232,223,.6) 0 1px, transparent 1px 50px) left bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--bone) 0 1px, transparent 1px 100px) left bottom / 100% 22px no-repeat;
}
.loader__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}

/* ---------- Règles (bords de l'écran) ------------------------------------- */

.ruler, .ruler-corner { display: none; }
html.has-rulers .ruler, html.has-rulers .ruler-corner { display: block; }

.ruler {
  position: fixed; z-index: 80;
  pointer-events: none;
  background: var(--bg);
  transition: background-color .8s var(--ease-io);
}
.ruler canvas { width: 100%; height: 100%; }
.ruler--x { top: 0; left: var(--ruler); right: 0; height: var(--ruler); box-shadow: inset 0 -1px 0 var(--rule); }
.ruler--y { top: var(--ruler); left: 0; bottom: 0; width: var(--ruler); box-shadow: inset -1px 0 0 var(--rule); }
.ruler__mark { position: absolute; background: var(--accent); }
.ruler--x .ruler__mark { top: 0; bottom: 0; left: 0; width: 1px; }
.ruler--y .ruler__mark { left: 0; right: 0; top: 0; height: 1px; }
.ruler-corner {
  position: fixed; top: 0; left: 0; z-index: 81;
  width: var(--ruler); height: var(--ruler);
  background: var(--bg);
  box-shadow: inset -1px -1px 0 var(--rule);
  transition: background-color .8s var(--ease-io);
}
.ruler-corner::after {
  content: ""; position: absolute; inset: 8px;
  border-radius: 50%; background: var(--accent);
}

/* ---------- Curseur ------------------------------------------------------- */

.cursor { display: none; }
html.has-cursor .cursor {
  display: block;
  position: fixed; inset: 0; z-index: 150;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #ebe8df;
  transition: opacity .4s;
}
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea { cursor: text !important; }
.cursor.is-out { opacity: 0; }
.cursor__x, .cursor__y { position: absolute; background: currentColor; opacity: .09; will-change: transform; }
.cursor__x { left: 0; right: 0; top: 0; height: 1px; }
.cursor__y { top: 0; bottom: 0; left: 0; width: 1px; }
.cursor__dot {
  position: absolute; left: 0; top: 0;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: currentColor;
  will-change: transform;
}
.cursor__ring {
  position: absolute; left: 0; top: 0;
  will-change: transform;
}
.cursor__ring i {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px;
  border: 1px solid currentColor; border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  transition: width .5s var(--ease-out), height .5s var(--ease-out), background-color .4s, border-color .4s;
}
.cursor.is-hover .cursor__ring i { width: 70px; height: 70px; }
html.has-cursor .cursor.has-label { mix-blend-mode: normal; }
.cursor.has-label .cursor__ring i { width: 104px; height: 104px; background: var(--bone); border-color: var(--bone); }
.cursor.is-down .cursor__ring i { width: 28px; height: 28px; }
.cursor__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); font-style: normal;
  opacity: 0; transition: opacity .3s;
}
.cursor.has-label .cursor__label { opacity: 1; }
.cursor.has-label .cursor__dot { opacity: 0; }
.cursor__coords {
  position: absolute; left: 0; top: 0;
  font-size: 9px; opacity: .55;
  white-space: nowrap;
  will-change: transform;
}

/* ---------- Navigation ---------------------------------------------------- */

.nav {
  position: fixed; top: var(--ruler); left: var(--ruler); right: 0; z-index: 70;
  height: var(--nav-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 0 var(--g);
  color: var(--fg);
  transition: transform .7s var(--ease-out), color .8s var(--ease-io), background-color .8s var(--ease-io), box-shadow .4s;
}
.nav.is-hidden { transform: translateY(calc(-100% - var(--ruler))); }
/* Dès qu'on défile, la barre prend le fond de la page : le contenu passe dessous sans se mêler au logo */
.nav--simple, .nav.is-solid { background-color: var(--bg); }
.nav.is-solid { box-shadow: 0 1px 0 var(--rule); }
.nav__logo { justify-self: start; display: inline-flex; align-items: baseline; gap: 8px; }
.logo {
  font-size: 19px; letter-spacing: .02em; line-height: 1;
  font-variation-settings: "wdth" 125, "wght" 800;
  transition: font-variation-settings .7s var(--ease-out), letter-spacing .7s var(--ease-out);
}
.nav__logo:hover .logo { font-variation-settings: "wdth" 62, "wght" 300; letter-spacing: .14em; }
.nav__logo sup { font-family: var(--mono); font-size: 9px; color: var(--fg-dim); }

.nav__status { justify-self: center; display: inline-flex; align-items: center; gap: 10px; color: var(--fg-dim); white-space: nowrap; }
.pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s var(--ease-out) infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.4); opacity: 0; } }

.nav__right { justify-self: end; display: flex; align-items: center; gap: 30px; }
.nav__links { display: flex; gap: 26px; }
.nav__links a { position: relative; padding: 4px 0; white-space: nowrap; }
.nav__cta { flex: none; white-space: nowrap; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__burger { display: none; height: 42px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--fg-faint); }

/* Menu mobile : le rideau tombe depuis le bouton, puis chaque ligne sort de
   sous son filet, dans l'ordre. À la fermeture, les lignes redescendent et le
   rideau remonte (la visibilité ne bascule qu'une fois le rideau parti). */
.menu {
  position: fixed; inset: 0; z-index: 65;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 32px;
  padding: calc(var(--nav-h) + 20px) var(--g) calc(var(--g) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink); color: var(--bone);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s var(--ease-io) .12s, visibility 0s .72s;
}
/* Les liens restent en bas ; sur un écran trop bas (téléphone couché), le menu défile au lieu de couper le haut. */
.menu__links { margin-top: auto; }
.menu.is-open {
  clip-path: inset(0 0 0 0); visibility: visible;
  transition: clip-path .7s var(--ease-out), visibility 0s;
}
.menu__links li { position: relative; overflow: hidden; }
.menu__links li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(235,232,223,.13);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-io);
}
.menu__links a {
  display: flex; align-items: baseline; gap: 14px;
  font-size: clamp(34px, 11.4vw, 96px);
  font-size: clamp(30px, min(11.4vw, 10.5svh), 96px);
  line-height: .95;
  font-variation-settings: "wdth" 110, "wght" 800;
  white-space: nowrap;
  padding: 10px 0;
  transform: translateY(105%);
  transition: transform .45s var(--ease-io);
}
.menu__links a .mono { color: var(--accent); }
.menu__links li:nth-child(1) { --d: .16s; }
.menu__links li:nth-child(2) { --d: .23s; }
.menu__links li:nth-child(3) { --d: .3s; }
.menu__links li:nth-child(4) { --d: .37s; }
.menu__links li:nth-child(5) { --d: .44s; }
.menu__foot {
  --d: .55s;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 20px; color: rgba(235,232,223,.6);
  opacity: 0; transform: translateY(14px);
  transition: opacity .25s, transform .4s var(--ease-io);
}
.menu.is-open .menu__links a,
.menu.is-open .menu__links li::after,
.menu.is-open .menu__foot {
  opacity: 1; transform: none;
  transition: transform .9s var(--ease-out) var(--d), opacity .7s var(--ease-out) var(--d);
}
/* Menu ouvert : la barre reste visible et repasse en clair, même sur la section claire */
html.menu-open .nav {
  --bg: var(--ink); --fg: var(--bone);
  --fg-dim: rgba(235, 232, 223, .58); --fg-faint: rgba(235, 232, 223, .32); --rule: rgba(235, 232, 223, .13);
  transform: none;
}

/* ---------- Sections génériques ------------------------------------------- */

.section { position: relative; padding: clamp(84px, 11vw, 170px) var(--g); }
.section__label { display: flex; gap: 18px; align-items: center; color: var(--fg-dim); }
.section__label span:first-child { color: var(--accent); }
.section__label::after { content: ""; flex: 0 0 60px; height: 1px; background: var(--rule); }

.h2 {
  font-size: clamp(44px, 7.4vw, 128px);
  line-height: .9;
  letter-spacing: -.035em;
  font-variation-settings: "wdth" 88, "wght" 760;
}
.h2 em { letter-spacing: -.02em; font-size: 1.08em; }

/* ---------- Hero ---------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(28px, 5vh, 64px);
  padding: calc(var(--nav-h) + var(--ruler) + clamp(18px, 4vh, 56px)) var(--g) var(--g);
  overflow: hidden;
  background: var(--ink); color: var(--bone);
}
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.hero__gl.is-off { display: none; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(to top, var(--ink), transparent);
  pointer-events: none;
}
.hero > *:not(.hero__gl) { position: relative; z-index: 2; }

.hero__grid {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(30px, 4.5vw, 80px);
}
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2.6vh, 30px); }
.hero__kicker { color: rgba(235,232,223,.6); }
.hero__kicker b { font-weight: 400; color: var(--accent); }

.hero__title {
  font-size: clamp(42px, 5.5vw, 104px);
  font-weight: inherit;
  line-height: .94;
  letter-spacing: -.035em;
  font-variation-settings: "wdth" 92, "wght" 760;
}
.hero__line { display: block; padding-bottom: .12em; margin-bottom: -.12em; }
.hero__title.is-clipped .hero__line { overflow: hidden; }
.hero__line > span { display: inline-block; will-change: transform; }
.hero__stretch { color: var(--accent); white-space: nowrap; }
.hero__letter { display: inline-block; font-variation-settings: "wdth" 100, "wght" 760; }
.hero__dot { font-style: normal; }

.hero__lead {
  max-width: 40ch;
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.32;
  letter-spacing: -.01em;
  color: rgba(235,232,223,.86);
  font-variation-settings: "wdth" 96, "wght" 420;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__ctas .btn--ghost { color: var(--bone); box-shadow: inset 0 0 0 1px rgba(235,232,223,.3); }
.hero__ctas .btn--ghost::before { background: var(--bone); }
.hero__ctas .btn--ghost:hover { color: var(--ink); }
.hero__note { color: rgba(235,232,223,.55); }

/* Un site et son logiciel, qui bougent ensemble */
.hero__duo { position: relative; aspect-ratio: 1.22; align-self: center; }
.duo__screen, .duo__phone {
  position: absolute; display: block;
  padding: 5px; background: #050505;
  box-shadow: 0 0 0 1px rgba(235,232,223,.16), 0 40px 80px -30px rgba(0,0,0,.9);
}
.duo__screen { right: 0; top: 4%; width: 84%; aspect-ratio: 960 / 667; border-radius: 12px; }
.duo__phone { left: 0; bottom: 0; z-index: 2; height: 78%; aspect-ratio: 400 / 854; border-radius: 28px; }
.duo__screen img, .duo__glass video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 0 0;
  opacity: 0; transition: opacity .8s var(--ease-io);
}
.duo__screen img { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 8px; }
.duo__glass { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 23px; background: #121210; }
.duo__glass video { object-position: 50% 0; }
.duo__screen .is-active, .duo__glass .is-active { opacity: 1; }
.duo__label {
  position: absolute; top: -13px; left: 16px; z-index: 3;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--ink); box-shadow: inset 0 0 0 1px rgba(235,232,223,.22);
  color: var(--bone);
}
.duo__phone .duo__label { background: var(--accent); color: var(--ink); box-shadow: none; }
/* La légende reste à droite du téléphone (≈ 30 % de la largeur) : elle passe à la ligne plutôt que dessous. */
.duo__caption { position: absolute; right: 0; left: 33%; bottom: 2%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 .7em; color: rgba(235,232,223,.6); }
.duo__sectors { display: inline-grid; justify-items: end; }
.duo__sectors span { grid-area: 1 / 1; color: var(--accent); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .7s var(--ease-out); }
.duo__sectors span.is-active { opacity: 1; transform: none; }
.duo__caption::before { content: ""; order: 1; }

.hero__proof {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(235,232,223,.14);
  color: rgba(235,232,223,.6);
}
.hero__proof b { font-family: var(--display); font-size: 1.7em; letter-spacing: -.02em; font-weight: 400; font-variation-settings: "wdth" 100, "wght" 700; color: var(--bone); margin-right: .45em; vertical-align: -.08em; }
.hero__proof a { transition: color .3s; }
.hero__proof a:hover, .hero__proof a:focus-visible { color: var(--accent); }

/* ---------- Labo ---------------------------------------------------------- */

.lab { position: relative; overflow: hidden; }
.lab__track { display: flex; flex-direction: column; gap: 90px; padding: clamp(110px, 14vw, 200px) var(--g); }
.lab__intro { max-width: 640px; display: flex; flex-direction: column; gap: 30px; }
.lab__lead { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.35; color: var(--fg-dim); max-width: 38ch; }
.lab__hint { display: none; color: var(--accent); }

.piece { display: flex; flex-direction: column; gap: 22px; }
.piece__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #070706;
  overflow: hidden;
  border-radius: 4px;
  touch-action: pan-y;
}
.piece__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.piece__stage::before, .piece__stage::after {
  content: ""; position: absolute; z-index: 3; width: 16px; height: 16px;
  border: 1px solid rgba(235,232,223,.5);
  pointer-events: none;
}
.piece__stage::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.piece__stage::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.piece__dim, .piece__fps, .piece__hint {
  position: absolute; z-index: 3;
  color: rgba(235,232,223,.6);
  pointer-events: none;
}
.piece__dim { top: 14px; right: 16px; }
.piece__fps { bottom: 14px; left: 16px; }
.piece__fps::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; margin-right: 8px; vertical-align: 1px; }
.piece__hint { top: 14px; left: 40px; }

.piece__info { display: grid; grid-template-columns: auto 1fr; gap: 6px 26px; align-items: baseline; }
.piece__num { color: var(--accent); grid-row: span 2; padding-top: 6px; }
.piece__title {
  font-size: clamp(34px, 3.6vw, 60px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: "wdth" 110, "wght" 780;
}
.piece__desc { color: var(--fg-dim); max-width: 46ch; }
.piece__tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.piece__tags li { padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--fg-dim); }

.elastic {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4% 5%;
  color: var(--bone);
  user-select: none;
}
.elastic__row { display: flex; justify-content: space-between; line-height: .86; }
.elastic__row span { display: inline-block; }
.elastic__row:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(235,232,223,.75); }
.elastic__row:nth-child(3) span { color: var(--accent); -webkit-text-stroke: 0; }

.lab__outro { display: flex; flex-direction: column; gap: 34px; align-items: flex-start; }

.lab__progress { display: none; }

/* Mode horizontal (bureau) */
.lab.is-horizontal { height: 100vh; }
.lab.is-horizontal .lab__track {
  flex-direction: row; align-items: center; gap: clamp(40px, 5vw, 90px);
  height: 100%;
  width: max-content;
  padding: calc(var(--ruler) + 40px) var(--g) 70px;
  will-change: transform;
}
.lab.is-horizontal .lab__intro { flex: 0 0 min(38vw, 620px); }
.lab.is-horizontal .lab__hint { display: block; }
.lab.is-horizontal .piece { flex: 0 0 auto; width: min(58vw, calc((100vh - 290px) * 1.45)); }
.lab.is-horizontal .piece__stage { aspect-ratio: auto; height: calc(100vh - 300px); min-height: 320px; }
.lab.is-horizontal .lab__outro { flex: 0 0 min(42vw, 640px); padding-right: 6vw; }
.lab.is-horizontal .lab__progress {
  display: flex; align-items: center; gap: 20px;
  position: absolute; left: var(--g); right: var(--g); bottom: 30px;
  color: var(--fg-dim);
}
.lab__bar {
  position: relative; flex: 1; height: 12px;
  background:
    repeating-linear-gradient(90deg, var(--fg-faint) 0 1px, transparent 1px 10px) left bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--fg-dim) 0 1px, transparent 1px 100px) left bottom / 100% 12px no-repeat;
}
.lab__bar i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}

/* ---------- Projets concepts --------------------------------------------- */

.demos__lead { max-width: 54ch; color: var(--fg-dim); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; }
.demos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.demo { display: flex; flex-direction: column; gap: 24px; }
.demo__img { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 16 / 10; background: var(--ink-3); }
.demo__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.demo:hover .demo__img img, .demo:focus-visible .demo__img img { transform: scale(1.05); }
.demo__img::after {
  content: "Projet concept";
  position: absolute; top: 14px; left: 14px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(11, 11, 10, .78); color: var(--bone);
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.demo--client .demo__img::after { content: none; }
.demo__badge { padding: 6px 11px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.demo__info { display: grid; gap: 12px; justify-items: start; }
.demo__sector { color: var(--accent); }
.demo__title {
  font-size: clamp(34px, 3.2vw, 54px); line-height: .95; letter-spacing: -.03em;
  font-variation-settings: "wdth" 105, "wght" 760;
  transition: font-variation-settings .8s var(--ease-out);
}
.demo:hover .demo__title { font-variation-settings: "wdth" 125, "wght" 880; }
.demo__desc { color: var(--fg-dim); max-width: 50ch; }
.demo__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.demo__tags li { padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--fg-dim); }
.demo__cta { margin-top: 4px; transition: color .3s; }
.demo:hover .demo__cta { color: var(--accent); }

/* ---------- Offre --------------------------------------------------------- */

.section__head { display: flex; flex-direction: column; gap: 36px; margin-bottom: clamp(60px, 8vw, 110px); }

.doors {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--rule); box-shadow: 0 0 0 1px var(--rule);
  border-radius: 10px; overflow: hidden;
}
.door { background: var(--bg); transition: background-color .8s var(--ease-io); }
.door__link {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 16px; height: 100%;
  padding: clamp(26px, 2.6vw, 42px);
  transition: color .45s var(--ease-out);
}
.door__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .6s var(--ease-out);
}
.door__link:hover::before, .door__link:focus-visible::before, .door__link.is-on::before { transform: scaleY(1); }
.door__link:hover, .door__link:focus-visible, .door__link.is-on { color: var(--ink); }
.door__num { color: var(--accent); transition: color .45s; }
.door__title {
  font-size: clamp(32px, 3vw, 54px); line-height: .95; letter-spacing: -.03em;
  font-variation-settings: "wdth" 96, "wght" 760;
  transition: font-variation-settings .8s var(--ease-out);
}
.door__goal { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.9vw, 31px); line-height: 1.1; color: var(--accent); transition: color .45s; }
.door__desc { color: var(--fg-dim); max-width: 42ch; transition: color .45s; }
.door__inc { display: flex; flex-wrap: wrap; gap: 6px; }
.door__inc li { padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--fg-dim); transition: color .45s, box-shadow .45s; }
.door__gift {
  align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent);
  transition: color .45s, box-shadow .45s;
}
.door__gift::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.door__gift + .door__price { margin-top: 0; }
.door__link:is(:hover, :focus-visible, .is-on) .door__gift { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11,11,10,.4); }
.door__price { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.door__price .mono { color: var(--fg-faint); transition: color .45s; }
.door__price b, .offer__more b {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  line-height: 1; letter-spacing: -.01em; white-space: nowrap;
  color: var(--accent);
  display: inline-block;
  transition: color .45s, opacity .22s, transform .45s var(--ease-out);
}
.door__price b { font-size: clamp(34px, 3vw, 50px); }
.door__price b.is-swap, .offer__more b.is-swap { opacity: 0; transform: translateY(8px); }
.door__ex { color: var(--fg-faint); transition: color .45s; }
.door__go { display: flex; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid var(--rule); transition: border-color .45s; }
.door__go span { color: var(--accent); transition: transform .6s var(--ease-out), color .45s; }
.door__link:is(:hover, :focus-visible, .is-on) .door__title { font-variation-settings: "wdth" 125, "wght" 880; }
.door__link:is(:hover, :focus-visible, .is-on) :is(.door__num, .door__goal, .door__go span) { color: var(--ink); }
.door__link:is(:hover, :focus-visible, .is-on) :is(.door__desc, .door__price .mono, .door__ex) { color: rgba(11,11,10,.72); }
.door__link:is(:hover, :focus-visible, .is-on) .door__inc li { color: rgba(11,11,10,.75); box-shadow: inset 0 0 0 1px rgba(11,11,10,.28); }
.door__link:is(:hover, :focus-visible, .is-on) .door__price b { color: var(--ink); }
.door__link:is(:hover, :focus-visible, .is-on) .door__go { border-color: rgba(11,11,10,.25); }
.door__link:is(:hover, :focus-visible) .door__go span { transform: translateX(6px); }
.door--hot { background: var(--ink-2); }
/* L'application mobile : une porte en largeur, mise en avant sous les trois autres. */
.door--app { grid-column: 1 / -1; }
.door--app .door__link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 16px clamp(32px, 6vw, 110px); }
.door__side { display: flex; flex-direction: column; gap: 16px; }
.door--app .door__desc { max-width: 52ch; }
.door--app .door__price { margin-top: 0; padding-top: 0; }
.door__new {
  display: inline-block; margin-left: 10px; padding: 4px 9px; border-radius: 999px;
  background: var(--accent); color: var(--ink); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px;
  transition: background-color .45s, color .45s;
}
.door__link:is(:hover, :focus-visible, .is-on) .door__new { background: var(--ink); color: var(--accent); }

.offer__more { margin-top: clamp(24px, 3vw, 36px); color: var(--fg-dim); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.7; }
.offer__more a { color: var(--fg); background: linear-gradient(var(--fg-faint), var(--fg-faint)) left bottom / 100% 1px no-repeat; padding-bottom: 2px; transition: color .3s; }
.offer__more a:hover { color: var(--accent); }
.offer__more b { font-size: 1.2em; }

.offer__intro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px 60px;
  padding-top: 10px;
}
.offer__lead { max-width: 44ch; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.35; color: var(--fg-dim); }
.offer__switch { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.offer__note { color: var(--fg-faint); text-align: right; line-height: 1.7; }
.offer__deal { color: var(--accent); }

/* Sélecteur France (€) / Algérie (DA) */
.region {
  position: relative; isolation: isolate;
  display: inline-flex; padding: 4px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.region__opt {
  position: relative; z-index: 1;
  height: 40px; padding: 0 18px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .45s var(--ease-out);
  white-space: nowrap;
}
.region__opt:hover { color: var(--fg); }
.region__opt[aria-pressed="true"] { color: var(--bg); }
.region__pill {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: 999px;
  background: var(--fg);
  transition: transform .6s var(--ease-out), width .6s var(--ease-out), background-color .8s var(--ease-io);
}
.region--sm .region__opt { height: 32px; padding: 0 12px; }

/* ---------- Pourquoi ------------------------------------------------------ */

.why { border-top: 1px solid var(--rule); }
.why__statement {
  margin: clamp(30px, 4vw, 50px) 0 clamp(50px, 7vw, 100px);
  max-width: 24ch;
  font-size: clamp(32px, 4.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-variation-settings: "wdth" 92, "wght" 560;
  text-wrap: balance;
}
.why__statement em { color: var(--accent); font-size: 1.06em; }

/* ---------- Comment ça se passe : trois temps --------------------------- */

.method__title {
  margin: clamp(26px, 3vw, 40px) 0 clamp(40px, 5vw, 70px);
  max-width: 18ch;
  font-size: clamp(36px, 4.6vw, 82px); line-height: .95; letter-spacing: -.035em;
  font-weight: 400; font-variation-settings: "wdth" 92, "wght" 760;
  text-wrap: balance;
}
.method__title em { color: var(--accent); }
.band { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.band li { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 48px 0 0; }
.band li:not(:last-child)::after { content: "→"; position: absolute; right: 16px; top: 22px; font-family: var(--mono); font-size: 18px; color: var(--accent); }
.band__num { color: var(--accent); }
.band h3 { font-size: clamp(24px, 2.2vw, 36px); line-height: 1.02; letter-spacing: -.025em; font-weight: 400; font-variation-settings: "wdth" 100, "wght" 760; text-wrap: balance; }
.band__hot h3 { color: var(--accent); }
.band p { color: var(--fg-dim); max-width: 34ch; font-size: 16px; line-height: 1.45; }
.band__why { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(40px, 5vw, 64px); color: var(--fg-dim); }
.band__why span { padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); }

/* ---------- Méthode : une frise ------------------------------------------- */

.method { padding-bottom: clamp(90px, 11vw, 160px); }
.frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.5fr 1.2fr; }
.frise__step { position: relative; display: flex; flex-direction: column; gap: 12px; padding-right: clamp(16px, 2.2vw, 34px); }
.frise__when { order: -2; color: var(--fg-dim); min-height: 1.5em; }
.frise__step::before {
  content: ""; order: -1; display: block; height: 10px; margin: 2px 0 14px;
  background:
    radial-gradient(circle 4.5px at 5px 50%, var(--fg) 96%, transparent 100%),
    linear-gradient(var(--fg-dim), var(--fg-dim)) left center / 100% 2px no-repeat;
}
.frise__step--long::before {
  background:
    radial-gradient(circle 5px at 5px 50%, var(--accent) 96%, transparent 100%),
    linear-gradient(var(--accent), var(--accent)) left center / 100% 4px no-repeat;
}
.frise__step--open::before {
  background:
    radial-gradient(circle 4.5px at 5px 50%, var(--accent) 96%, transparent 100%),
    repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 18px) left center / 100% 2px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent);
}
.frise__step--open .frise__when { color: var(--accent); }
.frise__num { color: var(--accent); }
.frise__step h3 { font-size: clamp(30px, 2.8vw, 48px); line-height: .95; letter-spacing: -.035em; font-weight: 400; font-variation-settings: "wdth" 115, "wght" 820; }
.frise__step p { color: var(--fg-dim); font-size: 15.5px; line-height: 1.5; max-width: 34ch; }
.frise__get { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); }
.frise__step p.frise__get { color: var(--fg); }
.frise__get .mono { display: block; margin-bottom: 6px; color: var(--accent); }

/* ---------- Contact ------------------------------------------------------- */

.contact { padding-top: clamp(90px, 12vw, 170px); padding-bottom: clamp(90px, 10vw, 140px); }
.contact__title {
  --w: 125; --g: 900;
  margin: 40px 0 clamp(50px, 7vw, 100px);
  font-size: 15vw;
  line-height: .82;
  letter-spacing: -.04em;
  white-space: nowrap;
  font-variation-settings: "wdth" var(--w), "wght" var(--g);
}
.contact__title em { color: var(--accent); letter-spacing: -.03em; }

.contact__promise { display: flex; align-items: center; gap: 12px; margin: calc(clamp(50px, 7vw, 100px) * -.55) 0 clamp(44px, 6vw, 84px); color: var(--fg-dim); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }

.brief { display: flex; flex-direction: column; gap: 36px; }
.brief__group legend { margin-bottom: 16px; color: var(--fg-dim); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 20px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 16px;
  font-variation-settings: "wdth" 100, "wght" 450;
  transition: background-color .35s, color .35s, box-shadow .35s, font-variation-settings .5s var(--ease-out);
  user-select: none;
}
.chip span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px currentColor;
  transition: background-color .3s, box-shadow .3s;
}
.chip:hover span { box-shadow: inset 0 0 0 1px var(--fg-dim); }
.chip input:checked + span { background: var(--fg); color: var(--bg); box-shadow: none; font-variation-settings: "wdth" 115, "wght" 650; }
.chip input:checked + span::before { background: var(--accent); box-shadow: none; }
.chip input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 3px; }

.brief__fields { display: grid; grid-template-columns: 1fr 1.6fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field .mono { color: var(--fg-dim); }
.field input, .field textarea {
  width: 100%;
  background: transparent; color: var(--fg);
  border: 0; border-bottom: 1px solid var(--rule);
  padding: 8px 0 12px;
  font: inherit; font-size: 20px;
  font-variation-settings: "wdth" 100, "wght" 420;
  resize: none;
  border-radius: 0;
  transition: border-color .3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.brief__send { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.brief__note { color: var(--fg-faint); max-width: 28ch; }
.btn--big { height: 66px; padding: 0 30px 0 34px; font-size: 13px; }

.contact__side { display: flex; flex-direction: column; gap: 16px; }
.contact__side > .mono { color: var(--fg-dim); }
.contact__email {
  text-align: left;
  font-size: clamp(26px, 2.7vw, 44px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variation-settings: "wdth" 85, "wght" 560;
  word-break: break-all;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .6s var(--ease-out), color .3s;
  padding-bottom: 6px;
  width: fit-content;
}
.contact__email:hover { background-size: 100% 1px; color: var(--accent); }
.contact__copied { color: var(--accent); min-height: 1.45em; }

.contact__call {
  display: inline-flex; gap: 8px; width: fit-content;
  margin: -8px 0 24px; padding-bottom: 3px;
  color: var(--fg);
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: color .3s;
}
.contact__call:hover, .contact__call:focus-visible { color: var(--accent); }
.contact__call span { color: var(--accent); }
/* La carte « signature » ne parle qu'aux visiteurs venus d'un site signé. */
html:not(.from-signature) .signature { display: none; }
.signature {
  margin-top: 40px;
  padding: 26px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--rule);
  display: flex; flex-direction: column; gap: 16px;
}
.signature p { color: var(--fg-dim); font-size: 15px; line-height: 1.45; }
.signature__badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
}
.signature__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.signature__badge b { font-weight: 500; transition: letter-spacing .7s var(--ease-out); }
.signature:hover .signature__badge b { letter-spacing: .32em; }

/* ---------- Pied de page -------------------------------------------------- */

.footer { position: relative; padding: clamp(80px, 9vw, 130px) var(--g) var(--g); overflow: hidden; border-top: 1px solid var(--rule); }
.footer__top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer__col .mono:first-child { color: var(--fg-dim); margin-bottom: 6px; }
.footer__col a { position: relative; }
.footer__col a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out);
}
.footer__col a:hover::after { transform: scaleX(1); transform-origin: left; }
.clock { font-family: var(--mono); font-size: 15px; letter-spacing: .04em; font-feature-settings: "tnum"; }

.footer__word {
  margin: clamp(60px, 9vw, 120px) 0 clamp(20px, 3vw, 40px);
  font-size: 18vw;
  line-height: .78;
  white-space: nowrap;
  text-align: center;
  letter-spacing: -.01em;
}
.footer__word span { display: inline-block; font-variation-settings: "wdth" 95, "wght" 700; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--fg-dim); padding-top: 20px; border-top: 1px solid var(--rule); }
.footer__bottom a:hover { color: var(--accent); }
.footer__word { user-select: none; -webkit-user-select: none; }
.footer__word.is-playing span { touch-action: none; will-change: transform; }
.footer__play { color: var(--fg-dim); font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; }
.footer__play::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px;
  border-radius: 50%; background: var(--accent); vertical-align: 1px;
  animation: pulse-dot 2s ease-in-out infinite;
}
.footer__play:hover { color: var(--accent); }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }

/* ---------- Toast --------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 140;
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 14px 18px 14px 16px;
  border-radius: 999px;
  background: var(--bone); color: var(--ink);
  font-size: 15px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  transform: translate(-50%, calc(100% + 60px));
  visibility: hidden;
  transition: transform .9s var(--ease-out), visibility 0s .9s;
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .9s var(--ease-out), visibility 0s; }
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.toast em { font-size: 1.1em; }

/* ---------- Pages secondaires --------------------------------------------- */

.nav.nav--simple { grid-template-columns: 1fr auto; }

.page { padding: calc(var(--nav-h) + 80px) var(--g) 120px; max-width: 980px; }
.page h1 { font-size: clamp(48px, 8vw, 120px); line-height: .9; letter-spacing: -.04em; font-variation-settings: "wdth" 90, "wght" 760; margin: 30px 0 60px; }
.page h2 { font-size: 13px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 50px 0 14px; font-weight: 400; }
.page p, .page li { color: var(--fg-dim); max-width: 64ch; }
.page p + p { margin-top: 10px; }
.page mark { background: rgba(255,74,28,.18); color: var(--fg); padding: 0 4px; }
.page__back { display: inline-flex; gap: 10px; color: var(--fg-dim); }
.page__back:hover { color: var(--accent); }

.nav--simple .nav__right { gap: 18px; }
.subfoot {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  padding: 40px var(--g) calc(40px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule);
  color: var(--fg-dim);
}
.subfoot a:hover { color: var(--accent); }

/* Le labo, sur sa page : une grille au défilement normal */
.lab--page .lab__track {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 6vw, 96px) clamp(24px, 3vw, 44px);
  padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 90px));
}
.lab--page .lab__intro, .lab--page .lab__outro { grid-column: 1 / -1; max-width: 760px; }
.lab--page .piece__stage { aspect-ratio: 4 / 3; }

/* Page Logiciels */
.lp-hero {
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 3vh, 32px);
  padding: calc(var(--nav-h) + clamp(50px, 9vw, 130px)) var(--g) clamp(60px, 8vw, 110px);
}
.lp-hero__title {
  max-width: 16ch;
  font-size: clamp(44px, 7vw, 124px); line-height: .92; letter-spacing: -.04em;
  font-weight: 400; font-variation-settings: "wdth" 92, "wght" 760;
  text-wrap: balance;
}
.lp-hero__title em { color: var(--accent); }
.lp-hero__lead { max-width: 52ch; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.38; color: var(--fg-dim); }
.lp-hero .hero__note, .lp-end .hero__note { color: var(--fg-dim); }
.hero__note b { font-weight: 400; color: var(--accent); }
.lp-section { border-top: 1px solid var(--rule); }
.lp .metier { opacity: 1; padding: 0; border: 0; }
.lp-metiers { display: flex; flex-direction: column; gap: clamp(60px, 8vw, 120px); }
.lp-metier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.lp-metier:nth-child(even) > .metier { order: 2; }
.lp-metier__shot {
  width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(235,232,223,.16), 0 40px 80px -30px rgba(0,0,0,.9);
}
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--rule); box-shadow: 0 0 0 1px var(--rule); border-radius: 10px; overflow: hidden; }
.mods li { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--bg); }
.mods b { font-weight: 400; font-size: 19px; line-height: 1.15; font-variation-settings: "wdth" 100, "wght" 700; }
.mods span { color: var(--fg-dim); font-size: 15px; line-height: 1.5; }
.lp-diag {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  margin-top: clamp(30px, 4vw, 50px); padding: clamp(24px, 3vw, 40px);
  border-radius: 10px; background: var(--bone); color: var(--ink);
}
.lp-diag p { max-width: 46ch; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.01em; font-variation-settings: "wdth" 100, "wght" 520; }
.lp-diag .btn::before { background: var(--ink); }
.lp-diag .btn:hover, .lp-diag .btn:focus-visible { color: var(--bone); }
.faq { border-top: 1px solid var(--rule); max-width: 980px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(20px, 1.8vw, 28px); line-height: 1.2; letter-spacing: -.015em;
  font-variation-settings: "wdth" 100, "wght" 620;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--mono); color: var(--accent); transition: transform .4s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq details p { max-width: 68ch; padding: 0 0 26px; color: var(--fg-dim); }
.faq details p b { font-weight: 400; color: var(--fg); }
.lp-end { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; border-top: 1px solid var(--rule); }
.lp-end .why__statement { margin: 0; }
/* Les autres métiers : une grille de cartes compactes sous les deux grands exemples */
.lp-more { margin-top: clamp(90px, 10vw, 150px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--rule); }
.lp-more__title { margin-bottom: clamp(36px, 4vw, 56px); font-size: clamp(30px, 3.2vw, 52px); line-height: .95; letter-spacing: -.035em; font-weight: 400; font-variation-settings: "wdth" 100, "wght" 760; }
.lp-more__title em { color: var(--accent); }
.lp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 6vw, 90px) clamp(24px, 3vw, 44px); }
.lp-card { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.lp-card__shot {
  display: block; overflow: hidden; aspect-ratio: 960 / 667;
  border-radius: 10px; background: var(--ink-3);
  box-shadow: 0 0 0 1px rgba(235,232,223,.16), 0 34px 70px -32px rgba(0,0,0,.9);
}
.lp-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transition: transform 1.2s var(--ease-out); }
.lp-card:hover .lp-card__shot img { transform: scale(1.03); }
.lp-card .metier { gap: 12px; }
.lp-card .metier__pain { font-size: clamp(22px, 1.75vw, 30px); }
@media (min-width: 1360px) { .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .lp-grid { grid-template-columns: 1fr; gap: 64px; }
  .lp-card { gap: 18px; }
  .lp-card .metier__fix { display: none; }
  .lp-card .metier__mods li:nth-child(n + 5) { display: none; }
}
@media (max-width: 860px) {
  .lab--page .lab__track { grid-template-columns: 1fr; }
  .lp-metier { grid-template-columns: 1fr; }
  .lp-metier:nth-child(even) > .metier { order: 0; }
  .nav--simple .page__back { display: none; }
  .nav--simple .nav__cta { display: inline-flex; }
}
@media (max-width: 520px) {
  .nav--simple .nav__cta { display: none; }
  .nav--simple .page__back { display: inline-flex; }
}

/* ---------- Responsive ---------------------------------------------------- */

/* La barre complète (six liens + appel à l’action) demande environ 870 px à droite :
   le statut s’efface d’abord, puis les liens passent dans le bouton Menu. */
@media (max-width: 1439px) {
  .nav__status { display: none; }
  .nav { grid-template-columns: 1fr auto; }
}
@media (max-width: 1160px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; }
  .nav__right { gap: 14px; }
}

@media (max-width: 1100px) {
  .hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frise { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 50px; }
}

@media (max-width: 1000px) {
  .doors { grid-template-columns: 1fr; }
  .door--app .door__link { display: flex; align-items: stretch; }
  .door__side { display: contents; }
  .door__desc { max-width: 56ch; }
}
@media (max-width: 860px) {
  .door__desc, .door__inc, .door__ex { display: none; }
  .door__link { gap: 12px; }
  .band { grid-template-columns: 1fr; gap: 26px; }
  .band li { padding: 22px 0 0; }
  .band li:not(:last-child)::after { content: "↓"; right: 0; }
}

@media (max-width: 860px) {
  :root { --nav-h: 64px; }
  .demos__grid { grid-template-columns: 1fr; }
  .nav__links, .nav__cta { display: none; }
  .nav__right { gap: 8px; }
  .nav__logo sup { display: none; }
  .offer__intro { grid-template-columns: 1fr; }
  .offer__switch { align-items: flex-start; }
  .offer__note { text-align: left; }
  .nav__burger { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; }
  .hero { min-height: 0; justify-content: flex-start; }
  .hero__grid { grid-template-columns: 1fr; flex: 0 0 auto; }
  .hero__duo { display: none; }
  .hero__title { font-size: clamp(38px, 11.2vw, 66px); }
  .contact__grid { grid-template-columns: 1fr; }
  .brief__fields { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .piece__info { grid-template-columns: 1fr; }
  .piece__num { grid-row: auto; padding-top: 0; }
  .piece__tags { grid-column: 1; }
  .btn { height: 52px; }
  .frise { grid-template-columns: 1fr; gap: 34px; padding-left: 26px; position: relative; }
  .frise::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 0; width: 2px; background: linear-gradient(var(--fg-dim) 0 40%, var(--accent) 40% 76%, transparent); }
  .frise__step { padding: 0; gap: 8px; }
  .frise__step::before { display: none; }
  .frise__step::after { content: ""; position: absolute; left: -30px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--fg); }
  .frise__step--long::after, .frise__step--open::after { background: var(--accent); }
  .frise__when { min-height: 0; }
  .frise__get { margin-top: 4px; }
}

@media (max-width: 520px) {
  .loader__mid { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 auto; justify-content: space-between; }
  .hero__proof { gap: 10px 16px; }
  .chip span { height: 42px; padding: 0 16px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html.is-chaos .chaos, html.is-chaos .hero__title, .footer__play::before, .reel__num.is-pop { animation: none; }
  .grain::before { animation: none; }
  .pulse::after { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .menu, .menu *, .menu *::after { transition-delay: 0s !important; }
}

.cursor.has-label .cursor__coords { opacity: 0; }

/* Carte projet à deux entrées : le site client et son back-office */
a.demo__img { display: block; }
.demo__flag { position: absolute; top: 14px; right: 14px; z-index: 1; padding: 6px 11px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.demo__title a { color: inherit; text-decoration: none; }
.demo__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 4px; }
.demo--duo .demo__cta { margin-top: 0; color: inherit; text-decoration: none; }
.demo--duo:hover .demo__cta { color: inherit; }
.demo--duo .demo__cta:hover, .demo--duo .demo__cta:focus-visible { color: var(--accent); }
.demo--duo .demo__cta--hot { padding: 7px 13px; border-radius: 999px; background: var(--accent); transition: background-color .3s, color .3s; }
.demo--duo .demo__cta--hot, .demo--duo:hover .demo__cta--hot { color: var(--ink); }
.demo--duo .demo__cta--hot:hover, .demo--duo .demo__cta--hot:focus-visible { background: var(--bone); color: var(--ink); }

/* Carte pleine largeur (démo phare « site + logiciel ») */
.demo--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3.4vw, 56px); }
.demo--wide .demo__img { aspect-ratio: 16 / 9; }
@media (max-width: 900px) { .demo--wide { grid-template-columns: 1fr; } }

/* ---------- WhatsApp ------------------------------------------------------ */

.btn__wa { width: 18px; height: 18px; flex: none; margin-right: -4px; }

.contact__tag { display: inline-flex; align-items: center; gap: 9px; color: var(--fg-dim); }
.contact__tag svg { width: 14px; height: 14px; color: var(--fg); }
.contact__tag .pulse { width: 5px; height: 5px; margin-left: 2px; }
.contact__wa { display: flex; flex-direction: column; gap: 12px; width: fit-content; margin-bottom: 18px; }
.contact__num {
  font-size: clamp(26px, 2.7vw, 44px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variation-settings: "wdth" 85, "wght" 560;
  white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .6s var(--ease-out), color .3s, font-variation-settings .7s var(--ease-out);
  padding-bottom: 6px;
}
.contact__wa:hover .contact__num, .contact__wa:focus-visible .contact__num { background-size: 100% 1px; color: var(--accent); font-variation-settings: "wdth" 100, "wght" 620; }
.contact__side > .contact__tag { margin-bottom: -4px; }

.menu__foot a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.menu__all { color: var(--bone); }
@media (max-width: 600px) {
  .menu__foot { display: grid; grid-template-columns: auto auto; }
  .menu__foot a:nth-child(even) { justify-self: end; }
}
.menu__wa { color: var(--bone); }
.menu__wa svg { width: 14px; height: 14px; color: var(--accent); }

/* Bouton flottant : apparaît après le hero, s'efface au contact et au pied de page */
.wa-fab {
  position: fixed; z-index: 90;
  right: var(--g); bottom: calc(clamp(16px, 2.4vw, 32px) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center;
  height: 56px; min-width: 56px;
  border-radius: 999px;
  background: var(--accent); color: var(--ink);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .32);
  transition: transform .8s var(--ease-out), opacity .5s, visibility 0s, background-color .35s, color .35s;
}
.wa-fab__icon { width: 24px; height: 24px; flex: none; margin: 0 16px; }
.wa-fab__txt {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .7s var(--ease-out), opacity .4s, margin .7s var(--ease-out);
}
.wa-fab:hover, .wa-fab:focus-visible { background: var(--fg); color: var(--bg); }
.wa-fab:hover .wa-fab__txt, .wa-fab:focus-visible .wa-fab__txt, .wa-fab.is-open .wa-fab__txt { max-width: 240px; opacity: 1; margin-right: 22px; }
.wa-fab:hover .wa-fab__icon, .wa-fab:focus-visible .wa-fab__icon, .wa-fab.is-open .wa-fab__icon { margin-right: 10px; }
html.js .wa-fab:not(.is-shown),
.menu.is-open ~ .wa-fab,
.toast.is-on ~ .wa-fab {
  transform: translateY(calc(100% + 60px)) scale(.7);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .6s var(--ease-io), opacity .4s, visibility 0s .6s;
}
@media (max-width: 860px) {
  .wa-fab { height: 52px; min-width: 52px; }
  .wa-fab__icon { width: 22px; height: 22px; margin: 0 15px; }
}

/* ---------- Entrée du questionnaire projet (/projet/) ---------------------- */

.brief__q {
  position: relative;
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(30px, 3.4vw, 46px) clamp(22px, 3vw, 40px) clamp(24px, 3vw, 40px);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--rule);
}
/* Une règle graduée vide : celle du questionnaire, prête à se remplir */
.brief__q::before, .brief__q::after { content: ""; position: absolute; top: 0; left: clamp(22px, 3vw, 40px); height: 12px; }
.brief__q::before {
  right: clamp(22px, 3vw, 40px);
  background:
    repeating-linear-gradient(90deg, var(--fg-faint) 0 1px, transparent 1px calc(100% / 40)) left top / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--fg-dim) 0 1px, transparent 1px calc(100% / 8)) left top / 100% 12px no-repeat;
}
.brief__q::after { width: 0; height: 3px; background: var(--accent); transition: width 1.1s var(--ease-out); }
.brief__q:hover::after { width: calc((100% - 2 * clamp(22px, 3vw, 40px)) / 8); }
.brief__q-kicker { display: flex; align-items: center; gap: 12px; color: var(--fg-dim); }
.brief__q-kicker span { color: var(--accent); font-size: 13px; }
.brief__q-title {
  font-size: clamp(46px, 5.4vw, 90px);
  line-height: .9;
  letter-spacing: -.04em;
  font-variation-settings: "wdth" 100, "wght" 760;
}
.brief__q-title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; font-variation-settings: normal; }
.brief__q-title i { font-style: normal; color: var(--accent); }
.brief__q-lead { color: var(--fg-dim); max-width: 46ch; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.45; }
.brief__q .brief__send { margin-top: 8px; }

/* ---------- Logiciels de gestion : un métier à la fois -------------------- */

.soft { border-top: 1px solid var(--rule); }
.soft__lead { max-width: 58ch; color: var(--fg-dim); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; }
.soft__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.soft__list { display: flex; flex-direction: column; }
.metier {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(30px, 5vh, 54px) 0;
  border-top: 1px solid var(--rule);
  opacity: .4;
  transition: opacity .6s var(--ease-out);
}
.metier.is-active, .metier:focus-within, .metier:hover { opacity: 1; }
.metier__sector { display: flex; gap: 14px; color: var(--accent); }
.metier__sector span { color: var(--fg-faint); }
.metier__pain {
  font-size: clamp(24px, 2.2vw, 36px); line-height: 1.1; letter-spacing: -.02em;
  font-weight: 400; font-variation-settings: "wdth" 96, "wght" 640;
  text-wrap: balance;
}
.metier__fix { color: var(--fg-dim); max-width: 52ch; }
.metier__mods { display: flex; flex-wrap: wrap; gap: 6px; }
.metier__mods li { padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--fg-dim); }
.metier__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 4px; }
.metier__try { padding: 9px 15px; border-radius: 999px; background: var(--accent); color: var(--ink); transition: background-color .3s; }
.metier__try:hover, .metier__try:focus-visible { background: var(--bone); }
.metier__more { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: color .3s; }
.metier__more:hover, .metier__more:focus-visible { color: var(--accent); }
.metier__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.metier__shot { display: none; }

.soft__lead b { font-weight: 400; color: var(--fg); }
.soft__grid { align-items: center; }
.soft__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.soft__list .metier {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sector try" "pain try";
  align-items: center; gap: 8px 26px;
  padding: 20px 0; opacity: .42; cursor: default;
  transition: opacity .6s var(--ease-out);
}
.soft__list .metier__sector { grid-area: sector; }
.soft__list .metier__pain { grid-area: pain; }
.soft__list .metier__try { grid-area: try; }
.soft__list .metier.is-active { opacity: 1; }
.soft__list .metier__pain { font-size: clamp(18px, 1.45vw, 23px); line-height: 1.2; letter-spacing: -.015em; font-weight: 400; font-variation-settings: "wdth" 96, "wght" 560; text-wrap: balance; }
.soft__list .metier__try { white-space: nowrap; }
.soft__stage { position: relative; }
.soft__screen {
  position: relative; aspect-ratio: 960 / 667;
  padding: 6px; border-radius: 12px; background: #050505;
  box-shadow: 0 0 0 1px rgba(235,232,223,.16), 0 40px 80px -30px rgba(0,0,0,.9);
}
.soft__screen img, .soft__yours {
  position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  border-radius: 8px;
  opacity: 0; transform: scale(1.02);
  transition: opacity .6s var(--ease-io), transform 1s var(--ease-out);
}
.soft__screen img { object-fit: cover; object-position: 0 0; }
.soft__screen .is-active { opacity: 1; transform: none; }
.soft__yours {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px;
  padding: 8%;
  background:
    repeating-linear-gradient(90deg, rgba(235,232,223,.08) 0 1px, transparent 1px 10%) left bottom / 100% 14px no-repeat,
    var(--ink-2);
  color: var(--bone);
}
.soft__yours .mono { color: var(--accent); }
.soft__yours b { font-weight: 400; font-size: clamp(40px, 4.6vw, 84px); line-height: .9; letter-spacing: -.04em; font-variation-settings: "wdth" 125, "wght" 880; }
.soft__yours i { font-family: var(--serif); font-size: clamp(22px, 2vw, 32px); color: var(--accent); }

.sure { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(60px, 7vw, 100px); }
.sure li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 0 0; border-top: 1px solid var(--rule); }
.sure li::before { content: ""; position: absolute; top: -1px; left: 0; width: 1px; height: 14px; background: var(--fg-dim); }
.sure b { font-weight: 400; font-size: 19px; line-height: 1.15; font-variation-settings: "wdth" 100, "wght" 700; }
.sure span { color: var(--fg-dim); font-size: 15px; line-height: 1.5; max-width: 32ch; }
.soft__all { margin-top: clamp(32px, 4vw, 48px); }

@media (max-width: 1100px) { .sure { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } }
@media (max-width: 520px) { .sure { grid-template-columns: 1fr; row-gap: 26px; } .sure li { padding-right: 0; } }
@media (max-width: 860px) {
  .soft__grid { grid-template-columns: 1fr; }
  .soft__stage { display: none; }
  .metier { opacity: 1; }
  .soft__list .metier { grid-template-columns: 1fr; grid-template-areas: "sector" "pain" "try"; justify-items: start; gap: 10px; opacity: 1; padding: 20px 0; }
  .metier__shot {
    display: block; width: 100%; height: auto; margin-top: 8px;
    border-radius: 10px; box-shadow: 0 0 0 1px rgba(235,232,223,.16), 0 24px 50px -24px rgba(0,0,0,.9);
  }
  .metier__ctas .btn { flex: 1 1 auto; justify-content: space-between; }
}

/* Lien vers la page de toutes les démos */
.demos__all { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; color: var(--fg); background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: color .3s, gap .5s var(--ease-out); }
.demos__all span { color: var(--accent); }
.demos__all:hover { color: var(--accent); gap: 16px; }

/* ==========================================================================
   Au doigt : la vitrine sur téléphone
   ========================================================================== */

/* Doigt fantôme : montre le geste là où aucun curseur ne peut l'annoncer. */
.ghost {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235,232,223,.34), rgba(235,232,223,.12) 60%, rgba(235,232,223,0) 72%);
  box-shadow: inset 0 0 0 1.5px rgba(235,232,223,.85), 0 8px 24px rgba(0,0,0,.35);
  opacity: 0; scale: .6;
  pointer-events: none;
  transition: opacity .35s, scale .5s var(--ease-out);
}
.hero > .ghost, .piece__stage > .ghost { position: absolute; z-index: 4; }
.ghost.is-on { opacity: 1; scale: 1; }
.ghost::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--accent); opacity: 0; }
.ghost.is-press { animation: ghost-press .5s var(--ease-out); }
.ghost.is-press::after { animation: ghost-ring .8s var(--ease-out); }
@keyframes ghost-press { 40% { scale: .78; } }
@keyframes ghost-ring { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(2.6); } }

/* Le mot du hero se laisse étirer au doigt ; le défilement vertical reste libre. */
.hero { touch-action: pan-y pinch-zoom; }
.hero__stretch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Projets en « téléphone » : invisible sur grand écran. */
.reel { display: none; }
@keyframes reel-rec { 50% { opacity: .25; } }

@media (max-width: 860px) {
  .lab__track { gap: 64px; }
  .piece__stage { aspect-ratio: 1 / 1; }
  .piece__tags { display: none; }

  .demos .section__head { margin-bottom: 28px; }
  .demos__grid { display: none; }

  /* Un seul écran : les exemples passent tout seuls, on peut continuer à descendre à tout moment. */
  .reel { display: block; position: relative; margin: 0 calc(var(--g) * -1); }
  .reel__stage {
    position: relative;
    height: 100vh; height: 100svh;
    display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 16px;
    padding: 12px var(--g) max(16px, env(safe-area-inset-bottom));
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
  }

  /* Le compteur : un grand chiffre qui « zoome » à chaque exemple, et cinq segments qui se remplissent. */
  .reel__head { display: flex; align-items: center; gap: 14px; margin: 0; }
  .reel__count { display: flex; align-items: center; gap: 10px; flex: none; }
  .reel__num {
    display: inline-block; min-width: .62em;
    font-size: 54px; line-height: .8; letter-spacing: -.04em; font-weight: 400;
    font-variation-settings: "wdth" 100, "wght" 820; font-feature-settings: "tnum";
    color: var(--accent);
    transform-origin: 30% 100%;
  }
  .reel__num.is-pop { animation: reel-pop .9s var(--ease-out); }
  @keyframes reel-pop {
    0% { opacity: 0; transform: translateY(35%) scale(1.7); font-variation-settings: "wdth" 62, "wght" 300; }
    45% { opacity: 1; font-variation-settings: "wdth" 125, "wght" 900; }
    100% { transform: none; font-variation-settings: "wdth" 100, "wght" 820; }
  }
  .reel__of { display: flex; flex-direction: column; gap: 2px; color: var(--fg-dim); font-size: 10px; line-height: 1.2; }
  .reel__of span { color: var(--bone); font-size: 14px; letter-spacing: .04em; }
  .reel__steps { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; align-self: center; padding: 16px 0; margin: -16px 0; cursor: pointer; }
  .reel__steps i { --f: 0; position: relative; height: 4px; border-radius: 2px; background: rgba(235,232,223,.16); overflow: hidden; }
  .reel__steps i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--f)); transform-origin: left; }

  .reel__texts { display: grid; }
  .reel__item {
    grid-area: 1 / 1; display: grid; gap: 8px; align-content: start;
    opacity: 0; transform: translateY(18px);
    transition: opacity .4s, transform .7s var(--ease-out);
    pointer-events: none;
  }
  .reel__item.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .1s; }
  .reel__meta { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--accent); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
  .reel__tag { padding: 4px 9px; border-radius: 999px; background: rgba(235,232,223,.1); color: var(--bone); font-size: 9.5px; letter-spacing: .08em; }
  .reel__tag--client { background: var(--accent); color: var(--ink); }
  .reel__name {
    font-size: clamp(38px, 11.4vw, 56px); line-height: .92; letter-spacing: -.03em; white-space: nowrap;
    font-variation-settings: "wdth" 62, "wght" 300;
    transition: font-variation-settings 1.1s var(--ease-out);
  }
  .reel__item.is-active .reel__name { font-variation-settings: "wdth" 100, "wght" 780; }
  .reel__line { margin: 0; max-width: 30ch; font-size: 18px; line-height: 1.28; }

  .reel__devices { position: relative; min-height: 0; }
  .reel__phone, .reel__tab {
    position: absolute; display: block;
    padding: 5px; background: #050505;
    box-shadow: 0 0 0 1px rgba(235,232,223,.16), 0 30px 60px -24px rgba(0,0,0,.9);
    transition: left .9s var(--ease-out), translate .9s var(--ease-out), scale .9s var(--ease-out), opacity .5s;
  }
  .reel__phone {
    z-index: 2; top: 0; left: 50%;
    height: 100%; aspect-ratio: 400 / 854;
    border-radius: 28px;
    translate: -50% 0; transform-origin: 0 100%;
  }
  .reel__tab {
    z-index: 1; top: 3%; right: 0;
    width: 84%; aspect-ratio: 970 / 677;
    border-radius: 14px;
    opacity: 0; translate: 28% 0; scale: .9;
    pointer-events: none;
  }
  .reel.is-duo .reel__phone { left: 0; translate: 0 0; scale: .72; }
  .reel.is-duo .reel__tab { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }

  .reel__screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 23px; background: #121210; }
  .reel__tab .reel__screen { border-radius: 9px; }
  .reel__screen video, .reel__screen img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 0;
    opacity: 0; transition: opacity .5s;
  }
  .reel__screen .is-active { opacity: 1; }

  .reel__label {
    position: absolute; white-space: nowrap;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(11,11,10,.86); box-shadow: inset 0 0 0 1px rgba(235,232,223,.2);
    color: var(--bone); letter-spacing: .06em; text-transform: uppercase;
    opacity: 0; transition: opacity .4s;
  }
  .reel.is-duo .reel__label { opacity: 1; transition-delay: .45s; }
  /* Le téléphone est réduit à 72 % : son étiquette est agrandie d'autant. */
  .reel__phone .reel__label { left: calc(100% + 16px); bottom: 10px; font-size: 14px; padding: 7px 14px; }
  .reel__tab .reel__label { right: 6px; top: calc(100% + 10px); font-size: 10px; }

  .reel__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
  .reel__go {
    display: inline-flex; align-items: center; gap: 6px;
    height: 42px; padding: 0 17px; border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(235,232,223,.32);
    color: var(--bone); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
    transition: background-color .3s, color .3s;
  }
  .reel__go:active { background: var(--bone); color: var(--ink); }
  .reel__go--soft { display: none; background: var(--accent); color: var(--ink); box-shadow: none; }
  .reel.has-soft .reel__go--soft { display: inline-flex; }
}