.wip-page {
  --wip-orange:  #e8591a;
  --wip-panel:   #fbfaf7;
  --wip-line:    #d8d2c8;
  --wip-r-panel: 28px;
  --wip-r-card:  24px;
  --wip-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --wip-sec-y: clamp(140px, 17vw, 300px);
  --wip-sec-x: 1.5rem;
  --wip-gap-1: clamp(32px, 4vw, 72px);
  --wip-gap-2: clamp(48px, 6vw, 112px);
  --wip-gap-3: clamp(64px, 9vw, 160px);
  --wip-gap-p: 1.4rem;
  --wip-pin-1: min(var(--wip-gap-1), 5vh);
  --wip-pin-2: min(var(--wip-gap-2), 7vh);
}
@media (min-width: 768px)  { .wip-page { --wip-sec-x: 3rem; } }
@media (min-width: 1100px) { .wip-page { --wip-sec-x: 4rem; } }

.wip-pill,
.wip-page .hero-secteur-eyebrow {
  display: inline-flex; align-items: center;
  gap: 0.7rem;
  width: fit-content;
  justify-self: start; align-self: flex-start;
  padding: 0.42rem 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: 1;
}
.wip-pill:has(.wip-ring) { padding-left: 0.42rem; }
.wip-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  outline: 1px solid currentColor; outline-offset: -5px;
  font-family: var(--wip-mono);
  font-size: 0.62rem; letter-spacing: 0.02em;
}
.wip-pill.sct-eyebrow::before { content: none; }

.wip-page .real-intro-num,
.wip-page .blog-section .sct-eyebrow,
.wip-page .contact-eyebrow {
  display: inline-flex; align-items: center;
  gap: 0.7rem;
  width: fit-content;
  align-self: flex-start;
  padding: 0.42rem 1rem 0.42rem 0.42rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: 1;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
}
.wip-page .real-intro-num::before,
.wip-page .blog-section .sct-eyebrow::before,
.wip-page .contact-eyebrow::before {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  outline: 1px solid currentColor; outline-offset: -5px;
  background: none; opacity: 1;
  font-family: var(--wip-mono);
  font-size: 0.62rem; letter-spacing: 0.02em;
}
.wip-page .real-intro-num::before            { content: '08'; }
.wip-page .blog-section .sct-eyebrow::before { content: '09'; }
.wip-page .contact-eyebrow::before           { content: '10'; }

.wip-page .selector {
  height: 60px;
  border-color: rgba(248, 247, 243, 0.3);
}
.wip-page .selector-indicator {
  box-shadow: none;
  outline: 1px solid rgba(28, 25, 22, 0.35); outline-offset: -4px;
}
.wip-page .selector-segment {
  gap: 0.7rem;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.28em;
}
.wip-page .selector-segment::before {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  outline: 1px solid currentColor; outline-offset: -5px;
  font-family: var(--wip-mono);
  font-size: 0.62rem; letter-spacing: 0;
}
.wip-page .selector-segment:nth-of-type(1)::before { content: 'H'; }
.wip-page .selector-segment:nth-of-type(2)::before { content: 'F'; }
.wip-page .selector-segment:nth-of-type(3)::before { content: 'W'; }
@media (max-width: 480px) {
  .wip-page .selector-segment { letter-spacing: 0.16em; }
  .wip-page .selector-segment::before { display: none; }
}

.wip-page .form-submit,
.wip-page .bcard-fmt,
.wip-page .rp-link,
.wip-page .blog-all-link { border-radius: 999px; }
.wip-page .rp-link,
.wip-page .blog-all-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border: 1px solid currentColor;
}
.wip-page .form-submit { padding: 1rem 2.2rem; }
.wip-page .rp-counter {
  padding: 0.5rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.wip-page .rp-name { display: flex; flex-direction: column; align-items: flex-end; }
.wip-page .rp-name .lm { padding: 0.12em 0.1em 0.22em; margin: -0.12em -0.1em -0.22em; }

.wip-page .blog-grid { gap: 1rem; }
.wip-page .bcard {
  border-radius: var(--wip-r-card);
  border-color: var(--wip-line);
  background: var(--wip-panel);
}
.wip-page .contact-form {
  position: relative;
  padding: 2.4rem 2.2rem;
  background: var(--wip-panel);
  border: 1px solid var(--wip-line);
  border-radius: var(--wip-r-panel);
}
@media (min-width: 900px) {
  .wip-page .sct-mask-photo  { border-radius: var(--wip-r-panel) 0 0 var(--wip-r-panel); }
  .wip-page .sct-stack-photo { border-radius: 0 var(--wip-r-panel) var(--wip-r-panel) 0; }
}

.wip-page .sct-intro,
.wip-page .sct-section,
.wip-page .blog-section--simple,
.wip-page .contact {
  padding: var(--wip-sec-y) var(--wip-sec-x);
}
.wip-page .sct-mask-pin,
.wip-page .sct-morph-stage { padding-left: var(--wip-sec-x); padding-right: var(--wip-sec-x); }

.wip-page .sct-eyebrow,
.wip-page .contact-eyebrow { margin-bottom: var(--wip-gap-1); }
.wip-page .sct-mask-inner .sct-eyebrow,
.wip-page .sct-stack-card .sct-eyebrow { margin-bottom: var(--wip-pin-1); }
.wip-page .sct-morph-eyebrow { margin-bottom: 0; }
.wip-page .sct-morph-title { margin-top: var(--wip-pin-1); }
.wip-page .real-intro-num { margin-bottom: var(--wip-pin-1); }
.wip-page .blog-header--simple > div,
.wip-page .sct-stack-card-inner { gap: 0; }

.wip-page .sct-intro-body { margin-top: var(--wip-gap-2); gap: var(--wip-gap-p); }
.wip-page .sct-twocol--mt-md { margin-top: var(--wip-gap-2); }
.wip-page .contact-heading { margin-bottom: var(--wip-gap-2); }
.wip-page .blog-header--simple { margin-bottom: var(--wip-gap-2); }
.wip-page .sct-morph-sub:first-of-type,
.wip-page .sct-stack-card-text { margin-top: var(--wip-pin-2); }
.wip-page .sct-morph-sub + .sct-morph-sub { margin-top: var(--wip-gap-p); }
.wip-page .sct-stack-card-num { margin: 0 0 var(--wip-pin-1); }
.wip-page .contact-intro { margin-bottom: 0; }

.wip-sep { border-top: 1px solid rgba(28, 25, 22, 0.4); }
.wip-sep.is-dark { border-top-color: rgba(248, 247, 243, 0.45); }

.wip-grain-layer {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../img/grain-sombre.webp") repeat;
  background-size: 256px 256px;
}
.wip-grain-layer.is-light { background-image: url("../img/grain-clair.webp"); }
.wip-grain-host { isolation: isolate; }
.wip-grain-fixed { clip-path: inset(0); }
.wip-grain-fixed > .wip-grain-layer { position: fixed; }

.wip-intro { overflow-x: clip; }
.wip-intro .sct-intro-body { max-width: none; }
.wip-waves-fig {
  width: 100vw;
  margin: var(--wip-gap-3) 0 0 calc(50% - 50vw);
}
.wip-waves { display: block; width: 100%; height: auto; overflow: visible; }
.wip-waves path { fill: none; stroke: var(--ink); vector-effect: non-scaling-stroke; }
@media (min-width: 900px) {
  .wip-intro .sct-intro-body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .wip-intro .sct-intro-body p:nth-child(1) { grid-column: 6 / span 3; }
  .wip-intro .sct-intro-body p:nth-child(2) { grid-column: 9 / span 4; }
}

.wip-page .sct-intro.wip-intro--pont { padding-bottom: 0; position: relative; z-index: 1; background: var(--bone); }
.wip-pont {
  position: relative;
  height: 330vh;
  background: var(--bone);
  --fp-band: clamp(240px, 46vh, 520px);
  --fp-x0: var(--wip-sec-x); --fp-y0: calc((100vh - var(--fp-band)) / 2);
  margin-top: calc(var(--wip-gap-3) - var(--fp-y0));
  --fp-o: 0.5; --fp-z: 1.09; --fp-shade: 0; --fp-lis: 0.5;
  --fp-x: calc(var(--fp-x0) * (1 - var(--fp-o)));
  --fp-y: calc(var(--fp-y0) * (1 - var(--fp-o)));
  --fp-r: calc(24px * (1 - var(--fp-o)));
}
.wip-pont-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.wip-pont-win {
  position: absolute; inset: 0; margin: 0;
  clip-path: inset(var(--fp-y) var(--fp-x) round var(--fp-r));
}
.wip-pont-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  transform: scale(var(--fp-z)); transform-origin: 50% 45%;
  will-change: transform;
}
.wip-pont-shade {
  position: absolute; inset: 0;
  background: var(--soot);
  opacity: var(--fp-shade);
}
.wip-pont-lisere {
  position: absolute;
  top: calc(var(--fp-y) - 5px); bottom: calc(var(--fp-y) - 5px);
  left: calc(var(--fp-x) - 5px); right: calc(var(--fp-x) - 5px);
  border: 1px solid rgba(28, 25, 22, 0.3);
  border-radius: calc(var(--fp-r) + 5px);
  opacity: var(--fp-lis);
  pointer-events: none;
}
.wip-pont + .sct-mask { margin-top: -100vh; z-index: 1; }
@media (max-width: 899px) {
  .wip-pont { --fp-band: clamp(200px, 34vh, 320px); }
}

.wip-lombard-fig { margin: var(--wip-gap-3) 0 0; width: 100%; max-width: 560px; }
.wip-lombard { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.wip-lombard text { fill: currentColor; font-size: 11px; }
.wip-lombard .wl-t { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; }
.wip-lombard .wl-s { opacity: 0.6; }
.wip-lombard path { fill: none; stroke: currentColor; }
.wip-lombard .wl-bars  { stroke-width: 1.2; opacity: 0.28; }
.wip-lombard .wl-voice { stroke-width: 2; stroke-linejoin: round; }
.wip-lombard .wl-hot   { stroke: var(--wip-orange); stroke-width: 1; opacity: 0.8; }
.wip-lombard .wl-seuil { stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.7; }
.wip-lombard .wl-axe   { stroke-width: 1; opacity: 0.45; }
.wip-lombard .wl-dot   { fill: currentColor; transition: opacity 0.25s ease; }
.wip-lombard .wl-med   { transition: opacity 0.25s ease; }
.wip-lombard .wl-cursor path { stroke-width: 1; opacity: 0.5; }
.wip-lombard .wl-cursor text { opacity: 0.8; }
.wip-lombard .is-off { opacity: 0; }

.wip-spectre-fig { margin: var(--wip-gap-3) 0 0; width: 100%; max-width: 560px; }
.wip-spectre { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.wip-spectre text { fill: currentColor; font-size: 11px; }
.wip-spectre .ws-t { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; }
.wip-spectre .ws-s { opacity: 0.6; }
.wip-spectre .ws-or { fill: var(--wip-orange); }
.wip-spectre path { fill: none; stroke: currentColor; }
.wip-spectre .ws-grid  { stroke-width: 1; opacity: 0.16; }
.wip-spectre .ws-dots  { fill: currentColor; opacity: 0.55; }
.wip-spectre .ws-mus   { stroke-width: 1.2; }
.wip-spectre .ws-voice { stroke: var(--wip-orange); stroke-width: 2; stroke-linejoin: round; }
.wip-spectre .ws-hatch { stroke: var(--wip-orange); stroke-width: 1; opacity: 0.8; }
.wip-spectre .ws-zone  { stroke: var(--wip-orange); stroke-width: 1; }
.wip-spectre .ws-gap   { stroke-width: 1; opacity: 0.8; }
.wip-spectre .ws-gain  { font-weight: 600; }
@media (max-width: 699px) {
  .wip-spectre text { font-size: 16px; }
  .wip-spectre .ws-t { font-size: 17px; }
}

@media (min-width: 1024px) {
  .wip-morph .sct-morph-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 120px);
    align-items: center;
  }
  .wip-morph .sct-morph-inner > :not(.wip-lombard-fig, .wip-spectre-fig) { grid-column: 1; }
  .wip-lombard-fig,
  .wip-spectre-fig {
    grid-column: 2; grid-row: 1 / span 4;
    margin: 0; justify-self: end;
    max-width: min(560px, 78vh);
  }
}
@media (max-width: 1023px) {
  .wip-morph.sct-morph { height: auto; }
  .wip-morph .sct-morph-stage { position: relative; height: auto; min-height: 100vh; padding-top: var(--wip-sec-y); padding-bottom: var(--wip-sec-y); }
}
.wip-morph--flow.sct-morph { height: auto; }
.wip-morph--flow .sct-morph-stage {
  position: relative; height: auto; min-height: 0;
  padding-top: var(--wip-sec-y); padding-bottom: var(--wip-sec-y);
}

.wip-gestes-fig { margin: var(--wip-gap-3) 0 0; color: var(--ink); }
.wip-gestes { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.wip-gestes--tall { display: none; max-width: 520px; margin: 0 auto; }
@media (max-width: 699px) {
  .wip-gestes--wide { display: none; }
  .wip-gestes--tall { display: block; }
}
.wip-gestes .wg-gl * { fill: none; stroke: currentColor; }
.wip-gestes .wg-gl .wg-f  { fill: currentColor; stroke: none; }
.wip-gestes .wg-gl .wg-bg { fill: var(--sand-light); stroke: none; }
.wip-gestes .wg-gl .wg-or { stroke: var(--wip-orange); }
.wip-gestes .wg-gl .wg-go { fill: var(--wip-orange); stroke: none; transition: fill 0.35s ease; }
.wip-gestes.is-idle .wg-gl .wg-go { fill: var(--sand-light); }
.wip-gestes .wg-sm { opacity: 0.5; }
.wip-gestes text { fill: currentColor; }
.wip-gestes .wg-t   { font-weight: 600; letter-spacing: 0.14em; }
.wip-gestes .wg-s   { opacity: 0.6; }
.wip-gestes .wg-lab { letter-spacing: 0.08em; }
.wip-gestes .wg-sep { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.35; }
.wip-gestes .wg-sep.wg-late { stroke-opacity: 0.35; opacity: 1; }
.wip-gestes .wg-bar rect { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.6; }
.wip-gestes .wg-bar .wg-f { fill: currentColor; opacity: 1; }

.wip-usage-swarm { position: relative; background: var(--sand-light); }
.wip-usage-swarm > .sct-section--alt { background: transparent; }
.wip-groupes-track { position: relative; margin-top: -100vh; }
.wip-over-swarm { position: relative; z-index: 2; }
.wip-groupes-gap  { height: 200vh; }
.wip-groupes-tail { height: 100vh; }
.wip-groupes-text {
  position: relative; z-index: 1;
  padding: var(--wip-sec-y) var(--wip-sec-x);
  background: var(--sand-light);
}
@media (min-width: 900px) {
  .wip-groupes-text { width: 50%; margin-left: 50%; }
}
.wip-groupes-text .sct-title { max-width: 14ch; }
.wip-usage-swarm + section {
  margin-top: -100vh;
  position: relative; z-index: 2;
  background: var(--bone);
}
.wip-swarm {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}
.wip-swarm .sw-photo,
.wip-swarm .sw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wip-swarm .sw-photo { object-fit: cover; object-position: 50% 50%; }
.wip-swarm .sw-canvas { display: none; }
.wip-swarm.is-armed .sw-canvas { display: block; }
.wip-swarm.is-armed .sw-photo { clip-path: inset(0 100% 0 0); }
.wip-swarm .sw-bar {
  position: absolute; top: 0; bottom: 0; left: -1px; z-index: 2;
  width: 2px; background: var(--soot);
  opacity: 0; visibility: hidden; pointer-events: none;
}

.wip-g6-fig {
  position: relative; overflow: hidden;
  margin: var(--wip-gap-3) 0 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--wip-r-card);
  background: var(--ink);
}
.wip-g6-fig img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 45% 60%;
  transform: scale(1.12);
}
@media (min-width: 1024px) {
  .wip-g6 .sct-section-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 120px);
  }
  .wip-g6 .sct-section-inner > :not(.wip-g6-fig) { grid-column: 1; }
  .wip-g6-fig {
    grid-column: 2; grid-row: 1 / span 3;
    margin: 0; aspect-ratio: auto; min-height: 480px;
    border-radius: var(--wip-r-panel);
  }
}

@media (max-width: 1023px) {
  .wip-page .wip-lombard-fig,
  .wip-page .wip-spectre-fig,
  .wip-page .wip-gestes-fig,
  .wip-page .fes-calques-fig,
  .wip-page .fes-saison-fig {
    width: 100vw; max-width: none;
    margin-left: calc(50% - 50vw); margin-right: 0;
    padding-inline: 10px;
  }
}

.secteur-content :is(.sct-intro-body, .sct-stack-card-text, .sct-copy, .sct-morph-sub) a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.secteur-content :is(.sct-intro-body, .sct-stack-card-text, .sct-copy, .sct-morph-sub) a:hover { color: var(--wip-orange); text-decoration-color: currentColor; }